2009-01-19 Simon Fraser <simon.fraser@apple.com>
[WebKit-https.git] / LayoutTests / transitions / transform-op-list-no-match.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2    "http://www.w3.org/TR/html4/loose.dtd">
3
4 <html lang="en">
5 <head>
6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7   <title>Transition Between Transform Operation Lists Which Don't Match</title>
8   <style type="text/css" media="screen">
9     #box {
10       height: 100px;
11       width: 100px;
12       background-color: blue;
13       -webkit-transform: translateX(0px) rotate(0deg);
14       -webkit-transition-duration: 2s;
15       -webkit-transition-timing-function: linear;
16       -webkit-transition-property: -webkit-transform;
17     }
18   </style>
19   <script src="transition-test-helpers.js" type="text/javascript" charset="utf-8"></script>
20   <script type="text/javascript" charset="utf-8">
21     
22     function DegreesToRotation(angle)
23     {
24       return roundNumber(Math.cos(angle * Math.PI / 180), 5);
25     }
26     
27     const expectedValues = [
28       // [time, element-id, property, expected-value, tolerance]
29       [0.5, "box", "-webkit-transform.0", DegreesToRotation(45), DegreesToRotation(10)],
30       [1.0, "box", "-webkit-transform.0", DegreesToRotation(90), DegreesToRotation(10)],
31     ];
32     
33     function setupTest()
34     {
35       var box = document.getElementById('box');
36       box.style.webkitTransform = 'rotate(540deg)';
37     }
38     
39     runTransitionTest(expectedValues, setupTest, true);
40     
41   </script>
42 </head>
43 <body>
44
45 <p>
46 Box should spin only 180 degrees even though the operation specifies a 0 to 540 degree animation.
47 This is because the operation lists don't match, so it falls back to matrix animation, which 
48 normalizes the angle to between 0 and 360 degrees.
49 </p>
50 <div id="box">
51 </div>
52 <div id="result">
53 </div>
54 </body>
55 </html>