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