8 background-color: #fcc;
13 background-color: #933;
19 #container.run #left {
21 -webkit-transition-property: left;
22 -webkit-transition-duration: 1s;
23 -webkit-transition-timing-function: linear;
25 #container.run #translate {
26 transform: translate(400px, 0px);
27 -webkit-transition-property: transform;
28 -webkit-transition-duration: 1s;
29 -webkit-transition-timing-function: linear;
33 if (window.testRunner) {
34 testRunner.dumpAsText();
35 testRunner.waitUntilDone();
38 function isEqual(actual, desired, tolerance)
40 var diff = Math.abs(actual - desired);
41 return diff < tolerance;
44 function cancelTransition()
46 document.getElementById("container").className = "";
47 document.body.offsetHeight;
50 function restartTransition()
52 document.getElementById("container").className = "run";
53 document.body.offsetHeight;
54 // The transition should restart at the beginning here. After 250 it should be halfway done.
55 setTimeout(check, 500);
60 var left = parseFloat(window.getComputedStyle(document.getElementById('left')).left);
62 if (!isEqual(left, 250, 50))
63 result += "<span style='color:red'>FAIL (was: " + left + ", expected: 250)</span>";
65 result += "<span style='color:green'>PASS</span>";
67 result += ", webkitTransform: ";
69 var transform = window.getComputedStyle(document.getElementById('translate')).webkitTransform;
70 transform = transform.split("(");
71 transform = transform[1].split(",");
72 if (!isEqual(transform[4], 200, 50))
73 result += "<span style='color:red'>FAIL (was: " + transform[4] + ", expected: 200)</span>";
75 result += "<span style='color:green'>PASS</span>";
77 document.getElementById('result').innerHTML = result;
78 if (window.testRunner)
79 testRunner.notifyDone();
84 document.getElementById("container").className = "run";
85 document.body.offsetHeight;
86 setTimeout("cancelTransition()", 200);
87 setTimeout("restartTransition()", 400);
91 <body onload="start()">
93 Test removes the transition properties while the transition is running, then adds them back in.
94 If working properly the transitions should start from the beginning. But there was a bug that
95 would cause the transition to continue to run (although with no visible effect). So when you
96 restarted, it would pick up where it left off.
99 <div id="left">left</div>
100 <div id="translate">translate</div>
102 <div id="result"></div>