mirror of
https://github.com/servo/servo.git
synced 2025-06-25 17:44:33 +01:00
32 lines
1.4 KiB
HTML
32 lines
1.4 KiB
HTML
<!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>
|