1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!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>
|
