144 lines
3.6 KiB
HTML
144 lines
3.6 KiB
HTML
<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>
|