[Web Animations] Implement more CSSPropertyBlendingClient methods
[WebKit-https.git] / LayoutTests / fast / filter-image / filter-image-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     #brightness {
15       -webkit-animation: brightness-anim 2s linear;
16     }
17
18     #blur {
19       -webkit-animation: blur-anim 2s linear;
20     }
21
22     #grayscale {
23       -webkit-animation: grayscale-anim 2s linear;
24     }
25
26     #sepia {
27       -webkit-animation: sepia-anim 2s linear;
28     }
29
30     #no {
31       -webkit-animation: no-anim 2s linear;
32     }
33
34     #multiple1 {
35       -webkit-animation: multiple-anim1 2s linear;
36     }
37
38     #multiple2 {
39       -webkit-animation: multiple-anim2 2s linear;
40     }
41
42     #urlfilter {
43       -webkit-animation: url-to-filter-anim 2s linear;
44     }
45
46     #filterurl {
47       -webkit-animation: filter-to-url-anim 2s linear;
48     }
49
50     #filterdiffurl {
51       -webkit-animation: filter-diff-url-anim 2s linear;
52     }
53
54     #generated1 {
55       -webkit-animation: generated-anim1 2s linear;
56     }
57
58     #generated2 {
59       -webkit-animation: generated-anim2 2s linear;
60     }
61
62     @-webkit-keyframes brightness-anim {
63         from { background-image: filter(url(resources/image.svg), brightness(1)); }
64         to   { background-image: filter(url(resources/image.svg), brightness(0)); }
65     }
66
67     @-webkit-keyframes blur-anim {
68         from { background-image: filter(url(resources/image.svg), blur(0)); }
69         to   { background-image: filter(url(resources/image.svg), blur(10px)); }
70     }
71
72     @-webkit-keyframes grayscale-anim {
73         from { background-image: filter(url(resources/image.svg), grayscale(1)); }
74         to   { background-image: filter(url(resources/image.svg), grayscale(0)); }
75     }
76
77     @-webkit-keyframes sepia-anim {
78         from { background-image: filter(url(resources/image.svg), sepia(1)); }
79         to   { background-image: filter(url(resources/image.svg), sepia(0)); }
80     }
81
82     @-webkit-keyframes no-anim {
83         from { background-image: filter(url(resources/image.svg), sepia(1)); }
84         to   { background-image: filter(url(resources/blue.svg), sepia(0)); }
85     }
86
87     @-webkit-keyframes multiple-anim1 {
88         from { background-image: filter(url(resources/image.svg), sepia(0.25) blur(3px) hue-rotate(45deg)); }
89         to   { background-image: filter(url(resources/image.svg), sepia(0.75)); }
90     }
91
92     @-webkit-keyframes multiple-anim2 {
93         from { background-image: filter(url(resources/image.svg), contrast(0.25)); }
94         to   { background-image: filter(url(resources/image.svg), contrast(0.75) blur(3px) hue-rotate(45deg)); }
95     }
96
97     @-webkit-keyframes url-to-filter-anim {
98         from { background-image: url(resources/image.svg); }
99         to   { background-image: filter(url(resources/image.svg), sepia(0.5)); }
100     }
101
102     @-webkit-keyframes filter-to-url-anim {
103         from { background-image: filter(url(resources/image.svg), sepia(0.5)); }
104         to   { background-image: url(resources/image.svg); }
105     }
106
107     @-webkit-keyframes filter-diff-url-anim {
108         from { background-image: url(resources/image.svg); }
109         to   { background-image: filter(url(resources/blue.svg), sepia(0.5)); }
110     }
111
112     @-webkit-keyframes generated-anim1 {
113         from { background-image: filter(filter(url(resources/image.svg), blur(3px)), sepia(1)); }
114         to   { background-image: filter(filter(url(resources/image.svg), blur(3px)), sepia(0)); }
115     }
116
117     @-webkit-keyframes generated-anim2 {
118         from { background-image: filter(-webkit-cross-fade(url(resources/image.svg), url(resources/image.svg), 50%), sepia(1)); }
119         to   { background-image: filter(-webkit-cross-fade(url(resources/image.svg), url(resources/image.svg), 50%), sepia(0)); }
120     }
121   </style>
122   <script src="../../animations/resources/animation-test-helpers.js"></script>
123   <script type="text/javascript">
124     const expectedValues = [
125       // [animation-name, time, element-id, property, expected-value, tolerance]
126       ["brightness-anim",  1, "brightness", "backgroundImage", "filter(url(image.svg), brightness(0.5))", 0.05],
127       ["blur-anim",  1, "blur", "backgroundImage", "filter(url(image.svg), blur(5px))", 0.05],
128       ["grayscale-anim",  1, "grayscale", "backgroundImage", "filter(url(image.svg), grayscale(0.5))", 0.05],
129       ["sepia-anim",  1, "sepia", "backgroundImage", "filter(url(image.svg), sepia(0.5))", 0.05],
130       ["no-anim",  1, "no", "backgroundImage", "filter(url(blue.svg), sepia(0))", 0],
131       ["multiple-anim1",  1, "multiple1", "backgroundImage", "filter(url(image.svg), sepia(0.5) blur(1.5px) hue-rotate(22.5deg))", 0.05],
132       ["multiple-anim2",  1, "multiple2", "backgroundImage", "filter(url(image.svg), contrast(0.5) blur(1.5px) hue-rotate(22.5deg))", 0.05],
133       ["url-to-filter-anim",  1, "urlfilter", "backgroundImage", " filter(url(image.svg), sepia(0.25))", 0.05],
134       ["filter-to-url-anim",  1, "filterurl", "backgroundImage", " filter(url(image.svg), sepia(0.25))", 0.05],
135       ["filter-diff-url-anim",  1, "filterdiffurl", "backgroundImage", " filter(url(blue.svg), sepia(0.5))", 0],
136       // FIXME: We need to support generated images as input to other generated images for animations first.
137       ["generated-anim1",  1, "generated1", "backgroundImage", "filter(filter(url(image.svg), blur(3px)), sepia(0))", 0],
138       ["generated-anim2",  1, "generated2", "backgroundImage", "filter(-webkit-cross-fade(url(image.svg), url(image.svg), 50%), sepia(0))", 0],
139     ];
140     
141     runAnimationTest(expectedValues);
142   </script>
143 </head>
144 <body>
145
146 <div class="box" id="brightness"></div>
147 <div class="box" id="blur"></div>
148 <div class="box" id="grayscale"></div>
149 <div class="box" id="sepia"></div>
150 <div class="box" id="no"></div>
151 <div class="box" id="multiple1"></div>
152 <div class="box" id="multiple2"></div>
153 <div class="box" id="urlfilter"></div>
154 <div class="box" id="filterurl"></div>
155 <div class="box" id="filterdiffurl"></div>
156 <div class="box" id="generated1"></div>
157 <div class="box" id="generated2"></div>
158
159 <div id="result">
160 </div>
161 </body>
162 </html>