Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(208)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/web-animations-api/animations-responsive-to-color-change.html

Issue 292173009: Web Animations - responsive interpolation (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@0519_MySeparation
Patch Set: applyAndSnapshotAnimatableValue Created 6 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « LayoutTests/web-animations-api/animations-responsive-textIndent.html ('k') | LayoutTests/web-animations-api/animations-responsive-to-color-change-expected.txt » ('j') | Source/core/animation/StringKeyframe.h » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <script src="../resources/testharness.js"></script> 2 <script src="../resources/testharness.js"></script>
3 <script src="../resources/testharnessreport.js"></script> 3 <script src="../resources/testharnessreport.js"></script>
4 4 <style>
5 a { visibility: hidden; }
6 </style>
7
8 <div id='container'>
9 <div id='child'></div>
10 </div>
5 <div id='element'></div> 11 <div id='element'></div>
6 12
13 <a href='example.com/unvisited' id='unvisited'><div id='unvisitedchild'>Unvisite d</div></a>
14 <a href='' id='visited'><div id='visitedchild'>Visited</div></a>
15
7 <script> 16 <script>
8 17
18 var container = document.getElementById('container');
19 var child = document.getElementById('child');
9 var element = document.getElementById('element'); 20 var element = document.getElementById('element');
10 21 var unvisited = document.getElementById('unvisited');
11 var keyframes = [ 22 var visited = document.getElementById('visited');
12 {backgroundColor: 'currentColor', offset: 0}, 23 var unvisitedChild = document.getElementById('unvisitedchild');
13 {backgroundColor: '#004400', offset: 1} 24 var visitedChild = document.getElementById('visitedchild');
14 ]; 25
15 26 test(function() {
16 test(function() { 27 var keyframes = [
17 element.style.color = '#CC0000'; 28 {backgroundColor: 'currentColor'},
18 var player = element.animate(keyframes, 10); 29 {backgroundColor: 'rgb(0, 68, 0)'}
19 player.pause(); 30 ];
20 player.currentTime = 5; 31
21 element.style.color = '#0000CC'; 32 element.style.color = 'rgb(204, 0, 0)';
33 var player = element.animate(keyframes, 10);
34 player.pause();
35 player.currentTime = 5;
36 element.style.color = 'rgb(0, 0, 204)';
22 assert_equals(getComputedStyle(element).backgroundColor, 'rgb(0, 34, 102)'); 37 assert_equals(getComputedStyle(element).backgroundColor, 'rgb(0, 34, 102)');
23 }, 'Colors responsive to style changes'); 38 }, 'Background color responsive to currentColor changes');
39
40 test(function() {
41 var keyframes = [
42 {backgroundColor: 'rgba(250, 240, 220, 0.431372549)'},
43 {backgroundColor: 'currentColor'}
44 ];
45
46 element.style.color = 'rgb(204, 0, 0)';
47 var player = element.animate(keyframes, 10);
48 player.pause();
49 player.currentTime = 3;
50 element.style.color = 'rgba(160, 190, 180, 0.980392157)';
51 assert_equals(getComputedStyle(element).backgroundColor, 'rgba(206, 215, 200 , 0.596078)');
52 }, 'Color interpolation uses pre-multiplied colors');
53
54 test(function() {
55 var keyframes = [
56 {
57 borderBottomColor: 'currentColor',
58 borderLeftColor: 'currentColor',
59 borderRightColor: 'currentColor',
60 borderTopColor: 'currentColor',
61 offset: 0
62 },
63 {
64 borderBottomColor: 'rgb(0, 68, 0)',
65 borderLeftColor: 'rgb(0, 70, 0)',
66 borderRightColor: 'rgb(0, 72, 0)',
67 borderTopColor: 'rgb(0, 74, 0)',
68 offset: 1
69 }
70 ];
71
72 element.style.color = 'rgb(204, 0, 0)';
73 var player = element.animate(keyframes, 10);
74 player.pause();
75 player.currentTime = 5;
76 element.style.color = 'rgb(0, 0, 204)';
77 assert_equals(getComputedStyle(element).borderBottomColor, 'rgb(0, 34, 102)' );
78 assert_equals(getComputedStyle(element).borderLeftColor, 'rgb(0, 35, 102)');
79 assert_equals(getComputedStyle(element).borderRightColor, 'rgb(0, 36, 102)') ;
80 assert_equals(getComputedStyle(element).borderTopColor, 'rgb(0, 37, 102)');
81 }, 'Border color responsive to currentColor changes');
82
83 test(function() {
84 var keyframes = [
85 {
86 borderBottomColor: 'currentColor',
87 borderLeftColor: 'currentColor',
88 borderRightColor: 'currentColor',
89 borderTopColor: 'currentColor',
90 offset: 0
91 },
92 {
93 borderBottomColor: 'rgb(0, 68, 0)',
94 borderLeftColor: 'rgb(0, 70, 0)',
95 borderRightColor: 'rgb(0, 72, 0)',
96 borderTopColor: 'rgb(0, 74, 0)',
97 offset: 1
98 }
99 ];
100
101 element.style.color = 'rgb(204, 0, 0)';
102 var player = element.animate(keyframes, 10);
103 player.pause();
104 player.currentTime = 5;
105 element.style.color = 'rgb(0, 0, 200)';
106 assert_equals(getComputedStyle(element).borderBottomColor, 'rgb(0, 34, 100)' );
107 assert_equals(getComputedStyle(element).borderLeftColor, 'rgb(0, 35, 100)');
108 assert_equals(getComputedStyle(element).borderRightColor, 'rgb(0, 36, 100)') ;
109 assert_equals(getComputedStyle(element).borderTopColor, 'rgb(0, 37, 100)');
110 }, 'Border color responsive to currentColor changes again');
111
112 test(function() {
113 var keyframes = [
114 {outlineColor: 'currentColor'},
115 {outlineColor: 'rgb(0, 68, 0)'}
116 ];
117
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, 204)';
123 assert_equals(getComputedStyle(element).outlineColor, 'rgb(0, 34, 102)');
124 }, 'Outline color responsive to currentColor changes');
125
126 test(function() {
127 var keyframes = [
128 {textDecorationColor: 'rgb(0, 68, 0)'},
129 {textDecorationColor: 'currentColor'}
130 ];
131
132 element.style.color = 'rgb(204, 0, 0)';
133 var player = element.animate(keyframes, 10);
134 player.pause();
135 player.currentTime = 5;
136 element.style.color = 'rgb(0, 0, 204)';
137 assert_equals(getComputedStyle(element).textDecorationColor, 'rgb(0, 34, 102 )');
138 }, 'Text decoration color responsive to currentColor changes');
139
140 test(function() {
141 var keyframes = [
142 {color: 'currentColor'},
143 {color: 'rgb(0, 68, 0)'}
144 ];
145
146 child.style.color = 'rgb(10, 10, 10)'; // Should be ignored
147 container.style.color = 'rgb(204, 0, 0)';
148 var player = child.animate(keyframes, 10);
149 player.pause();
150 player.currentTime = 5;
151 container.style.color = 'rgb(0, 0, 204)';
152 assert_equals(getComputedStyle(child).color, 'rgb(0, 34, 102)');
153 player.currentTime = 7.5;
154 container.style.color = 'rgb(136, 0, 136)';
155 assert_equals(getComputedStyle(child).color, 'rgb(34, 51, 34)');
156 }, 'Color responsive to parent currentColor changes');
157
158 test(function() {
159 var keyframes = [
160 {color: 'rgb(0, 68, 0)'},
161 {color: 'currentColor'}
162 ];
163
164 child.style.color = 'rgb(10, 10, 10)'; // Should be ignored
165 container.style.color = 'rgb(204, 0, 0)';
166 var player = child.animate(keyframes, 10);
167 player.pause();
168 player.currentTime = 5;
169 container.style.color = 'rgb(0, 0, 204)';
170 assert_equals(getComputedStyle(child).color, 'rgb(0, 34, 102)');
171 player.currentTime = 7.5;
172 container.style.color = 'rgb(136, 0, 68)';
173 assert_equals(getComputedStyle(child).color, 'rgb(102, 17, 51)');
174 }, 'Color responsive to repeated parent currentColor changes');
175
176 test(function() {
177 var keyframes = [
178 {backgroundColor: 'currentColor'},
179 {backgroundColor: 'rgb(100, 150, 200)'}
180 ];
181
182 var player1 = unvisited.animate(keyframes, 10);
183 var player2 = visited.animate(keyframes, 10);
184 player1.pause();
185 player2.pause();
186 player1.currentTime = 5;
187 player2.currentTime = 5;
188 assert_equals(getComputedStyle(unvisited).backgroundColor, getComputedStyle( visited).backgroundColor);
189 }, 'Color animations do not expose visited status');
190
191 test(function() {
192 var keyframes = [
193 {color: 'rgb(100, 150, 200)'},
194 {color: 'currentColor'}
195 ];
196
197 var player1 = unvisitedChild.animate(keyframes, 10);
198 var player2 = visitedChild.animate(keyframes, 10);
199 player1.pause();
200 player2.pause();
201 player1.currentTime = 5;
202 player2.currentTime = 5;
203 assert_equals(getComputedStyle(unvisitedChild).color, getComputedStyle(visit edChild).color);
204 }, 'Color animations do not expose parent visited status');
24 205
25 </script> 206 </script>
OLDNEW
« no previous file with comments | « LayoutTests/web-animations-api/animations-responsive-textIndent.html ('k') | LayoutTests/web-animations-api/animations-responsive-to-color-change-expected.txt » ('j') | Source/core/animation/StringKeyframe.h » ('J')

Powered by Google App Engine
This is Rietveld 408576698