<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
<style>
body.hide-containers .container {
    display: none;
}

.container {
    width: 600px;
    height: 200px;
    -webkit-columns: 3;
    -webkit-column-fill: auto;
    columns: 3;
    column-fill: auto;
    line-height: 20px; /* 10 lines per page */
    font-size: 16px;
    margin: 0 0 20px 0;
    padding: 0;
    overflow: hidden;
    orphans: 2;
}

.block {
    margin: 0 0 15px 0;
    padding: 0;
}

.top {
    color: red;
}

.bottom {
    color: green;
}
</style>
<script>

description("Test if an element with orphans relayouts correctly. The red lines of text must be at the top of the blue rectangle. The green lines of text must be at the bottom of the blue rectangle.");

if (window.testRunner)
    testRunner.dumpAsText();

function testIsFirstInColumn(containerId, blockNumber, lineNumber)
{
    // Get the upper bounds of the container and line.
    var topOfContainer = document.getElementById(containerId).getBoundingClientRect().top;
    var topOfLine = document.getElementById(containerId + "-block-" + blockNumber + "-line-" + lineNumber).getBoundingClientRect().top;

    if (Math.abs(topOfContainer - topOfLine) < 5) // Give 5 pixels to account for subpixel layout.
        testPassed(containerId + " Block " + blockNumber + " Line " + lineNumber + " is correct.");
    else
        testFailed(containerId + " Block " + blockNumber + " Line " + lineNumber + " wasn't at the top of the region.");
}

function runTest()
{
    var container = document.getElementById("test");

    document.body.offsetTop;

    container.style.border = "3px solid blue"; // Modify a property that triggers a layout.

    testIsFirstInColumn("test", 1, 1);
    testIsFirstInColumn("test", 2, 1);

    if (window.testRunner) {
        // Hide all the containers and leave just the test results for text output.
        document.body.className = "hide-containers";
    }

    isSuccessfullyParsed();
}

window.addEventListener("load", runTest, false);
</script>
</head>
<body>
    <div class="container" id="test">
        <div class="block">
            <span id="test-block-1-line-1" class="top">Block 1 Line 1</span><br>
            <span id="test-block-1-line-2">Block 1 Line 2</span><br>
            <span id="test-block-1-line-3">Block 1 Line 3</span><br>
            <span id="test-block-1-line-4">Block 1 Line 4</span><br>
            <span id="test-block-1-line-5">Block 1 Line 5</span><br>
            <span id="test-block-1-line-6">Block 1 Line 6</span><br>
            <span id="test-block-1-line-7">Block 1 Line 7</span><br>
            <span id="test-block-1-line-8" class="bottom">Block 1 Line 8</span><br>
        </div>
        <div class="block">
            <span id="test-block-2-line-1" class="top">Block 2 Line 1</span><br>
            <span id="test-block-2-line-2">Block 2 Line 2</span><br>
            <span id="test-block-2-line-3">Block 2 Line 3</span><br>
            <span id="test-block-2-line-4">Block 2 Line 4</span><br>
            <span id="test-block-2-line-5">Block 2 Line 5</span><br>
            <span id="test-block-2-line-6">Block 2 Line 6</span><br>
        </div>
    </div>
</body>
</html>