1<!DOCTYPE html>
2<meta charset="UTF-8">
3<style>
4.target {
5  width: 50px;
6  height: 50px;
7  background-color: lightskyblue;
8  color: white;
9}
10.container {
11  border: solid black 5px;
12  background: white;
13  display: inline-block;
14}
15.container:nth-child(2n) {
16  border-color: green;
17}
18.test {
19  padding-bottom: 10px;
20}
21</style>
22<body>
23<svg style="display:none"><filter id="svgfilter"><feGaussianBlur stdDeviation="5"></feGaussianBlur></filter></svg>
24<template id="target-template">
25<div class="container"><div class="target"></div></div>
26</template>
27<script src="../testharness/testharness.js"></script>
28<script src="../testharness/testharnessreport.js"></script>
29<script src="resources/interpolation-test.js"></script>
30<script>
31// Matching lists:
32assertInterpolation({
33  property: '-webkit-filter',
34  from: 'hue-rotate(0deg) blur(6px)',
35  to: 'hue-rotate(180deg) blur(10px)'
36}, [
37  {at: -0.5, is: 'hue-rotate(-90deg) blur(4px)'},
38  {at: 0, is: 'hue-rotate(0deg) blur(6px)'},
39  {at: 0.25, is: 'hue-rotate(45deg) blur(7px)'},
40  {at: 0.5, is: 'hue-rotate(90deg) blur(8px)'},
41  {at: 1, is: 'hue-rotate(180deg) blur(10px)'},
42  {at: 1.5, is: 'hue-rotate(270deg) blur(12px)'}
43]);
44
45// Mismatched lists:
46assertInterpolation({
47  property: '-webkit-filter',
48  from: 'grayscale(0) blur(0px)',
49  to: 'blur(10px)'
50}, [
51  {at: -0.5, is: 'grayscale(0) blur(0px)'},
52  {at: 0, is: 'grayscale(0) blur(0px)'},
53  {at: 0.25, is: 'grayscale(0) blur(0px)'},
54  {at: 0.50, is: 'blur(10px)'},
55  {at: 1, is: 'blur(10px)'},
56  {at: 1.5, is: 'blur(10px)'},
57]);
58
59// Partially matching lists:
60assertInterpolation({
61  property: '-webkit-filter',
62  from: 'blur(6px)',
63  to: 'blur(10px) hue-rotate(180deg)'
64}, [
65  {at: -0.5, is: 'blur(4px) hue-rotate(-90deg)'},
66  {at: 0, is: 'blur(6px)'},
67  {at: 0.25, is: 'blur(7px) hue-rotate(45deg)'},
68  {at: 0.5, is: 'blur(8px) hue-rotate(90deg)'},
69  {at: 1, is: 'blur(10px) hue-rotate(180deg)'},
70  {at: 1.5, is: 'blur(12px) hue-rotate(270deg)'},
71]);
72
73assertInterpolation({
74  property: '-webkit-filter',
75  from: 'none',
76  to: 'hue-rotate(180deg)'
77}, [
78  {at: -0.5, is: 'hue-rotate(-90deg)'},
79  {at: 0, is: 'none'},
80  {at: 0.25, is: 'hue-rotate(45deg)'},
81  {at: 0.5, is: 'hue-rotate(90deg)'},
82  {at: 1, is: 'hue-rotate(180deg)'},
83  {at: 1.5, is: 'hue-rotate(270deg)'},
84]);
85
86assertInterpolation({
87  property: '-webkit-filter',
88  from: 'hue-rotate(180deg)',
89  to: 'none'
90}, [
91  {at: -0.5, is: 'hue-rotate(270deg)'},
92  {at: 0, is: 'hue-rotate(180deg)'},
93  {at: 0.25, is: 'hue-rotate(135deg)'},
94  {at: 0.5, is: 'hue-rotate(90deg)'},
95  {at: 1, is: 'none'},
96  {at: 1.5, is: 'hue-rotate(-90deg)'},
97]);
98
99// Filter functions (tests lacuna and clamping):
100assertInterpolation({
101  property: '-webkit-filter',
102  from: 'none', // lacuna is 0px
103  to: 'blur(10px)'
104}, [
105  {at: -1, is: 'blur(0px)'}, // Negative values are not allowed.
106  {at: 0, is: 'none'},
107  {at: 0.5, is: 'blur(5px)'},
108  {at: 1, is: 'blur(10px)'},
109  {at: 1.5, is: 'blur(15px)'}
110]);
111
112assertInterpolation({
113  property: '-webkit-filter',
114  from: 'brightness(0)',
115  to: 'none' // lacuna is 1
116}, [
117  {at: -1, is: 'brightness(0)'}, // Negative values are not allowed.
118  {at: 0, is: 'brightness(0)'},
119  {at: 0.5, is: 'brightness(0.5)'},
120  {at: 1, is: 'none'},
121  {at: 1.5, is: 'brightness(1.5)'}
122]);
123
124assertInterpolation({
125  property: '-webkit-filter',
126  from: 'contrast(0)',
127  to: 'none' // lacuna is 1
128}, [
129  {at: -1, is: 'contrast(0)'}, // Negative values are not allowed.
130  {at: 0, is: 'contrast(0)'},
131  {at: 0.5, is: 'contrast(0.5)'},
132  {at: 1, is: 'none'},
133  {at: 1.5, is: 'contrast(1.5)'}
134]);
135
136assertInterpolation({
137  property: '-webkit-filter',
138  from: 'none', // lacuna is drop-shadow(0px 0px 0px currentcolor)
139  to: 'drop-shadow(20px 10px green)'
140}, [
141  {at: -1, is: 'drop-shadow(-20px -10px white)'},
142  {at: 0, is: 'none'},
143  {at: 0.5, is: 'drop-shadow(10px 5px #80C080)'},
144  {at: 1, is: 'drop-shadow(20px 10px green)'},
145  {at: 1.5, is: 'drop-shadow(30px 15px #004000)'}
146]);
147
148assertInterpolation({
149  property: '-webkit-filter',
150  from: 'drop-shadow(0px 0px 0px currentcolor)', // lacuna is drop-shadow(0px 0px 0px currentcolor)
151  to: 'drop-shadow(20px 10px green)'
152}, [
153  {at: -1, is: 'drop-shadow(-20px -10px white)'},
154  {at: 0, is: 'drop-shadow(0px 0px 0px currentcolor)'},
155  {at: 0.5, is: 'drop-shadow(10px 5px #80C080)'},
156  {at: 1, is: 'drop-shadow(20px 10px green)'},
157  {at: 1.5, is: 'drop-shadow(30px 15px #004000)'}
158]);
159
160assertInterpolation({
161  property: '-webkit-filter',
162  from: 'none', // lacuna is 0
163  to: 'grayscale(1)'
164}, [
165  {at: -1, is: 'grayscale(0)'}, // Negative values are not allowed.
166  {at: 0, is: 'none'},
167  {at: 0.5, is: 'grayscale(0.5)'},
168  {at: 1, is: 'grayscale(1)'},
169  {at: 1.5, is: 'grayscale(1)'} // Should clamp values to 1.
170]);
171
172assertInterpolation({
173  property: '-webkit-filter',
174  from: 'none', // lacuna is 0deg
175  to: 'hue-rotate(360deg)'
176}, [
177  {at: -1, is: 'hue-rotate(-360deg)'},
178  {at: 0, is: 'none'},
179  {at: 0.5, is: 'hue-rotate(180deg)'},
180  {at: 1, is: 'hue-rotate(360deg)'},
181  {at: 1.5, is: 'hue-rotate(540deg)'}
182]);
183
184assertInterpolation({
185  property: '-webkit-filter',
186  from: 'none', // lacuna is 0
187  to: 'invert(1)'
188}, [
189  {at: -1, is: 'invert(0)'}, // Negative values are not allowed.
190  {at: 0, is: 'none'},
191  {at: 0.5, is: 'invert(0.5)'},
192  {at: 1, is: 'invert(1)'},
193  {at: 1.5, is: 'invert(1)'} // Should clamp values to 1.
194]);
195
196assertInterpolation({
197  property: '-webkit-filter',
198  from: 'opacity(0)',
199  to: 'none' // lacuna is 1
200}, [
201  {at: -1, is: 'opacity(0)'}, // Negative values are not allowed.
202  {at: 0, is: 'opacity(0)'},
203  {at: 0.5, is: 'opacity(0.5)'},
204  {at: 1, is: 'none'},
205  {at: 1.5, is: 'opacity(1)'} // Should clamp values to 1.
206]);
207
208assertInterpolation({
209  property: '-webkit-filter',
210  from: 'saturate(0)',
211  to: 'none' // lacuna is 1
212}, [
213  {at: -1, is: 'saturate(0)'}, // Negative values are not allowed.
214  {at: 0, is: 'saturate(0)'},
215  {at: 0.5, is: 'saturate(0.5)'},
216  {at: 1, is: 'none'},
217  {at: 1.5, is: 'saturate(1.5)'}
218]);
219
220assertInterpolation({
221  property: '-webkit-filter',
222  from: 'none', // lacuna is 0
223  to: 'sepia(1)'
224}, [
225  {at: -1, is: 'sepia(0)'}, // Negative values are not allowed.
226  {at: 0, is: 'none'},
227  {at: 0.5, is: 'sepia(0.5)'},
228  {at: 1, is: 'sepia(1)'},
229  {at: 1.5, is: 'sepia(1)'} // Should clamp values to 1.
230]);
231
232assertInterpolation({
233  property: '-webkit-filter',
234  from: 'url(#svgfilter)',
235  to: 'none', // lacuna is not defined
236}, [
237  {at: -1, is: 'url(#svgfilter)'},
238  {at: 0, is: 'url(#svgfilter)'},
239  {at: 0.5, is: 'none'},
240  {at: 1, is: 'none'},
241  {at: 1.5, is: 'none'}
242]);
243
244assertInterpolation({
245  property: '-webkit-filter',
246  from: 'url(#svgfilter)',
247  to: 'blur(5px)',
248}, [
249  {at: -1, is: 'url(#svgfilter)'},
250  {at: 0, is: 'url(#svgfilter)'},
251  {at: 0.5, is: 'blur(5px)'},
252  {at: 1, is: 'blur(5px)'},
253  {at: 1.5, is: 'blur(5px)'}
254]);
255</script>
256</body>
257