Refactoring: Pull all fullscreen code out of Document and into its own helper class
[WebKit-https.git] / LayoutTests / transitions / clip-path-path-transitions.html
1 <!DOCTYPE html><!-- webkit-test-runner [ experimental:WebAnimationsCSSIntegrationEnabled=true ] -->
2
3 <html>
4 <head>
5   <style>
6     .box {
7         display: inline-block;
8         height: 200px;
9         width: 200px;
10         margin: 10px;
11         background-color: gray;
12         transition: -webkit-clip-path 2s linear;
13     }
14     
15     #path1 {
16         -webkit-clip-path: path("M 60 40 l 20 0 l 0 60 l 20 0 l 0 -20 l -40 0 l 0 -20 l 80 0 l 0 60 l -60 0 l 0 -80 Z")
17     }
18     
19     body.final #path1 {
20         -webkit-clip-path: path("M 100 40 l 20 0 l 0 60 l 20 0 l 0 -20 l -60 0 l 0 -20 l 80 0 l 0 60 l -60 0 l 0 -80 Z");
21     }
22
23     /* Nonmatched segments, should not animate */
24     #path2 {
25         -webkit-clip-path: path("M 60 40 l 20 0 l 0 60 l 20 0 l 0 -20 l -40 0 l 0 -20 l 80 0 l 0 60 l -60 0 l 0 -80 Z")
26     }
27     
28     body.final #path2 {
29         -webkit-clip-path: path("M 100 40 l 20 0 l 0 60 l 0 -20 l -60 0 l 0 -20 l 80 0 l 0 60 l -60 0 l 0 -80 Z");
30     }
31
32     /* Nonmatched winding rule, should not animate */
33     #path3 {
34         -webkit-clip-path: path("M 60 40 l 20 0 l 0 60 l 20 0 l 0 -20 l -40 0 l 0 -20 l 80 0 l 0 60 l -60 0 l 0 -80 Z")
35     }
36     
37     body.final #path3 {
38         -webkit-clip-path: path(evenodd, "M 100 40 l 20 0 l 0 60 l 20 0 l 0 -20 l -60 0 l 0 -20 l 80 0 l 0 60 l -60 0 l 0 -80 Z");
39     }
40   </style>
41   <script src="resources/transition-test-helpers.js"></script>
42   <script type="text/javascript">
43
44     const expectedValues = [
45       // [time, element-id, property, expected-value, tolerance]
46       [1, 'path1', '-webkit-clip-path', 'path("M 80 40 l 20 0 l 0 60 l 20 0 l 0 -20 l -50 0 l 0 -20 l 80 0 l 0 60 l -60 0 l 0 -80 Z")', 2],
47       [1, 'path2', '-webkit-clip-path', 'path("M 100 40 l 20 0 l 0 60 l 0 -20 l -60 0 l 0 -20 l 80 0 l 0 60 l -60 0 l 0 -80 Z")', 2],
48       [1, 'path3', '-webkit-clip-path', 'path(evenodd, "M 100 40 l 20 0 l 0 60 l 20 0 l 0 -20 l -60 0 l 0 -20 l 80 0 l 0 60 l -60 0 l 0 -80 Z")', 2],
49     ];
50   
51     function setupTest()
52     {
53         document.body.classList.add('final');
54     }
55     
56     runTransitionTest(expectedValues, setupTest, usePauseAPI);
57   </script>
58 </head>
59 <body>
60   <div id="path1" class="box"></div>
61   <div id="path2" class="box"></div>
62   <div id="path3" class="box"></div>
63
64   <div id="result"></div>
65 </body>
66 </html>