OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 | 2 |
3 <html> | 3 <html> |
4 <head> | 4 <head> |
5 <style> | 5 <style> |
6 .box { | 6 .box { |
7 height: 100px; | 7 height: 100px; |
8 width: 100px; | 8 width: 100px; |
9 margin: 10px; | 9 margin: 10px; |
10 background-color: blue; | 10 background-color: blue; |
11 display: inline-block; | 11 display: inline-block; |
12 } | 12 } |
13 | 13 |
14 #grayscale-box { | 14 #grayscale-box { |
15 -webkit-animation: grayscale-anim 2s linear | 15 -webkit-animation: grayscale-anim 2s linear |
16 } | 16 } |
17 | 17 |
18 #sepia-box { | 18 #sepia-box { |
19 -webkit-animation: sepia-anim 2s linear | 19 -webkit-animation: sepia-anim 2s linear |
20 } | 20 } |
21 | 21 |
22 #saturate-box { | 22 #saturate-box { |
23 -webkit-animation: saturate-anim 2s linear | 23 -webkit-animation: saturate-anim 2s linear |
24 } | 24 } |
25 | 25 |
26 #huerotate-box { | 26 #hue-rotate-box { |
27 -webkit-animation: huerotate-anim 2s linear | 27 -webkit-animation: hue-rotate-anim 2s linear |
28 } | 28 } |
29 | 29 |
30 #invert-box { | 30 #invert-box { |
31 -webkit-animation: invert-anim 2s linear | 31 -webkit-animation: invert-anim 2s linear |
32 } | 32 } |
33 | 33 |
34 #opacity-box { | 34 #opacity-box { |
35 -webkit-animation: opacity-anim 2s linear | 35 -webkit-animation: opacity-anim 2s linear |
36 } | 36 } |
37 | 37 |
(...skipping 22 matching lines...) Expand all Loading... |
60 @-webkit-keyframes sepia-anim { | 60 @-webkit-keyframes sepia-anim { |
61 from { -webkit-filter: sepia(0); } | 61 from { -webkit-filter: sepia(0); } |
62 to { -webkit-filter: sepia(1); } | 62 to { -webkit-filter: sepia(1); } |
63 } | 63 } |
64 | 64 |
65 @-webkit-keyframes saturate-anim { | 65 @-webkit-keyframes saturate-anim { |
66 from { -webkit-filter: saturate(0); } | 66 from { -webkit-filter: saturate(0); } |
67 to { -webkit-filter: saturate(1); } | 67 to { -webkit-filter: saturate(1); } |
68 } | 68 } |
69 | 69 |
70 @-webkit-keyframes huerotate-anim { | 70 @-webkit-keyframes hue-rotate-anim { |
71 from { -webkit-filter: hue-rotate(0); } | 71 from { -webkit-filter: hue-rotate(0); } |
72 to { -webkit-filter: hue-rotate(180deg); } | 72 to { -webkit-filter: hue-rotate(180deg); } |
73 } | 73 } |
74 | 74 |
75 @-webkit-keyframes invert-anim { | 75 @-webkit-keyframes invert-anim { |
76 from { -webkit-filter: invert(0); } | 76 from { -webkit-filter: invert(0); } |
77 to { -webkit-filter: invert(1); } | 77 to { -webkit-filter: invert(1); } |
78 } | 78 } |
79 | 79 |
80 @-webkit-keyframes opacity-anim { | 80 @-webkit-keyframes opacity-anim { |
(...skipping 22 matching lines...) Expand all Loading... |
103 } | 103 } |
104 | 104 |
105 </style> | 105 </style> |
106 <script src="../../animations/resources/animation-test-helpers.js"></script> | 106 <script src="../../animations/resources/animation-test-helpers.js"></script> |
107 <script type="text/javascript"> | 107 <script type="text/javascript"> |
108 const expectedValues = [ | 108 const expectedValues = [ |
109 // [time, element-id, property, expected-value, tolerance] | 109 // [time, element-id, property, expected-value, tolerance] |
110 [1, "grayscale-box", "webkitFilter", 'grayscale(0.5)', 0.05], | 110 [1, "grayscale-box", "webkitFilter", 'grayscale(0.5)', 0.05], |
111 [1, "sepia-box", "webkitFilter", 'sepia(0.5)', 0.05], | 111 [1, "sepia-box", "webkitFilter", 'sepia(0.5)', 0.05], |
112 [1, "saturate-box", "webkitFilter", 'saturate(0.5)', 0.05], | 112 [1, "saturate-box", "webkitFilter", 'saturate(0.5)', 0.05], |
113 [1, "huerotate-box", "webkitFilter", 'huerotate(90deg)', 2], | 113 [1, "hue-rotate-box", "webkitFilter", 'hue-rotate(90deg)', 2], |
114 [1, "invert-box", "webkitFilter", 'invert(0.5)', 0.05], | 114 [1, "invert-box", "webkitFilter", 'invert(0.5)', 0.05], |
115 [1, "opacity-box", "webkitFilter", 'opacity(0.5)', 0.05], | 115 [1, "opacity-box", "webkitFilter", 'opacity(0.5)', 0.05], |
116 [1, "brightness-box", "webkitFilter", 'brightness(0.5)', 0.05], | 116 [1, "brightness-box", "webkitFilter", 'brightness(0.5)', 0.05], |
117 [1, "contrast-box", "webkitFilter", 'contrast(0.5)', 0.05], | 117 [1, "contrast-box", "webkitFilter", 'contrast(0.5)', 0.05], |
118 [1, "blur-box", "webkitFilter", 'blur(10px)', 1], | 118 [1, "blur-box", "webkitFilter", 'blur(10px)', 1], |
119 // FIXME when we implement computed filter style for drop-shadow. | 119 // FIXME when we implement computed filter style for drop-shadow. |
120 // ["dropshadow-anim", 1, "dropshadow-box", "webkitFilter", 'drop-shadow(
rgba(0, 0, 0, 0.5) 10px 15px 5px )', 2], | 120 // ["dropshadow-anim", 1, "dropshadow-box", "webkitFilter", 'drop-shadow(
rgba(0, 0, 0, 0.5) 10px 15px 5px )', 2], |
121 ]; | 121 ]; |
122 | 122 |
123 runAnimationTest(expectedValues); | 123 runAnimationTest(expectedValues); |
124 </script> | 124 </script> |
125 </head> | 125 </head> |
126 <body> | 126 <body> |
127 | 127 |
128 <div class="box" id="grayscale-box"></div> | 128 <div class="box" id="grayscale-box"></div> |
129 <div class="box" id="sepia-box"></div> | 129 <div class="box" id="sepia-box"></div> |
130 <div class="box" id="saturate-box"></div> | 130 <div class="box" id="saturate-box"></div> |
131 <div class="box" id="huerotate-box"></div> | 131 <div class="box" id="hue-rotate-box"></div> |
132 <div class="box" id="invert-box"></div> | 132 <div class="box" id="invert-box"></div> |
133 <div class="box" id="opacity-box"></div> | 133 <div class="box" id="opacity-box"></div> |
134 <div class="box" id="brightness-box"></div> | 134 <div class="box" id="brightness-box"></div> |
135 <div class="box" id="contrast-box"></div> | 135 <div class="box" id="contrast-box"></div> |
136 <div class="box" id="blur-box"></div> | 136 <div class="box" id="blur-box"></div> |
137 <!-- <div class="box" id="dropshadow-box"></div> --> | 137 <!-- <div class="box" id="dropshadow-box"></div> --> |
138 | 138 |
139 <div id="result"> | 139 <div id="result"> |
140 </div> | 140 </div> |
141 </body> | 141 </body> |
142 </html> | 142 </html> |
OLD | NEW |