Implement element.insertAdjacentHTML()

Fixes #1219.
jsdom · Jan 17, 2016 · ac321fc · ac321fc
1 parent 892c63d
commit ac321fc
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 1 deletion.
diff --git a/lib/jsdom/living/nodes/Element-impl.js b/lib/jsdom/living/nodes/Element-impl.js
@@ -452,6 +452,40 @@ class ElementImpl extends NodeImpl {
       width: 0
     }];
   }
+
+  insertAdjacentHTML(position, text) {
+    position = position.toLowerCase();
+
+    if (this.parentNode === null || this.parentNode.nodeType === NODE_TYPE.DOCUMENT_NODE) {
+      throw new DOMException(DOMException.NO_MODIFICATION_ALLOWED_ERR, "Cannot insert HTML adjacent to parent-less " +
+        "nodes or children of document nodes.");
+    }
+
+    const fragment = this.ownerDocument.createElement("template");
+    fragment.innerHTML = text;
+
+    switch (position) {
+      case "beforebegin":
+        this.parentNode.insertBefore(fragment.content, this);
+        break;
+
+      case "afterbegin":
+        this.insertBefore(fragment.content, this.firstChild);
+        break;
+
+      case "beforeend":
+        this.appendChild(fragment.content);
+        break;
+
+      case "afterend":
+        this.parentNode.insertBefore(fragment.content, this.nextSibling);
+        break;
+
+      default:
+        throw new DOMException(DOMException.SYNTAX_ERR, "The value provided is not one of 'beforebegin', " +
+          "'afterbegin', 'beforeend', or 'afterend'.");
+    }
+  }
 }
 
 idlUtils.mixin(ElementImpl.prototype, NonDocumentTypeChildNode.prototype);

diff --git a/lib/jsdom/living/nodes/Element.idl b/lib/jsdom/living/nodes/Element.idl
@@ -41,7 +41,7 @@ partial interface Element {
                     attribute DOMString innerHTML;
     [TreatNullAs=EmptyString]
                     attribute DOMString outerHTML;
-//    void insertAdjacentHTML (DOMString position, DOMString text);
+    void insertAdjacentHTML (DOMString position, DOMString text);
 };
 
 enum ScrollLogicalPosition { "start", "center", "end", "nearest" };

diff --git a/test/web-platform-tests/index.js b/test/web-platform-tests/index.js
@@ -57,6 +57,7 @@ const runWebPlatformTest = require("./run-web-platform-test")(exports, path.reso
   "dom/nodes/Node-cloneNode.html",
   "dom/traversal/NodeFilter-constants.html",
   "dom/traversal/NodeIterator.html",
+  "domparsing/insert-adjacent.html",
   "html/dom/dynamic-markup-insertion/document-writeln/document.writeln-02.html",
   "html/dom/dynamic-markup-insertion/document-writeln/document.writeln-03.html",
   "html/dom/elements/global-attributes/classlist-nonstring.html",

diff --git a/test/web-platform-tests/to-upstream/domparsing/insert-adjacent.html b/test/web-platform-tests/to-upstream/domparsing/insert-adjacent.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>element.insertAdjacentHTML error cases</title>
+<link rel="help" href="https://w3c.github.io/DOM-Parsing/#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id="element"></div>
+
+<script>
+"use strict";
+
+test(() => {
+  const el = document.querySelector("#element");
+
+  assert_throws("SYNTAX_ERR", () => {
+    el.insertAdjacentHTML("invalid", "test");
+  });
+}, "Throws when given an invalid position");
+
+test(() => {
+  // A detached element does not have a parent node.
+  const el = document.createElement("span");
+
+  assert_throws("NO_MODIFICATION_ALLOWED_ERR", () => {
+    el.insertAdjacentHTML("beforebegin", "test");
+  });
+}, "Throws when inserting into an element whose parent is null");
+
+test(() => {
+  // The parent node of the html element is a document.
+  const el = document.querySelector("html");
+
+  assert_throws("NO_MODIFICATION_ALLOWED_ERR", () => {
+    el.insertAdjacentHTML("beforebegin", "test");
+  });
+}, "Throws when inserting into an element whose parent is a document");
+</script>