11a28d123b0dd5c3c48e8adb6c5c98798d56ae3c
[WebKit-https.git] / LayoutTests / css3 / filters / filter-animation-hw.html
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5   <style>
6     .box {
7         height: 100px;
8         width: 100px;
9         margin: 10px;
10         background-color: blue;
11         display: inline-block;
12         -webkit-transform:translateZ(0);
13         -webkit-animation-duration:2s !important;
14     }
15
16     #grayscale-box {
17       -webkit-animation: grayscale-anim 2s linear
18     }
19
20     #sepia-box {
21       -webkit-animation: sepia-anim 2s linear
22     }
23
24     #saturate-box {
25       -webkit-animation: saturate-anim 2s linear
26     }
27
28     #huerotate-box {
29       -webkit-animation: huerotate-anim 2s linear
30     }
31
32     #invert-box {
33       -webkit-animation: invert-anim 2s linear
34     }
35
36     #opacity-box {
37       -webkit-animation: opacity-anim 2s linear
38     }
39
40     #brightness-box {
41       -webkit-animation: brightness-anim 2s linear
42     }
43
44     #contrast-box {
45       -webkit-animation: contrast-anim 2s linear
46     }
47
48     #blur-box {
49       -webkit-animation: blur-anim 2s linear
50     }
51
52     #dropshadow-box {
53       -webkit-animation: dropshadow-anim 2s linear
54     }
55
56
57     @-webkit-keyframes grayscale-anim {
58         from { -webkit-filter: grayscale(0); }
59         to   { -webkit-filter: grayscale(1); }
60     }
61
62     @-webkit-keyframes sepia-anim {
63         from { -webkit-filter: sepia(0); }
64         to   { -webkit-filter: sepia(1); }
65     }
66
67     @-webkit-keyframes saturate-anim {
68         from { -webkit-filter: saturate(0); }
69         to   { -webkit-filter: saturate(1); }
70     }
71
72     @-webkit-keyframes huerotate-anim {
73         from { -webkit-filter: hue-rotate(0); }
74         to   { -webkit-filter: hue-rotate(180deg); }
75     }
76
77     @-webkit-keyframes invert-anim {
78         from { -webkit-filter: invert(0); }
79         to   { -webkit-filter: invert(1); }
80     }
81
82     @-webkit-keyframes opacity-anim {
83         from { -webkit-filter: opacity(1); }
84         to   { -webkit-filter: opacity(0); }
85     }
86
87     @-webkit-keyframes brightness-anim {
88         from { -webkit-filter: brightness(1); }
89         to   { -webkit-filter: brightness(0); }
90     }
91
92     @-webkit-keyframes contrast-anim {
93         from { -webkit-filter: contrast(1); }
94         to   { -webkit-filter: contrast(0); }
95     }
96
97     @-webkit-keyframes blur-anim {
98         from { -webkit-filter: blur(0); }
99         to   { -webkit-filter: blur(20px); }
100     }
101
102     @-webkit-keyframes dropshadow-anim {
103         from { -webkit-filter: drop-shadow(0 0 0 transparent); }
104         to   { -webkit-filter: drop-shadow(20px 30px 10px black)); }
105     }
106
107   </style>
108   <script src="../../animations/resources/animation-test-helpers.js"></script>
109   <script type="text/javascript">
110     const expectedValues = [
111       // [animation-name, time, element-id, property, expected-value, tolerance]
112       ["grayscale-anim",  1, "grayscale-box", "webkitFilter", 'grayscale(0.5)', 0.05],
113       ["sepia-anim",  1, "sepia-box", "webkitFilter", 'sepia(0.5)', 0.05],
114       ["saturate-anim",  1, "saturate-box", "webkitFilter", 'saturate(0.5)', 0.05],
115       ["huerotate-anim",  1, "huerotate-box", "webkitFilter", 'hue-rotate(90deg)', 2],
116       ["invert-anim",  1, "invert-box", "webkitFilter", 'invert(0.5)', 0.05],
117       ["opacity-anim",  1, "opacity-box", "webkitFilter", 'opacity(0.5)', 0.05],
118       ["brightness-anim",  1, "brightness-box", "webkitFilter", 'brightness(0.5)', 0.05],
119       ["contrast-anim",  1, "contrast-box", "webkitFilter", 'contrast(0.5)', 0.05],
120       ["blur-anim",  1, "blur-box", "webkitFilter", 'blur(10px)', 1],
121       // FIXME when we implement computed filter style for drop-shadow.
122       // ["dropshadow-anim",  1, "dropshadow-box", "webkitFilter", 'drop-shadow(rgba(0, 0, 0, 0.5) 10px 15px 5px )', 2],
123     ];
124     
125     runAnimationTest(expectedValues);
126   </script>
127 </head>
128 <body>
129
130 <div class="box" id="grayscale-box"></div>
131 <div class="box" id="sepia-box"></div>
132 <div class="box" id="saturate-box"></div>
133 <div class="box" id="huerotate-box"></div>
134 <div class="box" id="invert-box"></div>
135 <div class="box" id="opacity-box"></div>
136 <div class="box" id="brightness-box"></div>
137 <div class="box" id="contrast-box"></div>
138 <div class="box" id="blur-box"></div>
139 <!-- <div class="box" id="dropshadow-box"></div> -->
140
141 <div id="result">
142 </div>
143 </body>
144 </html>