scroll-animations/scroll-timelines/element-based-offset-unresolved.html

<!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, {
        source: scroller,
        orientation: 'block',
        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, {
        source: scroller,
        orientation: 'block',
        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>