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

fix(ivy): Ensure proper namespace is used to create elements in JIT (#28144) 

PR Close #28144
This commit is contained in:
Ben Lesh 2019-01-14 15:58:05 -08:00 committed by Alex Rickabaugh
parent a58fd210e9
commit 2b9cc8503d
2 changed files with 27 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
packages/core/test/linker/integration_spec.ts
View File

@ -1852,25 +1852,24 @@ function declareTests(config?: {useJit: boolean}) {
expect(firstAttribute.namespaceURI).toEqual('http://www.w3.org/1999/xlink'); expect(firstAttribute.namespaceURI).toEqual('http://www.w3.org/1999/xlink');
}); });
fixmeIvy('FW-811: Align HTML namespaces between Ivy and Render2') it('should support foreignObjects with document fragments', () => {
.it('should support foreignObjects with document fragments', () => { TestBed.configureTestingModule({declarations: [MyComp]});
TestBed.configureTestingModule({declarations: [MyComp]}); const template =
const template = '<svg><foreignObject><xhtml:div><p>Test</p></xhtml:div></foreignObject></svg>';
'<svg><foreignObject><xhtml:div><p>Test</p></xhtml:div></foreignObject></svg>'; TestBed.overrideComponent(MyComp, {set: {template}});
TestBed.overrideComponent(MyComp, {set: {template}}); const fixture = TestBed.createComponent(MyComp);
const fixture = TestBed.createComponent(MyComp);
const el = fixture.nativeElement; const el = fixture.nativeElement;
const svg = getDOM().childNodes(el)[0]; const svg = getDOM().childNodes(el)[0];
const foreignObject = getDOM().childNodes(svg)[0]; const foreignObject = getDOM().childNodes(svg)[0];
const p = getDOM().childNodes(foreignObject)[0]; const p = getDOM().childNodes(foreignObject)[0];
expect(getDOM().getProperty(<Element>svg, 'namespaceURI')) expect(getDOM().getProperty(<Element>svg, 'namespaceURI'))
.toEqual('http://www.w3.org/2000/svg'); .toEqual('http://www.w3.org/2000/svg');
expect(getDOM().getProperty(<Element>foreignObject, 'namespaceURI')) expect(getDOM().getProperty(<Element>foreignObject, 'namespaceURI'))
.toEqual('http://www.w3.org/2000/svg'); .toEqual('http://www.w3.org/2000/svg');
expect(getDOM().getProperty(<Element>p, 'namespaceURI')) expect(getDOM().getProperty(<Element>p, 'namespaceURI'))
.toEqual('http://www.w3.org/1999/xhtml'); .toEqual('http://www.w3.org/1999/xhtml');
}); });
}); });
describe('attributes', () => { describe('attributes', () => {

11
packages/platform-browser/src/dom/dom_renderer.ts
View File

@ -111,7 +111,9 @@ class DefaultDomRenderer2 implements Renderer2 {
createElement(name: string, namespace?: string): any { createElement(name: string, namespace?: string): any {
if (namespace) { if (namespace) {
return document.createElementNS(NAMESPACE_URIS[namespace], name); // In cases where Ivy (not ViewEngine) is giving us the actual namespace, the look up by key
// will result in undefined, so we just return the namespace here.
return document.createElementNS(NAMESPACE_URIS[namespace] || namespace, name);
} }
return document.createElement(name); return document.createElement(name);
@ -154,6 +156,8 @@ class DefaultDomRenderer2 implements Renderer2 {
setAttribute(el: any, name: string, value: string, namespace?: string): void { setAttribute(el: any, name: string, value: string, namespace?: string): void {
if (namespace) { if (namespace) {
name = `${namespace}:${name}`; name = `${namespace}:${name}`;
// TODO(benlesh): Ivy may cause issues here because it's passing around
// full URIs for namespaces, therefore this lookup will fail.
const namespaceUri = NAMESPACE_URIS[namespace]; const namespaceUri = NAMESPACE_URIS[namespace];
if (namespaceUri) { if (namespaceUri) {
el.setAttributeNS(namespaceUri, name, value); el.setAttributeNS(namespaceUri, name, value);
@ -167,10 +171,15 @@ class DefaultDomRenderer2 implements Renderer2 {
removeAttribute(el: any, name: string, namespace?: string): void { removeAttribute(el: any, name: string, namespace?: string): void {
if (namespace) { if (namespace) {
// TODO(benlesh): Ivy may cause issues here because it's passing around
// full URIs for namespaces, therefore this lookup will fail.
const namespaceUri = NAMESPACE_URIS[namespace]; const namespaceUri = NAMESPACE_URIS[namespace];
if (namespaceUri) { if (namespaceUri) {
el.removeAttributeNS(namespaceUri, name); el.removeAttributeNS(namespaceUri, name);
} else { } else {
// TODO(benlesh): Since ivy is passing around full URIs for namespaces
// this could result in properties like `http://www.w3.org/2000/svg:cx="123"`,
// which is wrong.
el.removeAttribute(`${namespace}:${name}`); el.removeAttribute(`${namespace}:${name}`);
} }
} else { } else {