From e31ed5b07466d4a579fe4b025f97c971003fbc3f Mon Sep 17 00:00:00 2001
From: "Matt A. Tobin" <email@mattatobin.com>
Date: Fri, 17 Apr 2020 07:10:54 -0400
Subject: Bug 1409975 - Implement node distribution for shadow tree slots

* Implementation for assignedNodes
* Include slots in the flat tree
* Fix event get-the-parent algorithm for a node
* Update and add reftests for Shadow DOM v1
* Update web platform tests expectations

Tag #1375
---
 .../webcomponents/basic-insertion-point-1-ref.html |  8 --------
 .../webcomponents/basic-insertion-point-1.html     | 21 -------------------
 .../webcomponents/basic-insertion-point-2-ref.html | 11 ----------
 .../webcomponents/basic-insertion-point-2.html     | 24 ----------------------
 layout/reftests/webcomponents/basic-shadow-1.html  |  2 +-
 layout/reftests/webcomponents/basic-shadow-2.html  |  2 +-
 layout/reftests/webcomponents/basic-shadow-3.html  |  2 +-
 layout/reftests/webcomponents/basic-shadow-4.html  |  2 +-
 .../reftests/webcomponents/basic-slot-1-ref.html   | 11 ++++++++++
 layout/reftests/webcomponents/basic-slot-1.html    |  6 ++++++
 .../reftests/webcomponents/basic-slot-2-ref.html   | 16 +++++++++++++++
 layout/reftests/webcomponents/basic-slot-2.html    |  7 +++++++
 .../reftests/webcomponents/basic-slot-3-ref.html   |  8 ++++++++
 layout/reftests/webcomponents/basic-slot-3.html    | 18 ++++++++++++++++
 layout/reftests/webcomponents/basic-slot-4.html    | 20 ++++++++++++++++++
 .../dynamic-insertion-point-distribution-1.html    | 10 +++++----
 .../dynamic-insertion-point-distribution-2.html    |  8 +++++---
 .../dynamic-shadow-element-1-ref.html              | 10 ---------
 .../webcomponents/dynamic-shadow-element-1.html    | 23 ---------------------
 .../reftests/webcomponents/fallback-content-1.html |  8 ++++----
 .../reftests/webcomponents/input-transition-1.html | 18 ++++++++--------
 .../webcomponents/nested-insertion-point-1.html    | 11 +++++-----
 .../webcomponents/reframe-shadow-child-1.html      | 16 +++++++++++++++
 .../webcomponents/reframe-shadow-child-2.html      | 15 ++++++++++++++
 layout/reftests/webcomponents/reftest.list         |  8 ++++++--
 .../webcomponents/remove-append-shadow-host-1.html |  2 +-
 .../webcomponents/remove-insertion-point-1.html    |  8 ++++----
 .../webcomponents/style-sharing-across-shadow.html | 22 ++++++++++++++++++++
 layout/reftests/webcomponents/style-sharing.html   | 14 +++++++++++++
 .../update-dist-node-descendants-1.html            | 17 +++++++--------
 layout/style/res/ua.css                            |  6 ++++++
 31 files changed, 214 insertions(+), 140 deletions(-)
 delete mode 100644 layout/reftests/webcomponents/basic-insertion-point-1-ref.html
 delete mode 100644 layout/reftests/webcomponents/basic-insertion-point-1.html
 delete mode 100644 layout/reftests/webcomponents/basic-insertion-point-2-ref.html
 delete mode 100644 layout/reftests/webcomponents/basic-insertion-point-2.html
 create mode 100644 layout/reftests/webcomponents/basic-slot-1-ref.html
 create mode 100644 layout/reftests/webcomponents/basic-slot-1.html
 create mode 100644 layout/reftests/webcomponents/basic-slot-2-ref.html
 create mode 100644 layout/reftests/webcomponents/basic-slot-2.html
 create mode 100644 layout/reftests/webcomponents/basic-slot-3-ref.html
 create mode 100644 layout/reftests/webcomponents/basic-slot-3.html
 create mode 100644 layout/reftests/webcomponents/basic-slot-4.html
 delete mode 100644 layout/reftests/webcomponents/dynamic-shadow-element-1-ref.html
 delete mode 100644 layout/reftests/webcomponents/dynamic-shadow-element-1.html
 create mode 100644 layout/reftests/webcomponents/reframe-shadow-child-1.html
 create mode 100644 layout/reftests/webcomponents/reframe-shadow-child-2.html
 create mode 100644 layout/reftests/webcomponents/style-sharing-across-shadow.html
 create mode 100644 layout/reftests/webcomponents/style-sharing.html

(limited to 'layout')

diff --git a/layout/reftests/webcomponents/basic-insertion-point-1-ref.html b/layout/reftests/webcomponents/basic-insertion-point-1-ref.html
deleted file mode 100644
index 16f6afb28..000000000
--- a/layout/reftests/webcomponents/basic-insertion-point-1-ref.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<body>
-<div>
-  <div style="border: 10px solid green">Hello</div>
-</div>
-</body>
-</html>
diff --git a/layout/reftests/webcomponents/basic-insertion-point-1.html b/layout/reftests/webcomponents/basic-insertion-point-1.html
deleted file mode 100644
index 727175ef3..000000000
--- a/layout/reftests/webcomponents/basic-insertion-point-1.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<head>
-  <script>
-    function tweak() {
-      // div with style "border: 10px solid green"
-      var shadowDiv = document.createElement("div");
-      shadowDiv.style.border = "10px solid green";
-
-      var insertionPoint = document.createElement("content");
-      shadowDiv.appendChild(insertionPoint);
-
-      var shadowRoot = document.getElementById('outer').createShadowRoot();
-      shadowRoot.appendChild(shadowDiv);
-    }
-  </script>
-</head>
-<body onload="tweak()">
-<div id="outer">Hello</div>
-</body>
-</html>
diff --git a/layout/reftests/webcomponents/basic-insertion-point-2-ref.html b/layout/reftests/webcomponents/basic-insertion-point-2-ref.html
deleted file mode 100644
index 5e9213775..000000000
--- a/layout/reftests/webcomponents/basic-insertion-point-2-ref.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<body>
-<div>
-  <div style="border: 10px solid green">
-    <span style="background-color: purple">Hello</span>
-    <span style="background-color: orange">World</span>
-  </div>
-</div>
-</body>
-</html>
diff --git a/layout/reftests/webcomponents/basic-insertion-point-2.html b/layout/reftests/webcomponents/basic-insertion-point-2.html
deleted file mode 100644
index 595edb471..000000000
--- a/layout/reftests/webcomponents/basic-insertion-point-2.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<head>
-  <script>
-    function tweak() {
-      // div with style "border: 10px solid green"
-      var shadowDiv = document.createElement("div");
-      shadowDiv.style.border = "10px solid green";
-
-      var insertionPoint = document.createElement("content");
-      shadowDiv.appendChild(insertionPoint);
-
-      var shadowRoot = document.getElementById('outer').createShadowRoot();
-      shadowRoot.appendChild(shadowDiv);
-    }
-  </script>
-</head>
-<body onload="tweak()">
-<div id="outer">
-  <span style="background-color: purple">Hello</span>
-  <span style="background-color: orange">World</span>
-</div>
-</body>
-</html>
diff --git a/layout/reftests/webcomponents/basic-shadow-1.html b/layout/reftests/webcomponents/basic-shadow-1.html
index 944a594d2..8949dfc6d 100644
--- a/layout/reftests/webcomponents/basic-shadow-1.html
+++ b/layout/reftests/webcomponents/basic-shadow-1.html
@@ -9,7 +9,7 @@
       shadowDiv.style.height = "100px";
       shadowDiv.style.backgroundColor = "green";
 
-      var shadowRoot = document.getElementById('outer').createShadowRoot();
+      var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'});
       shadowRoot.appendChild(shadowDiv);
     }
   </script>
diff --git a/layout/reftests/webcomponents/basic-shadow-2.html b/layout/reftests/webcomponents/basic-shadow-2.html
index 587c47221..8e066997d 100644
--- a/layout/reftests/webcomponents/basic-shadow-2.html
+++ b/layout/reftests/webcomponents/basic-shadow-2.html
@@ -6,7 +6,7 @@
       var shadowDiv = document.createElement("div");
       shadowDiv.style.border = "10px solid green";
 
-      var shadowRoot = document.getElementById('outer').createShadowRoot();
+      var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'});
       shadowRoot.appendChild(shadowDiv);
 
       var orangeDiv = document.createElement("div");
diff --git a/layout/reftests/webcomponents/basic-shadow-3.html b/layout/reftests/webcomponents/basic-shadow-3.html
index 2ae53b5a9..3226c4baa 100644
--- a/layout/reftests/webcomponents/basic-shadow-3.html
+++ b/layout/reftests/webcomponents/basic-shadow-3.html
@@ -6,7 +6,7 @@
       var shadowDiv = document.createElement("div");
       shadowDiv.style.border = "10px solid green";
 
-      var shadowRoot = document.getElementById('outer').createShadowRoot();
+      var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'});
       shadowRoot.appendChild(shadowDiv);
 
       var orangeDiv = document.createElement("div");
diff --git a/layout/reftests/webcomponents/basic-shadow-4.html b/layout/reftests/webcomponents/basic-shadow-4.html
index 70f91773e..39dc51a9e 100644
--- a/layout/reftests/webcomponents/basic-shadow-4.html
+++ b/layout/reftests/webcomponents/basic-shadow-4.html
@@ -6,7 +6,7 @@
       var shadowDiv = document.createElement("div");
       shadowDiv.style.border = "10px solid green";
 
-      var shadowRoot = document.getElementById('outer').createShadowRoot();
+      var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'});
       shadowRoot.appendChild(shadowDiv);
 
       var orangeDiv = document.createElement("div");
diff --git a/layout/reftests/webcomponents/basic-slot-1-ref.html b/layout/reftests/webcomponents/basic-slot-1-ref.html
new file mode 100644
index 000000000..4f7418498
--- /dev/null
+++ b/layout/reftests/webcomponents/basic-slot-1-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      body { color: green; }
+    </style>
+  </head>
+  <body>
+    This text should be green
+  </body>
+</html>
diff --git a/layout/reftests/webcomponents/basic-slot-1.html b/layout/reftests/webcomponents/basic-slot-1.html
new file mode 100644
index 000000000..b31f4c1c3
--- /dev/null
+++ b/layout/reftests/webcomponents/basic-slot-1.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<html>
+  <body>
+    <slot style="color: green">This text should be green</slot>
+  </body>
+</html>
diff --git a/layout/reftests/webcomponents/basic-slot-2-ref.html b/layout/reftests/webcomponents/basic-slot-2-ref.html
new file mode 100644
index 000000000..d4d1b8c06
--- /dev/null
+++ b/layout/reftests/webcomponents/basic-slot-2-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <style>
+    div {
+      width: 100px;
+      height: 100px;
+      background: green;
+    }
+  </style>
+</head>
+<body>
+  <p>There should be a green box below.</p>
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/webcomponents/basic-slot-2.html b/layout/reftests/webcomponents/basic-slot-2.html
new file mode 100644
index 000000000..3754ace20
--- /dev/null
+++ b/layout/reftests/webcomponents/basic-slot-2.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+  <body>
+    <p>There should be a green box below.</p>
+    <slot style="display: block; width: 100px; height: 100px; background: green;"></slot>
+  </body>
+</html>
diff --git a/layout/reftests/webcomponents/basic-slot-3-ref.html b/layout/reftests/webcomponents/basic-slot-3-ref.html
new file mode 100644
index 000000000..54be54848
--- /dev/null
+++ b/layout/reftests/webcomponents/basic-slot-3-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div>
+  <div style="color: green">This text should be green</div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/webcomponents/basic-slot-3.html b/layout/reftests/webcomponents/basic-slot-3.html
new file mode 100644
index 000000000..c00483fe2
--- /dev/null
+++ b/layout/reftests/webcomponents/basic-slot-3.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <script>
+    function tweak() {
+      var slot = document.createElement("slot");
+      slot.style.color = "green";
+
+      var shadowRoot =
+        document.getElementById('outer').attachShadow({mode: 'open'});
+      shadowRoot.appendChild(slot);
+    }
+  </script>
+</head>
+<body onload="tweak()">
+<div id="outer">This text should be green</div>
+</body>
+</html>
diff --git a/layout/reftests/webcomponents/basic-slot-4.html b/layout/reftests/webcomponents/basic-slot-4.html
new file mode 100644
index 000000000..496a92651
--- /dev/null
+++ b/layout/reftests/webcomponents/basic-slot-4.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <script>
+    function tweak() {
+      var slot = document.createElement("slot");
+      // The border shouldn't be visible, due to display: contents.
+      slot.style.border = "1px solid red";
+      slot.style.color = "green";
+
+      var shadowRoot =
+        document.getElementById('outer').attachShadow({mode: 'open'});
+      shadowRoot.appendChild(slot);
+    }
+  </script>
+</head>
+<body onload="tweak()">
+<div id="outer">This text should be green</div>
+</body>
+</html>
diff --git a/layout/reftests/webcomponents/dynamic-insertion-point-distribution-1.html b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-1.html
index c57f72b37..aefe84f25 100644
--- a/layout/reftests/webcomponents/dynamic-insertion-point-distribution-1.html
+++ b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-1.html
@@ -5,9 +5,11 @@
   <body>
     <div id="host"></div>
     <script>
-      var host = document.getElementById("host");
-      var root = host.createShadowRoot();
-      root.innerHTML = 'a <content></content> c';
+      var host, root;
+
+      host = document.getElementById("host");
+      root = host.attachShadow({mode: 'open'});
+      root.innerHTML = 'a <slot></slot> c';
 
       function tweak() {
         var span = document.createElement("span");
@@ -19,7 +21,7 @@
         document.documentElement.removeAttribute("class");
       }
 
-      window.addEventListener("MozReftestInvalidate", tweak, false);
+      window.addEventListener("MozReftestInvalidate", tweak);
     </script>
   </body>
 </html>
diff --git a/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2.html b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2.html
index 29a850e90..d753af09c 100644
--- a/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2.html
+++ b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2.html
@@ -5,8 +5,10 @@
   <body>
     <div id="host"></div>
     <script>
-      var host = document.getElementById("host");
-      var root = host.createShadowRoot();
+      var host, root;
+
+      host = document.getElementById("host");
+      root = host.attachShadow({mode: 'open'});
       root.innerHTML = "<span>a</span>";
 
       function tweak() {
@@ -20,7 +22,7 @@
         document.documentElement.removeAttribute("class");
       }
 
-      window.addEventListener("MozReftestInvalidate", tweak, false);
+      window.addEventListener("MozReftestInvalidate", tweak);
     </script>
   </body>
 </html>
diff --git a/layout/reftests/webcomponents/dynamic-shadow-element-1-ref.html b/layout/reftests/webcomponents/dynamic-shadow-element-1-ref.html
deleted file mode 100644
index a3b5150f6..000000000
--- a/layout/reftests/webcomponents/dynamic-shadow-element-1-ref.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<head>
-</head>
-<body>
-<div>
-  <div style="background-color: green"><span>Hello</span><span> </span><span>World</span></div>
-</div>
-</body>
-</html>
diff --git a/layout/reftests/webcomponents/dynamic-shadow-element-1.html b/layout/reftests/webcomponents/dynamic-shadow-element-1.html
deleted file mode 100644
index 0142164a1..000000000
--- a/layout/reftests/webcomponents/dynamic-shadow-element-1.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<head>
-  <script>
-    function tweak() {
-      var oldestShadow = document.getElementById('outer').createShadowRoot();
-      oldestShadow.innerHTML = 'Hello';
-
-      var olderShadow = document.getElementById('outer').createShadowRoot();
-
-      var youngerShadow = document.getElementById('outer').createShadowRoot();
-      youngerShadow.innerHTML = '<div style="background-color:green"><shadow></shadow></div>';
-
-      olderShadow.innerHTML = '<shadow></shadow> World';
-    }
-  </script>
-</head>
-<body onload="tweak()">
-<div id="outer">
-  <div style="width:300px; height:100px; background-color:red;"></div>
-</div>
-</body>
-</html>
diff --git a/layout/reftests/webcomponents/fallback-content-1.html b/layout/reftests/webcomponents/fallback-content-1.html
index ac3b5d02a..0bcd2abbd 100644
--- a/layout/reftests/webcomponents/fallback-content-1.html
+++ b/layout/reftests/webcomponents/fallback-content-1.html
@@ -8,13 +8,13 @@
       shadowDiv.style.border = "10px solid green";
 
       // Insertion point will match nothing and use fallback content.
-      var insertionPoint = document.createElement("content");
-      shadowDiv.appendChild(insertionPoint);
+      var slot = document.createElement("slot");
+      shadowDiv.appendChild(slot);
 
       // Append three nodes as children to use as fallback content.
-      insertionPoint.innerHTML = '<span style="background-color: orange">Hello</span> <span style="background-color: green">World</span>';
+      slot.innerHTML = '<span style="background-color: orange">Hello</span> <span style="background-color: green">World</span>';
 
-      var shadowRoot = document.getElementById('outer').createShadowRoot();
+      var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'});
       shadowRoot.appendChild(shadowDiv);
     }
   </script>
diff --git a/layout/reftests/webcomponents/input-transition-1.html b/layout/reftests/webcomponents/input-transition-1.html
index ede0fa40b..c11444d05 100644
--- a/layout/reftests/webcomponents/input-transition-1.html
+++ b/layout/reftests/webcomponents/input-transition-1.html
@@ -5,19 +5,21 @@
   <body>
     <div id="host"></div>
     <script>
-      var host = document.getElementById("host");
-      var root = host.createShadowRoot();
+      var host, root;
+
+      host = document.getElementById("host");
+      root = host.attachShadow({mode: 'open'});
       root.innerHTML = '<style>input ~ div { background: red; transition: background 100ms; } input:checked ~ div { background: green; }</style><input id="one" type="checkbox"><div style="height: 50px; width: 50px;"></div>';
 
       function tweak() {
-          var el = root.getElementById("one");
-          el.checked = true;
-          el.nextSibling.addEventListener("transitionend", function() {
-            document.documentElement.removeAttribute("class");
-          }, false);
+        var el = root.getElementById("one");
+        el.checked = true;
+        el.nextSibling.addEventListener("transitionend", function() {
+          setTimeout(()=>{document.documentElement.removeAttribute("class")}, 1000); // wait for the checkbox SVG image to load on Android
+        });
       }
 
-      window.addEventListener("MozReftestInvalidate", tweak, false);
+      window.addEventListener("MozReftestInvalidate", tweak);
     </script>
   </body>
 </html>
diff --git a/layout/reftests/webcomponents/nested-insertion-point-1.html b/layout/reftests/webcomponents/nested-insertion-point-1.html
index 66892029a..3d0d92f0d 100644
--- a/layout/reftests/webcomponents/nested-insertion-point-1.html
+++ b/layout/reftests/webcomponents/nested-insertion-point-1.html
@@ -7,19 +7,20 @@
       var outerShadow = document.createElement("div");
       outerShadow.style.border = "10px solid green";
 
-      var outerInsertionPoint = document.createElement("content");
+      var outerInsertionPoint = document.createElement("slot");
       outerShadow.appendChild(outerInsertionPoint);
 
       // div with style "border: 10px solid orange"
       var innerShadow = document.createElement("div");
       innerShadow.style.border = "10px solid orange";
 
-      var innerInsertionPoint = document.createElement("content");
-      innerShadow.appendChild(innerInsertionPoint);
+      var slot = document.createElement("slot");
+      innerShadow.appendChild(slot);
 
-      outerShadow.createShadowRoot().appendChild(innerShadow);
+      outerShadow.attachShadow({mode: 'open'}).appendChild(innerShadow);
 
-      var shadowRoot = document.getElementById('outer').createShadowRoot();
+      var shadowRoot =
+        document.getElementById('outer').attachShadow({mode: 'open'});
       shadowRoot.appendChild(outerShadow);
     }
   </script>
diff --git a/layout/reftests/webcomponents/reframe-shadow-child-1.html b/layout/reftests/webcomponents/reframe-shadow-child-1.html
new file mode 100644
index 000000000..d953beb6d
--- /dev/null
+++ b/layout/reftests/webcomponents/reframe-shadow-child-1.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<template id="tmpl">
+  <div style="display: table">
+    Some text
+    <span style="display: table-cell">something</span>
+    More text
+  </div>
+</template>
+<div id="host"></div>
+<script>
+  let shadowRoot = document.getElementById("host").attachShadow({mode: 'open'});
+  let tmpl = document.getElementById("tmpl");
+  shadowRoot.appendChild(document.importNode(tmpl.content, true));
+  document.body.offsetTop;
+  shadowRoot.firstElementChild.querySelector("span").remove();
+</script>
diff --git a/layout/reftests/webcomponents/reframe-shadow-child-2.html b/layout/reftests/webcomponents/reframe-shadow-child-2.html
new file mode 100644
index 000000000..0ebbe7433
--- /dev/null
+++ b/layout/reftests/webcomponents/reframe-shadow-child-2.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<template id="tmpl">
+  <div style="display: block">
+    Some text
+    More text
+  </div>
+</template>
+<div id="host"></div>
+<script>
+  let shadowRoot = document.getElementById("host").attachShadow({mode: 'open'});
+  let tmpl = document.getElementById("tmpl");
+  shadowRoot.appendChild(document.importNode(tmpl.content, true));
+  document.body.offsetTop;
+  shadowRoot.firstElementChild.style.display = "table";
+</script>
diff --git a/layout/reftests/webcomponents/reftest.list b/layout/reftests/webcomponents/reftest.list
index 280cd204e..6afbc2720 100644
--- a/layout/reftests/webcomponents/reftest.list
+++ b/layout/reftests/webcomponents/reftest.list
@@ -3,8 +3,6 @@ pref(dom.webcomponents.enabled,true) == basic-shadow-1.html basic-shadow-1-ref.h
 pref(dom.webcomponents.enabled,true) == basic-shadow-2.html basic-shadow-2-ref.html
 pref(dom.webcomponents.enabled,true) == basic-shadow-3.html basic-shadow-3-ref.html
 pref(dom.webcomponents.enabled,true) == basic-shadow-4.html basic-shadow-4-ref.html
-#bug 1421542 pref(dom.webcomponents.enabled,true) == basic-insertion-point-1.html basic-insertion-point-1-ref.html
-#bug 1421542 pref(dom.webcomponents.enabled,true) == basic-insertion-point-2.html basic-insertion-point-2-ref.html
 pref(dom.webcomponents.enabled,true) == fallback-content-1.html fallback-content-1-ref.html
 pref(dom.webcomponents.enabled,true) == remove-insertion-point-1.html remove-insertion-point-1-ref.html
 #bug 1421542 pref(dom.webcomponents.enabled,true) == nested-insertion-point-1.html nested-insertion-point-1-ref.html
@@ -13,3 +11,9 @@ pref(dom.webcomponents.enabled,true) == input-transition-1.html input-transition
 #bug 1421542 pref(dom.webcomponents.enabled,true) == dynamic-insertion-point-distribution-1.html dynamic-insertion-point-distribution-1-ref.html
 pref(dom.webcomponents.enabled,true) == dynamic-insertion-point-distribution-2.html dynamic-insertion-point-distribution-2-ref.html
 pref(dom.webcomponents.enabled,true) == remove-append-shadow-host-1.html remove-append-shadow-host-1-ref.html
+pref(dom.webcomponents.enabled,true) == basic-slot-1.html basic-slot-1-ref.html
+pref(dom.webcomponents.enabled,true) == basic-slot-2.html basic-slot-2-ref.html
+pref(dom.webcomponents.enabled,true) == basic-slot-3.html basic-slot-3-ref.html
+pref(dom.webcomponents.enabled,true) == basic-slot-4.html basic-slot-3-ref.html
+pref(dom.webcomponents.enabled,true) == basic-slot-5.html basic-slot-5-ref.html
+pref(dom.webcomponents.enabled,true) == basic-slot-6.html basic-slot-6-ref.html
diff --git a/layout/reftests/webcomponents/remove-append-shadow-host-1.html b/layout/reftests/webcomponents/remove-append-shadow-host-1.html
index 85161565e..1a752eba6 100644
--- a/layout/reftests/webcomponents/remove-append-shadow-host-1.html
+++ b/layout/reftests/webcomponents/remove-append-shadow-host-1.html
@@ -6,7 +6,7 @@
     <div id="container"><div id="host"></div></div>
     <script>
       var host = document.getElementById("host");
-      var root = host.createShadowRoot();
+      var root = host.attachShadow({mode: 'open'});
       root.innerHTML = 'inside shadow DOM';
 
       var container = document.getElementById("container");
diff --git a/layout/reftests/webcomponents/remove-insertion-point-1.html b/layout/reftests/webcomponents/remove-insertion-point-1.html
index 195673ca8..1b7588daf 100644
--- a/layout/reftests/webcomponents/remove-insertion-point-1.html
+++ b/layout/reftests/webcomponents/remove-insertion-point-1.html
@@ -8,15 +8,15 @@
       shadowDiv.style.border = "10px solid green";
 
       // Insertion point will match nothing and use fallback content.
-      var insertionPoint = document.createElement("content");
-      shadowDiv.appendChild(insertionPoint);
+      var slot = document.createElement("slot");
+      shadowDiv.appendChild(slot);
 
-      var shadowRoot = document.getElementById('outer').createShadowRoot();
+      var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'});
       shadowRoot.appendChild(shadowDiv);
 
       // Remove the insertion point from the ShadowRoot, "Hello" should no
       // longer be rendered.
-      shadowDiv.removeChild(insertionPoint);
+      shadowDiv.removeChild(slot);
     }
   </script>
 </head>
diff --git a/layout/reftests/webcomponents/style-sharing-across-shadow.html b/layout/reftests/webcomponents/style-sharing-across-shadow.html
new file mode 100644
index 000000000..b41cf7479
--- /dev/null
+++ b/layout/reftests/webcomponents/style-sharing-across-shadow.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<style>
+  div { display: contents }
+</style>
+<div></div>
+<div></div>
+<script>
+  let divs = document.querySelectorAll('div');
+  divs[0].attachShadow({mode: 'open'}).innerHTML = `
+    <style>
+      * { color: green; }
+    </style>
+    <span>Should be green</span>
+  `;
+  divs[1].attachShadow({mode: 'open'}).innerHTML = `
+    <style>
+      * { color: initial; }
+      [foo] { }
+    </style>
+    <span>Should not be green</span>
+  `;
+</script>
diff --git a/layout/reftests/webcomponents/style-sharing.html b/layout/reftests/webcomponents/style-sharing.html
new file mode 100644
index 000000000..0a1e3c95c
--- /dev/null
+++ b/layout/reftests/webcomponents/style-sharing.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<div id="host"></div>
+<script>
+  let root = host.attachShadow({mode: 'open'});
+  root.innerHTML = `
+    <style>
+      #test {
+        color: green;
+      }
+    </style>
+    <span id="test">Should be green</span>
+    <span id="test2">Should not be green</span>
+  `;
+</script>
diff --git a/layout/reftests/webcomponents/update-dist-node-descendants-1.html b/layout/reftests/webcomponents/update-dist-node-descendants-1.html
index e2dd4ebb7..003c23394 100644
--- a/layout/reftests/webcomponents/update-dist-node-descendants-1.html
+++ b/layout/reftests/webcomponents/update-dist-node-descendants-1.html
@@ -5,17 +5,18 @@
 <body>
 <div id="outer"><span id="distnode">text</span></div>
 <script>
-var shadowRoot = document.getElementById('outer').createShadowRoot();
-shadowRoot.innerHTML = '<div><content></content></div>';
 
-function tweak() {
-  var distNode = document.getElementById("distnode");
-  distNode.textContent = "Hello World";
+  var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'});
+  shadowRoot.innerHTML = '<div><slot></slot></div>';
 
-  document.documentElement.removeAttribute("class");
-}
+  function tweak() {
+    var distNode = document.getElementById("distnode");
+    distNode.textContent = "Hello World";
 
-window.addEventListener("MozReftestInvalidate", tweak);
+    document.documentElement.removeAttribute("class");
+	}
+
+  window.addEventListener("MozReftestInvalidate", tweak);
 </script>
 </body>
 </html>
diff --git a/layout/style/res/ua.css b/layout/style/res/ua.css
index 931b32eb8..504f5dc57 100644
--- a/layout/style/res/ua.css
+++ b/layout/style/res/ua.css
@@ -471,3 +471,9 @@ div:-moz-native-anonymous.moz-custom-content-container {
   width: 100%;
   height: 100%;
 }
+
+/* Shadow DOM v1
+ * https://drafts.csswg.org/css-scoping/#slots-in-shadow-tree */
+slot {
+  display: contents;
+}
\ No newline at end of file
-- 
cgit v1.2.3