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 /testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-stacking-order.html | |
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 'testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-stacking-order.html')
-rw-r--r-- | testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-stacking-order.html | 81 |
1 files changed, 81 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-stacking-order.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-stacking-order.html new file mode 100644 index 0000000000..897f54a53f --- /dev/null +++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-stacking-order.html @@ -0,0 +1,81 @@ +<!DOCTYPE html> +<link rel="match" href="backdrop-stacking-order-ref.html"> +<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer"> +<style> +dialog { + padding: 0px; + border: none; + margin: 0px; + outline: none; +} + +#bottom::backdrop { + top: 100px; + left: 100px; + height: 300px; + width: 300px; + background-color: rgb(0, 50, 0); + z-index: 100; /* z-index has no effect. */ +} + +#bottom { + top: 125px; + left: 125px; + height: 250px; + width: 250px; + background-color: rgb(0, 90, 0); +} + +#middle::backdrop { + top: 150px; + left: 150px; + height: 200px; + width: 200px; + background-color: rgb(0, 130, 0); + z-index: -100; /* z-index has no effect. */ +} + +#middle { + top: 175px; + left: 175px; + height: 150px; + width: 150px; + background-color: rgb(0, 170, 0); +} + +#top::backdrop { + top: 200px; + left: 200px; + height: 100px; + width: 100px; + background-color: rgb(0, 210, 0); + z-index: 0; /* z-index has no effect. */ +} + +#top { + top: 225px; + left: 225px; + height: 50px; + width: 50px; + background-color: rgb(0, 255, 0); + z-index: -1000; /* z-index has no effect. */ +} +</style> +<body> +Test for dialog::backdrop stacking order. The test passes if there are 6 +boxes enclosed in each other, becoming increasingly smaller and brighter +green. +<dialog id="top"></dialog> +<dialog id="middle"></dialog> +<dialog id="bottom"></dialog> +<script> +var topDialog = document.getElementById('top'); +var middleDialog = document.getElementById('middle'); +var bottomDialog = document.getElementById('bottom'); +topDialog.showModal(); +bottomDialog.showModal(); +topDialog.close(); // Just to shuffle the top layer order around a little. +middleDialog.showModal(); +topDialog.showModal(); +</script> +</body> |