diff options
Diffstat (limited to 'testing/web-platform/tests/html/semantics/popovers/popover-stacking-context.html')
| -rw-r--r-- | testing/web-platform/tests/html/semantics/popovers/popover-stacking-context.html | 35 |
1 files changed, 35 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/popovers/popover-stacking-context.html b/testing/web-platform/tests/html/semantics/popovers/popover-stacking-context.html new file mode 100644 index 0000000000..ba4e85a897 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/popovers/popover-stacking-context.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" href="mailto:masonf@chromium.org"> +<link rel=help href="https://open-ui.org/components/popover.research.explainer"> +<link rel=help href="https://html.spec.whatwg.org/multipage/popover.html"> +<link rel=match href="popover-stacking-context-ref.html"> + +<div popover> + Inside popover + <div class=z style="z-index: 2; background:lightgreen">z-index 2 + <div class=z style="z-index: 3; background:lightblue; left: 20px;">z-index 3</div> + <div class=z style="z-index: 1; background:pink; top:-20px; left: 10px;">z-index 1</div> + </div> + <div class=z style="background:green; top:-100px; left: 250px; width: 100px;">Outside</div> + Bottom of popover +</div> + +<style> + [popover] { + width: 200px; + height: 230px; + border: 1px solid red; + top:50px; + left:50px; + } + .z { + position: relative; + border: 1px solid black; + padding: 1em; + } +</style> + +<script> + document.querySelector('[popover]').showPopover(); +</script> |