<!DOCTYPE html>
<title>CSS Anchor Positioning: try-tactic, sizing properties</title>
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#typedef-position-try-fallbacks-try-tactic">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@position-try --pf {
left:50px;
top:50px;
min-width: 1px;
min-height: 2px;
max-width: 100px;
max-height: 200px;
}
#cb {
position: absolute;
width: 400px;
height: 400px;
border: 1px solid black;
}
#target {
position: absolute;
left: 99999px; /* force fallback */
width: 30px;
height: 40px;
background-color: skyblue;
}
</style>
<div id=cb>
<div id=target></div>
</div>
<script>
test(() => {
target.style.positionTryFallbacks = '--pf flip-block';
let cs = getComputedStyle(target);
assert_equals(cs.width, '30px');
assert_equals(cs.height, '40px');
assert_equals(cs.minWidth, '1px');
assert_equals(cs.minHeight, '2px');
assert_equals(cs.maxWidth, '100px');
assert_equals(cs.maxHeight, '200px');
}, 'flip-block does not affect sizing');
test(() => {
target.style.positionTryFallbacks = '--pf flip-inline';
let cs = getComputedStyle(target);
assert_equals(cs.width, '30px');
assert_equals(cs.height, '40px');
assert_equals(cs.minWidth, '1px');
assert_equals(cs.minHeight, '2px');
assert_equals(cs.maxWidth, '100px');
assert_equals(cs.maxHeight, '200px');
}, 'flip-inline does not affect sizing');
test(() => {
target.style.positionTryFallbacks = '--pf flip-start';
let cs = getComputedStyle(target);
assert_equals(cs.width, '40px');
assert_equals(cs.height, '30px');
assert_equals(cs.minWidth, '2px');
assert_equals(cs.minHeight, '1px');
assert_equals(cs.maxWidth, '200px');
assert_equals(cs.maxHeight, '100px');
}, 'flip-start affects sizing');
</script>
Codebase Browser
chromium