diff --git a/packages/core/test/linker/integration_spec.ts b/packages/core/test/linker/integration_spec.ts
index ef8343d4db..fbe76fb9ab 100644
--- a/packages/core/test/linker/integration_spec.ts
+++ b/packages/core/test/linker/integration_spec.ts
@@ -1852,25 +1852,24 @@ function declareTests(config?: {useJit: boolean}) {
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', () => {
- TestBed.configureTestingModule({declarations: [MyComp]});
- const template =
- '';
- TestBed.overrideComponent(MyComp, {set: {template}});
- const fixture = TestBed.createComponent(MyComp);
+ it('should support foreignObjects with document fragments', () => {
+ TestBed.configureTestingModule({declarations: [MyComp]});
+ const template =
+ '';
+ TestBed.overrideComponent(MyComp, {set: {template}});
+ const fixture = TestBed.createComponent(MyComp);
- const el = fixture.nativeElement;
- const svg = getDOM().childNodes(el)[0];
- const foreignObject = getDOM().childNodes(svg)[0];
- const p = getDOM().childNodes(foreignObject)[0];
- expect(getDOM().getProperty(svg, 'namespaceURI'))
- .toEqual('http://www.w3.org/2000/svg');
- expect(getDOM().getProperty(foreignObject, 'namespaceURI'))
- .toEqual('http://www.w3.org/2000/svg');
- expect(getDOM().getProperty(p, 'namespaceURI'))
- .toEqual('http://www.w3.org/1999/xhtml');
- });
+ const el = fixture.nativeElement;
+ const svg = getDOM().childNodes(el)[0];
+ const foreignObject = getDOM().childNodes(svg)[0];
+ const p = getDOM().childNodes(foreignObject)[0];
+ expect(getDOM().getProperty(svg, 'namespaceURI'))
+ .toEqual('http://www.w3.org/2000/svg');
+ expect(getDOM().getProperty(foreignObject, 'namespaceURI'))
+ .toEqual('http://www.w3.org/2000/svg');
+ expect(getDOM().getProperty(p, 'namespaceURI'))
+ .toEqual('http://www.w3.org/1999/xhtml');
+ });
});
describe('attributes', () => {
diff --git a/packages/platform-browser/src/dom/dom_renderer.ts b/packages/platform-browser/src/dom/dom_renderer.ts
index 4c32f03c43..719ddce74e 100644
--- a/packages/platform-browser/src/dom/dom_renderer.ts
+++ b/packages/platform-browser/src/dom/dom_renderer.ts
@@ -111,7 +111,9 @@ class DefaultDomRenderer2 implements Renderer2 {
createElement(name: string, namespace?: string): any {
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);
@@ -154,6 +156,8 @@ class DefaultDomRenderer2 implements Renderer2 {
setAttribute(el: any, name: string, value: string, namespace?: string): void {
if (namespace) {
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];
if (namespaceUri) {
el.setAttributeNS(namespaceUri, name, value);
@@ -167,10 +171,15 @@ class DefaultDomRenderer2 implements Renderer2 {
removeAttribute(el: any, name: string, namespace?: string): void {
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];
if (namespaceUri) {
el.removeAttributeNS(namespaceUri, name);
} 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}`);
}
} else {