| <!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; |
| padding: 2px; |
| background: red; |
| } |
| |
| .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> |
| <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> |
| <script> |
| var body = document.getElementsByTagName("body")[0]; |
| var multicol = document.getElementById("multicol"); |
| var spans = multicol.getElementsByTagName("span"); |
| for (var i = 0; i < spans.length; ++i) { |
| var item = spans[i]; |
| var cover = document.createElement("span"); |
| cover.setAttribute("class", item.getAttribute("class")); |
| cover.setAttribute("style", "background: green; " + |
| "z-index: 10; " + |
| "position: absolute; " + |
| "left: " + item.offsetLeft + "px; " + |
| "top: " + item.offsetTop + "px;"); |
| body.appendChild(cover); |
| } |
| </script> |
| </body> |
| </html> |
