Fixes Polymer/polymer#403

googlearchive · Jan 27, 2014 · c6b006b · c6b006b
1 parent 170477e
commit c6b006b
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 0 deletions.
diff --git a/src/ShadowCSS.js b/src/ShadowCSS.js
@@ -535,6 +535,12 @@ var ShadowCSS = {
         polyfillHost).replace(colonAncestorRe, polyfillAncestor);
   },
   propertiesFromRule: function(rule) {
+    // TODO(sorvell): Safari cssom incorrectly removes quotes from the content
+    // property. (https://bugs.webkit.org/show_bug.cgi?id=118045)
+    if (rule.style.content && !rule.style.content.match(/['"]+/)) {
+      return rule.style.cssText.replace(/content:[^;]*;/g, 'content: \'' + 
+          rule.style.content + '\';');
+    }
     return rule.style.cssText;
   }
 };

diff --git a/test/html/styling/before-content.html b/test/html/styling/before-content.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<!--
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+<html>
+<head>
+  <title>content in :before pseudo-class</title>
+  <script src="../../../platform.js"></script>
+  <script src="register.js"></script>
+  <script src="../../../../tools/test/htmltest.js"></script>
+  <script src="../../../../tools/test/chai/chai.js"></script>
+</head>
+<body>
+  <x-test></x-test>
+
+  <template id="x-test">
+    <style>
+      :host {
+        display: block;
+      }
+      #one::before {
+        color: green;
+        content: "hithere"; /* no space */
+        background: red;
+      }
+      #two::before {
+        content: "hithere ";
+      }
+      #three::before {
+        content: " hithere";
+      }
+      #four::before {
+        content: "hi there";
+      }
+    </style>
+    <div id="one">1</div>
+    <div id="two">2</div>
+    <div id="three">3</div>
+    <div id="four">4</div>
+  </template>
+  <script>
+    register('x-test', '', HTMLElement.prototype);
+
+    document.addEventListener('WebComponentsReady', function() {
+      setTimeout(function() {
+        var root = document.querySelector('x-test').shadowRoot;
+        function testContent(node, content) {
+          chai.assert(getComputedStyle(node, ':before').content, content, 'content ' +
+              'property set correctly.');
+        }
+        testContent(root.querySelector('#one'), 'hithere');
+        testContent(root.querySelector('#two'), 'hithere ');
+        testContent(root.querySelector('#three'), ' hithere');
+        testContent(root.querySelector('#four'), 'hi there');
+        done();
+      });
+    });
+  </script>
+
+
+</body>
+</html>
diff --git a/test/js/tests.js b/test/js/tests.js
@@ -30,6 +30,8 @@ htmlSuite('styling', function() {
   htmlTest('html/styling/colon-host.html?shadow&register');
   htmlTest('html/styling/combinators.html');
   htmlTest('html/styling/combinators.html?shadow&register');
+  htmlTest('html/styling/before-content.html');
+  htmlTest('html/styling/before-content.html?shadow&register');
 });
 
 htmlSuite('Library Cooperation', function() {