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