layout/reftests/pagination/abspos-breaking-dynamic-004.html

   1 <!DOCTYPE HTML>
   2 <title>Test for dynamic re-pagination of absolutely positioned elements</title>
   3 <link rel="author" title="L. David Baron" href="https://dbaron.org/">
   4 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
   5 <style>
   6
   7 #multicol {
   8   columns: 3;
   9   column-fill: auto;
  10   column-gap: 15px;
  11   height: 150px;
  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: 80px;
  25   right: 0;
  26   height: 80px;
  27   width: 50px;
  28   background: blue;
  29 }
  30
  31 </style>
  32
  33 <div id="multicol">
  34   <div id="relpos">
  35     <div id="abspos"></div>
  36   </div>
  37 </div>
  38
  39 <script>
  40 var mc = document.getElementById("multicol");
  41 mc.offsetHeight; // flush layout
  42
  43 // abspos-breaking-dynamic-001.html changes "height", but we change "maxHeight".
  44 mc.style.maxHeight = "100px";
  45
  46 </script>