[CSS Shapes] polygon default fill-rule should be omitted from the serialization
[WebKit-https.git] / LayoutTests / fast / shapes / shape-outside-floats / shape-outside-animation.html
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5   <style>
6     .container {
7         width: 200px;
8         height: 200px;
9     }
10     .box {
11         height: 100px;
12         width: 100px;
13         margin: 50px;
14         float: left;
15     }
16
17     #inset-box {
18       -webkit-animation: inset-anim 2s linear
19     }
20
21     #circle-box {
22       -webkit-animation: circle-anim 2s linear
23     }
24
25     #ellipse-box {
26       -webkit-animation: ellipse-anim 2s linear
27     }
28
29     #polygon-box {
30       -webkit-animation: polygon-anim 2s linear
31     }
32
33     #polygon2-box {
34       -webkit-animation: polygon2-anim 2s linear
35     }
36
37     #circle-auto-box {
38       -webkit-animation: circle-auto-anim 2s linear
39     }
40
41     #circle-to-topleft-box {
42       -webkit-animation: circle-to-topleft-anim 2s linear
43     }
44
45     #circle-to-topleft-using-keyword-box {
46       -webkit-animation: circle-to-topleft-using-keyword-anim 2s linear
47     }
48
49     #circle-to-bottomright-box {
50       -webkit-animation: circle-to-bottomright-anim 2s linear
51     }
52
53     #circle-to-bottomright-using-keyword-box {
54       -webkit-animation: circle-to-bottomright-using-keyword-anim 2s linear
55     }
56
57     #circle-to-bottomright-extended-box {
58       -webkit-animation: circle-to-bottomright-extended-anim 2s linear
59     }
60
61     #circle-to-bottomright-extended-using-keyword-box {
62       -webkit-animation: circle-to-bottomright-extended-using-keyword-anim 2s linear
63     }
64
65     #circle-to-bottomright-extended-using-keyword-2-box {
66       -webkit-animation: circle-to-bottomright-extended-using-keyword-2-anim 2s linear
67     }
68
69     @-webkit-keyframes inset-anim {
70         from { -webkit-shape-outside: inset(0%); }
71         to   { -webkit-shape-outside: inset(20%); }
72     }
73
74     @-webkit-keyframes circle-anim {
75         from { -webkit-shape-outside: circle(50% at 50% 50%); }
76         to   { -webkit-shape-outside: circle(20% at 20% 20%); }
77     }
78
79     @-webkit-keyframes ellipse-anim {
80         from { -webkit-shape-outside: ellipse(50% 40% at 50% 50%); }
81         to   { -webkit-shape-outside: ellipse(20% 20% at 20% 20%); }
82     }
83
84     @-webkit-keyframes polygon-anim {
85         from { -webkit-shape-outside: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
86         to   { -webkit-shape-outside: polygon(20% 20%, 80% 20%, 80% 80%, 20% 80%); }
87     }
88
89     @-webkit-keyframes polygon2-anim {
90         from { -webkit-shape-outside: polygon(evenodd, 0% 0%, 100% 0%, 100% 100%, 0% 100%); }
91         to   { -webkit-shape-outside: polygon(nonzero, 20% 20%, 80% 20%, 80% 80%, 20% 80%); }
92     }
93
94     @-webkit-keyframes circle-auto-anim {
95         from { -webkit-shape-outside: auto }
96         to   { -webkit-shape-outside: circle(50% at 50% 50%); }
97     }
98
99     @-webkit-keyframes circle-to-topleft-anim {
100         from { -webkit-shape-outside: circle(50% at 50% 50%); }
101         to   { -webkit-shape-outside: circle(20% at 0% 0%); }
102     }
103
104     @-webkit-keyframes circle-to-topleft-using-keyword-anim {
105         from { -webkit-shape-outside: circle(50% at 50% 50%); }
106         to   { -webkit-shape-outside: circle(20% at left top); }
107     }
108
109     @-webkit-keyframes circle-to-bottomright-anim {
110         from { -webkit-shape-outside: circle(50% at 50% 50%); }
111         to   { -webkit-shape-outside: circle(20% at 100% 100%); }
112     }
113
114     @-webkit-keyframes circle-to-bottomright-using-keyword-anim {
115         from { -webkit-shape-outside: circle(50% at 50% 50%); }
116         to   { -webkit-shape-outside: circle(20% at right bottom); }
117     }
118
119     @-webkit-keyframes circle-to-bottomright-extended-anim {
120         from { -webkit-shape-outside: circle(50% at 50% 50%); }
121         to   { -webkit-shape-outside: circle(20% at 100% 100%); }
122     }
123
124     @-webkit-keyframes circle-to-bottomright-extended-using-keyword-anim {
125         from { -webkit-shape-outside: circle(50% at 50% 50%); }
126         to   { -webkit-shape-outside: circle(20% at right 10% bottom 20px); }
127     }
128
129     @-webkit-keyframes circle-to-bottomright-extended-using-keyword-2-anim {
130         from { -webkit-shape-outside: circle(50% at 50% 50%) border-box; }
131         to   { -webkit-shape-outside: circle(20% at right 10% bottom 10px) border-box; }
132     }
133   </style>
134   <script src="../../../animations/resources/animation-test-helpers.js"></script>
135   <script type="text/javascript">
136     const expectedValues = [
137       // [animation-name, time, element-id, property, expected-value, tolerance]
138       ["inset-anim",  1, "inset-box", "webkitShapeOutside", "inset(10% 10% 10% 10% round 0px 0px 0px 0px / 0px 0px 0px 0px)", 0.05],
139       ["circle-anim",  1, "circle-box", "webkitShapeOutside", "circle(35% at 35% 35%)", 0.05],
140       ["ellipse-anim",  1, "ellipse-box", "webkitShapeOutside", "ellipse(35% 30% at 35% 35%)", 0.05],
141       ["polygon-anim",  1, "polygon-box", "webkitShapeOutside", "polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%)", 0.05],
142       ["polygon2-anim",  1, "polygon2-box", "webkitShapeOutside", "polygon(20% 20%, 80% 20%, 80% 80%, 20% 80%)", 0.05],
143       ["circle-auto-anim",  1, "circle-auto-box", "webkitShapeOutside", "circle(50% at 50% 50%)", 0.05],
144       ["circle-to-topleft-anim",  1, "circle-to-topleft-box", "webkitShapeOutside", "circle(35% at 25% 25%)", 0.05],
145       ["circle-to-topleft-anim",  1, "circle-to-topleft-box", "webkitShapeOutside", "circle(35% at 25% 25%)", 0.05],
146       ["circle-to-bottomright-using-keyword-anim",  1, "circle-to-bottomright-using-keyword-box", "webkitShapeOutside", "circle(35% at 75% 75%)", 0.05],
147       ["circle-to-bottomright-using-keyword-anim",  1, "circle-to-bottomright-using-keyword-box", "webkitShapeOutside", "circle(35% at 75% 75%)", 0.05],
148       ["circle-to-bottomright-extended-anim",  1, "circle-to-bottomright-extended-box", "webkitShapeOutside", "circle(35% at 75% 75%)", 0.05],
149       ["circle-to-bottomright-extended-using-keyword-anim",  1, "circle-to-bottomright-extended-using-keyword-box", "webkitShapeOutside", "circle(35% at calc((50% * 0.5) + ((100% - 10%) * 0.5)) calc((50% * 0.5) + ((100% - 20px) * 0.5)))", 0.01],
150       ["circle-to-bottomright-extended-using-keyword-2-anim",  1, "circle-to-bottomright-extended-using-keyword-2-box", "webkitShapeOutside", "circle(35% at calc((50% * 0.5) + ((100% - 10%) * 0.5)) calc((50% * 0.5) + ((100% - 10px) * 0.5)))", 0.01],
151     ];
152     
153     runAnimationTest(expectedValues);
154   </script>
155 </head>
156 <body>
157
158 <div class='container'>
159   <div class="box" id="inset-box"></div>
160   Moving Text
161 </div>
162 <div class='container'>
163   <div class="box" id="circle-box"></div>
164   Moving Text
165 </div>
166 <div class='container'>
167   <div class="box" id="ellipse-box"></div>
168   Moving Text
169 </div>
170 <div class='container'>
171   <div class="box" id="polygon-box"></div>
172   Moving Text
173 </div>
174 <div class='container'>
175   <div class="box" id="polygon2-box"></div>
176   Moving Text
177 </div>
178 <div class='container'>
179   <div class="box" id="circle-auto-box"></div>
180   Moving Text
181 </div>
182 <div class='container'>
183   <div class="box" id="circle-to-topleft-box"></div>
184   Moving Text
185 </div>
186 <div class='container'>
187   <div class="box" id="circle-to-topleft-using-keyword-box"></div>
188   Moving Text
189 </div>
190 <div class='container'>
191   <div class="box" id="circle-to-bottomright-box"></div>
192   Moving Text
193 </div>
194 <div class='container'>
195   <div class="box" id="circle-to-bottomright-using-keyword-box"></div>
196   Moving Text
197 </div>
198 <div class='container'>
199   <div class="box" id="circle-to-bottomright-extended-box"></div>
200   Moving Text
201 </div>
202 <div class='container'>
203   <div class="box" id="circle-to-bottomright-extended-using-keyword-box"></div>
204   Moving Text
205 </div>
206 <div class='container'>
207   <div class="box" id="circle-to-bottomright-extended-using-keyword-2-box"></div>
208   Moving Text
209 </div>
210
211 <div id="result">
212 </div>
213 </body>
214 </html>