summaryrefslogtreecommitdiffstats
path: root/layout/reftests/webcomponents
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/webcomponents')
-rw-r--r--layout/reftests/webcomponents/adjacent-insertion-points-1-ref.html6
-rw-r--r--layout/reftests/webcomponents/adjacent-insertion-points-1.html17
-rw-r--r--layout/reftests/webcomponents/adjacent-insertion-points-2-ref.html6
-rw-r--r--layout/reftests/webcomponents/adjacent-insertion-points-2.html17
-rw-r--r--layout/reftests/webcomponents/basic-insertion-point-1-ref.html8
-rw-r--r--layout/reftests/webcomponents/basic-insertion-point-1.html21
-rw-r--r--layout/reftests/webcomponents/basic-insertion-point-2-ref.html11
-rw-r--r--layout/reftests/webcomponents/basic-insertion-point-2.html24
-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-shadow-element-1-ref.html10
-rw-r--r--layout/reftests/webcomponents/basic-shadow-element-1.html19
-rw-r--r--layout/reftests/webcomponents/cross-tree-selection-1-ref.html8
-rw-r--r--layout/reftests/webcomponents/cross-tree-selection-1.html32
-rw-r--r--layout/reftests/webcomponents/dynamic-insertion-point-distribution-1-ref.html6
-rw-r--r--layout/reftests/webcomponents/dynamic-insertion-point-distribution-1.html25
-rw-r--r--layout/reftests/webcomponents/dynamic-insertion-point-distribution-2-ref.html6
-rw-r--r--layout/reftests/webcomponents/dynamic-insertion-point-distribution-2.html26
-rw-r--r--layout/reftests/webcomponents/dynamic-shadow-element-1-ref.html10
-rw-r--r--layout/reftests/webcomponents/dynamic-shadow-element-1.html23
-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.html23
-rw-r--r--layout/reftests/webcomponents/nested-insertion-point-1-ref.html8
-rw-r--r--layout/reftests/webcomponents/nested-insertion-point-1.html30
-rw-r--r--layout/reftests/webcomponents/nested-shadow-element-1-ref.html10
-rw-r--r--layout/reftests/webcomponents/nested-shadow-element-1.html29
-rw-r--r--layout/reftests/webcomponents/reftest-stylo.list22
-rw-r--r--layout/reftests/webcomponents/reftest.list19
-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/update-dist-node-descendants-1-ref.html8
-rw-r--r--layout/reftests/webcomponents/update-dist-node-descendants-1.html21
42 files changed, 687 insertions, 0 deletions
diff --git a/layout/reftests/webcomponents/adjacent-insertion-points-1-ref.html b/layout/reftests/webcomponents/adjacent-insertion-points-1-ref.html
new file mode 100644
index 000000000..2c1f4e341
--- /dev/null
+++ b/layout/reftests/webcomponents/adjacent-insertion-points-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div><span>Hello</span><span>World</span></div>
+</body>
+</html>
diff --git a/layout/reftests/webcomponents/adjacent-insertion-points-1.html b/layout/reftests/webcomponents/adjacent-insertion-points-1.html
new file mode 100644
index 000000000..a8c6f983d
--- /dev/null
+++ b/layout/reftests/webcomponents/adjacent-insertion-points-1.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <script>
+ function tweak() {
+ var oldShadowRoot = document.getElementById('outer').createShadowRoot();
+ oldShadowRoot.innerHTML = 'World';
+
+ var youngShadowRoot = document.getElementById('outer').createShadowRoot();
+ youngShadowRoot.innerHTML = 'Hello<content></content><shadow></shadow>';
+ }
+ </script>
+</head>
+<body onload="tweak()">
+<div id="outer"></div>
+</body>
+</html>
diff --git a/layout/reftests/webcomponents/adjacent-insertion-points-2-ref.html b/layout/reftests/webcomponents/adjacent-insertion-points-2-ref.html
new file mode 100644
index 000000000..2c1f4e341
--- /dev/null
+++ b/layout/reftests/webcomponents/adjacent-insertion-points-2-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div><span>Hello</span><span>World</span></div>
+</body>
+</html>
diff --git a/layout/reftests/webcomponents/adjacent-insertion-points-2.html b/layout/reftests/webcomponents/adjacent-insertion-points-2.html
new file mode 100644
index 000000000..f90cb206b
--- /dev/null
+++ b/layout/reftests/webcomponents/adjacent-insertion-points-2.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <script>
+ function tweak() {
+ var oldShadowRoot = document.getElementById('outer').createShadowRoot();
+ oldShadowRoot.innerHTML = 'Hello';
+
+ var youngShadowRoot = document.getElementById('outer').createShadowRoot();
+ youngShadowRoot.innerHTML = '<shadow></shadow><content></content>World';
+ }
+ </script>
+</head>
+<body onload="tweak()">
+<div id="outer"></div>
+</body>
+</html>
diff --git a/layout/reftests/webcomponents/basic-insertion-point-1-ref.html b/layout/reftests/webcomponents/basic-insertion-point-1-ref.html
new file mode 100644
index 000000000..16f6afb28
--- /dev/null
+++ b/layout/reftests/webcomponents/basic-insertion-point-1-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-insertion-point-1.html b/layout/reftests/webcomponents/basic-insertion-point-1.html
new file mode 100644
index 000000000..727175ef3
--- /dev/null
+++ b/layout/reftests/webcomponents/basic-insertion-point-1.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 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
new file mode 100644
index 000000000..5e9213775
--- /dev/null
+++ b/layout/reftests/webcomponents/basic-insertion-point-2-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-insertion-point-2.html b/layout/reftests/webcomponents/basic-insertion-point-2.html
new file mode 100644
index 000000000..595edb471
--- /dev/null
+++ b/layout/reftests/webcomponents/basic-insertion-point-2.html
@@ -0,0 +1,24 @@
+<!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-ref.html b/layout/reftests/webcomponents/basic-shadow-1-ref.html
new file mode 100644
index 000000000..0d498d8c5
--- /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 000000000..944a594d2
--- /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').createShadowRoot();
+ 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 000000000..74c50f516
--- /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 000000000..587c47221
--- /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').createShadowRoot();
+ 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 000000000..21b2075b7
--- /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 000000000..2ae53b5a9
--- /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').createShadowRoot();
+ 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 000000000..e6dd40868
--- /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 000000000..70f91773e
--- /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').createShadowRoot();
+ 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-shadow-element-1-ref.html b/layout/reftests/webcomponents/basic-shadow-element-1-ref.html
new file mode 100644
index 000000000..a47b9362a
--- /dev/null
+++ b/layout/reftests/webcomponents/basic-shadow-element-1-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+</head>
+<body>
+<div>
+ <div style="width:100px; height:100px; background-color:green"></div><div style="width:100px; height:100px; background-color:orange">Hello World</div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/webcomponents/basic-shadow-element-1.html b/layout/reftests/webcomponents/basic-shadow-element-1.html
new file mode 100644
index 000000000..e51bd8b72
--- /dev/null
+++ b/layout/reftests/webcomponents/basic-shadow-element-1.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <script>
+ function tweak() {
+ var olderShadow = document.getElementById('outer').createShadowRoot();
+ olderShadow.innerHTML = '<div style="width:100px; height:100px; background-color: orange"><content></content></div>';
+
+ var youngerShadow = document.getElementById('outer').createShadowRoot();
+ youngerShadow.innerHTML = '<div style="width:100px; height:100px; background-color: green"></div><shadow>Hello World</shadow>';
+ }
+ </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/cross-tree-selection-1-ref.html b/layout/reftests/webcomponents/cross-tree-selection-1-ref.html
new file mode 100644
index 000000000..e2a62f534
--- /dev/null
+++ b/layout/reftests/webcomponents/cross-tree-selection-1-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div>
+Hello World
+</div>
+</body>
+</html>
diff --git a/layout/reftests/webcomponents/cross-tree-selection-1.html b/layout/reftests/webcomponents/cross-tree-selection-1.html
new file mode 100644
index 000000000..1e4f02747
--- /dev/null
+++ b/layout/reftests/webcomponents/cross-tree-selection-1.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<head>
+ <script>
+ function tweak() {
+ var host = document.getElementById("host");
+ var shadow = host.createShadowRoot();
+
+ var textNode = document.createTextNode(" World");
+ shadow.appendChild(textNode);
+
+ // Create a selection with focus preceeding anchor
+ var selection = window.getSelection();
+ var range = document.createRange();
+ range.setStart(shadow, 1);
+ range.setEnd(shadow, 1);
+ selection.addRange(range);
+ selection.extend(shadow, 0);
+
+ // Extend selection into a different node tree
+ // (from ShadowRoot into the previous node in the parent node tree).
+ setTimeout(function() {
+ selection.extend(document.getElementById("previous"), 0);
+ document.documentElement.className = '';
+ }, 100);
+ }
+ </script>
+</head>
+<body onload="tweak()">
+<span id="previous">Hello</span><span id="host"></span>
+</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 000000000..5cf030c4c
--- /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 000000000..c57f72b37
--- /dev/null
+++ b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-1.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ </head>
+ <body>
+ <div id="host"></div>
+ <script>
+ var host = document.getElementById("host");
+ var root = host.createShadowRoot();
+ root.innerHTML = 'a <content></content> 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, false);
+ </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 000000000..e5121d97e
--- /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 000000000..29a850e90
--- /dev/null
+++ b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ </head>
+ <body>
+ <div id="host"></div>
+ <script>
+ var host = document.getElementById("host");
+ var root = host.createShadowRoot();
+ 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, false);
+ </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
new file mode 100644
index 000000000..a3b5150f6
--- /dev/null
+++ b/layout/reftests/webcomponents/dynamic-shadow-element-1-ref.html
@@ -0,0 +1,10 @@
+<!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
new file mode 100644
index 000000000..0142164a1
--- /dev/null
+++ b/layout/reftests/webcomponents/dynamic-shadow-element-1.html
@@ -0,0 +1,23 @@
+<!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-ref.html b/layout/reftests/webcomponents/fallback-content-1-ref.html
new file mode 100644
index 000000000..28bed659d
--- /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 000000000..ac3b5d02a
--- /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 insertionPoint = document.createElement("content");
+ shadowDiv.appendChild(insertionPoint);
+
+ // 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>';
+
+ var shadowRoot = document.getElementById('outer').createShadowRoot();
+ 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 000000000..8e42c974e
--- /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 000000000..ede0fa40b
--- /dev/null
+++ b/layout/reftests/webcomponents/input-transition-1.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ </head>
+ <body>
+ <div id="host"></div>
+ <script>
+ var host = document.getElementById("host");
+ var root = host.createShadowRoot();
+ 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);
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </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 000000000..b2faa75cc
--- /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 000000000..66892029a
--- /dev/null
+++ b/layout/reftests/webcomponents/nested-insertion-point-1.html
@@ -0,0 +1,30 @@
+<!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("content");
+ 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);
+
+ outerShadow.createShadowRoot().appendChild(innerShadow);
+
+ var shadowRoot = document.getElementById('outer').createShadowRoot();
+ shadowRoot.appendChild(outerShadow);
+ }
+ </script>
+</head>
+<body onload="tweak()">
+<div id="outer">Hello</div>
+</body>
+</html>
diff --git a/layout/reftests/webcomponents/nested-shadow-element-1-ref.html b/layout/reftests/webcomponents/nested-shadow-element-1-ref.html
new file mode 100644
index 000000000..a3b5150f6
--- /dev/null
+++ b/layout/reftests/webcomponents/nested-shadow-element-1-ref.html
@@ -0,0 +1,10 @@
+<!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/nested-shadow-element-1.html b/layout/reftests/webcomponents/nested-shadow-element-1.html
new file mode 100644
index 000000000..cfaad3d49
--- /dev/null
+++ b/layout/reftests/webcomponents/nested-shadow-element-1.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <script>
+ function tweak() {
+ var olderShadow = document.getElementById('outer').createShadowRoot();
+ olderShadow.innerHTML = '<content></content><span>World</span>';
+
+ var youngerShadow = document.getElementById('outer').createShadowRoot();
+ youngerShadow.innerHTML = '<div id="shadowparent"><shadow id="youngshadow"><span>Hello</span></shadow></div>';
+
+ var shadowParent = youngerShadow.getElementById("shadowparent");
+ var nestedShadow = shadowParent.createShadowRoot();
+ nestedShadow.innerHTML = '<div style="background-color: green"><content></content></div>';
+
+ // Dynamically append a span to the shadow element in the younger ShadowRoot to make sure
+ // it is projected into the nested shadow.
+ var appendedSpan = document.createElement("span");
+ appendedSpan.textContent = ' ';
+ youngerShadow.getElementById("youngshadow").appendChild(appendedSpan);
+ }
+ </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/reftest-stylo.list b/layout/reftests/webcomponents/reftest-stylo.list
new file mode 100644
index 000000000..8271f1a5a
--- /dev/null
+++ b/layout/reftests/webcomponents/reftest-stylo.list
@@ -0,0 +1,22 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+pref(dom.webcomponents.enabled,true) == cross-tree-selection-1.html cross-tree-selection-1.html
+pref(dom.webcomponents.enabled,true) == basic-shadow-1.html basic-shadow-1.html
+pref(dom.webcomponents.enabled,true) == basic-shadow-2.html basic-shadow-2.html
+pref(dom.webcomponents.enabled,true) == basic-shadow-3.html basic-shadow-3.html
+pref(dom.webcomponents.enabled,true) == basic-shadow-4.html basic-shadow-4.html
+pref(dom.webcomponents.enabled,true) == basic-insertion-point-1.html basic-insertion-point-1.html
+pref(dom.webcomponents.enabled,true) == basic-insertion-point-2.html basic-insertion-point-2.html
+pref(dom.webcomponents.enabled,true) == adjacent-insertion-points-1.html adjacent-insertion-points-1.html
+pref(dom.webcomponents.enabled,true) == adjacent-insertion-points-2.html adjacent-insertion-points-2.html
+pref(dom.webcomponents.enabled,true) == fallback-content-1.html fallback-content-1.html
+pref(dom.webcomponents.enabled,true) == remove-insertion-point-1.html remove-insertion-point-1.html
+pref(dom.webcomponents.enabled,true) == nested-insertion-point-1.html nested-insertion-point-1.html
+pref(dom.webcomponents.enabled,true) == basic-shadow-element-1.html basic-shadow-element-1.html
+pref(dom.webcomponents.enabled,true) == nested-shadow-element-1.html nested-shadow-element-1.html
+pref(dom.webcomponents.enabled,true) == update-dist-node-descendants-1.html update-dist-node-descendants-1.html
+skip pref(dom.webcomponents.enabled,true) random-if((B2G&&browserIsRemote)||Mulet) == input-transition-1.html input-transition-1.html
+# Failure on B2G emulator due to Bug 1018381
+# Initial mulet triage: parity with B2G/B2G Desktop
+pref(dom.webcomponents.enabled,true) == dynamic-insertion-point-distribution-1.html dynamic-insertion-point-distribution-1.html
+skip pref(dom.webcomponents.enabled,true) == dynamic-insertion-point-distribution-2.html dynamic-insertion-point-distribution-2.html
+skip pref(dom.webcomponents.enabled,true) == remove-append-shadow-host-1.html remove-append-shadow-host-1.html
diff --git a/layout/reftests/webcomponents/reftest.list b/layout/reftests/webcomponents/reftest.list
new file mode 100644
index 000000000..beba21b18
--- /dev/null
+++ b/layout/reftests/webcomponents/reftest.list
@@ -0,0 +1,19 @@
+pref(dom.webcomponents.enabled,true) == cross-tree-selection-1.html cross-tree-selection-1-ref.html
+pref(dom.webcomponents.enabled,true) == basic-shadow-1.html basic-shadow-1-ref.html
+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
+pref(dom.webcomponents.enabled,true) == basic-insertion-point-1.html basic-insertion-point-1-ref.html
+pref(dom.webcomponents.enabled,true) == basic-insertion-point-2.html basic-insertion-point-2-ref.html
+pref(dom.webcomponents.enabled,true) == adjacent-insertion-points-1.html adjacent-insertion-points-1-ref.html
+pref(dom.webcomponents.enabled,true) == adjacent-insertion-points-2.html adjacent-insertion-points-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
+pref(dom.webcomponents.enabled,true) == nested-insertion-point-1.html nested-insertion-point-1-ref.html
+pref(dom.webcomponents.enabled,true) == basic-shadow-element-1.html basic-shadow-element-1-ref.html
+pref(dom.webcomponents.enabled,true) == nested-shadow-element-1.html nested-shadow-element-1-ref.html
+pref(dom.webcomponents.enabled,true) == update-dist-node-descendants-1.html update-dist-node-descendants-1-ref.html
+pref(dom.webcomponents.enabled,true) == input-transition-1.html input-transition-1-ref.html
+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
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 000000000..88e10614a
--- /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 000000000..85161565e
--- /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.createShadowRoot();
+ 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 000000000..3ecceb303
--- /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 000000000..195673ca8
--- /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 insertionPoint = document.createElement("content");
+ shadowDiv.appendChild(insertionPoint);
+
+ var shadowRoot = document.getElementById('outer').createShadowRoot();
+ shadowRoot.appendChild(shadowDiv);
+
+ // Remove the insertion point from the ShadowRoot, "Hello" should no
+ // longer be rendered.
+ shadowDiv.removeChild(insertionPoint);
+ }
+ </script>
+</head>
+<body onload="tweak()">
+<div id="outer">Hello</div>
+</body>
+</html>
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 000000000..41fe64ff3
--- /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 000000000..e2dd4ebb7
--- /dev/null
+++ b/layout/reftests/webcomponents/update-dist-node-descendants-1.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<head>
+</head>
+<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";
+
+ document.documentElement.removeAttribute("class");
+}
+
+window.addEventListener("MozReftestInvalidate", tweak);
+</script>
+</body>
+</html>