55 lines
1.3 KiB
HTML
55 lines
1.3 KiB
HTML
<html>
|
|
<head>
|
|
<style>
|
|
#box {
|
|
position: relative;
|
|
width: 10px;
|
|
height: 10px;
|
|
background-color: green;
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
-webkit-transition: -webkit-transform 200ms linear;
|
|
}
|
|
</style>
|
|
<script>
|
|
|
|
if (window.testRunner) {
|
|
window.testRunner.dumpAsText();
|
|
window.testRunner.waitUntilDone();
|
|
}
|
|
|
|
var NUMBER_OF_INTERRUPTIONS = 30;
|
|
var interruptionCount = 0;
|
|
var box;
|
|
|
|
function interruptTransition() {
|
|
if (interruptionCount <= NUMBER_OF_INTERRUPTIONS) {
|
|
interruptionCount++;
|
|
box.style.webkitTransform = 'translate3d(' + (interruptionCount * 5) + "px, 0, 0)";
|
|
// call the function again, before the transition can complete
|
|
setTimeout(interruptTransition, 0);
|
|
}
|
|
}
|
|
|
|
function finishTest() {
|
|
var results = document.getElementById("results");
|
|
results.innerText = "The transition completed successfully.";
|
|
|
|
if (window.testRunner)
|
|
window.testRunner.notifyDone();
|
|
}
|
|
|
|
window.addEventListener("load", function () {
|
|
box = document.getElementById("box");
|
|
box.addEventListener("webkitTransitionEnd", finishTest, false);
|
|
// start the rush of interruptions
|
|
setTimeout(interruptTransition, 10);
|
|
}, false);
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="box"></div>
|
|
<p>This test should not crash</p>
|
|
<p id="results"></p>
|
|
</body>
|
|
</html> |