dynamic-visible-to-clip-001.html (1034B)
1 <!doctype html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>Overflow areas are updated when dynamically changed to overflow: clip</title> 5 <link rel="help" href="https://drafts.csswg.org/css-overflow/#valdef-overflow-clip"> 6 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 7 <link rel="author" title="Mozilla" href="https://mozilla.org"> 8 <link rel="match" href="clip-001-ref.html"> 9 <style> 10 #target { 11 width: 100px; 12 height: 100px; 13 overflow: visible; 14 } 15 16 #container { 17 overflow: auto; 18 height: 300px; 19 } 20 #fill { 21 height: 5000px; 22 background: blue; 23 } 24 </style> 25 <div id="container"> 26 <div id="target"> 27 <div id="fill"></div> 28 </div> 29 </div> 30 <script> 31 onload = function() { 32 let target = document.getElementById("target"); 33 window.unused = target.getBoundingClientRect(); // Update layout 34 requestAnimationFrame(() => requestAnimationFrame(() => { 35 target.style.overflow = "clip"; 36 document.documentElement.removeAttribute("class"); 37 })); 38 } 39 </script>