diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-scoping/css-scoping-shadow-nested-slot-display-override.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-scoping/css-scoping-shadow-nested-slot-display-override.html | 23 |
1 files changed, 23 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-scoping/css-scoping-shadow-nested-slot-display-override.html b/testing/web-platform/tests/css/css-scoping/css-scoping-shadow-nested-slot-display-override.html new file mode 100644 index 0000000000..f194e469f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-scoping/css-scoping-shadow-nested-slot-display-override.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>CSS Scoping: Dynamically overriding nested slot display value</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-scoping/#slots-in-shadow-tree"> +<link rel="match" href="reference/green-box.html"/> +<style> + #outerHost { + width: 100px; + height: 100px; + background: red; + } +</style> +<p>Test passes if you see a single 100px by 100px green box below.</p> +<div id="outerHost"> </div> +<script> + let outerRoot = outerHost.attachShadow({mode:"open"}); + outerRoot.innerHTML = '<div id="innerHost"><slot></slot></div>'; + let innerHost = outerRoot.querySelector("#innerHost"); + let innerRoot = innerHost.attachShadow({mode:"open"}); + innerRoot.innerHTML = '<slot style="display:none; border:solid 50px green"></slot>'; + document.body.offsetTop; + innerRoot.querySelector("slot").style.display = "block"; +</script> |