fast/block/positioning/offsetLeft-offsetTop-multicolumn.html

<!DOCTYPE html>
<html>
<head>
<style>
    #multicol {
        -webkit-column-width: 100px;
        -moz-column-width: 100px;
        column-width: 100px;
        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>