1<!DOCTYPE html>
2<meta charset="UTF-8">
3<body>
4<script src="../testharness/testharness.js"></script>
5<script src="../testharness/testharnessreport.js"></script>
6<script src="resources/interpolation-test.js"></script>
7<script>
8/* TODO: add inset test once blend() works for it */
9
10assertInterpolation({
11  property: 'shape-outside',
12  from: 'circle(100% at 0% 0%)',
13  to: 'circle(50% at 25% 25%)',
14}, [
15  {at: -0.3, is: 'circle(115% at -7.5% -7.5%)'},
16  {at: 0, is: 'circle(100% at 0% 0%)'},
17  {at: 0.3, is: 'circle(85% at 7.5% 7.5%)'},
18  {at: 0.6, is: 'circle(70% at 15% 15%)'},
19  {at: 1, is: 'circle(50% at 25% 25%)'},
20  {at: 1.5, is: 'circle(25% at 37.5% 37.5%)'}
21]);
22
23assertInterpolation({
24  property: 'shape-outside',
25  from: 'ellipse(100% 100% at 0% 0%)',
26  to: 'ellipse(50% 50% at 25% 25%)',
27}, [
28  {at: -0.3, is: 'ellipse(115% 115% at -7.5% -7.5%)'},
29  {at: 0, is: 'ellipse(100% 100% at 0% 0%)'},
30  {at: 0.3, is: 'ellipse(85% 85% at 7.5% 7.5%)'},
31  {at: 0.6, is: 'ellipse(70% 70% at 15% 15%)'},
32  {at: 1, is: 'ellipse(50% 50% at 25% 25%)'},
33  {at: 1.5, is: 'ellipse(25% 25% at 37.5% 37.5%)'}
34]);
35
36assertInterpolation({
37  property: 'shape-outside',
38  from: 'polygon(nonzero, 0px 0px, 25px 25px, 50px 50px)',
39  to: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)',
40}, [
41  {at: -0.3, is: 'polygon(nonzero, -7.5px -7.5px, 17.5px 17.5px, 42.5px 42.5px)'},
42  {at: 0, is: 'polygon(nonzero, 0px 0px, 25px 25px, 50px 50px)'},
43  {at: 0.3, is: 'polygon(nonzero, 7.5px 7.5px, 32.5px 32.5px, 57.5px 57.5px)'},
44  {at: 0.6, is: 'polygon(nonzero, 15px 15px, 40px 40px, 65px 65px)'},
45  {at: 1, is: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)'},
46  {at: 1.5, is: 'polygon(nonzero, 37.5px 37.5px, 62.5px 62.5px, 87.5px 87.5px)'}
47]);
48
49assertInterpolation({
50  property: 'shape-outside',
51  from: 'polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)',
52  to: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)',
53}, [
54  {at: -0.3, is: 'polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)'},
55  {at: 0, is: 'polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)'},
56  {at: 0.3, is: 'polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)'},
57  {at: 0.6, is: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)'},
58  {at: 1, is: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)'},
59  {at: 1.5, is: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)'},
60]);
61
62assertInterpolation({
63  property: 'shape-outside',
64  from: 'none',
65  to: 'ellipse(100% 100% at 0% 0%)',
66}, [
67  {at: -0.3, is: 'none'},
68  {at: 0, is: 'none'},
69  {at: 0.3, is: 'none'},
70  {at: 0.6, is: 'ellipse(100% 100% at 0% 0%)'},
71  {at: 1, is: 'ellipse(100% 100% at 0% 0%)'},
72  {at: 1.5, is: 'ellipse(100% 100% at 0% 0%)'}
73]);
74
75// TODO: add intermediate keyframe tests when CSS shapes position computed values are cleaned up
76assertInterpolation({
77  property: 'shape-outside',
78  from: 'circle(20% at right 10% bottom 20px)',
79  to: 'circle(30% at right 20% bottom 30px)',
80}, [
81  {at: 0, is: 'circle(20% at right 10% bottom 20px)'},
82  {at: 0.5, is: 'circle(25% at 85% calc(-25px + 100%))'},
83  {at: 1, is: 'circle(30% at right 20% bottom 30px)'},
84]);
85</script>
86</body>
87