[CSS Shapes] Take into account fill-rule for polygon interpolation
[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: 10px;
14         float: left;
15     }
16
17     #rectangle-box {
18       -webkit-animation: rectangle-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     @-webkit-keyframes rectangle-anim {
38         from { -webkit-shape-outside: rectangle(0%, 0%, 100%, 100%); }
39         to   { -webkit-shape-outside: rectangle(20%, 20%, 60%, 60%); }
40     }
41
42     @-webkit-keyframes circle-anim {
43         from { -webkit-shape-outside: circle(50% at 50% 50%); }
44         to   { -webkit-shape-outside: circle(20% at 20% 20%); }
45     }
46
47     @-webkit-keyframes ellipse-anim {
48         from { -webkit-shape-outside: ellipse(50% 40% at 50% 50%); }
49         to   { -webkit-shape-outside: ellipse(20% 20% at 20% 20%); }
50     }
51
52     @-webkit-keyframes polygon-anim {
53         from { -webkit-shape-outside: polygon(nonzero, 0% 0%, 100% 0%, 100% 100%, 0% 100%); }
54         to   { -webkit-shape-outside: polygon(nonzero, 20% 20%, 80% 20%, 80% 80%, 20% 80%); }
55     }
56
57     @-webkit-keyframes polygon2-anim {
58         from { -webkit-shape-outside: polygon(evenodd, 0% 0%, 100% 0%, 100% 100%, 0% 100%); }
59         to   { -webkit-shape-outside: polygon(nonzero, 20% 20%, 80% 20%, 80% 80%, 20% 80%); }
60     }
61
62   </style>
63   <script src="../../../animations/resources/animation-test-helpers.js"></script>
64   <script type="text/javascript">
65     const expectedValues = [
66       // [animation-name, time, element-id, property, expected-value, tolerance]
67       ["rectangle-anim",  1, "rectangle-box", "webkitShapeOutside", "rectangle(10%, 10%, 80%, 80%, 0px, 0px)", 0.05],
68       ["circle-anim",  1, "circle-box", "webkitShapeOutside", "circle(35% at 35% 35%)", 0.05],
69       ["ellipse-anim",  1, "ellipse-box", "webkitShapeOutside", "ellipse(35% 30% at 35% 35%)", 0.05],
70       ["polygon-anim",  1, "polygon-box", "webkitShapeOutside", "polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%)", 0.05],
71       ["polygon2-anim",  1, "polygon2-box", "webkitShapeOutside", "polygon(nonzero, 20% 20%, 80% 20%, 80% 80%, 20% 80%)", 0.05],
72     ];
73     
74     runAnimationTest(expectedValues);
75   </script>
76 </head>
77 <body>
78
79 <div class='container'>
80   <div class="box" id="rectangle-box"></div>
81   Moving Text
82 </div>
83 <div class='container'>
84   <div class="box" id="circle-box"></div>
85   Moving Text
86 </div>
87 <div class='container'>
88   <div class="box" id="ellipse-box"></div>
89   Moving Text
90 </div>
91 <div class='container'>
92   <div class="box" id="polygon-box"></div>
93   Moving Text
94 </div>
95 <div class='container'>
96   <div class="box" id="polygon2-box"></div>
97   Moving Text
98 </div>
99
100 <div id="result">
101 </div>
102 </body>
103 </html>