diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-anchor-position/inset-area-in-position-try.html')
-rw-r--r-- | testing/web-platform/tests/css/css-anchor-position/inset-area-in-position-try.html | 188 |
1 files changed, 188 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-in-position-try.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-in-position-try.html new file mode 100644 index 0000000000..7339c4f41d --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-in-position-try.html @@ -0,0 +1,188 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: inset-area in @position-try</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: 50px; + height: 50px; + background-color: tomato; + anchor-name: --a; + } + #target { + left: 200px; /* force fallback */ + } + #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 inside-area, when used inside @position-try, works the same +// as when it's specified in the base style. +function test_inset_area_ref(inset_area) { + test((t) => { + t.add_cleanup(() => { + style.textContent = ''; + }); + style.textContent = ` + @position-try --pt { + inset: unset; /* Undo force fallback */ + inset-area: ${inset_area}; + } + #target { + position-try-options: --pt; + } + #ref { + inset-area: ${inset_area}; + } + `; + assert_true(CSS.supports('inset-area', 'top left')); + assert_true(CSS.supports('position-try-options', '--x')); + assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft'); + assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop'); + }, `${inset_area}`); +} + +test_inset_area_ref('none'); +test_inset_area_ref('span-all'); +test_inset_area_ref('span-all span-all'); +test_inset_area_ref('top left'); +test_inset_area_ref('top center'); +test_inset_area_ref('top right'); +test_inset_area_ref('center left'); +test_inset_area_ref('center center'); +test_inset_area_ref('center right'); +test_inset_area_ref('bottom left'); +test_inset_area_ref('bottom center'); +test_inset_area_ref('bottom right'); +test_inset_area_ref('start start'); +test_inset_area_ref('start center'); +test_inset_area_ref('start end'); +test_inset_area_ref('center start'); +test_inset_area_ref('center end'); +test_inset_area_ref('end start'); +test_inset_area_ref('end center'); +test_inset_area_ref('end end'); +test_inset_area_ref('self-start self-start'); +test_inset_area_ref('self-start center'); +test_inset_area_ref('self-start self-end'); +test_inset_area_ref('center self-start'); +test_inset_area_ref('center self-end'); +test_inset_area_ref('self-end self-start'); +test_inset_area_ref('self-end center'); +test_inset_area_ref('self-end self-end'); +test_inset_area_ref('y-start x-start'); +test_inset_area_ref('y-start center'); +test_inset_area_ref('y-start x-end'); +test_inset_area_ref('center x-start'); +test_inset_area_ref('center x-end'); +test_inset_area_ref('y-end x-start'); +test_inset_area_ref('y-end center'); +test_inset_area_ref('y-end x-end'); +test_inset_area_ref('y-self-start x-self-start'); +test_inset_area_ref('y-self-start center'); +test_inset_area_ref('y-self-start x-self-end'); +test_inset_area_ref('center x-self-start'); +test_inset_area_ref('center x-self-end'); +test_inset_area_ref('y-self-end x-self-start'); +test_inset_area_ref('y-self-end center'); +test_inset_area_ref('y-self-end x-self-end'); +test_inset_area_ref('span-y-self-start span-x-self-end'); +test_inset_area_ref('span-bottom span-all'); + +</script> + +<style> + @position-try --top { + inset: unset; /* Undo force fallback */ + inset-area: top; + } + @position-try --right { + inset: unset; /* Undo force fallback */ + inset-area: right; + } + @position-try --bottom { + inset: unset; /* Undo force fallback */ + inset-area: bottom; + } + @position-try --left { + inset: unset; /* Undo force fallback */ + inset-area: left; + } +</style> +<script> + +// Test that an element with the specified position-try-options is placed +// at the same position as a reference element with inset-area:`expected`. +// This test uses #target/#ref size of 60x60px, which causes overflow if +// if we attempt the --right and --bottom positions. +function test_inset_area_placement(position_try_options, expected) { + test((t) => { + style.textContent = ` + #target, #ref { + width: 60px; + height: 60px; + } + #target { + position-try-options: ${position_try_options}; + } + #ref { + inset-area: ${expected}; + } + `; + assert_true(CSS.supports('inset-area', 'top left')); + assert_true(CSS.supports('position-try-options', '--x')); + assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft'); + assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop'); + }, `Placement: ${position_try_options}`); +} + +test_inset_area_placement('--top', 'top'); +test_inset_area_placement('--left', 'left'); + +// No space to to the right/bottom: +test_inset_area_placement('--right, --top', 'top'); +test_inset_area_placement('--bottom, --top', 'top'); +test_inset_area_placement('--bottom, --right, --top', 'top'); +test_inset_area_placement('--bottom, --right, --left, --top', 'left'); +test_inset_area_placement('--bottom, --left, --top, --right', 'left'); + +// Flipping: +test_inset_area_placement('--right flip-inline', 'left'); +test_inset_area_placement('--bottom flip-block', 'top'); +test_inset_area_placement('--left flip-start', 'top'); + +// left + flip-inline => right (no space). +test_inset_area_placement('--left flip-inline, --top', 'top'); +// top + flip-block => bottom (no space). +test_inset_area_placement('--top flip-block, --left', 'left'); +// left + flip-start flip-block => bottom (no space). +test_inset_area_placement('--left flip-start flip-block, --left', 'left'); + +</script> |