<html>
<head>
<style type="text/css" media="screen">
form {
    -webkit-column-count: 3;
    -webkit-column-gap: 0px;
    background: #ccccff;
    margin: 0px;
    padding: 0px;
    border: solid 1px red;
}

input[type="range"] {
    width: 100px;
    height: 50px;
}

td {
    background: red;
}
</style>
<script>
const numForms = 4;
const numCols = 3;

function log(msg)
{
    var res = document.getElementById('res');
    res.innerHTML = res.innerHTML + msg + "<br>";
}

function pageX(runner) {
    var acc = 0;
    while (runner) {
        acc += runner.offsetLeft;
        runner = runner.offsetParent;
    }
    return acc;
}

function pageY(runner) {
    var acc = 0;
    while (runner) {
        acc += runner.offsetTop;
        runner = runner.offsetParent;
    }
    return acc;
}

function testIt(formIndex, colIndex, ofsX, expected)
{
    const form = document.getElementById("f" + formIndex);
    const column = document.getElementById("c" + formIndex + "0");
    const colWidth = Math.floor(form.offsetWidth / numCols);

    const sliderId = "c" + formIndex + colIndex;
    const slider = document.getElementById(sliderId);

    const clickX = pageX(column) + colWidth * colIndex + ofsX;
    const clickY = pageY(column) + slider.offsetHeight / 2;

    eventSender.mouseMoveTo(clickX, clickY);
    eventSender.mouseDown();
    eventSender.mouseUp();

    if (slider.value == expected)
        log("PASSED " + sliderId);
    else
        log("FAILED " + sliderId + " expected=" + expected + " got=" + slider.value + " " + clickX + "@" + clickY);
}

function test()
{
    if (!window.testRunner)
        return;

    testRunner.dumpAsText();

    for (var formIndex = 0; formIndex < numForms; formIndex++) {
        for (var colIndex = 0; colIndex < numCols; colIndex++) {
          testIt(formIndex, colIndex, 23, 20);
        }
    }
}
</script>
</head>
<body onload="test()">
<h1>Slider In Multi-Coulumn</h1>
This is test cases for <a href="https://webkit.org/b/70898">BUG 70898</a>.

<h2>No outer</h2>
<form id="f0">
<input id="c00" type="range" min="0" max="100" step="10" /><br />
<input id="c01" type="range" min="0" max="100" step="10" /><br />
<input id="c02" type="range" min="0" max="100" step="10" /><br />
</form>

<h2>DIV outer</h2>
<form id="f1">
<div>
<input id="c10" type="range" min="0" max="100" step="10" /><br />
<input id="c11" type="range" min="0" max="100" step="10" /><br />
<input id="c12" type="range" min="0" max="100" step="10" /><br />
</div>
</form>

<h2>SPAN outer</h2>
<form id="f2">
<span>
<input id="c20" type="range" min="0" max="100" step="10" /><br />
<input id="c21" type="range" min="0" max="100" step="10" /><br />
<input id="c22" type="range" min="0" max="100" step="10" /><br />
</span>
</form>

<h2>TABLE outer</h2>
<form id="f3">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td><input id="c30" type="range" min="0" max="100" step="10" /></td></tr>
<tr><td><input id="c31" type="range" min="0" max="100" step="10" /></td></tr>
<tr><td><input id="c32" type="range" min="0" max="100" step="10" /></td></tr>
</table>
</form>

<h2>Results</h2>
<div id="res">
</div>

</html>