<!DOCTYPE html>
<title>CSS Anchor Positioning: position-try-order behavior with position-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/#position-area">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!--
Note: This test is the position-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;
position-area: right;
}
@position-try --left {
inset: unset;
position-area: left;
}
@position-try --top {
inset: unset;
position-area: top;
}
@position-try --bottom {
inset: unset;
position-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;
position-area: right center;
}
@position-try --left-sweep {
inset: unset;
position-area: left center;
}
@position-try --bottom-sweep {
inset: unset;
position-area: bottom center;
}
@position-try --top-sweep {
inset: unset;
position-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_position_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_position_area_order('--right', '--right');
test_position_area_order('--left', '--left');
test_position_area_order('--top', '--top');
test_position_area_order('--bottom', '--bottom');
// position-try-order:normal just picks the first fallback.
test_position_area_order('--right, --left, --bottom, --top', '--right');
test_position_area_order('normal --right, --left, --bottom, --top', '--right');
test_position_area_order('normal --top, --left, --bottom, --right', '--top');
// --right and --left have the same IMCB block-size.
test_position_area_order('most-block-size --right, --left', '--right');
test_position_area_order('most-height --right, --left', '--right');
// --left has more inline-size than --right.
test_position_area_order('most-inline-size --right, --left', '--left');
test_position_area_order('most-width --right, --left', '--left');
// --bottom and --top have the same IMCB inline-size.
test_position_area_order('most-inline-size --bottom, --top', '--bottom');
test_position_area_order('most-width --bottom, --top', '--bottom');
// --top has more block-size than --bottom.
test_position_area_order('most-block-size --bottom, --top', '--top');
test_position_area_order('most-height --bottom, --top', '--top');
// --bottom/--top has more IMBC inline-size than --right/--left.
test_position_area_order('most-inline-size --right, --left, --bottom, --top', '--bottom');
test_position_area_order('most-inline-size --right, --left, --top, --bottom', '--top');
// --right/--left has more IMBC block-size than --bottom/--top.
test_position_area_order('most-block-size --bottom, --top, --right, --left', '--right');
test_position_area_order('most-block-size --bottom, --top, --left, --right', '--left');
// --left-sweep and --bottom-sweep has the same IMBC inline-size ...
test_position_area_order('most-inline-size --left-sweep, --bottom-sweep', '--left-sweep');
test_position_area_order('most-inline-size --bottom-sweep, --left-sweep', '--bottom-sweep');
// ... but not the same block-size.
test_position_area_order('most-block-size --left-sweep, --bottom-sweep', '--left-sweep');
test_position_area_order('most-block-size --bottom-sweep, --left-sweep', '--left-sweep');
test_position_area_order('most-inline-size --right-sweep, --left-sweep, --bottom-sweep, --top-sweep', '--left-sweep');
test_position_area_order('most-block-size --right-sweep, --left-sweep, --bottom-sweep, --top-sweep', '--top-sweep');
test_position_area_order(`most-inline-size
--right-sweep, --left-sweep, --bottom-sweep, --top-sweep,
--right, --left, --bottom, --top
`, '--left-sweep');
test_position_area_order(`most-block-size
--right-sweep, --left-sweep, --bottom-sweep, --top-sweep,
--right, --left, --bottom, --top
`, '--right');
</script>
Codebase Browser
chromium