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/css/css-anchor-position/position-fallback-bounds-001.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/css/css-anchor-position/position-fallback-bounds-001.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-001.html | 82 |
1 files changed, 82 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-001.html b/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-001.html new file mode 100644 index 0000000000..7735115e59 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-001.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<title>Tests basic functionalities of 'position-fallback-bounds'</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-bounds"> +<link rel="author" href="mailto:xiaochengh@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/test-common.js"></script> + +<style> +body { + margin: 0; +} + +.container { + position: relative; + width: 400px; + height: 400px; + top: 100px; + anchor-name: --bounds; + outline: 1px dashed black; +} + +.anchor { + position: absolute; + width: 100px; + height: 100px; + left: 150px; + background-color: orange; +} + +.target { + position: fixed; + width: 100px; + height: 100px; + background-color: lime; + left: anchor(left); + position-fallback-bounds: --bounds; +} + +#anchor1 { + top: 0; + anchor-name: --a1; +} +#anchor2 { + bottom: 0; + anchor-name: --a2; +} + +#target1 { + anchor-default: --a1; + position-fallback: --top-then-bottom; +} +#target2 { + anchor-default: --a2; + position-fallback: --bottom-then-top; +} + +@position-fallback --top-then-bottom { + @try { bottom: anchor(top); } + @try { top: anchor(bottom); } +} +@position-fallback --bottom-then-top { + @try { top: anchor(bottom); } + @try { bottom: anchor(top); } +} +</style> + +<body onload="checkLayoutForAnchorPos('.target')"> + <div class="container" id="bounds"> + <div class="anchor" id="anchor1"></div> + <div class="anchor" id="anchor2"></div> + </div> + + <!-- Enough space above the anchor in the viewport but not in the additional + bounds rect, which triggers fallback --> + <div class="target" id="target1" data-offset-y=200></div> + + <!-- Enough space below the anchor in the viewport but not in the additional + bounds rect, which triggers fallback --> + <div class="target" id="target2" data-offset-y=300></div> +</body> |