<!DOCTYPE html>
<title>CSS Transitions: transition events for an element changing document</title>
<link rel="help" href="https://drafts.csswg.org/css-transitions">
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<div id="target"></div>
<iframe src="about:blank"></iframe>
<script>
promise_test(async () => {
    const target = document.getElementById("target");
    target.style.transition = "margin-left 100ms";

    const transitionMarginLeft = async value => {
        getComputedStyle(target).marginLeft;
        target.style.marginLeft = value;
        await target.getAnimations()[0].ready;
    }

    // start an initial transition.
    await transitionMarginLeft("100px");

    // move the target to new frame, this should cancel the transition.
    const transitionWasCanceled = new Promise(resolve => target.addEventListener("transitioncancel", resolve, { once: true }));
    document.querySelector("iframe").contentDocument.body.appendChild(target);
    await transitionWasCanceled;

    // Start a new transition and ensure it triggers a transitionend event.
    const transitionEnded = new Promise(resolve => target.addEventListener("transitionend", resolve, { once: true }));
    await transitionMarginLeft("0px");
    await transitionEnded;
}, "transition events for an element changing document");
</script>