transition-events-with-document-change.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 1 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/css-transitions/transition-events-with-document-change.html - WPT Dashboard Interop Dashboard

<!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 () => {

    await new Promise(r => window.addEventListener("load", r));

    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>