blob: e18f70e5558a219ade2e9450f9cbc3e09ffd092b [file] [log] [blame]
<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>