shadow-dom-subscroller.html (1994B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring/"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <style> 6 body { 7 height: 5000px; 8 } 9 10 .filler { 11 width: 20px; 12 height: 500px; 13 background-color: silver; 14 } 15 16 #container { 17 height: 800px; 18 width: 800px; 19 padding: 10px; 20 border: 1px solid black; 21 } 22 23 #target { 24 border: 1px solid gray; 25 padding: 10px; 26 height: 150px; 27 background-color: orange; 28 } 29 </style> 30 31 <div id="container"> 32 <test-container id="shadowHost" > 33 <div class="filler"> 34 </div> 35 <div id="target"> 36 <p>Scrolling over this element doesn't scroll the main scroller<p> 37 </div> 38 <div class="filler"> 39 </div> 40 </test-container> 41 </div> 42 43 <script type="module"> 44 const content = document.getElementById('target'); 45 class TestContainer extends HTMLElement { 46 connectedCallback() { 47 const shadow = this.attachShadow({ mode: 'open' }); 48 shadow.innerHTML = ` 49 <div id = "shadowScroller" style="height: calc(100% - 20px); overflow: auto; border: 1px solid green; padding: 10px"> 50 <slot></slot> 51 </div>`; 52 } 53 } 54 55 customElements.define('test-container', TestContainer); 56 57 promise_test(async function() { 58 var root = document.getElementById('shadowHost'); 59 var shadowElement = root.shadowRoot.querySelector("#shadowScroller"); 60 document.scrollingElement.scrollBy(0,100); 61 shadowElement.scrollBy(0,150); 62 await new Promise(resolve => { 63 shadowElement.addEventListener("scroll", () => step_timeout(resolve, 0)); 64 }); 65 66 assert_equals(document.scrollingElement.scrollTop, 100); 67 }, "Ensure there is no scroll anchoring adjustment in the main frame."); 68 69 </script>