Add support for strip-whitespace. Should fix #2511.

Author: Steven Orvell

src/lib/annotations/annotations.html

@@ -75,17 +75,18 @@
     parseAnnotations: function(template) {
       var list = [];
       var content = template._content || template.content;
-      this._parseNodeAnnotations(content, list);
+      this._parseNodeAnnotations(content, list, 
+        template.hasAttribute('strip-whitespace'));
       return list;
     },
 
     // add annotations gleaned from subtree at `node` to `list`
-    _parseNodeAnnotations: function(node, list) {
+    _parseNodeAnnotations: function(node, list, stripWhiteSpace) {
       return node.nodeType === Node.TEXT_NODE ?
         this._parseTextNodeAnnotation(node, list) :
           // TODO(sjmiles): are there other nodes we may encounter
           // that are not TEXT_NODE but also not ELEMENT?
-          this._parseElementAnnotations(node, list);
+          this._parseElementAnnotations(node, list, stripWhiteSpace);
     },
 
     _bindingRegex: /([^{[]*)({{|\[\[)([^}\]]*)(?:]]|}})/g,
@@ -181,15 +182,15 @@
     },
 
     // add annotations gleaned from Element `node` to `list`
-    _parseElementAnnotations: function(element, list) {
+    _parseElementAnnotations: function(element, list, stripWhiteSpace) {
       var annote = {
         bindings: [],
         events: []
       };
       if (element.localName === 'content') {
         list._hasContent = true;
       }
-      this._parseChildNodesAnnotations(element, annote, list);
+      this._parseChildNodesAnnotations(element, annote, list, stripWhiteSpace);
       // TODO(sjmiles): is this for non-ELEMENT nodes? If so, we should
       // change the contract of this method, or filter these out above.
       if (element.attributes) {
@@ -210,9 +211,12 @@
 
     // add annotations gleaned from children of `root` to `list`, `root`'s
     // `annote` is supplied as it is the annote.parent of added annotations
-    _parseChildNodesAnnotations: function(root, annote, list, callback) {
+    _parseChildNodesAnnotations: function(root, annote, list, stripWhiteSpace) {
       if (root.firstChild) {
-        for (var i=0, node=root.firstChild; node; node=node.nextSibling, i++) {
+        var node = root.firstChild;
+        var i = 0;
+        while (node) {
+          var next = node.nextSibling;
           if (node.localName === 'template' &&
             !node.hasAttribute('preserve-content')) {
             this._parseTemplate(node, i, list, annote);
@@ -222,18 +226,29 @@
           // note that root.normalize() should work but does not so we do this
           // manually.
           if (node.nodeType === Node.TEXT_NODE) {
-            var n = node.nextSibling;
+            var n = next;
             while (n && (n.nodeType === Node.TEXT_NODE)) {
               node.textContent += n.textContent;
+              next = n.nextSibling;
               root.removeChild(n);
-              n = n.nextSibling;
+              n = next;
+            }
+            // optionally strip whitespace
+            if (stripWhiteSpace && !node.textContent.trim()) {
+              root.removeChild(node);
             }
           }
-          var childAnnotation = this._parseNodeAnnotations(node, list, callback);
-          if (childAnnotation) {
-            childAnnotation.parent = annote;
-            childAnnotation.index = i;
+          // if this node didn't get evacipated, parse it.
+          if (node.parentNode) {
+            var childAnnotation = this._parseNodeAnnotations(node, list, 
+              stripWhiteSpace);
+            if (childAnnotation) {
+              childAnnotation.parent = annote;
+              childAnnotation.index = i;
+            }
           }
+          node = next;
+          i++;
         }
       }
     },

test/runner.html

@@ -25,6 +25,7 @@
       'unit/async.html',
       'unit/behaviors.html',
       'unit/template.html',
+      'unit/template-whitespace.html',
       'unit/ready.html',
       'unit/ready-shadow.html',
       'unit/attached-style.html',

test/unit/template-whitespace.html

@@ -0,0 +1,138 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2014 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
+-->
+<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>
+
+<dom-module id="has-whitespace">
+
+  <template> <div>A</div> <div>B</div> </template>
+
+  <script>
+  HTMLImports.whenReady(function() {
+    Polymer({
+      is: 'has-whitespace'
+    });
+  });
+  </script>
+
+</dom-module>
+
+
+
+<dom-module id="no-whitespace">
+
+  <template strip-whitespace>
+    <div>A</div>
+    <div>A</div>
+    <div>B</div>
+  </template>
+  
+  <script>
+  HTMLImports.whenReady(function() {
+    Polymer({
+      is: 'no-whitespace'
+    });
+  });  
+  </script>
+
+</dom-module>
+
+
+
+<dom-module id="no-whitespace-style">
+
+  <template strip-whitespace> 
+    <style>
+      :host {
+        display: block;
+      }
+    </style>
+    <div>A</div>
+    <div>B</div>
+  </template>
+
+  <script>
+  HTMLImports.whenReady(function() {
+    Polymer({
+      is: 'no-whitespace-style'
+    });
+  });  
+  </script>
+
+</dom-module>
+
+<dom-module id="no-whitespace-nested">
+
+  <template strip-whitespace> 
+    <div>
+      <div>A</div>
+    </div>
+    <div>
+      <div>B</div>
+    </div>
+  </template>
+
+  <script>
+  HTMLImports.whenReady(function() {
+    Polymer({
+      is: 'no-whitespace-nested'
+    });
+  });  
+  </script>
+
+</dom-module>
+
+
+
+<script>
+
+  suite('polymer: template whitespace', function() {
+
+    test('template stamped with whitespace preserved', function() {
+      var el = document.createElement('has-whitespace');
+      assert.equal(Polymer.dom(el.root).childNodes.length, 5);
+      assert.equal(Polymer.dom(el.root).childNodes[0].nodeType, Node.TEXT_NODE);
+    });
+
+    test('template stamped without whitespace when strip-template is used', function() {
+      var el = document.createElement('no-whitespace');
+      document.body.appendChild(el);
+      assert.equal(Polymer.dom(el.root).childNodes.length, 3);
+      assert.equal(Polymer.dom(el.root).childNodes.length, Polymer.dom(el.root).children.length);
+    });
+
+    test('template including style stamped without whitespace when strip-template is used', function() {
+      var el = document.createElement('no-whitespace-style');
+      document.body.appendChild(el);
+      assert.equal(Polymer.dom(el.root).childNodes.length, 2);
+      assert.equal(Polymer.dom(el.root).childNodes.length, Polymer.dom(el.root).children.length);
+    });
+
+    test('template with nested content stamped without whitespace when strip-template is used', function() {
+      var el = document.createElement('no-whitespace-nested');
+      document.body.appendChild(el);
+      assert.equal(Polymer.dom(el.root).childNodes.length, 2);
+      assert.equal(Polymer.dom(el.root).childNodes.length, Polymer.dom(el.root).children.length);
+      assert.equal(Polymer.dom(el.root).childNodes[0].childNodes.length, Polymer.dom(el.root).childNodes[0].children.length);
+      assert.equal(Polymer.dom(el.root).childNodes[1].childNodes.length, Polymer.dom(el.root).childNodes[1].children.length);
+    });
+
+  });
+
+</script>
+</body>
+</html>