<title>Test that new transitions do not run while we are suspended</title>
<style>
#box {
position: relative;
left: 0px;
height: 100px;
width: 100px;
background-color: blue;
-webkit-transition: left 0.1s;
}
</style>
<script>
var box;
function suspend()
{
if (window.internals)
internals.suspendAnimations();
function resume()
internals.resumeAnimations();
function transitionEnded(event)
log("Transition ended on element with id: " + event.target.id);
function suspendAndContinue()
log("*** Suspending Animations/Transitions");
suspend();
setTimeout(function() {
log("Transitions should be suspended: " + (window.internals.animationsAreSuspended() ? "PASS" : "FAIL"));
log("*** Setting left property to 200px. We should NOT see transition events.")
box.style.left = "200px";
endTest();
}, 200);
}, 100);
function resumeAndContinue()
function endTest()
log("*** Resuming Animations/Transitions");
resume();
log("Transitions should not be suspended: " + (window.internals.animationsAreSuspended() ? "FAIL" : "PASS"));
resume(); // Just in case.
log("*** Test finished");
if (window.testRunner)
testRunner.notifyDone();
function startTest()
log("*** Starting test.")
box = document.getElementById("box");
document.addEventListener("webkitTransitionEnd", transitionEnded, false);
log("*** Setting left property to 100px. We should see transition events.")
box.style.left = "100px";
suspendAndContinue();
}, 50);
function log(message)
var results = document.getElementById("results");
results.innerHTML = results.innerHTML + message + "<br>";
if (window.testRunner) {
testRunner.waitUntilDone();
testRunner.dumpAsText();
window.addEventListener("load", startTest, false);
</script>
<p>This test sets the left property on the box below. It will only have reproducible output when run in the test system</p>
<div id="box"></div>
<div id="results">
</div>