forked from mirrors/gecko-dev
29218a924f
Automatic update from web-platform-tests [anchor] Generate flips using the try-tactics layer Previous CLs (CL:5349527 and preceding) established a way for an internal CSSPropertyValueSet (containing CSSFlipRevertValues) to be added at the "try tactics layer" in the cascade. This made it possible to carry out the various "flips" required by CSS Anchor Positioning, even with interleaving anchor() implemented (crbug.com/41483417). This CL uses the value specified in the position-try-options property to generate those value-flipping CSSPropertyValueSets, and adds them to the cascade. For now, the flips only apply to insets and sizing properties. Additionally, values are not yet rewritten during the flip (e.g. anchor(left) to anchor(right), etc). This behavior will be added separately. Bug: 40279608 Change-Id: Iab85e96e343df1f4527a51e60e10154b4c938ee1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5366066 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org> Cr-Commit-Position: refs/heads/main@{#1272096} -- wpt-commits: 553237c261edc45158baefdc05f4509b21a2fa98 wpt-pr: 45071
69 lines
2.8 KiB
HTML
69 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSS Anchor Positioning: try-tactic</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#typedef-position-try-options-try-tactic">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
@position-try --pf {
|
|
left:10px;
|
|
top:20px;
|
|
}
|
|
#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>
|
|
function test_try_tactic(try_tactic, expected_offsets) {
|
|
target.style.positionTryOptions = `--pf ${try_tactic}`;
|
|
test(() => {
|
|
assert_equals(target.offsetLeft, expected_offsets.left, 'offsetLeft');
|
|
assert_equals(target.offsetTop, expected_offsets.top, 'offsetTop');
|
|
assert_equals(target.offsetWidth, expected_offsets.width, 'offsetWidth');
|
|
assert_equals(target.offsetHeight, expected_offsets.height, 'offsetHeight');
|
|
}, target.style.positionTryOptions);
|
|
}
|
|
|
|
test_try_tactic('', {left:10, top:20, width:30, height:40});
|
|
|
|
// bottom:20px
|
|
test_try_tactic('flip-block', {left:10, top:340, width:30, height:40});
|
|
|
|
// right:10px
|
|
test_try_tactic('flip-inline', {left:360, top:20, width:30, height:40});
|
|
|
|
// right:10px; bottom:20px
|
|
test_try_tactic('flip-block flip-inline', {left:360, top:340, width:30, height:40});
|
|
test_try_tactic('flip-inline flip-block', {left:360, top:340, width:30, height:40});
|
|
|
|
// left:20px; top:10px; width:40px; height:30px
|
|
test_try_tactic('flip-start', {left:20, top:10, width:40, height:30});
|
|
test_try_tactic('flip-block flip-start flip-inline', {left:20, top:10, width:40, height:30});
|
|
test_try_tactic('flip-inline flip-start flip-block', {left:20, top:10, width:40, height:30});
|
|
|
|
// left:20px; bottom:10px; width:40px; height:30px
|
|
test_try_tactic('flip-start flip-block', {left:20, top:360, width:40, height:30});
|
|
test_try_tactic('flip-inline flip-start', {left:20, top:360, width:40, height:30});
|
|
|
|
// right:20px; top:10px; width:40px; height:30px
|
|
test_try_tactic('flip-start flip-inline', {left:340, top:10, width:40, height:30});
|
|
test_try_tactic('flip-block flip-start', {left:340, top:10, width:40, height:30});
|
|
|
|
// right:20px; bottom:10px; width:40px; height:30px
|
|
test_try_tactic('flip-start flip-block flip-inline', {left:340, top:360, width:40, height:30});
|
|
test_try_tactic('flip-start flip-inline flip-block', {left:340, top:360, width:40, height:30});
|
|
test_try_tactic('flip-inline flip-block flip-start', {left:340, top:360, width:40, height:30});
|
|
test_try_tactic('flip-block flip-inline flip-start', {left:340, top:360, width:40, height:30});
|
|
</script>
|