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