Skip to content

Commit 3adfcf1

Browse files
fantasaifantasai
committed
position-area normal alignment with single auto inset aligns towards opposite side
https://bugs.webkit.org/show_bug.cgi?id=301406 rdar://163317238 Reviewed by NOBODY (OOPS!). Updates PositionedLayoutConstraints::resolvePosition() to unsafe-align to the non-auto inset when only one inset is auto. See: https://www.w3.org/TR/css-anchor-position/#position-area w3c/csswg-drafts#12512 Tests: imported/w3c/web-platform-tests/css/css-anchor-position/position-area-alignment-inset-001-ref.html imported/w3c/web-platform-tests/css/css-anchor-position/position-area-alignment-inset-001.html * LayoutTests/imported/w3c/web-platform-tests/css/css-anchor-position/position-area-alignment-inset-001-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-anchor-position/position-area-alignment-inset-001-ref.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-anchor-position/position-area-alignment-inset-001.html: Added. Add new tests. See web-platform-tests/wpt#55722 * LayoutTests/imported/w3c/web-platform-tests/css/css-anchor-position/position-visibility-anchors-valid.tentative.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-in-document.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-in.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-anchor-position/position-visibility-anchors-visible-chained-004.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-anchor-position/position-visibility-anchors-visible-change-anchor.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-anchor-position/position-visibility-anchors-visible-change-css-visibility.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-anchor-position/position-visibility-anchors-visible-in-overflow-expected.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-anchor-position/position-visibility-anchors-visible-in-overflow-ref.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-anchor-position/position-visibility-anchors-visible-in-overflow.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-anchor-position/position-visibility-anchors-visible-with-position.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-anchor-position/position-visibility-remove-anchors-visible.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-anchor-position/position-visibility-remove-no-overflow.html: Modify existing tests that (unnecessarily) assumed the previous behavior. See web-platform-tests/wpt#55722 * Source/WebCore/rendering/PositionedLayoutConstraints.cpp: (WebCore::PositionedLayoutConstraints::captureInsets): Don't overwrite auto insets in our capture. (WebCore::PositionedLayoutConstraints::resolvePosition const): Check for position-area etc. directly in resolvePosition() instead. (WebCore::PositionedLayoutConstraints::insetFitsContent const): * Source/WebCore/rendering/PositionedLayoutConstraints.h: * Source/WebCore/rendering/RenderBox.cpp: (WebCore::RenderBox::computeOutOfFlowPositionedLogicalWidthUsing const): (WebCore::RenderBox::computeOutOfFlowPositionedLogicalHeightUsing const): Update sizing code to not rely on insetBefore/After().isAuto(). * Source/WebCore/rendering/style/StyleSelfAlignmentData.h: (WebCore::StyleSelfAlignmentData::isNormal const): Add convenience method.
1 parent 7fc789a commit 3adfcf1

19 files changed

+345
-55
lines changed

‎LayoutTests/imported/w3c/web-platform-tests/css/css-anchor-position/position-area-alignment-inset-001-expected.html‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<!DOCTYPE html>
2+
<title>position-area normal alignment vs insets</title>
3+
<link rel="help" href="https://www.w3.org/TR/css-anchor-position/#position-area-alignment">
4+
<meta name="assert" content="Test passes if normal alignment aligns towards the non-auto inset.">
5+
<style>
6+
.container {
7+
position: relative;
8+
width: 100px;
9+
height: 120px;
10+
border: solid;
11+
margin: 1em;
12+
float: left;
13+
}
14+
.anchor {
15+
border: solid blue 10px;
16+
inset: 0;
17+
place-self: center;
18+
position: absolute;
19+
}
20+
.test {
21+
border: solid 5px;
22+
position: absolute;
23+
width: 0;
24+
height: 0;
25+
}
26+
.inset1 {
27+
margin-bottom: auto;
28+
margin-left: auto;
29+
border-color: orange;
30+
}
31+
.inset2 {
32+
margin-top: auto;
33+
margin-right: auto;
34+
border-color: teal;
35+
}
36+
.center {
37+
margin: auto;
38+
border-color: aqua;
39+
}
40+
</style>
41+
42+
<div class="container">
43+
<div class="anchor"></div>
44+
<div class="test inset1" style="inset: 0 60px 70px 0"></div>
45+
<div class="test center" style="inset: 0 60px 70px 0"></div>
46+
<div class="test inset2" style="inset: 0 60px 70px 0"></div>
47+
48+
<div class="test inset1" style="inset: 70px 0 0 60px"></div>
49+
<div class="test center" style="inset: 70px 0 0 60px"></div>
50+
<div class="test inset2" style="inset: 70px 0 0 60px"></div>
51+
52+
<div class="test inset1" style="inset: 50px 40px 50px 40px"></div>
53+
<div class="test center" style="inset: 50px 40px 50px 40px"></div>
54+
<div class="test inset2" style="inset: 50px 40px 50px 40px"></div>
55+
</div>
56+
57+
<div class="container">
58+
<div class="anchor"></div>
59+
<div class="test inset1" style="inset: 0 0 70px"></div>
60+
<div class="test center" style="inset: 0 0 70px"></div>
61+
<div class="test inset2" style="inset: 0 0 70px"></div>
62+
63+
<div class="test inset1" style="inset: 70px 0 0"></div>
64+
<div class="test center" style="inset: 70px 0 0"></div>
65+
<div class="test inset2" style="inset: 70px 0 0"></div>
66+
67+
<div class="test inset1" style="inset: 50px 0"></div>
68+
<div class="test center" style="inset: 50px 0"></div>
69+
<div class="test inset2" style="inset: 50px 0"></div>
70+
</div>
71+
72+
73+
<div class="container" style="writing-mode: vertical-rl">
74+
<div class="anchor"></div>
75+
<div class="test inset1" style="inset: 0 60px 70px 0"></div>
76+
<div class="test center" style="inset: 0 60px 70px 0"></div>
77+
<div class="test inset2" style="inset: 0 60px 70px 0"></div>
78+
79+
<div class="test inset1" style="inset: 70px 0 0 60px"></div>
80+
<div class="test center" style="inset: 70px 0 0 60px"></div>
81+
<div class="test inset2" style="inset: 70px 0 0 60px"></div>
82+
83+
<div class="test inset1" style="inset: 50px 40px 50px 40px"></div>
84+
<div class="test center" style="inset: 50px 40px 50px 40px"></div>
85+
<div class="test inset2" style="inset: 50px 40px 50px 40px"></div>
86+
</div>
87+
88+
<div class="container" style="writing-mode: vertical-rl">
89+
<div class="anchor"></div>
90+
<div class="test inset1" style="inset: 0 0 70px"></div>
91+
<div class="test center" style="inset: 0 0 70px"></div>
92+
<div class="test inset2" style="inset: 0 0 70px"></div>
93+
94+
<div class="test inset1" style="inset: 70px 0 0"></div>
95+
<div class="test center" style="inset: 70px 0 0"></div>
96+
<div class="test inset2" style="inset: 70px 0 0"></div>
97+
98+
<div class="test inset1" style="inset: 0 40px"></div>
99+
<div class="test center" style="inset: 0 40px"></div>
100+
<div class="test inset2" style="inset: 0 40px"></div>
101+
</div>

‎LayoutTests/imported/w3c/web-platform-tests/css/css-anchor-position/position-area-alignment-inset-001-ref.html‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<!DOCTYPE html>
2+
<title>position-area normal alignment vs insets</title>
3+
<link rel="help" href="https://www.w3.org/TR/css-anchor-position/#position-area-alignment">
4+
<meta name="assert" content="Test passes if normal alignment aligns towards the non-auto inset.">
5+
<style>
6+
.container {
7+
position: relative;
8+
width: 100px;
9+
height: 120px;
10+
border: solid;
11+
margin: 1em;
12+
float: left;
13+
}
14+
.anchor {
15+
border: solid blue 10px;
16+
inset: 0;
17+
place-self: center;
18+
position: absolute;
19+
}
20+
.test {
21+
border: solid 5px;
22+
position: absolute;
23+
width: 0;
24+
height: 0;
25+
}
26+
.inset1 {
27+
margin-bottom: auto;
28+
margin-left: auto;
29+
border-color: orange;
30+
}
31+
.inset2 {
32+
margin-top: auto;
33+
margin-right: auto;
34+
border-color: teal;
35+
}
36+
.center {
37+
margin: auto;
38+
border-color: aqua;
39+
}
40+
</style>
41+
42+
<div class="container">
43+
<div class="anchor"></div>
44+
<div class="test inset1" style="inset: 0 60px 70px 0"></div>
45+
<div class="test center" style="inset: 0 60px 70px 0"></div>
46+
<div class="test inset2" style="inset: 0 60px 70px 0"></div>
47+
48+
<div class="test inset1" style="inset: 70px 0 0 60px"></div>
49+
<div class="test center" style="inset: 70px 0 0 60px"></div>
50+
<div class="test inset2" style="inset: 70px 0 0 60px"></div>
51+
52+
<div class="test inset1" style="inset: 50px 40px 50px 40px"></div>
53+
<div class="test center" style="inset: 50px 40px 50px 40px"></div>
54+
<div class="test inset2" style="inset: 50px 40px 50px 40px"></div>
55+
</div>
56+
57+
<div class="container">
58+
<div class="anchor"></div>
59+
<div class="test inset1" style="inset: 0 0 70px"></div>
60+
<div class="test center" style="inset: 0 0 70px"></div>
61+
<div class="test inset2" style="inset: 0 0 70px"></div>
62+
63+
<div class="test inset1" style="inset: 70px 0 0"></div>
64+
<div class="test center" style="inset: 70px 0 0"></div>
65+
<div class="test inset2" style="inset: 70px 0 0"></div>
66+
67+
<div class="test inset1" style="inset: 50px 0"></div>
68+
<div class="test center" style="inset: 50px 0"></div>
69+
<div class="test inset2" style="inset: 50px 0"></div>
70+
</div>
71+
72+
73+
<div class="container" style="writing-mode: vertical-rl">
74+
<div class="anchor"></div>
75+
<div class="test inset1" style="inset: 0 60px 70px 0"></div>
76+
<div class="test center" style="inset: 0 60px 70px 0"></div>
77+
<div class="test inset2" style="inset: 0 60px 70px 0"></div>
78+
79+
<div class="test inset1" style="inset: 70px 0 0 60px"></div>
80+
<div class="test center" style="inset: 70px 0 0 60px"></div>
81+
<div class="test inset2" style="inset: 70px 0 0 60px"></div>
82+
83+
<div class="test inset1" style="inset: 50px 40px 50px 40px"></div>
84+
<div class="test center" style="inset: 50px 40px 50px 40px"></div>
85+
<div class="test inset2" style="inset: 50px 40px 50px 40px"></div>
86+
</div>
87+
88+
<div class="container" style="writing-mode: vertical-rl">
89+
<div class="anchor"></div>
90+
<div class="test inset1" style="inset: 0 0 70px"></div>
91+
<div class="test center" style="inset: 0 0 70px"></div>
92+
<div class="test inset2" style="inset: 0 0 70px"></div>
93+
94+
<div class="test inset1" style="inset: 70px 0 0"></div>
95+
<div class="test center" style="inset: 70px 0 0"></div>
96+
<div class="test inset2" style="inset: 70px 0 0"></div>
97+
98+
<div class="test inset1" style="inset: 0 40px"></div>
99+
<div class="test center" style="inset: 0 40px"></div>
100+
<div class="test inset2" style="inset: 0 40px"></div>
101+
</div>

‎LayoutTests/imported/w3c/web-platform-tests/css/css-anchor-position/position-area-alignment-inset-001.html‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<!DOCTYPE html>
2+
<title>position-area normal alignment vs insets</title>
3+
<link rel="help" href="https://www.w3.org/TR/css-anchor-position/#position-area-alignment">
4+
<meta name="assert" content="Test passes if normal alignment aligns towards the non-auto inset.">
5+
<style>
6+
.container {
7+
position: relative;
8+
width: 100px;
9+
height: 120px;
10+
border: solid;
11+
margin: 1em;
12+
float: left;
13+
}
14+
.anchor {
15+
border: solid blue 10px;
16+
anchor-name: --foo;
17+
inset: 0;
18+
place-self: center;
19+
position: absolute;
20+
}
21+
.test {
22+
border: solid 5px;
23+
position: absolute;
24+
position-anchor: --foo;
25+
}
26+
.inset1 {
27+
top: 0;
28+
right: 0;
29+
border-color: orange;
30+
}
31+
.inset2 {
32+
bottom: 0;
33+
left: 0;
34+
border-color: teal;
35+
}
36+
.center {
37+
place-self: center;
38+
border-color: aqua;
39+
}
40+
</style>
41+
42+
<div class="container">
43+
<div class="anchor"></div>
44+
<div class="test inset1" style="position-area: top left"></div>
45+
<div class="test center" style="position-area: top left"></div>
46+
<div class="test inset2" style="position-area: top left"></div>
47+
48+
<div class="test inset1" style="position-area: bottom right"></div>
49+
<div class="test center" style="position-area: bottom right"></div>
50+
<div class="test inset2" style="position-area: bottom right"></div>
51+
52+
<div class="test inset1" style="position-area: center"></div>
53+
<div class="test center" style="position-area: center"></div>
54+
<div class="test inset2" style="position-area: center"></div>
55+
</div>
56+
57+
<div class="container">
58+
<div class="anchor"></div>
59+
<div class="test inset1" style="position-area: top"></div>
60+
<div class="test center" style="position-area: top"></div>
61+
<div class="test inset2" style="position-area: top"></div>
62+
63+
<div class="test inset1" style="position-area: bottom"></div>
64+
<div class="test center" style="position-area: bottom"></div>
65+
<div class="test inset2" style="position-area: bottom"></div>
66+
67+
<div class="test inset1" style="position-area: center span-all"></div>
68+
<div class="test center" style="position-area: center span-all"></div>
69+
<div class="test inset2" style="position-area: center span-all"></div>
70+
</div>
71+
72+
73+
<div class="container" style="writing-mode: vertical-rl">
74+
<div class="anchor"></div>
75+
<div class="test inset1" style="position-area: top left"></div>
76+
<div class="test center" style="position-area: top left"></div>
77+
<div class="test inset2" style="position-area: top left"></div>
78+
79+
<div class="test inset1" style="position-area: bottom right"></div>
80+
<div class="test center" style="position-area: bottom right"></div>
81+
<div class="test inset2" style="position-area: bottom right"></div>
82+
83+
<div class="test inset1" style="position-area: center"></div>
84+
<div class="test center" style="position-area: center"></div>
85+
<div class="test inset2" style="position-area: center"></div>
86+
</div>
87+
88+
<div class="container" style="writing-mode: vertical-rl">
89+
<div class="anchor"></div>
90+
<div class="test inset1" style="position-area: top"></div>
91+
<div class="test center" style="position-area: top"></div>
92+
<div class="test inset2" style="position-area: top"></div>
93+
94+
<div class="test inset1" style="position-area: bottom"></div>
95+
<div class="test center" style="position-area: bottom"></div>
96+
<div class="test inset2" style="position-area: bottom"></div>
97+
98+
<div class="test inset1" style="position-area: center span-all"></div>
99+
<div class="test center" style="position-area: center span-all"></div>
100+
<div class="test inset2" style="position-area: center span-all"></div>
101+
</div>

‎LayoutTests/imported/w3c/web-platform-tests/css/css-anchor-position/position-visibility-anchors-valid.tentative.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,7 @@
1818
width: 100px;
1919
height: 100px;
2020
background: red;
21-
top: 0;
22-
left: 0;
21+
inset: 0;
2322
}
2423
</style>
2524

‎LayoutTests/imported/w3c/web-platform-tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-in-document.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,7 @@
2828
height: 100px;
2929
background: green;
3030
position: absolute;
31-
top: 0;
32-
left: 0;
31+
inset: 0;
3332
}
3433
</style>
3534

‎LayoutTests/imported/w3c/web-platform-tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-in.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,7 @@
3333
height: 100px;
3434
background: green;
3535
position: absolute;
36-
top: 0;
37-
left: 0;
36+
inset: 0;
3837
}
3938
</style>
4039

‎LayoutTests/imported/w3c/web-platform-tests/css/css-anchor-position/position-visibility-anchors-visible-chained-004.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,7 @@
3838
height: 50px;
3939
background: green;
4040
position: absolute;
41-
top: 0;
42-
left: 0;
41+
inset: 0;
4342
}
4443

4544
#chained {

‎LayoutTests/imported/w3c/web-platform-tests/css/css-anchor-position/position-visibility-anchors-visible-change-anchor.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,7 @@
3838
height: 100px;
3939
background: green;
4040
position: absolute;
41-
top: 0;
42-
left: 0;
41+
inset: 0;
4342
}
4443
</style>
4544

‎LayoutTests/imported/w3c/web-platform-tests/css/css-anchor-position/position-visibility-anchors-visible-change-css-visibility.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,7 @@
2727
height: 100px;
2828
background: green;
2929
position: absolute;
30-
top: 0;
31-
left: 0;
30+
inset: 0;
3231
}
3332
</style>
3433

‎LayoutTests/imported/w3c/web-platform-tests/css/css-anchor-position/position-visibility-anchors-visible-in-overflow-expected.html‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,7 @@
3232
height: 50px;
3333
background: green;
3434
position: absolute;
35-
top: 0;
36-
left: 0;
35+
inset: 0;
3736
}
3837
#target-b {
3938
position-anchor: --anchor;
@@ -43,8 +42,7 @@
4342
height: 50px;
4443
background: green;
4544
position: absolute;
46-
top: 0;
47-
left: 0;
45+
inset: 0;
4846
}
4947
#target-c {
5048
position-anchor: --anchor;
@@ -54,8 +52,7 @@
5452
height: 50px;
5553
background: green;
5654
position: absolute;
57-
top: 0;
58-
left: 0;
55+
inset: 0;
5956
}
6057
</style>
6158

0 commit comments

Comments
 (0)