layout/reftests/columns/fieldset-columns-001-ref.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <body>
   4 <style>
   5 a {
   6   position: absolute;
   7   width: 10px;
   8   height: 10px;
   9   top: 0;
  10   left: 0;
  11   background: blue;
  12 }
  13 f {
  14   position: fixed;
  15   width: 10px;
  16   height: 10px;
  17   bottom: 0;
  18   left: 100px;
  19   background: lime;
  20 }
  21 fieldset div {
  22   columns: 2;
  23   column-fill: auto;
  24 }
  25 fieldset {
  26   border: 1px solid;
  27 }
  28 .rel {
  29   position: relative;
  30 }
  31 </style>
  32 <fieldset class="rel" style="overflow:hidden; width:300px; height:200px;">
  33   <legend>Legend</legend>
  34 <div style="columns: 2; width:100%; height:100%;">
  35   <p>X
  36   <p>X
  37   <p>X
  38   <p>X
  39   <p>X
  40   <p>X
  41   <p>X
  42   <p>X
  43   <p>X
  44   <p>X
  45   <p>X
  46   <p>X
  47   <p>X
  48   <p>X
  49   <p>X
  50   <p>X
  51 <a></a><f></f>
  52 </div>
  53 </fieldset>
  54 <fieldset class="rel" style="width:600px; height:7em; overflow:hidden">
  55   <legend>Legend</legend>
  56 <div style="columns: 3; column-gap:2em; column-rule:3px solid; column-width:3em; width:100%; height:100%">
  57   <p>X
  58   <p>X
  59   <p>X
  60   <p>X
  61   <p>X
  62   <p>X
  63 <a></a><f style="left:120px"></f>
  64 </div>
  65 </fieldset>
  66 <fieldset style="overflow:hidden; width:300px; height:2em;">
  67   <legend>Legend</legend>
  68 <div>
  69   <p>X
  70 <a></a><f style="left:140px"></f>
  71 </div>
  72 </fieldset>
  73 <fieldset style="width:600px; height:2em">
  74   <legend>Legend</legend>
  75 <div>
  76   <p>X
  77 <a></a><f style="left:160px"></f>
  78 </div>
  79 </fieldset>
  80
  81 </body>
  82 </html>