Header parsing for experimental and internal debug features
[WebKit-https.git] / LayoutTests / transitions / transform-op-list-match.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       background-color: blue;
10       -webkit-transform: translateX(0px) rotate(0deg);
11       -webkit-transition-duration: 2s;
12       -webkit-transition-timing-function: linear;
13       -webkit-transition-property: -webkit-transform;
14     }
15   </style>
16   <script src="resources/transition-test-helpers.js"></script>
17   <script type="text/javascript">
18     
19     function DegreesToRotation(angle)
20     {
21       return roundNumber(Math.cos(angle * Math.PI / 180), 5);
22     }
23     
24     const expectedValues = [
25       // [time, element-id, property, expected-value, tolerance]
26       [0.5, "box", "-webkit-transform.0", DegreesToRotation(135), DegreesToRotation(10)],
27       [1.0, "box", "-webkit-transform.0", DegreesToRotation(90), DegreesToRotation(10)],
28     ];
29     
30     function setupTest()
31     {
32       var box = document.getElementById('box');
33       box.style.webkitTransform = 'translateX(0px) rotate(540deg)';
34     }
35     
36     runTransitionTest(expectedValues, setupTest, usePauseAPI);
37   </script>
38 </head>
39 <body>
40
41 <p>
42 Box should spin 540 degrees because that is the specified rotation and the transform operation lists match,
43 so we should animate each operation separately.
44 </p>
45 <div id="box">
46 </div>
47 <div id="result">
48 </div>
49 </body>
50 </html>