nested-overflow-subtree-layout.html (1168B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <title>Test that subtree layout with nested overflow preserves scroll anchoring.</title> 5 <link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org"> 6 <link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring/"> 7 <link rel="match" href="nested-overflow-subtree-layout-ref.html"> 8 <script src="/common/reftest-wait.js"></script> 9 </head> 10 <style> 11 #outer { 12 overflow: hidden; 13 width: 500px; 14 height: 500px; 15 } 16 #inner { 17 overflow: auto; 18 position: relative; 19 width: 500px; 20 height: 2000px; 21 } 22 p { 23 24 font: 48pt monospace; 25 } 26 </style> 27 </head> 28 <body> 29 <div id="outer"> 30 <div id="inner"> 31 <p>Anchor</p> 32 </div> 33 </div> 34 <script> 35 const outer = document.querySelector("#outer"); 36 const inner = document.querySelector("#inner"); 37 38 onload = () => { 39 requestAnimationFrame(() => { 40 requestAnimationFrame(() => { 41 outer.scrollTo(0, 70); 42 requestAnimationFrame(() => { 43 const elem = document.createElement("p"); 44 elem.textContent = "FAIL"; 45 inner.insertBefore(elem, inner.firstChild); 46 takeScreenshot(); 47 }); 48 }); 49 }); 50 }; 51 </script>