blob: 86dea7e0fa5ebd3567bc21408c077f2a47282a27 [file] [log] [blame]
dino@apple.com58635032018-09-12 20:59:33 +00001<!DOCTYPE html><!-- webkit-test-runner [ experimental:WebAnimationsCSSIntegrationEnabled=true ] -->
dino@apple.com49523362008-09-16 00:46:10 +00002
simon.fraser@apple.com4803cdd2011-04-26 03:25:14 +00003<html>
dino@apple.com49523362008-09-16 00:46:10 +00004<head>
simon.fraser@apple.com4803cdd2011-04-26 03:25:14 +00005 <style>
dino@apple.com49523362008-09-16 00:46:10 +00006 #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>
simon.fraser@apple.com4803cdd2011-04-26 03:25:14 +000016 <script src="resources/transition-test-helpers.js"></script>
17 <script type="text/javascript">
dino@apple.com49523362008-09-16 00:46:10 +000018
pol@apple.com8ceda8d2008-12-19 00:39:21 +000019 function DegreesToRotation(angle)
dino@apple.com49523362008-09-16 00:46:10 +000020 {
simon.fraser@apple.com46056482008-12-31 05:16:27 +000021 return roundNumber(Math.cos(angle * Math.PI / 180), 5);
dino@apple.com49523362008-09-16 00:46:10 +000022 }
23
pol@apple.com8ceda8d2008-12-19 00:39:21 +000024 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()
dino@apple.com49523362008-09-16 00:46:10 +000031 {
pol@apple.com8ceda8d2008-12-19 00:39:21 +000032 var box = document.getElementById('box');
33 box.style.webkitTransform = 'rotate(540deg)';
dino@apple.com49523362008-09-16 00:46:10 +000034 }
35
simon.fraser@apple.com4803cdd2011-04-26 03:25:14 +000036 runTransitionTest(expectedValues, setupTest, usePauseAPI);
dino@apple.com49523362008-09-16 00:46:10 +000037 </script>
38</head>
39<body>
40
41<p>
42Box should spin only 180 degrees even though the operation specifies a 0 to 540 degree animation.
43This is because the operation lists don't match, so it falls back to matrix animation, which
44normalizes 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>