set class attribute instead of using classname

Fixes #2407 add test with dynamic svg elements Test for fill-opacity, it doesn't get munged like color Most browsers don't like CSS for sizing the circle :(
Polymer · Nov 24, 2015 · 690838a · 690838a
1 parent c36d6c1
commit 690838a
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 9 deletions.
diff --git a/src/standard/styling.html b/src/standard/styling.html
@@ -68,7 +68,7 @@
           }
         }
         cssText += styleUtil.cssFromModule(this.is);
-        // check if we have a disconnected template and add styles from that 
+        // check if we have a disconnected template and add styles from that
         // if so; if our template has no parent or is not in our dom-module...
         var p = this._template && this._template.parentNode;
         if (this._template && (!p || p.id.toLowerCase() !== this.is)) {
@@ -129,10 +129,12 @@
         var self = this;
         var scopify = function(node) {
           if (node.nodeType === Node.ELEMENT_NODE) {
-            node.className = self._scopeElementClass(node, node.className);
+            var className = node.getAttribute('class');
+            node.setAttribute('class', self._scopeElementClass(node, className));
             var n$ = node.querySelectorAll('*');
             for (var i=0, n; (i<n$.length) && (n=n$[i]); i++) {
-              n.className = self._scopeElementClass(n, n.className);
+              className = n.getAttribute('class');
+              n.setAttribute('class', self._scopeElementClass(n, className));
             }
           }
         };

diff --git a/test/unit/styling-scoped-elements.html b/test/unit/styling-scoped-elements.html
@@ -308,4 +308,41 @@
     }
   });
 })();
-</script>
+</script>
+
+<template id="svg">
+  <svg class="svg" viewBox="0 0 24 24">
+    <circle id="circle" r="12" cx="12" cy="12" />
+  </svg>
+</template>
+
+<dom-module id="x-dynamic-svg">
+  <template>
+    <style>
+      .svg {
+        height: 24px;
+        width: 24px;
+      }
+      #circle {
+        fill: red;
+        fill-opacity: 0.5;
+      }
+    </style>
+    <div id="container"></div>
+  </template>
+  <script>
+    (function() {
+      var doc = document._currentScript.ownerDocument;
+      var template = doc.querySelector('template#svg');
+
+      Polymer({
+        is: 'x-dynamic-svg',
+        ready: function() {
+          this.scopeSubtree(this.$.container, true);
+          var dom = document.importNode(template.content, true);
+          this.$.container.appendChild(dom);
+        }
+      });
+    })();
+  </script>
+</dom-module>
diff --git a/test/unit/styling-scoped.html b/test/unit/styling-scoped.html
@@ -43,6 +43,8 @@
     <span id="dom-bind-dynamic" class$="[[dynamic]]">[[dynamic]]</span>
   </template>
 
+  <x-dynamic-svg></x-dynamic-svg>
+
 <script>
   suite('scoped-styling', function() {
 
@@ -61,7 +63,7 @@
   test(':host, :host(...)', function() {
     assertComputed(styled, '1px');
     assertComputed(styledWide, '2px');
-    
+
   });
 
   test(':host-context(...)', function() {
@@ -210,8 +212,9 @@
 
       test('styles shimmed in registration order', function() {
         var s$ = document.head.querySelectorAll('style[scope]');
-        var expected = ['x-gchild', 'x-child2', 'x-styled', 'x-button', 
-        'x-mixed-case', 'x-mixed-case-button', 'x-dynamic-scope', 'x-dynamic-template'];
+        var expected = ['x-gchild', 'x-child2', 'x-styled', 'x-button',
+        'x-mixed-case', 'x-mixed-case-button', 'x-dynamic-scope',
+        'x-dynamic-template', 'x-dynamic-svg'];
         var actual = [];
         for (var i=0; i<s$.length; i++) {
           actual.push(s$[i].getAttribute('scope'));
@@ -252,10 +255,21 @@
         x = document.createElement('button', 'x-mixed-case-button');
         document.body.appendChild(x);
         assertComputed(x, '14px');
-       
+
       });
     });
-
+
+    test('svg classes are dynamically scoped correctly', function() {
+      var container = document.querySelector('x-dynamic-svg').$.container;
+      var svg = container.querySelector('.svg');
+      var computed = getComputedStyle(svg);
+      assert.equal(computed.height, '24px');
+      assert.equal(computed.width, '24px');
+      var circle = container.querySelector('#circle');
+      computed = getComputedStyle(circle);
+      assert.equal(computed['fill-opacity'], '0.5');
+    });
+
 });
 
 </script>