| <!DOCTYPE html> |
| <style> |
| .multicol { |
| -moz-column-width: 100px; |
| -webkit-column-width: 100px; |
| column-width: 100px; |
| column-fill: auto; |
| -webkit-column-gap: 0; |
| -moz-column-gap: 0; |
| column-gap: 0; |
| height: 100px; |
| line-height: 20px; |
| border: 5px solid maroon; |
| width: 300px; |
| } |
| .block { |
| display: inline-block; |
| width: 1em; |
| height: 10px; |
| background-color: green; |
| } |
| .opacity { |
| opacity: 0.5; |
| color: green; |
| } |
| .relative { |
| position: relative; |
| top: -4px; |
| color: green; |
| } |
| </style> |
| <p> |
| Test layers which are fully contained within a single column. |
| </p> |
| LTR: |
| <div class="multicol"> |
| line1<br> |
| line2<br> |
| line3<br> |
| line4<br> |
| line5<br> |
| line6<br> |
| <div class="block"></div> line7<br> |
| line8<br> |
| <span class="relative">relative9</span><br> |
| line10<br> |
| line11<br> |
| line12<br> |
| <!-- The extra inner span below forces the creation of a transparency layer in Skia to work |
| around optimizations that would cause blending differences between the test and the |
| expectation. --> |
| <span class="opacity">opacity<span>13</span></span><br> |
| line14 |
| </div> |
| |
| RTL: |
| <div class="multicol" dir="rtl"> |
| line1<br> |
| line2<br> |
| line3<br> |
| line4<br> |
| line5<br> |
| line6<br> |
| <div class="block"></div> line7<br> |
| line8<br> |
| <span class="relative">relative9</span><br> |
| line10<br> |
| line11<br> |
| line12<br> |
| <!-- The extra inner span below forces the creation of a transparency layer in Skia to work |
| around optimizations that would cause blending differences between the test and the |
| expectation. --> |
| <span class="opacity">opacity<span>13</span></span><br> |
| line14 |
| </div> |
