iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(ivy): define correct SVG namespace (FW-757) (#27529) 

The trailing slash in SVG namespace prevented its correct resolution, thus triggering issues at runtime.

PR Close #27529
This commit is contained in:
Andrew Kushnir 2018-12-06 16:39:43 -08:00 committed by Alex Rickabaugh
parent 84ad0ccfa0
commit 255e672295
2 changed files with 45 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/src/render3/instructions.ts
View File

@ -444,7 +444,7 @@ function getRenderFlags(view: LView): RenderFlags {
let _currentNamespace: string|null = null;
export function namespaceSVG() {
_currentNamespace = 'http://www.w3.org/2000/svg/';
_currentNamespace = 'http://www.w3.org/2000/svg';
}
export function namespaceMathML() {

45
packages/core/test/render3/styling/class_and_style_bindings_spec.ts
View File

@ -8,7 +8,7 @@
import {createRootContext} from '../../../src/render3/component';
import {getLContext} from '../../../src/render3/context_discovery';
import {defineComponent} from '../../../src/render3/index';
import {createLView, createTView, elementClassProp, elementEnd, elementStart, elementStyleProp, elementStyling, elementStylingApply, elementStylingMap} from '../../../src/render3/instructions';
import {createLView, createTView, elementClassProp, elementEnd, elementStart, elementStyleProp, elementStyling, elementStylingApply, elementStylingMap, namespaceSVG} from '../../../src/render3/instructions';
import {InitialStylingFlags, RenderFlags} from '../../../src/render3/interfaces/definition';
import {BindingStore, BindingType, PlayState, Player, PlayerFactory, PlayerHandler} from '../../../src/render3/interfaces/player';
import {RElement, Renderer3, domRendererFactory3} from '../../../src/render3/interfaces/renderer';
@ -228,6 +228,49 @@ describe('style and class based bindings', () => {
renderToHtml(Template, {myStyles: {width: '200px', height: null}, myWidth: null}, 1))
.toEqual('<span style="height: 100px; opacity: 0.5; width: 200px;"></span>');
});
it('should support styles on SVG elements', () => {
// <svg [style.width.px]="diameter" [style.height.px]="diameter">
// <circle stroke="green" fill="yellow" />
// </svg>
class Comp {
diameter: number = 100;
static ngComponentDef = defineComponent({
type: Comp,
selectors: [['comp']],
factory: () => new Comp(),
consts: 2,
vars: 0,
template: (rf: RenderFlags, ctx: Comp) => {
if (rf & RenderFlags.Create) {
namespaceSVG();
elementStart(0, 'svg');
elementStyling(null, ['width', 'height']);
elementStart(1, 'circle', ['stroke', 'green', 'fill', 'yellow']);
elementEnd();
elementEnd();
}
if (rf & RenderFlags.Update) {
elementStyleProp(0, 0, ctx.diameter, 'px');
elementStyleProp(0, 1, ctx.diameter, 'px');
elementStylingApply(0);
}
}
});
}
const fixture = new ComponentFixture(Comp);
fixture.update();
const target = fixture.hostElement.querySelector('svg') !as any;
expect(target.style.width).toEqual('100px');
expect(target.style.height).toEqual('100px');
expect(fixture.html)
.toEqual(
'<svg style="height: 100px; width: 100px;"><circle fill="yellow" stroke="green"></circle></svg>');
});
});
describe('helper functions', () => {