1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS animaitons with color-mix</title>
</head>
<style>
@keyframes missing-from-legacy-to {
to { background-color: rgb(0, 255, 0); }
}
@keyframes missing-to-legacy-from {
from { background-color: rgb(0, 255, 0); }
}
@keyframes missing-from-srgb-to {
to { background-color: color(srgb 0 1 0); }
}
@keyframes missing-to-srgb-from {
from { background-color: color(srgb 0 1 0); }
}
@keyframes missing-from-rgba-to {
to { background-color: rgba(255, 255, 255, 0.75); }
}
@keyframes missing-to-rgba-from {
from { background-color: rgba(255, 255, 255, 0.75); }
}
#target {
color: black;
background-color: color-mix(in srgb, white 50%, currentColor);
animation-duration: 1s;
animation-timing-function: linear;
animation-play-state: paused;
animation-fill-mode: forwards;
height: 100px;
width: 100px;
}
.missing-from-legacy-to {
animation-name: missing-from-legacy-to;
}
.missing-to-legacy-from {
animation-name: missing-to-legacy-from;
}
.missing-from-srgb-to {
animation-name: missing-from-srgb-to;
}
.missing-to-srgb-from {
animation-name: missing-to-srgb-from;
}
.missing-from-rgba-to {
background-color: color-mix(in srgb, transparent 50%, currentColor);
animation-name: missing-from-rgba-to;
}
.missing-to-rgba-from {
background-color: color-mix(in srgb, transparent 50%, currentColor);
animation-name: missing-to-rgba-from;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<script src="/css/support/color-testcommon.js"></script>
<body>
<div id="target"></div>
<div id="test"></div>
</body>
<script>
'use strict';
async function runAnimationTest(t, name, expected_colors) {
const target = document.getElementById('target');
target.classList.add(name);
t.add_cleanup(() => {
target.classList.remove(name);
});
const anim = document.getAnimations()[0];
await anim.ready;
expected_colors.forEach(data => {
anim.currentTime = 1000 * data.at;
const actual = getComputedStyle(target).backgroundColor;
const expected = data.value;
assert_oklab_color(
actual, expected,
`Background color at ${100*data.at}% animation progress`);
});
}
const gray_to_green = [
{ at: 0, value: 'oklab(0.5981 0.0000 0.0000)' },
{ at: 0.25, value: 'oklab(0.6652 -0.0584 0.0449)' },
{ at: 0.5, value: 'oklab(0.7323 -0.1169 0.0898)' },
{ at: 0.75, value: 'oklab(0.7994 -0.1754 0.1346)' },
{ at: 1, value: 'oklab(0.8664 -0.2338 0.1795)' }
];
const green_to_gray = [
{ at: 0, value: 'oklab(0.8664 -0.2338 0.1795)' },
{ at: 0.25, value: 'oklab(0.7994 -0.1754 0.1346)' },
{ at: 0.5, value: 'oklab(0.7323 -0.1169 0.0898)' },
{ at: 0.75, value: 'oklab(0.6652 -0.0584 0.0449)' },
{ at: 1, value: 'oklab(0.5981 0.0000 0.0000)' }
];
const translucent_black_to_white = [
{ at: 0, value: 'oklab(0.5981 0 0)' },
{ at: 0.25, value: 'oklab(0.6784 0 0 / 0.9373)' },
{ at: 0.5, value: 'oklab(0.7702 0 0 / 0.8745)' },
{ at: 0.75, value: 'oklab(0.8762 0 0 / 0.8118)' },
{ at: 1, value: 'oklab(1 0 0 / 0.75)' }
];
const translucent_white_to_black = [
{ at: 0, value: 'oklab(1 0 0 / 0.75)' },
{ at: 0.25, value: 'oklab(0.8762 0 0 / 0.8118)' },
{ at: 0.5, value: 'oklab(0.7702 0 0 / 0.8745)' },
{ at: 0.75, value: 'oklab(0.6784 0 0 / 0.9373)' },
{ at: 1, value: 'oklab(0.5981 0 0)' }
];
window.onload = async () => {
promise_test(t => {
return runAnimationTest(t, 'missing-from-legacy-to', gray_to_green);
}, 'Animate from neutral keyframe with color-mix to legacy rgb');
promise_test(t => {
return runAnimationTest(t, 'missing-to-legacy-from', green_to_gray);
}, 'Animate from legacy rgb to neutral keyframe with color-mix');
promise_test(t => {
return runAnimationTest(t, 'missing-from-srgb-to', gray_to_green);
}, 'Animate from neutral keyframe with color-mix to srgb');
promise_test(t => {
return runAnimationTest(t, 'missing-to-srgb-from', green_to_gray);
}, 'Animate from srgb to neutral keyframe with color-mix');
promise_test(t => {
return runAnimationTest(t, 'missing-from-rgba-to',
translucent_black_to_white);
}, 'Animate from color-mix with transparency to legacy rgba');
promise_test(t => {
return runAnimationTest(t, 'missing-to-rgba-from',
translucent_white_to_black);
}, 'Animate from legacy rgba to color-mix with transparency');
};
</script>
</html>
|
