third_party/WebKit/LayoutTests/web-animations-api/animations-responsive-to-color-change.html

   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'>Unvisited</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.596078)');
  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(visitedChild).color);
 235 }, 'Color animations do not expose parent visited status');
 236
 237 </script>