Skip to content

Commit c200166

Browse files
nt1mweinig
nt1m
and
weinig
authored
WebKit export: Add support for axis relative keywords to for <position> (#53754)
https://bugs.webkit.org/show_bug.cgi?id=292069 Co-authored-by: Sam Weinig <[email protected]>
1 parent 5cfbcc7 commit c200166

File tree

3 files changed

+280
-0
lines changed

3 files changed

+280
-0
lines changed

‎css/css-values/position/position-computed.tentative.html

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Values and Units Module Level 5: computed values for &lt;position&gt;</title>
6+
<link rel="author" title="Sam Weinig" href="mailto:[email protected]">
7+
<link rel="help" href="https://drafts.csswg.org/css-values-5/#position">
8+
<script src="/resources/testharness.js"></script>
9+
<script src="/resources/testharnessreport.js"></script>
10+
<script src="/css/support/computed-testcommon.js"></script>
11+
</head>
12+
<body>
13+
<div id="container">
14+
<div id="target"></div>
15+
</div>
16+
<script>
17+
const property = "object-position";
18+
19+
test_computed_value(property, "10% center", "10% 50%");
20+
test_computed_value(property, "right 30% top 60px", "70% 60px");
21+
test_computed_value(property, "-20% -30px");
22+
test_computed_value(property, "30px center", "30px 50%");
23+
test_computed_value(property, "40px top", "40px 0%");
24+
test_computed_value(property, "right 20% bottom 10%", "80% 90%");
25+
test_computed_value(property, "right bottom", "100% 100%");
26+
test_computed_value(property, "center 50px", "50% 50px");
27+
test_computed_value(property, "center bottom", "50% 100%");
28+
test_computed_value(property, "left center", "0% 50%");
29+
test_computed_value(property, "left bottom", "0% 100%");
30+
test_computed_value(property, "right 40%", "100% 40%");
31+
test_computed_value(property, "center top", "50% 0%");
32+
test_computed_value(property, "center", "50% 50%");
33+
test_computed_value(property, "center center", "50% 50%");
34+
test_computed_value(property, "right 20px bottom 10px", "calc(100% - 20px) calc(100% - 10px)");
35+
36+
test_computed_value(property, "x-start", "0% 50%");
37+
test_computed_value(property, "x-start 10px", "0% 10px");
38+
test_computed_value(property, "x-start 10% top 20px", "10% 20px");
39+
test_computed_value(property, "x-end", "100% 50%");
40+
test_computed_value(property, "x-end 10%", "100% 10%");
41+
test_computed_value(property, "x-end 10px top 20px", "calc(100% - 10px) 20px");
42+
test_computed_value(property, "y-start", "50% 0%");
43+
test_computed_value(property, "10px y-start", "10px 0%");
44+
test_computed_value(property, "left 10px y-start 20%", "10px 20%");
45+
test_computed_value(property, "y-end", "50% 100%");
46+
test_computed_value(property, "10px y-end", "10px 100%");
47+
test_computed_value(property, "left 10px y-end 20%", "10px 80%");
48+
49+
function test_writing_modes(property) {
50+
const writing_modes = [
51+
{
52+
styles: [
53+
{"writing-mode": "horizontal-tb", "direction": "ltr"},
54+
],
55+
mappings: [
56+
{ "x-start": "left" },
57+
{ "x-end": "right" },
58+
{ "y-start": "top" },
59+
{ "y-end": "bottom" },
60+
]
61+
},
62+
{
63+
styles: [
64+
{"writing-mode": "horizontal-tb", "direction": "rtl"},
65+
],
66+
mappings: [
67+
{ "x-start": "right" },
68+
{ "x-end": "left" },
69+
{ "y-start": "top" },
70+
{ "y-end": "bottom" },
71+
]
72+
},
73+
{
74+
styles: [
75+
{"writing-mode": "vertical-rl", "direction": "rtl"},
76+
{"writing-mode": "sideways-rl", "direction": "rtl"},
77+
],
78+
mappings: [
79+
{ "x-start": "right" },
80+
{ "x-end": "left" },
81+
{ "y-start": "bottom" },
82+
{ "y-end": "top" },
83+
]
84+
},
85+
{
86+
styles: [
87+
{"writing-mode": "vertical-rl", "direction": "ltr"},
88+
{"writing-mode": "sideways-rl", "direction": "ltr"},
89+
],
90+
mappings: [
91+
{ "x-start": "right" },
92+
{ "x-end": "left" },
93+
{ "y-start": "top" },
94+
{ "y-end": "bottom" },
95+
]
96+
},
97+
{
98+
styles: [
99+
{"writing-mode": "vertical-lr", "direction": "rtl"},
100+
],
101+
mappings: [
102+
{ "x-start": "left" },
103+
{ "x-end": "right" },
104+
{ "y-start": "bottom" },
105+
{ "y-end": "top" },
106+
]
107+
},
108+
{
109+
styles: [
110+
{"writing-mode": "sideways-lr", "direction": "ltr"},
111+
],
112+
mappings: [
113+
{ "x-start": "left" },
114+
{ "x-end": "right" },
115+
{ "y-start": "bottom" },
116+
{ "y-end": "top" },
117+
]
118+
},
119+
{
120+
styles: [
121+
{"writing-mode": "vertical-lr", "direction": "ltr"},
122+
],
123+
mappings: [
124+
{ "x-start": "left" },
125+
{ "x-end": "right" },
126+
{ "y-start": "top" },
127+
{ "y-end": "bottom" },
128+
]
129+
},
130+
{
131+
styles: [
132+
{"writing-mode": "sideways-lr", "direction": "rtl"},
133+
],
134+
mappings: [
135+
{ "x-start": "left" },
136+
{ "x-end": "right" },
137+
{ "y-start": "top" },
138+
{ "y-end": "bottom" },
139+
]
140+
},
141+
];
142+
143+
function inner_test(property, specified, expected_to_match, container_styles) {
144+
test(() => {
145+
const target = document.getElementById('target');
146+
assert_true(property in getComputedStyle(target), "'" + property + "' is a supported property for the computed style");
147+
assert_true(CSS.supports(property, specified), "'" + specified + "' is a supported value for " + property + ".");
148+
149+
target.style[property] = '';
150+
target.style[property] = expected_to_match;
151+
let expectedValue = getComputedStyle(target)[property];
152+
153+
target.style[property] = '';
154+
target.style[property] = specified;
155+
let readValue = getComputedStyle(target)[property];
156+
assert_equals(readValue, expectedValue, `'${specified}' is equal to the computed value of ''${expected_to_match}' which is '${expectedValue}'`);
157+
if (readValue !== specified) {
158+
target.style[property] = '';
159+
target.style[property] = readValue;
160+
assert_equals(getComputedStyle(target)[property], readValue,
161+
'computed value should round-trip');
162+
}
163+
}, `Property ${property} value '${specified}' in mode '${container_styles.join(', ')}'`);
164+
}
165+
166+
const container = document.getElementById('container');
167+
for (let writing_mode of writing_modes) {
168+
for (let style of writing_mode.styles) {
169+
var container_styles = [];
170+
for (let container_property in style) {
171+
container.style[container_property] = style[container_property];
172+
container_styles.push(`${container_property}: ${style[container_property]}`);
173+
}
174+
175+
for (let mapping of writing_mode.mappings) {
176+
for (let key in mapping) {
177+
inner_test(property, key, mapping[key], container_styles);
178+
}
179+
}
180+
}
181+
}
182+
}
183+
184+
test_writing_modes(property);
185+
186+
</script>
187+
</body>
188+
</html>

‎css/css-values/position/position-invalid.tentative.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Values and Units Module Level 5: parsing &lt;position&gt; with invalid values</title>
6+
<link rel="author" title="Sam Weinig" href="mailto:[email protected]">
7+
<link rel="help" href="https://drafts.csswg.org/css-values-5/#position">
8+
<script src="/resources/testharness.js"></script>
9+
<script src="/resources/testharnessreport.js"></script>
10+
<script src="/css/support/parsing-testcommon.js"></script>
11+
</head>
12+
<body>
13+
<script>
14+
const property = "object-position";
15+
16+
test_invalid_value(property, "auto");
17+
test_invalid_value(property, "left top garbage");
18+
test_invalid_value(property, "garbage left top");
19+
test_invalid_value(property, "left garbage top");
20+
test_invalid_value(property, "left 10px top 10px garbage");
21+
test_invalid_value(property, "garbage left 10px top 10px");
22+
test_invalid_value(property, "left 10px garbage top 10px");
23+
test_invalid_value(property, "left garbage 10px top 10px");
24+
test_invalid_value(property, "left 10px top garbage 10px");
25+
test_invalid_value(property, "1px 2px 3px");
26+
test_invalid_value(property, "left right");
27+
test_invalid_value(property, "bottom 10%");
28+
test_invalid_value(property, "bottom 10% top 20%");
29+
test_invalid_value(property, "center left 1px");
30+
test_invalid_value(property, "center top 2px");
31+
test_invalid_value(property, "right 3% center");
32+
test_invalid_value(property, "left 4px top");
33+
test_invalid_value(property, "right top 5px");
34+
test_invalid_value(property, "bottom 6% center");
35+
test_invalid_value(property, "bottom 7% left");
36+
test_invalid_value(property, "bottom right 8%");
37+
</script>
38+
</body>
39+
</html>

‎css/css-values/position/position-valid.tentative.html

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Values and Units Module Level 5: parsing &lt;position&gt; with valid values</title>
6+
<link rel="author" title="Sam Weinig" href="mailto:[email protected]">
7+
<link rel="help" href="https://drafts.csswg.org/css-values-5/#position">
8+
<script src="/resources/testharness.js"></script>
9+
<script src="/resources/testharnessreport.js"></script>
10+
<script src="/css/support/parsing-testcommon.js"></script>
11+
</head>
12+
<body>
13+
<script>
14+
const property = "object-position";
15+
16+
test_valid_value(property, "10%", "10% center");
17+
test_valid_value(property, "right 30% top 60px");
18+
test_valid_value(property, "-20% -30px");
19+
test_valid_value(property, "30px center");
20+
test_valid_value(property, "40px top");
21+
test_valid_value(property, "bottom 10% right 20%", "right 20% bottom 10%");
22+
test_valid_value(property, "bottom right", "right bottom");
23+
test_valid_value(property, "center 50px", "center 50px");
24+
test_valid_value(property, "center bottom", "center bottom");
25+
test_valid_value(property, "center left", "left center");
26+
test_valid_value(property, "left", "left center");
27+
test_valid_value(property, "left bottom", "left bottom");
28+
test_valid_value(property, "left center", "left center");
29+
test_valid_value(property, "right 40%", "right 40%");
30+
test_valid_value(property, "top", "center top");
31+
test_valid_value(property, "top center", "center top");
32+
test_valid_value(property, "center", "center center");
33+
test_valid_value(property, "center center", "center center");
34+
35+
test_valid_value(property, "x-start", "x-start center");
36+
test_valid_value(property, "x-start 10px");
37+
test_valid_value(property, "x-start 10% top 20px");
38+
test_valid_value(property, "top 20px x-start 10%", "x-start 10% top 20px");
39+
test_valid_value(property, "x-end", "x-end center");
40+
test_valid_value(property, "x-end 10%");
41+
test_valid_value(property, "x-end 10px top 20px");
42+
test_valid_value(property, "top 20px x-end 10px", "x-end 10px top 20px");
43+
test_valid_value(property, "y-start", "center y-start");
44+
test_valid_value(property, "10px y-start");
45+
test_valid_value(property, "left 10px y-start 20%");
46+
test_valid_value(property, "y-start 20px left 10px", "left 10px y-start 20px");
47+
test_valid_value(property, "y-end", "center y-end");
48+
test_valid_value(property, "10px y-end");
49+
test_valid_value(property, "left 10px y-end 20%");
50+
test_valid_value(property, "y-end 20% left 10px", "left 10px y-end 20%");
51+
</script>
52+
</body>
53+
</html>

0 commit comments

Comments
 (0)