diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-anchor-position/position-try-order-inset-area.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-anchor-position/position-try-order-inset-area.html | 196 |
1 files changed, 196 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-try-order-inset-area.html b/testing/web-platform/tests/css/css-anchor-position/position-try-order-inset-area.html new file mode 100644 index 0000000000..98e606a7d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-try-order-inset-area.html @@ -0,0 +1,196 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: position-try-order behavior with inset-area</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-try-order-property"> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#inset-area"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<!-- + Note: This test is the inset-area version of position-try-order-basic.html. +--> +<style> + #cb { + position: absolute; + width: 400px; + height: 400px; + border: 1px solid black; + } + #anchor { + position: absolute; + left: 150px; + top: 200px; + width: 150px; + height: 150px; + background-color: coral; + anchor-name: --a; + } + #target, #ref { + position: absolute; + left: 450px; /* force fallback */ + width: 40px; + height: 40px; + background-color: skyblue; + position-anchor: --a; + /* Note: align/justify is for cosmetic/debugging reasons only, + it should not have any effect on the result. */ + align-self: start; + justify-self: start; + } + #ref { + background-color: seagreen; + } + +/* + +The IMCB for --right is the whole area to the right of the anchor, and similarly +for --left, etc. + + ┌──────────────┐ + │ xxxx│ + │ xxxx│ + │ ┌────┐xxxx│ + │ │ │xxxx│ + │ └────┘xxxx│ + │ xxxx│ + │ xxxx│ + └──────────────┘ + +**/ + + @position-try --right { + inset: unset; + inset-area: right; + } + @position-try --left { + inset: unset; + inset-area: left; + } + @position-try --top { + inset: unset; + inset-area: top; + } + @position-try --bottom { + inset: unset; + inset-area: bottom; + } + +/* + +The IMCB for --right-sweep is the area that would be "swept" by the anchor if it +moved right, and similarly for --left-sweep, etc. + + ┌──────────────┐ + │ │ + │ │ + │ ┌────┐xxxx│ + │ │ │xxxx│ + │ └────┘xxxx│ + │ │ + │ │ + └──────────────┘ + +*/ + + @position-try --right-sweep { + inset: unset; + inset-area: right center; + } + + @position-try --left-sweep { + inset: unset; + inset-area: left center; + } + + @position-try --bottom-sweep { + inset: unset; + inset-area: bottom center; + } + + @position-try --top-sweep { + inset: unset; + inset-area: top center; + } + +</style> +<style id=style> +</style> +<div id=cb> + <div id=anchor></div> + <div id=target></div> + <div id=ref></div> +</div> +<script> + +// Test that an element with the specified `position_try` gets the same +// position as a reference element with `position_try_expected`. +function test_inset_area_order(position_try, position_try_expected) { + test((t) => { + style.textContent = ` + #target { + position-try: ${position_try}; + } + #ref { + position-try: ${position_try_expected}; + } + `; + assert_true(CSS.supports('position-try', 'normal --x')); + assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft'); + assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop'); + }, `${position_try} | ${position_try_expected}`); +} + +// Note: --right, --left, --top, and --bottom all fit, but have different +// inset-modifed containing blocks. + +test_inset_area_order('--right', '--right'); +test_inset_area_order('--left', '--left'); +test_inset_area_order('--top', '--top'); +test_inset_area_order('--bottom', '--bottom'); + +// position-try-order:normal just picks the first option. +test_inset_area_order('--right, --left, --bottom, --top', '--right'); +test_inset_area_order('normal --right, --left, --bottom, --top', '--right'); +test_inset_area_order('normal --top, --left, --bottom, --right', '--top'); + +// --right and --left have the same IMCB block-size. +test_inset_area_order('most-block-size --right, --left', '--right'); +test_inset_area_order('most-height --right, --left', '--right'); +// --left has more inline-size than --right. +test_inset_area_order('most-inline-size --right, --left', '--left'); +test_inset_area_order('most-width --right, --left', '--left'); + +// --bottom and --top have the same IMCB inline-size. +test_inset_area_order('most-inline-size --bottom, --top', '--bottom'); +test_inset_area_order('most-width --bottom, --top', '--bottom'); +// --top has more block-size than --bottom. +test_inset_area_order('most-block-size --bottom, --top', '--top'); +test_inset_area_order('most-height --bottom, --top', '--top'); + +// --bottom/--top has more IMBC inline-size than --right/--left. +test_inset_area_order('most-inline-size --right, --left, --bottom, --top', '--bottom'); +test_inset_area_order('most-inline-size --right, --left, --top, --bottom', '--top'); + +// --right/--left has more IMBC block-size than --bottom/--top. +test_inset_area_order('most-block-size --bottom, --top, --right, --left', '--right'); +test_inset_area_order('most-block-size --bottom, --top, --left, --right', '--left'); + +// --left-sweep and --bottom-sweep has the same IMBC inline-size ... +test_inset_area_order('most-inline-size --left-sweep, --bottom-sweep', '--left-sweep'); +test_inset_area_order('most-inline-size --bottom-sweep, --left-sweep', '--bottom-sweep'); +// ... but not the same block-size. +test_inset_area_order('most-block-size --left-sweep, --bottom-sweep', '--left-sweep'); +test_inset_area_order('most-block-size --bottom-sweep, --left-sweep', '--left-sweep'); + +test_inset_area_order('most-inline-size --right-sweep, --left-sweep, --bottom-sweep, --top-sweep', '--left-sweep'); +test_inset_area_order('most-block-size --right-sweep, --left-sweep, --bottom-sweep, --top-sweep', '--top-sweep'); + +test_inset_area_order(`most-inline-size + --right-sweep, --left-sweep, --bottom-sweep, --top-sweep, + --right, --left, --bottom, --top + `, '--left-sweep'); + +test_inset_area_order(`most-block-size + --right-sweep, --left-sweep, --bottom-sweep, --top-sweep, + --right, --left, --bottom, --top + `, '--right'); + +</script> |