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