Fixes #3676: retain <style in <template preserve-content/>

Polymer · Aug 1, 2016 · 8a4c00c · 8a4c00c
1 parent 409ad83
commit 8a4c00c
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 1 deletion.
diff --git a/src/lib/style-util.html b/src/lib/style-util.html
@@ -142,7 +142,10 @@
           e = e$[i];
           // look inside templates for elements
           if (e.localName === 'template') {
-            cssText += this.cssFromElement(e);
+            // retain css content when specified,
+            if (!e.hasAttribute('preserve-content')) {
+              cssText += this.cssFromElement(e);
+            }
           } else {
             // style elements inside dom-modules will apply to the main document
             // we don't want this, so we remove them here.

diff --git a/test/runner.html b/test/runner.html
@@ -65,6 +65,7 @@
       'unit/custom-style-late.html',
       'unit/dynamic-import.html',
       'unit/templatizer.html',
+      'unit/template-preserve-content.html',
       'unit/dom-repeat.html',
       'unit/dom-if.html',
       'unit/dom-template.html',

diff --git a/test/unit/template-preserve-content.html b/test/unit/template-preserve-content.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset='utf-8'>
+    <script src='../../../webcomponentsjs/webcomponents-lite.js'></script>
+    <script src='../../../web-component-tester/browser.js'></script>
+    <link rel='import' href='../../polymer.html'>
+  </head>
+  <body>
+    <preservation-templatizer></preservation-templatizer>
+
+    <template id='stampable'>
+      <h2>Unmodified</h2>
+      <span id='html'>{{html}}</span>
+      <template preserve-content id='unmodified'>
+        <style>
+          [attribute] {
+            display: none,
+          }
+        </style>
+        <div>style tag present</div>
+      </template>
+    </template>
+
+    <dom-module id='preservation-templatizer'>
+
+      <template>
+        <h2>Modified</h2>
+        <span>{{html}}<span/>
+        <template preserve-content id='modified'>
+          <style>
+            #identifier {
+              color: blue;
+            }
+          </style>
+          <div>style tag missing</div>
+        </template>
+      </template>
+      <script>
+      HTMLImports.whenReady(function() {
+        Polymer({
+          is: 'preservation-templatizer',
+          behaviors: [
+            Polymer.Templatizer
+          ],
+          created: function () {
+            this.templatize(document.body.querySelector('#stampable'));
+          },
+          ready: function () {
+            var div = document.createElement('DIV');
+            var instance = this.stamp({html: 'unresolved'});
+            var unmodified = instance.root.querySelector('#unmodified');
+
+            div.innerHTML = (this.$.modified).innerHTML;
+            console.log(div.firstElementChild.localName, div.firstElementChild);
+
+            div.innerHTML = (unmodified).innerHTML;
+            console.log(div.firstElementChild.localName, div.firstElementChild);
+          }
+        });
+      });
+      </script>
+    </dom-module>
+
+    <script>
+    suite('polymer: template preserve-content', function() {
+
+      test('nested <template preserve-content/> should retain <style/> in a <dom-module/>', function() {
+        var element = document.querySelector('preservation-templatizer');
+        assert.ok(element.$.modified.content.querySelector('style'));
+      });
+
+      test('nested <template preserve-content/> should retain <style/> in a stamped <template/>', function() {
+        var element = document.querySelector('preservation-templatizer');
+        element.templatize(document.querySelector('#stampable'));
+        assert.ok(element.stamp().root.querySelector('#unmodified').content.querySelector('style'));
+      });
+
+    });
+    </script>
+  </body>
+</html>