mirror of
https://github.com/servo/servo.git
synced 2025-10-15 07:50:20 +01:00
92 lines
No EOL
2.5 KiB
HTML
92 lines
No EOL
2.5 KiB
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, {
|
|
scrollSource: scroller,
|
|
orientation: 'block',
|
|
timeRange: 1000,
|
|
startScrollOffset: { target: not_a_descendant },
|
|
endScrollOffset: { 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,
|
|
startScrollOffset: { target: start },
|
|
endScrollOffset: { 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> |