| <html> |
| <head> |
| <style type="text/css" media="screen"> |
| form { |
| -webkit-column-count: 3; |
| -webkit-column-gap: 0px; |
| background: #ccccff; |
| margin: 0px; |
| padding: 0px; |
| border: solid 1px red; |
| } |
| |
| input[type="range"] { |
| 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 sliderId = "c" + formIndex + colIndex; |
| const slider = document.getElementById(sliderId); |
| |
| const clickX = pageX(column) + colWidth * colIndex + ofsX; |
| const clickY = pageY(column) + slider.offsetHeight / 2; |
| |
| eventSender.mouseMoveTo(clickX, clickY); |
| eventSender.mouseDown(); |
| eventSender.mouseUp(); |
| |
| if (slider.value == expected) |
| log("PASSED " + sliderId); |
| else |
| log("FAILED " + sliderId + " expected=" + expected + " got=" + slider.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, 23, 20); |
| } |
| } |
| } |
| </script> |
| </head> |
| <body onload="test()"> |
| <h1>Slider 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="range" min="0" max="100" step="10" /><br /> |
| <input id="c01" type="range" min="0" max="100" step="10" /><br /> |
| <input id="c02" type="range" min="0" max="100" step="10" /><br /> |
| </form> |
| |
| <h2>DIV outer</h2> |
| <form id="f1"> |
| <div> |
| <input id="c10" type="range" min="0" max="100" step="10" /><br /> |
| <input id="c11" type="range" min="0" max="100" step="10" /><br /> |
| <input id="c12" type="range" min="0" max="100" step="10" /><br /> |
| </div> |
| </form> |
| |
| <h2>SPAN outer</h2> |
| <form id="f2"> |
| <span> |
| <input id="c20" type="range" min="0" max="100" step="10" /><br /> |
| <input id="c21" type="range" min="0" max="100" step="10" /><br /> |
| <input id="c22" type="range" 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="range" min="0" max="100" step="10" /></td></tr> |
| <tr><td><input id="c31" type="range" min="0" max="100" step="10" /></td></tr> |
| <tr><td><input id="c32" type="range" min="0" max="100" step="10" /></td></tr> |
| </table> |
| </form> |
| |
| <h2>Results</h2> |
| <div id="res"> |
| </div> |
| |
| </html> |
