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/inset-area-basic.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/inset-area-basic.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-anchor-position/inset-area-basic.html | 121 |
1 files changed, 121 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-basic.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-basic.html new file mode 100644 index 0000000000..4a63635558 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-basic.html @@ -0,0 +1,121 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: basic inset-area positioning</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#inset-area"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<!-- The grid: + + 100 150 150 + +--------+--------+--------+ + | | | | + 150 | | | | + | | | | + +--------+--------+--------+ + | | | | + 75 | | | | + | | | | + +--------+--------+--------+ + | | | | + 175 | | | | + | | | | + +--------+--------+--------+ + + --> +<style> + #container { + position: absolute; + width: 400px; + height: 400px; + } + #anchored { + position: absolute; + align-self: stretch; + justify-self: stretch; + anchor-default: --anchor; + } + #anchor { + margin-top: 150px; + margin-left: 100px; + width: 150px; + height: 75px; + anchor-name: --anchor; + } +</style> +<div id="container"> + <div id="anchored"></div> + <div id="anchor"></div> +</div> +<script> + function test_inset_area(inset_area, expected_offsets) { + anchored.style.insetArea = inset_area; + test(() => { + assert_equals(anchored.offsetLeft, expected_offsets.left); + assert_equals(anchored.offsetTop, expected_offsets.top); + assert_equals(anchored.offsetWidth, expected_offsets.width); + assert_equals(anchored.offsetHeight, expected_offsets.height); + }, "Offsets for: " + inset_area); + } + + test_inset_area("none", {left:0, top:0, width:0, height:0}); + test_inset_area("all", {left:0, top:0, width:400, height:400}); + test_inset_area("all / all", {left:0, top:0, width:400, height:400}); + + // Single region spans + test_inset_area("top / left", {left:0, top:0, width:100, height:150}); + test_inset_area("top / center", {left:100, top:0, width:150, height:150}); + test_inset_area("top / right", {left:250, top:0, width:150, height:150}); + test_inset_area("center / left", {left:0, top:150, width:100, height:75}); + test_inset_area("center / center", {left:100, top:150, width:150, height:75}); + test_inset_area("center / right", {left:250, top:150, width:150, height:75}); + test_inset_area("bottom / left", {left:0, top:225, width:100, height:175}); + test_inset_area("bottom / center", {left:100, top:225, width:150, height:175}); + test_inset_area("bottom / right", {left:250, top:225, width:150, height:175}); + + test_inset_area("start / start", {left:0, top:0, width:100, height:150}); + test_inset_area("start / center", {left:100, top:0, width:150, height:150}); + test_inset_area("start / end", {left:250, top:0, width:150, height:150}); + test_inset_area("center / start", {left:0, top:150, width:100, height:75}); + test_inset_area("center / end", {left:250, top:150, width:150, height:75}); + test_inset_area("end / start", {left:0, top:225, width:100, height:175}); + test_inset_area("end / center", {left:100, top:225, width:150, height:175}); + test_inset_area("end / end", {left:250, top:225, width:150, height:175}); + + test_inset_area("self-start / self-start", {left:0, top:0, width:100, height:150}); + test_inset_area("self-start / center", {left:100, top:0, width:150, height:150}); + test_inset_area("self-start / self-end", {left:250, top:0, width:150, height:150}); + test_inset_area("center / self-start", {left:0, top:150, width:100, height:75}); + test_inset_area("center / self-end", {left:250, top:150, width:150, height:75}); + test_inset_area("self-end / self-start", {left:0, top:225, width:100, height:175}); + test_inset_area("self-end / center", {left:100, top:225, width:150, height:175}); + test_inset_area("self-end / self-end", {left:250, top:225, width:150, height:175}); + + test_inset_area("y-start / x-start", {left:0, top:0, width:100, height:150}); + test_inset_area("y-start / center", {left:100, top:0, width:150, height:150}); + test_inset_area("y-start / x-end", {left:250, top:0, width:150, height:150}); + test_inset_area("center / x-start", {left:0, top:150, width:100, height:75}); + test_inset_area("center / x-end", {left:250, top:150, width:150, height:75}); + test_inset_area("y-end / x-start", {left:0, top:225, width:100, height:175}); + test_inset_area("y-end / center", {left:100, top:225, width:150, height:175}); + test_inset_area("y-end / x-end", {left:250, top:225, width:150, height:175}); + + test_inset_area("y-self-start / x-self-start", {left:0, top:0, width:100, height:150}); + test_inset_area("y-self-start / center", {left:100, top:0, width:150, height:150}); + test_inset_area("y-self-start / x-self-end", {left:250, top:0, width:150, height:150}); + test_inset_area("center / x-self-start", {left:0, top:150, width:100, height:75}); + test_inset_area("center / x-self-end", {left:250, top:150, width:150, height:75}); + test_inset_area("y-self-end / x-self-start", {left:0, top:225, width:100, height:175}); + test_inset_area("y-self-end / center", {left:100, top:225, width:150, height:175}); + test_inset_area("y-self-end / x-self-end", {left:250, top:225, width:150, height:175}); + + // Multi-region spans + test_inset_area("y-self-start center / self-end center", {left:100, top:0, width:300, height:225}); + test_inset_area("bottom center / x-start x-end", {left:0, top:150, width:400, height:250}); + + // Non-orthogonal axes. + test_inset_area("x-start / left", {left:0, top:0, width:0, height:0}); + test_inset_area("y-end / y-self-start", {left:0, top:0, width:0, height:0}); + + // No implicit anchor means the inset-area should not apply. + anchored.style.anchorDefault = "implicit"; + test_inset_area("all / top", {left:0, top:0, width:0, height:0}); +</script> |