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

input[type="number"] {
    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 spinId = "c" + formIndex + colIndex;
    const spin = document.getElementById(spinId);

    const clickX = pageX(column) + colWidth * colIndex + spin.offsetWidth + ofsX;
    const clickY = pageY(column) + Math.floor(spin.offsetHeight / 3) + 2;

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

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

function installMouseTracker() {
    document.body.onmousemove = function(e) {
        var resultBox = document.getElementById("mousepos");
        var offsets = "element id: " + e.target.id + "<br> clientX: " + e.clientX + " clientY: " + e.clientY + "<br>";
        offsets += "offsetX: " + e.offsetX + " offsetY: " + e.offsetY;
        resultBox.innerHTML = offsets;
    }
}

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

    testRunner.dumpAsText();

    for (var formIndex = 0; formIndex < numForms; formIndex++) {
        for (var colIndex = 0; colIndex < numCols; colIndex++) {
          testIt(formIndex, colIndex, -7, 10);
        }
    }
}
</script>
</head>
<body onload="test()">
<h1>Spin 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="number" min="0" max="100" step="10" /><br />
<input id="c01" type="number" min="0" max="100" step="10" /><br />
<input id="c02" type="number" min="0" max="100" step="10" /><br />
</form>

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

<h2>SPAN outer</h2>
<form id="f2">
<span>
<input id="c20" type="number" min="0" max="100" step="10" /><br />
<input id="c21" type="number" min="0" max="100" step="10" /><br />
<input id="c22" type="number" 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="number" min="0" max="100" step="10" /></td></tr>
<tr><td><input id="c31" type="number" min="0" max="100" step="10" /></td></tr>
<tr><td><input id="c32" type="number" min="0" max="100" step="10" /></td></tr>
</table>
</form>

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

</html>