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