inline-view-timeline-current-time.tentative.html (13002B)
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-x: scroll; 15 height: 200px; 16 width: 200px; 17 } 18 #content { 19 display: flex; 20 flex-flow: row nowrap; 21 justify-content: flex-start; 22 width: 1800px; 23 margin: 0; 24 } 25 .spacer { 26 width: 800px; 27 display: inline-block; 28 } 29 #target { 30 background-color: green; 31 height: 100px; 32 width: 200px; 33 display: inline-block; 34 } 35 </style> 36 <body> 37 <div id="container"> 38 <div id="content"> 39 <div id="leading-space" class="spacer"></div> 40 <div id="target"></div> 41 <div id="trailing-space" class="spacer"></div> 42 </div> 43 </div> 44 </body> 45 <script type="text/javascript"> 46 promise_test(async t => { 47 await runAndWaitForFrameUpdate(() => { 48 container.scrollLeft = 0; 49 }); 50 51 const anim = CreateViewTimelineOpacityAnimation(t, target, 52 { 53 timeline: 54 {axis: 'inline'} 55 }); 56 const timeline = anim.timeline; 57 await anim.ready; 58 59 // Initially before start-offset and animation effect is in the before 60 // phase. 61 assert_percents_equal(timeline.currentTime, -150, 62 "Timeline's currentTime at container start boundary"); 63 assert_percents_equal(anim.currentTime, -150, 64 "Animation's currentTime at container start boundary"); 65 assert_equals(getComputedStyle(target).opacity, "1", 66 'Effect is inactive in the before phase'); 67 68 // Advance to the start offset, which triggers entry to the active phase. 69 await runAndWaitForFrameUpdate(() => { 70 container.scrollLeft = 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.scrollLeft = 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.scrollLeft = 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.scrollLeft = 1600; 104 }); 105 assert_percents_equal(timeline.currentTime, 250, 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 start and end scroll offsets that do not align with ' + 115 'the scroll boundaries' ); 116 117 promise_test(async t => { 118 const leading = document.getElementById('leading-space'); 119 leading.style = 'display: none'; 120 content.style = 'width: 1000px'; 121 t.add_cleanup(() => { 122 leading.style = null; 123 content.style = null; 124 }); 125 126 await runAndWaitForFrameUpdate(() => { 127 container.scrollLeft = 0; 128 }); 129 130 const anim = CreateViewTimelineOpacityAnimation(t, target, 131 { 132 timeline: 133 {axis: 'inline'} 134 }); 135 const timeline = anim.timeline; 136 await anim.ready; 137 138 assert_percents_equal(timeline.currentTime, 50, 139 "Timeline's currentTime at container start boundary"); 140 assert_percents_equal(anim.currentTime, 50, 141 "Animation's currentTime at container start boundary"); 142 assert_equals(getComputedStyle(target).opacity, "0.5", 143 'Effect enters active phase at container start boundary'); 144 145 146 // Advance to midpoint 147 await runAndWaitForFrameUpdate(() => { 148 container.scrollLeft = 100; 149 }); 150 assert_percents_equal(timeline.currentTime, 75, 151 "Timeline's current time at the midpoint"); 152 assert_percents_equal(anim.currentTime, 75, 153 "Animation's current time at the midpoint"); 154 assert_equals(getComputedStyle(target).opacity, '0.6', 155 'Effect at the midpoint of the active phase'); 156 157 // Advance to end-offset 158 await runAndWaitForFrameUpdate(() => { 159 container.scrollLeft = 200; 160 }); 161 assert_percents_equal(timeline.currentTime, 100, 162 "Timeline's current time at end offset"); 163 assert_percents_equal(anim.currentTime, 100, 164 "Animation's current time at end offset"); 165 assert_equals(getComputedStyle(target).opacity, '0.7', 166 'Effect at the end of the active phase'); 167 168 // Advance to scroll limit. 169 await runAndWaitForFrameUpdate(() => { 170 container.scrollLeft = 800; 171 }); 172 assert_percents_equal(timeline.currentTime, 250, 173 "Timeline's current time at the scroll limit"); 174 assert_percents_equal(anim.currentTime, 100, 175 "Animation's current time at the scroll limit"); 176 assert_equals(getComputedStyle(target).opacity, '1', 177 'Effect at the scroll limit'); 178 179 }, 'View timeline does not clamp starting scroll offset at 0'); 180 181 promise_test(async t => { 182 const trailing = document.getElementById('trailing-space'); 183 trailing.style = 'display: none'; 184 content.style = 'width: 1000px'; 185 t.add_cleanup(() => { 186 trailing.style = null; 187 content.style = null; 188 }); 189 190 await runAndWaitForFrameUpdate(() => { 191 container.scrollLeft = 0; 192 }); 193 194 const anim = CreateViewTimelineOpacityAnimation(t, target, 195 { 196 timeline: 197 {axis: 'inline'} 198 }); 199 const timeline = anim.timeline; 200 await anim.ready; 201 202 // Initially in before phase. 203 assert_percents_equal(timeline.currentTime, -150, 204 "Timeline's currentTime at container start boundary"); 205 assert_percents_equal(anim.currentTime, -150, 206 "Animation's currentTime at container start boundary"); 207 assert_equals(getComputedStyle(target).opacity, "1", 208 'Effect enters active phase at container start boundary'); 209 210 // Advance to start offset. 211 await runAndWaitForFrameUpdate(() => { 212 container.scrollLeft = 600; 213 }); 214 assert_percents_equal(timeline.currentTime, 0, 215 "Timeline's current time at start offset"); 216 assert_percents_equal(anim.currentTime, 0, 217 "Animation's current time at start offset"); 218 assert_equals(getComputedStyle(target).opacity, '0.3', 219 'Effect at the start of the active phase'); 220 221 // Advance to midpoint 222 await runAndWaitForFrameUpdate(() => { 223 container.scrollLeft = 700; 224 }); 225 assert_percents_equal(timeline.currentTime, 25, 226 "Timeline's current time at midpoint"); 227 assert_percents_equal(anim.currentTime, 25, 228 "Animation's current time at midpoint"); 229 assert_equals(getComputedStyle(target).opacity, '0.4', 230 'Effect at the midpoint of the active phase'); 231 232 // Advance to end offset. 233 await runAndWaitForFrameUpdate(() => { 234 container.scrollLeft = 800; 235 }); 236 assert_percents_equal(timeline.currentTime, 50, 237 "Timeline's currentTime at max scroll offset"); 238 assert_percents_equal(anim.currentTime, 50, 239 "Animation's currentTime at max scroll offset"); 240 // The active-after boundary is inclusive since at the scroll-limit. 241 assert_equals(getComputedStyle(target).opacity, "0.5", 242 'Effect at end of active phase'); 243 }, 'View timeline does not clamp end scroll offset at max scroll'); 244 245 246 promise_test(async t => { 247 container.style = "direction: rtl"; 248 container.scrollLeft = 0; 249 t.add_cleanup(() => { 250 content.style = null; 251 }); 252 await waitForNextFrame(); 253 254 const anim = CreateViewTimelineOpacityAnimation(t, target, 255 { 256 timeline: 257 {axis: 'inline'} 258 }); 259 const timeline = anim.timeline; 260 await anim.ready; 261 262 // Initially before start-offset and animation effect is in the before 263 // phase. 264 assert_percents_equal(timeline.currentTime, -150, 265 "Timeline's currentTime at container start boundary"); 266 assert_percents_equal(anim.currentTime, -150, 267 "Animation's currentTime at container start boundary"); 268 assert_equals(getComputedStyle(target).opacity, "1", 269 'Effect is inactive in the before phase'); 270 271 // Advance to the start offset, which triggers entry to the active phase. 272 await runAndWaitForFrameUpdate(() => { 273 container.scrollLeft = -600; 274 }); 275 assert_percents_equal(timeline.currentTime, 0, 276 "Timeline's current time at start offset"); 277 assert_percents_equal(anim.currentTime, 0, 278 "Animation's current time at start offset"); 279 assert_equals(getComputedStyle(target).opacity, '0.3', 280 'Effect at the start of the active phase'); 281 282 // Advance to the midpoint of the animation. 283 await runAndWaitForFrameUpdate(() => { 284 container.scrollLeft = -800; 285 }); 286 assert_percents_equal(timeline.currentTime, 50, 287 "Timeline's currentTime at midpoint"); 288 assert_percents_equal(anim.currentTime, 50, 289 "Animation's currentTime at midpoint"); 290 assert_equals(getComputedStyle(target).opacity,'0.5', 291 'Effect at the midpoint of the active range'); 292 293 // Advance to the end of the animation. 294 await runAndWaitForFrameUpdate(() => { 295 container.scrollLeft = -1000; 296 }); 297 assert_percents_equal(timeline.currentTime, 100, 298 "Timeline's currentTime at end offset"); 299 assert_percents_equal(anim.currentTime, 100, 300 "Animation's currentTime at end offset"); 301 assert_equals(getComputedStyle(target).opacity, '0.7', 302 'Effect is in the after phase at effect end time'); 303 304 // Advance to the scroll limit. 305 await runAndWaitForFrameUpdate(() => { 306 container.scrollLeft = -1600; 307 }); 308 assert_percents_equal(timeline.currentTime, 250, 309 "Timeline's currentTime at scroll limit"); 310 // Hold time set when the animation finishes, which clamps the value of 311 // the animation's currentTime. 312 assert_percents_equal(anim.currentTime, 100, 313 "Animation's currentTime at scroll limit"); 314 // In the after phase, so the effect should not be applied. 315 assert_equals(getComputedStyle(target).opacity, '1', 316 'After phase at scroll limit'); 317 }, 'View timeline with container having RTL layout' ); 318 </script> 319 </html>