<!doctype html>
<html>
    <head>
        <title>offsetLeft and offsetTop test for columns</title>
        <style type="text/css">

            .columns {
                -webkit-column-count:2;
                -webkit-column-gap:60px;
                inline-size:254px;
                block-size:149px;
                margin: 20px;
                border:2px solid black;
                -webkit-column-rule: 1px solid maroon;
                padding: 5px;
                box-sizing: border-box;
            }

            #t1, #t6 {
                -webkit-column-break-after: always;
            }
        
            .columns div { block-size:50px; background-color:green; }
            
            .columns div.span { margin-block: 5px; block-size:25px; background-color:orange; -webkit-column-span:all; }

            .fail #pass, .pass #fail { display: none; }
            
            .vertical { writing-mode: vertical-lr }
            .vertical-flipped { writing-mode: vertical-rl }
        </style>
    </head>

    <body style="margin:10px">
        <div class="columns">
            <div id="t1"></div>
            <div id="t2"></div>
            <div class="span" id="t3"></div>
            <div><span id="t4"></span></div>
            <div><span id="t5"></span></div>
        </div>
    
        <div class="columns vertical">
            <div id="t9"></div>
            <div id="t10"></div>
            <div class="span" id="t8"></div>
            <div><span id="t6"></span></div>
            <div><span id="t7"></span></div>
        </div>
        
        <div class="columns vertical-flipped">
            <div id="t11"></div>
            <div id="t12"></div>
            <div class="span" id="t13"></div>
            <div id="t14"></div>
            <div id="t15"></div>
        </div>
        
        <p id="output"></p>
        
        <script type="text/javascript">
        
            function testOffsetTop(expected, id1, id2, number) {
                var one = document.getElementById(id1)
                var two = document.getElementById(id2)
                var output = document.getElementById('output')
                if (one.offsetTop != two.offsetTop)
                    output.innerHTML += "Failed Test #" + number + " because the offsetTop of " + id1 + " and " + id2 + " were not the same. " + one.offsetTop + " and " + two.offsetTop + ".<br>"
                else if (one.offsetTop != expected)
                    output.innerHTML += "Failed Test #" + number + " because the offsetTop of " + id1 + " and " + id2 + " did not match the expected value of " + expected + ". They were " + one.offsetTop + " instead.<br>"
                else
                    output.innerHTML += "Test #" + number + " Passed.<br>"
            }
        
            function testOffsetLeft(expected, id1, id2, number) {
                var one = document.getElementById(id1)
                var two = document.getElementById(id2)
                var output = document.getElementById('output')
                if (one.offsetLeft != two.offsetLeft)
                    output.innerHTML += "Failed Test #" + number + " because the offsetLeft of " + id1 + " and " + id2 + " were not the same. " + one.offsetLeft + " and " + two.offsetLeft + ".<br>"
                else if (one.offsetLeft != expected)
                    output.innerHTML += "Failed Test #" + number + " because the offsetLeft of " + id1 + " and " + id2 + " did not match the expected value of " + expected + ". They were " + one.offsetLeft + " instead.<br>"
                else
                    output.innerHTML += "Test #" + number + " Passed.<br>"
            }
        
            if(window.testRunner)
                testRunner.dumpAsText();
            
            testOffsetTop(27, "t1", "t2", 1);
            testOffsetTop(112, "t4", "t5", 2);
            testOffsetTop(82, "t3", "t3", 3);
            
            testOffsetLeft(37, "t1", "t4", 4);
            testOffsetLeft(187, "t2", "t5", 5);
            testOffsetLeft(37, "t3", "t3", 6);
            
            testOffsetTop(196, "t6", "t9", 7);
            testOffsetTop(346, "t7", "t10", 8);
            testOffsetTop(196, "t8", "t8", 9);
            
            testOffsetLeft(37, "t9", "t10", 10);
            testOffsetLeft(122, "t6", "t7", 11);
            testOffsetLeft(92, "t8", "t8", 12);
        
            // FIXME: <webkit.org/b/234664> Visual offsets are correct, but not JS values, for flipped-writing mode only
            testOffsetTop(470, "t11", "t14", 13);
            testOffsetTop(620, "t12", "t15", 14);
            testOffsetTop(470, "t13", "t13", 15);
            
            testOffsetLeft(37, "t14", "t15", 16);
            testOffsetLeft(122, "t11", "t12", 17);
            testOffsetLeft(92, "t13", "t13", 18);
        </script>
    </body>
</html>