fix(renderer): support xlink:href attribute in svg

tbosch · tbosch · commit 540b8c2a1ac7 · 2015-10-27T16:22:32.000-07:00
Closes #4956
diff --git a/modules/angular2/src/core/dom/browser_adapter.dart b/modules/angular2/src/core/dom/browser_adapter.dart
@@ -346,7 +346,14 @@ class BrowserDomAdapter extends GenericBrowserDomAdapter {
   String tagName(Element element) => element.tagName;
 
   Map<String, String> attributeMap(Element element) {
-    return new Map.from(element.attributes);
+    var result = {};
+    result.addAll(element.attributes);
+    // TODO(tbosch): element.getNamespacedAttributes() somehow does not return the attribute value
+    var xlinkHref = element.getAttributeNS('http://www.w3.org/1999/xlink', 'href');
+    if (xlinkHref != null) {
+      result['xlink:href'] = xlinkHref;
+    }
+    return result;
   }
 
   bool hasAttribute(Element element, String attribute) =>
diff --git a/modules/angular2/src/core/dom/browser_adapter.ts b/modules/angular2/src/core/dom/browser_adapter.ts
@@ -226,7 +226,7 @@ export class BrowserDomAdapter extends GenericBrowserDomAdapter {
   hasAttribute(element, attribute: string): boolean { return element.hasAttribute(attribute); }
   getAttribute(element, attribute: string): string { return element.getAttribute(attribute); }
   setAttribute(element, name: string, value: string) { element.setAttribute(name, value); }
-  setAttributeNS(ns: string, element, name: string, value: string) {
+  setAttributeNS(element, ns: string, name: string, value: string) {
     element.setAttributeNS(ns, name, value);
   }
   removeAttribute(element, attribute: string) { element.removeAttribute(attribute); }
diff --git a/modules/angular2/src/core/render/dom/dom_renderer.ts b/modules/angular2/src/core/render/dom/dom_renderer.ts
@@ -116,7 +116,7 @@ const SVG_ELEMENT_NAMES = CONST_EXPR({
   'vkern': true
 });
 
-const SVG_ATTR_NAMESPACES = CONST_EXPR({'href': XLINK_NAMESPACE});
+const SVG_ATTR_NAMESPACES = CONST_EXPR({'href': XLINK_NAMESPACE, 'xlink:href': XLINK_NAMESPACE});
 
 export abstract class DomRenderer extends Renderer implements NodeFactory<Node> {
   abstract registerComponentTemplate(templateId: number, commands: RenderTemplateCmd[],
diff --git a/modules/angular2/test/core/linker/integration_spec.ts b/modules/angular2/test/core/linker/integration_spec.ts
@@ -1745,22 +1745,24 @@ export function main() {
     if (DOM.supportsDOMEvents()) {
       describe('svg', () => {
         it('should support svg elements',
-           inject([TestComponentBuilder, AsyncTestCompleter],
-                  (tcb: TestComponentBuilder, async) => {
-                    tcb.overrideView(MyComp, new ViewMetadata({template: '<svg><g></g></svg>'}))
-                        .createAsync(MyComp)
-                        .then((rootTC) => {
-                          var el = rootTC.debugElement.nativeElement;
-                          var svg = DOM.childNodes(el)[0];
-                          var g = DOM.childNodes(svg)[0];
-                          expect(DOM.getProperty(<Element>svg, 'namespaceURI'))
-                              .toEqual('http://www.w3.org/2000/svg');
-                          expect(DOM.getProperty(<Element>g, 'namespaceURI'))
-                              .toEqual('http://www.w3.org/2000/svg');
+           inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder,
+                                                               async) => {
+             tcb.overrideView(MyComp,
+                              new ViewMetadata({template: '<svg><use xlink:href="Port" /></svg>'}))
+                 .createAsync(MyComp)
+                 .then((rootTC) => {
+                   var el = rootTC.debugElement.nativeElement;
+                   var svg = DOM.childNodes(el)[0];
+                   var use = DOM.childNodes(svg)[0];
+                   expect(DOM.getProperty(<Element>svg, 'namespaceURI'))
+                       .toEqual('http://www.w3.org/2000/svg');
+                   expect(DOM.getProperty(<Element>use, 'namespaceURI'))
+                       .toEqual('http://www.w3.org/2000/svg');
+                   expect(DOM.getOuterHTML(<HTMLElement>use)).toContain('xmlns:xlink');
 
-                          async.done();
-                        });
-                  }));
+                   async.done();
+                 });
+           }));
 
       });
     }

Original file line number	Diff line number	Diff line change
`@@ -226,7 +226,7 @@ export class BrowserDomAdapter extends GenericBrowserDomAdapter {`
`226`	`226`	`hasAttribute(element, attribute: string): boolean { return element.hasAttribute(attribute); }`
`227`	`227`	`getAttribute(element, attribute: string): string { return element.getAttribute(attribute); }`
`228`	`228`	`setAttribute(element, name: string, value: string) { element.setAttribute(name, value); }`
`229`		`- setAttributeNS(ns: string, element, name: string, value: string) {`
	`229`	`+ setAttributeNS(element, ns: string, name: string, value: string) {`
`230`	`230`	`element.setAttributeNS(ns, name, value);`
`231`	`231`	`}`
`232`	`232`	`removeAttribute(element, attribute: string) { element.removeAttribute(attribute); }`