blob: 6d6760c9dfaedaa8a738714e64507d2a4d34ed08 [file] [log] [blame]
<!DOCTYPE html>
#box {
height: 100px;
width: 100px;
background-color: blue;
transform: translateX(0px) rotate(0deg);
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-webkit-transition-property: transform;
<script src="../animations/resources/animation-test-helpers.js"></script>
<script type="text/javascript">
function DegreesToRotation(angle)
return roundNumber(Math.cos(angle * Math.PI / 180), 5);
const expectedValues = [
// [time, element-id, property, expected-value, tolerance]
[0.5, "box", "-webkit-transform.0", DegreesToRotation(45), DegreesToRotation(10)],
[1.0, "box", "-webkit-transform.0", DegreesToRotation(90), DegreesToRotation(10)],
function setupTest()
var box = document.getElementById('box'); = 'rotate(540deg)';
runTransitionTest(expectedValues, setupTest);
Box should spin only 180 degrees even though the operation specifies a 0 to 540 degree animation.
This is because the operation lists don't match, so it falls back to matrix animation, which
normalizes the angle to between 0 and 360 degrees.
<div id="box">
<div id="result">