[Web Animations] Turn Web Animations with CSS integration on
[WebKit-https.git] / LayoutTests / transitions / shape-outside-transitions.html
1 <!DOCTYPE html><!-- webkit-test-runner [ experimental:WebAnimationsCSSIntegrationEnabled=true ] -->
2
3 <html>
4 <head>
5   <style>
6     .container {
7         width: 150px;
8         height: 150px;
9         border: 1px solid black;
10     }
11     .box {
12         height: 100px;
13         width: 100px;
14         margin: 10px;
15         background-color: silver;
16         -webkit-transition-duration: 1s;
17         -webkit-transition-timing-function: linear;
18         -webkit-transition-property: -webkit-shape-outside;
19         float: left;
20     }
21     
22     #circle {
23         -webkit-shape-outside: circle(100px at 50px 30px);
24     }
25     
26     body.final #circle {
27         -webkit-shape-outside: circle(20px at 50px 50px);
28     }
29
30     #ellipse {
31         -webkit-shape-outside: ellipse(10px 20px at 50px 30px);
32     }
33     
34     body.final #ellipse {
35         -webkit-shape-outside: ellipse(20px 40px at 50px 50px);
36     }
37
38     #inset {
39         -webkit-shape-outside: inset(10px 20px);
40     }
41     
42     body.final #inset {
43         -webkit-shape-outside: inset(20px 24px);
44     }
45
46     #polygon {
47         -webkit-shape-outside: polygon(20px 0px, 100px 0, 100px 50px, 0 50px);
48     }
49     
50     body.final #polygon {
51         -webkit-shape-outside: polygon(10px 0px, 50px 0, 20px 40px, 0 40px);
52     }
53   </style>
54   <script src="resources/transition-test-helpers.js"></script>
55   <script type="text/javascript">
56
57     const expectedValues = [
58       // [time, element-id, property, expected-value, tolerance]
59       [0.5, 'circle', '-webkit-shape-outside', 'circle(60px at 50px 40px)', 1],
60       [0.5, 'ellipse', '-webkit-shape-outside', 'ellipse(15px 30px at 50px 40px)', 1],
61       [0.5, 'inset', '-webkit-shape-outside', 'inset(15px 22px)', 1],
62       [0.5, 'polygon', '-webkit-shape-outside', 'polygon(15px 0px, 75px 0, 60px 45px, 0 45px)', 1],
63     ];
64   
65     function setupTest()
66     {
67         document.body.classList.add('final');
68     }
69     
70     runTransitionTest(expectedValues, setupTest, usePauseAPI);
71   </script>
72 </head>
73 <body>
74     <div class="container">
75         <div id="circle" class="box"></div>
76         x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
77     </div>
78
79     <div class="container">
80         <div id="ellipse" class="box"></div>
81         x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
82     </div>
83
84     <div class="container">
85         <div id="inset" class="box"></div>
86         x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
87     </div>
88
89     <div class="container">
90         <div id="polygon" class="box"></div>
91         x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
92     </div>
93
94     <div id="result"></div>
95
96 </body>
97 </html>