20ece6a261cb24a1c7b1abc58f9da9e2b2be13d2
[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
34     @-webkit-keyframes rectangle-anim {
35         from { -webkit-shape-outside: rectangle(0%, 0%, 100%, 100%); }
36         to   { -webkit-shape-outside: rectangle(20%, 20%, 60%, 60%); }
37     }
38
39     @-webkit-keyframes circle-anim {
40         from { -webkit-shape-outside: circle(50% at 50% 50%); }
41         to   { -webkit-shape-outside: circle(20% at 20% 20%); }
42     }
43
44     @-webkit-keyframes ellipse-anim {
45         from { -webkit-shape-outside: ellipse(50%, 50%, 50%, 40%); }
46         to   { -webkit-shape-outside: ellipse(20%, 20%, 20%, 20%); }
47     }
48
49     @-webkit-keyframes polygon-anim {
50         from { -webkit-shape-outside: polygon(nonzero, 0% 0%, 100% 0%, 100% 100%, 0% 100%); }
51         to   { -webkit-shape-outside: polygon(nonzero, 20% 20%, 80% 20%, 80% 80%, 20% 80%); }
52     }
53
54   </style>
55   <script src="../../../animations/resources/animation-test-helpers.js"></script>
56   <script type="text/javascript">
57     const expectedValues = [
58       // [animation-name, time, element-id, property, expected-value, tolerance]
59       ["rectangle-anim",  1, "rectangle-box", "webkitShapeOutside", "rectangle(10%, 10%, 80%, 80%, 0px, 0px)", 0.05],
60       ["circle-anim",  1, "circle-box", "webkitShapeOutside", "circle(35% at 35% 35%)", 0.05],
61       ["ellipse-anim",  1, "ellipse-box", "webkitShapeOutside", "ellipse(35%, 35%, 35%, 30%)", 0.05],
62       ["polygon-anim",  1, "polygon-box", "webkitShapeOutside", "polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%)", 0.05],
63     ];
64     
65     runAnimationTest(expectedValues);
66   </script>
67 </head>
68 <body>
69
70 <div class='container'>
71   <div class="box" id="rectangle-box"></div>
72   Moving Text
73 </div>
74 <div class='container'>
75   <div class="box" id="circle-box"></div>
76   Moving Text
77 </div>
78 <div class='container'>
79   <div class="box" id="ellipse-box"></div>
80   Moving Text
81 </div>
82 <div class='container'>
83   <div class="box" id="polygon-box"></div>
84   Moving Text
85 </div>
86
87 <div id="result">
88 </div>
89 </body>
90 </html>