blob: 0aa42f0864deb75249465bd0d682732ce610d280 [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(135), DegreesToRotation(10)],
[1.0, "box", "-webkit-transform.0", DegreesToRotation(90), DegreesToRotation(10)],
function setupTest()
var box = document.getElementById('box'); = 'translateX(0px) rotate(540deg)';
runTransitionTest(expectedValues, setupTest);
Box should spin 540 degrees because that is the specified rotation and the transform operation lists match,
so we should animate each operation separately.
<div id="box">
<div id="result">