Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / web-animations-api / animations-responsive-to-color-change.html
blob42b231c6603c177b7ef208eda116baca21c06c40
1 <!DOCTYPE html>
2 <script src="../resources/testharness.js"></script>
3 <script src="../resources/testharnessreport.js"></script>
4 <style>
5 a { visibility: hidden; }
6 </style>
8 <div id='container'>
9 <div id='child'></div>
10 </div>
11 <div id='element'></div>
12 <svg>
13 <rect id='svgElement'></rect>
14 </svg>
16 <a href='example.com/unvisited' id='unvisited'><div id='unvisitedchild'>Unvisited</div></a>
17 <a href='' id='visited'><div id='visitedchild'>Visited</div></a>
19 <script>
21 var container = document.getElementById('container');
22 var child = document.getElementById('child');
23 var element = document.getElementById('element');
24 var unvisited = document.getElementById('unvisited');
25 var visited = document.getElementById('visited');
26 var unvisitedChild = document.getElementById('unvisitedchild');
27 var visitedChild = document.getElementById('visitedchild');
29 test(function() {
30 var keyframes = [
31 {backgroundColor: 'currentColor'},
32 {backgroundColor: 'rgb(0, 68, 0)'}
35 element.style.color = 'rgb(204, 0, 0)';
36 var player = element.animate(keyframes, 10);
37 player.pause();
38 player.currentTime = 5;
39 element.style.color = 'rgb(0, 0, 204)';
40 assert_equals(getComputedStyle(element).backgroundColor, 'rgb(0, 34, 102)');
41 }, 'Background color responsive to currentColor changes');
43 test(function() {
44 var keyframes = [
45 {fill: 'currentColor'},
46 {fill: 'rgb(0, 68, 0)'}
49 svgElement.style.color = 'rgb(204, 0, 0)';
50 var player = svgElement.animate(keyframes, 10);
51 player.pause();
52 player.currentTime = 5;
53 svgElement.style.color = 'rgb(0, 0, 204)';
54 assert_equals(getComputedStyle(svgElement).fill, 'rgb(0, 34, 102)');
55 }, 'Fill color responsive to currentColor changes');
57 test(function() {
58 var keyframes = [
59 {backgroundColor: 'rgba(250, 240, 220, 0.431372549)'},
60 {backgroundColor: 'currentColor'}
63 element.style.color = 'rgb(204, 0, 0)';
64 var player = element.animate(keyframes, 10);
65 player.pause();
66 player.currentTime = 3;
67 element.style.color = 'rgba(160, 190, 180, 0.980392157)';
68 assert_equals(getComputedStyle(element).backgroundColor, 'rgba(206, 215, 200, 0.596078)');
69 }, 'Color interpolation uses pre-multiplied colors');
71 test(function() {
72 var keyframes = [
74 borderBottomColor: 'currentColor',
75 borderLeftColor: 'currentColor',
76 borderRightColor: 'currentColor',
77 borderTopColor: 'currentColor',
78 offset: 0
81 borderBottomColor: 'rgb(0, 68, 0)',
82 borderLeftColor: 'rgb(0, 70, 0)',
83 borderRightColor: 'rgb(0, 72, 0)',
84 borderTopColor: 'rgb(0, 74, 0)',
85 offset: 1
89 element.style.color = 'rgb(204, 0, 0)';
90 var player = element.animate(keyframes, 10);
91 player.pause();
92 player.currentTime = 5;
93 element.style.color = 'rgb(0, 0, 204)';
94 assert_equals(getComputedStyle(element).borderBottomColor, 'rgb(0, 34, 102)');
95 assert_equals(getComputedStyle(element).borderLeftColor, 'rgb(0, 35, 102)');
96 assert_equals(getComputedStyle(element).borderRightColor, 'rgb(0, 36, 102)');
97 assert_equals(getComputedStyle(element).borderTopColor, 'rgb(0, 37, 102)');
98 }, 'Border color responsive to currentColor changes');
100 test(function() {
101 var keyframes = [
103 borderBottomColor: 'currentColor',
104 borderLeftColor: 'currentColor',
105 borderRightColor: 'currentColor',
106 borderTopColor: 'currentColor',
107 offset: 0
110 borderBottomColor: 'rgb(0, 68, 0)',
111 borderLeftColor: 'rgb(0, 70, 0)',
112 borderRightColor: 'rgb(0, 72, 0)',
113 borderTopColor: 'rgb(0, 74, 0)',
114 offset: 1
118 element.style.color = 'rgb(204, 0, 0)';
119 var player = element.animate(keyframes, 10);
120 player.pause();
121 player.currentTime = 5;
122 element.style.color = 'rgb(0, 0, 200)';
123 assert_equals(getComputedStyle(element).borderBottomColor, 'rgb(0, 34, 100)');
124 assert_equals(getComputedStyle(element).borderLeftColor, 'rgb(0, 35, 100)');
125 assert_equals(getComputedStyle(element).borderRightColor, 'rgb(0, 36, 100)');
126 assert_equals(getComputedStyle(element).borderTopColor, 'rgb(0, 37, 100)');
127 }, 'Border color responsive to currentColor changes again');
129 test(function() {
130 var keyframes = [
131 {outlineColor: 'currentColor'},
132 {outlineColor: 'rgb(0, 68, 0)'}
135 element.style.color = 'rgb(204, 0, 0)';
136 var player = element.animate(keyframes, 10);
137 player.pause();
138 player.currentTime = 5;
139 element.style.color = 'rgb(0, 0, 204)';
140 assert_equals(getComputedStyle(element).outlineColor, 'rgb(0, 34, 102)');
141 }, 'Outline color responsive to currentColor changes');
143 test(function() {
144 var keyframes = [
145 {stroke: 'rgb(0, 68, 0)'},
146 {stroke: 'currentColor'}
149 svgElement.style.color = 'rgb(204, 0, 0)';
150 var player = svgElement.animate(keyframes, 10);
151 player.pause();
152 player.currentTime = 5;
153 svgElement.style.color = 'rgb(0, 0, 204)';
154 assert_equals(getComputedStyle(svgElement).stroke, 'rgb(0, 34, 102)');
155 }, 'Stroke color responsive to currentColor changes');
157 test(function() {
158 var keyframes = [
159 {textDecorationColor: 'rgb(0, 68, 0)'},
160 {textDecorationColor: 'currentColor'}
163 element.style.color = 'rgb(204, 0, 0)';
164 var player = element.animate(keyframes, 10);
165 player.pause();
166 player.currentTime = 5;
167 element.style.color = 'rgb(0, 0, 204)';
168 assert_equals(getComputedStyle(element).textDecorationColor, 'rgb(0, 34, 102)');
169 }, 'Text decoration color responsive to currentColor changes');
171 test(function() {
172 var keyframes = [
173 {color: 'currentColor'},
174 {color: 'rgb(0, 68, 0)'}
177 child.style.color = 'rgb(10, 10, 10)'; // Should be ignored
178 container.style.color = 'rgb(204, 0, 0)';
179 var player = child.animate(keyframes, 10);
180 player.pause();
181 player.currentTime = 5;
182 container.style.color = 'rgb(0, 0, 204)';
183 assert_equals(getComputedStyle(child).color, 'rgb(0, 34, 102)');
184 player.currentTime = 7.5;
185 container.style.color = 'rgb(136, 0, 136)';
186 assert_equals(getComputedStyle(child).color, 'rgb(34, 51, 34)');
187 }, 'Color responsive to parent currentColor changes');
189 test(function() {
190 var keyframes = [
191 {color: 'rgb(0, 68, 0)'},
192 {color: 'currentColor'}
195 child.style.color = 'rgb(10, 10, 10)'; // Should be ignored
196 container.style.color = 'rgb(204, 0, 0)';
197 var player = child.animate(keyframes, 10);
198 player.pause();
199 player.currentTime = 5;
200 container.style.color = 'rgb(0, 0, 204)';
201 assert_equals(getComputedStyle(child).color, 'rgb(0, 34, 102)');
202 player.currentTime = 7.5;
203 container.style.color = 'rgb(136, 0, 68)';
204 assert_equals(getComputedStyle(child).color, 'rgb(102, 17, 51)');
205 }, 'Color responsive to repeated parent currentColor changes');
207 test(function() {
208 var keyframes = [
209 {backgroundColor: 'currentColor'},
210 {backgroundColor: 'rgb(100, 150, 200)'}
213 var player1 = unvisited.animate(keyframes, 10);
214 var player2 = visited.animate(keyframes, 10);
215 player1.pause();
216 player2.pause();
217 player1.currentTime = 5;
218 player2.currentTime = 5;
219 assert_equals(getComputedStyle(unvisited).backgroundColor, getComputedStyle(visited).backgroundColor);
220 }, 'Color animations do not expose visited status');
222 test(function() {
223 var keyframes = [
224 {color: 'rgb(100, 150, 200)'},
225 {color: 'currentColor'}
228 var player1 = unvisitedChild.animate(keyframes, 10);
229 var player2 = visitedChild.animate(keyframes, 10);
230 player1.pause();
231 player2.pause();
232 player1.currentTime = 5;
233 player2.currentTime = 5;
234 assert_equals(getComputedStyle(unvisitedChild).color, getComputedStyle(visitedChild).color);
235 }, 'Color animations do not expose parent visited status');
237 </script>