diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /layout/reftests/webcomponents | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/webcomponents')
48 files changed, 702 insertions, 0 deletions
diff --git a/layout/reftests/webcomponents/basic-shadow-1-ref.html b/layout/reftests/webcomponents/basic-shadow-1-ref.html new file mode 100644 index 0000000000..0d498d8c5c --- /dev/null +++ b/layout/reftests/webcomponents/basic-shadow-1-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<html> +<body> +<div> + <div style="width:300px; height:100px; background-color:green;"></div> +</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/basic-shadow-1.html b/layout/reftests/webcomponents/basic-shadow-1.html new file mode 100644 index 0000000000..8949dfc6de --- /dev/null +++ b/layout/reftests/webcomponents/basic-shadow-1.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<html> +<head> + <script> + function tweak() { + // div with style "width:300px; height:100px; background-color:green" + var shadowDiv = document.createElement("div"); + shadowDiv.style.width = "300px"; + shadowDiv.style.height = "100px"; + shadowDiv.style.backgroundColor = "green"; + + var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'}); + shadowRoot.appendChild(shadowDiv); + } + </script> +</head> +<body onload="tweak()"> +<div id="outer"> + <div style="width:300px; height:100px; background-color:red;"></div> +</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/basic-shadow-2-ref.html b/layout/reftests/webcomponents/basic-shadow-2-ref.html new file mode 100644 index 0000000000..74c50f5168 --- /dev/null +++ b/layout/reftests/webcomponents/basic-shadow-2-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<html> +<body> +<div> + <div style="border: 10px solid green"> + <div style="border: 10px solid orange"></div> + <div style="border: 10px solid purple"></div> + </div> +</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/basic-shadow-2.html b/layout/reftests/webcomponents/basic-shadow-2.html new file mode 100644 index 0000000000..8e066997dc --- /dev/null +++ b/layout/reftests/webcomponents/basic-shadow-2.html @@ -0,0 +1,28 @@ +<!DOCTYPE HTML> +<html> +<head> + <script> + function tweak() { + var shadowDiv = document.createElement("div"); + shadowDiv.style.border = "10px solid green"; + + var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'}); + shadowRoot.appendChild(shadowDiv); + + var orangeDiv = document.createElement("div"); + orangeDiv.style.border = "10px solid orange"; + + var purpleDiv = document.createElement("div"); + purpleDiv.style.border = "10px solid purple"; + + shadowDiv.appendChild(purpleDiv); + shadowDiv.insertBefore(orangeDiv, purpleDiv); + } + </script> +</head> +<body onload="tweak()"> +<div id="outer"> + <div style="background-color:red;"></div> +</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/basic-shadow-3-ref.html b/layout/reftests/webcomponents/basic-shadow-3-ref.html new file mode 100644 index 0000000000..21b2075b7f --- /dev/null +++ b/layout/reftests/webcomponents/basic-shadow-3-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<html> +<body> +<div> + <div style="border: 10px solid green"> + <div style="border: 10px solid orange"></div> + </div> +</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/basic-shadow-3.html b/layout/reftests/webcomponents/basic-shadow-3.html new file mode 100644 index 0000000000..3226c4baa6 --- /dev/null +++ b/layout/reftests/webcomponents/basic-shadow-3.html @@ -0,0 +1,29 @@ +<!DOCTYPE HTML> +<html> +<head> + <script> + function tweak() { + var shadowDiv = document.createElement("div"); + shadowDiv.style.border = "10px solid green"; + + var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'}); + shadowRoot.appendChild(shadowDiv); + + var orangeDiv = document.createElement("div"); + orangeDiv.style.border = "10px solid orange"; + + var purpleDiv = document.createElement("div"); + purpleDiv.style.border = "10px solid purple"; + + shadowDiv.appendChild(purpleDiv); + shadowDiv.insertBefore(orangeDiv, purpleDiv); + shadowDiv.removeChild(purpleDiv); + } + </script> +</head> +<body onload="tweak()"> +<div id="outer"> + <div style="background-color:red;"></div> +</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/basic-shadow-4-ref.html b/layout/reftests/webcomponents/basic-shadow-4-ref.html new file mode 100644 index 0000000000..e6dd408688 --- /dev/null +++ b/layout/reftests/webcomponents/basic-shadow-4-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<html> +<body> +<div> + <div style="border: 10px solid green"></div> + <div style="border: 10px solid orange"></div> + <div style="border: 10px solid purple"></div> +</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/basic-shadow-4.html b/layout/reftests/webcomponents/basic-shadow-4.html new file mode 100644 index 0000000000..39dc51a9e5 --- /dev/null +++ b/layout/reftests/webcomponents/basic-shadow-4.html @@ -0,0 +1,28 @@ +<!DOCTYPE HTML> +<html> +<head> + <script> + function tweak() { + var shadowDiv = document.createElement("div"); + shadowDiv.style.border = "10px solid green"; + + var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'}); + shadowRoot.appendChild(shadowDiv); + + var orangeDiv = document.createElement("div"); + orangeDiv.style.border = "10px solid orange"; + + var purpleDiv = document.createElement("div"); + purpleDiv.style.border = "10px solid purple"; + + shadowRoot.appendChild(purpleDiv); + shadowRoot.insertBefore(orangeDiv, purpleDiv); + } + </script> +</head> +<body onload="tweak()"> +<div id="outer"> + <div style="background-color:red;"></div> +</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/basic-slot-1-ref.html b/layout/reftests/webcomponents/basic-slot-1-ref.html new file mode 100644 index 0000000000..4f74184983 --- /dev/null +++ b/layout/reftests/webcomponents/basic-slot-1-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> + <head> + <style> + body { color: green; } + </style> + </head> + <body> + This text should be green + </body> +</html> diff --git a/layout/reftests/webcomponents/basic-slot-1.html b/layout/reftests/webcomponents/basic-slot-1.html new file mode 100644 index 0000000000..b31f4c1c36 --- /dev/null +++ b/layout/reftests/webcomponents/basic-slot-1.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<html> + <body> + <slot style="color: green">This text should be green</slot> + </body> +</html> diff --git a/layout/reftests/webcomponents/basic-slot-2-ref.html b/layout/reftests/webcomponents/basic-slot-2-ref.html new file mode 100644 index 0000000000..d4d1b8c066 --- /dev/null +++ b/layout/reftests/webcomponents/basic-slot-2-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<html> +<head> + <style> + div { + width: 100px; + height: 100px; + background: green; + } + </style> +</head> +<body> + <p>There should be a green box below.</p> + <div></div> +</body> +</html> diff --git a/layout/reftests/webcomponents/basic-slot-2.html b/layout/reftests/webcomponents/basic-slot-2.html new file mode 100644 index 0000000000..3754ace20c --- /dev/null +++ b/layout/reftests/webcomponents/basic-slot-2.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<html> + <body> + <p>There should be a green box below.</p> + <slot style="display: block; width: 100px; height: 100px; background: green;"></slot> + </body> +</html> diff --git a/layout/reftests/webcomponents/basic-slot-3-ref.html b/layout/reftests/webcomponents/basic-slot-3-ref.html new file mode 100644 index 0000000000..54be54848d --- /dev/null +++ b/layout/reftests/webcomponents/basic-slot-3-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<html> +<body> +<div> + <div style="color: green">This text should be green</div> +</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/basic-slot-3.html b/layout/reftests/webcomponents/basic-slot-3.html new file mode 100644 index 0000000000..c00483fe2f --- /dev/null +++ b/layout/reftests/webcomponents/basic-slot-3.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<html> +<head> + <script> + function tweak() { + var slot = document.createElement("slot"); + slot.style.color = "green"; + + var shadowRoot = + document.getElementById('outer').attachShadow({mode: 'open'}); + shadowRoot.appendChild(slot); + } + </script> +</head> +<body onload="tweak()"> +<div id="outer">This text should be green</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/basic-slot-4.html b/layout/reftests/webcomponents/basic-slot-4.html new file mode 100644 index 0000000000..496a926514 --- /dev/null +++ b/layout/reftests/webcomponents/basic-slot-4.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<html> +<head> + <script> + function tweak() { + var slot = document.createElement("slot"); + // The border shouldn't be visible, due to display: contents. + slot.style.border = "1px solid red"; + slot.style.color = "green"; + + var shadowRoot = + document.getElementById('outer').attachShadow({mode: 'open'}); + shadowRoot.appendChild(slot); + } + </script> +</head> +<body onload="tweak()"> +<div id="outer">This text should be green</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/basic-slot-5-ref.html b/layout/reftests/webcomponents/basic-slot-5-ref.html new file mode 100644 index 0000000000..16f6afb288 --- /dev/null +++ b/layout/reftests/webcomponents/basic-slot-5-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<html> +<body> +<div> + <div style="border: 10px solid green">Hello</div> +</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/basic-slot-5.html b/layout/reftests/webcomponents/basic-slot-5.html new file mode 100644 index 0000000000..ba1ea0c30b --- /dev/null +++ b/layout/reftests/webcomponents/basic-slot-5.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<html> +<head> + <script> + function tweak() { + // div with style "border: 10px solid green" + var shadowDiv = document.createElement("div"); + shadowDiv.style.border = "10px solid green"; + + var slot = document.createElement("slot"); + shadowDiv.appendChild(slot); + + var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'}); + shadowRoot.appendChild(shadowDiv); + } + </script> +</head> +<body onload="tweak()"> +<div id="outer">Hello</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/basic-slot-6-ref.html b/layout/reftests/webcomponents/basic-slot-6-ref.html new file mode 100644 index 0000000000..5e92137752 --- /dev/null +++ b/layout/reftests/webcomponents/basic-slot-6-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<html> +<body> +<div> + <div style="border: 10px solid green"> + <span style="background-color: purple">Hello</span> + <span style="background-color: orange">World</span> + </div> +</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/basic-slot-6.html b/layout/reftests/webcomponents/basic-slot-6.html new file mode 100644 index 0000000000..0990b66ab1 --- /dev/null +++ b/layout/reftests/webcomponents/basic-slot-6.html @@ -0,0 +1,25 @@ +<!DOCTYPE HTML> +<html> +<head> + <script> + function tweak() { + // div with style "border: 10px solid green" + var shadowDiv = document.createElement("div"); + shadowDiv.style.border = "10px solid green"; + + var slot = document.createElement("slot"); + shadowDiv.appendChild(slot); + + var shadowRoot = + document.getElementById('outer').attachShadow({mode: 'open'}); + shadowRoot.appendChild(shadowDiv); + } + </script> +</head> +<body onload="tweak()"> +<div id="outer"> + <span style="background-color: purple">Hello</span> + <span style="background-color: orange">World</span> +</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/dynamic-insertion-point-distribution-1-ref.html b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-1-ref.html new file mode 100644 index 0000000000..5cf030c4ce --- /dev/null +++ b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-1-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <div>a b c</div> + </body> +</html> diff --git a/layout/reftests/webcomponents/dynamic-insertion-point-distribution-1.html b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-1.html new file mode 100644 index 0000000000..aefe84f252 --- /dev/null +++ b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-1.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <head> + </head> + <body> + <div id="host"></div> + <script> + var host, root; + + host = document.getElementById("host"); + root = host.attachShadow({mode: 'open'}); + root.innerHTML = 'a <slot></slot> c'; + + function tweak() { + var span = document.createElement("span"); + span.innerHTML = "b"; + + // Span should be distributed to insertion point between 'a' and 'c'. + host.appendChild(span); + + document.documentElement.removeAttribute("class"); + } + + window.addEventListener("MozReftestInvalidate", tweak); + </script> + </body> +</html> diff --git a/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2-ref.html b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2-ref.html new file mode 100644 index 0000000000..e5121d97e4 --- /dev/null +++ b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <div>a</div> + </body> +</html> diff --git a/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2.html b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2.html new file mode 100644 index 0000000000..d753af09cc --- /dev/null +++ b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <head> + </head> + <body> + <div id="host"></div> + <script> + var host, root; + + host = document.getElementById("host"); + root = host.attachShadow({mode: 'open'}); + root.innerHTML = "<span>a</span>"; + + function tweak() { + var span = document.createElement("span"); + span.innerHTML = "b"; + + // Span should not be visible because it is not distributed to any + // insertion points in the shadow DOM. + host.appendChild(span); + + document.documentElement.removeAttribute("class"); + } + + window.addEventListener("MozReftestInvalidate", tweak); + </script> + </body> +</html> diff --git a/layout/reftests/webcomponents/fallback-content-1-ref.html b/layout/reftests/webcomponents/fallback-content-1-ref.html new file mode 100644 index 0000000000..28bed659df --- /dev/null +++ b/layout/reftests/webcomponents/fallback-content-1-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<html> +<body> +<div> + <div style="border: 10px solid green"><span style="background-color: orange">Hello</span> <span style="background-color: green">World</span></div> +</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/fallback-content-1.html b/layout/reftests/webcomponents/fallback-content-1.html new file mode 100644 index 0000000000..0bcd2abbd3 --- /dev/null +++ b/layout/reftests/webcomponents/fallback-content-1.html @@ -0,0 +1,25 @@ +<!DOCTYPE HTML> +<html> +<head> + <script> + function tweak() { + // div with style "border: 10px solid green" + var shadowDiv = document.createElement("div"); + shadowDiv.style.border = "10px solid green"; + + // Insertion point will match nothing and use fallback content. + var slot = document.createElement("slot"); + shadowDiv.appendChild(slot); + + // Append three nodes as children to use as fallback content. + slot.innerHTML = '<span style="background-color: orange">Hello</span> <span style="background-color: green">World</span>'; + + var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'}); + shadowRoot.appendChild(shadowDiv); + } + </script> +</head> +<body onload="tweak()"> +<div id="outer"></div> +</body> +</html> diff --git a/layout/reftests/webcomponents/input-transition-1-ref.html b/layout/reftests/webcomponents/input-transition-1-ref.html new file mode 100644 index 0000000000..8e42c974ef --- /dev/null +++ b/layout/reftests/webcomponents/input-transition-1-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <input type="checkbox" checked><div style="height: 50px; width: 50px; background: green;"></div> + </body> +</html> diff --git a/layout/reftests/webcomponents/input-transition-1.html b/layout/reftests/webcomponents/input-transition-1.html new file mode 100644 index 0000000000..c11444d05b --- /dev/null +++ b/layout/reftests/webcomponents/input-transition-1.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <head> + </head> + <body> + <div id="host"></div> + <script> + var host, root; + + host = document.getElementById("host"); + root = host.attachShadow({mode: 'open'}); + root.innerHTML = '<style>input ~ div { background: red; transition: background 100ms; } input:checked ~ div { background: green; }</style><input id="one" type="checkbox"><div style="height: 50px; width: 50px;"></div>'; + + function tweak() { + var el = root.getElementById("one"); + el.checked = true; + el.nextSibling.addEventListener("transitionend", function() { + setTimeout(()=>{document.documentElement.removeAttribute("class")}, 1000); // wait for the checkbox SVG image to load on Android + }); + } + + window.addEventListener("MozReftestInvalidate", tweak); + </script> + </body> +</html> diff --git a/layout/reftests/webcomponents/nested-insertion-point-1-ref.html b/layout/reftests/webcomponents/nested-insertion-point-1-ref.html new file mode 100644 index 0000000000..b2faa75cc6 --- /dev/null +++ b/layout/reftests/webcomponents/nested-insertion-point-1-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<html> +<body> +<div> + <div style="border: 10px solid green"><div style="border: 10px solid orange">Hello</div></div> +</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/nested-insertion-point-1.html b/layout/reftests/webcomponents/nested-insertion-point-1.html new file mode 100644 index 0000000000..3d0d92f0dc --- /dev/null +++ b/layout/reftests/webcomponents/nested-insertion-point-1.html @@ -0,0 +1,31 @@ +<!DOCTYPE HTML> +<html> +<head> + <script> + function tweak() { + // div with style "border: 10px solid green" + var outerShadow = document.createElement("div"); + outerShadow.style.border = "10px solid green"; + + var outerInsertionPoint = document.createElement("slot"); + outerShadow.appendChild(outerInsertionPoint); + + // div with style "border: 10px solid orange" + var innerShadow = document.createElement("div"); + innerShadow.style.border = "10px solid orange"; + + var slot = document.createElement("slot"); + innerShadow.appendChild(slot); + + outerShadow.attachShadow({mode: 'open'}).appendChild(innerShadow); + + var shadowRoot = + document.getElementById('outer').attachShadow({mode: 'open'}); + shadowRoot.appendChild(outerShadow); + } + </script> +</head> +<body onload="tweak()"> +<div id="outer">Hello</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/reframe-shadow-child-1.html b/layout/reftests/webcomponents/reframe-shadow-child-1.html new file mode 100644 index 0000000000..d953beb6d7 --- /dev/null +++ b/layout/reftests/webcomponents/reframe-shadow-child-1.html @@ -0,0 +1,16 @@ +<!doctype html> +<template id="tmpl"> + <div style="display: table"> + Some text + <span style="display: table-cell">something</span> + More text + </div> +</template> +<div id="host"></div> +<script> + let shadowRoot = document.getElementById("host").attachShadow({mode: 'open'}); + let tmpl = document.getElementById("tmpl"); + shadowRoot.appendChild(document.importNode(tmpl.content, true)); + document.body.offsetTop; + shadowRoot.firstElementChild.querySelector("span").remove(); +</script> diff --git a/layout/reftests/webcomponents/reframe-shadow-child-2.html b/layout/reftests/webcomponents/reframe-shadow-child-2.html new file mode 100644 index 0000000000..0ebbe7433d --- /dev/null +++ b/layout/reftests/webcomponents/reframe-shadow-child-2.html @@ -0,0 +1,15 @@ +<!doctype html> +<template id="tmpl"> + <div style="display: block"> + Some text + More text + </div> +</template> +<div id="host"></div> +<script> + let shadowRoot = document.getElementById("host").attachShadow({mode: 'open'}); + let tmpl = document.getElementById("tmpl"); + shadowRoot.appendChild(document.importNode(tmpl.content, true)); + document.body.offsetTop; + shadowRoot.firstElementChild.style.display = "table"; +</script> diff --git a/layout/reftests/webcomponents/reframe-shadow-child-ref.html b/layout/reftests/webcomponents/reframe-shadow-child-ref.html new file mode 100644 index 0000000000..b768be1659 --- /dev/null +++ b/layout/reftests/webcomponents/reframe-shadow-child-ref.html @@ -0,0 +1,5 @@ +<!doctype html> +<div style="display: table"> + Some text + More text +</div> diff --git a/layout/reftests/webcomponents/reftest.list b/layout/reftests/webcomponents/reftest.list new file mode 100644 index 0000000000..fa25e54c0b --- /dev/null +++ b/layout/reftests/webcomponents/reftest.list @@ -0,0 +1,25 @@ +== basic-shadow-1.html basic-shadow-1-ref.html +== basic-shadow-2.html basic-shadow-2-ref.html +== basic-shadow-3.html basic-shadow-3-ref.html +== basic-shadow-4.html basic-shadow-4-ref.html +== fallback-content-1.html fallback-content-1-ref.html +== remove-insertion-point-1.html remove-insertion-point-1-ref.html +== nested-insertion-point-1.html nested-insertion-point-1-ref.html +== update-dist-node-descendants-1.html update-dist-node-descendants-1-ref.html +fuzzy-if(Android,0-2,0-7) == input-transition-1.html input-transition-1-ref.html +== dynamic-insertion-point-distribution-1.html dynamic-insertion-point-distribution-1-ref.html +== dynamic-insertion-point-distribution-2.html dynamic-insertion-point-distribution-2-ref.html +== remove-append-shadow-host-1.html remove-append-shadow-host-1-ref.html +== reframe-shadow-child-1.html reframe-shadow-child-ref.html +== reframe-shadow-child-2.html reframe-shadow-child-ref.html +== style-sharing.html style-sharing-ref.html +== style-sharing-across-shadow.html style-sharing-ref.html # bug 1412400 +== basic-slot-1.html basic-slot-1-ref.html +== basic-slot-2.html basic-slot-2-ref.html +== basic-slot-3.html basic-slot-3-ref.html +== basic-slot-4.html basic-slot-3-ref.html +== basic-slot-5.html basic-slot-5-ref.html +== basic-slot-6.html basic-slot-6-ref.html +== shadow-style-1.html shadow-style-1-ref.html +== shadow-style-2.html shadow-style-2-ref.html +== shadow-style-3.html shadow-style-3-ref.html diff --git a/layout/reftests/webcomponents/remove-append-shadow-host-1-ref.html b/layout/reftests/webcomponents/remove-append-shadow-host-1-ref.html new file mode 100644 index 0000000000..88e10614a3 --- /dev/null +++ b/layout/reftests/webcomponents/remove-append-shadow-host-1-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <div>inside shadow DOM</div> + </body> +</html> diff --git a/layout/reftests/webcomponents/remove-append-shadow-host-1.html b/layout/reftests/webcomponents/remove-append-shadow-host-1.html new file mode 100644 index 0000000000..1a752eba6c --- /dev/null +++ b/layout/reftests/webcomponents/remove-append-shadow-host-1.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + </head> + <body> + <div id="container"><div id="host"></div></div> + <script> + var host = document.getElementById("host"); + var root = host.attachShadow({mode: 'open'}); + root.innerHTML = 'inside shadow DOM'; + + var container = document.getElementById("container"); + container.removeChild(host); + container.appendChild(host); + </script> + </body> +</html> diff --git a/layout/reftests/webcomponents/remove-insertion-point-1-ref.html b/layout/reftests/webcomponents/remove-insertion-point-1-ref.html new file mode 100644 index 0000000000..3ecceb3034 --- /dev/null +++ b/layout/reftests/webcomponents/remove-insertion-point-1-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<html> +<body> +<div> + <div style="border: 10px solid green"></div> +</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/remove-insertion-point-1.html b/layout/reftests/webcomponents/remove-insertion-point-1.html new file mode 100644 index 0000000000..1b7588daf6 --- /dev/null +++ b/layout/reftests/webcomponents/remove-insertion-point-1.html @@ -0,0 +1,26 @@ +<!DOCTYPE HTML> +<html> +<head> + <script> + function tweak() { + // div with style "border: 10px solid green" + var shadowDiv = document.createElement("div"); + shadowDiv.style.border = "10px solid green"; + + // Insertion point will match nothing and use fallback content. + var slot = document.createElement("slot"); + shadowDiv.appendChild(slot); + + var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'}); + shadowRoot.appendChild(shadowDiv); + + // Remove the insertion point from the ShadowRoot, "Hello" should no + // longer be rendered. + shadowDiv.removeChild(slot); + } + </script> +</head> +<body onload="tweak()"> +<div id="outer">Hello</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/shadow-style-1-ref.html b/layout/reftests/webcomponents/shadow-style-1-ref.html new file mode 100644 index 0000000000..1e914ad20c --- /dev/null +++ b/layout/reftests/webcomponents/shadow-style-1-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<p style="color: green">This should be green.</p> diff --git a/layout/reftests/webcomponents/shadow-style-1.html b/layout/reftests/webcomponents/shadow-style-1.html new file mode 100644 index 0000000000..cdc00eee4a --- /dev/null +++ b/layout/reftests/webcomponents/shadow-style-1.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<body> +<style> +body { color: red; } +</style> +<script> +var div = document.createElement("div"); +var shadow = div.attachShadow({ mode: "open" }); +shadow.innerHTML = '<style>p { color: green; }</style><p>This should be green.</p>'; +document.body.appendChild(div); +</script> diff --git a/layout/reftests/webcomponents/shadow-style-2-ref.html b/layout/reftests/webcomponents/shadow-style-2-ref.html new file mode 100644 index 0000000000..1e914ad20c --- /dev/null +++ b/layout/reftests/webcomponents/shadow-style-2-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<p style="color: green">This should be green.</p> diff --git a/layout/reftests/webcomponents/shadow-style-2.html b/layout/reftests/webcomponents/shadow-style-2.html new file mode 100644 index 0000000000..892a09489d --- /dev/null +++ b/layout/reftests/webcomponents/shadow-style-2.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<body> +<style> +body { color: red; } +</style> +<script> +var div = document.createElement("div"); +var shadow = div.attachShadow({ mode: "open" }); +shadow.innerHTML = '<p>This should be green.</p>'; +document.body.appendChild(div); +shadow.firstChild.offsetTop; +var style = document.createElement("style"); +style.textContent = 'p { color: green; }'; +shadow.appendChild(style); +</script> diff --git a/layout/reftests/webcomponents/shadow-style-3-ref.html b/layout/reftests/webcomponents/shadow-style-3-ref.html new file mode 100644 index 0000000000..1e914ad20c --- /dev/null +++ b/layout/reftests/webcomponents/shadow-style-3-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<p style="color: green">This should be green.</p> diff --git a/layout/reftests/webcomponents/shadow-style-3.html b/layout/reftests/webcomponents/shadow-style-3.html new file mode 100644 index 0000000000..ea2c7e7eda --- /dev/null +++ b/layout/reftests/webcomponents/shadow-style-3.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<body> +<style> +body { color: red; } +</style> +<script> +var div = document.createElement("div"); +var shadow = div.attachShadow({ mode: "open" }); +var div2 = document.createElement("div"); +var shadow2 = div2.attachShadow({ mode: "open" }); +shadow2.innerHTML = '<style>p { color: green; }</style><p>This should be green.</p>'; +shadow.appendChild(div2); +document.body.appendChild(div); +</script> diff --git a/layout/reftests/webcomponents/style-sharing-across-shadow.html b/layout/reftests/webcomponents/style-sharing-across-shadow.html new file mode 100644 index 0000000000..b41cf74796 --- /dev/null +++ b/layout/reftests/webcomponents/style-sharing-across-shadow.html @@ -0,0 +1,22 @@ +<!doctype html> +<style> + div { display: contents } +</style> +<div></div> +<div></div> +<script> + let divs = document.querySelectorAll('div'); + divs[0].attachShadow({mode: 'open'}).innerHTML = ` + <style> + * { color: green; } + </style> + <span>Should be green</span> + `; + divs[1].attachShadow({mode: 'open'}).innerHTML = ` + <style> + * { color: initial; } + [foo] { } + </style> + <span>Should not be green</span> + `; +</script> diff --git a/layout/reftests/webcomponents/style-sharing-ref.html b/layout/reftests/webcomponents/style-sharing-ref.html new file mode 100644 index 0000000000..64bedb96e5 --- /dev/null +++ b/layout/reftests/webcomponents/style-sharing-ref.html @@ -0,0 +1,5 @@ +<!doctype html> +<div> + <span style="color: green">Should be green</span> + <span>Should not be green</span> +</div> diff --git a/layout/reftests/webcomponents/style-sharing.html b/layout/reftests/webcomponents/style-sharing.html new file mode 100644 index 0000000000..0a1e3c95c4 --- /dev/null +++ b/layout/reftests/webcomponents/style-sharing.html @@ -0,0 +1,14 @@ +<!doctype html> +<div id="host"></div> +<script> + let root = host.attachShadow({mode: 'open'}); + root.innerHTML = ` + <style> + #test { + color: green; + } + </style> + <span id="test">Should be green</span> + <span id="test2">Should not be green</span> + `; +</script> diff --git a/layout/reftests/webcomponents/update-dist-node-descendants-1-ref.html b/layout/reftests/webcomponents/update-dist-node-descendants-1-ref.html new file mode 100644 index 0000000000..41fe64ff35 --- /dev/null +++ b/layout/reftests/webcomponents/update-dist-node-descendants-1-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<html> +<body> +<div> + <div><div><span>Hello World</span></div></div> +</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/update-dist-node-descendants-1.html b/layout/reftests/webcomponents/update-dist-node-descendants-1.html new file mode 100644 index 0000000000..003c233944 --- /dev/null +++ b/layout/reftests/webcomponents/update-dist-node-descendants-1.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<head> +</head> +<body> +<div id="outer"><span id="distnode">text</span></div> +<script> + + var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'}); + shadowRoot.innerHTML = '<div><slot></slot></div>'; + + function tweak() { + var distNode = document.getElementById("distnode"); + distNode.textContent = "Hello World"; + + document.documentElement.removeAttribute("class"); + } + + window.addEventListener("MozReftestInvalidate", tweak); +</script> +</body> +</html> |