summaryrefslogtreecommitdiffstats
path: root/layout/reftests/webcomponents
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/webcomponents')
-rw-r--r--layout/reftests/webcomponents/basic-shadow-1-ref.html8
-rw-r--r--layout/reftests/webcomponents/basic-shadow-1.html22
-rw-r--r--layout/reftests/webcomponents/basic-shadow-2-ref.html11
-rw-r--r--layout/reftests/webcomponents/basic-shadow-2.html28
-rw-r--r--layout/reftests/webcomponents/basic-shadow-3-ref.html10
-rw-r--r--layout/reftests/webcomponents/basic-shadow-3.html29
-rw-r--r--layout/reftests/webcomponents/basic-shadow-4-ref.html10
-rw-r--r--layout/reftests/webcomponents/basic-shadow-4.html28
-rw-r--r--layout/reftests/webcomponents/basic-slot-1-ref.html11
-rw-r--r--layout/reftests/webcomponents/basic-slot-1.html6
-rw-r--r--layout/reftests/webcomponents/basic-slot-2-ref.html16
-rw-r--r--layout/reftests/webcomponents/basic-slot-2.html7
-rw-r--r--layout/reftests/webcomponents/basic-slot-3-ref.html8
-rw-r--r--layout/reftests/webcomponents/basic-slot-3.html18
-rw-r--r--layout/reftests/webcomponents/basic-slot-4.html20
-rw-r--r--layout/reftests/webcomponents/basic-slot-5-ref.html8
-rw-r--r--layout/reftests/webcomponents/basic-slot-5.html21
-rw-r--r--layout/reftests/webcomponents/basic-slot-6-ref.html11
-rw-r--r--layout/reftests/webcomponents/basic-slot-6.html25
-rw-r--r--layout/reftests/webcomponents/dynamic-insertion-point-distribution-1-ref.html6
-rw-r--r--layout/reftests/webcomponents/dynamic-insertion-point-distribution-1.html27
-rw-r--r--layout/reftests/webcomponents/dynamic-insertion-point-distribution-2-ref.html6
-rw-r--r--layout/reftests/webcomponents/dynamic-insertion-point-distribution-2.html28
-rw-r--r--layout/reftests/webcomponents/fallback-content-1-ref.html8
-rw-r--r--layout/reftests/webcomponents/fallback-content-1.html25
-rw-r--r--layout/reftests/webcomponents/input-transition-1-ref.html6
-rw-r--r--layout/reftests/webcomponents/input-transition-1.html25
-rw-r--r--layout/reftests/webcomponents/nested-insertion-point-1-ref.html8
-rw-r--r--layout/reftests/webcomponents/nested-insertion-point-1.html31
-rw-r--r--layout/reftests/webcomponents/reframe-shadow-child-1.html16
-rw-r--r--layout/reftests/webcomponents/reframe-shadow-child-2.html15
-rw-r--r--layout/reftests/webcomponents/reframe-shadow-child-ref.html5
-rw-r--r--layout/reftests/webcomponents/reftest.list25
-rw-r--r--layout/reftests/webcomponents/remove-append-shadow-host-1-ref.html6
-rw-r--r--layout/reftests/webcomponents/remove-append-shadow-host-1.html17
-rw-r--r--layout/reftests/webcomponents/remove-insertion-point-1-ref.html8
-rw-r--r--layout/reftests/webcomponents/remove-insertion-point-1.html26
-rw-r--r--layout/reftests/webcomponents/shadow-style-1-ref.html2
-rw-r--r--layout/reftests/webcomponents/shadow-style-1.html11
-rw-r--r--layout/reftests/webcomponents/shadow-style-2-ref.html2
-rw-r--r--layout/reftests/webcomponents/shadow-style-2.html15
-rw-r--r--layout/reftests/webcomponents/shadow-style-3-ref.html2
-rw-r--r--layout/reftests/webcomponents/shadow-style-3.html14
-rw-r--r--layout/reftests/webcomponents/style-sharing-across-shadow.html22
-rw-r--r--layout/reftests/webcomponents/style-sharing-ref.html5
-rw-r--r--layout/reftests/webcomponents/style-sharing.html14
-rw-r--r--layout/reftests/webcomponents/update-dist-node-descendants-1-ref.html8
-rw-r--r--layout/reftests/webcomponents/update-dist-node-descendants-1.html22
48 files changed, 702 insertions, 0 deletions
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>