Skip to content

Commit 9706477

Browse files
bfgeekchromium-wpt-export-bot
bfgeek
authored and
chromium-wpt-export-bot
committed
[anchor] Switch position-try-order to use containing-block writing-mode.
It was resolved in: w3c/csswg-drafts#12869 (comment) That position-try-order should work in the containing-block writing-mode and not the candidate writing-mode. Fixed: 452327359 Change-Id: I60984e57cda1dd57dfcb70e10cbd14a272d972c2 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7120318 Commit-Queue: David Grogan <dgrogan@chromium.org> Auto-Submit: Ian Kilpatrick <ikilpatrick@chromium.org> Reviewed-by: David Grogan <dgrogan@chromium.org> Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/main@{#1540244}
1 parent b31a712 commit 9706477

File tree

2 files changed

+281
-0
lines changed

2 files changed

+281
-0
lines changed

‎css/css-anchor-position/position-try-order-logical-ref.html‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<!DOCTYPE html>
2+
<style>
3+
.container {
4+
position: relative;
5+
display: inline-block;
6+
width: 100px;
7+
height: 100px;
8+
margin: 10px;
9+
border: solid 3px;
10+
}
11+
12+
.anchor {
13+
position: absolute;
14+
anchor-name: --a;
15+
width: 25px;
16+
height: 25px;
17+
left: 50px;
18+
top: 25px;
19+
background: dodgerblue;
20+
}
21+
22+
.anchored {
23+
position: absolute;
24+
position-anchor: --a;
25+
position-try-fallbacks: flip-block flip-inline;
26+
width: 15px;
27+
height: 15px;
28+
background: green;
29+
}
30+
</style>
31+
<div class="container">
32+
<div class="anchor"></div>
33+
<div class="anchored" style="position-area: top left;"></div>
34+
</div>
35+
36+
<div class="container">
37+
<div class="anchor"></div>
38+
<div class="anchored" style="position-area: top left;"></div>
39+
</div>
40+
41+
<div class="container">
42+
<div class="anchor"></div>
43+
<div class="anchored" style="position-area: bottom right;"></div>
44+
</div>
45+
46+
<div class="container">
47+
<div class="anchor"></div>
48+
<div class="anchored" style="position-area: bottom right;"></div>
49+
</div>
50+
51+
<br>
52+
53+
<div class="container">
54+
<div class="anchor"></div>
55+
<div class="anchored" style="position-area: top left;"></div>
56+
</div>
57+
58+
<div class="container">
59+
<div class="anchor"></div>
60+
<div class="anchored" style="position-area: top left;"></div>
61+
</div>
62+
63+
<div class="container">
64+
<div class="anchor"></div>
65+
<div class="anchored" style="position-area: bottom right;"></div>
66+
</div>
67+
68+
<div class="container">
69+
<div class="anchor"></div>
70+
<div class="anchored" style="position-area: bottom right;"></div>
71+
</div>
72+
73+
<br>
74+
75+
<div class="container">
76+
<div class="anchor"></div>
77+
<div class="anchored" style="position-area: bottom right;"></div>
78+
</div>
79+
80+
<div class="container">
81+
<div class="anchor"></div>
82+
<div class="anchored" style="position-area: bottom right;"></div>
83+
</div>
84+
85+
<div class="container">
86+
<div class="anchor"></div>
87+
<div class="anchored" style="position-area: top left;"></div>
88+
</div>
89+
90+
<div class="container">
91+
<div class="anchor"></div>
92+
<div class="anchored" style="position-area: top left;"></div>
93+
</div>
94+
95+
<br>
96+
97+
<div class="container">
98+
<div class="anchor"></div>
99+
<div class="anchored" style="position-area: bottom right;"></div>
100+
</div>
101+
102+
<div class="container">
103+
<div class="anchor"></div>
104+
<div class="anchored" style="position-area: bottom right;"></div>
105+
</div>
106+
107+
<div class="container">
108+
<div class="anchor"></div>
109+
<div class="anchored" style="position-area: top left;"></div>
110+
</div>
111+
112+
<div class="container">
113+
<div class="anchor"></div>
114+
<div class="anchored" style="position-area: top left;"></div>
115+
</div>

‎css/css-anchor-position/position-try-order-logical.html‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/12869#issuecomment-3406959070">
3+
<link rel="match" href="position-try-order-logical-ref.html">
4+
<style>
5+
.container {
6+
position: relative;
7+
display: inline-block;
8+
width: 100px;
9+
height: 100px;
10+
margin: 10px;
11+
border: solid 3px;
12+
}
13+
14+
.anchor {
15+
position: absolute;
16+
anchor-name: --a;
17+
width: 25px;
18+
height: 25px;
19+
left: 50px;
20+
top: 25px;
21+
background: dodgerblue;
22+
}
23+
24+
.anchored {
25+
position: absolute;
26+
position-anchor: --a;
27+
position-try-fallbacks: flip-block flip-inline;
28+
width: 15px;
29+
height: 15px;
30+
background: green;
31+
}
32+
</style>
33+
<div class="container">
34+
<div class="anchor"></div>
35+
<div class="anchored" style="
36+
position-area: top left;
37+
position-try-order: most-inline-size;
38+
writing-mode: vertical-rl;"></div>
39+
</div>
40+
41+
<div class="container">
42+
<div class="anchor"></div>
43+
<div class="anchored" style="
44+
position-area: top left;
45+
position-try-order: most-inline-size;
46+
writing-mode: horizontal-tb;"></div>
47+
</div>
48+
49+
<div class="container">
50+
<div class="anchor"></div>
51+
<div class="anchored" style="
52+
position-area: top left;
53+
position-try-order: most-block-size;
54+
writing-mode: vertical-rl;"></div>
55+
</div>
56+
57+
<div class="container">
58+
<div class="anchor"></div>
59+
<div class="anchored" style="
60+
position-area: top left;
61+
position-try-order: most-block-size;
62+
writing-mode: horizontal-tb;"></div>
63+
</div>
64+
65+
<br>
66+
67+
<div class="container">
68+
<div class="anchor"></div>
69+
<div class="anchored" style="
70+
right: anchor(left); bottom: anchor(top);
71+
position-try-order: most-inline-size;
72+
writing-mode: vertical-rl;"></div>
73+
</div>
74+
75+
<div class="container">
76+
<div class="anchor"></div>
77+
<div class="anchored" style="
78+
right: anchor(left); bottom: anchor(top);
79+
position-try-order: most-inline-size;
80+
writing-mode: horizontal-tb;"></div>
81+
</div>
82+
83+
<div class="container">
84+
<div class="anchor"></div>
85+
<div class="anchored" style="
86+
right: anchor(left); bottom: anchor(top);
87+
position-try-order: most-block-size;
88+
writing-mode: vertical-rl;"></div>
89+
</div>
90+
91+
<div class="container">
92+
<div class="anchor"></div>
93+
<div class="anchored" style="
94+
right: anchor(left); bottom: anchor(top);
95+
position-try-order: most-block-size;
96+
writing-mode: horizontal-tb;"></div>
97+
</div>
98+
99+
<br>
100+
101+
<!-- vertical containing block. -->
102+
<div class="container" style="writing-mode: vertical-rl;">
103+
<div class="anchor"></div>
104+
<div class="anchored" style="
105+
position-area: top left;
106+
position-try-order: most-inline-size;
107+
writing-mode: vertical-rl;"></div>
108+
</div>
109+
110+
<div class="container" style="writing-mode: vertical-rl;">
111+
<div class="anchor"></div>
112+
<div class="anchored" style="
113+
position-area: top left;
114+
position-try-order: most-inline-size;
115+
writing-mode: horizontal-tb;"></div>
116+
</div>
117+
118+
<div class="container" style="writing-mode: vertical-rl;">
119+
<div class="anchor"></div>
120+
<div class="anchored" style="
121+
position-area: top left;
122+
position-try-order: most-block-size;
123+
writing-mode: vertical-rl;"></div>
124+
</div>
125+
126+
<div class="container" style="writing-mode: vertical-rl;">
127+
<div class="anchor"></div>
128+
<div class="anchored" style="
129+
position-area: top left;
130+
position-try-order: most-block-size;
131+
writing-mode: horizontal-tb;"></div>
132+
</div>
133+
134+
<br>
135+
136+
<div class="container" style="writing-mode: vertical-rl;">
137+
<div class="anchor"></div>
138+
<div class="anchored" style="
139+
right: anchor(left); bottom: anchor(top);
140+
position-try-order: most-inline-size;
141+
writing-mode: vertical-rl;"></div>
142+
</div>
143+
144+
<div class="container" style="writing-mode: vertical-rl;">
145+
<div class="anchor"></div>
146+
<div class="anchored" style="
147+
right: anchor(left); bottom: anchor(top);
148+
position-try-order: most-inline-size;
149+
writing-mode: horizontal-tb;"></div>
150+
</div>
151+
152+
<div class="container" style="writing-mode: vertical-rl;">
153+
<div class="anchor"></div>
154+
<div class="anchored" style="
155+
right: anchor(left); bottom: anchor(top);
156+
position-try-order: most-block-size;
157+
writing-mode: vertical-rl;"></div>
158+
</div>
159+
160+
<div class="container" style="writing-mode: vertical-rl;">
161+
<div class="anchor"></div>
162+
<div class="anchored" style="
163+
right: anchor(left); bottom: anchor(top);
164+
position-try-order: most-block-size;
165+
writing-mode: horizontal-tb;"></div>
166+
</div>

0 commit comments

Comments
 (0)