dino@apple.com | 5863503 | 2018-09-12 20:59:33 +0000 | [diff] [blame] | 1 | <!DOCTYPE html><!-- webkit-test-runner [ experimental:WebAnimationsCSSIntegrationEnabled=true ] --> |
dino@apple.com | 4952336 | 2008-09-16 00:46:10 +0000 | [diff] [blame] | 2 | |
simon.fraser@apple.com | 4803cdd | 2011-04-26 03:25:14 +0000 | [diff] [blame] | 3 | <html> |
dino@apple.com | 4952336 | 2008-09-16 00:46:10 +0000 | [diff] [blame] | 4 | <head> |
simon.fraser@apple.com | 4803cdd | 2011-04-26 03:25:14 +0000 | [diff] [blame] | 5 | <style> |
dino@apple.com | 4952336 | 2008-09-16 00:46:10 +0000 | [diff] [blame] | 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> |
simon.fraser@apple.com | 4803cdd | 2011-04-26 03:25:14 +0000 | [diff] [blame] | 16 | <script src="resources/transition-test-helpers.js"></script> |
| 17 | <script type="text/javascript"> |
dino@apple.com | 4952336 | 2008-09-16 00:46:10 +0000 | [diff] [blame] | 18 | |
pol@apple.com | 8ceda8d | 2008-12-19 00:39:21 +0000 | [diff] [blame] | 19 | function DegreesToRotation(angle) |
dino@apple.com | 4952336 | 2008-09-16 00:46:10 +0000 | [diff] [blame] | 20 | { |
simon.fraser@apple.com | 4605648 | 2008-12-31 05:16:27 +0000 | [diff] [blame] | 21 | return roundNumber(Math.cos(angle * Math.PI / 180), 5); |
dino@apple.com | 4952336 | 2008-09-16 00:46:10 +0000 | [diff] [blame] | 22 | } |
| 23 | |
pol@apple.com | 8ceda8d | 2008-12-19 00:39:21 +0000 | [diff] [blame] | 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() |
dino@apple.com | 4952336 | 2008-09-16 00:46:10 +0000 | [diff] [blame] | 31 | { |
pol@apple.com | 8ceda8d | 2008-12-19 00:39:21 +0000 | [diff] [blame] | 32 | var box = document.getElementById('box'); |
| 33 | box.style.webkitTransform = 'rotate(540deg)'; |
dino@apple.com | 4952336 | 2008-09-16 00:46:10 +0000 | [diff] [blame] | 34 | } |
| 35 | |
simon.fraser@apple.com | 4803cdd | 2011-04-26 03:25:14 +0000 | [diff] [blame] | 36 | runTransitionTest(expectedValues, setupTest, usePauseAPI); |
dino@apple.com | 4952336 | 2008-09-16 00:46:10 +0000 | [diff] [blame] | 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> |