[Web Animations] Turn Web Animations with CSS integration on
[WebKit-https.git] / LayoutTests / transitions / clip-transition.html
1 <!DOCTYPE html><!-- webkit-test-runner [ experimental:WebAnimationsCSSIntegrationEnabled=true ] -->
2
3 <html>
4 <head>
5   <style>
6     #box {
7       position: absolute;
8       height: 100px;
9       width: 100px;
10       background-color: blue;
11       clip: rect(10px, 2.38cm, 90px, 10px);
12       -webkit-transition: clip 1s linear;
13     }
14
15     #box.changed {
16       clip: rect(0.795cm, 70px, 1.85cm, 30px);
17     }
18   </style>
19   <script src="resources/transition-test-helpers.js"></script>
20   <script type="text/javascript">
21     
22     const expectedValues = [
23       // [time, element-id, property, expected-value, tolerance]
24       [0.5, 'box', 'clip', [20, 80, 80, 20], 2],
25     ];
26
27     function setupTest()
28     {
29       document.getElementById('box').className = 'changed';
30     }
31
32     runTransitionTest(expectedValues, setupTest, usePauseAPI);
33   </script>
34 </head>
35 <body>
36   <div id="box"></div>
37   <div id="result"></div>
38 </body>
39 </html>