98 lines
2.5 KiB
HTML
98 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<title>Test that newly created transitions do not run while we are suspended</title>
|
|
<style>
|
|
#box {
|
|
position: relative;
|
|
left: 0px;
|
|
height: 50px;
|
|
width: 50px;
|
|
background-color: blue;
|
|
}
|
|
</style>
|
|
<script>
|
|
var box;
|
|
|
|
let transitionAllowedToRun = false;
|
|
|
|
function suspend()
|
|
{
|
|
if (window.internals)
|
|
internals.suspendAnimations();
|
|
}
|
|
|
|
function resume()
|
|
{
|
|
if (window.internals)
|
|
internals.resumeAnimations();
|
|
}
|
|
|
|
function transitionEnded(event)
|
|
{
|
|
if (transitionAllowedToRun)
|
|
log("PASS: Transition ended on element with id: " + event.target.id);
|
|
else
|
|
log("FAIL: Transition ended on element with id: " + event.target.id);
|
|
|
|
if (window.testRunner)
|
|
testRunner.notifyDone();
|
|
}
|
|
|
|
function suspendAndCreate()
|
|
{
|
|
log("*** Suspending Animations/Transitions");
|
|
suspend();
|
|
setTimeout(function() {
|
|
if (window.internals)
|
|
log("Transitions should be suspended: " + (window.internals.animationsAreSuspended() ? "PASS" : "FAIL"));
|
|
|
|
log("*** Creating the box.")
|
|
box = document.createElement("div");
|
|
box.id = "box";
|
|
document.addEventListener("webkitTransitionEnd", transitionEnded, false);
|
|
document.body.insertBefore(box, document.querySelector("#results"));
|
|
setTimeout(function() {
|
|
log("*** Adding transition property and setting left to 100px. We should NOT see transition events.")
|
|
box.style.webkitTransitionDuration = "100ms";
|
|
box.style.left = "100px";
|
|
setTimeout(resumeAnimations, 200);
|
|
}, 100);
|
|
}, 100);
|
|
}
|
|
|
|
function resumeAnimations()
|
|
{
|
|
log("*** Resuming Animations/Transitions");
|
|
transitionAllowedToRun = true;
|
|
resume();
|
|
if (window.internals)
|
|
log("Transitions should not be suspended: " + (window.internals.animationsAreSuspended() ? "FAIL" : "PASS"));
|
|
}
|
|
|
|
function startTest()
|
|
{
|
|
log("*** Starting test.")
|
|
|
|
if (window.internals)
|
|
log("Transitions should not be suspended: " + (window.internals.animationsAreSuspended() ? "FAIL" : "PASS"));
|
|
|
|
suspendAndCreate();
|
|
}
|
|
|
|
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 creates a box, adds a transition, then sets the left property. It will only have reproducible output when run in the test system</p>
|
|
<div id="results">
|
|
</div>
|