69 lines
1.9 KiB
HTML
69 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring/">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
body {
|
|
height: 5000px;
|
|
}
|
|
|
|
.filler {
|
|
width: 20px;
|
|
height: 500px;
|
|
background-color: silver;
|
|
}
|
|
|
|
#container {
|
|
height: 800px;
|
|
width: 800px;
|
|
padding: 10px;
|
|
border: 1px solid black;
|
|
}
|
|
|
|
#target {
|
|
border: 1px solid gray;
|
|
padding: 10px;
|
|
height: 150px;
|
|
background-color: orange;
|
|
}
|
|
</style>
|
|
|
|
<div id="container">
|
|
<test-container id="shadowHost" >
|
|
<div class="filler">
|
|
</div>
|
|
<div id="target">
|
|
<p>Scrolling over this element doesn't scroll the main scroller<p>
|
|
</div>
|
|
<div class="filler">
|
|
</div>
|
|
</test-container>
|
|
</div>
|
|
|
|
<script type="module">
|
|
const content = document.getElementById('target');
|
|
class TestContainer extends HTMLElement {
|
|
connectedCallback() {
|
|
const shadow = this.attachShadow({ mode: 'open' });
|
|
shadow.innerHTML = `
|
|
<div id = "shadowScroller" style="height: calc(100% - 20px); overflow: auto; border: 1px solid green; padding: 10px">
|
|
<slot></slot>
|
|
</div>`;
|
|
}
|
|
}
|
|
|
|
customElements.define('test-container', TestContainer);
|
|
|
|
promise_test(async function() {
|
|
var root = document.getElementById('shadowHost');
|
|
var shadowElement = root.shadowRoot.querySelector("#shadowScroller");
|
|
document.scrollingElement.scrollBy(0,100);
|
|
shadowElement.scrollBy(0,150);
|
|
await new Promise(resolve => {
|
|
shadowElement.addEventListener("scroll", () => step_timeout(resolve, 0));
|
|
});
|
|
|
|
assert_equals(document.scrollingElement.scrollTop, 100);
|
|
}, "Ensure there is no scroll anchoring adjustment in the main frame.");
|
|
|
|
</script>
|