diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-anchor-position/inset-area-function.html')
-rw-r--r-- | testing/web-platform/tests/css/css-anchor-position/inset-area-function.html | 71 |
1 files changed, 71 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-function.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-function.html new file mode 100644 index 0000000000..9d68bf9ddf --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-function.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: inset-area()</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-try-options"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #cb { + position: relative; + width: 200px; + height: 200px; + border: 1px solid black; + } + #anchor { + position: absolute; + left: 100px; + top: 100px; + width: 80px; + height: 80px; + background-color: tomato; + anchor-name: --a; + } + #target, #ref { + position: absolute; + width: 40px; + height: 40px; + background-color: skyblue; + inset-area: bottom right; + position-anchor: --a; + } + #ref { + background-color: seagreen; + } +</style> +<style id=style> +</style> +<div id=cb> + <div id=anchor></div> + <div id=target></div> + <div id=ref></div> +</div> +<script> + +// Test that a given inset-area() produces the same result as a reference +// element that is styled with an inset-area declaration directly. +function test_inset_area_fn(inset_area_function, inset_area_expected) { + test((t) => { + t.add_cleanup(() => { + style.textContent = ''; + }); + style.textContent = ` + #target { + position-try-options: ${inset_area_function}; + } + #ref { + inset-area: ${inset_area_expected}; + } + `; + assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft'); + assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop'); + }, `${inset_area_function}, ${inset_area_expected}`); +} + +test_inset_area_fn('inset-area(top left)', 'top left'); +test_inset_area_fn('inset-area(span-top left)', 'span-top left'); +test_inset_area_fn('inset-area(top span-left)', 'top span-left'); +test_inset_area_fn('inset-area(top center)', 'top center'); +test_inset_area_fn('inset-area(left center)', 'left center'); +test_inset_area_fn('inset-area(start center)', 'start center'); +test_inset_area_fn('inset-area(center start)', 'center start'); + +</script> |