Bug 1453789: Remove Element.createShadowRoot. r=smaug draft
authorEmilio Cobos Álvarez <emilio@crisal.io>
Thu, 12 Apr 2018 22:35:45 +0200
changeset 781837 467b249e5937ea5c77dd5e9c315485859589e301
parent 781836 021be15397e2ee88a9f10e1e5824b15d5bdd06a6
child 781838 47e45132a5494f9ec6560d476de7b5448675db6f
push id106424
push userbmo:emilio@crisal.io
push dateFri, 13 Apr 2018 18:19:01 +0000
reviewerssmaug
bugs1453789
milestone61.0a1
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,29 @@ function testExpandos() {
     SpecialPowers.gc();
     SpecialPowers.gc();
     SpecialPowers.gc();
   }
   div.setAttribute("foo", "bar2");
 }
 
 function testOutsideShadowDOM() {
-  if (!div.createShadowRoot) {
-    todo(false, "Skipping testOutsideShadowDOM and testInsideShadowDOM " +
-         "because createShadowRoot 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
@@ -504,20 +504,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) );
       },