Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /web-animations/interfaces/DocumentTimeline/style-change-events.html - WPT Dashboard Interop Dashboard
<!doctype html>
<meta charset=utf-8>
<title>DocumentTimeline interface: style change events</title>
<link rel="help"
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<body>
<div id="log"></div>
<script>
'use strict';
// NOTE: If more members are added to the DocumentTimeline interface it might be
// better to rewrite these test in the same style as:
//
// web-animations/interfaces/Animation/style-change-events.html
// web-animations/interfaces/KeyframeEffect/style-change-events.html
promise_test(async t => {
const div = createDiv(t);
let gotTransition = false;
div.addEventListener('transitionrun', () => {
gotTransition = true;
});
// Create a covering animation but don't play it yet.
const coveringAnimation = new Animation(
new KeyframeEffect(div, { opacity: [0, 1] }, 100 * MS_PER_SEC)
);
// Setup transition start point.
div.style.transition = 'opacity 100s';
getComputedStyle(div).opacity;
// Update specified style but don't flush style.
div.style.opacity = '0.5';
// Get the currentTime
document.timeline.currentTime;
// Run the covering animation
coveringAnimation.play();
// If getting DocumentTimeline.currentTime produced a style change event it
// will trigger a transition. Otherwise, the covering animation will cause
// the before-change and after-change styles to be the same such that no
// transition is triggered on the next restyle.
// Wait for a couple of animation frames to give the transitionrun event
// a chance to be dispatched.
await waitForAnimationFrames(2);
assert_false(gotTransition, 'A transition should NOT have been triggered');
}, 'DocumentTimeline.currentTime does NOT trigger a style change event');
promise_test(async t => {
const div = createDiv(t);
let gotTransition = false;
div.addEventListener('transitionrun', () => {
gotTransition = true;
});
// Create a covering animation but don't play it yet.
const coveringAnimation = new Animation(
new KeyframeEffect(div, { opacity: [0, 1] }, 100 * MS_PER_SEC)
);
// Setup transition start point.
div.style.transition = 'opacity 100s';
getComputedStyle(div).opacity;
// Update specified style but don't flush style.
div.style.opacity = '0.5';
// Create a new DocumentTimeline
new DocumentTimeline();
// Run the covering animation
coveringAnimation.play();
// Wait for a couple of animation frames to give the transitionrun event
// a chance to be dispatched.
await waitForAnimationFrames(2);
assert_false(gotTransition, 'A transition should NOT have been triggered');
}, 'DocumentTimeline constructor does NOT trigger a style change event');
</script>
</body>