Merge pull request #39 from webcomponents/fix-table-element-innerhtml…

…-ie-11 Fix table element parsing in ie11
webcomponents · May 22, 2018 · f784f19 · f784f19
2 parents d13d710 + a690841
commit f784f19
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 7 deletions.
diff --git a/template.js b/template.js
@@ -194,7 +194,7 @@
     */
     PolyfilledHTMLTemplateElement.decorate = function(template) {
       // if the template is decorated or not in HTML namespace, return fast
-      if (template.content || 
+      if (template.content ||
           template.namespaceURI !== document.documentElement.namespaceURI) {
         return;
       }
@@ -227,19 +227,48 @@
       PolyfilledHTMLTemplateElement.bootstrap(template.content);
     };
 
+    // Taken from https://github.com/jquery/jquery/blob/73d7e6259c63ac45f42c6593da8c2796c6ce9281/src/manipulation/wrapMap.js
+    var topLevelWrappingMap = {
+      'option': ['select'],
+      'thead': ['table'],
+      'col': ['colgroup', 'table'],
+      'tr': ['tbody', 'table'],
+      'th': ['tr', 'tbody', 'table'],
+      'td': ['tr', 'tbody', 'table']
+    };
+
+    var getTagName = function(text) {
+      // Taken from https://github.com/jquery/jquery/blob/73d7e6259c63ac45f42c6593da8c2796c6ce9281/src/manipulation/var/rtagName.js
+      return ( /<([a-z][^/\0>\x20\t\r\n\f]+)/i.exec(text) || ['', ''])[1].toLowerCase();
+    };
+
     var defineInnerHTML = function defineInnerHTML(obj) {
       Object.defineProperty(obj, 'innerHTML', {
         get: function() {
           return getInnerHTML(this);
         },
         set: function(text) {
+          // For IE11, wrap the text in the correct (table) context
+          var wrap = topLevelWrappingMap[getTagName(text)];
+          if (wrap) {
+            for (var i = 0; i < wrap.length; i++) {
+              text = '<' + wrap[i] + '>' + text + '</' + wrap[i] + '>';
+            }
+          }
           contentDoc.body.innerHTML = text;
           PolyfilledHTMLTemplateElement.bootstrap(contentDoc);
           while (this.content.firstChild) {
             capturedRemoveChild.call(this.content, this.content.firstChild);
           }
-          while (contentDoc.body.firstChild) {
-            capturedAppendChild.call(this.content, contentDoc.body.firstChild);
+          var body = contentDoc.body;
+          // If we had wrapped, get back to the original node
+          if (wrap) {
+            for (var j = 0; j < wrap.length; j++) {
+              body = body.lastChild;
+            }
+          }
+          while (body.firstChild) {
+            capturedAppendChild.call(this.content, body.firstChild);
           }
         },
         configurable: true
@@ -486,7 +515,7 @@
         } else {
           dom = importNode.call(this.ownerDocument, this, true);
         }
-      } else if (this.nodeType === Node.ELEMENT_NODE && 
+      } else if (this.nodeType === Node.ELEMENT_NODE &&
                  this.localName === TEMPLATE_TAG &&
                  this.namespaceURI == document.documentElement.namespaceURI) {
         dom = PolyfilledHTMLTemplateElement._cloneNode(this, deep);

diff --git a/tests/basic.html b/tests/basic.html
@@ -132,9 +132,7 @@
           assert.equal(imp.innerHTML, s);
         });
 
-        // Not yet working, as the setter of `innerHTML` moves the table elements
-        // into a non-table context, which are removed by the parser
-        test.skip('innerHTML (table elements)', function() {
+        test('innerHTML (tr element)', function() {
           if (!canInnerHTML) {
             this.skip();
           }
@@ -145,6 +143,61 @@
           assert.equal(imp.innerHTML, s);
         });
 
+        test('innerHTML (td element)', function() {
+          if (!canInnerHTML) {
+            this.skip();
+          }
+          var imp = document.createElement('template');
+          assert.equal(imp.innerHTML, '');
+          var s = '<td class="record"><span class="extra">nothing</span></td>';
+          imp.innerHTML = s;
+          assert.equal(imp.innerHTML, s);
+        });
+
+        test('innerHTML (th element)', function() {
+          if (!canInnerHTML) {
+            this.skip();
+          }
+          var imp = document.createElement('template');
+          assert.equal(imp.innerHTML, '');
+          var s = '<th class="record"><span class="extra">nothing</span></th>';
+          imp.innerHTML = s;
+          assert.equal(imp.innerHTML, s);
+        });
+
+        test('innerHTML (col element)', function() {
+          if (!canInnerHTML) {
+            this.skip();
+          }
+          var imp = document.createElement('template');
+          assert.equal(imp.innerHTML, '');
+          var s = '<col style="background-color: rgb(0, 0, 0);"><col span="2">';
+          imp.innerHTML = s;
+          assert.equal(imp.innerHTML, s);
+        });
+
+        test('innerHTML (thead element)', function() {
+          if (!canInnerHTML) {
+            this.skip();
+          }
+          var imp = document.createElement('template');
+          assert.equal(imp.innerHTML, '');
+          var s = '<thead><tr><th>Header content 1</th><th>Header content 2</th></tr></thead>';
+          imp.innerHTML = s;
+          assert.equal(imp.innerHTML, s);
+        });
+
+        test('innerHTML (option element)', function() {
+          if (!canInnerHTML) {
+            this.skip();
+          }
+          var imp = document.createElement('template');
+          assert.equal(imp.innerHTML, '');
+          var s = '<option value="one">One</option><option value="two">two</option>';
+          imp.innerHTML = s;
+          assert.equal(imp.innerHTML, s);
+        });
+
         test('clone', function() {
           var imp = document.createElement('template');
           var s = '<div>Hi</div>';