Bug 1453789: Remove Element.createShadowRoot. r=smaug
authorEmilio Cobos Álvarez <emilio@crisal.io>
Thu, 12 Apr 2018 22:35:45 +0200
changeset 413243 b2dd9ca61e0b92b6a0da66d86de4ab4f87cd8e19
parent 413242 aaf792407dbb16e2c9865f1d585bc2e4c4951aa5
child 413244 6090c4592979ab835f1a8df329f550d65a7cf1d6
child 413314 1b2faff1e6e0eb75b81d58c6b736946fefec505c
push id62650
push userecoal95@gmail.com
push dateFri, 13 Apr 2018 18:52:11 +0000
treeherderautoland@b2dd9ca61e0b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerssmaug
bugs1453789
milestone61.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1453789: Remove Element.createShadowRoot. r=smaug MozReview-Commit-ID: Hgxbp1Icgvh
devtools/client/inspector/markup/test/doc_markup_anonymous.html
devtools/server/tests/mochitest/inspector-traversal-data.html
dom/base/Element.cpp
dom/base/Element.h
dom/base/crashtests/1024428-1.html
dom/base/crashtests/1029710.html
dom/base/crashtests/1118764.html
dom/base/crashtests/1281715.html
dom/base/crashtests/1324463.html
dom/base/test/test_mutationobservers.html
dom/tests/mochitest/webcomponents/test_shadow_element.html
dom/webidl/Element.webidl
layout/base/crashtests/1261351-iframe.html
layout/base/crashtests/1404789-1.html
layout/base/crashtests/1409088.html
layout/base/crashtests/crashtests.list
layout/generic/crashtests/1059138-1.html
layout/reftests/bugs/1066554-1.html
layout/reftests/css-display/display-contents-shadow-dom-1.html
layout/reftests/css-display/reftest.list
layout/reftests/forms/legend/reftest.list
layout/reftests/forms/legend/shadow-dom.html
layout/reftests/mathml/shadow-dom-1.html
layout/reftests/webcomponents/cross-tree-selection-1.html
layout/style/crashtests/1017798-1.html
layout/style/crashtests/1089463-1.html
layout/style/crashtests/1415021.html
layout/style/crashtests/1415353.html
layout/style/crashtests/1415663.html
layout/style/crashtests/crashtests.list
testing/marionette/harness/marionette_harness/www/test_shadow_dom.html
testing/web-platform/tests/css/cssom-view/scrollIntoView-shadow.html
testing/web-platform/tests/innerText/getter-tests.js
testing/web-platform/tests/innerText/getter.html
testing/web-platform/tests/intersection-observer/shadow-content.html
testing/web-platform/tests/resize-observer/eventloop.html
--- a/devtools/client/inspector/markup/test/doc_markup_anonymous.html
+++ b/devtools/client/inspector/markup/test/doc_markup_anonymous.html
@@ -20,15 +20,13 @@
 
   <div id="shadow">light dom</div>
 
   <div id="native"><video controls></video></div>
 
   <script>
   "use strict";
   var host = document.querySelector("#shadow");
-  if (host.createShadowRoot) {
-    var root = host.createShadowRoot();
-    root.innerHTML = "<h3>Shadow DOM</h3><select multiple></select>";
-  }
+  var root = host.attachShadow({ mode: "open" });
+  root.innerHTML = "<h3>Shadow DOM</h3><select multiple></select>";
   </script>
 </body>
 </html>
--- a/devtools/server/tests/mochitest/inspector-traversal-data.html
+++ b/devtools/server/tests/mochitest/inspector-traversal-data.html
@@ -18,18 +18,18 @@
     }
   </style>
   <script type="text/javascript">
     "use strict";
 
     window.onload = function() {
       // Set up a basic shadow DOM
       let host = document.querySelector("#shadow");
-      if (host.createShadowRoot) {
-        let root = host.createShadowRoot();
+      if (host.attachShadow) {
+        let root = host.attachShadow({ mode: "open" });
 
         let h3 = document.createElement("h3");
         h3.append("Shadow ");
 
         let em = document.createElement("em");
         em.append("DOM");
 
         let select = document.createElement("select");
--- a/dom/base/Element.cpp
+++ b/dom/base/Element.cpp
@@ -1214,28 +1214,16 @@ Element::AttachShadow(const ShadowRootIn
         nameAtom == nsGkAtoms::nav ||
         nameAtom == nsGkAtoms::p ||
         nameAtom == nsGkAtoms::section ||
         nameAtom == nsGkAtoms::span)) {
     aError.Throw(NS_ERROR_DOM_NOT_SUPPORTED_ERR);
     return nullptr;
   }
 
-  return AttachShadowInternal(aInit.mMode, aError);
-}
-
-already_AddRefed<ShadowRoot>
-Element::CreateShadowRoot(ErrorResult& aError)
-{
-  return AttachShadowInternal(ShadowRootMode::Open, aError);
-}
-
-already_AddRefed<ShadowRoot>
-Element::AttachShadowInternal(ShadowRootMode aMode, ErrorResult& aError)
-{
   /**
    * 3. If context object is a shadow host, then throw
    *    an "InvalidStateError" DOMException.
    */
   if (GetShadowRoot() || GetXBLBinding()) {
     aError.Throw(NS_ERROR_DOM_INVALID_STATE_ERR);
     return nullptr;
   }
@@ -1255,17 +1243,17 @@ Element::AttachShadowInternal(ShadowRoot
   MOZ_ASSERT(!GetPrimaryFrame());
 
   /**
    * 4. Let shadow be a new shadow root whose node document is
    *    context object’s node document, host is context object,
    *    and mode is init’s mode.
    */
   RefPtr<ShadowRoot> shadowRoot =
-    new ShadowRoot(this, aMode, nodeInfo.forget());
+    new ShadowRoot(this, aInit.mMode, nodeInfo.forget());
 
   shadowRoot->SetIsComposedDocParticipant(IsInComposedDoc());
 
   /**
    * 5. Set context object’s shadow root to shadow.
    */
   SetShadowRoot(shadowRoot);
 
--- a/dom/base/Element.h
+++ b/dom/base/Element.h
@@ -1258,19 +1258,16 @@ public:
 
   // Shadow DOM v1
   already_AddRefed<ShadowRoot> AttachShadow(const ShadowRootInit& aInit,
                                             ErrorResult& aError);
   ShadowRoot* GetShadowRootByMode() const;
   void SetSlot(const nsAString& aName, ErrorResult& aError);
   void GetSlot(nsAString& aName);
 
-  // [deprecated] Shadow DOM v0
-  already_AddRefed<ShadowRoot> CreateShadowRoot(ErrorResult& aError);
-
   ShadowRoot* GetShadowRoot() const
   {
     const nsExtendedDOMSlots* slots = GetExistingExtendedDOMSlots();
     return slots ? slots->mShadowRoot.get() : nullptr;
   }
 
 private:
   void ScrollIntoView(const ScrollIntoViewOptions &aOptions);
--- a/dom/base/crashtests/1024428-1.html
+++ b/dom/base/crashtests/1024428-1.html
@@ -1,12 +1,11 @@
 <!DOCTYPE html>
 <html>
 <head>
 </head>
 <body>
 <div id="host"></div>
 <script>
-var s = host.createShadowRoot();
-s.innerHTML = '<input type="range" />';
+  host.attachShadow({ mode: "open" }).innerHTML = '<input type="range" />';
 </script>
 </body>
 </html>
--- a/dom/base/crashtests/1029710.html
+++ b/dom/base/crashtests/1029710.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html>
 <body>
 <script>
   var x = document.createElement('span');
-  x.createShadowRoot();
+  x.attachShadow({ mode: "open" });
   x.id = 'a';
 </script>
 </body>
 </html>
 
deleted file mode 100644
--- a/dom/base/crashtests/1118764.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html>
-<body>
-<style>
-#foo {
-  overflow: scroll;
-  height: 100px;
-}
-</style>
-<div id="foo">
-Mozilla Firefox<br>
-Mozilla Firefox<br>
-Mozilla Firefox<br>
-Mozilla Firefox<br>
-Mozilla Firefox<br>
-Mozilla Firefox<br>
-Mozilla Firefox<br>
-Mozilla Firefox<br>
-Mozilla Firefox<br>
-Mozilla Firefox<br>
-Mozilla Firefox<br>
-Mozilla Firefox<br>
-Mozilla Firefox<br>
-Mozilla Firefox<br>
-Mozilla Firefox<br>
-Mozilla Firefox<br>
-Mozilla Firefox<br>
-Mozilla Firefox<br>
-<script>
-foo.createShadowRoot().innerHTML = "<content></content>";
-</script>
-</body>
-</html>
--- a/dom/base/crashtests/1281715.html
+++ b/dom/base/crashtests/1281715.html
@@ -6,19 +6,19 @@
 html {
     color: orange;
 }
 </style>
 
 <script>
 function boom()
 {
-    document.documentElement.offsetHeight;
-    document.getElementById("hostW").createShadowRoot().innerHTML = '<z></z>';
-    document.getElementsByTagName("style")[0].remove();
+  document.documentElement.offsetHeight;
+  document.getElementById("hostW").attachShadow({ mode: "open" }).innerHTML = '<z></z>';
+  document.getElementsByTagName("style")[0].remove();
 }
 </script>
 
 </head>
 
 <body onload="boom();"><div style="display: contents;" id="hostW"></div></body>
 
 </html>
--- a/dom/base/crashtests/1324463.html
+++ b/dom/base/crashtests/1324463.html
@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <html>
 <script>
 // requires: user_pref("dom.webcomponents.shadowdom.enabled", true);
 addEventListener("DOMContentLoaded", function(){
-  let o_0 = document.createElement("span").createShadowRoot();
+  let o_0 = document.createElement("span").attachShadow({ mode: "open" });
   let o_1 = document.createElementNS("http://www.mozilla.org/xbl", "binding");
   let o_2 = document.createElementNS("http://www.mozilla.org/xbl", "children");
   let o_3 = document.createTextNode("");
   o_0.appendChild(o_1);
   o_1.appendChild(o_2);
   o_2.appendChild(o_3);
   o_2.removeChild(o_3);
 });
--- a/dom/base/test/test_mutationobservers.html
+++ b/dom/base/test/test_mutationobservers.html
@@ -585,35 +585,35 @@ function testExpandos() {
     SpecialPowers.gc();
     SpecialPowers.gc();
     SpecialPowers.gc();
   }
   div.setAttribute("foo", "bar2");
 }
 
 function testOutsideShadowDOM() {
-  if (!div.createShadowRoot) {
+  if (!div.attachShadow) {
     todo(false, "Skipping testOutsideShadowDOM and testInsideShadowDOM " +
-         "because createShadowRoot is not supported");
+         "because attachShadow is not supported");
     then(testMarquee);
     return;
   }
   var m = new M(function(records, observer) {
     is(records.length, 1);
     is(records[0].type, "attributes", "Should have got attributes");
     observer.disconnect();
     then(testMarquee);
   });
   m.observe(div, {
       attributes: true,
       childList: true,
       characterData: true,
       subtree: true
     })
-  var sr = div.createShadowRoot();
+  var sr = div.attachShadow({ mode: "open" });
   sr.innerHTML = "<div" + ">text</" + "div>";
   sr.firstChild.setAttribute("foo", "bar");
   sr.firstChild.firstChild.data = "text2";
   sr.firstChild.appendChild(document.createElement("div"));
   div.setAttribute("foo", "bar");
 }
 
 function testMarquee() {
deleted file mode 100644
--- a/dom/tests/mochitest/webcomponents/test_shadow_element.html
+++ /dev/null
@@ -1,173 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<!--
-https://bugzilla.mozilla.org/show_bug.cgi?id=887538
--->
-<head>
-  <title>Test for HTMLShadowElement</title>
-  <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
-</head>
-<body>
-<div id="grabme"></div>
-<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=887538">Bug 887538</a>
-<script>
-var host = document.createElement("span");
-
-// Create three shadow roots on a single host and make sure that shadow elements
-// are associated with the correct shadow root.
-var firstShadow = host.createShadowRoot();
-firstShadow.innerHTML = '<shadow id="shadowone"></shadow>';
-var secondShadow = host.createShadowRoot();
-secondShadow.innerHTML = '<shadow id="shadowtwo"></shadow>';
-var thirdShadow = host.createShadowRoot();
-thirdShadow.innerHTML = '<shadow id="shadowthree"></shadow>';
-
-is(firstShadow.getElementById("shadowone").olderShadowRoot, null, "Shadow element in oldest ShadowRoot should not be associated with a ShadowRoot.");
-is(secondShadow.getElementById("shadowtwo").olderShadowRoot, firstShadow, "Shadow element should be associated with older ShadowRoot.");
-is(thirdShadow.getElementById("shadowthree").olderShadowRoot, secondShadow, "Shadow element should be associated with older ShadowRoot.");
-
-// Only the first ShadowRoot in tree order is an insertion point.
-host = document.createElement("span");
-firstShadow = host.createShadowRoot();
-secondShadow = host.createShadowRoot();
-secondShadow.innerHTML = '<shadow id="shadowone"></shadow><shadow id="shadowtwo"></shadow>';
-var shadowElemOne = secondShadow.getElementById("shadowone");
-var shadowElemTwo = secondShadow.getElementById("shadowtwo");
-
-is(shadowElemOne.olderShadowRoot, firstShadow, "First <shadow> in tree order should be an insertion point.");
-is(shadowElemTwo.olderShadowRoot, null, "Second <shadow> in tree order should not be an insertion point.");
-
-// Remove the first <shadow> element and make sure the second <shadow> element becomes an insertion point.
-secondShadow.removeChild(shadowElemOne);
-is(shadowElemOne.olderShadowRoot, null, "<shadow> element not in a ShadowRoot is not an insertion point.");
-is(shadowElemTwo.olderShadowRoot, firstShadow, "Second <shadow> element should become insertion point after first is removed.");
-
-// Insert a <shadow> element before the current shadow insertion point and make sure that it becomes an insertion point.
-secondShadow.insertBefore(shadowElemOne, shadowElemTwo);
-is(shadowElemOne.olderShadowRoot, firstShadow, "<shadow> element inserted as first in tree order should become an insertion point.");
-is(shadowElemTwo.olderShadowRoot, null, "<shadow> element should no longer be an insertion point it another is inserted before.");
-
-// <shadow> element in fallback content is not an insertion point.
-host = document.createElement("span");
-firstShadow = host.createShadowRoot();
-secondShadow = host.createShadowRoot();
-secondShadow.innerHTML = '<content><shadow id="shadowone"></shadow></content><shadow id="shadowtwo"></shadow>';
-shadowElemOne = secondShadow.getElementById("shadowone");
-shadowElemTwo = secondShadow.getElementById("shadowtwo");
-
-is(shadowElemOne.olderShadowRoot, null, "<shadow> element in fallback content is not an insertion point.");
-is(shadowElemTwo.olderShadowRoot, null, "<shadow> element preceeded by another <shadow> element is not an insertion point.");
-
-// <shadow> element that is descendant of shadow element is not an insertion point.
-host = document.createElement("span");
-firstShadow = host.createShadowRoot();
-secondShadow = host.createShadowRoot();
-secondShadow.innerHTML = '<shadow><shadow id="shadowone"></shadow></shadow>';
-shadowElemOne = secondShadow.getElementById("shadowone");
-is(shadowElemOne.olderShadowRoot, null, "<shadow> element that is descendant of shadow element is not an insertion point.");
-
-// Check projection of <content> elements through <shadow> elements.
-host = document.createElement("span");
-firstShadow = host.createShadowRoot();
-secondShadow = host.createShadowRoot();
-firstShadow.innerHTML = '<content id="firstcontent"></content>';
-secondShadow.innerHTML = '<shadow><span id="one"></span><content id="secondcontent"></content><span id="four"></span></shadow>';
-host.innerHTML = '<span id="two"></span><span id="three"></span>';
-var firstContent = firstShadow.getElementById("firstcontent");
-var secondContent = secondShadow.getElementById("secondcontent");
-var firstDistNodes = firstContent.getDistributedNodes();
-var secondDistNodes = secondContent.getDistributedNodes();
-
-is(secondDistNodes.length, 2, "There should be two distributed nodes from the host.");
-ok(secondDistNodes[0].id == "two" &&
-   secondDistNodes[1].id == "three", "Nodes projected from host should preserve order.");
-
-is(firstDistNodes.length, 4, "There should be four distributed nodes, two from the first shadow, two from the second shadow.");
-ok(firstDistNodes[0].id == "one" &&
-   firstDistNodes[1].id == "two" &&
-   firstDistNodes[2].id == "three" &&
-   firstDistNodes[3].id == "four", "Reprojection through shadow should preserve node order.");
-
-// Remove a node from the host and make sure that it is removed from all insertion points.
-host.firstChild.remove();
-firstDistNodes = firstContent.getDistributedNodes();
-secondDistNodes = secondContent.getDistributedNodes();
-
-is(secondDistNodes.length, 1, "There should be one distriubted node remaining after removing node from host.");
-ok(secondDistNodes[0].id == "three", "Span with id=two should have been removed from content element.");
-is(firstDistNodes.length, 3, "There should be three distributed nodes remaining after removing node from host.");
-ok(firstDistNodes[0].id == "one" &&
-   firstDistNodes[1].id == "three" &&
-   firstDistNodes[2].id == "four", "Reprojection through shadow should preserve node order.");
-
-// Check projection of <shadow> elements to <content> elements.
-host = document.createElement("span");
-firstShadow = host.createShadowRoot();
-secondShadow = host.createShadowRoot();
-secondShadow.innerHTML = '<span id="firstspan"><shadow></shadow></span>';
-thirdShadow = secondShadow.getElementById("firstspan").createShadowRoot();
-thirdShadow.innerHTML = '<content id="firstcontent"></content>';
-firstContent = thirdShadow.getElementById("firstcontent");
-var shadowChild = document.createElement("span");
-firstShadow.appendChild(shadowChild);
-
-is(firstContent.getDistributedNodes()[0], shadowChild, "Elements in shadow insertioin point should be projected into content insertion points.");
-
-// Remove child of ShadowRoot and check that projected node is removed from insertion point.
-firstShadow.firstChild.remove();
-
-is(firstContent.getDistributedNodes().length, 0, "Reprojected element was removed from ShadowRoot, thus it should be removed from content insertion point.");
-
-// Check deeply nested projection of <shadow> elements.
-host = document.createElement("span");
-firstShadow = host.createShadowRoot();
-firstShadow.innerHTML = '<content></content>';
-secondShadow = host.createShadowRoot();
-secondShadow.innerHTML = '<shadow><content></content></shadow>';
-thirdShadow = host.createShadowRoot();
-thirdShadow.innerHTML = '<span id="firstspan"><shadow><content></content></shadow></span>';
-var fourthShadow = thirdShadow.getElementById("firstspan").createShadowRoot();
-fourthShadow.innerHTML = '<content id="firstcontent"></content>';
-firstContent = fourthShadow.getElementById("firstcontent");
-host.innerHTML = '<span></span>';
-
-is(firstContent.getDistributedNodes()[0], host.firstChild, "Child of host should be projected to insertion point.");
-
-// Remove node and make sure that it is removed from distributed nodes.
-host.firstChild.remove();
-
-is(firstContent.getDistributedNodes().length, 0, "Node removed from host should be removed from insertion point.");
-
-// Check projection of fallback content through <shadow> elements.
-host = document.createElement("span");
-firstShadow = host.createShadowRoot();
-firstShadow.innerHTML = '<content><span id="firstspan"></span></content>';
-secondShadow = host.createShadowRoot();
-secondShadow.innerHTML = '<span id="secondspan"><shadow id="firstshadow"></shadow></span>';
-firstShadowElem = secondShadow.getElementById("firstshadow");
-thirdShadow = secondShadow.getElementById("secondspan").createShadowRoot();
-thirdShadow.innerHTML = '<content id="firstcontent"></content>';
-firstContent = thirdShadow.getElementById("firstcontent");
-
-is(firstContent.getDistributedNodes().length, 1, "There should be one node distributed from fallback content.");
-is(firstContent.getDistributedNodes()[0], firstShadow.getElementById("firstspan"), "Fallback content should be distributed.");
-
-// Add some content to the host (causing the fallback content to be dropped) and make sure distribution nodes are updated.
-
-var newElem = document.createElement("div");
-firstShadowElem.appendChild(newElem);
-
-is(firstContent.getDistributedNodes().length, 1, "There should be one node distributed from the host.");
-is(firstContent.getDistributedNodes()[0], newElem, "Distributed node should be from host, not fallback content.");
-
-// Remove the distribution node and check that fallback content is used.
-firstShadowElem.removeChild(newElem);
-
-is(firstContent.getDistributedNodes().length, 1, "There should be one node distributed from fallback content.");
-is(firstContent.getDistributedNodes()[0], firstShadow.getElementById("firstspan"), "Fallback content should be distributed after removing node from host.");
-
-</script>
-</body>
-</html>
-
--- a/dom/webidl/Element.webidl
+++ b/dom/webidl/Element.webidl
@@ -271,20 +271,16 @@ partial interface Element {
 
   [ChromeOnly, Func="nsDocument::IsShadowDOMEnabled", BinaryName="shadowRoot"]
   readonly attribute ShadowRoot? openOrClosedShadowRoot;
 
   [BinaryName="assignedSlotByMode", Func="nsDocument::IsShadowDOMEnabled"]
   readonly attribute HTMLSlotElement? assignedSlot;
   [CEReactions, Unscopable, SetterThrows, Func="nsDocument::IsShadowDOMEnabled"]
            attribute DOMString slot;
-
-  // [deprecated] Shadow DOM v0
-  [Throws, Func="nsDocument::IsShadowDOMEnabled"]
-  ShadowRoot createShadowRoot();
 };
 
 Element implements ChildNode;
 Element implements NonDocumentTypeChildNode;
 Element implements ParentNode;
 Element implements Animatable;
 Element implements GeometryUtils;
 
--- a/layout/base/crashtests/1261351-iframe.html
+++ b/layout/base/crashtests/1261351-iframe.html
@@ -5,17 +5,17 @@
   (function () {
     class UiComponentTest extends HTMLDivElement {
       constructor() {
         super();
         this.template = `<style></style>`;
       }
 
       connectedCallback() {
-        let shadow = this.createShadowRoot();
+        let shadow = this.attachShadow({ mode: "open" });
         if (this.template) {
           let te = document.createElement('template');
           te.innerHTML = this.template;
           shadow.appendChild(document.importNode(te.content, true));
         }
       }
     };
 
deleted file mode 100644
--- a/layout/base/crashtests/1404789-1.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!doctype html>
-<script>
-  // Test for content redistribution outside of the document.
-  // Passes if it doesn't assert.
-  let host = document.createElement('div');
-  host.innerHTML = "<div id='foo'></div>";
-
-  let shadowRoot = host.createShadowRoot();
-  shadowRoot.innerHTML = "<content select='#foo'></content>";
-
-  host.firstElementChild.removeAttribute('id');
-
-  // Move to the document, do the same.
-  document.documentElement.appendChild(host);
-  host.firstElementChild.setAttribute('id', 'foo');
-</script>
deleted file mode 100644
--- a/layout/base/crashtests/1409088.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!doctype html>
-<div></div>
-<script>
-let host = document.querySelector('div');
-let shadow = host.createShadowRoot();
-
-// Append two divs and three spans into host.
-host.innerHTML = '<div></div><span></span><div></div><span></span><span></span>';
-shadow.innerHTML = '<content select="div" id="divpoint"></content><content select="div, span" id="allpoint"></content>';
-
-let divPoint = shadow.getElementById("divpoint");
-let allPoint = shadow.getElementById("allpoint");
-
-shadow.removeChild(allPoint);
-shadow.insertBefore(allPoint, divPoint);
-</script>
--- a/layout/base/crashtests/crashtests.list
+++ b/layout/base/crashtests/crashtests.list
@@ -503,20 +503,18 @@ load 1397398-1.html
 load 1397398-2.html
 load 1397398-3.html
 load 1398500.html
 load 1400438-1.html
 load 1400599-1.html
 load 1401739.html
 load 1401840.html
 load 1402476.html
-load 1404789-1.html
 load 1404789-2.html
 load 1406562.html
-load 1409088.html
 load 1409147.html
 load 1411138.html
 load 1419762.html
 load 1420533.html
 load 1425959.html
 load 1425893.html
 load 1428353.html
 pref(dom.webcomponents.shadowdom.enabled,true) load 1429088.html
--- a/layout/generic/crashtests/1059138-1.html
+++ b/layout/generic/crashtests/1059138-1.html
@@ -3,30 +3,30 @@
 <head>
 <meta charset="UTF-8">
 <title>Testcase for bug 1059138</title>
 <template>
   <div class="inner" style="border: 1px solid black; display:flex; width: 500px;">
     <button class="action-button">
       ThisIsAButton
     </button>
-    <content></content>
+    <slot></slot>
   </div>
 </template>
 
 <script>
   // Gets content from <template>
   var template = document.querySelector('template').content;
 
   // Creates an object based in the HTML Element prototype
   class MyElement extends HTMLElement {
     // Fires when an instance of the element is connected
     connectedCallback() {
       // Creates the shadow root
-      var shadowRoot = this.createShadowRoot();
+      var shadowRoot = this.attachShadow({ mode: "open" });
 
       // Adds a template clone into shadow root
       var clone = document.importNode(template, true);
       shadowRoot.appendChild(clone);
     }
   };
   // Registers <my-elem> in the main document
   customElements.define('my-elem', MyElement);
--- a/layout/reftests/bugs/1066554-1.html
+++ b/layout/reftests/bugs/1066554-1.html
@@ -2,25 +2,23 @@
 <html class="reftest-wait">
 <meta charset="utf-8">
 <title>Test for bug 1066554 - Shadow DOM loads SVG stylesheets as needed</title>
 <body>
   <div id="x"></div>
   <script>
     function insertShadowSVG() {
       var x = document.getElementById("x");
-      if (x.createShadowRoot) {
-        x.createShadowRoot();
-        x.shadowRoot.innerHTML =
-          '<svg width="50px" height="10px"> \
-             <switch> \
-               <foreignObject width="50px" height="50px"> \
-                 <div style="width: 100px; height: 10px; background: red;"></div> \
-               </foreignObject> \
-             </switch> \
-           </svg>';
-      }
+      x.attachShadow({ mode: "open" });
+      x.shadowRoot.innerHTML =
+        '<svg width="50px" height="10px"> \
+           <switch> \
+             <foreignObject width="50px" height="50px"> \
+               <div style="width: 100px; height: 10px; background: red;"></div> \
+             </foreignObject> \
+           </switch> \
+         </svg>';
       document.documentElement.removeAttribute("class");
     }
     window.addEventListener("MozReftestInvalidate", insertShadowSVG);
   </script>
 </body>
 </html>
deleted file mode 100644
--- a/layout/reftests/css-display/display-contents-shadow-dom-1.html
+++ /dev/null
@@ -1,231 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html class="reftest-wait" lang="en-US">
-  <head>
-  <title>CSS Test: CSS display:contents; in Shadow DOM</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
-  <link rel="help" href="http://dev.w3.org/csswg/css-display">
-<style>
-html,body {
-    color:black; background-color:white; font-size:16px; padding:0; margin:0;
-}
-.before::before {content: "a ";}
-.after::after {content: " c";}
-div.before::before {content: "X ";}
-div.after::after {content: " Y";}
-.b,.c { display:contents; }
-</style>
-  </head>
-  <body>
-    <div id="host1" class="before"></div>
-    <span id="host2"></span>
-    <div id="host3" class="after"></div>
-    <div id="host4" class="before after"></div>
-    <div id="host5" class="after"></div>
-    <div id="host6" class="before"></div>
-    <div id="host7"></div>
-    <div id="host8" class="after"></div>
-    <div id="host9" class="before after"></div>
-    <div id="hostA" class="after"></div>
-    <div id="hostB"></div>
-    <div id="hostC"></div>
-    <div id="hostD"></div>
-    <div id="hostE"></div>
-    <div id="hostF" class="before"></div>
-    <div id="hostG"></div>
-    <span id="hostH"></span>
-    <div id="hostI"></div>
-    <div id="hostJ"></div>
-    <span id="hostK"></span>
-    <div id="hostL"></div>
-    <div id="hostM"><i>Two</i><b>One</b></div>
-    <div id="hostN"><i class="c">Two</i><b>One</b></div>
-    <div id="hostO"><i>Two</i><b class="c">One</b></div>
-    <div id="hostP"><i class="c">Two</i><b class="c">One</b></div>
-    <div id="hostQ" class="c" style="color:blue"><i class="c">Two</i><b class="c">One</b></div>Three
-    <div id="hostS" class="c"><span class="c">S</span></div>
-    <div id="hostT" class="c">T</div>
-    <div id="hostU"><span class="c">U</span></div>
-    <div id="hostV" class="c" style="color:red"><b class="c" style="color:inherit">V</b></div>
-
-   <script>
-      function shadow(id) {
-        return document.getElementById(id).createShadowRoot();
-      }
-      function span(s) {
-        var e = document.createElement("span");
-        var t = document.createTextNode(s);
-        e.appendChild(t);
-        return e;
-      }
-      function text(s) {
-        return document.createTextNode(s);
-      }
-      function contents(n) {
-        var e = document.createElement("z");
-        e.style.display = "contents";
-        e.style.color = "blue"; 
-        if (n) e.appendChild(n);
-        return e;
-      }
-
-      function run() {
-        document.body.offsetHeight;
-
-        shadow("host1").innerHTML = '<content></content> c';
-        shadow("host2").innerHTML = 'a <content style="display:contents"></content> c';
-        shadow("host3").innerHTML = 'a <content style="display:contents"></content>';
-        shadow("host4").innerHTML = '<content style="display:contents"></content>';
-        shadow("host5").innerHTML = 'a <content style="display:contents"></content>';
-        shadow("host6").innerHTML = '<z style="color:blue; display:contents"><content></content></z> c';
-        shadow("host7").innerHTML = 'a <content style="display:contents"></content> c';
-        shadow("host8").innerHTML = 'a <z style="color:blue; display:contents"><content style="display:contents"></z></content>';
-        shadow("host9").innerHTML = '<content style="display:contents"></content>';
-        shadow("hostA").innerHTML = 'a <content style="display:contents"></content>';
-        shadow("hostB").innerHTML = 'a <content select=".c"></content> <content select=".b"></content> B';
-        shadow("hostC").innerHTML = 'A <content select=".c"></content> <content select=".b"></content> B';
-        shadow("hostD").innerHTML = 'A <content select=".c"></content> <content select=".b"></content> B <content select=".b"></content>';
-        shadow("hostE").innerHTML = 'A <content select=".c"></content> <content select=".b"></content> B';
-        shadow("hostF").innerHTML = '<content select=".c"></content> <content select=".b"></content> B';
-        shadow("hostG").innerHTML = '<content select=".b"></content>';
-        shadow("hostH").innerHTML = '<content select=".b"></content>';
-        shadow("hostI").innerHTML = 'A<content select=".b"></content>';
-        shadow("hostJ").innerHTML = 'A<content select=".b"></content>';
-        shadow("hostK").innerHTML = '<content select=".b"></content>';
-        shadow("hostL").innerHTML = '<content select=".b"></content>';
-        shadow("hostM").innerHTML = '<content select="b"></content><content select="i"></content>';
-        shadow("hostN").innerHTML = '<content select="b"></content><content select="i"></content>';
-        shadow("hostO").innerHTML = '<content select="b"></content><content select="i"></content>';
-        shadow("hostP").innerHTML = '<content select="b"></content><content select="i"></content>';
-        shadow("hostQ").innerHTML = '<content select="b"></content><content select="i"></content>';
-      }
-
-      function tweak() {
-        document.body.offsetHeight;
-
-        host1.appendChild(span("1"));
-        host2.appendChild(text("2"));
-        host3.appendChild(span("3"));
-        host4.appendChild(text("4"));
-
-        var e = span("5");
-        e.style.display = "contents";
-        host5.appendChild(e);
-
-        host6.appendChild(span("6"));
-        host7.appendChild(contents(text("7")));
-        host8.appendChild(contents(span("8")));
-        host9.appendChild(contents(text("9")));
-
-        var e = contents(span("A"));
-        e.style.display = "contents";
-        hostA.appendChild(e);
-
-        var e = contents(text("2"));
-        e.className = "b";
-        hostB.appendChild(e);
-        var e = contents(text("1"));
-        e.className = "c";
-        hostB.appendChild(e);
-
-        var e = contents(text("2"));
-        e.className = "b after";
-        hostC.appendChild(e);
-        var e = contents(text("1"));
-        e.className = "c  before";
-        hostC.appendChild(e);
-
-        var e = contents(text("2"));
-        e.className = "b before after";
-        hostD.appendChild(e);
-        var e = contents(text(" 3"));
-        e.className = "b before after";
-        hostD.appendChild(e);
-        var e = contents(text("1"));
-        e.className = "c  before";
-        hostD.appendChild(e);
-
-        var e = contents(contents(text("2")));
-        e.className = "before b after";
-        hostE.appendChild(e);
-        var e2 = contents(text("1"));
-        e2.className = "c  before after";
-        hostE.insertBefore(e2, e);
-
-        var e = contents(text("2"));
-        e.className = "before b after";
-        hostF.appendChild(e);
-        var e2 = contents(text("1"));
-        e2.className = "c  before after";
-        hostF.insertBefore(e2, e);
-
-        var e = contents(contents(text("1")));
-        e.className = "b";
-        hostG.appendChild(e);
-        var e = contents(text("2"));
-        e.className = "b  before after";
-        hostG.appendChild(e);
-
-        var e = contents(contents(text("2")));
-        e.className = "b";
-        hostH.appendChild(e);
-        var e2 = contents(text("1"));
-        e2.className = "b  before after";
-        hostH.insertBefore(e2, e);
-
-        var e = contents(text("b"));
-        e.className = "b";
-        hostI.appendChild(e);
-        var e = span("c");
-        e.className = "b";
-        hostI.appendChild(e);
-
-        var e = contents(contents(text("b")));
-        e.className = "b";
-        hostJ.appendChild(e);
-        var e = span("c");
-        e.className = "b";
-        hostJ.appendChild(e);
-
-        var inner = span("b");
-        inner.className = "after";
-        var e = contents(contents(inner));
-        e.className = "b";
-        hostK.appendChild(e);
-        var e = span("d");
-        e.className = "b";
-        hostK.appendChild(e);
-
-        var inner = contents(null);
-        inner.className = "before";
-        var e = contents(inner);
-        e.className = "b";
-        hostL.appendChild(e);
-        var e = span("b");
-        e.className = "b";
-        hostL.appendChild(e);
-
-        document.body.offsetHeight;
-        setTimeout(function() {
-            shadow("hostS");
-            shadow("hostT");
-            shadow("hostU");
-            shadow("hostV").innerHTML = '<z style="color:green"><content select="b"></content></z>';
-
-            document.body.offsetHeight;
-            document.documentElement.removeAttribute("class");
-          },0);
-      }
-
-      if (document.body.createShadowRoot) {
-        run();
-        window.addEventListener("MozReftestInvalidate", tweak);
-      } else {
-        document.documentElement.removeAttribute("class");
-      }
-    </script>
-  </body>
-</html>
--- a/layout/reftests/css-display/reftest.list
+++ b/layout/reftests/css-display/reftest.list
@@ -12,17 +12,16 @@ fuzzy-if(Android,8,604) == display-conte
 fuzzy-if(winWidget,12,100) == display-contents-style-inheritance-1-dom-mutations.html display-contents-style-inheritance-1-ref.html
 == display-contents-tables.xhtml display-contents-tables-ref.xhtml
 == display-contents-tables-2.xhtml display-contents-tables-ref.xhtml
 == display-contents-tables-3.xhtml display-contents-tables-3-ref.xhtml
 == display-contents-visibility-hidden.html display-contents-visibility-hidden-ref.html
 == display-contents-visibility-hidden-2.html display-contents-visibility-hidden-ref.html
 == display-contents-495385-2d.html display-contents-495385-2d-ref.html
 fuzzy-if(Android,7,3935) == display-contents-xbl.xhtml display-contents-xbl-ref.html
-#bug 1421540 fuzzy-if(Android,7,1186) pref(dom.webcomponents.shadowdom.enabled,true) == display-contents-shadow-dom-1.html display-contents-shadow-dom-1-ref.html
 == display-contents-xbl-2.xul display-contents-xbl-2-ref.xul
 == display-contents-xbl-3.xul display-contents-xbl-3-ref.xul
 skip == display-contents-xbl-4.xul display-contents-xbl-4-ref.xul # fails (not just asserts) due to bug 1089223
 asserts(0-1) fuzzy-if(Android,8,3216) == display-contents-fieldset.html display-contents-fieldset-ref.html # bug 1089223
 == display-contents-xbl-5.xul display-contents-xbl-3-ref.xul
 == display-contents-xbl-6.xhtml display-contents-xbl-6-ref.html
 == display-contents-xbl-7.xhtml display-contents-xbl-7-ref.html
 == display-contents-list-item-child.html display-contents-list-item-child-ref.html
--- a/layout/reftests/forms/legend/reftest.list
+++ b/layout/reftests/forms/legend/reftest.list
@@ -1,4 +1,3 @@
 == legend.html legend-ref.html
-#bug 1418002 fuzzy-if(skiaContent,1,7) pref(dom.webcomponents.shadowdom.enabled,true) == shadow-dom.html shadow-dom-ref.html
 == 1273433.html 1273433-ref.html
 fails == 1339287.html 1339287-ref.html # bug 1383868
deleted file mode 100644
--- a/layout/reftests/forms/legend/shadow-dom.html
+++ /dev/null
@@ -1,125 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html class="reftest-wait" lang="en-US">
-  <head>
-  <title>Test LEGEND placed into FIELDSET shadow DOM</title>
-  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1140579">
-  <link rel="match" href="shadow-dom-ref.html">
-<style>
-html,body {
-    color:black; background-color:white; font-size:16px; padding:0; margin:0;
-}
-.before::before {content: "a ";}
-.after::after {content: " c";}
-div.before::before {content: "X ";}
-div.after::after {content: " Y";}
-.b,.c { display:contents; }
-</style>
-  </head>
-  <body>
-    <fieldset id="host1" class="before"></fieldset>
-    <fieldset id="host2"></fieldset>
-    <fieldset id="host3" class="after"></fieldset>
-    <fieldset id="host4" class="before after"></fieldset>
-    <fieldset id="host5" class="after"></fieldset>
-    <fieldset id="host6" class="before"></fieldset>
-    <fieldset id="host7"></fieldset>
-    <fieldset id="host8"></fieldset>
-    <fieldset id="host9"></fieldset>
-
-   <script>
-      function shadow(id) {
-        return document.getElementById(id).createShadowRoot();
-      }
-      function legend(s) {
-        var e = document.createElement("legend");
-        var t = document.createTextNode(s);
-        e.appendChild(t);
-        return e;
-      }
-      function contents(n) {
-        var e = document.createElement("z");
-        e.style.display = "contents";
-        e.style.color = "blue"; 
-        if (n) e.appendChild(n);
-        return e;
-      }
-
-      function run() {
-        document.body.offsetHeight;
-
-        shadow("host1").innerHTML = '<content></content> c';
-        shadow("host2").innerHTML = 'a <content></content> c';
-        shadow("host3").innerHTML = 'a <content></content>';
-        shadow("host4").innerHTML = '<content></content>';
-        shadow("host5").innerHTML = 'a <content></content>';
-        shadow("host6").innerHTML = '<z style="color:blue; display:contents"><content></content></z> c';
-        shadow("host7").innerHTML = 'a <content select=".c"></content> <content select=".b"></content> B';
-        shadow("host8").innerHTML = 'A <content select=".c"></content> <content select=".b"></content> B';
-        shadow("host9").innerHTML = 'A <content select=".c"></content> <content select=".b"></content> B <content select=".b"></content>';
-      }
-
-      function tweak() {
-        document.body.offsetHeight;
-
-        host1.appendChild(legend("1"));
-        host2.appendChild(legend("2"));
-        host3.appendChild(legend("3"));
-        host4.appendChild(legend("4"));
-
-        var e = legend("5");
-        e.style.display = "contents";
-        host5.appendChild(e);
-
-        document.body.offsetHeight;
-
-        host6.appendChild(legend("6"));
-
-        var e = legend("L");
-        e.className = "b";
-        host7.appendChild(e);
-        var e = legend("7");
-        e.className = "c";
-
-        document.body.offsetHeight;
-
-        host7.appendChild(e);
-
-        var e = legend("L");
-        e.className = "b after";
-        host8.appendChild(e);
-        var e = legend("8");
-        e.className = "c  before";
-        host8.appendChild(e);
-
-        document.body.offsetHeight;
-
-        var e = legend("L2");
-        e.className = "b before after";
-        host9.appendChild(e);
-        var e = contents(legend(" L3"));
-        e.className = "b before after";
-        host9.appendChild(e);
-        var e = legend("9");
-        e.className = "c  before";
-        host9.appendChild(e);
-
-        document.body.offsetHeight;
-        setTimeout(function() {
-            document.body.offsetHeight;
-            document.documentElement.removeAttribute("class");
-          },0);
-      }
-
-      if (document.body.createShadowRoot) {
-        run();
-        window.addEventListener("MozReftestInvalidate", tweak);
-      } else {
-        document.documentElement.removeAttribute("class");
-      }
-    </script>
-  </body>
-</html>
--- a/layout/reftests/mathml/shadow-dom-1.html
+++ b/layout/reftests/mathml/shadow-dom-1.html
@@ -2,19 +2,17 @@
 <html class="reftest-wait">
 <meta charset="utf-8">
 <title>Test for bug 1066554 - Shadow DOM loads MathML stylesheets as needed</title>
 <body>
   <div id="x"></div>
   <script>
     function insertShadowMathML() {
       var x = document.getElementById("x");
-      if (x.createShadowRoot) {
-        x.createShadowRoot();
-        x.shadowRoot.innerHTML =
-          '<math><msup><mi>X</mi><mi>X</mi></msup></math>';
-      }
+      x.attachShadow({ mode: "open" });
+      x.shadowRoot.innerHTML =
+        '<math><msup><mi>X</mi><mi>X</mi></msup></math>';
       document.documentElement.removeAttribute("class");
     }
     window.addEventListener("MozReftestInvalidate", insertShadowMathML);
   </script>
 </body>
 </html>
--- a/layout/reftests/webcomponents/cross-tree-selection-1.html
+++ b/layout/reftests/webcomponents/cross-tree-selection-1.html
@@ -1,20 +1,15 @@
 <!DOCTYPE HTML>
 <html class="reftest-wait">
 <head>
   <script>
     function tweak() {
-      if (!document.body.createShadowRoot) {
-        document.documentElement.className = "";
-        return;
-      }
-
       var host = document.getElementById("host");
-      var shadow = host.createShadowRoot();
+      var shadow = host.attachShadow({ mode: "open" });
 
       var textNode = document.createTextNode(" World");
       shadow.appendChild(textNode);
 
       // Create a selection with focus preceeding anchor
       var selection = window.getSelection();
       var range = document.createRange();
       range.setStart(shadow, 1);
--- a/layout/style/crashtests/1017798-1.html
+++ b/layout/style/crashtests/1017798-1.html
@@ -47,17 +47,17 @@ gaia_switch/examples/index.html from the
 <script>
 'use strict';
 /* global ComponentUtils */
 
 window.GaiaSwitch = (function(win) {
   // Extend from the HTMLElement prototype
   class GaiaSwitch extends HTMLElement {
     connectedCallback() {
-      var shadow = this.createShadowRoot();
+      var shadow = this.attachShadow({ mode: "open" });
       this._template = template.content.cloneNode(true);
       this._input = this._template.querySelector('input[type="checkbox"]');
 
       var checked = this.getAttribute('checked');
       if (checked !== null) {
         this._input.checked = true;
       }
 
@@ -100,17 +100,17 @@ window.GaiaSwitch = (function(win) {
   // wanted to use <gaia-switch>, this would make
   // markup changes complicated, and could lead to
   // things getting out of sync. This is a short-term
   // hack until we can import entire custom-elements
   // using HTML Imports (bug 877072).
   var template = document.createElement('template');
   template.innerHTML = '<label id="switch-label" class="pack-switch">' +
       '<input type="checkbox">' +
-      '<span><content select="label"></content></span>' +
+      '<span><slot></slot></span>' +
     '</label>';
 
   // Register and return the constructor
   return document.registerElement('gaia-switch', { prototype: proto });
 })(window);
 </script>
 <body>
 <section>
--- a/layout/style/crashtests/1089463-1.html
+++ b/layout/style/crashtests/1089463-1.html
@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <div></div>
 <script>
 window.onload = function() {
   var div = document.querySelector("div");
-  var shadow = div.createShadowRoot();
+  var shadow = div.attachShadow({ mode: "open" });
   shadow.innerHTML = "<p style='display: none'><span><i>x</i></span></p>";
   var p = shadow.lastChild;
   var span = p.firstChild;
   var i = span.firstChild;
 
   span.style.color = 'blue';
   p.remove();
 
deleted file mode 100644
--- a/layout/style/crashtests/1415021.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<script>
-try { o = [document.documentElement] } catch(e) { }
-try { o1 = document.createElement('dir') } catch(e) { }
-try { o2 = document.createElement('th') } catch(e) { }
-try { o3 = document.createElement('rb') } catch(e) { }
-try { o4 = document.createElement('input') } catch(e) { }
-try { o5 = document.createElement('applet') } catch(e) { }
-try { o6 = document.createElement('input') } catch(e) { }
-try { o7 = document.createElement('legend') } catch(e) { }
-try { o8 = document.createElement('keygen') } catch(e) { }
-try { o9 = document.createElement('input') } catch(e) { }
-try { o10 = document.createElement('input') } catch(e) { }
-try { o11 = document.createElement('input') } catch(e) { }
-try { o12 = document.createElement('button') } catch(e) { }
-try { o13 = document.createElement('video') } catch(e) { }
-try { o14 = document.createElement('body') } catch(e) { }
-try { o15 = document.createElement('template') } catch(e) { }
-try { o16 = document.createElement('area') } catch(e) { }
-try { document.documentElement.appendChild(o1) } catch(e) { }
-try { document.documentElement.appendChild(o2) } catch(e) { }
-try { document.documentElement.appendChild(o3) } catch(e) { }
-try { document.documentElement.appendChild(o4) } catch(e) { }
-try { document.documentElement.appendChild(o5) } catch(e) { }
-try { document.documentElement.appendChild(o6) } catch(e) { }
-try { document.documentElement.appendChild(o7) } catch(e) { }
-try { document.documentElement.appendChild(o8) } catch(e) { }
-try { document.documentElement.appendChild(o9) } catch(e) { }
-try { document.documentElement.appendChild(o10) } catch(e) { }
-try { document.documentElement.appendChild(o11) } catch(e) { }
-try { document.documentElement.appendChild(o12) } catch(e) { }
-try { document.documentElement.appendChild(o13) } catch(e) { }
-try { document.documentElement.appendChild(o14) } catch(e) { }
-try { document.documentElement.appendChild(o15) } catch(e) { }
-try { o15.content.append(document.documentElement, "") } catch(e) { }
-try { document.appendChild(document.createElement("html")) } catch(e) { }
-try { o17 = o14.createShadowRoot() } catch(e) { }
-try { document.replaceChild(o[0], document.documentElement); } catch(e) { }
-try { try { o17.appendChild(o16) } catch(e) { document.documentElement.appendChild(o16) } } catch(e) { }
-</script>
--- a/layout/style/crashtests/1415353.html
+++ b/layout/style/crashtests/1415353.html
@@ -1,8 +1,8 @@
 <!doctype html>
 <textarea id="htmlvar00003" maxlength="0">
   <!-- Text nodes around me are important -->
 </textarea>
 <script>
 document.body.offsetTop;
-document.querySelector('textarea').createShadowRoot();
+document.querySelector('textarea').attachShadow({ mode: "open" });
 </script>
deleted file mode 100644
--- a/layout/style/crashtests/1415663.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<html>
-  <head>
-    <script>
-      function boom() {
-        document.getElementById('x').createShadowRoot()
-      }
-    </script>
-  </head>
-  <body onload=boom()>
-    <marquee id='x'>
-      <table id='x'>
-  </body>
-</html>
\ No newline at end of file
--- a/layout/style/crashtests/crashtests.list
+++ b/layout/style/crashtests/crashtests.list
@@ -257,19 +257,17 @@ load 1409502.html
 load 1409931.html
 load 1410226-1.html
 load 1410226-2.html
 load 1411143.html
 load 1411478.html
 load 1413288.html
 load 1413361.html
 load 1413670.html
-load 1415663.html
 pref(dom.webcomponents.shadowdom.enabled,true) load 1415353.html
-pref(dom.webcomponents.shadowdom.enabled,true) load 1415021.html
 load 1418059.html
 test-pref(dom.animations-api.core.enabled,true) load 1418867.html
 pref(dom.webcomponents.shadowdom.enabled,true) load 1419554.html
 load 1426312.html
 load 1439793.html
 load 1409183.html
 pref(dom.webcomponents.shadowdom.enabled,true) load 1445682.html
 load 1450691.html
--- a/testing/marionette/harness/marionette_harness/www/test_shadow_dom.html
+++ b/testing/marionette/harness/marionette_harness/www/test_shadow_dom.html
@@ -10,17 +10,17 @@
 <title>Marionette Test</title>
 </head>
 <body>
   <div id="host"></div>
   <div id="empty-host"></div>
   <script>
     'use strict';
     var host = document.getElementById('host');
-    var root = host.createShadowRoot();
+    var root = host.attachShadow({ mode: "open" });
     root.innerHTML = '<button id="button">Foo</button>' +
       '<div id="inner-host"></div>';
     var innerHost = host.shadowRoot.getElementById('inner-host');
-    var innerRoot = innerHost.createShadowRoot();
+    var innerRoot = innerHost.attachShadow({ mode: "open" });
     innerRoot.innerHTML = '<button id="inner-button">Bar</button>';
   </script>
 </body>
 </html>
--- a/testing/web-platform/tests/css/cssom-view/scrollIntoView-shadow.html
+++ b/testing/web-platform/tests/css/cssom-view/scrollIntoView-shadow.html
@@ -9,25 +9,25 @@
   <div id="space2" style="height: 2000px; width: 2000px;background-color: blue">
   </div>
 </div>
 <script>
 add_completion_callback(() => document.getElementById("container").remove());
 
 test(t => {
   var shadow = document.getElementById("shadow");
-  var shadowRoot = shadow.createShadowRoot();
+  var shadowRoot = shadow.attachShadow({ mode: "open" });
   var shadowDiv = document.createElement("div");
   shadowDiv.style.height = "200px";
   shadowDiv.style.width = "200px";
   shadowDiv.style.backgroundColor = "green";
   shadowRoot.appendChild(shadowDiv);
 
   window.scrollTo(0, 0);
   var expected_x = shadowDiv.offsetLeft;
   var expected_y = shadowDiv.offsetTop;
   assert_not_equals(window.scrollX, expected_x);
   assert_not_equals(window.scrollY, expected_y);
   shadowDiv.scrollIntoView({block: "start", inline: "start"});
   assert_approx_equals(window.scrollX, expected_x, 1);
   assert_approx_equals(window.scrollY, expected_y, 1);
 }, "scrollIntoView should behave correctly if applies to shadow dom elements");
-</script>
\ No newline at end of file
+</script>
--- a/testing/web-platform/tests/innerText/getter-tests.js
+++ b/testing/web-platform/tests/innerText/getter-tests.js
@@ -321,17 +321,17 @@ testText("<div><ruby>abc<rp>(</rp><rt>de
 testText("<div><rp>abc</rp>", "", "Lone <rp>");
 testText("<div><rp style='visibility:hidden'>abc</rp>", "", "visibility:hidden <rp>");
 testText("<div><rp style='display:block'>abc</rp>def", "abc\ndef", "display:block <rp>");
 testText("<div><rp style='display:block'> abc </rp>def", "abc\ndef", "display:block <rp> with whitespace");
 testText("<div><select class='poke-rp'></select>", "", "<rp> in a <select>");
 
 /**** Shadow DOM ****/
 
-if ("createShadowRoot" in document.body) {
+if ("attachShadow" in document.body) {
   testText("<div class='shadow'>", "", "Shadow DOM contents ignored");
   testText("<div><div class='shadow'>", "", "Shadow DOM contents ignored");
 }
 
 /**** Flexbox ****/
 
 if (CSS.supports('display', 'flex')) {
   testText("<div style='display:flex'><div style='order:1'>1</div><div>2</div></div>",
--- a/testing/web-platform/tests/innerText/getter.html
+++ b/testing/web-platform/tests/innerText/getter.html
@@ -44,17 +44,17 @@ function textTextInContainer(cont, html,
       for (var i = 0; i < pokes.length; ++i) {
         var el = document.createElement(tag);
         el.textContent = "abc";
         pokes[i].appendChild(el);
       }
     });
     var shadows = document.getElementsByClassName('shadow');
     for (var i = 0; i < shadows.length; ++i) {
-      var s = shadows[i].createShadowRoot();
+      var s = shadows[i].attachShadow({ mode: "open" });
       s.textContent = 'abc';
     }
     while (e && e.nodeType != Node.ELEMENT_NODE) {
       e = e.nextSibling;
     }
     assert_equals(e.innerText, expectedPlain);
     cont.textContent = '';
   }, msg + ' (' + format_value(html) + ')');
--- a/testing/web-platform/tests/intersection-observer/shadow-content.html
+++ b/testing/web-platform/tests/intersection-observer/shadow-content.html
@@ -18,17 +18,17 @@ var vw = document.documentElement.client
 var vh = document.documentElement.clientHeight;
 
 var entries = [];
 var target;
 
 runTestCycle(function() {
   var shadowHost = document.getElementById("host");
   assert_true(!!shadowHost, "Host exists");
-  var shadowRoot = shadowHost.createShadowRoot();
+  var shadowRoot = shadowHost.attachShadow({ mode: "open" });
   assert_true(!!shadowRoot, "Shadow root exists");
   shadowRoot.innerHTML = "<div id='target' style='width: 100px; height: 100px; background-color: green;'></div>";
   target = shadowRoot.getElementById("target");
   assert_true(!!target, "target exists");
 
   var observer = new IntersectionObserver(function(changes) {
     entries = entries.concat(changes)
   });
--- a/testing/web-platform/tests/resize-observer/eventloop.html
+++ b/testing/web-platform/tests/resize-observer/eventloop.html
@@ -124,17 +124,17 @@ function test1() {
       setup: observer => {
         onErrorCalled = false;
         let t2 = document.createElement('div');
         t1.appendChild(t2);
         resizers.push(t2);
         let t3 = document.createElement('div');
         resizers.push(t3);
         t2.appendChild(t3);
-        let shadow = t3.createShadowRoot();
+        let shadow = t3.attachShadow({ mode: "open" });
         let t4 = document.createElement('div');
         resizers.push(t4);
         shadow.appendChild(t4);
         let t5 = document.createElement('div');
         resizers.push(t5);
         t4.appendChild(t5);
         resizers.forEach( el => observer.observe(el) );
       },