| <!DOCTYPE html> |
| <html id="top"> |
| <meta charset="utf-8"> |
| <title>View timeline delay</title> |
| <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#viewtimeline-interface"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/web-animations/testcommon.js"></script> |
| <script src="/scroll-animations/scroll-timelines/testcommon.js"></script> |
| <script src="/scroll-animations/view-timelines/testcommon.js"></script> |
| <style> |
| #container { |
| border: 10px solid lightgray; |
| overflow-x: scroll; |
| height: 200px; |
| width: 200px; |
| } |
| #content { |
| display: flex; |
| flex-flow: row nowrap; |
| justify-content: flex-start; |
| width: 1800px; |
| margin: 0; |
| } |
| .spacer { |
| width: 800px; |
| display: inline-block; |
| } |
| #target { |
| background-color: green; |
| height: 100px; |
| width: 100px; |
| display: inline-block; |
| } |
| </style> |
| <body> |
| <div id="container"> |
| <div id="content"> |
| <div class="spacer"></div> |
| <div id="target"></div> |
| <div class="spacer"></div> |
| </div> |
| </div> |
| </body> |
| <script type="text/javascript"> |
| const MAX_SCROLL = 1600; |
| |
| promise_test(async t => { |
| // Points of interest along view timeline: |
| // 600 px cover start, entry start |
| // 700 px contain start, entry end |
| // 800 px contain end, exit start |
| // 900 px cover end, exit end |
| const anim = |
| CreateViewTimelineOpacityAnimation(t, target, |
| { |
| timeline: { axis: 'inline' }, |
| animation: { fill: 'both' } |
| }); |
| let timeline = anim.timeline; |
| |
| assert_percents_approx_equal( |
| timeline.getCurrentTime('scroll'), 0, MAX_SCROLL, |
| 'Scroll aligned with scroll start'); |
| |
| container.scrollLeft = 600; |
| await waitForNextFrame(); |
| |
| assert_percents_approx_equal(timeline.getCurrentTime('cover'), 0, |
| MAX_SCROLL, 'Scroll aligned with cover start'); |
| assert_percents_approx_equal(timeline.getCurrentTime('entry'), 0, |
| MAX_SCROLL, 'Scroll aligned with entry start'); |
| assert_percents_approx_equal(timeline.getCurrentTime(), 0, |
| MAX_SCROLL, |
| 'Scroll aligned with timeline start offset'); |
| let scroll_pct = (600 / MAX_SCROLL) * 100; |
| assert_percents_approx_equal( |
| timeline.getCurrentTime('scroll'), scroll_pct, MAX_SCROLL, |
| 'getCurrentTime for "scroll" range scrollLeft=600'); |
| |
| container.scrollLeft = 650; |
| await waitForNextFrame(); |
| |
| assert_percents_approx_equal(timeline.getCurrentTime('entry'), 50, |
| MAX_SCROLL, 'Scroll at entry midpoint'); |
| scroll_pct = (650 / MAX_SCROLL) * 100; |
| assert_percents_approx_equal( |
| timeline.getCurrentTime('scroll'), scroll_pct, MAX_SCROLL, |
| 'getCurrentTime for "scroll" range scrollLeft=650'); |
| |
| container.scrollLeft = 700; |
| await waitForNextFrame(); |
| |
| assert_percents_approx_equal(timeline.getCurrentTime('entry'), 100, |
| MAX_SCROLL, 'Scroll at entry end'); |
| assert_percents_approx_equal(timeline.getCurrentTime('contain'), 0, |
| MAX_SCROLL, 'Scroll at contain start'); |
| |
| container.scrollLeft = 750; |
| await waitForNextFrame(); |
| |
| assert_percents_approx_equal(timeline.getCurrentTime('contain'), 50, |
| MAX_SCROLL, 'Scroll at contain midpoint'); |
| assert_percents_approx_equal(timeline.getCurrentTime(), 50, |
| MAX_SCROLL, 'Scroll at timeline midpoint'); |
| |
| container.scrollLeft = 800; |
| await waitForNextFrame(); |
| |
| assert_percents_approx_equal(timeline.getCurrentTime('exit'), 0, |
| MAX_SCROLL, 'Scroll at exit start'); |
| assert_percents_approx_equal(timeline.getCurrentTime('contain'), 100, |
| MAX_SCROLL, 'Scroll at contain end'); |
| |
| container.scrollLeft = 850; |
| await waitForNextFrame(); |
| |
| assert_percents_approx_equal(timeline.getCurrentTime('exit'), 50, |
| MAX_SCROLL, 'Scroll at exit midpoint'); |
| |
| container.scrollLeft = 900; |
| await waitForNextFrame(); |
| |
| assert_percents_approx_equal(timeline.getCurrentTime('exit'), 100, |
| MAX_SCROLL, 'Scroll at exit end'); |
| assert_percents_approx_equal(timeline.getCurrentTime('cover'), 100, |
| MAX_SCROLL, 'Scroll at cover end'); |
| assert_percents_approx_equal(timeline.getCurrentTime(), 100, |
| MAX_SCROLL, 'Scroll at end of timeline'); |
| scroll_pct = (900 / MAX_SCROLL) * 100; |
| assert_percents_approx_equal( |
| timeline.getCurrentTime('scroll'), scroll_pct, MAX_SCROLL, |
| 'getCurrentTime for "scroll" range scrollLeft=900'); |
| |
| assert_equals(timeline.getCurrentTime('gibberish'), null, |
| 'No current time for unknown named range'); |
| |
| container.scrollLeft = MAX_SCROLL; |
| await waitForNextFrame(); |
| assert_percents_approx_equal( |
| timeline.getCurrentTime('scroll'), 100, MAX_SCROLL, |
| 'getCurrentTime for "scroll" range at max scroll offset'); |
| |
| // Add insets to force the start and end offsets to align. This forces |
| // the timeline to become inactive. |
| // start_offset = target_offset - viewport_size + end_side_inset |
| // = 600 + end_side_inset |
| // end_offset = target_offset + target_size - start_side_inset |
| // = 900 - start_side_inset |
| // Equating start_offset and end_offset: |
| // end_side_inset = 300 - start_side_inset; |
| timeline = |
| new ViewTimeline ({ |
| subject: target, |
| axis: 'inline', |
| inset: [ CSS.px(150), CSS.px(150) ] |
| }); |
| anim.timeline = timeline; |
| await waitForNextFrame(); |
| |
| assert_equals(timeline.currentTime, null, |
| 'Current time is null when scroll-range is zero'); |
| assert_equals(timeline.getCurrentTime(), null, |
| 'getCurrentTime with an inactive timeline.'); |
| assert_equals(timeline.getCurrentTime('contain'), null, |
| 'getCurrentTime on a ranged name with an inactive timeline.'); |
| |
| }, 'View timeline current time for named range'); |
| |
| </script> |
