diff options
Diffstat (limited to 'testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-nesting-ref.html')
| -rw-r--r-- | testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-nesting-ref.html | 26 |
1 files changed, 26 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-nesting-ref.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-nesting-ref.html new file mode 100644 index 0000000000..0a2936abbe --- /dev/null +++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-nesting-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<style> +.pseudodialog { + height: 150px; + width: 150px; + position: absolute; + top: 0; right: 0; bottom: 0; left: 0; + margin: auto; + border: solid; + padding: 1em; + background: white; + color: black; +} +</style> +</head> +<body> +This tests that top layer elements are stacked correctly even if nested in the DOM tree. +The test passes if you see no red rectangles and see 3 rectangles stacked in the following order (from bottom to top): yellow, blue, green. + +<div class="pseudodialog" style="top: 100px; background-color: yellow"></div> +<div class="pseudodialog" style="top: 150px; left: 50px; background-color: blue"></div> +<div class="pseudodialog" style="top: 200px; left: 100px; background-color: green"></div> +</body> +</html> |