| OLD | NEW |
|---|
| (Empty) |
| 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> | |
| 7 | |
| 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> | |
| 15 | |
| 16 <a href='example.com/unvisited' id='unvisited'><div id='unvisitedchild'>Unvisite
d</div></a> | |
| 17 <a href='' id='visited'><div id='visitedchild'>Visited</div></a> | |
| 18 | |
| 19 <script> | |
| 20 | |
| 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'); | |
| 28 | |
| 29 test(function() { | |
| 30 var keyframes = [ | |
| 31 {backgroundColor: 'currentColor'}, | |
| 32 {backgroundColor: 'rgb(0, 68, 0)'} | |
| 33 ]; | |
| 34 | |
| 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'); | |
| 42 | |
| 43 test(function() { | |
| 44 var keyframes = [ | |
| 45 {fill: 'currentColor'}, | |
| 46 {fill: 'rgb(0, 68, 0)'} | |
| 47 ]; | |
| 48 | |
| 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'); | |
| 56 | |
| 57 test(function() { | |
| 58 var keyframes = [ | |
| 59 {backgroundColor: 'rgba(250, 240, 220, 0.431372549)'}, | |
| 60 {backgroundColor: 'currentColor'} | |
| 61 ]; | |
| 62 | |
| 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.596)'); | |
| 69 }, 'Color interpolation uses pre-multiplied colors'); | |
| 70 | |
| 71 test(function() { | |
| 72 var keyframes = [ | |
| 73 { | |
| 74 borderBottomColor: 'currentColor', | |
| 75 borderLeftColor: 'currentColor', | |
| 76 borderRightColor: 'currentColor', | |
| 77 borderTopColor: 'currentColor', | |
| 78 offset: 0 | |
| 79 }, | |
| 80 { | |
| 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 | |
| 86 } | |
| 87 ]; | |
| 88 | |
| 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'); | |
| 99 | |
| 100 test(function() { | |
| 101 var keyframes = [ | |
| 102 { | |
| 103 borderBottomColor: 'currentColor', | |
| 104 borderLeftColor: 'currentColor', | |
| 105 borderRightColor: 'currentColor', | |
| 106 borderTopColor: 'currentColor', | |
| 107 offset: 0 | |
| 108 }, | |
| 109 { | |
| 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 | |
| 115 } | |
| 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, 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'); | |
| 128 | |
| 129 test(function() { | |
| 130 var keyframes = [ | |
| 131 {outlineColor: 'currentColor'}, | |
| 132 {outlineColor: 'rgb(0, 68, 0)'} | |
| 133 ]; | |
| 134 | |
| 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'); | |
| 142 | |
| 143 test(function() { | |
| 144 var keyframes = [ | |
| 145 {stroke: 'rgb(0, 68, 0)'}, | |
| 146 {stroke: 'currentColor'} | |
| 147 ]; | |
| 148 | |
| 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'); | |
| 156 | |
| 157 test(function() { | |
| 158 var keyframes = [ | |
| 159 {textDecorationColor: 'rgb(0, 68, 0)'}, | |
| 160 {textDecorationColor: 'currentColor'} | |
| 161 ]; | |
| 162 | |
| 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'); | |
| 170 | |
| 171 test(function() { | |
| 172 var keyframes = [ | |
| 173 {color: 'currentColor'}, | |
| 174 {color: 'rgb(0, 68, 0)'} | |
| 175 ]; | |
| 176 | |
| 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'); | |
| 188 | |
| 189 test(function() { | |
| 190 var keyframes = [ | |
| 191 {color: 'rgb(0, 68, 0)'}, | |
| 192 {color: 'currentColor'} | |
| 193 ]; | |
| 194 | |
| 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'); | |
| 206 | |
| 207 test(function() { | |
| 208 var keyframes = [ | |
| 209 {backgroundColor: 'currentColor'}, | |
| 210 {backgroundColor: 'rgb(100, 150, 200)'} | |
| 211 ]; | |
| 212 | |
| 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'); | |
| 221 | |
| 222 test(function() { | |
| 223 var keyframes = [ | |
| 224 {color: 'rgb(100, 150, 200)'}, | |
| 225 {color: 'currentColor'} | |
| 226 ]; | |
| 227 | |
| 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(visit
edChild).color); | |
| 235 }, 'Color animations do not expose parent visited status'); | |
| 236 | |
| 237 </script> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2973013002:
Group all responsive animation tests together (Closed)
