block-view-timeline-current-time.tentative.html (8630B)
1 <!DOCTYPE html> 2 <html id="top"> 3 <meta charset="utf-8"> 4 <title>View timeline current-time</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 border: 10px solid lightgray; 14 overflow-y: scroll; 15 height: 200px; 16 width: 200px; 17 } 18 .spacer { 19 height: 800px; 20 } 21 #target { 22 background-color: green; 23 height: 200px; 24 width: 100px; 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.scrollTop = 0; 37 await waitForNextFrame(); 38 39 const anim = CreateViewTimelineOpacityAnimation(t, target); 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.scrollTop = 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.scrollTop = 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.scrollTop = 1000; 77 }); 78 assert_percents_equal(timeline.currentTime, 100, 79 "Timeline's currentTime at end offset"); 80 assert_percents_equal(anim.currentTime, 100, 81 "Animation's currentTime at end offset"); 82 assert_equals(getComputedStyle(target).opacity, '0.7', 83 'Effect is in the after phase at effect end time'); 84 85 // Advance to the scroll limit. 86 await runAndWaitForFrameUpdate(() => { 87 container.scrollTop = 1600; 88 }); 89 assert_percents_equal(timeline.currentTime, 250, 90 "Timeline's currentTime at scroll limit"); 91 // Hold time set when the animation finishes, which clamps the value of 92 // the animation's currentTime. 93 assert_percents_equal(anim.currentTime, 100, 94 "Animation's currentTime at scroll limit"); 95 // In the after phase, so the effect should not be applied. 96 assert_equals(getComputedStyle(target).opacity, '1', 97 'After phase at scroll limit'); 98 }, 'View timeline with start and end scroll offsets that do not align with ' + 99 'the scroll boundaries' ); 100 101 promise_test(async t => { 102 const leading = document.getElementById('leading-space'); 103 leading.style = 'display: none'; 104 t.add_cleanup(() => { 105 leading.style = null; 106 }); 107 108 await runAndWaitForFrameUpdate(() => { 109 container.scrollTop = 0; 110 }); 111 112 const anim = CreateViewTimelineOpacityAnimation(t, target); 113 const timeline = anim.timeline; 114 await anim.ready; 115 116 assert_percents_equal(timeline.currentTime, 50, 117 "Timeline's currentTime at container start boundary"); 118 assert_percents_equal(anim.currentTime, 50, 119 "Animation's currentTime at container start boundary"); 120 assert_equals(getComputedStyle(target).opacity, "0.5", 121 'Effect enters active phase at container start boundary'); 122 123 124 // Advance to midpoint 125 await runAndWaitForFrameUpdate(() => { 126 container.scrollTop = 100; 127 }); 128 assert_percents_equal(timeline.currentTime, 75, 129 "Timeline's current time at midpoint"); 130 assert_percents_equal(anim.currentTime, 75, 131 "Animation's current time at midpoint"); 132 assert_equals(getComputedStyle(target).opacity, '0.6', 133 'Effect at the middle of the active phase'); 134 135 // Advance to end-offset 136 await runAndWaitForFrameUpdate(() => { 137 container.scrollTop = 200; 138 }); 139 assert_percents_equal(timeline.currentTime, 100, 140 "Timeline's current time at end offset"); 141 assert_percents_equal(anim.currentTime, 100, 142 "Animation's current time at end offset"); 143 assert_equals(getComputedStyle(target).opacity, '0.7', 144 'Effect inactive at the end offset'); 145 146 // Advance to scroll limit. 147 await runAndWaitForFrameUpdate(() => { 148 container.scrollTop = 800; 149 }); 150 assert_percents_equal(timeline.currentTime, 250, 151 "Timeline's current time at scroll limit"); 152 assert_percents_equal(anim.currentTime, 100, 153 "Animation's current time at scroll limit"); 154 assert_equals(getComputedStyle(target).opacity, '1', 155 'Effect inactive in the after phase'); 156 157 }, 'View timeline does not clamp starting scroll offset at 0'); 158 159 promise_test(async t => { 160 const trailing = document.getElementById('trailing-space'); 161 trailing.style = 'display: none'; 162 t.add_cleanup(() => { 163 trailing.style = null; 164 }); 165 166 await runAndWaitForFrameUpdate(() => { 167 container.scrollTop = 0; 168 }); 169 170 const anim = CreateViewTimelineOpacityAnimation(t, target); 171 const timeline = anim.timeline; 172 await anim.ready; 173 174 // Initially in before phase. 175 assert_percents_equal(timeline.currentTime, -150, 176 "Timeline's currentTime at container start boundary"); 177 assert_percents_equal(anim.currentTime, -150, 178 "Animation's currentTime at container start boundary"); 179 assert_equals(getComputedStyle(target).opacity, "1", 180 'Effect enters active phase at container start boundary'); 181 182 // Advance to start offset. 183 await runAndWaitForFrameUpdate(() => { 184 container.scrollTop = 600; 185 }); 186 assert_percents_equal(timeline.currentTime, 0, 187 "Timeline's current time at start offset"); 188 assert_percents_equal(anim.currentTime, 0, 189 "Animation's current time at start offset"); 190 assert_equals(getComputedStyle(target).opacity, '0.3', 191 'Effect at the start of the active phase'); 192 193 // Advance to midpoint. 194 await runAndWaitForFrameUpdate(() => { 195 container.scrollTop = 700; 196 }); 197 assert_percents_equal(timeline.currentTime, 25, 198 "Timeline's current time at the midpoint"); 199 assert_percents_equal(anim.currentTime, 25, 200 "Animation's current time at the midpoint"); 201 assert_equals(getComputedStyle(target).opacity, '0.4', 202 'Effect at the midpoint of the active phase'); 203 204 // Advance to end offset. 205 await runAndWaitForFrameUpdate(() => { 206 container.scrollTop = 800; 207 }); 208 assert_percents_equal(timeline.currentTime, 50, 209 "Timeline's currentTime at max scroll offset"); 210 assert_percents_equal(anim.currentTime, 50, 211 "Animation's currentTime at max scroll offset"); 212 // The active-after boundary is inclusive since at the maximum scroll 213 // position. 214 assert_equals(getComputedStyle(target).opacity, "0.5", 215 'Effect at end of active phase'); 216 }, 'View timeline does not clamp end scroll offset at max scroll'); 217 218 </script> 219 </html>