block-view-timeline-current-time-vertical-rl.tentative.html (4155B)
1 <!DOCTYPE html> 2 <html id="top"> 3 <meta charset="utf-8"> 4 <title>View timeline current-time with vertical-rl writing mode</title> 5 <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#viewtimeline-interface"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/web-animations/testcommon.js"></script> 9 <script src="/scroll-animations/scroll-timelines/testcommon.js"></script> 10 <script src="/scroll-animations/view-timelines/testcommon.js"></script> 11 <style> 12 #container { 13 writing-mode: vertical-rl; 14 overflow-x: scroll; 15 height: 200px; 16 width: 200px; 17 } 18 .spacer { 19 width: 800px; 20 } 21 #target { 22 background-color: green; 23 height: 100px; 24 width: 200px; 25 } 26 </style> 27 <body> 28 <div id="container"> 29 <div id="leading-space" class="spacer"></div> 30 <div id="target"></div> 31 <div id="trailing-space" class="spacer"></div> 32 </div> 33 </body> 34 <script type="text/javascript"> 35 promise_test(async t => { 36 container.scrollLeft = 0; 37 await waitForNextFrame(); 38 39 const anim = CreateViewTimelineOpacityAnimation(t, target, {axis: 'block'}); 40 const timeline = anim.timeline; 41 await anim.ready; 42 43 // Initially before start-offset and animation effect is in the before 44 // phase. 45 assert_percents_equal(timeline.currentTime, -150, 46 "Timeline's currentTime at container start boundary"); 47 assert_percents_equal(anim.currentTime, -150, 48 "Animation's currentTime at container start boundary"); 49 assert_equals(getComputedStyle(target).opacity, "1", 50 'Effect is inactive in the before phase'); 51 52 // Advance to the start offset, which triggers entry to the active phase. 53 await runAndWaitForFrameUpdate(() => { 54 container.scrollLeft = -600; 55 }); 56 assert_percents_equal(timeline.currentTime, 0, 57 "Timeline's current time at start offset"); 58 assert_percents_equal(anim.currentTime, 0, 59 "Animation's current time at start offset"); 60 assert_equals(getComputedStyle(target).opacity, '0.3', 61 'Effect at the start of the active phase'); 62 63 // Advance to the midpoint of the animation. 64 await runAndWaitForFrameUpdate(() => { 65 container.scrollLeft = -800; 66 }); 67 assert_percents_equal(timeline.currentTime, 50, 68 "Timeline's currentTime at midpoint"); 69 assert_percents_equal(anim.currentTime, 50, 70 "Animation's currentTime at midpoint"); 71 assert_equals(getComputedStyle(target).opacity,'0.5', 72 'Effect at the midpoint of the active range'); 73 74 // Advance to the end of the animation. 75 await runAndWaitForFrameUpdate(() => { 76 container.scrollLeft = -1000; 77 anim.effect.updateTiming({ fill: 'forwards' }); 78 }); 79 assert_percents_equal(timeline.currentTime, 100, 80 "Timeline's currentTime at end offset"); 81 assert_percents_equal(anim.currentTime, 100, 82 "Animation's currentTime at end offset"); 83 assert_equals(getComputedStyle(target).opacity, '0.7', 84 'Opacity with fill forwards at effect end time'); 85 anim.effect.updateTiming({ fill: 'none' }); 86 assert_equals(getComputedStyle(target).opacity, '0.7', 87 'Opacity with fill none at effect end time'); 88 89 // Advance to the scroll limit. 90 await runAndWaitForFrameUpdate(() => { 91 container.scrollLeft = -1600; 92 }); 93 assert_percents_equal(timeline.currentTime, 250, 94 "Timeline's currentTime at scroll limit"); 95 // Hold time set when the animation finishes, which clamps the value of 96 // the animation's currentTime. 97 assert_percents_equal(anim.currentTime, 100, 98 "Animation's currentTime at scroll limit"); 99 // In the after phase, so the effect should not be applied. 100 assert_equals(getComputedStyle(target).opacity, '1', 101 'After phase at scroll limit'); 102 }, 'View timeline with container having vertical-rl layout' ); 103 104 </script> 105 </html>