1367413-1.html (992B)
1 <!DOCTYPE HTML> 2 <title>Test for dynamic re-pagination of absolutely positioned elements</title> 3 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 4 <link rel="author" title="L. David Baron" href="https://dbaron.org/"> 5 <style> 6 7 #multicol { 8 columns: 3; 9 column-fill: auto; 10 column-gap: 15px; 11 height: 500px; 12 width: 300px; 13 background: yellow; 14 } 15 16 #relpos { 17 position: relative; 18 background: aqua; 19 height: 250px; 20 } 21 22 #abspos { 23 position: absolute; 24 top: 60px; 25 right: 0; 26 height: 80px; 27 width: 50px; 28 background: blue; 29 transform: scale(0.9); 30 } 31 32 #overflow { 33 height: 100px; 34 width: 30px; 35 background: grey; 36 } 37 </style> 38 <body style="width: 700px"> 39 40 <div id="multicol"> 41 <div id="relpos"> 42 <div id="abspos"><div id="overflow"></div></div> 43 </div> 44 </div> 45 46 <script> 47 48 var mc = document.getElementById("multicol"); 49 mc.offsetHeight; // flush layout 50 mc.style.height = "140px"; 51 mc.offsetHeight; // flush layout 52 mc.parentNode.style.width = "800px"; 53 54 </script>