| <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> |
