layout/reftests/floats/orthogonal-floats-1d.html

   1 <!DOCTYPE html>
   2 <html>
   3  <head>
   4   <title>Bug 1141867 - Contiguous right-floating boxes with vertical writing mode</title>
   5   <!-- based on testcases from Gérard Talbot, see https://bugzilla.mozilla.org/show_bug.cgi?id=1141867 -->
   6   <meta charset="utf-8">
   7   <style type="text/css">
   8   @font-face {
   9     font-family: Ahem;
  10     src: url(../fonts/Ahem.ttf);
  11   }
  12   body {
  13     margin: 8px;
  14   }
  15   p {
  16     clear: both;
  17   }
  18   div.floated-right {
  19     color: green;
  20     float: right;
  21     -ah-writing-mode: vertical-lr;
  22     -webkit-writing-mode: vertical-lr;
  23     writing-mode: tb-lr; /* IE 11 */
  24     writing-mode: vertical-lr;
  25     font: 20px/20px Ahem;
  26   }
  27   div#reference-overlapped-red {
  28     background-color: red;
  29     width: 100px;
  30     height: 100px;
  31     position: absolute;
  32     right: 8px;
  33     top: 8px;
  34     z-index: -1;
  35   }
  36   </style>
  37  </head>
  38
  39  <body>
  40
  41   <div class="floated-right">abcde</div>
  42
  43   <div class="floated-right">fghij</div>
  44
  45   <div class="floated-right">klmno</div>
  46
  47   <div class="floated-right">qrstu</div>
  48
  49   <div class="floated-right">vwxyz</div>
  50
  51   <div id="reference-overlapped-red"></div>
  52
  53   <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
  54
  55  </body>
  56 </html>