layout/reftests/bugs/379349-2a.xhtml

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   2 <html xmlns="http://www.w3.org/1999/xhtml">
   3  <head>
   4   <title>CSS3 Multi-column Layout Test Suite: Overflow Pagination (Interlaced [Simplified])</title>
   5   <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/>
   6   <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property"/>
   7   <link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#length-units"/>
   8   <style type="text/css">
   9     body, html {
  10       margin: 0;
  11       padding: 0;
  12     }
  13     .container {
  14       height: .5in;
  15     }
  16     .overflow {
  17       border-bottom: solid 4px red;
  18     }
  19     .following {
  20       margin: 0 0 .5in;
  21       height: .5in;
  22       background: white;
  23
  24       font-size: 10pt;
  25       line-height: 10pt;
  26       color: navy;
  27     }
  28     .fno1 {
  29       margin: 0;
  30       border-top: 4px solid blue;
  31     }
  32     .no1 .overflow {
  33       height: 800%;
  34     }
  35     .no2 .overflow {
  36       height: 1200%;
  37     }
  38     .no3 .overflow {
  39       height: 600%;
  40       border-bottom-color: blue;
  41     }
  42     .no4 .overflow {
  43       height: 800%;
  44       border-bottom-color: blue;
  45     }
  46     body {
  47       height: 2.5in;
  48       width: 300pt;
  49       -moz-column-width: 100pt;
  50       -moz-column-gap: 0;
  51       -moz-column-fill: auto;
  52       border: solid gray;
  53     }
  54   </style>
  55  </head>
  56  <body>
  57   <div class="container no1">
  58     <div class="overflow">
  59     </div>
  60   </div>
  61   <div class="container no2">
  62     <div class="overflow">
  63     </div>
  64   </div>
  65   <div class="container no3">
  66     <div class="overflow">
  67     </div>
  68   </div>
  69   <div class="following">
  70     <p class="fno1">
  71     This paragraph must be in the first column.
  72     There must be no red on any page.
  73     </p>
  74   </div>
  75   <div class="container no4">
  76     <div class="overflow">
  77     </div>
  78   </div>
  79   <p class="following">
  80     This paragraph must be in the second column.
  81     There must be an unbroken blue line across
  82     all three columns.
  83   </p>
  84  </body>
  85 </html>