Skip to content

Commit 6d75c23

Browse files
Javier Contreras Tenoriochromium-wpt-export-bot
Javier Contreras Tenorio
authored and
chromium-wpt-export-bot
committed
[gap-decorations] Make row-rule-outset into shorthand using new props
This CL makes `column-rule-outset` into a shorthand using the new longhands w3c/csswg-drafts#12603. We also implement the paint behavior so that these work for `row`, moreover, we add new tests for this property, since the existing ones are using the `row-rule-outset` shorthand. We also update some existing parsing tests, and uncomment parts of tests that now work since we introduced the shorthand again. Recently it was resolved that the `outset` properties will be renamed to `inset` w3c/csswg-drafts#12848, so they will need to be renamed in follow up CLs, but since the asymmetric behavior resolved first, we are implementing that first. It will also allow us to move to the new inset behavior incrementally. Bug: 357648037, 440054556 Change-Id: I89086f1df91383468d5379680b7aeb038e99023c Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7107409 Reviewed-by: Alison Maher <almaher@microsoft.com> Commit-Queue: Javier Contreras <javiercon@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1540297}
1 parent 21961f4 commit 6d75c23

22 files changed

+357
-83
lines changed

‎css/css-gaps/animation/gap-decorations-outset-neutral-keyframe-001.html‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<title>gap decorations row-rule-outset neutral keyframe</title>
5+
<title>gap decorations row-rule-outset properties neutral keyframe</title>
66
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#outset">
77
<meta name="assert" content="gap decorations row-rule-outset value list supports neutral keyframe.">
88
<script src="/resources/testharness.js"></script>
@@ -14,12 +14,30 @@
1414
<script>
1515
test(() => {
1616
target.style.rowRuleStyle = 'solid';
17-
target.style.rowRuleOutset = '1px';
18-
var animation = target.animate([{}, {rowRuleOutset: '11px'}], 1000);
17+
target.style.rowRuleEdgeStartOutset = '1px';
18+
target.style.rowRuleEdgeEndOutset = '1px';
19+
target.style.rowRuleInteriorStartOutset = '1px';
20+
target.style.rowRuleInteriorEndOutset = '1px';
21+
var animation = target.animate([{}, {rowRuleEdgeStartOutset: '11px'}], 1000);
1922
animation.pause();
2023
animation.currentTime = 500;
21-
assert_equals(getComputedStyle(target).rowRuleOutset, '6px');
22-
}, 'gap decorations row-rule-outset value list supports neutral keyframe.');
24+
assert_equals(getComputedStyle(target).rowRuleEdgeStartOutset, '6px');
25+
26+
var animation2 = target.animate([{}, {rowRuleEdgeEndOutset: '11px'}], 1000);
27+
animation2.pause();
28+
animation2.currentTime = 500;
29+
assert_equals(getComputedStyle(target).rowRuleEdgeEndOutset, '6px');
30+
31+
var animation3 = target.animate([{}, {rowRuleInteriorStartOutset: '11px'}], 1000);
32+
animation3.pause();
33+
animation3.currentTime = 500;
34+
assert_equals(getComputedStyle(target).rowRuleInteriorStartOutset, '6px');
35+
36+
var animation4 = target.animate([{}, {rowRuleInteriorEndOutset: '11px'}], 1000);
37+
animation4.pause();
38+
animation4.currentTime = 500;
39+
assert_equals(getComputedStyle(target).rowRuleInteriorEndOutset, '6px');
40+
}, 'gap decorations row-rule-outset properties support neutral keyframe.');
2341
</script>
2442
</body>
2543
</html>

‎css/css-gaps/animation/row-rule-outset-interpolation.html‎

Lines changed: 269 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<meta charset="UTF-8">
5-
<title>row-rule-outset interpolation</title>
5+
<title>row-rule-outset properties interpolation</title>
66
<link rel="author" title="Javier Contreras" href="mailto:javiercon@chromium.org">
77
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#outset">
88
<script src="/resources/testharness.js"></script>
@@ -11,7 +11,10 @@
1111
<style>
1212
.parent {
1313
row-rule-style: solid;
14-
row-rule-outset: 20px;
14+
row-rule-edge-start-outset: 20px;
15+
row-rule-edge-end-outset: 20px;
16+
row-rule-interior-start-outset: 20px;
17+
row-rule-interior-end-outset: 20px;
1518
}
1619

1720
.target {
@@ -21,14 +24,53 @@
2124
column-rule: 10px solid black;
2225

2326
row-rule-break: intersection;
24-
row-rule-outset: 5px;
27+
row-rule-edge-start-outset: 5px;
28+
row-rule-edge-end-outset: 5px;
29+
row-rule-interior-start-outset: 5px;
30+
row-rule-interior-end-outset: 5px;
2531
}
2632
</style>
2733
</head>
2834
<body>
2935
<script>
3036
test_interpolation({
31-
property: 'row-rule-outset',
37+
property: 'row-rule-edge-start-outset',
38+
from: neutralKeyframe,
39+
to: '15px',
40+
}, [
41+
{ at: -0.3, expect: '2px' },
42+
{ at: 0, expect: '5px' },
43+
{ at: 0.3, expect: '8px' },
44+
{ at: 0.6, expect: '11px' },
45+
{ at: 1, expect: '15px' },
46+
{ at: 1.5, expect: '20px' },
47+
]);
48+
test_interpolation({
49+
property: 'row-rule-edge-end-outset',
50+
from: neutralKeyframe,
51+
to: '15px',
52+
}, [
53+
{ at: -0.3, expect: '2px' },
54+
{ at: 0, expect: '5px' },
55+
{ at: 0.3, expect: '8px' },
56+
{ at: 0.6, expect: '11px' },
57+
{ at: 1, expect: '15px' },
58+
{ at: 1.5, expect: '20px' },
59+
]);
60+
test_interpolation({
61+
property: 'row-rule-interior-start-outset',
62+
from: neutralKeyframe,
63+
to: '15px',
64+
}, [
65+
{ at: -0.3, expect: '2px' },
66+
{ at: 0, expect: '5px' },
67+
{ at: 0.3, expect: '8px' },
68+
{ at: 0.6, expect: '11px' },
69+
{ at: 1, expect: '15px' },
70+
{ at: 1.5, expect: '20px' },
71+
]);
72+
test_interpolation({
73+
property: 'row-rule-interior-end-outset',
3274
from: neutralKeyframe,
3375
to: '15px',
3476
}, [
@@ -41,7 +83,43 @@
4183
]);
4284

4385
test_interpolation({
44-
property: 'row-rule-outset',
86+
property: 'row-rule-edge-start-outset',
87+
from: 'initial', // initial for `edge` is 0px.
88+
to: '10px',
89+
}, [
90+
{ at: -0.3, expect: '-3px' },
91+
{ at: 0, expect: '0px' },
92+
{ at: 0.3, expect: '3px' },
93+
{ at: 0.6, expect: '6px' },
94+
{ at: 1, expect: '10px' },
95+
{ at: 1.5, expect: '15px' },
96+
]);
97+
test_interpolation({
98+
property: 'row-rule-edge-end-outset',
99+
from: 'initial', // initial for `edge` is 0px.
100+
to: '10px',
101+
}, [
102+
{ at: -0.3, expect: '-3px' },
103+
{ at: 0, expect: '0px' },
104+
{ at: 0.3, expect: '3px' },
105+
{ at: 0.6, expect: '6px' },
106+
{ at: 1, expect: '10px' },
107+
{ at: 1.5, expect: '15px' },
108+
]);
109+
test_interpolation({
110+
property: 'row-rule-interior-start-outset',
111+
from: 'initial', // initial is 50%.
112+
to: '40%',
113+
}, [
114+
{ at: -0.3, expect: '53%' },
115+
{ at: 0, expect: '50%' },
116+
{ at: 0.3, expect: '47%' },
117+
{ at: 0.6, expect: '44%' },
118+
{ at: 1, expect: '40%' },
119+
{ at: 1.5, expect: '35%' },
120+
]);
121+
test_interpolation({
122+
property: 'row-rule-interior-end-outset',
45123
from: 'initial', // initial is 50%.
46124
to: '40%',
47125
}, [
@@ -54,7 +132,43 @@
54132
]);
55133

56134
test_interpolation({
57-
property: 'row-rule-outset',
135+
property: 'row-rule-edge-start-outset',
136+
from: 'inherit',
137+
to: '10px',
138+
}, [
139+
{ at: -0.3, expect: '23px' },
140+
{ at: 0, expect: '20px' },
141+
{ at: 0.3, expect: '17px' },
142+
{ at: 0.6, expect: '14px' },
143+
{ at: 1, expect: '10px' },
144+
{ at: 1.5, expect: '5px' },
145+
]);
146+
test_interpolation({
147+
property: 'row-rule-edge-end-outset',
148+
from: 'inherit',
149+
to: '10px',
150+
}, [
151+
{ at: -0.3, expect: '23px' },
152+
{ at: 0, expect: '20px' },
153+
{ at: 0.3, expect: '17px' },
154+
{ at: 0.6, expect: '14px' },
155+
{ at: 1, expect: '10px' },
156+
{ at: 1.5, expect: '5px' },
157+
]);
158+
test_interpolation({
159+
property: 'row-rule-interior-start-outset',
160+
from: 'inherit',
161+
to: '10px',
162+
}, [
163+
{ at: -0.3, expect: '23px' },
164+
{ at: 0, expect: '20px' },
165+
{ at: 0.3, expect: '17px' },
166+
{ at: 0.6, expect: '14px' },
167+
{ at: 1, expect: '10px' },
168+
{ at: 1.5, expect: '5px' },
169+
]);
170+
test_interpolation({
171+
property: 'row-rule-interior-end-outset',
58172
from: 'inherit',
59173
to: '10px',
60174
}, [
@@ -67,7 +181,43 @@
67181
]);
68182

69183
test_interpolation({
70-
property: 'row-rule-outset',
184+
property: 'row-rule-edge-start-outset',
185+
from: 'unset',
186+
to: '10px',
187+
}, [
188+
{ at: -0.3, expect: '-3px' },
189+
{ at: 0, expect: '0px' },
190+
{ at: 0.3, expect: '3px' },
191+
{ at: 0.6, expect: '6px' },
192+
{ at: 1, expect: '10px' },
193+
{ at: 1.5, expect: '15px' },
194+
]);
195+
test_interpolation({
196+
property: 'row-rule-edge-end-outset',
197+
from: 'unset',
198+
to: '10px',
199+
}, [
200+
{ at: -0.3, expect: '-3px' },
201+
{ at: 0, expect: '0px' },
202+
{ at: 0.3, expect: '3px' },
203+
{ at: 0.6, expect: '6px' },
204+
{ at: 1, expect: '10px' },
205+
{ at: 1.5, expect: '15px' },
206+
]);
207+
test_interpolation({
208+
property: 'row-rule-interior-start-outset',
209+
from: 'unset',
210+
to: '40%',
211+
}, [
212+
{ at: -0.3, expect: '53%' },
213+
{ at: 0, expect: '50%' },
214+
{ at: 0.3, expect: '47%' },
215+
{ at: 0.6, expect: '44%' },
216+
{ at: 1, expect: '40%' },
217+
{ at: 1.5, expect: '35%' },
218+
]);
219+
test_interpolation({
220+
property: 'row-rule-interior-end-outset',
71221
from: 'unset',
72222
to: '40%',
73223
}, [
@@ -80,11 +230,47 @@
80230
]);
81231

82232
test_interpolation({
83-
property: 'row-rule-outset',
233+
property: 'row-rule-edge-start-outset',
234+
from: '-5px',
235+
to: '5px'
236+
}, [
237+
{ at: -0.3, expect: '-8px' }, // row-rule-edge-start-outset can be negative
238+
{ at: 0, expect: '-5px' },
239+
{ at: 0.3, expect: '-2px' },
240+
{ at: 0.6, expect: '1px' },
241+
{ at: 1, expect: '5px' },
242+
{ at: 1.5, expect: '10px' },
243+
]);
244+
test_interpolation({
245+
property: 'row-rule-edge-end-outset',
246+
from: '-5px',
247+
to: '5px'
248+
}, [
249+
{ at: -0.3, expect: '-8px' }, // row-rule-edge-end-outset can be negative
250+
{ at: 0, expect: '-5px' },
251+
{ at: 0.3, expect: '-2px' },
252+
{ at: 0.6, expect: '1px' },
253+
{ at: 1, expect: '5px' },
254+
{ at: 1.5, expect: '10px' },
255+
]);
256+
test_interpolation({
257+
property: 'row-rule-interior-start-outset',
84258
from: '-5px',
85259
to: '5px'
86260
}, [
87-
{ at: -0.3, expect: '-8px' }, // row-rule-outset can be negative
261+
{ at: -0.3, expect: '-8px' }, // row-rule-interior-start-outset can be negative
262+
{ at: 0, expect: '-5px' },
263+
{ at: 0.3, expect: '-2px' },
264+
{ at: 0.6, expect: '1px' },
265+
{ at: 1, expect: '5px' },
266+
{ at: 1.5, expect: '10px' },
267+
]);
268+
test_interpolation({
269+
property: 'row-rule-interior-end-outset',
270+
from: '-5px',
271+
to: '5px'
272+
}, [
273+
{ at: -0.3, expect: '-8px' }, // row-rule-interior-end-outset can be negative
88274
{ at: 0, expect: '-5px' },
89275
{ at: 0.3, expect: '-2px' },
90276
{ at: 0.6, expect: '1px' },
@@ -93,7 +279,43 @@
93279
]);
94280

95281
test_interpolation({
96-
property: 'row-rule-outset',
282+
property: 'row-rule-edge-start-outset',
283+
from: '100%',
284+
to: '1px',
285+
}, [
286+
{ at: -0.3, expect: 'calc(130% - 0.3px)' },
287+
{ at: 0, expect: '100%' },
288+
{ at: 0.3, expect: 'calc(70% + 0.3px)' },
289+
{ at: 0.6, expect: 'calc(40% + 0.6px)' },
290+
{ at: 1, expect: 'calc(0% + 1px)' },
291+
{ at: 1.5, expect: 'calc(-50% + 1.5px)' },
292+
]);
293+
test_interpolation({
294+
property: 'row-rule-edge-end-outset',
295+
from: '100%',
296+
to: '1px',
297+
}, [
298+
{ at: -0.3, expect: 'calc(130% - 0.3px)' },
299+
{ at: 0, expect: '100%' },
300+
{ at: 0.3, expect: 'calc(70% + 0.3px)' },
301+
{ at: 0.6, expect: 'calc(40% + 0.6px)' },
302+
{ at: 1, expect: 'calc(0% + 1px)' },
303+
{ at: 1.5, expect: 'calc(-50% + 1.5px)' },
304+
]);
305+
test_interpolation({
306+
property: 'row-rule-interior-start-outset',
307+
from: '100%',
308+
to: '1px',
309+
}, [
310+
{ at: -0.3, expect: 'calc(130% - 0.3px)' },
311+
{ at: 0, expect: '100%' },
312+
{ at: 0.3, expect: 'calc(70% + 0.3px)' },
313+
{ at: 0.6, expect: 'calc(40% + 0.6px)' },
314+
{ at: 1, expect: 'calc(0% + 1px)' },
315+
{ at: 1.5, expect: 'calc(-50% + 1.5px)' },
316+
]);
317+
test_interpolation({
318+
property: 'row-rule-interior-end-outset',
97319
from: '100%',
98320
to: '1px',
99321
}, [
@@ -106,7 +328,43 @@
106328
]);
107329

108330
test_interpolation({
109-
property: 'row-rule-outset',
331+
property: 'row-rule-edge-start-outset',
332+
from: '10px',
333+
to: '10%',
334+
}, [
335+
{ at: -0.3, expect: 'calc(-3% + 13px)' },
336+
{ at: 0, expect: 'calc(0% + 10px)' },
337+
{ at: 0.3, expect: 'calc(3% + 7px)' },
338+
{ at: 0.6, expect: 'calc(6% + 4px)' },
339+
{ at: 1, expect: '10%' },
340+
{ at: 1.5, expect: 'calc(15% - 5px)' },
341+
]);
342+
test_interpolation({
343+
property: 'row-rule-edge-end-outset',
344+
from: '10px',
345+
to: '10%',
346+
}, [
347+
{ at: -0.3, expect: 'calc(-3% + 13px)' },
348+
{ at: 0, expect: 'calc(0% + 10px)' },
349+
{ at: 0.3, expect: 'calc(3% + 7px)' },
350+
{ at: 0.6, expect: 'calc(6% + 4px)' },
351+
{ at: 1, expect: '10%' },
352+
{ at: 1.5, expect: 'calc(15% - 5px)' },
353+
]);
354+
test_interpolation({
355+
property: 'row-rule-interior-start-outset',
356+
from: '10px',
357+
to: '10%',
358+
}, [
359+
{ at: -0.3, expect: 'calc(-3% + 13px)' },
360+
{ at: 0, expect: 'calc(0% + 10px)' },
361+
{ at: 0.3, expect: 'calc(3% + 7px)' },
362+
{ at: 0.6, expect: 'calc(6% + 4px)' },
363+
{ at: 1, expect: '10%' },
364+
{ at: 1.5, expect: 'calc(15% - 5px)' },
365+
]);
366+
test_interpolation({
367+
property: 'row-rule-interior-end-outset',
110368
from: '10px',
111369
to: '10%',
112370
}, [

0 commit comments

Comments
 (0)