From 43a97878ce14b72f0981164f87f2e35e14151312 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sun, 7 Apr 2024 11:22:09 +0200
Subject: Adding upstream version 110.0.1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../reftests/webcomponents/basic-shadow-1-ref.html |  8 ++++++
 layout/reftests/webcomponents/basic-shadow-1.html  | 22 +++++++++++++++
 .../reftests/webcomponents/basic-shadow-2-ref.html | 11 ++++++++
 layout/reftests/webcomponents/basic-shadow-2.html  | 28 +++++++++++++++++++
 .../reftests/webcomponents/basic-shadow-3-ref.html | 10 +++++++
 layout/reftests/webcomponents/basic-shadow-3.html  | 29 ++++++++++++++++++++
 .../reftests/webcomponents/basic-shadow-4-ref.html | 10 +++++++
 layout/reftests/webcomponents/basic-shadow-4.html  | 28 +++++++++++++++++++
 .../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 ++++++++++++++
 .../reftests/webcomponents/basic-slot-5-ref.html   |  8 ++++++
 layout/reftests/webcomponents/basic-slot-5.html    | 21 +++++++++++++++
 .../reftests/webcomponents/basic-slot-6-ref.html   | 11 ++++++++
 layout/reftests/webcomponents/basic-slot-6.html    | 25 +++++++++++++++++
 ...dynamic-insertion-point-distribution-1-ref.html |  6 +++++
 .../dynamic-insertion-point-distribution-1.html    | 27 +++++++++++++++++++
 ...dynamic-insertion-point-distribution-2-ref.html |  6 +++++
 .../dynamic-insertion-point-distribution-2.html    | 28 +++++++++++++++++++
 .../webcomponents/fallback-content-1-ref.html      |  8 ++++++
 .../reftests/webcomponents/fallback-content-1.html | 25 +++++++++++++++++
 .../webcomponents/input-transition-1-ref.html      |  6 +++++
 .../reftests/webcomponents/input-transition-1.html | 25 +++++++++++++++++
 .../nested-insertion-point-1-ref.html              |  8 ++++++
 .../webcomponents/nested-insertion-point-1.html    | 31 ++++++++++++++++++++++
 .../webcomponents/reframe-shadow-child-1.html      | 16 +++++++++++
 .../webcomponents/reframe-shadow-child-2.html      | 15 +++++++++++
 .../webcomponents/reframe-shadow-child-ref.html    |  5 ++++
 layout/reftests/webcomponents/reftest.list         | 25 +++++++++++++++++
 .../remove-append-shadow-host-1-ref.html           |  6 +++++
 .../webcomponents/remove-append-shadow-host-1.html | 17 ++++++++++++
 .../remove-insertion-point-1-ref.html              |  8 ++++++
 .../webcomponents/remove-insertion-point-1.html    | 26 ++++++++++++++++++
 .../reftests/webcomponents/shadow-style-1-ref.html |  2 ++
 layout/reftests/webcomponents/shadow-style-1.html  | 11 ++++++++
 .../reftests/webcomponents/shadow-style-2-ref.html |  2 ++
 layout/reftests/webcomponents/shadow-style-2.html  | 15 +++++++++++
 .../reftests/webcomponents/shadow-style-3-ref.html |  2 ++
 layout/reftests/webcomponents/shadow-style-3.html  | 14 ++++++++++
 .../webcomponents/style-sharing-across-shadow.html | 22 +++++++++++++++
 .../reftests/webcomponents/style-sharing-ref.html  |  5 ++++
 layout/reftests/webcomponents/style-sharing.html   | 14 ++++++++++
 .../update-dist-node-descendants-1-ref.html        |  8 ++++++
 .../update-dist-node-descendants-1.html            | 22 +++++++++++++++
 48 files changed, 702 insertions(+)
 create mode 100644 layout/reftests/webcomponents/basic-shadow-1-ref.html
 create mode 100644 layout/reftests/webcomponents/basic-shadow-1.html
 create mode 100644 layout/reftests/webcomponents/basic-shadow-2-ref.html
 create mode 100644 layout/reftests/webcomponents/basic-shadow-2.html
 create mode 100644 layout/reftests/webcomponents/basic-shadow-3-ref.html
 create mode 100644 layout/reftests/webcomponents/basic-shadow-3.html
 create mode 100644 layout/reftests/webcomponents/basic-shadow-4-ref.html
 create mode 100644 layout/reftests/webcomponents/basic-shadow-4.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
 create mode 100644 layout/reftests/webcomponents/basic-slot-5-ref.html
 create mode 100644 layout/reftests/webcomponents/basic-slot-5.html
 create mode 100644 layout/reftests/webcomponents/basic-slot-6-ref.html
 create mode 100644 layout/reftests/webcomponents/basic-slot-6.html
 create mode 100644 layout/reftests/webcomponents/dynamic-insertion-point-distribution-1-ref.html
 create mode 100644 layout/reftests/webcomponents/dynamic-insertion-point-distribution-1.html
 create mode 100644 layout/reftests/webcomponents/dynamic-insertion-point-distribution-2-ref.html
 create mode 100644 layout/reftests/webcomponents/dynamic-insertion-point-distribution-2.html
 create mode 100644 layout/reftests/webcomponents/fallback-content-1-ref.html
 create mode 100644 layout/reftests/webcomponents/fallback-content-1.html
 create mode 100644 layout/reftests/webcomponents/input-transition-1-ref.html
 create mode 100644 layout/reftests/webcomponents/input-transition-1.html
 create mode 100644 layout/reftests/webcomponents/nested-insertion-point-1-ref.html
 create mode 100644 layout/reftests/webcomponents/nested-insertion-point-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/reframe-shadow-child-ref.html
 create mode 100644 layout/reftests/webcomponents/reftest.list
 create mode 100644 layout/reftests/webcomponents/remove-append-shadow-host-1-ref.html
 create mode 100644 layout/reftests/webcomponents/remove-append-shadow-host-1.html
 create mode 100644 layout/reftests/webcomponents/remove-insertion-point-1-ref.html
 create mode 100644 layout/reftests/webcomponents/remove-insertion-point-1.html
 create mode 100644 layout/reftests/webcomponents/shadow-style-1-ref.html
 create mode 100644 layout/reftests/webcomponents/shadow-style-1.html
 create mode 100644 layout/reftests/webcomponents/shadow-style-2-ref.html
 create mode 100644 layout/reftests/webcomponents/shadow-style-2.html
 create mode 100644 layout/reftests/webcomponents/shadow-style-3-ref.html
 create mode 100644 layout/reftests/webcomponents/shadow-style-3.html
 create mode 100644 layout/reftests/webcomponents/style-sharing-across-shadow.html
 create mode 100644 layout/reftests/webcomponents/style-sharing-ref.html
 create mode 100644 layout/reftests/webcomponents/style-sharing.html
 create mode 100644 layout/reftests/webcomponents/update-dist-node-descendants-1-ref.html
 create mode 100644 layout/reftests/webcomponents/update-dist-node-descendants-1.html

(limited to 'layout/reftests/webcomponents')

diff --git a/layout/reftests/webcomponents/basic-shadow-1-ref.html b/layout/reftests/webcomponents/basic-shadow-1-ref.html
new file mode 100644
index 0000000000..0d498d8c5c
--- /dev/null
+++ b/layout/reftests/webcomponents/basic-shadow-1-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div>
+  <div style="width:300px; height:100px; background-color:green;"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/webcomponents/basic-shadow-1.html b/layout/reftests/webcomponents/basic-shadow-1.html
new file mode 100644
index 0000000000..8949dfc6de
--- /dev/null
+++ b/layout/reftests/webcomponents/basic-shadow-1.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <script>
+    function tweak() {
+      // div with style "width:300px; height:100px; background-color:green"
+      var shadowDiv = document.createElement("div");
+      shadowDiv.style.width = "300px";
+      shadowDiv.style.height = "100px";
+      shadowDiv.style.backgroundColor = "green";
+
+      var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'});
+      shadowRoot.appendChild(shadowDiv);
+    }
+  </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/basic-shadow-2-ref.html b/layout/reftests/webcomponents/basic-shadow-2-ref.html
new file mode 100644
index 0000000000..74c50f5168
--- /dev/null
+++ b/layout/reftests/webcomponents/basic-shadow-2-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div>
+  <div style="border: 10px solid green">
+    <div style="border: 10px solid orange"></div>
+    <div style="border: 10px solid purple"></div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/webcomponents/basic-shadow-2.html b/layout/reftests/webcomponents/basic-shadow-2.html
new file mode 100644
index 0000000000..8e066997dc
--- /dev/null
+++ b/layout/reftests/webcomponents/basic-shadow-2.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <script>
+    function tweak() {
+      var shadowDiv = document.createElement("div");
+      shadowDiv.style.border = "10px solid green";
+
+      var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'});
+      shadowRoot.appendChild(shadowDiv);
+
+      var orangeDiv = document.createElement("div");
+      orangeDiv.style.border = "10px solid orange";
+
+      var purpleDiv = document.createElement("div");
+      purpleDiv.style.border = "10px solid purple";
+
+      shadowDiv.appendChild(purpleDiv);
+      shadowDiv.insertBefore(orangeDiv, purpleDiv);
+    }
+  </script>
+</head>
+<body onload="tweak()">
+<div id="outer">
+  <div style="background-color:red;"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/webcomponents/basic-shadow-3-ref.html b/layout/reftests/webcomponents/basic-shadow-3-ref.html
new file mode 100644
index 0000000000..21b2075b7f
--- /dev/null
+++ b/layout/reftests/webcomponents/basic-shadow-3-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div>
+  <div style="border: 10px solid green">
+    <div style="border: 10px solid orange"></div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/webcomponents/basic-shadow-3.html b/layout/reftests/webcomponents/basic-shadow-3.html
new file mode 100644
index 0000000000..3226c4baa6
--- /dev/null
+++ b/layout/reftests/webcomponents/basic-shadow-3.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <script>
+    function tweak() {
+      var shadowDiv = document.createElement("div");
+      shadowDiv.style.border = "10px solid green";
+
+      var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'});
+      shadowRoot.appendChild(shadowDiv);
+
+      var orangeDiv = document.createElement("div");
+      orangeDiv.style.border = "10px solid orange";
+
+      var purpleDiv = document.createElement("div");
+      purpleDiv.style.border = "10px solid purple";
+
+      shadowDiv.appendChild(purpleDiv);
+      shadowDiv.insertBefore(orangeDiv, purpleDiv);
+      shadowDiv.removeChild(purpleDiv);
+    }
+  </script>
+</head>
+<body onload="tweak()">
+<div id="outer">
+  <div style="background-color:red;"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/webcomponents/basic-shadow-4-ref.html b/layout/reftests/webcomponents/basic-shadow-4-ref.html
new file mode 100644
index 0000000000..e6dd408688
--- /dev/null
+++ b/layout/reftests/webcomponents/basic-shadow-4-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div>
+  <div style="border: 10px solid green"></div>
+  <div style="border: 10px solid orange"></div>
+  <div style="border: 10px solid purple"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/webcomponents/basic-shadow-4.html b/layout/reftests/webcomponents/basic-shadow-4.html
new file mode 100644
index 0000000000..39dc51a9e5
--- /dev/null
+++ b/layout/reftests/webcomponents/basic-shadow-4.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <script>
+    function tweak() {
+      var shadowDiv = document.createElement("div");
+      shadowDiv.style.border = "10px solid green";
+
+      var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'});
+      shadowRoot.appendChild(shadowDiv);
+
+      var orangeDiv = document.createElement("div");
+      orangeDiv.style.border = "10px solid orange";
+
+      var purpleDiv = document.createElement("div");
+      purpleDiv.style.border = "10px solid purple";
+
+      shadowRoot.appendChild(purpleDiv);
+      shadowRoot.insertBefore(orangeDiv, purpleDiv);
+    }
+  </script>
+</head>
+<body onload="tweak()">
+<div id="outer">
+  <div style="background-color:red;"></div>
+</div>
+</body>
+</html>
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 0000000000..4f74184983
--- /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 0000000000..b31f4c1c36
--- /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 0000000000..d4d1b8c066
--- /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 0000000000..3754ace20c
--- /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 0000000000..54be54848d
--- /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 0000000000..c00483fe2f
--- /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 0000000000..496a926514
--- /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/basic-slot-5-ref.html b/layout/reftests/webcomponents/basic-slot-5-ref.html
new file mode 100644
index 0000000000..16f6afb288
--- /dev/null
+++ b/layout/reftests/webcomponents/basic-slot-5-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div>
+  <div style="border: 10px solid green">Hello</div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/webcomponents/basic-slot-5.html b/layout/reftests/webcomponents/basic-slot-5.html
new file mode 100644
index 0000000000..ba1ea0c30b
--- /dev/null
+++ b/layout/reftests/webcomponents/basic-slot-5.html
@@ -0,0 +1,21 @@
+<!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 slot = document.createElement("slot");
+      shadowDiv.appendChild(slot);
+
+      var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'});
+      shadowRoot.appendChild(shadowDiv);
+    }
+  </script>
+</head>
+<body onload="tweak()">
+<div id="outer">Hello</div>
+</body>
+</html>
diff --git a/layout/reftests/webcomponents/basic-slot-6-ref.html b/layout/reftests/webcomponents/basic-slot-6-ref.html
new file mode 100644
index 0000000000..5e92137752
--- /dev/null
+++ b/layout/reftests/webcomponents/basic-slot-6-ref.html
@@ -0,0 +1,11 @@
+<!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-slot-6.html b/layout/reftests/webcomponents/basic-slot-6.html
new file mode 100644
index 0000000000..0990b66ab1
--- /dev/null
+++ b/layout/reftests/webcomponents/basic-slot-6.html
@@ -0,0 +1,25 @@
+<!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 slot = document.createElement("slot");
+      shadowDiv.appendChild(slot);
+
+      var shadowRoot =
+        document.getElementById('outer').attachShadow({mode: 'open'});
+      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/dynamic-insertion-point-distribution-1-ref.html b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-1-ref.html
new file mode 100644
index 0000000000..5cf030c4ce
--- /dev/null
+++ b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <div>a b c</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
new file mode 100644
index 0000000000..aefe84f252
--- /dev/null
+++ b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-1.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+  </head>
+  <body>
+    <div id="host"></div>
+    <script>
+      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");
+        span.innerHTML = "b";
+
+        // Span should be distributed to insertion point between 'a' and 'c'.
+        host.appendChild(span);
+
+        document.documentElement.removeAttribute("class");
+      }
+
+      window.addEventListener("MozReftestInvalidate", tweak);
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2-ref.html b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2-ref.html
new file mode 100644
index 0000000000..e5121d97e4
--- /dev/null
+++ b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <div>a</div>
+  </body>
+</html>
diff --git a/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2.html b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2.html
new file mode 100644
index 0000000000..d753af09cc
--- /dev/null
+++ b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+  </head>
+  <body>
+    <div id="host"></div>
+    <script>
+      var host, root;
+
+      host = document.getElementById("host");
+      root = host.attachShadow({mode: 'open'});
+      root.innerHTML = "<span>a</span>";
+
+      function tweak() {
+        var span = document.createElement("span");
+        span.innerHTML = "b";
+
+        // Span should not be visible because it is not distributed to any
+        // insertion points in the shadow DOM.
+        host.appendChild(span);
+
+        document.documentElement.removeAttribute("class");
+      }
+
+      window.addEventListener("MozReftestInvalidate", tweak);
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/webcomponents/fallback-content-1-ref.html b/layout/reftests/webcomponents/fallback-content-1-ref.html
new file mode 100644
index 0000000000..28bed659df
--- /dev/null
+++ b/layout/reftests/webcomponents/fallback-content-1-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div>
+  <div style="border: 10px solid green"><span style="background-color: orange">Hello</span> <span style="background-color: green">World</span></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/webcomponents/fallback-content-1.html b/layout/reftests/webcomponents/fallback-content-1.html
new file mode 100644
index 0000000000..0bcd2abbd3
--- /dev/null
+++ b/layout/reftests/webcomponents/fallback-content-1.html
@@ -0,0 +1,25 @@
+<!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";
+
+      // Insertion point will match nothing and use fallback content.
+      var slot = document.createElement("slot");
+      shadowDiv.appendChild(slot);
+
+      // Append three nodes as children to use as fallback content.
+      slot.innerHTML = '<span style="background-color: orange">Hello</span> <span style="background-color: green">World</span>';
+
+      var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'});
+      shadowRoot.appendChild(shadowDiv);
+    }
+  </script>
+</head>
+<body onload="tweak()">
+<div id="outer"></div>
+</body>
+</html>
diff --git a/layout/reftests/webcomponents/input-transition-1-ref.html b/layout/reftests/webcomponents/input-transition-1-ref.html
new file mode 100644
index 0000000000..8e42c974ef
--- /dev/null
+++ b/layout/reftests/webcomponents/input-transition-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="checkbox" checked><div style="height: 50px; width: 50px; background: green;"></div>
+  </body>
+</html>
diff --git a/layout/reftests/webcomponents/input-transition-1.html b/layout/reftests/webcomponents/input-transition-1.html
new file mode 100644
index 0000000000..c11444d05b
--- /dev/null
+++ b/layout/reftests/webcomponents/input-transition-1.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+  </head>
+  <body>
+    <div id="host"></div>
+    <script>
+      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() {
+          setTimeout(()=>{document.documentElement.removeAttribute("class")}, 1000); // wait for the checkbox SVG image to load on Android
+        });
+      }
+
+      window.addEventListener("MozReftestInvalidate", tweak);
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/webcomponents/nested-insertion-point-1-ref.html b/layout/reftests/webcomponents/nested-insertion-point-1-ref.html
new file mode 100644
index 0000000000..b2faa75cc6
--- /dev/null
+++ b/layout/reftests/webcomponents/nested-insertion-point-1-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div>
+  <div style="border: 10px solid green"><div style="border: 10px solid orange">Hello</div></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/webcomponents/nested-insertion-point-1.html b/layout/reftests/webcomponents/nested-insertion-point-1.html
new file mode 100644
index 0000000000..3d0d92f0dc
--- /dev/null
+++ b/layout/reftests/webcomponents/nested-insertion-point-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <script>
+    function tweak() {
+      // div with style "border: 10px solid green"
+      var outerShadow = document.createElement("div");
+      outerShadow.style.border = "10px solid green";
+
+      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 slot = document.createElement("slot");
+      innerShadow.appendChild(slot);
+
+      outerShadow.attachShadow({mode: 'open'}).appendChild(innerShadow);
+
+      var shadowRoot =
+        document.getElementById('outer').attachShadow({mode: 'open'});
+      shadowRoot.appendChild(outerShadow);
+    }
+  </script>
+</head>
+<body onload="tweak()">
+<div id="outer">Hello</div>
+</body>
+</html>
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 0000000000..d953beb6d7
--- /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 0000000000..0ebbe7433d
--- /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/reframe-shadow-child-ref.html b/layout/reftests/webcomponents/reframe-shadow-child-ref.html
new file mode 100644
index 0000000000..b768be1659
--- /dev/null
+++ b/layout/reftests/webcomponents/reframe-shadow-child-ref.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<div style="display: table">
+  Some text
+  More text
+</div>
diff --git a/layout/reftests/webcomponents/reftest.list b/layout/reftests/webcomponents/reftest.list
new file mode 100644
index 0000000000..fa25e54c0b
--- /dev/null
+++ b/layout/reftests/webcomponents/reftest.list
@@ -0,0 +1,25 @@
+== basic-shadow-1.html basic-shadow-1-ref.html
+== basic-shadow-2.html basic-shadow-2-ref.html
+== basic-shadow-3.html basic-shadow-3-ref.html
+== basic-shadow-4.html basic-shadow-4-ref.html
+== fallback-content-1.html fallback-content-1-ref.html
+== remove-insertion-point-1.html remove-insertion-point-1-ref.html
+== nested-insertion-point-1.html nested-insertion-point-1-ref.html
+== update-dist-node-descendants-1.html update-dist-node-descendants-1-ref.html
+fuzzy-if(Android,0-2,0-7) == input-transition-1.html input-transition-1-ref.html
+== dynamic-insertion-point-distribution-1.html dynamic-insertion-point-distribution-1-ref.html
+== dynamic-insertion-point-distribution-2.html dynamic-insertion-point-distribution-2-ref.html
+== remove-append-shadow-host-1.html remove-append-shadow-host-1-ref.html
+== reframe-shadow-child-1.html reframe-shadow-child-ref.html
+== reframe-shadow-child-2.html reframe-shadow-child-ref.html
+== style-sharing.html style-sharing-ref.html
+== style-sharing-across-shadow.html style-sharing-ref.html # bug 1412400
+== basic-slot-1.html basic-slot-1-ref.html
+== basic-slot-2.html basic-slot-2-ref.html
+== basic-slot-3.html basic-slot-3-ref.html
+== basic-slot-4.html basic-slot-3-ref.html
+== basic-slot-5.html basic-slot-5-ref.html
+== basic-slot-6.html basic-slot-6-ref.html
+== shadow-style-1.html shadow-style-1-ref.html
+== shadow-style-2.html shadow-style-2-ref.html
+== shadow-style-3.html shadow-style-3-ref.html
diff --git a/layout/reftests/webcomponents/remove-append-shadow-host-1-ref.html b/layout/reftests/webcomponents/remove-append-shadow-host-1-ref.html
new file mode 100644
index 0000000000..88e10614a3
--- /dev/null
+++ b/layout/reftests/webcomponents/remove-append-shadow-host-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <div>inside shadow DOM</div>
+  </body>
+</html>
diff --git a/layout/reftests/webcomponents/remove-append-shadow-host-1.html b/layout/reftests/webcomponents/remove-append-shadow-host-1.html
new file mode 100644
index 0000000000..1a752eba6c
--- /dev/null
+++ b/layout/reftests/webcomponents/remove-append-shadow-host-1.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+  </head>
+  <body>
+    <div id="container"><div id="host"></div></div>
+    <script>
+      var host = document.getElementById("host");
+      var root = host.attachShadow({mode: 'open'});
+      root.innerHTML = 'inside shadow DOM';
+
+      var container = document.getElementById("container");
+      container.removeChild(host);
+      container.appendChild(host);
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/webcomponents/remove-insertion-point-1-ref.html b/layout/reftests/webcomponents/remove-insertion-point-1-ref.html
new file mode 100644
index 0000000000..3ecceb3034
--- /dev/null
+++ b/layout/reftests/webcomponents/remove-insertion-point-1-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div>
+  <div style="border: 10px solid green"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/webcomponents/remove-insertion-point-1.html b/layout/reftests/webcomponents/remove-insertion-point-1.html
new file mode 100644
index 0000000000..1b7588daf6
--- /dev/null
+++ b/layout/reftests/webcomponents/remove-insertion-point-1.html
@@ -0,0 +1,26 @@
+<!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";
+
+      // Insertion point will match nothing and use fallback content.
+      var slot = document.createElement("slot");
+      shadowDiv.appendChild(slot);
+
+      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(slot);
+    }
+  </script>
+</head>
+<body onload="tweak()">
+<div id="outer">Hello</div>
+</body>
+</html>
diff --git a/layout/reftests/webcomponents/shadow-style-1-ref.html b/layout/reftests/webcomponents/shadow-style-1-ref.html
new file mode 100644
index 0000000000..1e914ad20c
--- /dev/null
+++ b/layout/reftests/webcomponents/shadow-style-1-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<p style="color: green">This should be green.</p>
diff --git a/layout/reftests/webcomponents/shadow-style-1.html b/layout/reftests/webcomponents/shadow-style-1.html
new file mode 100644
index 0000000000..cdc00eee4a
--- /dev/null
+++ b/layout/reftests/webcomponents/shadow-style-1.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<body>
+<style>
+body { color: red; }
+</style>
+<script>
+var div = document.createElement("div");
+var shadow = div.attachShadow({ mode: "open" });
+shadow.innerHTML = '<style>p { color: green; }</style><p>This should be green.</p>';
+document.body.appendChild(div);
+</script>
diff --git a/layout/reftests/webcomponents/shadow-style-2-ref.html b/layout/reftests/webcomponents/shadow-style-2-ref.html
new file mode 100644
index 0000000000..1e914ad20c
--- /dev/null
+++ b/layout/reftests/webcomponents/shadow-style-2-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<p style="color: green">This should be green.</p>
diff --git a/layout/reftests/webcomponents/shadow-style-2.html b/layout/reftests/webcomponents/shadow-style-2.html
new file mode 100644
index 0000000000..892a09489d
--- /dev/null
+++ b/layout/reftests/webcomponents/shadow-style-2.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<body>
+<style>
+body { color: red; }
+</style>
+<script>
+var div = document.createElement("div");
+var shadow = div.attachShadow({ mode: "open" });
+shadow.innerHTML = '<p>This should be green.</p>';
+document.body.appendChild(div);
+shadow.firstChild.offsetTop;
+var style = document.createElement("style");
+style.textContent = 'p { color: green; }';
+shadow.appendChild(style);
+</script>
diff --git a/layout/reftests/webcomponents/shadow-style-3-ref.html b/layout/reftests/webcomponents/shadow-style-3-ref.html
new file mode 100644
index 0000000000..1e914ad20c
--- /dev/null
+++ b/layout/reftests/webcomponents/shadow-style-3-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<p style="color: green">This should be green.</p>
diff --git a/layout/reftests/webcomponents/shadow-style-3.html b/layout/reftests/webcomponents/shadow-style-3.html
new file mode 100644
index 0000000000..ea2c7e7eda
--- /dev/null
+++ b/layout/reftests/webcomponents/shadow-style-3.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<body>
+<style>
+body { color: red; }
+</style>
+<script>
+var div = document.createElement("div");
+var shadow = div.attachShadow({ mode: "open" });
+var div2 = document.createElement("div");
+var shadow2 = div2.attachShadow({ mode: "open" });
+shadow2.innerHTML = '<style>p { color: green; }</style><p>This should be green.</p>';
+shadow.appendChild(div2);
+document.body.appendChild(div);
+</script>
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 0000000000..b41cf74796
--- /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-ref.html b/layout/reftests/webcomponents/style-sharing-ref.html
new file mode 100644
index 0000000000..64bedb96e5
--- /dev/null
+++ b/layout/reftests/webcomponents/style-sharing-ref.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<div>
+  <span style="color: green">Should be green</span>
+  <span>Should not be green</span>
+</div>
diff --git a/layout/reftests/webcomponents/style-sharing.html b/layout/reftests/webcomponents/style-sharing.html
new file mode 100644
index 0000000000..0a1e3c95c4
--- /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-ref.html b/layout/reftests/webcomponents/update-dist-node-descendants-1-ref.html
new file mode 100644
index 0000000000..41fe64ff35
--- /dev/null
+++ b/layout/reftests/webcomponents/update-dist-node-descendants-1-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div>
+  <div><div><span>Hello World</span></div></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/webcomponents/update-dist-node-descendants-1.html b/layout/reftests/webcomponents/update-dist-node-descendants-1.html
new file mode 100644
index 0000000000..003c233944
--- /dev/null
+++ b/layout/reftests/webcomponents/update-dist-node-descendants-1.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<head>
+</head>
+<body>
+<div id="outer"><span id="distnode">text</span></div>
+<script>
+
+  var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'});
+  shadowRoot.innerHTML = '<div><slot></slot></div>';
+
+  function tweak() {
+    var distNode = document.getElementById("distnode");
+    distNode.textContent = "Hello World";
+
+    document.documentElement.removeAttribute("class");
+	}
+
+  window.addEventListener("MozReftestInvalidate", tweak);
+</script>
+</body>
+</html>
-- 
cgit v1.2.3