layout/reftests/pagination/float-continuations-000.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
   2 <style type="text/css">
   3
   4 .multicol {
   5   margin: 1em;
   6   border: solid silver;
   7   width: 500px;
   8   -moz-column-width: 100px;
   9   -moz-column-gap: 0;
  10   height: 100px;
  11 }
  12
  13 div {
  14   margin: 2px 0;
  15   border: 2px white;
  16   border-style: solid none;
  17 }
  18
  19 .float {
  20   float: right;
  21   margin: 44px 0;
  22   width: 15px;
  23   background: aqua;
  24   border-color: aqua;
  25   height: 296px;
  26 }
  27
  28 #float0 {
  29   float: left;
  30   width: 30px;
  31   margin-right: 5px;
  32   margin-bottom: 0;
  33 }
  34
  35 #float1 {
  36   margin-left: -15px;
  37   margin-right: -5px;
  38   position: relative;
  39   right: 5px;
  40 }
  41 #float2 {
  42   margin-left: 5px;
  43   margin-right: 15px;
  44 }
  45
  46 #clear {
  47   clear: left;
  48   border: 2px solid orange;
  49 }
  50
  51 #c1 {
  52   height: 142px;
  53 }
  54
  55 #c2 {
  56   border-bottom: none;
  57 }
  58
  59 #c3 {
  60   height: 100px;
  61   border-bottom: 4px solid orange;
  62 }
  63 #c4 {
  64   height: 192px;
  65   border-bottom: 4px solid orange;
  66 }
  67
  68 hr {
  69   border: solid orange 20px;
  70   border-style: none solid;
  71   height: 4px;
  72   margin: 0 -5px;
  73   padding: 0;
  74   position: relative;
  75   z-index: 20;
  76 }
  77
  78 #c2 > hr {
  79   margin-top: 44px;
  80 }
  81 </style>
  82
  83 <body onload="var f = document.getElementById('float0');
  84               f.style.height = '20px';
  85               document.body.offsetHeight;
  86               f.style.height = '900px';
  87               document.body.offsetHeight;
  88               f.style.height = '';
  89               document.body.offsetHeight;
  90               var c = document.getElementById('c2');
  91               c.style.height = '900px';
  92               document.body.offsetHeight;
  93               c.style.height = '';
  94 ">
  95
  96 <div class="multicol">
  97   <div id="c1">
  98     <div id="c2">
  99       <div class="float" id="float0"></div>
 100       <div class="float" id="float1"></div>
 101       <div class="float" id="float2"></div>
 102       <hr>
 103     </div>
 104   </div>
 105   <div id="c3"><hr><div id="clear"></div></div>
 106   <div id="c4"></div>
 107 </div>