Skip to content

Commit f167a6d

Browse files
tuankiet65tuankiet65
committed
1 parent 0611406 commit f167a6d

File tree

3 files changed

+223
-46
lines changed

3 files changed

+223
-46
lines changed

‎css/css-anchor-position/position-area-computed.html

Lines changed: 179 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,189 @@
99
<div id="target"></div>
1010
</div>
1111
<script>
12+
// Keywords that refer to the physical horizontal/vertical axes.
13+
14+
const horizontal = [
15+
"left",
16+
"right",
17+
"span-left",
18+
"span-right",
19+
"x-start",
20+
"x-end",
21+
"span-x-start",
22+
"span-x-end",
23+
"x-self-start",
24+
"x-self-end",
25+
"span-x-self-start",
26+
"span-x-self-end"
27+
];
28+
29+
const vertical = [
30+
"top",
31+
"bottom",
32+
"span-top",
33+
"span-bottom",
34+
"y-start",
35+
"y-end",
36+
"span-y-start",
37+
"span-y-end",
38+
"y-self-start",
39+
"y-self-end",
40+
"span-y-self-start",
41+
"span-y-self-end"
42+
];
43+
44+
// Keywords that refer to the logical block/inline axis.
45+
// Key is the full form of the keyword, value is the equivalent reduced keyword.
46+
47+
const inline = {
48+
"inline-start": "start",
49+
"inline-end": "end",
50+
"span-inline-start": "span-start",
51+
"span-inline-end": "span-end",
52+
}
53+
54+
const block = {
55+
"block-start": "start",
56+
"block-end": "end",
57+
"span-block-start": "span-start",
58+
"span-block-end": "span-end",
59+
}
60+
61+
const self_inline = {
62+
"self-inline-start": "self-start",
63+
"self-inline-end": "self-end",
64+
"span-self-inline-start": "span-self-start",
65+
"span-self-inline-end": "span-self-end",
66+
}
67+
68+
const self_block = {
69+
"self-block-start": "self-start",
70+
"self-block-end": "self-end",
71+
"span-self-block-start": "span-self-start",
72+
"span-self-block-end": "span-self-end",
73+
}
74+
75+
// Keywords that refer to an ambiguous axis.
76+
// Key is the keyword, value is the equivalent keyword if the original keyword refers
77+
// to a block or inline axis.
78+
79+
const start_end = {
80+
"start": { "block": "block-start", "inline": "inline-start" },
81+
"end": { "block": "block-end", "inline": "inline-end" },
82+
"span-start": { "block": "span-block-start", "inline": "span-inline-start" },
83+
"span-end": { "block": "span-block-end", "inline": "span-inline-end" },
84+
};
85+
86+
const self_start_end = {
87+
"self-start": { "block": "self-block-start", "inline": "self-inline-start" },
88+
"self-end": { "block": "self-block-end", "inline": "self-inline-end" },
89+
"span-self-start": { "block": "span-self-block-start", "inline": "span-self-inline-start" },
90+
"span-self-end": { "block": "span-self-block-end", "inline": "span-self-inline-end" },
91+
};
92+
93+
function test_single_keyword(keywords) {
94+
for (const keyword of keywords)
95+
test_computed_value("position-area", keyword);
96+
}
97+
98+
function test_physical_keywords(horizontal_keywords, vertical_keywords) {
99+
for (const horizontal of horizontal_keywords) {
100+
for (const vertical of vertical_keywords) {
101+
test_computed_value("position-area", `${horizontal} ${vertical}`);
102+
test_computed_value("position-area", `${vertical} ${horizontal}`, `${horizontal} ${vertical}`);
103+
}
104+
}
105+
106+
for (const keyword of horizontal_keywords) {
107+
test_computed_value("position-area", `${keyword} span-all`, keyword);
108+
test_computed_value("position-area", `span-all ${keyword}`, keyword);
109+
110+
test_computed_value("position-area", `${keyword} center`);
111+
test_computed_value("position-area", `center ${keyword}`, `${keyword} center`);
112+
}
113+
114+
for (const keyword of vertical_keywords) {
115+
test_computed_value("position-area", `span-all ${keyword}`, keyword);
116+
test_computed_value("position-area", `${keyword} span-all`, keyword);
117+
118+
test_computed_value("position-area", `center ${keyword}`);
119+
test_computed_value("position-area", `${keyword} center`, `center ${keyword}`);
120+
}
121+
}
122+
123+
function test_unambiguous_logical_keywords(block_keywords, inline_keywords) {
124+
for (const [block_long_keyword, block_short_keyword] of Object.entries(block_keywords)) {
125+
for (const [inline_long_keyword, inline_short_keyword] of Object.entries(inline_keywords)) {
126+
let expected_computed = `${block_short_keyword} ${inline_short_keyword}`;
127+
if (block_short_keyword == inline_short_keyword)
128+
expected_computed = block_short_keyword;
129+
130+
test_computed_value("position-area", `${block_long_keyword} ${inline_long_keyword}`, expected_computed);
131+
test_computed_value("position-area", `${inline_long_keyword} ${block_long_keyword}`, expected_computed);
132+
}
133+
}
134+
135+
for (const [long_keyword, short_keyword] of Object.entries(block_keywords)) {
136+
test_computed_value("position-area", `${long_keyword} span-all`, long_keyword);
137+
test_computed_value("position-area", `span-all ${long_keyword}`, long_keyword);
138+
139+
test_computed_value("position-area", `${long_keyword} center`, `${short_keyword} center`);
140+
test_computed_value("position-area", `center ${long_keyword}`, `${short_keyword} center`);
141+
}
142+
143+
for (const [long_keyword, short_keyword] of Object.entries(inline_keywords)) {
144+
test_computed_value("position-area", `${long_keyword} span-all`, long_keyword);
145+
test_computed_value("position-area", `span-all ${long_keyword}`, long_keyword);
146+
147+
test_computed_value("position-area", `${long_keyword} center`, `center ${short_keyword}`);
148+
test_computed_value("position-area", `center ${long_keyword}`, `center ${short_keyword}`);
149+
}
150+
}
151+
152+
function test_ambiguous_logical_keywords(keywords) {
153+
for (const keyword1 of Object.keys(keywords)) {
154+
for (const keyword2 of Object.keys(keywords)) {
155+
if (keyword1 == keyword2)
156+
test_computed_value("position-area", `${keyword1} ${keyword2}`, `${keyword1}`);
157+
else
158+
test_computed_value("position-area", `${keyword1} ${keyword2}`);
159+
}
160+
}
161+
162+
for (const [keyword, { block: block_keyword, inline: inline_keyword }] of Object.entries(keywords)) {
163+
test_computed_value("position-area", `${keyword} span-all`, block_keyword);
164+
test_computed_value("position-area", `span-all ${keyword}`, inline_keyword);
165+
166+
test_computed_value("position-area", `${keyword} center`);
167+
test_computed_value("position-area", `center ${keyword}`);
168+
};
169+
}
170+
171+
// Test computed value when position-area is a single keyword.
12172
test_computed_value("position-area", "none");
13173
test_computed_value("position-area", "span-all");
14-
test_computed_value("position-area", "x-start");
15174
test_computed_value("position-area", "center");
175+
test_single_keyword(horizontal);
176+
test_single_keyword(vertical);
177+
test_single_keyword(Object.keys(inline));
178+
test_single_keyword(Object.keys(block));
179+
test_single_keyword(Object.keys(self_inline));
180+
test_single_keyword(Object.keys(self_block));
181+
test_single_keyword(Object.keys(start_end));
182+
test_single_keyword(Object.keys(self_start_end));
183+
184+
// Test computed value when position-area are two keywords.
185+
test_physical_keywords(horizontal, vertical);
186+
test_unambiguous_logical_keywords(block, inline);
187+
test_unambiguous_logical_keywords(self_block, self_inline);
188+
test_ambiguous_logical_keywords(start_end);
189+
test_ambiguous_logical_keywords(self_start_end);
190+
16191
test_computed_value("position-area", "span-all span-all", "span-all");
192+
test_computed_value("position-area", "span-all center");
193+
test_computed_value("position-area", "center span-all");
17194
test_computed_value("position-area", "center center", "center");
18-
test_computed_value("position-area", "top center", "center top");
19-
test_computed_value("position-area", "span-bottom span-all", "span-bottom");
20195

21196
assert_not_inherited("position-area", "none", "span-all");
22-
</script>
197+
</script>

‎css/css-anchor-position/position-area-parsing.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,8 @@
102102
test_valid_single_position_area_values(vertical);
103103
test_valid_single_position_area_values(inline);
104104
test_valid_single_position_area_values(block);
105+
test_valid_single_position_area_values(self_inline);
106+
test_valid_single_position_area_values(self_block);
105107
test_valid_single_position_area_values(start_end);
106108
test_valid_single_position_area_values(self_start_end);
107109

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

Lines changed: 42 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -145,45 +145,45 @@
145145

146146
// Logical:
147147

148-
test_computed_value('flip-inline', 'position-area', 'block-start inline-start', 'block-start inline-end');
149-
test_computed_value('flip-inline', 'position-area', 'block-end inline-start', 'block-end inline-end');
150-
test_computed_value('flip-inline', 'position-area', 'block-end inline-end', 'block-end inline-start');
151-
test_computed_value('flip-inline', 'position-area', 'block-start inline-end', 'block-start inline-start');
152-
153-
test_computed_value('flip-block', 'position-area', 'block-start inline-start', 'block-end inline-start');
154-
test_computed_value('flip-block', 'position-area', 'block-end inline-start', 'block-start inline-start');
155-
test_computed_value('flip-block', 'position-area', 'block-end inline-end', 'block-start inline-end');
156-
test_computed_value('flip-block', 'position-area', 'block-start inline-end', 'block-end inline-end');
157-
158-
test_computed_value('flip-block flip-inline', 'position-area', 'block-start inline-start', 'block-end inline-end');
159-
test_computed_value('flip-block flip-inline', 'position-area', 'block-end inline-start', 'block-start inline-end');
160-
test_computed_value('flip-block flip-inline', 'position-area', 'block-end inline-end', 'block-start inline-start');
161-
test_computed_value('flip-block flip-inline', 'position-area', 'block-start inline-end', 'block-end inline-start');
162-
163-
test_computed_value('flip-start', 'position-area', 'block-start inline-start', 'block-start inline-start');
164-
test_computed_value('flip-start', 'position-area', 'block-end inline-start', 'block-start inline-end');
165-
test_computed_value('flip-start', 'position-area', 'block-end inline-end', 'block-end inline-end');
166-
test_computed_value('flip-start', 'position-area', 'block-start inline-end', 'block-end inline-start');
167-
168-
test_computed_value('flip-block flip-start', 'position-area', 'block-start inline-start', 'block-start inline-end');
169-
test_computed_value('flip-block flip-start', 'position-area', 'block-end inline-start', 'block-start inline-start');
170-
test_computed_value('flip-block flip-start', 'position-area', 'block-end inline-end', 'block-end inline-start');
171-
test_computed_value('flip-block flip-start', 'position-area', 'block-start inline-end', 'block-end inline-end');
172-
173-
test_computed_value('flip-inline flip-start', 'position-area', 'block-start inline-start', 'block-end inline-start');
174-
test_computed_value('flip-inline flip-start', 'position-area', 'block-end inline-start', 'block-end inline-end');
175-
test_computed_value('flip-inline flip-start', 'position-area', 'block-end inline-end', 'block-start inline-end');
176-
test_computed_value('flip-inline flip-start', 'position-area', 'block-start inline-end', 'block-start inline-start');
177-
178-
test_computed_value('flip-block flip-inline flip-start', 'position-area', 'block-start inline-start', 'block-end inline-end');
179-
test_computed_value('flip-block flip-inline flip-start', 'position-area', 'block-end inline-start', 'block-end inline-start');
180-
test_computed_value('flip-block flip-inline flip-start', 'position-area', 'block-end inline-end', 'block-start inline-start');
181-
test_computed_value('flip-block flip-inline flip-start', 'position-area', 'block-start inline-end', 'block-start inline-end');
148+
test_computed_value('flip-inline', 'position-area', 'block-start inline-start', 'start end');
149+
test_computed_value('flip-inline', 'position-area', 'block-end inline-start', 'end');
150+
test_computed_value('flip-inline', 'position-area', 'block-end inline-end', 'end start');
151+
test_computed_value('flip-inline', 'position-area', 'block-start inline-end', 'start');
152+
153+
test_computed_value('flip-block', 'position-area', 'block-start inline-start', 'end start');
154+
test_computed_value('flip-block', 'position-area', 'block-end inline-start', 'start');
155+
test_computed_value('flip-block', 'position-area', 'block-end inline-end', 'start end');
156+
test_computed_value('flip-block', 'position-area', 'block-start inline-end', 'end');
157+
158+
test_computed_value('flip-block flip-inline', 'position-area', 'block-start inline-start', 'end');
159+
test_computed_value('flip-block flip-inline', 'position-area', 'block-end inline-start', 'start end');
160+
test_computed_value('flip-block flip-inline', 'position-area', 'block-end inline-end', 'start');
161+
test_computed_value('flip-block flip-inline', 'position-area', 'block-start inline-end', 'end start');
162+
163+
test_computed_value('flip-start', 'position-area', 'block-start inline-start', 'start');
164+
test_computed_value('flip-start', 'position-area', 'block-end inline-start', 'start end');
165+
test_computed_value('flip-start', 'position-area', 'block-end inline-end', 'end');
166+
test_computed_value('flip-start', 'position-area', 'block-start inline-end', 'end start');
167+
168+
test_computed_value('flip-block flip-start', 'position-area', 'block-start inline-start', 'start end');
169+
test_computed_value('flip-block flip-start', 'position-area', 'block-end inline-start', 'start');
170+
test_computed_value('flip-block flip-start', 'position-area', 'block-end inline-end', 'end start');
171+
test_computed_value('flip-block flip-start', 'position-area', 'block-start inline-end', 'end');
172+
173+
test_computed_value('flip-inline flip-start', 'position-area', 'block-start inline-start', 'end start');
174+
test_computed_value('flip-inline flip-start', 'position-area', 'block-end inline-start', 'end');
175+
test_computed_value('flip-inline flip-start', 'position-area', 'block-end inline-end', 'start end');
176+
test_computed_value('flip-inline flip-start', 'position-area', 'block-start inline-end', 'start');
177+
178+
test_computed_value('flip-block flip-inline flip-start', 'position-area', 'block-start inline-start', 'end');
179+
test_computed_value('flip-block flip-inline flip-start', 'position-area', 'block-end inline-start', 'end start');
180+
test_computed_value('flip-block flip-inline flip-start', 'position-area', 'block-end inline-end', 'start');
181+
test_computed_value('flip-block flip-inline flip-start', 'position-area', 'block-start inline-end', 'start end');
182182

183183
// Variations:
184-
test_computed_value('flip-block flip-inline', 'position-area', 'span-block-start span-inline-start', 'span-block-end span-inline-end');
185-
test_computed_value('flip-block flip-inline', 'position-area', 'self-block-start self-inline-start', 'self-block-end self-inline-end');
186-
test_computed_value('flip-block flip-inline', 'position-area', 'span-self-block-start span-self-inline-start', 'span-self-block-end span-self-inline-end');
184+
test_computed_value('flip-block flip-inline', 'position-area', 'span-block-start span-inline-start', 'span-end');
185+
test_computed_value('flip-block flip-inline', 'position-area', 'self-block-start self-inline-start', 'self-end');
186+
test_computed_value('flip-block flip-inline', 'position-area', 'span-self-block-start span-self-inline-start', 'span-self-end');
187187

188188
// start/end
189189

@@ -224,15 +224,15 @@
224224
test_computed_value('flip-block', 'position-area', 'left span-all', 'left');
225225
test_computed_value('flip-block', 'position-area', 'span-all top', 'bottom');
226226
test_computed_value('flip-block', 'position-area', 'span-all', 'span-all');
227-
test_computed_value('flip-block', 'position-area', 'start span-all', 'end span-all');
228-
test_computed_value('flip-block', 'position-area', 'span-all start', 'span-all start');
229-
test_computed_value('flip-inline', 'position-area', 'span-all start', 'span-all end');
230-
test_computed_value('flip-start', 'position-area', 'span-all start', 'start span-all');
227+
test_computed_value('flip-block', 'position-area', 'start span-all', 'block-end');
228+
test_computed_value('flip-block', 'position-area', 'span-all start', 'inline-start');
229+
test_computed_value('flip-inline', 'position-area', 'span-all start', 'inline-end');
230+
test_computed_value('flip-start', 'position-area', 'span-all start', 'block-start');
231231

232232
// Span mix:
233233
test_computed_value('flip-block', 'position-area', 'left span-top', 'left span-bottom');
234234
test_computed_value('flip-inline', 'position-area', 'left span-top', 'right span-top');
235-
test_computed_value('flip-start', 'position-area', 'span-block-start inline-end', 'block-end span-inline-start');
235+
test_computed_value('flip-start', 'position-area', 'span-block-start inline-end', 'end span-start');
236236

237237
// Writing modes:
238238
test_computed_value('flip-block', 'position-area', 'left top', 'right top', 'ltr', 'vertical-rl');

0 commit comments

Comments
 (0)