block-view-timeline-nested-subject.tentative.html (4295B)
1 <!DOCTYPE html> 2 <html id="top"> 3 <meta charset="utf-8"> 4 <title>View timeline nested subject</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 type="text/css"> 12 #container { 13 overflow-y: scroll; 14 height: 300px; 15 width: 300px; 16 } 17 .big-spacer { 18 height: 800px; 19 } 20 .small-spacer { 21 height: 100px; 22 } 23 #block { 24 background-color: #ddd; 25 } 26 #target { 27 background-color: green; 28 height: 100px; 29 width: 100px; 30 } 31 </style> 32 <body> 33 <div id="container"> 34 <div class="big-spacer"></div> 35 <div id="block"> 36 <div class="small-spacer"></div> 37 <div id="target"></div> 38 </div> 39 <div class="big-spacer"></div> 40 </div> 41 </body> 42 <script type="text/javascript"> 43 promise_test(async t => { 44 container.scrollTop = 0; 45 await waitForNextFrame(); 46 47 const anim = CreateViewTimelineOpacityAnimation(t, target); 48 const timeline = anim.timeline; 49 await anim.ready; 50 51 // start offset = 800 + 100 - 300 = 600 52 // end offset = 800 + 100 + 100 = 1000 53 // scroll limit = L = 800 + 200 + 800 - 300 = 1500 54 // progress = P = (current - start) / (end - start) 55 // P(0) = -600 / 400 = -1.5 56 // P(L) = 900 / 400 = 2.5 57 58 // Initially before start-offset and animation effect is in the before 59 // phase. 60 assert_percents_equal(timeline.currentTime, -150, 61 "Timeline's currentTime at container start boundary"); 62 assert_percents_equal(anim.currentTime, -150, 63 "Animation's currentTime at container start boundary"); 64 assert_equals(getComputedStyle(target).opacity, "1", 65 'Effect is inactive in the before phase'); 66 67 68 // Advance to the start offset, which triggers entry to the active phase. 69 await runAndWaitForFrameUpdate(() => { 70 container.scrollTop = 600; 71 }); 72 assert_percents_equal(timeline.currentTime, 0, 73 "Timeline's current time at start offset"); 74 assert_percents_equal(anim.currentTime, 0, 75 "Animation's current time at start offset"); 76 assert_equals(getComputedStyle(target).opacity, '0.3', 77 'Effect at the start of the active phase'); 78 79 // Advance to the midpoint of the animation. 80 await runAndWaitForFrameUpdate(() => { 81 container.scrollTop = 800; 82 }); 83 assert_percents_equal(timeline.currentTime, 50, 84 "Timeline's currentTime at midpoint"); 85 assert_percents_equal(anim.currentTime, 50, 86 "Animation's currentTime at midpoint"); 87 assert_equals(getComputedStyle(target).opacity,'0.5', 88 'Effect at the midpoint of the active range'); 89 90 // Advance to the end of the animation. 91 await runAndWaitForFrameUpdate(() => { 92 container.scrollTop = 1000; 93 }); 94 assert_percents_equal(timeline.currentTime, 100, 95 "Timeline's currentTime at end offset"); 96 assert_percents_equal(anim.currentTime, 100, 97 "Animation's currentTime at end offset"); 98 assert_equals(getComputedStyle(target).opacity, '0.7', 99 'Effect is in the after phase at effect end time'); 100 101 // Advance to the scroll limit. 102 await runAndWaitForFrameUpdate(() => { 103 container.scrollTop = 1600; 104 }); 105 assert_percents_equal(timeline.currentTime, 225, 106 "Timeline's currentTime at scroll limit"); 107 // Hold time set when the animation finishes, which clamps the value of 108 // the animation's currentTime. 109 assert_percents_equal(anim.currentTime, 100, 110 "Animation's currentTime at scroll limit"); 111 // In the after phase, so the effect should not be applied. 112 assert_equals(getComputedStyle(target).opacity, '1', 113 'After phase at scroll limit'); 114 }, 'View timeline with subject that is not a direct descendant of the ' + 115 'scroll container'); 116 </script> 117 </html>