interrupted-transition.html | Explore in Territory

<html>
<head>
<style>
#box {
    position: relative;
    width: 10px;
    height: 10px;
    background-color: green;
    transform: translate3d(0, 0, 0);
    transition: transform 200ms linear;
}
</style>
<script>

if (window.testRunner) {
    testRunner.dumpAsText();
    testRunner.waitUntilDone();
}

var NUMBER_OF_INTERRUPTIONS = 30;
var interruptionCount = 0;
var box;

function interruptTransition() {
    if (interruptionCount <= NUMBER_OF_INTERRUPTIONS) {
        interruptionCount++;
        box.style.transform = '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)
        testRunner.notifyDone();
}

window.addEventListener("load", function () {
    box = document.getElementById("box");
    box.addEventListener("transitionend", 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>
chromium/third_party/blink/web_tests/transitions/3d/interrupted-transition.html
