Skip to content

Commit ec4cb46

Browse files
Javier Contreras Tenoriochromium-wpt-export-bot
Javier Contreras Tenorio
authored and
chromium-wpt-export-bot
committed
[gap-decorations] Base interpolation for *-rule-color
This CL implements basic interpolation for row-rule-color and column-rule-color properties for CSSGapDecorations. This CL only implements the basic interpolation for the color properties, width properties were implemented in previous CL. 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 `InterpolableColor`. The followup CL will account for the `repeat` syntax. Bug: 357648037, 419066541 Change-Id: I94c2b1694a43ae539d4d60467579c6871d36f4b9 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6701172 Reviewed-by: Robert Flack <[email protected]> Reviewed-by: Alison Maher <[email protected]> Commit-Queue: Javier Contreras <[email protected]> Cr-Commit-Position: refs/heads/main@{#1487261}
1 parent ca5abb7 commit ec4cb46

4 files changed

+186
-0
lines changed

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>gap decorations row-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 row-rule-color 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.rowRuleWidth = '10px';
18+
target.style.rowRuleColor = 'black';
19+
var animation = target.animate([{}, {rowRuleColor: 'rgb(255, 0 , 0)'}], 1000);
20+
animation.pause();
21+
animation.currentTime = 500;
22+
assert_equals(getComputedStyle(target).rowRuleColor, 'rgb(128, 0, 0)');
23+
}, 'gap decorations row-rule-color supports neutral keyframe.');
24+
</script>
25+
</body>
26+
</html>

‎css/css-gaps/animation/gap-decorations-color-neutral-keyframe-002.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.columnRuleStyle = 'solid';
17+
target.style.columnRuleColor = 'black black black';
18+
var animation = target.animate([{}, {columnRuleColor: 'red blue rgb(255, 0, 0)'}], 1000);
19+
animation.pause();
20+
animation.currentTime = 500;
21+
assert_equals(getComputedStyle(target).columnRuleColor, 'rgb(128, 0, 0) rgb(0, 0, 128) rgb(128, 0, 0)');
22+
}, 'gap decorations column-rule-color value list supports neutral keyframe.');
23+
</script>
24+
</body>
25+
</html>

‎css/css-gaps/animation/gap-decorations-color-neutral-keyframe-003.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 = 'black black black';
18+
var animation = target.animate([{}, {rowRuleColor: 'red blue rgb(255, 0, 0)'}], 1000);
19+
animation.pause();
20+
animation.currentTime = 500;
21+
assert_equals(getComputedStyle(target).rowRuleColor, 'rgb(128, 0, 0) rgb(0, 0, 128) 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/row-rule-color-interpolation.html

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<!DOCTYPE html>
2+
<meta charset="UTF-8">
3+
<title>row-rule-color interpolation</title>
4+
<link rel="author" title="Javier Contreras" href="mailto:[email protected]">
5+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#column-row-rule-color">
6+
<script src="/resources/testharness.js"></script>
7+
<script src="/resources/testharnessreport.js"></script>
8+
<script src="/css/support/interpolation-testcommon.js"></script>
9+
<style>
10+
.parent {
11+
row-rule-color: blue;
12+
}
13+
14+
.target {
15+
display: flex;
16+
width: 20px;
17+
row-gap: 10px
18+
height: 100px;
19+
background-color: black;
20+
color: orange;
21+
row-rule-style: solid;
22+
row-rule-width: 10px;
23+
row-rule-color: yellow;
24+
}
25+
</style>
26+
<body>
27+
<script>
28+
test_interpolation({
29+
property: 'row-rule-color',
30+
from: neutralKeyframe,
31+
to: 'lime',
32+
}, [
33+
{at: -5, expect: 'rgb(255, 255, 0)'},
34+
{at: -0.4, expect: 'rgb(255, 255, 0)'},
35+
{at: 0, expect: 'rgb(255, 255, 0)'},
36+
{at: 0.2, expect: 'rgb(204, 255, 0)'},
37+
{at: 0.6, expect: 'rgb(102, 255, 0)'},
38+
{at: 1, expect: 'rgb(0, 255, 0)'},
39+
{at: 1.5, expect: 'rgb(0, 255, 0)'},
40+
]);
41+
42+
test_interpolation({
43+
property: 'row-rule-color',
44+
from: 'initial',
45+
to: 'lime',
46+
}, [
47+
{at: -5, expect: 'rgb(255, 0, 0)'},
48+
{at: -0.4, expect: 'rgb(255, 129, 0)'},
49+
{at: 0, expect: 'rgb(255, 165, 0)'},
50+
{at: 0.2, expect: 'rgb(204, 183, 0)'},
51+
{at: 0.6, expect: 'rgb(102, 219, 0)'},
52+
{at: 1, expect: 'rgb(0, 255, 0)'},
53+
{at: 1.5, expect: 'rgb(0, 255, 0)'},
54+
]);
55+
56+
test_interpolation({
57+
property: 'row-rule-color',
58+
from: 'inherit',
59+
to: 'lime',
60+
}, [
61+
{at: -5, expect: 'rgb(0, 0, 255)'},
62+
{at: -0.4, expect: 'rgb(0, 0, 255)'},
63+
{at: 0, expect: 'rgb(0, 0, 255)'},
64+
{at: 0.2, expect: 'rgb(0, 51, 204)'},
65+
{at: 0.6, expect: 'rgb(0, 153, 102)'},
66+
{at: 1, expect: 'rgb(0, 255, 0)'},
67+
{at: 1.5, expect: 'rgb(0, 255, 0)'},
68+
]);
69+
70+
test_interpolation({
71+
property: 'row-rule-color',
72+
from: 'unset',
73+
to: 'lime',
74+
}, [
75+
{at: -5, expect: 'rgb(255, 0, 0)'},
76+
{at: -0.4, expect: 'rgb(255, 129, 0)'},
77+
{at: 0, expect: 'rgb(255, 165, 0)'},
78+
{at: 0.2, expect: 'rgb(204, 183, 0)'},
79+
{at: 0.6, expect: 'rgb(102, 219, 0)'},
80+
{at: 1, expect: 'rgb(0, 255, 0)'},
81+
{at: 1.5, expect: 'rgb(0, 255, 0)'},
82+
]);
83+
84+
test_interpolation({
85+
property: 'row-rule-color',
86+
from: 'orange',
87+
to: 'blue'
88+
}, [
89+
{at: -5, expect: '#ffff00'},
90+
{at: -0.4, expect: '#ffe700'},
91+
{at: 0, expect: 'orange'}, // ffa500
92+
{at: 0.2, expect: '#cc8433'},
93+
{at: 0.6, expect: '#664299'},
94+
{at: 1, expect: 'blue'}, // 0000ff
95+
{at: 1.5, expect: 'blue'}
96+
]);
97+
98+
// Lists can only be interpolated if they have the same length.
99+
test_no_interpolation({
100+
property: 'row-rule-color',
101+
from: neutralKeyframe,
102+
to: 'red blue blue',
103+
});
104+
test_no_interpolation({
105+
property: 'row-rule-color',
106+
from: 'red blue green',
107+
to: 'red',
108+
});
109+
</script>
110+
</body>

0 commit comments

Comments
 (0)