view-timeline-get-current-time-range-name.tentative.html (6614B)
1 <!DOCTYPE html> 2 <html id="top"> 3 <meta charset="utf-8"> 4 <title>View timeline delay</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: 100px; 33 display: inline-block; 34 } 35 </style> 36 <body> 37 <div id="container"> 38 <div id="content"> 39 <div class="spacer"></div> 40 <div id="target"></div> 41 <div class="spacer"></div> 42 </div> 43 </div> 44 </body> 45 <script type="text/javascript"> 46 const MAX_SCROLL = 1600; 47 48 promise_test(async t => { 49 // Points of interest along view timeline: 50 // 600 px cover start, entry start 51 // 700 px contain start, entry end 52 // 800 px contain end, exit start 53 // 900 px cover end, exit end 54 const anim = 55 CreateViewTimelineOpacityAnimation(t, target, 56 { 57 timeline: { axis: 'inline' }, 58 animation: { fill: 'both' } 59 }); 60 let timeline = anim.timeline; 61 62 assert_percents_approx_equal( 63 timeline.getCurrentTime('scroll'), 0, MAX_SCROLL, 64 'Scroll aligned with scroll start'); 65 66 await runAndWaitForFrameUpdate(() => { 67 container.scrollLeft = 600; 68 }); 69 70 assert_percents_approx_equal(timeline.getCurrentTime('cover'), 0, 71 MAX_SCROLL, 'Scroll aligned with cover start'); 72 assert_percents_approx_equal(timeline.getCurrentTime('entry'), 0, 73 MAX_SCROLL, 'Scroll aligned with entry start'); 74 assert_percents_approx_equal(timeline.getCurrentTime(), 0, 75 MAX_SCROLL, 76 'Scroll aligned with timeline start offset'); 77 let scroll_pct = (600 / MAX_SCROLL) * 100; 78 assert_percents_approx_equal( 79 timeline.getCurrentTime('scroll'), scroll_pct, MAX_SCROLL, 80 'getCurrentTime for "scroll" range scrollLeft=600'); 81 82 await runAndWaitForFrameUpdate(() => { 83 container.scrollLeft = 650; 84 }); 85 86 assert_percents_approx_equal(timeline.getCurrentTime('entry'), 50, 87 MAX_SCROLL, 'Scroll at entry midpoint'); 88 scroll_pct = (650 / MAX_SCROLL) * 100; 89 assert_percents_approx_equal( 90 timeline.getCurrentTime('scroll'), scroll_pct, MAX_SCROLL, 91 'getCurrentTime for "scroll" range scrollLeft=650'); 92 93 await runAndWaitForFrameUpdate(() => { 94 container.scrollLeft = 700; 95 }); 96 97 assert_percents_approx_equal(timeline.getCurrentTime('entry'), 100, 98 MAX_SCROLL, 'Scroll at entry end'); 99 assert_percents_approx_equal(timeline.getCurrentTime('contain'), 0, 100 MAX_SCROLL, 'Scroll at contain start'); 101 102 await runAndWaitForFrameUpdate(() => { 103 container.scrollLeft = 750; 104 }); 105 106 assert_percents_approx_equal(timeline.getCurrentTime('contain'), 50, 107 MAX_SCROLL, 'Scroll at contain midpoint'); 108 assert_percents_approx_equal(timeline.getCurrentTime(), 50, 109 MAX_SCROLL, 'Scroll at timeline midpoint'); 110 111 await runAndWaitForFrameUpdate(() => { 112 container.scrollLeft = 800; 113 }); 114 115 assert_percents_approx_equal(timeline.getCurrentTime('exit'), 0, 116 MAX_SCROLL, 'Scroll at exit start'); 117 assert_percents_approx_equal(timeline.getCurrentTime('contain'), 100, 118 MAX_SCROLL, 'Scroll at contain end'); 119 120 await runAndWaitForFrameUpdate(() => { 121 container.scrollLeft = 850; 122 }); 123 124 assert_percents_approx_equal(timeline.getCurrentTime('exit'), 50, 125 MAX_SCROLL, 'Scroll at exit midpoint'); 126 127 await runAndWaitForFrameUpdate(() => { 128 container.scrollLeft = 900; 129 }); 130 131 assert_percents_approx_equal(timeline.getCurrentTime('exit'), 100, 132 MAX_SCROLL, 'Scroll at exit end'); 133 assert_percents_approx_equal(timeline.getCurrentTime('cover'), 100, 134 MAX_SCROLL, 'Scroll at cover end'); 135 assert_percents_approx_equal(timeline.getCurrentTime(), 100, 136 MAX_SCROLL, 'Scroll at end of timeline'); 137 scroll_pct = (900 / MAX_SCROLL) * 100; 138 assert_percents_approx_equal( 139 timeline.getCurrentTime('scroll'), scroll_pct, MAX_SCROLL, 140 'getCurrentTime for "scroll" range scrollLeft=900'); 141 142 assert_equals(timeline.getCurrentTime('gibberish'), null, 143 'No current time for unknown named range'); 144 145 await runAndWaitForFrameUpdate(() => { 146 container.scrollLeft = MAX_SCROLL; 147 }); 148 assert_percents_approx_equal( 149 timeline.getCurrentTime('scroll'), 100, MAX_SCROLL, 150 'getCurrentTime for "scroll" range at max scroll offset'); 151 152 // Add insets to force the start and end offsets to align. This forces 153 // the timeline to become inactive. 154 // start_offset = target_offset - viewport_size + end_side_inset 155 // = 600 + end_side_inset 156 // end_offset = target_offset + target_size - start_side_inset 157 // = 900 - start_side_inset 158 // Equating start_offset and end_offset: 159 // end_side_inset = 300 - start_side_inset; 160 timeline = 161 new ViewTimeline ({ 162 subject: target, 163 axis: 'inline', 164 inset: [ CSS.px(150), CSS.px(150) ] 165 }); 166 anim.timeline = timeline; 167 await waitForNextFrame(); 168 169 assert_equals(timeline.currentTime, null, 170 'Current time is null when scroll-range is zero'); 171 assert_equals(timeline.getCurrentTime(), null, 172 'getCurrentTime with an inactive timeline.'); 173 assert_equals(timeline.getCurrentTime('contain'), null, 174 'getCurrentTime on a ranged name with an inactive timeline.'); 175 176 }, 'View timeline current time for named range'); 177 178 </script>