/polymer-globe/polymer/polymer-all/web-animations-js/test/testcases/test-color-names.html

https://github.com/sidhantp/webgl-globe · HTML · 196 lines · 175 code · 6 blank · 15 comment · 0 complexity · 9dae73b2c6f650bfe519ffc6da3625bc MD5 · raw file 

    

  1. <!--
    2. 

  2. Copyright 2012 Google Inc. All Rights Reserved.
    3. 

  3. 

  4. Licensed under the Apache License, Version 2.0 (the "License");
    5. 

  5. you may not use this file except in compliance with the License.
    6. 

  6. You may obtain a copy of the License at
    7. 

  7. 

  8.     http://www.apache.org/licenses/LICENSE-2.0
    9. 

  9. 

  10. Unless required by applicable law or agreed to in writing, software
    11. 

  11. distributed under the License is distributed on an "AS IS" BASIS,
    12. 

  12. WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    13. 

  13. See the License for the specific language governing permissions and
    14. 

  14. limitations under the License.
    15. 

  15. -->
    16. 

  16. 

  17. <!DOCTYPE html>
    18. 

  18. <style>
    19. 

  19. td.anim {
    20. 

  20.   height: 200px;
    21. 

  21.   width: 200px;
    22. 

  22. }
    23. 

  23. </style>
    24. 

  24. <table>
    25. 

  25. <tr><td id="a" class="anim"></td><td id="b" class="anim"></td><td id="c" class="anim"></td></tr>
    26. 

  26. <tr><td id="d" class="anim"></td><td id="e" class="anim"></td><td id="f" class="anim"></td></tr>
    27. 

  27. <tr><td id="g" class="anim"></td><td id="h" class="anim"></td><td id="i" class="anim"></td></tr>
    28. 

  28. </table>
    29. 

  29. 

  30. 

  31. <script src="../bootstrap.js"></script>
    32. 

  32. <script>
    33. 

  33. "use strict";
    34. 

  34. 

  35. var colors = [
    36. 

  36.   'aliceblue',
    37. 

  37.   'antiquewhite',
    38. 

  38.   'aqua',
    39. 

  39.   'aquamarine',
    40. 

  40.   'azure',
    41. 

  41.   'beige',
    42. 

  42.   'bisque',
    43. 

  43.   'black',
    44. 

  44.   'blanchedalmond',
    45. 

  45.   'blue',
    46. 

  46.   'blueviolet',
    47. 

  47.   'brown',
    48. 

  48.   'burlywood',
    49. 

  49.   'cadetblue',
    50. 

  50.   'chartreuse',
    51. 

  51.   'chocolate',
    52. 

  52.   'coral',
    53. 

  53.   'cornflowerblue',
    54. 

  54.   'cornsilk',
    55. 

  55.   'crimson',
    56. 

  56.   'cyan',
    57. 

  57.   'darkblue',
    58. 

  58.   'darkcyan',
    59. 

  59.   'darkgoldenrod',
    60. 

  60.   'darkgray',
    61. 

  61.   'darkgreen',
    62. 

  62.   'darkgrey',
    63. 

  63.   'darkkhaki',
    64. 

  64.   'darkmagenta',
    65. 

  65.   'darkolivegreen',
    66. 

  66.   'darkorange',
    67. 

  67.   'darkorchid',
    68. 

  68.   'darkred',
    69. 

  69.   'darksalmon',
    70. 

  70.   'darkseagreen',
    71. 

  71.   'darkslateblue',
    72. 

  72.   'darkslategray',
    73. 

  73.   'darkslategrey',
    74. 

  74.   'darkturquoise',
    75. 

  75.   'darkviolet',
    76. 

  76.   'deeppink',
    77. 

  77.   'deepskyblue',
    78. 

  78.   'dimgray',
    79. 

  79.   'dimgrey',
    80. 

  80.   'dodgerblue',
    81. 

  81.   'firebrick',
    82. 

  82.   'floralwhite',
    83. 

  83.   'forestgreen',
    84. 

  84.   'fuchsia',
    85. 

  85.   'gainsboro',
    86. 

  86.   'ghostwhite',
    87. 

  87.   'gold',
    88. 

  88.   'goldenrod',
    89. 

  89.   'gray',
    90. 

  90.   'green',
    91. 

  91.   'greenyellow',
    92. 

  92.   'grey',
    93. 

  93.   'honeydew',
    94. 

  94.   'hotpink',
    95. 

  95.   'indianred',
    96. 

  96.   'indigo',
    97. 

  97.   'ivory',
    98. 

  98.   'khaki',
    99. 

  99.   'lavender',
    100. 

  100.   'lavenderblush',
    101. 

  101.   'lawngreen',
    102. 

  102.   'lemonchiffon',
    103. 

  103.   'lightblue',
    104. 

  104.   'lightcoral',
    105. 

  105.   'lightcyan',
    106. 

  106.   'lightgoldenrodyellow',
    107. 

  107.   'lightgray',
    108. 

  108.   'lightgreen',
    109. 

  109.   'lightgrey',
    110. 

  110.   'lightpink',
    111. 

  111.   'lightsalmon',
    112. 

  112.   'lightseagreen',
    113. 

  113.   'lightskyblue',
    114. 

  114.   'lightslategray',
    115. 

  115.   'lightslategrey',
    116. 

  116.   'lightsteelblue',
    117. 

  117.   'lightyellow',
    118. 

  118.   'lime',
    119. 

  119.   'limegreen',
    120. 

  120.   'linen',
    121. 

  121.   'magenta',
    122. 

  122.   'maroon',
    123. 

  123.   'mediumaquamarine',
    124. 

  124.   'mediumblue',
    125. 

  125.   'mediumorchid',
    126. 

  126.   'mediumpurple',
    127. 

  127.   'mediumseagreen',
    128. 

  128.   'mediumslateblue',
    129. 

  129.   'mediumspringgreen',
    130. 

  130.   'mediumturquoise',
    131. 

  131.   'mediumvioletred',
    132. 

  132.   'midnightblue',
    133. 

  133.   'mintcream',
    134. 

  134.   'mistyrose',
    135. 

  135.   'moccasin',
    136. 

  136.   'navajowhite',
    137. 

  137.   'navy',
    138. 

  138.   'oldlace',
    139. 

  139.   'olive',
    140. 

  140.   'olivedrab',
    141. 

  141.   'orange',
    142. 

  142.   'orangered',
    143. 

  143.   'orchid',
    144. 

  144.   'palegoldenrod',
    145. 

  145.   'palegreen',
    146. 

  146.   'paleturquoise',
    147. 

  147.   'palevioletred',
    148. 

  148.   'papayawhip',
    149. 

  149.   'peachpuff',
    150. 

  150.   'peru',
    151. 

  151.   'pink',
    152. 

  152.   'plum',
    153. 

  153.   'powderblue',
    154. 

  154.   'purple',
    155. 

  155.   'red',
    156. 

  156.   'rosybrown',
    157. 

  157.   'royalblue',
    158. 

  158.   'saddlebrown',
    159. 

  159.   'salmon',
    160. 

  160.   'sandybrown',
    161. 

  161.   'seagreen',
    162. 

  162.   'seashell',
    163. 

  163.   'sienna',
    164. 

  164.   'silver',
    165. 

  165.   'skyblue',
    166. 

  166.   'slateblue',
    167. 

  167.   'slategray',
    168. 

  168.   'slategrey',
    169. 

  169.   'snow',
    170. 

  170.   'springgreen',
    171. 

  171.   'steelblue',
    172. 

  172.   'tan',
    173. 

  173.   'teal',
    174. 

  174.   'thistle',
    175. 

  175.   'tomato',
    176. 

  176.   'turquoise',
    177. 

  177.   'violet',
    178. 

  178.   'wheat',
    179. 

  179.   'white',
    180. 

  180.   'whitesmoke',
    181. 

  181.   'yellow',
    182. 

  182.   'yellowgreen'];
    183. 

  183. 

  184. var divs = document.querySelectorAll('td.anim');
    185. 

  185. var sliceSize = colors.length / 9;
    186. 

  186. for (var i = 0; i < divs.length; i++) {
    187. 

  187.   var colorsToAnimate = colors.slice(i * sliceSize, (i + 1) * sliceSize);
    188. 

  188.   var effect = colorsToAnimate.map(function(value) {
    189. 

  189.     return { backgroundColor: value };
    190. 

  190.   });
    191. 

  191.   document.timeline.play(new Animation(divs[i], effect, 4));
    192. 

  192. }
    193. 

  193. 

  194. //document.timeline.play(new Animation(document.body,
    195. 

  195. //    {'backgroundColor': colors}, colors.length * 2 / 60));
    196. 

  196. </script>
    197.