contain-paint-offscreen-container.html (1274B)
1 <!DOCTYPE html> 2 <meta charset="utf8"> 3 <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring/"> 5 <meta name="assert" content="ensures that scroll anchoring does not recurse into contained offscreen elements"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 9 <style> 10 body { height: 10000px; } 11 #container { contain: paint; } 12 #overflow { 13 position: relative; 14 top: 300px; 15 height: 10px; 16 } 17 #anchor { 18 width: 10px; 19 height: 50px; 20 } 21 </style> 22 23 <div style="height: 800px"></div> 24 <div id="container" style="height: 40px"> 25 <div id=overflow></div> 26 </div> 27 <div id="changer" style="height: 150px"></div> 28 <div id=anchor></div> 29 30 <script> 31 test(() => { 32 // Ensure #anchor is the only thing on screen. 33 // Note that #overflow would be on screen if container 34 // did not have layout and paint containment. 35 document.scrollingElement.scrollTop = 1000; 36 37 // Ensure anchor doesn't move if #changer shrinks. 38 const offset = anchor.getBoundingClientRect().y; 39 document.querySelector("#changer").style.height = "50px"; 40 assert_equals(anchor.getBoundingClientRect().y, offset); 41 }, "Contain: style paint container offscreen."); 42 </script>