66 lines
1.9 KiB
HTML
66 lines
1.9 KiB
HTML
<!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>
|