listbox-in-multi-column.html | Explore in Territory

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

input[type="number"] {
    width: 200px;
    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 + ofsX;
    const clickY = pageY(column) + Math.floor(spin.offsetHeight / 3);

    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 test()
{
    if (!window.testRunner)
        return;

    testRunner.dumpAsText();

    for (var formIndex = 0; formIndex < numForms; formIndex++) {
        for (var colIndex = 0; colIndex < numCols; colIndex++) {
          testIt(formIndex, colIndex, 10, "b");
        }
    }
}
</script>
</head>
<body onload="test()">
<h1>ListBox 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">
<select id="c00" size="4"><option value="a">Alpha</option><option value="b">Bravo</option><option value="c">Charlie</option><option value="d">Delta</option></select><br />
<select id="c01" size="4"><option value="a">Alpha</option><option value="b">Bravo</option><option value="c">Charlie</option><option value="d">Delta</option></select><br />
<select id="c02" size="4"><option value="a">Alpha</option><option value="b">Bravo</option><option value="c">Charlie</option><option value="d">Delta</option></select><br />
</form>

<h2>DIV outer</h2>
<form id="f1">
<div>
<select id="c10" size="4"><option value="a">Alpha</option><option value="b">Bravo</option><option value="c">Charlie</option><option value="d">Delta</option></select><br />
<select id="c11" size="4"><option value="a">Alpha</option><option value="b">Bravo</option><option value="c">Charlie</option><option value="d">Delta</option></select><br />
<select id="c12" size="4"><option value="a">Alpha</option><option value="b">Bravo</option><option value="c">Charlie</option><option value="d">Delta</option></select><br />
</div>
</form>

<h2>SPAN outer</h2>
<form id="f2">
<span>
<select id="c20" size="4"><option value="a">Alpha</option><option value="b">Bravo</option><option value="c">Charlie</option><option value="d">Delta</option></select><br />
<select id="c21" size="4"><option value="a">Alpha</option><option value="b">Bravo</option><option value="c">Charlie</option><option value="d">Delta</option></select><br />
<select id="c22" size="4"><option value="a">Alpha</option><option value="b">Bravo</option><option value="c">Charlie</option><option value="d">Delta</option></select><br />
</span>
</form>

<h2>TABLE outer</h2>
<form id="f3">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td><select id="c30" size="4"><option value="a">Alpha</option><option value="b">Bravo</option><option value="c">Charlie</option><option value="d">Delta</option></select></td></tr>
<tr><td><select id="c31" size="4"><option value="a">Alpha</option><option value="b">Bravo</option><option value="c">Charlie</option><option value="d">Delta</option></select></td></tr>
<tr><td><select id="c32" size="4"><option value="a">Alpha</option><option value="b">Bravo</option><option value="c">Charlie</option><option value="d">Delta</option></select></td></tr>
</table>
</form>

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

</html>
chromium/third_party/blink/web_tests/fast/forms/select/listbox-in-multi-column.html
