third_party/WebKit/LayoutTests/fast/multicol/layers-in-multicol-expected.html

   1 <!DOCTYPE html>
   2 <style>
   3     .multicol {
   4         width: 300px;
   5         height: 100px;
   6         line-height: 20px;
   7         border: 5px solid maroon;
   8     }
   9     .column {
  10         width: 100px;
  11         float: left;
  12     }
  13     .multicol[dir="rtl"] > .column {
  14         float: right;
  15     }
  16     .block {
  17         display: inline-block;
  18         width: 1em;
  19         height: 10px;
  20         background-color: green;
  21     }
  22     .opacity {
  23         opacity: 0.5;
  24         color: green;
  25     }
  26     .relative {
  27         position: relative;
  28         top: -4px;
  29         color: green;
  30     }
  31 </style>
  32 <p>
  33     Test layers which are fully contained within a single column.
  34 </p>
  35 LTR:
  36 <div class="multicol">
  37     <div class="column">
  38         line1<br>
  39         line2<br>
  40         line3<br>
  41         line4<br>
  42         line5<br>
  43     </div>
  44     <div class="column">
  45         line6<br>
  46         <div class="block"></div> line7<br>
  47         line8<br>
  48         <span class="relative">relative9</span><br>
  49         line10<br>
  50     </div>
  51     <div class="column">
  52         line11<br>
  53         line12<br>
  54         <!-- The extra inner span below forces the creation of a transparency layer in Skia to work
  55              around optimizations that would cause blending differences between the test and the
  56              expectation. -->
  57         <span class="opacity">opacity<span>13</span></span><br>
  58         line14
  59     </div>
  60 </div>
  61
  62 RTL:
  63 <div class="multicol" dir="rtl">
  64     <div class="column">
  65         line1<br>
  66         line2<br>
  67         line3<br>
  68         line4<br>
  69         line5<br>
  70     </div>
  71     <div class="column">
  72         line6<br>
  73         <div class="block"></div> line7<br>
  74         line8<br>
  75         <span class="relative">relative9</span><br>
  76         line10<br>
  77     </div>
  78     <div class="column">
  79         line11<br>
  80         line12<br>
  81         <!-- The extra inner span below forces the creation of a transparency layer in Skia to work
  82              around optimizations that would cause blending differences between the test and the
  83              expectation. -->
  84         <span class="opacity">opacity<span>13</span></span><br>
  85         line14
  86     </div>
  87 </div>