style-change-events.html (2855B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>DocumentTimeline interface: style change events</title> 4 <link rel="help" 5 href="https://drafts.csswg.org/web-animations-1/#model-liveness"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="../../testcommon.js"></script> 9 <body> 10 <div id="log"></div> 11 <script> 12 'use strict'; 13 14 // NOTE: If more members are added to the DocumentTimeline interface it might be 15 // better to rewrite these test in the same style as: 16 // 17 // web-animations/interfaces/Animation/style-change-events.html 18 // web-animations/interfaces/KeyframeEffect/style-change-events.html 19 20 promise_test(async t => { 21 const div = createDiv(t); 22 23 let gotTransition = false; 24 div.addEventListener('transitionrun', () => { 25 gotTransition = true; 26 }); 27 28 // Create a covering animation but don't play it yet. 29 const coveringAnimation = new Animation( 30 new KeyframeEffect(div, { opacity: [0, 1] }, 100 * MS_PER_SEC) 31 ); 32 33 // Setup transition start point. 34 div.style.transition = 'opacity 100s'; 35 getComputedStyle(div).opacity; 36 37 // Update specified style but don't flush style. 38 div.style.opacity = '0.5'; 39 40 // Get the currentTime 41 document.timeline.currentTime; 42 43 // Run the covering animation 44 coveringAnimation.play(); 45 46 // If getting DocumentTimeline.currentTime produced a style change event it 47 // will trigger a transition. Otherwise, the covering animation will cause 48 // the before-change and after-change styles to be the same such that no 49 // transition is triggered on the next restyle. 50 51 // Wait for a couple of animation frames to give the transitionrun event 52 // a chance to be dispatched. 53 await waitForAnimationFrames(2); 54 55 assert_false(gotTransition, 'A transition should NOT have been triggered'); 56 }, 'DocumentTimeline.currentTime does NOT trigger a style change event'); 57 58 promise_test(async t => { 59 const div = createDiv(t); 60 61 let gotTransition = false; 62 div.addEventListener('transitionrun', () => { 63 gotTransition = true; 64 }); 65 66 // Create a covering animation but don't play it yet. 67 const coveringAnimation = new Animation( 68 new KeyframeEffect(div, { opacity: [0, 1] }, 100 * MS_PER_SEC) 69 ); 70 71 // Setup transition start point. 72 div.style.transition = 'opacity 100s'; 73 getComputedStyle(div).opacity; 74 75 // Update specified style but don't flush style. 76 div.style.opacity = '0.5'; 77 78 // Create a new DocumentTimeline 79 new DocumentTimeline(); 80 81 // Run the covering animation 82 coveringAnimation.play(); 83 84 // Wait for a couple of animation frames to give the transitionrun event 85 // a chance to be dispatched. 86 await waitForAnimationFrames(2); 87 88 assert_false(gotTransition, 'A transition should NOT have been triggered'); 89 }, 'DocumentTimeline constructor does NOT trigger a style change event'); 90 91 </script> 92 </body>