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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
<!doctype html>
<meta charset=utf-8>
<title>DocumentTimeline interface: style change events</title>
<link rel="help"
href="https://drafts.csswg.org/web-animations-1/#model-liveness">
<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>
|
