| <!DOCTYPE html> |
| <meta charset=utf-8> |
| <title>Validate cases where element-based scroll offsets are unresolved.</title> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/web-animations/testcommon.js"></script> |
| <script src="testcommon.js"></script> |
| |
| <style> |
| .scroller { |
| overflow: auto; |
| height: 500px; |
| width: 500px; |
| will-change: transform; |
| } |
| |
| .contents { |
| height: 2000px; |
| width: 2000px; |
| position: relative; |
| } |
| |
| #start, #end { |
| background: blue; |
| border-top: 5px solid pink; |
| box-sizing: border-box; |
| width: 100%; |
| height: 50px; |
| } |
| |
| #start { |
| position: absolute; |
| top: 50px; |
| } |
| |
| #end { |
| position: absolute; |
| top: 1050px; |
| } |
| </style> |
| <div id="log"></div> |
| |
| <div id="not_a_descendant"></div> |
| |
| <script> |
| 'use strict'; |
| |
| promise_test(async t => { |
| const scroller = createScrollerWithStartAndEnd(t); |
| t.add_cleanup(() => scroller.remove()); |
| scroller.scrollTo({ top: 500 }); |
| |
| const not_a_descendant = document.querySelector("#not_a_descendant"); |
| const end = document.querySelector("#end") |
| |
| const timeline = createScrollTimeline(t, { |
| scrollSource: scroller, |
| orientation: 'block', |
| timeRange: 1000, |
| scrollOffsets: [{ target: not_a_descendant }, { target: end }] |
| }); |
| |
| await waitForNextFrame(); |
| assert_equals(timeline.currentTime, null, "The timeline should not be active."); |
| }, "A valid element-based offset's target should be a descendant of timeline's source"); |
| |
| promise_test(async t => { |
| const scroller = createScrollerWithStartAndEnd(t); |
| t.add_cleanup(() => scroller.remove()); |
| scroller.scrollTo({ top: 500 }); |
| |
| const start = document.querySelector("#start"); |
| const end = document.querySelector("#end") |
| |
| const timeline = createScrollTimeline(t, { |
| scrollSource: scroller, |
| orientation: 'block', |
| timeRange: 1000, |
| scrollOffsets: [{ target: start }, { target: end }] |
| }); |
| |
| start.style.display = "none"; |
| await waitForNextFrame(); |
| assert_equals(timeline.currentTime, null, "The timeline should not be active."); |
| |
| start.style.display = "block"; |
| await waitForNextFrame(); |
| assert_not_equals(timeline.currentTime, null, "The timeline should be active."); |
| }, "A valid element-based offset's target should have a layout box"); |
| </script> |
