StorageAccess API calls should be direct to the Network Process
[WebKit-https.git] / LayoutTests / transitions / clip-path-transitions.html
1 <!DOCTYPE html><!-- webkit-test-runner [ experimental:WebAnimationsCSSIntegrationEnabled=true ] -->
2
3 <html>
4 <head>
5   <style>
6     .box {
7         height: 100px;
8         width: 100px;
9         margin: 50px;
10         background-color: gray;
11         -webkit-transition-duration: 1s;
12         -webkit-transition-timing-function: linear;
13         -webkit-transition-property: -webkit-clip-path;
14     }
15     
16     #circle {
17         -webkit-clip-path: circle(100px at 50px 30px);
18     }
19     
20     body.final #circle {
21         -webkit-clip-path: circle(20px at 50px 50px);
22     }
23
24     #ellipse {
25         -webkit-clip-path: ellipse(10px 20px at 50px 30px);
26     }
27     
28     body.final #ellipse {
29         -webkit-clip-path: ellipse(20px 40px at 50px 50px);
30     }
31
32     #inset {
33         -webkit-clip-path: inset(10px 20px);
34     }
35     
36     body.final #inset {
37         -webkit-clip-path: inset(20px 24px);
38     }
39
40     #polygon {
41         -webkit-clip-path: polygon(20px 0px, 100px 0, 100px 50px, 0 50px);
42     }
43     
44     body.final #polygon {
45         -webkit-clip-path: polygon(10px 0px, 50px 0, 20px 40px, 0 40px);
46     }
47   </style>
48   <script src="resources/transition-test-helpers.js"></script>
49   <script type="text/javascript">
50
51     const expectedValues = [
52       // [time, element-id, property, expected-value, tolerance]
53       [0.5, 'circle', '-webkit-clip-path', 'circle(60px at 50px 40px)', 1],
54       [0.5, 'ellipse', '-webkit-clip-path', 'ellipse(15px 30px at 50px 40px)', 1],
55       [0.5, 'inset', '-webkit-clip-path', 'inset(15px 22px)', 1],
56       [0.5, 'polygon', '-webkit-clip-path', 'polygon(15px 0px, 75px 0, 60px 45px, 0 45px)', 1],
57     ];
58   
59     function setupTest()
60     {
61         document.body.classList.add('final');
62     }
63     
64     runTransitionTest(expectedValues, setupTest, usePauseAPI);
65   </script>
66 </head>
67 <body>
68   <div id="circle" class="box"></div>
69   <div id="ellipse" class="box"></div>
70   <div id="inset" class="box"></div>
71   <div id="polygon" class="box"></div>
72
73   <div id="result"></div>
74
75 </body>
76 </html>