diff options
Diffstat (limited to 'layout/reftests')
50 files changed, 343 insertions, 319 deletions
diff --git a/layout/reftests/bugs/1066554-1.html b/layout/reftests/bugs/1066554-1.html index bb0a97f96..f4df207a1 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 d6f58a9c2..84d7f188f 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 f57822901..6e6dad233 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 f5e49a192..6c0f297f9 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 7c5e6be51..35e3140a8 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 e96581ad4..a972cf498 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 000000000..00c8dba43 --- /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 000000000..b21ff1f1c --- /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 ecf05ce15..bd07e274c 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 879835a59..03e25eb20 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 ad7babcf7..0f0a53665 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 547253a3c..bbf27069f 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 2c1f4e341..000000000 --- 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 a8c6f983d..000000000 --- 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 2c1f4e341..000000000 --- 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 f90cb206b..000000000 --- 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 16f6afb28..000000000 --- a/layout/reftests/webcomponents/basic-insertion-point-1-ref.html +++ /dev/null @@ -1,8 +0,0 @@ -<!DOCTYPE HTML> -<html> -<body> -<div> - <div style="border: 10px solid green">Hello</div> -</div> -</body> -</html> diff --git a/layout/reftests/webcomponents/basic-insertion-point-1.html b/layout/reftests/webcomponents/basic-insertion-point-1.html deleted file mode 100644 index 727175ef3..000000000 --- a/layout/reftests/webcomponents/basic-insertion-point-1.html +++ /dev/null @@ -1,21 +0,0 @@ -<!DOCTYPE HTML> -<html> -<head> - <script> - function tweak() { - // div with style "border: 10px solid green" - var shadowDiv = document.createElement("div"); - shadowDiv.style.border = "10px solid green"; - - var insertionPoint = document.createElement("content"); - shadowDiv.appendChild(insertionPoint); - - var shadowRoot = document.getElementById('outer').createShadowRoot(); - shadowRoot.appendChild(shadowDiv); - } - </script> -</head> -<body onload="tweak()"> -<div id="outer">Hello</div> -</body> -</html> diff --git a/layout/reftests/webcomponents/basic-insertion-point-2-ref.html b/layout/reftests/webcomponents/basic-insertion-point-2-ref.html deleted file mode 100644 index 5e9213775..000000000 --- a/layout/reftests/webcomponents/basic-insertion-point-2-ref.html +++ /dev/null @@ -1,11 +0,0 @@ -<!DOCTYPE HTML> -<html> -<body> -<div> - <div style="border: 10px solid green"> - <span style="background-color: purple">Hello</span> - <span style="background-color: orange">World</span> - </div> -</div> -</body> -</html> diff --git a/layout/reftests/webcomponents/basic-insertion-point-2.html b/layout/reftests/webcomponents/basic-insertion-point-2.html deleted file mode 100644 index 595edb471..000000000 --- a/layout/reftests/webcomponents/basic-insertion-point-2.html +++ /dev/null @@ -1,24 +0,0 @@ -<!DOCTYPE HTML> -<html> -<head> - <script> - function tweak() { - // div with style "border: 10px solid green" - var shadowDiv = document.createElement("div"); - shadowDiv.style.border = "10px solid green"; - - var insertionPoint = document.createElement("content"); - shadowDiv.appendChild(insertionPoint); - - var shadowRoot = document.getElementById('outer').createShadowRoot(); - shadowRoot.appendChild(shadowDiv); - } - </script> -</head> -<body onload="tweak()"> -<div id="outer"> - <span style="background-color: purple">Hello</span> - <span style="background-color: orange">World</span> -</div> -</body> -</html> diff --git a/layout/reftests/webcomponents/basic-shadow-1.html b/layout/reftests/webcomponents/basic-shadow-1.html index 944a594d2..8949dfc6d 100644 --- a/layout/reftests/webcomponents/basic-shadow-1.html +++ b/layout/reftests/webcomponents/basic-shadow-1.html @@ -9,7 +9,7 @@ shadowDiv.style.height = "100px"; shadowDiv.style.backgroundColor = "green"; - var shadowRoot = document.getElementById('outer').createShadowRoot(); + var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'}); shadowRoot.appendChild(shadowDiv); } </script> diff --git a/layout/reftests/webcomponents/basic-shadow-2.html b/layout/reftests/webcomponents/basic-shadow-2.html index 587c47221..8e066997d 100644 --- a/layout/reftests/webcomponents/basic-shadow-2.html +++ b/layout/reftests/webcomponents/basic-shadow-2.html @@ -6,7 +6,7 @@ var shadowDiv = document.createElement("div"); shadowDiv.style.border = "10px solid green"; - var shadowRoot = document.getElementById('outer').createShadowRoot(); + var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'}); shadowRoot.appendChild(shadowDiv); var orangeDiv = document.createElement("div"); diff --git a/layout/reftests/webcomponents/basic-shadow-3.html b/layout/reftests/webcomponents/basic-shadow-3.html index 2ae53b5a9..3226c4baa 100644 --- a/layout/reftests/webcomponents/basic-shadow-3.html +++ b/layout/reftests/webcomponents/basic-shadow-3.html @@ -6,7 +6,7 @@ var shadowDiv = document.createElement("div"); shadowDiv.style.border = "10px solid green"; - var shadowRoot = document.getElementById('outer').createShadowRoot(); + var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'}); shadowRoot.appendChild(shadowDiv); var orangeDiv = document.createElement("div"); diff --git a/layout/reftests/webcomponents/basic-shadow-4.html b/layout/reftests/webcomponents/basic-shadow-4.html index 70f91773e..39dc51a9e 100644 --- a/layout/reftests/webcomponents/basic-shadow-4.html +++ b/layout/reftests/webcomponents/basic-shadow-4.html @@ -6,7 +6,7 @@ var shadowDiv = document.createElement("div"); shadowDiv.style.border = "10px solid green"; - var shadowRoot = document.getElementById('outer').createShadowRoot(); + var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'}); shadowRoot.appendChild(shadowDiv); var orangeDiv = document.createElement("div"); diff --git a/layout/reftests/webcomponents/basic-shadow-element-1-ref.html b/layout/reftests/webcomponents/basic-shadow-element-1-ref.html deleted file mode 100644 index a47b9362a..000000000 --- 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 e51bd8b72..000000000 --- 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 000000000..4f7418498 --- /dev/null +++ b/layout/reftests/webcomponents/basic-slot-1-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> + <head> + <style> + body { color: green; } + </style> + </head> + <body> + This text should be green + </body> +</html> diff --git a/layout/reftests/webcomponents/basic-slot-1.html b/layout/reftests/webcomponents/basic-slot-1.html new file mode 100644 index 000000000..b31f4c1c3 --- /dev/null +++ b/layout/reftests/webcomponents/basic-slot-1.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<html> + <body> + <slot style="color: green">This text should be green</slot> + </body> +</html> diff --git a/layout/reftests/webcomponents/basic-slot-2-ref.html b/layout/reftests/webcomponents/basic-slot-2-ref.html new file mode 100644 index 000000000..d4d1b8c06 --- /dev/null +++ b/layout/reftests/webcomponents/basic-slot-2-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<html> +<head> + <style> + div { + width: 100px; + height: 100px; + background: green; + } + </style> +</head> +<body> + <p>There should be a green box below.</p> + <div></div> +</body> +</html> diff --git a/layout/reftests/webcomponents/basic-slot-2.html b/layout/reftests/webcomponents/basic-slot-2.html new file mode 100644 index 000000000..3754ace20 --- /dev/null +++ b/layout/reftests/webcomponents/basic-slot-2.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<html> + <body> + <p>There should be a green box below.</p> + <slot style="display: block; width: 100px; height: 100px; background: green;"></slot> + </body> +</html> diff --git a/layout/reftests/webcomponents/basic-slot-3-ref.html b/layout/reftests/webcomponents/basic-slot-3-ref.html new file mode 100644 index 000000000..54be54848 --- /dev/null +++ b/layout/reftests/webcomponents/basic-slot-3-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<html> +<body> +<div> + <div style="color: green">This text should be green</div> +</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/basic-slot-3.html b/layout/reftests/webcomponents/basic-slot-3.html new file mode 100644 index 000000000..c00483fe2 --- /dev/null +++ b/layout/reftests/webcomponents/basic-slot-3.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<html> +<head> + <script> + function tweak() { + var slot = document.createElement("slot"); + slot.style.color = "green"; + + var shadowRoot = + document.getElementById('outer').attachShadow({mode: 'open'}); + shadowRoot.appendChild(slot); + } + </script> +</head> +<body onload="tweak()"> +<div id="outer">This text should be green</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/basic-slot-4.html b/layout/reftests/webcomponents/basic-slot-4.html new file mode 100644 index 000000000..496a92651 --- /dev/null +++ b/layout/reftests/webcomponents/basic-slot-4.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<html> +<head> + <script> + function tweak() { + var slot = document.createElement("slot"); + // The border shouldn't be visible, due to display: contents. + slot.style.border = "1px solid red"; + slot.style.color = "green"; + + var shadowRoot = + document.getElementById('outer').attachShadow({mode: 'open'}); + shadowRoot.appendChild(slot); + } + </script> +</head> +<body onload="tweak()"> +<div id="outer">This text should be green</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/cross-tree-selection-1.html b/layout/reftests/webcomponents/cross-tree-selection-1.html index 1e4f02747..01e7317f2 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 c57f72b37..8919a9c6a 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 29a850e90..c58b9cfbd 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 a3b5150f6..000000000 --- a/layout/reftests/webcomponents/dynamic-shadow-element-1-ref.html +++ /dev/null @@ -1,10 +0,0 @@ -<!DOCTYPE HTML> -<html> -<head> -</head> -<body> -<div> - <div style="background-color: green"><span>Hello</span><span> </span><span>World</span></div> -</div> -</body> -</html> diff --git a/layout/reftests/webcomponents/dynamic-shadow-element-1.html b/layout/reftests/webcomponents/dynamic-shadow-element-1.html deleted file mode 100644 index 0142164a1..000000000 --- a/layout/reftests/webcomponents/dynamic-shadow-element-1.html +++ /dev/null @@ -1,23 +0,0 @@ -<!DOCTYPE HTML> -<html> -<head> - <script> - function tweak() { - var oldestShadow = document.getElementById('outer').createShadowRoot(); - oldestShadow.innerHTML = 'Hello'; - - var olderShadow = document.getElementById('outer').createShadowRoot(); - - var youngerShadow = document.getElementById('outer').createShadowRoot(); - youngerShadow.innerHTML = '<div style="background-color:green"><shadow></shadow></div>'; - - olderShadow.innerHTML = '<shadow></shadow> World'; - } - </script> -</head> -<body onload="tweak()"> -<div id="outer"> - <div style="width:300px; height:100px; background-color:red;"></div> -</div> -</body> -</html> diff --git a/layout/reftests/webcomponents/fallback-content-1.html b/layout/reftests/webcomponents/fallback-content-1.html index ac3b5d02a..0bcd2abbd 100644 --- a/layout/reftests/webcomponents/fallback-content-1.html +++ b/layout/reftests/webcomponents/fallback-content-1.html @@ -8,13 +8,13 @@ shadowDiv.style.border = "10px solid green"; // Insertion point will match nothing and use fallback content. - var insertionPoint = document.createElement("content"); - shadowDiv.appendChild(insertionPoint); + var slot = document.createElement("slot"); + shadowDiv.appendChild(slot); // Append three nodes as children to use as fallback content. - insertionPoint.innerHTML = '<span style="background-color: orange">Hello</span> <span style="background-color: green">World</span>'; + slot.innerHTML = '<span style="background-color: orange">Hello</span> <span style="background-color: green">World</span>'; - var shadowRoot = document.getElementById('outer').createShadowRoot(); + var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'}); shadowRoot.appendChild(shadowDiv); } </script> diff --git a/layout/reftests/webcomponents/input-transition-1.html b/layout/reftests/webcomponents/input-transition-1.html index ede0fa40b..a4be5271b 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 66892029a..3d0d92f0d 100644 --- a/layout/reftests/webcomponents/nested-insertion-point-1.html +++ b/layout/reftests/webcomponents/nested-insertion-point-1.html @@ -7,19 +7,20 @@ var outerShadow = document.createElement("div"); outerShadow.style.border = "10px solid green"; - var outerInsertionPoint = document.createElement("content"); + var outerInsertionPoint = document.createElement("slot"); outerShadow.appendChild(outerInsertionPoint); // div with style "border: 10px solid orange" var innerShadow = document.createElement("div"); innerShadow.style.border = "10px solid orange"; - var innerInsertionPoint = document.createElement("content"); - innerShadow.appendChild(innerInsertionPoint); + var slot = document.createElement("slot"); + innerShadow.appendChild(slot); - outerShadow.createShadowRoot().appendChild(innerShadow); + outerShadow.attachShadow({mode: 'open'}).appendChild(innerShadow); - var shadowRoot = document.getElementById('outer').createShadowRoot(); + var shadowRoot = + document.getElementById('outer').attachShadow({mode: 'open'}); shadowRoot.appendChild(outerShadow); } </script> diff --git a/layout/reftests/webcomponents/nested-shadow-element-1.html b/layout/reftests/webcomponents/nested-shadow-element-1.html deleted file mode 100644 index cfaad3d49..000000000 --- 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 000000000..d953beb6d --- /dev/null +++ b/layout/reftests/webcomponents/reframe-shadow-child-1.html @@ -0,0 +1,16 @@ +<!doctype html> +<template id="tmpl"> + <div style="display: table"> + Some text + <span style="display: table-cell">something</span> + More text + </div> +</template> +<div id="host"></div> +<script> + let shadowRoot = document.getElementById("host").attachShadow({mode: 'open'}); + let tmpl = document.getElementById("tmpl"); + shadowRoot.appendChild(document.importNode(tmpl.content, true)); + document.body.offsetTop; + shadowRoot.firstElementChild.querySelector("span").remove(); +</script> diff --git a/layout/reftests/webcomponents/reframe-shadow-child-2.html b/layout/reftests/webcomponents/reframe-shadow-child-2.html new file mode 100644 index 000000000..0ebbe7433 --- /dev/null +++ b/layout/reftests/webcomponents/reframe-shadow-child-2.html @@ -0,0 +1,15 @@ +<!doctype html> +<template id="tmpl"> + <div style="display: block"> + Some text + More text + </div> +</template> +<div id="host"></div> +<script> + let shadowRoot = document.getElementById("host").attachShadow({mode: 'open'}); + let tmpl = document.getElementById("tmpl"); + shadowRoot.appendChild(document.importNode(tmpl.content, true)); + document.body.offsetTop; + shadowRoot.firstElementChild.style.display = "table"; +</script> diff --git a/layout/reftests/webcomponents/reftest.list b/layout/reftests/webcomponents/reftest.list index beba21b18..6afbc2720 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 85161565e..1a752eba6 100644 --- a/layout/reftests/webcomponents/remove-append-shadow-host-1.html +++ b/layout/reftests/webcomponents/remove-append-shadow-host-1.html @@ -6,7 +6,7 @@ <div id="container"><div id="host"></div></div> <script> var host = document.getElementById("host"); - var root = host.createShadowRoot(); + var root = host.attachShadow({mode: 'open'}); root.innerHTML = 'inside shadow DOM'; var container = document.getElementById("container"); diff --git a/layout/reftests/webcomponents/remove-insertion-point-1.html b/layout/reftests/webcomponents/remove-insertion-point-1.html index 195673ca8..1b7588daf 100644 --- a/layout/reftests/webcomponents/remove-insertion-point-1.html +++ b/layout/reftests/webcomponents/remove-insertion-point-1.html @@ -8,15 +8,15 @@ shadowDiv.style.border = "10px solid green"; // Insertion point will match nothing and use fallback content. - var insertionPoint = document.createElement("content"); - shadowDiv.appendChild(insertionPoint); + var slot = document.createElement("slot"); + shadowDiv.appendChild(slot); - var shadowRoot = document.getElementById('outer').createShadowRoot(); + var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'}); shadowRoot.appendChild(shadowDiv); // Remove the insertion point from the ShadowRoot, "Hello" should no // longer be rendered. - shadowDiv.removeChild(insertionPoint); + shadowDiv.removeChild(slot); } </script> </head> diff --git a/layout/reftests/webcomponents/style-sharing-across-shadow.html b/layout/reftests/webcomponents/style-sharing-across-shadow.html new file mode 100644 index 000000000..b41cf7479 --- /dev/null +++ b/layout/reftests/webcomponents/style-sharing-across-shadow.html @@ -0,0 +1,22 @@ +<!doctype html> +<style> + div { display: contents } +</style> +<div></div> +<div></div> +<script> + let divs = document.querySelectorAll('div'); + divs[0].attachShadow({mode: 'open'}).innerHTML = ` + <style> + * { color: green; } + </style> + <span>Should be green</span> + `; + divs[1].attachShadow({mode: 'open'}).innerHTML = ` + <style> + * { color: initial; } + [foo] { } + </style> + <span>Should not be green</span> + `; +</script> diff --git a/layout/reftests/webcomponents/style-sharing.html b/layout/reftests/webcomponents/style-sharing.html new file mode 100644 index 000000000..0a1e3c95c --- /dev/null +++ b/layout/reftests/webcomponents/style-sharing.html @@ -0,0 +1,14 @@ +<!doctype html> +<div id="host"></div> +<script> + let root = host.attachShadow({mode: 'open'}); + root.innerHTML = ` + <style> + #test { + color: green; + } + </style> + <span id="test">Should be green</span> + <span id="test2">Should not be green</span> + `; +</script> diff --git a/layout/reftests/webcomponents/update-dist-node-descendants-1.html b/layout/reftests/webcomponents/update-dist-node-descendants-1.html index e2dd4ebb7..3ba96594b 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> |