07b306444e69a2ddc41ec3c7a7604cb0d3d1581b
[WebKit-https.git] / LayoutTests / css3 / filters / composited-during-animation.html
1 <!DOCTYPE html><!-- webkit-test-runner [ enableWebAnimationsCSSIntegration=true ] -->
2
3 <html>
4 <head>
5   <style>
6     img {
7         margin: 10px;
8     }
9
10     .animating img {
11         -webkit-animation-duration: 2s !important;
12         -webkit-animation-timing-function: linear !important;
13     }
14
15     #grayscale-box {
16         -webkit-animation-name: grayscale-anim;
17         -webkit-filter: grayscale(1);
18     }
19
20     #sepia-box {
21         -webkit-animation: sepia-anim;
22         -webkit-filter: sepia(1);
23     }
24
25     #saturate-box {
26         -webkit-animation: saturate-anim;
27         -webkit-filter: saturate(1);
28     }
29
30     #huerotate-box {
31         -webkit-animation: huerotate-anim;
32         -webkit-filter: hue-rotate(90deg);
33     }
34
35     #invert-box {
36         -webkit-animation: invert-anim;
37         -webkit-filter: invert(1);
38     }
39
40     #opacity-box {
41         -webkit-animation: opacity-anim;
42         -webkit-filter: opacity(0);
43     }
44
45     #brightness-box {
46         -webkit-animation: brightness-anim;
47         -webkit-filter: brightness(0);
48     }
49
50     #contrast-box {
51         -webkit-animation: contrast-anim;
52         -webkit-filter: contrast(0);
53     }
54
55     #blur-box {
56         -webkit-animation: blur-anim;
57         -webkit-filter: blur(10px);
58     }
59
60     @-webkit-keyframes grayscale-anim {
61         from { -webkit-filter: grayscale(0); }
62         to   { -webkit-filter: grayscale(1); }
63     }
64
65     @-webkit-keyframes sepia-anim {
66         from { -webkit-filter: sepia(0); }
67         to   { -webkit-filter: sepia(1); }
68     }
69
70     @-webkit-keyframes saturate-anim {
71         from { -webkit-filter: saturate(0); }
72         to   { -webkit-filter: saturate(1); }
73     }
74
75     @-webkit-keyframes huerotate-anim {
76         from { -webkit-filter: hue-rotate(0); }
77         to   { -webkit-filter: hue-rotate(180deg); }
78     }
79
80     @-webkit-keyframes invert-anim {
81         from { -webkit-filter: invert(0); }
82         to   { -webkit-filter: invert(1); }
83     }
84
85     @-webkit-keyframes opacity-anim {
86         from { -webkit-filter: opacity(1); }
87         to   { -webkit-filter: opacity(0); }
88     }
89
90     @-webkit-keyframes brightness-anim {
91         from { -webkit-filter: brightness(1); }
92         to   { -webkit-filter: brightness(0); }
93     }
94
95     @-webkit-keyframes contrast-anim {
96         from { -webkit-filter: contrast(1); }
97         to   { -webkit-filter: contrast(0); }
98     }
99
100     @-webkit-keyframes blur-anim {
101         from { -webkit-filter: blur(0); }
102         to   { -webkit-filter: blur(20px); }
103     }
104
105   </style>
106   <script src="../../animations/resources/animation-test-helpers.js"></script>
107   <script type="text/javascript">
108
109     const preExpectedValues = [
110         // [element-id, property, expected-value]
111         ["grayscale-box", "webkitFilter", 'grayscale(1)'],
112         ["sepia-box", "webkitFilter", 'sepia(1)'],
113         ["saturate-box", "webkitFilter", 'saturate(1)'],
114         ["huerotate-box", "webkitFilter", 'hue-rotate(90deg)'],
115         ["invert-box", "webkitFilter", 'invert(1)'],
116         ["opacity-box", "webkitFilter", 'opacity(0)'],
117         ["brightness-box", "webkitFilter", 'brightness(0)'],
118         ["contrast-box", "webkitFilter", 'contrast(0)'],
119         ["blur-box", "webkitFilter", 'blur(10px)'],
120     ];
121
122     const expectedValues = [
123         // [animation-name, time, element-id, property, expected-value, tolerance]
124         ["grayscale-anim",  1, "grayscale-box", "webkitFilter", 'grayscale(0.5)', 0.15],
125         ["sepia-anim",  1, "sepia-box", "webkitFilter", 'sepia(0.5)', 0.15],
126         ["saturate-anim",  1, "saturate-box", "webkitFilter", 'saturate(0.5)', 0.15],
127         ["huerotate-anim",  1, "huerotate-box", "webkitFilter", 'hue-rotate(90deg)', 20],
128         ["invert-anim",  1, "invert-box", "webkitFilter", 'invert(0.5)', 0.15],
129         ["opacity-anim",  1, "opacity-box", "webkitFilter", 'opacity(0.5)', 0.15],
130         ["brightness-anim",  1, "brightness-box", "webkitFilter", 'brightness(0.5)', 0.15],
131         ["contrast-anim",  1, "contrast-box", "webkitFilter", 'contrast(0.5)', 0.15],
132         ["blur-anim",  1, "blur-box", "webkitFilter", 'blur(10px)', 4],
133     ];
134
135     function runPreTest() {
136         var preResult = "";
137
138         for (var i=0; i < preExpectedValues.length; i++) {
139             var id = preExpectedValues[i][0];
140             var prop = preExpectedValues[i][1];
141             var expected = preExpectedValues[i][2];
142             var element = document.getElementById(id);
143             var computedStyle = window.getComputedStyle(element)[prop];
144             if (computedStyle == expected)
145               preResult += "PASS: Element " + id + " had filter value " + expected + " before animation.<br>";
146             else
147               preResult += "FAIL: Element " + id + " had filter value " + computedStyle + " rather than " + expected + " before animation.<br>";
148         }
149         document.getElementById("preresult").innerHTML = preResult;
150
151         // Completed the pre-animation tests. Now start the animation.
152         setTimeout(function () {
153             document.body.className = "animating";
154             runAnimationTest(expectedValues);
155         }, 0);
156     }
157
158     if (window.testRunner) {
159         testRunner.dumpAsText();
160         testRunner.waitUntilDone();
161     }
162
163     window.addEventListener("load", runPreTest, false);
164   </script>
165 </head>
166 <body>
167
168 <img src="resources/reference.png" id="grayscale-box">
169 <img src="resources/reference.png" id="sepia-box">
170 <img src="resources/reference.png" id="saturate-box">
171 <img src="resources/reference.png" id="huerotate-box">
172 <img src="resources/reference.png" id="invert-box">
173 <img src="resources/reference.png" id="opacity-box">
174 <img src="resources/reference.png" id="brightness-box">
175 <img src="resources/reference.png" id="contrast-box">
176 <img src="resources/reference.png" id="blur-box">
177
178 <!-- this result element is filled in the script above, before the animations start -->
179 <div id="preresult">
180 </div>
181
182 <!-- this result element is filled by the animation test system -->
183 <div id="result">
184 </div>
185 </body>
186 </html>