layout/reftests/columns/column-balancing-nested-001-ref.html

   1 <!--
   2      Any copyright is dedicated to the Public Domain.
   3      http://creativecommons.org/licenses/publicdomain/
   4 -->
   5 <!DOCTYPE html>
   6 <html lang="en-US">
   7 <head>
   8   <title>Testing nested balancing column sets</title>
   9   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=822053">
  10 <style type="text/css">
  11         html,body {
  12             color:black; background-color:white; font-family:monospace; font-size:16px; padding:0; margin:0;
  13         }
  14
  15   .colset {
  16     column-count: 2;
  17     column-gap: 0px;
  18     column-rule: 1px solid black;
  19     width:30ch;
  20   }
  21   .colset.lvl2 {
  22     column-rule: 1px solid blue;
  23   }
  24   .colset.lvl3 {
  25     column-rule: 1px solid red;
  26   }
  27   p { margin: 0; }
  28   .non-balancing {
  29     column-count: 1;
  30   }
  31   .fixed-height.lvl2 {
  32     column-count: 2;
  33   }
  34   .fixed-height {
  35     column-count: 1;
  36     height:3em;
  37   }
  38 </style>
  39 </head>
  40 <body>
  41 <div class="colset">
  42   <p>one one one one one</p>
  43   <div class="colset non-balancing lvl2">
  44     <p>two two two two<br>two</p>
  45   </div>
  46 </div>
  47 <br>
  48 <div class="colset">
  49   <p>one one one one one<br>one</p>
  50   <div class="colset fixed-height lvl2">
  51     <p>two two two two two</p>
  52   </div>
  53 </div>
  54 <br>
  55 <div class="colset">
  56   <p>one<br>one</p>
  57   <div class="colset lvl2">
  58     <p>two</p>
  59     <div class="colset fixed-height lvl3">
  60       <p>three three three three three three</p>
  61     </div>
  62   </div>
  63 </div>
  64 </body>
  65 </html>