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