| OLD | NEW |
| (Empty) |
| 1 <!-- | |
| 2 Copyright 2012 Google Inc. All Rights Reserved. | |
| 3 | |
| 4 Licensed under the Apache License, Version 2.0 (the "License"); | |
| 5 you may not use this file except in compliance with the License. | |
| 6 You may obtain a copy of the License at | |
| 7 | |
| 8 http://www.apache.org/licenses/LICENSE-2.0 | |
| 9 | |
| 10 Unless required by applicable law or agreed to in writing, software | |
| 11 distributed under the License is distributed on an "AS IS" BASIS, | |
| 12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
| 13 See the License for the specific language governing permissions and | |
| 14 limitations under the License. | |
| 15 --> | |
| 16 | |
| 17 <!DOCTYPE html><meta charset="UTF-8"> | |
| 18 <style> | |
| 19 td.anim { | |
| 20 height: 200px; | |
| 21 width: 200px; | |
| 22 } | |
| 23 </style> | |
| 24 <table> | |
| 25 <tr><td id="a" class="anim"></td><td id="b" class="anim"></td><td id="c" class="
anim"></td></tr> | |
| 26 <tr><td id="d" class="anim"></td><td id="e" class="anim"></td><td id="f" class="
anim"></td></tr> | |
| 27 <tr><td id="g" class="anim"></td><td id="h" class="anim"></td><td id="i" class="
anim"></td></tr> | |
| 28 </table> | |
| 29 | |
| 30 <script> | |
| 31 var expected_failures = [ | |
| 32 { | |
| 33 browser_configurations: [{ msie: true }], | |
| 34 tests: ['Auto.*'], | |
| 35 message: 'IE returns rgba always.', | |
| 36 } | |
| 37 ]; | |
| 38 </script> | |
| 39 <script src="../bootstrap.js"></script> | |
| 40 <script> | |
| 41 "use strict"; | |
| 42 | |
| 43 var colors = [ | |
| 44 'aliceblue', | |
| 45 'antiquewhite', | |
| 46 'aqua', | |
| 47 'aquamarine', | |
| 48 'azure', | |
| 49 'beige', | |
| 50 'bisque', | |
| 51 'black', | |
| 52 'blanchedalmond', | |
| 53 'blue', | |
| 54 'blueviolet', | |
| 55 'brown', | |
| 56 'burlywood', | |
| 57 'cadetblue', | |
| 58 'chartreuse', | |
| 59 'chocolate', | |
| 60 'coral', | |
| 61 'cornflowerblue', | |
| 62 'cornsilk', | |
| 63 'crimson', | |
| 64 'cyan', | |
| 65 'darkblue', | |
| 66 'darkcyan', | |
| 67 'darkgoldenrod', | |
| 68 'darkgray', | |
| 69 'darkgreen', | |
| 70 'darkgrey', | |
| 71 'darkkhaki', | |
| 72 'darkmagenta', | |
| 73 'darkolivegreen', | |
| 74 'darkorange', | |
| 75 'darkorchid', | |
| 76 'darkred', | |
| 77 'darksalmon', | |
| 78 'darkseagreen', | |
| 79 'darkslateblue', | |
| 80 'darkslategray', | |
| 81 'darkslategrey', | |
| 82 'darkturquoise', | |
| 83 'darkviolet', | |
| 84 'deeppink', | |
| 85 'deepskyblue', | |
| 86 'dimgray', | |
| 87 'dimgrey', | |
| 88 'dodgerblue', | |
| 89 'firebrick', | |
| 90 'floralwhite', | |
| 91 'forestgreen', | |
| 92 'fuchsia', | |
| 93 'gainsboro', | |
| 94 'ghostwhite', | |
| 95 'gold', | |
| 96 'goldenrod', | |
| 97 'gray', | |
| 98 'green', | |
| 99 'greenyellow', | |
| 100 'grey', | |
| 101 'honeydew', | |
| 102 'hotpink', | |
| 103 'indianred', | |
| 104 'indigo', | |
| 105 'ivory', | |
| 106 'khaki', | |
| 107 'lavender', | |
| 108 'lavenderblush', | |
| 109 'lawngreen', | |
| 110 'lemonchiffon', | |
| 111 'lightblue', | |
| 112 'lightcoral', | |
| 113 'lightcyan', | |
| 114 'lightgoldenrodyellow', | |
| 115 'lightgray', | |
| 116 'lightgreen', | |
| 117 'lightgrey', | |
| 118 'lightpink', | |
| 119 'lightsalmon', | |
| 120 'lightseagreen', | |
| 121 'lightskyblue', | |
| 122 'lightslategray', | |
| 123 'lightslategrey', | |
| 124 'lightsteelblue', | |
| 125 'lightyellow', | |
| 126 'lime', | |
| 127 'limegreen', | |
| 128 'linen', | |
| 129 'magenta', | |
| 130 'maroon', | |
| 131 'mediumaquamarine', | |
| 132 'mediumblue', | |
| 133 'mediumorchid', | |
| 134 'mediumpurple', | |
| 135 'mediumseagreen', | |
| 136 'mediumslateblue', | |
| 137 'mediumspringgreen', | |
| 138 'mediumturquoise', | |
| 139 'mediumvioletred', | |
| 140 'midnightblue', | |
| 141 'mintcream', | |
| 142 'mistyrose', | |
| 143 'moccasin', | |
| 144 'navajowhite', | |
| 145 'navy', | |
| 146 'oldlace', | |
| 147 'olive', | |
| 148 'olivedrab', | |
| 149 'orange', | |
| 150 'orangered', | |
| 151 'orchid', | |
| 152 'palegoldenrod', | |
| 153 'palegreen', | |
| 154 'paleturquoise', | |
| 155 'palevioletred', | |
| 156 'papayawhip', | |
| 157 'peachpuff', | |
| 158 'peru', | |
| 159 'pink', | |
| 160 'plum', | |
| 161 'powderblue', | |
| 162 'purple', | |
| 163 'red', | |
| 164 'rosybrown', | |
| 165 'royalblue', | |
| 166 'saddlebrown', | |
| 167 'salmon', | |
| 168 'sandybrown', | |
| 169 'seagreen', | |
| 170 'seashell', | |
| 171 'sienna', | |
| 172 'silver', | |
| 173 'skyblue', | |
| 174 'slateblue', | |
| 175 'slategray', | |
| 176 'slategrey', | |
| 177 'snow', | |
| 178 'springgreen', | |
| 179 'steelblue', | |
| 180 'tan', | |
| 181 'teal', | |
| 182 'thistle', | |
| 183 'tomato', | |
| 184 'turquoise', | |
| 185 'violet', | |
| 186 'wheat', | |
| 187 'white', | |
| 188 'whitesmoke', | |
| 189 'yellow', | |
| 190 'yellowgreen']; | |
| 191 | |
| 192 var divs = document.querySelectorAll('td.anim'); | |
| 193 var sliceSize = colors.length / 9; | |
| 194 for (var i = 0; i < divs.length; i++) { | |
| 195 var colorsToAnimate = colors.slice(i * sliceSize, (i + 1) * sliceSize); | |
| 196 var effect = colorsToAnimate.map(function(value) { | |
| 197 return { backgroundColor: value }; | |
| 198 }); | |
| 199 document.timeline.play(new Animation(divs[i], effect, {duration: 4 * 1000, fil
l: 'forwards'})); | |
| 200 } | |
| 201 | |
| 202 //document.timeline.play(new Animation(document.body, | |
| 203 // {'backgroundColor': colors}, colors.length * 2 / 60)); | |
| 204 </script> | |
| OLD | NEW |