From 45c179d01bb9d15dfc861fcf8a77fe9dc749d2dc Mon Sep 17 00:00:00 2001
From: FranklinDM <mrmineshafter17@gmail.com>
Date: Sat, 4 Mar 2023 00:32:21 +0800
Subject: [PATCH] Issue #2135 - Bug 1453789: Remove Element.createShadowRoot

---
 .../markup/test/doc_markup_anonymous.html     |   6 +-
 .../mochitest/inspector-traversal-data.html   |   4 +-
 dom/base/Element.cpp                          |  15 +-
 dom/base/Element.h                            |   6 -
 dom/base/crashtests/1024428-1.html            |   3 +-
 dom/base/crashtests/1029710.html              |   2 +-
 dom/base/crashtests/1118764.html              |  33 ---
 .../webcomponents/test_shadow_element.html    | 173 -------------
 dom/webidl/Element.webidl                     |   4 -
 layout/base/crashtests/1261351-iframe.html    |   2 +-
 layout/base/crashtests/1404789-1.html         |  16 --
 layout/base/crashtests/crashtests.list        |   1 -
 layout/reftests/bugs/1066554-1.html           |  20 +-
 .../display-contents-shadow-dom-1.html        | 239 ------------------
 layout/reftests/css-display/reftest.list      |   1 -
 layout/reftests/mathml/shadow-dom-1.html      |   8 +-
 .../webcomponents/cross-tree-selection-1.html |   7 +-
 layout/style/crashtests/1017798-1.html        |   4 +-
 layout/style/crashtests/1089463-1.html        |   2 +-
 19 files changed, 25 insertions(+), 521 deletions(-)
 delete mode 100644 dom/base/crashtests/1118764.html
 delete mode 100644 dom/tests/mochitest/webcomponents/test_shadow_element.html
 delete mode 100644 layout/base/crashtests/1404789-1.html
 delete mode 100644 layout/reftests/css-display/display-contents-shadow-dom-1.html

diff --git a/devtools/client/inspector/markup/test/doc_markup_anonymous.html b/devtools/client/inspector/markup/test/doc_markup_anonymous.html
index 0ede3ca5ff..bb5389cbe6 100644
--- a/devtools/client/inspector/markup/test/doc_markup_anonymous.html
+++ b/devtools/client/inspector/markup/test/doc_markup_anonymous.html
@@ -25,10 +25,8 @@
   <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>
\ No newline at end of file
diff --git a/devtools/server/tests/mochitest/inspector-traversal-data.html b/devtools/server/tests/mochitest/inspector-traversal-data.html
index 45b8c2eded..ada4814d40 100644
--- a/devtools/server/tests/mochitest/inspector-traversal-data.html
+++ b/devtools/server/tests/mochitest/inspector-traversal-data.html
@@ -21,8 +21,8 @@
 
       // Set up a basic shadow DOM
       var host = document.querySelector('#shadow');
-      if (host.createShadowRoot) {
-        var root = host.createShadowRoot();
+      if (host.attachShadow) {
+        let root = host.attachShadow({ mode: "open" });
         root.innerHTML = '<h3>Shadow <em>DOM</em></h3><select multiple></select>';
       }
 
diff --git a/dom/base/Element.cpp b/dom/base/Element.cpp
index 9f579b9c6d..b299d3849e 100644
--- a/dom/base/Element.cpp
+++ b/dom/base/Element.cpp
@@ -1126,18 +1126,6 @@ Element::AttachShadow(const ShadowRootInit& aInit, ErrorResult& aError)
     return nullptr;
   }
 
-  return AttachShadowInternal(aInit.mMode == ShadowRootMode::Closed, aError);
-}
-
-already_AddRefed<ShadowRoot>
-Element::CreateShadowRoot(ErrorResult& aError)
-{
-  return AttachShadowInternal(false, aError);
-}
-
-already_AddRefed<ShadowRoot>
-Element::AttachShadowInternal(bool aClosed, ErrorResult& aError)
-{
   /**
    * 3. If context object is a shadow host, then throw
    *    an "InvalidStateError" DOMException.
@@ -1183,8 +1171,9 @@ Element::AttachShadowInternal(bool aClosed, ErrorResult& aError)
    *    context object???s node document, host is context object,
    *    and mode is init???s mode.
    */
+  bool isClosed = (aInit.mMode == ShadowRootMode::Closed);
   RefPtr<ShadowRoot> shadowRoot =
-    new ShadowRoot(this, aClosed, nodeInfo.forget(), protoBinding);
+    new ShadowRoot(this, isClosed, nodeInfo.forget(), protoBinding);
 
   shadowRoot->SetIsComposedDocParticipant(IsInComposedDoc());
 
diff --git a/dom/base/Element.h b/dom/base/Element.h
index 4830878fd9..7dae897e77 100644
--- a/dom/base/Element.h
+++ b/dom/base/Element.h
@@ -470,9 +470,6 @@ protected:
     mState &= ~aStates;
   }
 
-  already_AddRefed<ShadowRoot> AttachShadowInternal(bool aClosed,
-                                                    ErrorResult& aError);
-
 private:
   // Need to allow the ESM, nsGlobalWindow, and the focus manager to
   // set our state
@@ -930,9 +927,6 @@ public:
   void SetSlot(const nsAString& aName, ErrorResult& aError);
   void GetSlot(nsAString& aName);
 
-  // [deprecated] Shadow DOM v0
-  already_AddRefed<ShadowRoot> CreateShadowRoot(ErrorResult& aError);
-
   ShadowRoot *FastGetShadowRoot() const
   {
     nsExtendedDOMSlots* slots = GetExistingExtendedDOMSlots();
diff --git a/dom/base/crashtests/1024428-1.html b/dom/base/crashtests/1024428-1.html
index ce181c8af3..8c96a66ef7 100644
--- a/dom/base/crashtests/1024428-1.html
+++ b/dom/base/crashtests/1024428-1.html
@@ -5,8 +5,7 @@
 <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>
diff --git a/dom/base/crashtests/1029710.html b/dom/base/crashtests/1029710.html
index b6bda3f267..bb78b561e4 100644
--- a/dom/base/crashtests/1029710.html
+++ b/dom/base/crashtests/1029710.html
@@ -3,7 +3,7 @@
 <body>
 <script>
   var x = document.createElement('span');
-  x.createShadowRoot();
+  x.attachShadow({ mode: "open" });
   x.id = 'a';
 </script>
 </body>
diff --git a/dom/base/crashtests/1118764.html b/dom/base/crashtests/1118764.html
deleted file mode 100644
index 54a4d94b6a..0000000000
--- 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>
diff --git a/dom/tests/mochitest/webcomponents/test_shadow_element.html b/dom/tests/mochitest/webcomponents/test_shadow_element.html
deleted file mode 100644
index 4440650d7d..0000000000
--- 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.removeChild(host.firstChild);
-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.removeChild(firstShadow.firstChild);
-
-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.removeChild(host.firstChild);
-
-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>
-
diff --git a/dom/webidl/Element.webidl b/dom/webidl/Element.webidl
index d5cac7c647..57f37aade0 100644
--- a/dom/webidl/Element.webidl
+++ b/dom/webidl/Element.webidl
@@ -244,10 +244,6 @@ partial interface Element {
   readonly attribute HTMLSlotElement? assignedSlot;
   [CEReactions, Unscopable, SetterThrows, Func="nsDocument::IsWebComponentsEnabled"]
            attribute DOMString slot;
-
-  // [deprecated] Shadow DOM v0
-  [Throws, Func="nsDocument::IsWebComponentsEnabled"]
-  ShadowRoot createShadowRoot();
 };
 
 Element implements ChildNode;
diff --git a/layout/base/crashtests/1261351-iframe.html b/layout/base/crashtests/1261351-iframe.html
index a0484f3325..3730e83fa4 100644
--- a/layout/base/crashtests/1261351-iframe.html
+++ b/layout/base/crashtests/1261351-iframe.html
@@ -10,7 +10,7 @@
       }
 
       connectedCallback() {
-        let shadow = this.createShadowRoot();
+        let shadow = this.attachShadow({ mode: "open" });
         if (this.template) {
           let te = document.createElement('template');
           te.innerHTML = this.template;
diff --git a/layout/base/crashtests/1404789-1.html b/layout/base/crashtests/1404789-1.html
deleted file mode 100644
index bd577ae24d..0000000000
--- 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>
diff --git a/layout/base/crashtests/crashtests.list b/layout/base/crashtests/crashtests.list
index c0b0085493..dfd77497e5 100644
--- a/layout/base/crashtests/crashtests.list
+++ b/layout/base/crashtests/crashtests.list
@@ -484,6 +484,5 @@ load 1308793.svg
 load 1308848-1.html
 load 1308848-2.html
 asserts(0-1) load 1343606.html # bug 1343948
-load 1404789-1.html
 load 1404789-2.html
 load 1419762.html
diff --git a/layout/reftests/bugs/1066554-1.html b/layout/reftests/bugs/1066554-1.html
index f4df207a1b..c78d33f3b1 100644
--- a/layout/reftests/bugs/1066554-1.html
+++ b/layout/reftests/bugs/1066554-1.html
@@ -7,17 +7,15 @@
   <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, false);
diff --git a/layout/reftests/css-display/display-contents-shadow-dom-1.html b/layout/reftests/css-display/display-contents-shadow-dom-1.html
deleted file mode 100644
index 6c0f297f9d..0000000000
--- a/layout/reftests/css-display/display-contents-shadow-dom-1.html
+++ /dev/null
@@ -1,239 +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
-    <span id="hostR"><style scoped>:scope{color:green}</style></span>
-    <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>
-    <!-- TODO(bug 1021572?) <div id="hostY" class="c" style="color:red"><b>Y</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>';
-        shadow("hostR").innerHTML = '<content select="span"></content>';
-        shadow("hostW").innerHTML = '<z style="color:red"><content select="b"></content></z>';
-        shadow("hostX").innerHTML = '<z style="color:red"><content select="b"></content></z>';
-        // TODO(bug 1021572?) shadow("hostY").innerHTML = '<content select="b"><style scoped>:scope{color:green}</style></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);
-
-        hostR.appendChild(span("R"));
-
-        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, false);
-      } else {
-        document.documentElement.removeAttribute("class");
-      }
-    </script>
-  </body>
-</html>
diff --git a/layout/reftests/css-display/reftest.list b/layout/reftests/css-display/reftest.list
index 933ea2d3b7..138bcc8713 100644
--- a/layout/reftests/css-display/reftest.list
+++ b/layout/reftests/css-display/reftest.list
@@ -17,7 +17,6 @@ pref(layout.css.display-contents.enabled,true) == display-contents-visibility-hi
 pref(layout.css.display-contents.enabled,true) == display-contents-visibility-hidden-2.html display-contents-visibility-hidden-ref.html
 pref(layout.css.display-contents.enabled,true) == display-contents-495385-2d.html display-contents-495385-2d-ref.html
 pref(layout.css.display-contents.enabled,true) == display-contents-xbl.xhtml display-contents-xbl-ref.html
-pref(layout.css.display-contents.enabled,true) pref(dom.webcomponents.enabled,true) == display-contents-shadow-dom-1.html display-contents-shadow-dom-1-ref.html
 pref(layout.css.display-contents.enabled,true) == display-contents-xbl-2.xul display-contents-xbl-2-ref.xul
 asserts(1) pref(layout.css.display-contents.enabled,true) == display-contents-xbl-3.xul display-contents-xbl-3-ref.xul # bug 1089223
 skip pref(layout.css.display-contents.enabled,true) == display-contents-xbl-4.xul display-contents-xbl-4-ref.xul # fails (not just asserts) due to bug 1089223
diff --git a/layout/reftests/mathml/shadow-dom-1.html b/layout/reftests/mathml/shadow-dom-1.html
index bbf27069fd..2022e3bcfd 100644
--- a/layout/reftests/mathml/shadow-dom-1.html
+++ b/layout/reftests/mathml/shadow-dom-1.html
@@ -7,11 +7,9 @@
   <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, false);
diff --git a/layout/reftests/webcomponents/cross-tree-selection-1.html b/layout/reftests/webcomponents/cross-tree-selection-1.html
index 01e7317f23..84e564c181 100644
--- a/layout/reftests/webcomponents/cross-tree-selection-1.html
+++ b/layout/reftests/webcomponents/cross-tree-selection-1.html
@@ -3,13 +3,8 @@
 <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);
diff --git a/layout/style/crashtests/1017798-1.html b/layout/style/crashtests/1017798-1.html
index 0460c8756f..fe7c5a333c 100644
--- a/layout/style/crashtests/1017798-1.html
+++ b/layout/style/crashtests/1017798-1.html
@@ -52,7 +52,7 @@ 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"]');
 
@@ -104,7 +104,7 @@ window.GaiaSwitch = (function(win) {
   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
diff --git a/layout/style/crashtests/1089463-1.html b/layout/style/crashtests/1089463-1.html
index f7a2f59613..8efb3f6674 100644
--- a/layout/style/crashtests/1089463-1.html
+++ b/layout/style/crashtests/1089463-1.html
@@ -3,7 +3,7 @@
 <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;