b49d79a203b2b84d0eedf16cf46d7fe88d338dc5
[WebKit-https.git] / LayoutTests / transitions / transform-op-list-no-match.html
1 <!DOCTYPE html><!-- webkit-test-runner [ enableCSSAnimationsAndCSSTransitionsBackedByWebAnimations=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(45), 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 = 'rotate(540deg)';
34     }
35     
36     runTransitionTest(expectedValues, setupTest, usePauseAPI);
37   </script>
38 </head>
39 <body>
40
41 <p>
42 Box should spin only 180 degrees even though the operation specifies a 0 to 540 degree animation.
43 This is because the operation lists don't match, so it falls back to matrix animation, which 
44 normalizes the angle to between 0 and 360 degrees.
45 </p>
46 <div id="box">
47 </div>
48 <div id="result">
49 </div>
50 </body>
51 </html>