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

.region {
    height: 200px;
    -webkit-region-fragment: break;
    display: inline-block;
}

.region0 {
    width: 150px;
}

.region1 {
    width: 200px;
}

.region2 {
    width: 150px;
}

.container {
    width: 600px;
    height: 200px;
    line-height: 20px; /* 10 lines per page */
    font-size: 16px;
    margin: 0 0 20px 0;
    padding: 0;
    overflow: hidden;
}

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

.top {
    color: red;
}

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

description("Testing widows and orphans. Any green lines should be at the bottom of regions, and any red lines should be at the top of regions.");

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

function createRegions(id, container)
{
    for (var i = 0; i < 3; ++i) {
        var element = document.createElement("div");
        element.className = "region region" + i;
        element.style.webkitFlowFrom = id;

        container.appendChild(element);
    }
}

function createTestContainer(id, description, blocks)
{
    var label = document.createElement("h3");
    label.textContent = id + " - " + description;
    document.body.appendChild(label);
    var element = document.createElement("div");
    element.className = "container";
    element.id = id;

    createRegions(id, element);

    for (var i = 1; i <= blocks.length; ++i) {
        var block = document.createElement("div");
        block.className = "block";
        var numLines = blocks[i-1];
        for (var j = 1; j <= numLines; ++j) {
            var line = document.createElement("span");
            line.id = id + "-block-" + i + "-line-" + j;
            line.textContent = "Block " + i + " Line " + j;
            block.appendChild(line);
            block.appendChild(document.createElement("br"));
        }
        block.style.webkitFlowInto = id;
        element.appendChild(block);
    }
    document.body.appendChild(element);
    return element;
}

function markTopLine(containerId, blockNumber, lineNumber)
{
    var element = document.getElementById(containerId + "-block-" + blockNumber + "-line-" + lineNumber);
    element.className = "top";
}

function markBottomLine(containerId, blockNumber, lineNumber)
{
    var element = document.getElementById(containerId + "-block-" + blockNumber + "-line-" + lineNumber);
    element.className = "bottom";
}

function testIsFirstInRegion(containerId, blockNumber, lineNumber)
{
    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;

    createTestContainer("test1", "Normal breaking", [5, 6, 5, 5]);

    markTopLine("test1", 1, 1);
    markBottomLine("test1", 2, 4);
    markTopLine("test1", 2, 5);
    markBottomLine("test1", 4, 1);
    markTopLine("test1", 4, 2);

    testIsFirstInRegion("test1", 1, 1);
    testIsFirstInRegion("test1", 2, 5);
    testIsFirstInRegion("test1", 4, 2);

    container = createTestContainer("test2", "Basic Orphan", [8, 6]);
    container.style.orphans = 2;

    markTopLine("test2", 1, 1);
    markBottomLine("test2", 1, 8); // Orphan break happens here.
    markTopLine("test2", 2, 1);

    testIsFirstInRegion("test2", 1, 1);
    testIsFirstInRegion("test2", 2, 1);

    container = createTestContainer("test3", "Basic Widow", [4, 6, 3]);
    container.style.widows = 2;

    markTopLine("test3", 1, 1);
    markBottomLine("test3", 2, 4); // Widow break happens here.
    markTopLine("test3", 2, 5);

    testIsFirstInRegion("test3", 1, 1);
    testIsFirstInRegion("test3", 2, 5);

    container = createTestContainer("test4", "Orphans causing Widows", [8, 6, 4, 4]);
    container.style.orphans = 2;
    container.style.widows = 2;

    markTopLine("test4", 1, 1);
    markBottomLine("test4", 1, 8); // Orphan break happens here.
    markTopLine("test4", 2, 1);
    markBottomLine("test4", 3, 2); // And that creates a widow forcing a break here.
    markTopLine("test4", 3, 3);

    testIsFirstInRegion("test4", 1, 1);
    testIsFirstInRegion("test4", 2, 1);
    testIsFirstInRegion("test4", 3, 3);

    container = createTestContainer("test5", "Widows blocked by Orphan rule", [7, 3, 4]);
    container.style.orphans = 2;
    container.style.widows = 2;

    markTopLine("test5", 1, 1);
    markBottomLine("test5", 2, 2); // This line should not move - protected by orphaning.
    markTopLine("test5", 2, 3); // This line won't be un-widowed - blocked by orphaning.

    testIsFirstInRegion("test5", 1, 1);
    testIsFirstInRegion("test5", 2, 3);

    container = createTestContainer("test6", "Ridiculous values", [7, 7, 7, 7]);
    container.style.orphans = 100;
    container.style.widows = 100;

    markTopLine("test6", 1, 1);
    markBottomLine("test6", 1, 7); // Orphan break happens here.
    markTopLine("test6", 2, 1); // Adopted.
    markBottomLine("test6", 2, 7); // Orphan break.
    markTopLine("test6", 3, 1); // Adopted.

    testIsFirstInRegion("test6", 1, 1);
    testIsFirstInRegion("test6", 2, 1);
    testIsFirstInRegion("test6", 3, 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>
</body>
</html>