Skip to content

Commit 553237c

Browse files
andruudchromium-wpt-export-bot
andruud
authored and
chromium-wpt-export-bot
committed
[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 <[email protected]> Commit-Queue: Anders Hartvoll Ruud <[email protected]> Cr-Commit-Position: refs/heads/main@{#1272096}
1 parent 21794e0 commit 553237c

File tree

3 files changed

+170
-0
lines changed

3 files changed

+170
-0
lines changed

‎css/css-anchor-position/try-tactic-base.html

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<title>CSS Anchor Positioning: try-tactic, base values</title>
3+
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#typedef-position-try-options-try-tactic">
4+
<script src="/resources/testharness.js"></script>
5+
<script src="/resources/testharnessreport.js"></script>
6+
<style>
7+
#cb {
8+
position: absolute;
9+
width: 400px;
10+
height: 200px;
11+
border: 1px solid black;
12+
}
13+
#target {
14+
position: absolute;
15+
/* Does not fit initially */
16+
width: 150px;
17+
height: 300px;
18+
border: 3px solid skyblue;
19+
}
20+
</style>
21+
<div id=cb>
22+
<div id=target></div>
23+
</div>
24+
<script>
25+
test(() => {
26+
let cs = getComputedStyle(target);
27+
assert_equals(cs.width, '150px');
28+
assert_equals(cs.height, '300px');
29+
30+
target.style.positionTryOptions = 'flip-start';
31+
32+
assert_equals(cs.width, '300px');
33+
assert_equals(cs.height, '150px');
34+
}, 'flip-start affects base values');
35+
</script>

‎css/css-anchor-position/try-tactic-basic.html

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<title>CSS Anchor Positioning: try-tactic</title>
3+
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#typedef-position-try-options-try-tactic">
4+
<script src="/resources/testharness.js"></script>
5+
<script src="/resources/testharnessreport.js"></script>
6+
<style>
7+
@position-try --pf {
8+
left:10px;
9+
top:20px;
10+
}
11+
#cb {
12+
position: absolute;
13+
width: 400px;
14+
height: 400px;
15+
border: 1px solid black;
16+
}
17+
#target {
18+
position: absolute;
19+
left: 99999px; /* force fallback */
20+
width: 30px;
21+
height: 40px;
22+
background-color: skyblue;
23+
}
24+
</style>
25+
<div id=cb>
26+
<div id=target></div>
27+
</div>
28+
<script>
29+
function test_try_tactic(try_tactic, expected_offsets) {
30+
target.style.positionTryOptions = `--pf ${try_tactic}`;
31+
test(() => {
32+
assert_equals(target.offsetLeft, expected_offsets.left, 'offsetLeft');
33+
assert_equals(target.offsetTop, expected_offsets.top, 'offsetTop');
34+
assert_equals(target.offsetWidth, expected_offsets.width, 'offsetWidth');
35+
assert_equals(target.offsetHeight, expected_offsets.height, 'offsetHeight');
36+
}, target.style.positionTryOptions);
37+
}
38+
39+
test_try_tactic('', {left:10, top:20, width:30, height:40});
40+
41+
// bottom:20px
42+
test_try_tactic('flip-block', {left:10, top:340, width:30, height:40});
43+
44+
// right:10px
45+
test_try_tactic('flip-inline', {left:360, top:20, width:30, height:40});
46+
47+
// right:10px; bottom:20px
48+
test_try_tactic('flip-block flip-inline', {left:360, top:340, width:30, height:40});
49+
test_try_tactic('flip-inline flip-block', {left:360, top:340, width:30, height:40});
50+
51+
// left:20px; top:10px; width:40px; height:30px
52+
test_try_tactic('flip-start', {left:20, top:10, width:40, height:30});
53+
test_try_tactic('flip-block flip-start flip-inline', {left:20, top:10, width:40, height:30});
54+
test_try_tactic('flip-inline flip-start flip-block', {left:20, top:10, width:40, height:30});
55+
56+
// left:20px; bottom:10px; width:40px; height:30px
57+
test_try_tactic('flip-start flip-block', {left:20, top:360, width:40, height:30});
58+
test_try_tactic('flip-inline flip-start', {left:20, top:360, width:40, height:30});
59+
60+
// right:20px; top:10px; width:40px; height:30px
61+
test_try_tactic('flip-start flip-inline', {left:340, top:10, width:40, height:30});
62+
test_try_tactic('flip-block flip-start', {left:340, top:10, width:40, height:30});
63+
64+
// right:20px; bottom:10px; width:40px; height:30px
65+
test_try_tactic('flip-start flip-block flip-inline', {left:340, top:360, width:40, height:30});
66+
test_try_tactic('flip-start flip-inline flip-block', {left:340, top:360, width:40, height:30});
67+
test_try_tactic('flip-inline flip-block flip-start', {left:340, top:360, width:40, height:30});
68+
test_try_tactic('flip-block flip-inline flip-start', {left:340, top:360, width:40, height:30});
69+
</script>

‎css/css-anchor-position/try-tactic-sizing.html

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<title>CSS Anchor Positioning: try-tactic, sizing properties</title>
3+
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#typedef-position-try-options-try-tactic">
4+
<script src="/resources/testharness.js"></script>
5+
<script src="/resources/testharnessreport.js"></script>
6+
<style>
7+
@position-try --pf {
8+
left:50px;
9+
top:50px;
10+
11+
min-width: 1px;
12+
min-height: 2px;
13+
max-width: 100px;
14+
max-height: 200px;
15+
}
16+
#cb {
17+
position: absolute;
18+
width: 400px;
19+
height: 400px;
20+
border: 1px solid black;
21+
}
22+
#target {
23+
position: absolute;
24+
left: 99999px; /* force fallback */
25+
width: 30px;
26+
height: 40px;
27+
background-color: skyblue;
28+
}
29+
</style>
30+
<div id=cb>
31+
<div id=target></div>
32+
</div>
33+
<script>
34+
test(() => {
35+
target.style.positionTryOptions = '--pf flip-block';
36+
let cs = getComputedStyle(target);
37+
assert_equals(cs.width, '30px');
38+
assert_equals(cs.height, '40px');
39+
assert_equals(cs.minWidth, '1px');
40+
assert_equals(cs.minHeight, '2px');
41+
assert_equals(cs.maxWidth, '100px');
42+
assert_equals(cs.maxHeight, '200px');
43+
}, 'flip-block does not affect sizing');
44+
45+
test(() => {
46+
target.style.positionTryOptions = '--pf flip-inline';
47+
let cs = getComputedStyle(target);
48+
assert_equals(cs.width, '30px');
49+
assert_equals(cs.height, '40px');
50+
assert_equals(cs.minWidth, '1px');
51+
assert_equals(cs.minHeight, '2px');
52+
assert_equals(cs.maxWidth, '100px');
53+
assert_equals(cs.maxHeight, '200px');
54+
}, 'flip-inline does not affect sizing');
55+
56+
test(() => {
57+
target.style.positionTryOptions = '--pf flip-start';
58+
let cs = getComputedStyle(target);
59+
assert_equals(cs.width, '40px');
60+
assert_equals(cs.height, '30px');
61+
assert_equals(cs.minWidth, '2px');
62+
assert_equals(cs.minHeight, '1px');
63+
assert_equals(cs.maxWidth, '200px');
64+
assert_equals(cs.maxHeight, '100px');
65+
}, 'flip-start affects sizing');
66+
</script>

0 commit comments

Comments
 (0)