Merge pull request #322 from arv/insert-adjacent-html

Implement inserAdjacentHTML

src/wrappers/HTMLElement.js

@@ -137,14 +137,54 @@
       return getOuterHTML(this);
     },
     set outerHTML(value) {
+      // TODO(arv): Mutation observer
       var p = this.parentNode;
       if (p) {
         p.invalidateShadowRenderer();
         this.impl.outerHTML = value;
       }
+    },
+
+    insertAdjacentHTML: function(position, text) {
+      var contextElement, refNode;
+      switch (String(position).toLowerCase()) {
+        case 'beforebegin':
+          contextElement = this.parentNode;
+          refNode = this;
+          break;
+        case 'afterend':
+          contextElement = this.parentNode;
+          refNode = this.nextSibling;
+          break;
+        case 'afterbegin':
+          contextElement = this;
+          refNode = this.firstChild;
+          break;
+        case 'beforeend':
+          contextElement = this;
+          refNode = null;
+          break;
+        default:
+          return;
+      }
+
+      var df = frag(contextElement, text);
+      contextElement.insertBefore(df, refNode);
     }
   });
 
+  function frag(contextElement, html) {
+    // TODO(arv): This does not work with SVG and other non HTML elements.
+    var p = unwrap(contextElement.cloneNode(false));
+    p.innerHTML = html;
+    var df = unwrap(document.createDocumentFragment());
+    var c;
+    while (c = p.firstChild) {
+      df.appendChild(c);
+    }
+    return wrap(df);
+  }
+
   function getter(name) {
     return function() {
       scope.renderAllPending();

test/js/MutationObserver/childList.js

@@ -646,6 +646,118 @@ suite('MutationObserver', function() {
       });
     });
 
+    test('insertAdjacentHTML beforebegin', function() {
+      var a = document.createElement('a');
+      a.innerHTML = '<b></b><c></c>';
+      var b = a.firstChild;
+      var c = a.lastChild;
+
+      var observer = new MutationObserver(function() {});
+      observer.observe(a, {
+        childList: true
+      });
+
+      c.insertAdjacentHTML('beforebegin', '<d></d><e></e>');
+
+      assert.equal(a.innerHTML, '<b></b><d></d><e></e><c></c>');
+      var d = b.nextSibling;
+      var e = d.nextSibling;
+
+      var records = observer.takeRecords();
+      assert.equal(records.length, 1);
+      expectMutationRecord(records[0], {
+        type: 'childList',
+        target: a,
+        addedNodes: [d, e],
+        previousSibling: b,
+        nextSibling: c
+      });
+    });
+
+    test('insertAdjacentHTML afterbegin', function() {
+      var a = document.createElement('a');
+      a.innerHTML = '<b></b><c></c>';
+      var b = a.firstChild;
+      var c = a.lastChild;
+
+      var observer = new MutationObserver(function() {});
+      observer.observe(a, {
+        childList: true
+      });
+
+      a.insertAdjacentHTML('afterbegin', '<d></d><e></e>');
+
+      assert.equal(a.innerHTML, '<d></d><e></e><b></b><c></c>');
+      var d = a.firstChild;
+      var e = d.nextSibling;
+
+      var records = observer.takeRecords();
+      assert.equal(records.length, 1);
+      expectMutationRecord(records[0], {
+        type: 'childList',
+        target: a,
+        addedNodes: [d, e],
+        previousSibling: null,
+        nextSibling: b
+      });
+    });
+
+    test('insertAdjacentHTML beforeend', function() {
+      var a = document.createElement('a');
+      a.innerHTML = '<b></b><c></c>';
+      var b = a.firstChild;
+      var c = a.lastChild;
+
+      var observer = new MutationObserver(function() {});
+      observer.observe(a, {
+        childList: true
+      });
+
+      a.insertAdjacentHTML('beforeend', '<d></d><e></e>');
+
+      assert.equal(a.innerHTML, '<b></b><c></c><d></d><e></e>');
+      var d = c.nextSibling;
+      var e = d.nextSibling;
+
+      var records = observer.takeRecords();
+      assert.equal(records.length, 1);
+      expectMutationRecord(records[0], {
+        type: 'childList',
+        target: a,
+        addedNodes: [d, e],
+        previousSibling: c,
+        nextSibling: null
+      });
+    });
+
+    test('insertAdjacentHTML afterend', function() {
+      var a = document.createElement('a');
+      a.innerHTML = '<b></b><c></c>';
+      var b = a.firstChild;
+      var c = a.lastChild;
+
+      var observer = new MutationObserver(function() {});
+      observer.observe(a, {
+        childList: true
+      });
+
+      b.insertAdjacentHTML('afterend', '<d></d><e></e>');
+
+      assert.equal(a.innerHTML, '<b></b><d></d><e></e><c></c>');
+      var d = b.nextSibling;
+      var e = d.nextSibling;
+
+      var records = observer.takeRecords();
+      assert.equal(records.length, 1);
+      expectMutationRecord(records[0], {
+        type: 'childList',
+        target: a,
+        addedNodes: [d, e],
+        previousSibling: b,
+        nextSibling: c
+      });
+    });
+
   });
 
 });