<!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>