scroll-restore-shadow.html (2183B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>Scroll position restore on shadow tree</title> 4 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> 5 <link rel="author" href="https://mozilla.org" title="Mozilla"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 scroll-box { 10 display: block; 11 width: 100px; 12 height: 100px; 13 margin: 10px; 14 border: 1px solid; 15 16 &::part(box) { 17 width: 100px; 18 height: 100px; 19 overflow: auto; 20 } 21 22 > .content { 23 height: 500px; 24 background-image: linear-gradient(blue, green); 25 } 26 } 27 #wrapper { 28 position: relative; 29 display: inline-block; 30 border: 1px solid; 31 &.change { 32 /* Changing display rebuilds the layout tree */ 33 display: block; 34 position: absolute; 35 } 36 } 37 </style> 38 <!-- It's important that the shadow trees below are the same --> 39 <div id="wrapper"> 40 <scroll-box> 41 <template shadowrootmode="open"> 42 <div part="box"><slot></slot></div> 43 </template> 44 <div class="content"></div> 45 </scroll-box> 46 <scroll-box> 47 <template shadowrootmode="open"> 48 <div part="box"><slot></slot></div> 49 </template> 50 <div class="content"></div> 51 </scroll-box> 52 </div> 53 <script> 54 promise_test(async function() { 55 let wrapper = document.getElementById("wrapper"); 56 let [sb1, sb2] = wrapper.querySelectorAll("scroll-box"); 57 sb1 = sb1.shadowRoot.querySelector("div[part=box]"); 58 sb2 = sb2.shadowRoot.querySelector("div[part=box]"); 59 60 sb1.scrollTop = 100; 61 sb2.scrollTop = 200; 62 63 assert_equals(sb1.scrollTop, 100, "scrollTop 1 is reasonable"); 64 assert_equals(sb2.scrollTop, 200, "scrollTop 2 is reasonable"); 65 66 wrapper.classList.add("change"); 67 68 assert_equals(sb1.scrollTop, 100, "scrollTop 1 hasn't changed"); 69 assert_equals(sb2.scrollTop, 200, "scrollTop 2 hasn't changed"); 70 71 await new Promise(r => { 72 requestAnimationFrame(() => requestAnimationFrame(r)); 73 }); 74 75 // For good measure 76 assert_equals(sb1.scrollTop, 100, "scrollTop 1 hasn't changed after rAF"); 77 assert_equals(sb2.scrollTop, 200, "scrollTop 2 hasn't changed after rAF"); 78 }); 79 </script>