summaryrefslogtreecommitdiff
path: root/layout/reftests
diff options
context:
space:
mode:
authorMoonchild <moonchild@palemoon.org>2020-04-17 16:02:56 +0200
committerGitHub <noreply@github.com>2020-04-17 16:02:56 +0200
commitd5102d6beafc2a2a0cec3cc3ee5f7ebde31ae7bf (patch)
tree2bfef192cbb748b675ce8308c242a376798e265d /layout/reftests
parent5caf99795aa81e1fc145b8e937b1ee8197ed2486 (diff)
parentf35aa3e15fedf3cd4ad163d60ab74a9537ca5c82 (diff)
downloaduxp-d5102d6beafc2a2a0cec3cc3ee5f7ebde31ae7bf.tar.gz
Merge pull request #1518 from MoonchildProductions/shadowdom-merge
Incremental shadowdom-merge
Diffstat (limited to 'layout/reftests')
-rw-r--r--layout/reftests/bugs/1066554-1.html20
-rw-r--r--layout/reftests/bugs/reftest.list2
-rw-r--r--layout/reftests/css-display/display-contents-shadow-dom-1-ref.html2
-rw-r--r--layout/reftests/css-display/display-contents-shadow-dom-1.html77
-rw-r--r--layout/reftests/css-grid/reftest.list4
-rw-r--r--layout/reftests/details-summary/reftest.list4
-rw-r--r--layout/reftests/forms/input/number/number-style-inheritance-ref.html6
-rw-r--r--layout/reftests/forms/input/number/number-style-inheritance.html6
-rw-r--r--layout/reftests/forms/input/number/reftest.list3
-rw-r--r--layout/reftests/forms/legend/reftest.list2
-rw-r--r--layout/reftests/forms/legend/shadow-dom.html29
-rw-r--r--layout/reftests/mathml/shadow-dom-1.html8
-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.html2
-rw-r--r--layout/reftests/webcomponents/basic-shadow-2.html2
-rw-r--r--layout/reftests/webcomponents/basic-shadow-3.html2
-rw-r--r--layout/reftests/webcomponents/basic-shadow-4.html2
-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/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/cross-tree-selection-1.html5
-rw-r--r--layout/reftests/webcomponents/dynamic-insertion-point-distribution-1.html17
-rw-r--r--layout/reftests/webcomponents/dynamic-insertion-point-distribution-2.html17
-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.html8
-rw-r--r--layout/reftests/webcomponents/input-transition-1.html27
-rw-r--r--layout/reftests/webcomponents/nested-insertion-point-1.html11
-rw-r--r--layout/reftests/webcomponents/nested-shadow-element-1.html29
-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/reftest.list18
-rw-r--r--layout/reftests/webcomponents/remove-append-shadow-host-1.html2
-rw-r--r--layout/reftests/webcomponents/remove-insertion-point-1.html8
-rw-r--r--layout/reftests/webcomponents/style-sharing-across-shadow.html22
-rw-r--r--layout/reftests/webcomponents/style-sharing.html14
-rw-r--r--layout/reftests/webcomponents/update-dist-node-descendants-1.html24
50 files changed, 343 insertions, 319 deletions
diff --git a/layout/reftests/bugs/1066554-1.html b/layout/reftests/bugs/1066554-1.html
index bb0a97f964..f4df207a1b 100644
--- a/layout/reftests/bugs/1066554-1.html
+++ b/layout/reftests/bugs/1066554-1.html
@@ -7,15 +7,17 @@
<script>
function insertShadowSVG() {
var x = document.getElementById("x");
- x.createShadowRoot();
- x.shadowRoot.innerHTML =
- '<svg width="50px" height="10px"> \
- <switch> \
- <foreignObject width="50px" height="50px"> \
- <div style="width: 100px; height: 10px; background: red;"></div> \
- </foreignObject> \
- </switch> \
- </svg>';
+ if (x.createShadowRoot) {
+ x.createShadowRoot();
+ x.shadowRoot.innerHTML =
+ '<svg width="50px" height="10px"> \
+ <switch> \
+ <foreignObject width="50px" height="50px"> \
+ <div style="width: 100px; height: 10px; background: red;"></div> \
+ </foreignObject> \
+ </switch> \
+ </svg>';
+ }
document.documentElement.removeAttribute("class");
}
window.addEventListener("MozReftestInvalidate", insertShadowSVG, false);
diff --git a/layout/reftests/bugs/reftest.list b/layout/reftests/bugs/reftest.list
index d6f58a9c23..84d7f188f8 100644
--- a/layout/reftests/bugs/reftest.list
+++ b/layout/reftests/bugs/reftest.list
@@ -1851,7 +1851,7 @@ test-pref(layout.css.grid.enabled,true) == 1053035-1-grid.html 1053035-1-ref.htm
== 1062108-1.html 1062108-1-ref.html
== 1062792-1.html 1062792-1-ref.html
== 1062963-floatmanager-reflow.html 1062963-floatmanager-reflow-ref.html
-test-pref(dom.webcomponents.enabled,true) == 1066554-1.html 1066554-1-ref.html
+test-pref(dom.webcomponents.enabled,true) fails-if(stylo||styloVsGecko) == 1066554-1.html 1066554-1-ref.html
== 1069716-1.html 1069716-1-ref.html
== 1078262-1.html about:blank
test-pref(layout.testing.overlay-scrollbars.always-visible,false) == 1081072-1.html 1081072-1-ref.html
diff --git a/layout/reftests/css-display/display-contents-shadow-dom-1-ref.html b/layout/reftests/css-display/display-contents-shadow-dom-1-ref.html
index f57822901d..6e6dad2331 100644
--- a/layout/reftests/css-display/display-contents-shadow-dom-1-ref.html
+++ b/layout/reftests/css-display/display-contents-shadow-dom-1-ref.html
@@ -45,8 +45,6 @@ span { color:blue; }
<span style="color:green">R</span>
<div></div>
<b style="color:green">V</b>
- <b style="color:green">W</b>
- <b style="color:green">X</b>
<!-- <b style="color:green">Y</b> -->
</body>
</html>
diff --git a/layout/reftests/css-display/display-contents-shadow-dom-1.html b/layout/reftests/css-display/display-contents-shadow-dom-1.html
index f5e49a192a..6c0f297f9d 100644
--- a/layout/reftests/css-display/display-contents-shadow-dom-1.html
+++ b/layout/reftests/css-display/display-contents-shadow-dom-1.html
@@ -51,8 +51,6 @@ div.after::after {content: " Y";}
<div id="hostT" class="c">T</div>
<div id="hostU"><span class="c">U</span></div>
<div id="hostV" class="c" style="color:red"><b class="c" style="color:inherit">V</b></div>
- <div id="hostW" class="c" style="color:red"><b class="c" style="color:inherit">W</b></div>
- <span id="hostX" style="color:red"><b class="c" style="color:inherit">X</b></span>
<!-- TODO(bug 1021572?) <div id="hostY" class="c" style="color:red"><b>Y</b></div> -->
<script>
@@ -76,38 +74,40 @@ div.after::after {content: " Y";}
return e;
}
- document.body.offsetHeight;
-
- shadow("host1").innerHTML = '<content></content> c';
- shadow("host2").innerHTML = 'a <content style="display:contents"></content> c';
- shadow("host3").innerHTML = 'a <content style="display:contents"></content>';
- shadow("host4").innerHTML = '<content style="display:contents"></content>';
- shadow("host5").innerHTML = 'a <content style="display:contents"></content>';
- shadow("host6").innerHTML = '<z style="color:blue; display:contents"><content></content></z> c';
- shadow("host7").innerHTML = 'a <content style="display:contents"></content> c';
- shadow("host8").innerHTML = 'a <z style="color:blue; display:contents"><content style="display:contents"></z></content>';
- shadow("host9").innerHTML = '<content style="display:contents"></content>';
- shadow("hostA").innerHTML = 'a <content style="display:contents"></content>';
- shadow("hostB").innerHTML = 'a <content select=".c"></content> <content select=".b"></content> B';
- shadow("hostC").innerHTML = 'A <content select=".c"></content> <content select=".b"></content> B';
- shadow("hostD").innerHTML = 'A <content select=".c"></content> <content select=".b"></content> B <content select=".b"></content>';
- shadow("hostE").innerHTML = 'A <content select=".c"></content> <content select=".b"></content> B';
- shadow("hostF").innerHTML = '<content select=".c"></content> <content select=".b"></content> B';
- shadow("hostG").innerHTML = '<content select=".b"></content>';
- shadow("hostH").innerHTML = '<content select=".b"></content>';
- shadow("hostI").innerHTML = 'A<content select=".b"></content>';
- shadow("hostJ").innerHTML = 'A<content select=".b"></content>';
- shadow("hostK").innerHTML = '<content select=".b"></content>';
- shadow("hostL").innerHTML = '<content select=".b"></content>';
- shadow("hostM").innerHTML = '<content select="b"></content><content select="i"></content>';
- shadow("hostN").innerHTML = '<content select="b"></content><content select="i"></content>';
- shadow("hostO").innerHTML = '<content select="b"></content><content select="i"></content>';
- shadow("hostP").innerHTML = '<content select="b"></content><content select="i"></content>';
- shadow("hostQ").innerHTML = '<content select="b"></content><content select="i"></content>';
- shadow("hostR").innerHTML = '<content select="span"></content>';
- shadow("hostW").innerHTML = '<z style="color:red"><content select="b"></content></z>';
- shadow("hostX").innerHTML = '<z style="color:red"><content select="b"></content></z>';
- // TODO(bug 1021572?) shadow("hostY").innerHTML = '<content select="b"><style scoped>:scope{color:green}</style></content>';
+ function run() {
+ document.body.offsetHeight;
+
+ shadow("host1").innerHTML = '<content></content> c';
+ shadow("host2").innerHTML = 'a <content style="display:contents"></content> c';
+ shadow("host3").innerHTML = 'a <content style="display:contents"></content>';
+ shadow("host4").innerHTML = '<content style="display:contents"></content>';
+ shadow("host5").innerHTML = 'a <content style="display:contents"></content>';
+ shadow("host6").innerHTML = '<z style="color:blue; display:contents"><content></content></z> c';
+ shadow("host7").innerHTML = 'a <content style="display:contents"></content> c';
+ shadow("host8").innerHTML = 'a <z style="color:blue; display:contents"><content style="display:contents"></z></content>';
+ shadow("host9").innerHTML = '<content style="display:contents"></content>';
+ shadow("hostA").innerHTML = 'a <content style="display:contents"></content>';
+ shadow("hostB").innerHTML = 'a <content select=".c"></content> <content select=".b"></content> B';
+ shadow("hostC").innerHTML = 'A <content select=".c"></content> <content select=".b"></content> B';
+ shadow("hostD").innerHTML = 'A <content select=".c"></content> <content select=".b"></content> B <content select=".b"></content>';
+ shadow("hostE").innerHTML = 'A <content select=".c"></content> <content select=".b"></content> B';
+ shadow("hostF").innerHTML = '<content select=".c"></content> <content select=".b"></content> B';
+ shadow("hostG").innerHTML = '<content select=".b"></content>';
+ shadow("hostH").innerHTML = '<content select=".b"></content>';
+ shadow("hostI").innerHTML = 'A<content select=".b"></content>';
+ shadow("hostJ").innerHTML = 'A<content select=".b"></content>';
+ shadow("hostK").innerHTML = '<content select=".b"></content>';
+ shadow("hostL").innerHTML = '<content select=".b"></content>';
+ shadow("hostM").innerHTML = '<content select="b"></content><content select="i"></content>';
+ shadow("hostN").innerHTML = '<content select="b"></content><content select="i"></content>';
+ shadow("hostO").innerHTML = '<content select="b"></content><content select="i"></content>';
+ shadow("hostP").innerHTML = '<content select="b"></content><content select="i"></content>';
+ shadow("hostQ").innerHTML = '<content select="b"></content><content select="i"></content>';
+ shadow("hostR").innerHTML = '<content select="span"></content>';
+ shadow("hostW").innerHTML = '<z style="color:red"><content select="b"></content></z>';
+ shadow("hostX").innerHTML = '<z style="color:red"><content select="b"></content></z>';
+ // TODO(bug 1021572?) shadow("hostY").innerHTML = '<content select="b"><style scoped>:scope{color:green}</style></content>';
+ }
function tweak() {
document.body.offsetHeight;
@@ -222,15 +222,18 @@ div.after::after {content: " Y";}
shadow("hostT");
shadow("hostU");
shadow("hostV").innerHTML = '<z style="color:green"><content select="b"></content></z>';
- shadow("hostW").innerHTML = '<z style="color:green"><content select="b"></content></z>';
- shadow("hostX").innerHTML = '<z style="color:green"><content select="b"></content></z>';
document.body.offsetHeight;
document.documentElement.removeAttribute("class");
},0);
}
- window.addEventListener("MozReftestInvalidate", tweak, false);
+ if (document.body.createShadowRoot) {
+ run();
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ } else {
+ document.documentElement.removeAttribute("class");
+ }
</script>
</body>
</html>
diff --git a/layout/reftests/css-grid/reftest.list b/layout/reftests/css-grid/reftest.list
index 7c5e6be514..35e3140a85 100644
--- a/layout/reftests/css-grid/reftest.list
+++ b/layout/reftests/css-grid/reftest.list
@@ -248,10 +248,10 @@ asserts(0-10) == grid-fragmentation-015.html grid-fragmentation-015-ref.html # b
== grid-fragmentation-dyn5-019.html grid-fragmentation-019-ref.html
== grid-fragmentation-dyn1-020.html grid-fragmentation-020-ref.html
== grid-fragmentation-dyn2-020.html grid-fragmentation-020-ref.html
-!= grid-fragmentation-dyn1-021.html grid-fragmentation-021-ref.html # bug 1251799
+== grid-fragmentation-dyn1-021.html grid-fragmentation-021-ref.html
== grid-fragmentation-dyn2-021.html grid-fragmentation-021-ref.html
== grid-fragmentation-dyn3-021.html grid-fragmentation-021-ref.html
-asserts(1-10) == grid-fragmentation-dyn4-021.html grid-fragmentation-021-ref.html # assertion related to bug 1251799 ?
+== grid-fragmentation-dyn4-021.html grid-fragmentation-021-ref.html
== grid-fragmentation-dyn5-021.html grid-fragmentation-021-ref.html
== grid-fragmentation-dyn2-022.html grid-fragmentation-007-ref.html
== grid-fragmentation-dyn1-023.html grid-fragmentation-023-ref.html
diff --git a/layout/reftests/details-summary/reftest.list b/layout/reftests/details-summary/reftest.list
index e96581ad45..a972cf4980 100644
--- a/layout/reftests/details-summary/reftest.list
+++ b/layout/reftests/details-summary/reftest.list
@@ -101,3 +101,7 @@ fuzzy(1,1) == mouse-click-twice-float-details.html float-details.html # Bug 1316
== details-before.html single-summary.html
== open-details-after.html open-single-summary.html
== open-details-before.html open-single-summary.html
+
+# Move summary element
+== move-float-summary-to-different-details.html move-float-summary-to-different-details-ref.html
+== move-position-absolute-summary-to-different-details.html move-position-absolute-summary-to-different-details-ref.html
diff --git a/layout/reftests/forms/input/number/number-style-inheritance-ref.html b/layout/reftests/forms/input/number/number-style-inheritance-ref.html
new file mode 100644
index 0000000000..00c8dba43a
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-style-inheritance-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="text" style="width: 100px; text-decoration: underline;" value="1234">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-style-inheritance.html b/layout/reftests/forms/input/number/number-style-inheritance.html
new file mode 100644
index 0000000000..b21ff1f1c8
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-style-inheritance.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="number" style="width: 100px; -moz-appearance: textfield; text-decoration: underline;" value="1234">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/reftest.list b/layout/reftests/forms/input/number/reftest.list
index ecf05ce155..bd07e274ce 100644
--- a/layout/reftests/forms/input/number/reftest.list
+++ b/layout/reftests/forms/input/number/reftest.list
@@ -52,3 +52,6 @@ fuzzy-if(skiaContent,2,5) needs-focus == focus-handling.html focus-handling-ref.
fuzzy(128,4) == number-reframe-anon-text-field.html number-reframe-anon-text-field-ref.html
== pseudo-classes.html about:blank
+
+# Style inheritance:
+== number-style-inheritance.html number-style-inheritance-ref.html
diff --git a/layout/reftests/forms/legend/reftest.list b/layout/reftests/forms/legend/reftest.list
index 879835a59b..03e25eb201 100644
--- a/layout/reftests/forms/legend/reftest.list
+++ b/layout/reftests/forms/legend/reftest.list
@@ -1,3 +1,3 @@
== legend.html legend-ref.html
-fuzzy-if(skiaContent,1,7) pref(dom.webcomponents.enabled,true) == shadow-dom.html shadow-dom-ref.html
+#bug 1418002 fuzzy-if(skiaContent,1,7) pref(dom.webcomponents.enabled,true) == shadow-dom.html shadow-dom-ref.html
== 1273433.html 1273433-ref.html
diff --git a/layout/reftests/forms/legend/shadow-dom.html b/layout/reftests/forms/legend/shadow-dom.html
index ad7babcf7c..0f0a536655 100644
--- a/layout/reftests/forms/legend/shadow-dom.html
+++ b/layout/reftests/forms/legend/shadow-dom.html
@@ -48,17 +48,19 @@ div.after::after {content: " Y";}
return e;
}
- document.body.offsetHeight;
+ function run() {
+ document.body.offsetHeight;
- shadow("host1").innerHTML = '<content></content> c';
- shadow("host2").innerHTML = 'a <content></content> c';
- shadow("host3").innerHTML = 'a <content></content>';
- shadow("host4").innerHTML = '<content></content>';
- shadow("host5").innerHTML = 'a <content></content>';
- shadow("host6").innerHTML = '<z style="color:blue; display:contents"><content></content></z> c';
- shadow("host7").innerHTML = 'a <content select=".c"></content> <content select=".b"></content> B';
- shadow("host8").innerHTML = 'A <content select=".c"></content> <content select=".b"></content> B';
- shadow("host9").innerHTML = 'A <content select=".c"></content> <content select=".b"></content> B <content select=".b"></content>';
+ shadow("host1").innerHTML = '<content></content> c';
+ shadow("host2").innerHTML = 'a <content></content> c';
+ shadow("host3").innerHTML = 'a <content></content>';
+ shadow("host4").innerHTML = '<content></content>';
+ shadow("host5").innerHTML = 'a <content></content>';
+ shadow("host6").innerHTML = '<z style="color:blue; display:contents"><content></content></z> c';
+ shadow("host7").innerHTML = 'a <content select=".c"></content> <content select=".b"></content> B';
+ shadow("host8").innerHTML = 'A <content select=".c"></content> <content select=".b"></content> B';
+ shadow("host9").innerHTML = 'A <content select=".c"></content> <content select=".b"></content> B <content select=".b"></content>';
+ }
function tweak() {
document.body.offsetHeight;
@@ -105,7 +107,12 @@ div.after::after {content: " Y";}
},0);
}
- window.addEventListener("MozReftestInvalidate", tweak, false);
+ if (document.body.createShadowRoot) {
+ run();
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ } else {
+ document.documentElement.removeAttribute("class");
+ }
</script>
</body>
</html>
diff --git a/layout/reftests/mathml/shadow-dom-1.html b/layout/reftests/mathml/shadow-dom-1.html
index 547253a3c0..bbf27069fd 100644
--- a/layout/reftests/mathml/shadow-dom-1.html
+++ b/layout/reftests/mathml/shadow-dom-1.html
@@ -7,9 +7,11 @@
<script>
function insertShadowMathML() {
var x = document.getElementById("x");
- x.createShadowRoot();
- x.shadowRoot.innerHTML =
- '<math><msup><mi>X</mi><mi>X</mi></msup></math>';
+ if (x.createShadowRoot) {
+ x.createShadowRoot();
+ x.shadowRoot.innerHTML =
+ '<math><msup><mi>X</mi><mi>X</mi></msup></math>';
+ }
document.documentElement.removeAttribute("class");
}
window.addEventListener("MozReftestInvalidate", insertShadowMathML, false);
diff --git a/layout/reftests/webcomponents/adjacent-insertion-points-1-ref.html b/layout/reftests/webcomponents/adjacent-insertion-points-1-ref.html
deleted file mode 100644
index 2c1f4e3419..0000000000
--- a/layout/reftests/webcomponents/adjacent-insertion-points-1-ref.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<!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
deleted file mode 100644
index a8c6f983dc..0000000000
--- a/layout/reftests/webcomponents/adjacent-insertion-points-1.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!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
deleted file mode 100644
index 2c1f4e3419..0000000000
--- a/layout/reftests/webcomponents/adjacent-insertion-points-2-ref.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<!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
deleted file mode 100644
index f90cb206bb..0000000000
--- a/layout/reftests/webcomponents/adjacent-insertion-points-2.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!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
deleted file mode 100644
index 16f6afb288..0000000000
--- a/layout/reftests/webcomponents/basic-insertion-point-1-ref.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<body>
-<div>
- <div style="border: 10px solid green">Hello</div>
-</div>
-</body>
-</html>
diff --git a/layout/reftests/webcomponents/basic-insertion-point-1.html b/layout/reftests/webcomponents/basic-insertion-point-1.html
deleted file mode 100644
index 727175ef35..0000000000
--- a/layout/reftests/webcomponents/basic-insertion-point-1.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<head>
- <script>
- function tweak() {
- // div with style "border: 10px solid green"
- var shadowDiv = document.createElement("div");
- shadowDiv.style.border = "10px solid green";
-
- var insertionPoint = document.createElement("content");
- shadowDiv.appendChild(insertionPoint);
-
- var shadowRoot = document.getElementById('outer').createShadowRoot();
- shadowRoot.appendChild(shadowDiv);
- }
- </script>
-</head>
-<body onload="tweak()">
-<div id="outer">Hello</div>
-</body>
-</html>
diff --git a/layout/reftests/webcomponents/basic-insertion-point-2-ref.html b/layout/reftests/webcomponents/basic-insertion-point-2-ref.html
deleted file mode 100644
index 5e92137752..0000000000
--- a/layout/reftests/webcomponents/basic-insertion-point-2-ref.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<body>
-<div>
- <div style="border: 10px solid green">
- <span style="background-color: purple">Hello</span>
- <span style="background-color: orange">World</span>
- </div>
-</div>
-</body>
-</html>
diff --git a/layout/reftests/webcomponents/basic-insertion-point-2.html b/layout/reftests/webcomponents/basic-insertion-point-2.html
deleted file mode 100644
index 595edb4712..0000000000
--- a/layout/reftests/webcomponents/basic-insertion-point-2.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<head>
- <script>
- function tweak() {
- // div with style "border: 10px solid green"
- var shadowDiv = document.createElement("div");
- shadowDiv.style.border = "10px solid green";
-
- var insertionPoint = document.createElement("content");
- shadowDiv.appendChild(insertionPoint);
-
- var shadowRoot = document.getElementById('outer').createShadowRoot();
- shadowRoot.appendChild(shadowDiv);
- }
- </script>
-</head>
-<body onload="tweak()">
-<div id="outer">
- <span style="background-color: purple">Hello</span>
- <span style="background-color: orange">World</span>
-</div>
-</body>
-</html>
diff --git a/layout/reftests/webcomponents/basic-shadow-1.html b/layout/reftests/webcomponents/basic-shadow-1.html
index 944a594d27..8949dfc6de 100644
--- a/layout/reftests/webcomponents/basic-shadow-1.html
+++ b/layout/reftests/webcomponents/basic-shadow-1.html
@@ -9,7 +9,7 @@
shadowDiv.style.height = "100px";
shadowDiv.style.backgroundColor = "green";
- var shadowRoot = document.getElementById('outer').createShadowRoot();
+ var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'});
shadowRoot.appendChild(shadowDiv);
}
</script>
diff --git a/layout/reftests/webcomponents/basic-shadow-2.html b/layout/reftests/webcomponents/basic-shadow-2.html
index 587c47221a..8e066997dc 100644
--- a/layout/reftests/webcomponents/basic-shadow-2.html
+++ b/layout/reftests/webcomponents/basic-shadow-2.html
@@ -6,7 +6,7 @@
var shadowDiv = document.createElement("div");
shadowDiv.style.border = "10px solid green";
- var shadowRoot = document.getElementById('outer').createShadowRoot();
+ var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'});
shadowRoot.appendChild(shadowDiv);
var orangeDiv = document.createElement("div");
diff --git a/layout/reftests/webcomponents/basic-shadow-3.html b/layout/reftests/webcomponents/basic-shadow-3.html
index 2ae53b5a9e..3226c4baa6 100644
--- a/layout/reftests/webcomponents/basic-shadow-3.html
+++ b/layout/reftests/webcomponents/basic-shadow-3.html
@@ -6,7 +6,7 @@
var shadowDiv = document.createElement("div");
shadowDiv.style.border = "10px solid green";
- var shadowRoot = document.getElementById('outer').createShadowRoot();
+ var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'});
shadowRoot.appendChild(shadowDiv);
var orangeDiv = document.createElement("div");
diff --git a/layout/reftests/webcomponents/basic-shadow-4.html b/layout/reftests/webcomponents/basic-shadow-4.html
index 70f91773e4..39dc51a9e5 100644
--- a/layout/reftests/webcomponents/basic-shadow-4.html
+++ b/layout/reftests/webcomponents/basic-shadow-4.html
@@ -6,7 +6,7 @@
var shadowDiv = document.createElement("div");
shadowDiv.style.border = "10px solid green";
- var shadowRoot = document.getElementById('outer').createShadowRoot();
+ var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'});
shadowRoot.appendChild(shadowDiv);
var orangeDiv = document.createElement("div");
diff --git a/layout/reftests/webcomponents/basic-shadow-element-1-ref.html b/layout/reftests/webcomponents/basic-shadow-element-1-ref.html
deleted file mode 100644
index a47b9362a3..0000000000
--- a/layout/reftests/webcomponents/basic-shadow-element-1-ref.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<!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
deleted file mode 100644
index e51bd8b722..0000000000
--- a/layout/reftests/webcomponents/basic-shadow-element-1.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!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/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/cross-tree-selection-1.html b/layout/reftests/webcomponents/cross-tree-selection-1.html
index 1e4f027479..01e7317f23 100644
--- a/layout/reftests/webcomponents/cross-tree-selection-1.html
+++ b/layout/reftests/webcomponents/cross-tree-selection-1.html
@@ -3,6 +3,11 @@
<head>
<script>
function tweak() {
+ if (!document.body.createShadowRoot) {
+ document.documentElement.className = "";
+ return;
+ }
+
var host = document.getElementById("host");
var shadow = host.createShadowRoot();
diff --git a/layout/reftests/webcomponents/dynamic-insertion-point-distribution-1.html b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-1.html
index c57f72b379..8919a9c6a0 100644
--- a/layout/reftests/webcomponents/dynamic-insertion-point-distribution-1.html
+++ b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-1.html
@@ -5,9 +5,13 @@
<body>
<div id="host"></div>
<script>
- var host = document.getElementById("host");
- var root = host.createShadowRoot();
- root.innerHTML = 'a <content></content> c';
+ var host, root;
+
+ function run() {
+ host = document.getElementById("host");
+ root = host.createShadowRoot();
+ root.innerHTML = 'a <content></content> c';
+ }
function tweak() {
var span = document.createElement("span");
@@ -19,7 +23,12 @@
document.documentElement.removeAttribute("class");
}
- window.addEventListener("MozReftestInvalidate", tweak, false);
+ if (document.body.createShadowRoot) {
+ run();
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ } else {
+ document.documentElement.className = "";
+ }
</script>
</body>
</html>
diff --git a/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2.html b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2.html
index 29a850e90f..c58b9cfbd7 100644
--- a/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2.html
+++ b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2.html
@@ -5,9 +5,13 @@
<body>
<div id="host"></div>
<script>
- var host = document.getElementById("host");
- var root = host.createShadowRoot();
- root.innerHTML = "<span>a</span>";
+ var host, root;
+
+ function run() {
+ host = document.getElementById("host");
+ root = host.createShadowRoot();
+ root.innerHTML = "<span>a</span>";
+ }
function tweak() {
var span = document.createElement("span");
@@ -20,7 +24,12 @@
document.documentElement.removeAttribute("class");
}
- window.addEventListener("MozReftestInvalidate", tweak, false);
+ if (document.body.createShadowRoot) {
+ run();
+ window.addEventListener("MozReftestInvalidate", tweak);
+ } else {
+ document.documentElement.className = "";
+ }
</script>
</body>
</html>
diff --git a/layout/reftests/webcomponents/dynamic-shadow-element-1-ref.html b/layout/reftests/webcomponents/dynamic-shadow-element-1-ref.html
deleted file mode 100644
index a3b5150f65..0000000000
--- a/layout/reftests/webcomponents/dynamic-shadow-element-1-ref.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<head>
-</head>
-<body>
-<div>
- <div style="background-color: green"><span>Hello</span><span> </span><span>World</span></div>
-</div>
-</body>
-</html>
diff --git a/layout/reftests/webcomponents/dynamic-shadow-element-1.html b/layout/reftests/webcomponents/dynamic-shadow-element-1.html
deleted file mode 100644
index 0142164a1a..0000000000
--- a/layout/reftests/webcomponents/dynamic-shadow-element-1.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<head>
- <script>
- function tweak() {
- var oldestShadow = document.getElementById('outer').createShadowRoot();
- oldestShadow.innerHTML = 'Hello';
-
- var olderShadow = document.getElementById('outer').createShadowRoot();
-
- var youngerShadow = document.getElementById('outer').createShadowRoot();
- youngerShadow.innerHTML = '<div style="background-color:green"><shadow></shadow></div>';
-
- olderShadow.innerHTML = '<shadow></shadow> World';
- }
- </script>
-</head>
-<body onload="tweak()">
-<div id="outer">
- <div style="width:300px; height:100px; background-color:red;"></div>
-</div>
-</body>
-</html>
diff --git a/layout/reftests/webcomponents/fallback-content-1.html b/layout/reftests/webcomponents/fallback-content-1.html
index ac3b5d02a4..0bcd2abbd3 100644
--- a/layout/reftests/webcomponents/fallback-content-1.html
+++ b/layout/reftests/webcomponents/fallback-content-1.html
@@ -8,13 +8,13 @@
shadowDiv.style.border = "10px solid green";
// Insertion point will match nothing and use fallback content.
- var insertionPoint = document.createElement("content");
- shadowDiv.appendChild(insertionPoint);
+ var slot = document.createElement("slot");
+ shadowDiv.appendChild(slot);
// Append three nodes as children to use as fallback content.
- insertionPoint.innerHTML = '<span style="background-color: orange">Hello</span> <span style="background-color: green">World</span>';
+ slot.innerHTML = '<span style="background-color: orange">Hello</span> <span style="background-color: green">World</span>';
- var shadowRoot = document.getElementById('outer').createShadowRoot();
+ var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'});
shadowRoot.appendChild(shadowDiv);
}
</script>
diff --git a/layout/reftests/webcomponents/input-transition-1.html b/layout/reftests/webcomponents/input-transition-1.html
index ede0fa40bb..a4be5271b5 100644
--- a/layout/reftests/webcomponents/input-transition-1.html
+++ b/layout/reftests/webcomponents/input-transition-1.html
@@ -5,19 +5,28 @@
<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>';
+ var host, root;
+
+ function run() {
+ host = document.getElementById("host");
+ 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);
+ var el = root.getElementById("one");
+ el.checked = true;
+ el.nextSibling.addEventListener("transitionend", function() {
+ setTimeout(()=>{document.documentElement.removeAttribute("class")}, 1000); // wait for the checkbox SVG image to load on Android
+ });
}
- window.addEventListener("MozReftestInvalidate", tweak, false);
+ if (document.body.createShadowRoot) {
+ run();
+ window.addEventListener("MozReftestInvalidate", tweak);
+ } else {
+ document.documentElement.className = "";
+ }
</script>
</body>
</html>
diff --git a/layout/reftests/webcomponents/nested-insertion-point-1.html b/layout/reftests/webcomponents/nested-insertion-point-1.html
index 66892029ab..3d0d92f0dc 100644
--- a/layout/reftests/webcomponents/nested-insertion-point-1.html
+++ b/layout/reftests/webcomponents/nested-insertion-point-1.html
@@ -7,19 +7,20 @@
var outerShadow = document.createElement("div");
outerShadow.style.border = "10px solid green";
- var outerInsertionPoint = document.createElement("content");
+ var outerInsertionPoint = document.createElement("slot");
outerShadow.appendChild(outerInsertionPoint);
// div with style "border: 10px solid orange"
var innerShadow = document.createElement("div");
innerShadow.style.border = "10px solid orange";
- var innerInsertionPoint = document.createElement("content");
- innerShadow.appendChild(innerInsertionPoint);
+ var slot = document.createElement("slot");
+ innerShadow.appendChild(slot);
- outerShadow.createShadowRoot().appendChild(innerShadow);
+ outerShadow.attachShadow({mode: 'open'}).appendChild(innerShadow);
- var shadowRoot = document.getElementById('outer').createShadowRoot();
+ var shadowRoot =
+ document.getElementById('outer').attachShadow({mode: 'open'});
shadowRoot.appendChild(outerShadow);
}
</script>
diff --git a/layout/reftests/webcomponents/nested-shadow-element-1.html b/layout/reftests/webcomponents/nested-shadow-element-1.html
deleted file mode 100644
index cfaad3d490..0000000000
--- a/layout/reftests/webcomponents/nested-shadow-element-1.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!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/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/reftest.list b/layout/reftests/webcomponents/reftest.list
index beba21b18c..6afbc27204 100644
--- a/layout/reftests/webcomponents/reftest.list
+++ b/layout/reftests/webcomponents/reftest.list
@@ -3,17 +3,17 @@ pref(dom.webcomponents.enabled,true) == basic-shadow-1.html basic-shadow-1-ref.h
pref(dom.webcomponents.enabled,true) == basic-shadow-2.html basic-shadow-2-ref.html
pref(dom.webcomponents.enabled,true) == basic-shadow-3.html basic-shadow-3-ref.html
pref(dom.webcomponents.enabled,true) == basic-shadow-4.html basic-shadow-4-ref.html
-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
+#bug 1421542 pref(dom.webcomponents.enabled,true) == nested-insertion-point-1.html nested-insertion-point-1-ref.html
+#bug 1421542 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
+#bug 1421542 pref(dom.webcomponents.enabled,true) == dynamic-insertion-point-distribution-1.html dynamic-insertion-point-distribution-1-ref.html
pref(dom.webcomponents.enabled,true) == dynamic-insertion-point-distribution-2.html dynamic-insertion-point-distribution-2-ref.html
pref(dom.webcomponents.enabled,true) == remove-append-shadow-host-1.html remove-append-shadow-host-1-ref.html
+pref(dom.webcomponents.enabled,true) == basic-slot-1.html basic-slot-1-ref.html
+pref(dom.webcomponents.enabled,true) == basic-slot-2.html basic-slot-2-ref.html
+pref(dom.webcomponents.enabled,true) == basic-slot-3.html basic-slot-3-ref.html
+pref(dom.webcomponents.enabled,true) == basic-slot-4.html basic-slot-3-ref.html
+pref(dom.webcomponents.enabled,true) == basic-slot-5.html basic-slot-5-ref.html
+pref(dom.webcomponents.enabled,true) == basic-slot-6.html basic-slot-6-ref.html
diff --git a/layout/reftests/webcomponents/remove-append-shadow-host-1.html b/layout/reftests/webcomponents/remove-append-shadow-host-1.html
index 85161565e0..1a752eba6c 100644
--- a/layout/reftests/webcomponents/remove-append-shadow-host-1.html
+++ b/layout/reftests/webcomponents/remove-append-shadow-host-1.html
@@ -6,7 +6,7 @@
<div id="container"><div id="host"></div></div>
<script>
var host = document.getElementById("host");
- var root = host.createShadowRoot();
+ var root = host.attachShadow({mode: 'open'});
root.innerHTML = 'inside shadow DOM';
var container = document.getElementById("container");
diff --git a/layout/reftests/webcomponents/remove-insertion-point-1.html b/layout/reftests/webcomponents/remove-insertion-point-1.html
index 195673ca8d..1b7588daf6 100644
--- a/layout/reftests/webcomponents/remove-insertion-point-1.html
+++ b/layout/reftests/webcomponents/remove-insertion-point-1.html
@@ -8,15 +8,15 @@
shadowDiv.style.border = "10px solid green";
// Insertion point will match nothing and use fallback content.
- var insertionPoint = document.createElement("content");
- shadowDiv.appendChild(insertionPoint);
+ var slot = document.createElement("slot");
+ shadowDiv.appendChild(slot);
- var shadowRoot = document.getElementById('outer').createShadowRoot();
+ var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'});
shadowRoot.appendChild(shadowDiv);
// Remove the insertion point from the ShadowRoot, "Hello" should no
// longer be rendered.
- shadowDiv.removeChild(insertionPoint);
+ shadowDiv.removeChild(slot);
}
</script>
</head>
diff --git a/layout/reftests/webcomponents/style-sharing-across-shadow.html b/layout/reftests/webcomponents/style-sharing-across-shadow.html
new file mode 100644
index 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.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.html b/layout/reftests/webcomponents/update-dist-node-descendants-1.html
index e2dd4ebb7b..3ba96594bf 100644
--- a/layout/reftests/webcomponents/update-dist-node-descendants-1.html
+++ b/layout/reftests/webcomponents/update-dist-node-descendants-1.html
@@ -5,17 +5,25 @@
<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");
+function run() {
+ var shadowRoot = document.getElementById('outer').createShadowRoot();
+ shadowRoot.innerHTML = '<div><content></content></div>';
}
-window.addEventListener("MozReftestInvalidate", tweak);
+ function tweak() {
+ var distNode = document.getElementById("distnode");
+ distNode.textContent = "Hello World";
+
+ document.documentElement.removeAttribute("class");
+ }
+
+if (document.body.createShadowRoot) {
+ run();
+ window.addEventListener("MozReftestInvalidate", tweak);
+} else {
+ document.documentElement.className = "";
+}
</script>
</body>
</html>