Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 1 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-overflow/overflow-auto-scrolling-with-margins.html - WPT Dashboard Interop Dashboard
<!doctype html>
<title>Should be able to interactively scroll an overflow: auto element with a margin</title>
<link rel="author" title="Jo Steven Novaryo" href="mailto:steven.novaryo@gmail.com">
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/dom/events/scrolling/scroll_support.js"></script>
<style>
#scroller {
display: block;
margin-top: 200px;
margin-left: 200px;
width: 50px;
height: 50px;
background-color: red;
overflow: auto;
scrollbar-width: none;
}
#item {
position: relative;
top: 50px;
left: 50px;
width: 50px;
height: 50px;
background-color: green;
}
</style>
<div id="scroller">
<div id="item">
</div>
</div>
<script>
promise_test(async (t) => {
await waitForCompositorCommit();
let rect = scroller.getBoundingClientRect();
const actions = new test_driver.Actions().scroll(rect.left + 10, rect.top + 10, 1000, 1000);
actions.send();
let scroll_delta_promise = new Promise((resolve) => {
scroller.addEventListener("scroll", () => resolve([scroller.scrollLeft, scroller.scrollTop]));
});
let [horizontal_delta, vertical_delta] = await scroll_delta_promise;
assert_equals(horizontal_delta, 50, "Element scrolled horizontally");
assert_equals(vertical_delta, 50, "Element scrolled vertically");
}, "Margins should not interfere with interactive scrolling of a scroll container");
</script>