| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| #multicol { |
| -moz-column-width: 100px; |
| -webkit-column-width: 100px; |
| -webkit-column-fill: auto; |
| column-width: 100px; |
| column-fill: auto; |
| height: 200px; |
| } |
| |
| span { |
| display: inline-block; |
| height: 20px; |
| background: green; |
| padding: 2px; |
| } |
| |
| .size1 { |
| width: 10px; |
| } |
| .size2 { |
| width: 20px; |
| } |
| .size3 { |
| width: 40px; |
| } |
| </style> |
| </head> |
| <body> |
| <p> Bug <a href="http://webkit.org/b/34875">34875</a>: offsetLeft broken within CSS3 columns </p> |
| <p>There should not be any red spans visible.</p> |
| <p> |
| This test checks that offsetLeft and offsetTop return correct values when used |
| on elements contained in multiple columns. We put a number of red spans (of |
| arbitrary size) in a multi-column div. The script at the end creates an |
| identically sized green span for each of the red spans, and places it at the |
| offsetLeft and offsetTop of the red span, using absolute position. This ensures |
| that the green span completely covers the red span. |
| </p> |
| <!-- |
| Note: This is the test reference file. Therefore, there is no script and |
| all the spans are set to green in the css. |
| --> |
| <div id="multicol"> |
| <div> |
| <span class="size1"></span> |
| <span class="size2"></span> |
| <span class="size2"></span> |
| <span class="size3"></span> |
| <span class="size2"></span> |
| <span class="size1"></span> |
| </div> |
| <div> |
| <span class="size2"></span> |
| <span class="size1"></span> |
| <span class="size3"></span> |
| <span class="size3"></span> |
| <span class="size2"></span> |
| <span class="size3"></span> |
| <span class="size1"></span> |
| <span class="size2"></span> |
| <span class="size2"></span> |
| <span class="size2"></span> |
| <span class="size3"></span> |
| <span class="size2"></span> |
| <span class="size3"></span> |
| <span class="size1"></span> |
| <span class="size3"></span> |
| <span class="size3"></span> |
| <span class="size3"></span> |
| <span class="size2"></span> |
| <span class="size3"></span> |
| </div> |
| <div> |
| <span class="size3"></span> |
| <span class="size2"></span> |
| <span class="size1"></span> |
| <span class="size1"></span> |
| <span class="size2"></span> |
| <span class="size2"></span> |
| <div> |
| <span class="size2"></span> |
| <span class="size1"></span> |
| <span class="size3"></span> |
| <span class="size3"></span> |
| <span class="size1"></span> |
| <span class="size3"></span> |
| <span class="size3"></span> |
| <span class="size2"></span> |
| <div> |
| <span class="size2"></span> |
| <span class="size3"></span> |
| <span class="size1"></span> |
| <span class="size3"></span> |
| <span class="size3"></span> |
| <span class="size2"></span> |
| <span class="size1"></span> |
| <span class="size1"></span> |
| <span class="size2"></span> |
| <span class="size2"></span> |
| <span class="size2"></span> |
| <span class="size1"></span> |
| <span class="size3"></span> |
| </div> |
| <span class="size3"></span> |
| <span class="size1"></span> |
| <span class="size3"></span> |
| <span class="size3"></span> |
| <span class="size2"></span> |
| <span class="size2"></span> |
| </div> |
| <span class="size3"></span> |
| <span class="size1"></span> |
| <span class="size3"></span> |
| </div> |
| </div> |
| </body> |
| </html> |
