Skip to content

Commit 0928b53

Browse files
Javier Contreras Tenoriochromium-wpt-export-bot
Javier Contreras Tenorio
authored and
chromium-wpt-export-bot
committed
[gap-decorations] Interpolation with repeaters for *-rule-color
This CL implements Interpolation for *-rule-color for repeaters. In order to handle repeaters, we add a new InterpolableType `InterpolableGapDataRepeater` which handles interpolation for repeaters by essentially keeping a member InterpolableList of the values in the repeater and interpolating those individually through that type. The overall structure of interpolation for gap decorations will be as follows: `CSSGapLengthListInterpolationType` handles interpolation for `GapDataList` We then hand off the actual interpolation with an `InterpolableList` of `InterpolableLength`, `InterpolableGapDataRepeater` (which itself contains an `InterpolableList` of `InterpolableLengths`) and `InterpolableColor`. InterpolableGapDataRepeater is templated, in order to handle for interpolation for column/row-rule-color as well as width. For now we are implementing mirroring the behavior of `grid-template` interpolation (which can be a list of values with repeaters), in which we only interpolate if the length of the lists match. If this changes after spec discussions then the test will be updated. https://www.w3.org/TR/css-gaps-1/#lists-repeat Bug: 357648037, 419066541 Change-Id: I317b0c059a901d8eafa722aa71b878c4ecde3eda Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6734136 Commit-Queue: Javier Contreras <[email protected]> Reviewed-by: Robert Flack <[email protected]> Cr-Commit-Position: refs/heads/main@{#1498969}
1 parent df20784 commit 0928b53

4 files changed

+230
-0
lines changed

‎css/css-gaps/animation/gap-decorations-color-neutral-keyframe-004.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>gap decorations column-rule-color neutral keyframe</title>
6+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#column-row-rule-color">
7+
<meta name="assert" content="gap decorations column-rule-color value list supports neutral keyframe.">
8+
<script src="/resources/testharness.js"></script>
9+
<script src="/resources/testharnessreport.js"></script>
10+
<script src="/css/support/interpolation-testcommon.js"></script>
11+
</head>
12+
<body>
13+
<div id="target"></div>
14+
<script>
15+
test(() => {
16+
target.style.rowRuleStyle = 'solid';
17+
target.style.rowRuleColor = 'repeat(3, black black) repeat(1, red)';
18+
var animation = target.animate([{}, {rowRuleColor: 'repeat(3, red red) repeat(1, black)'}], 1000);
19+
animation.pause();
20+
animation.currentTime = 500;
21+
assert_equals(getComputedStyle(target).rowRuleColor, 'repeat(3, rgb(128, 0, 0) rgb(128, 0, 0)) repeat(1, rgb(128, 0, 0))');
22+
}, 'gap decorations row-rule-color value list supports neutral keyframe.');
23+
</script>
24+
</body>
25+
</html>

‎css/css-gaps/animation/gap-decorations-color-neutral-keyframe-005.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>gap decorations column-rule-color neutral keyframe</title>
6+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#column-row-rule-color">
7+
<meta name="assert" content="gap decorations column-rule-color value list supports neutral keyframe.">
8+
<script src="/resources/testharness.js"></script>
9+
<script src="/resources/testharnessreport.js"></script>
10+
<script src="/css/support/interpolation-testcommon.js"></script>
11+
</head>
12+
<body>
13+
<div id="target"></div>
14+
<script>
15+
test(() => {
16+
target.style.rowRuleStyle = 'solid';
17+
target.style.rowRuleColor = 'repeat(3, black black) red red';
18+
var animation = target.animate([{}, {rowRuleColor: 'repeat(3, red red) black black'}], 1000);
19+
animation.pause();
20+
animation.currentTime = 500;
21+
assert_equals(getComputedStyle(target).rowRuleColor, 'repeat(3, rgb(128, 0, 0) rgb(128, 0, 0)) rgb(128, 0, 0) rgb(128, 0, 0)');
22+
}, 'gap decorations row-rule-color value list supports neutral keyframe.');
23+
</script>
24+
</body>
25+
</html>

‎css/css-gaps/animation/rule-color-interpolation-multiple-values-001.html

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>rule-color interpolation</title>
6+
<link rel="author" title="Javier Contreras" href="mailto:[email protected]">
7+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#column-row-rule-color">
8+
<script src="/resources/testharness.js"></script>
9+
<script src="/resources/testharnessreport.js"></script>
10+
<script src="/css/support/interpolation-testcommon.js"></script>
11+
<style>
12+
.parent {
13+
row-rule-style: solid;
14+
row-rule-color: white;
15+
}
16+
17+
.target {
18+
display: flex;
19+
row-gap: 10px;
20+
row-rule-width: 10px;
21+
row-rule-style: solid;
22+
row-rule-color: black black black;
23+
flex-wrap: wrap;
24+
column-rule-color: 10px;
25+
column-rule-style: solid;
26+
column-rule-color: black red blue;
27+
}
28+
</style>
29+
</head>
30+
<body>
31+
<script>
32+
test_interpolation({
33+
property: 'row-rule-color',
34+
from: neutralKeyframe,
35+
to: 'red red red',
36+
}, [
37+
{ at: -0.3, expect: 'black black black' },
38+
{ at: 0, expect: 'black black black' },
39+
{ at: 0.3, expect: 'rgb(77, 0, 0) rgb(77, 0, 0) rgb(77, 0, 0)' },
40+
{ at: 0.6, expect: 'rgb(153, 0, 0) rgb(153, 0, 0) rgb(153, 0, 0)' },
41+
{ at: 1, expect: 'red red red' },
42+
{ at: 1.5, expect: 'red red red' },
43+
]);
44+
45+
test_interpolation({
46+
property: 'column-rule-color',
47+
from: neutralKeyframe,
48+
to: 'red blue red',
49+
}, [
50+
{ at: -0.3, expect: 'black red blue' },
51+
{ at: 0, expect: 'black red blue' },
52+
{ at: 0.3, expect: 'rgb(77, 0, 0) rgb(179, 0, 77) rgb(77, 0, 179)' },
53+
{ at: 0.6, expect: 'rgb(153, 0, 0) rgb(102, 0, 153) rgb(153, 0, 102)' },
54+
{ at: 1, expect: 'red blue red' },
55+
{ at: 1.5, expect: 'red blue red' },
56+
]);
57+
</script>
58+
</body>
59+
</html>

‎css/css-gaps/animation/rule-color-interpolation-repeaters-001.html

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>rule-color interpolation with repeaters</title>
6+
<link rel="author" title="Javier Contreras" href="mailto:[email protected]">
7+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#column-row-rule-color">
8+
<script src="/resources/testharness.js"></script>
9+
<script src="/resources/testharnessreport.js"></script>
10+
<script src="/css/support/interpolation-testcommon.js"></script>
11+
<style>
12+
.parent {
13+
row-rule-style: solid;
14+
row-rule-color: white;
15+
}
16+
17+
.target {
18+
row-gap: 40px;
19+
column-gap: 40px;
20+
row-rule-width: 10px;
21+
row-rule-style: solid;
22+
row-rule-color: black repeat(2, red blue) black;
23+
flex-wrap: wrap;
24+
column-rule-width: 10px;
25+
column-rule-style: solid;
26+
column-rule-color: repeat(2, black red);
27+
}
28+
</style>
29+
</head>
30+
<body>
31+
<script>
32+
// Valid Interpolations:
33+
test_interpolation({
34+
property: 'row-rule-color',
35+
from: neutralKeyframe,
36+
to: 'red repeat(2, black black) blue',
37+
}, [
38+
{ at: -0.3, expect: 'black repeat(2, red blue) black' },
39+
{ at: 0, expect: 'black repeat(2, red blue) black' },
40+
{ at: 0.3, expect: 'rgb(77, 0, 0) repeat(2, rgb(179, 0, 0) rgb(0, 0, 179)) rgb(0, 0, 77)' },
41+
{ at: 0.6, expect: 'rgb(153, 0, 0) repeat(2, rgb(102, 0, 0) rgb(0, 0, 102)) rgb(0, 0, 153)' },
42+
{ at: 1, expect: 'rgb(255, 0, 0) repeat(2, rgb(0, 0, 0) rgb(0, 0, 0)) rgb(0, 0, 255)' },
43+
{ at: 1.5, expect: 'rgb(255, 0, 0) repeat(2, rgb(0, 0, 0) rgb(0, 0, 0)) rgb(0, 0, 255)' },
44+
]);
45+
test_interpolation({
46+
property: 'column-rule-color',
47+
from: neutralKeyframe,
48+
to: 'repeat(2, red black)',
49+
}, [
50+
{ at: -0.3, expect: 'repeat(2, black red)' },
51+
{ at: 0, expect: 'repeat(2, black red)' },
52+
{ at: 0.3, expect: 'repeat(2, rgb(77, 0, 0) rgb(179, 0, 0))' },
53+
{ at: 0.6, expect: 'repeat(2, rgb(153, 0, 0) rgb(102, 0, 0))' },
54+
{ at: 1, expect: 'repeat(2, red black)' },
55+
{ at: 1.5, expect: 'repeat(2, red black)' },
56+
]);
57+
test_interpolation({
58+
property: 'column-rule-color',
59+
from: 'repeat(auto, black black)',
60+
to: 'repeat(auto, blue red)',
61+
}, [
62+
{ at: -0.3, expect: 'repeat(auto, black black)' },
63+
{ at: 0, expect: 'repeat(auto, black black)' },
64+
{ at: 0.3, expect: 'repeat(auto, rgb(0, 0, 77) rgb(77, 0, 0))' },
65+
{ at: 0.6, expect: 'repeat(auto, rgb(0, 0, 153) rgb(153, 0, 0))' },
66+
{ at: 1, expect: 'repeat(auto, rgb(0, 0, 255) rgb(255, 0, 0))' },
67+
{ at: 1.5, expect: 'repeat(auto, rgb(0, 0, 255) rgb(255, 0, 0)' },
68+
]);
69+
70+
// // Shouldn't interpolate, length of the list is different:
71+
test_no_interpolation({
72+
property: 'row-rule-color',
73+
from: neutralKeyframe,
74+
to: 'repeat(2, blue blue) white',
75+
});
76+
test_no_interpolation({
77+
property: 'row-rule-color',
78+
from: neutralKeyframe,
79+
to: 'repeat(2, red red) repeat(2, blue blue)',
80+
});
81+
82+
// // Shouldn't interpolate, repeaters are not compatible:
83+
test_no_interpolation({
84+
property: 'column-rule-color',
85+
from: neutralKeyframe,
86+
to: 'repeat(3, white white)',
87+
});
88+
test_no_interpolation({
89+
property: 'column-rule-color',
90+
from: neutralKeyframe,
91+
to: 'repeat(2, yellow orange green)',
92+
});
93+
test_no_interpolation({
94+
property: 'row-rule-color',
95+
from: neutralKeyframe,
96+
to: 'black repeat(3, red white) blue',
97+
});
98+
test_no_interpolation({
99+
property: 'row-rule-color',
100+
from: neutralKeyframe,
101+
to: 'white repeat(2, blue blue blue) yellow',
102+
});
103+
test_no_interpolation({
104+
property: 'column-rule-color',
105+
from: 'repeat(auto, red black)',
106+
to: 'repeat(3, black red)',
107+
});
108+
test_no_interpolation({
109+
property: 'column-rule-color',
110+
from: 'repeat(auto, black black)',
111+
to: 'repeat(auto, red white yellow)',
112+
});
113+
114+
// // Shouldn't interpolate, repeater and a color are not compatible:
115+
test_no_interpolation({
116+
property: 'column-rule-color',
117+
from: neutralKeyframe,
118+
to: 'white',
119+
});
120+
</script>
121+
</body>

0 commit comments

Comments
 (0)