src/third_party/WebKit/LayoutTests/fast/forms/number/number-spinbutton-in-multi-column.html

   1 <html>
   2 <head>
   3 <style type="text/css" media="screen">
   4 form {
   5     -webkit-column-count: 3;
   6     -webkit-column-gap: 0px;
   7     -moz-column-count: 3;
   8     -moz-column-gap: 0px;
   9     background: #ccccff;
  10     margin: 0px;
  11     padding: 0px;
  12     border: solid 1px red;
  13 }
  14
  15 input[type="number"] {
  16     width: 100px;
  17     height: 50px;
  18     font-size: 44px;
  19 }
  20
  21 td {
  22     background: red;
  23 }
  24 </style>
  25 <script>
  26 const numForms = 4;
  27 const numCols = 3;
  28
  29 function log(msg)
  30 {
  31     var res = document.getElementById('res');
  32     res.innerHTML = res.innerHTML + msg + "<br>";
  33 }
  34
  35 function pageX(runner) {
  36     var acc = 0;
  37     while (runner) {
  38         acc += runner.offsetLeft;
  39         runner = runner.offsetParent;
  40     }
  41     return acc;
  42 }
  43
  44 function pageY(runner) {
  45     var acc = 0;
  46     while (runner) {
  47         acc += runner.offsetTop;
  48         runner = runner.offsetParent;
  49     }
  50     return acc;
  51 }
  52
  53 function testIt(formIndex, colIndex, ofsX, expected)
  54 {
  55     const form = document.getElementById("f" + formIndex);
  56     const column = document.getElementById("c" + formIndex + "0");
  57     const colWidth = Math.floor(form.offsetWidth / numCols);
  58
  59     const spinId = "c" + formIndex + colIndex;
  60     const spin = document.getElementById(spinId);
  61     spin.focus();
  62
  63     const clickX = pageX(column) + colWidth * colIndex + ofsX;
  64     const clickY = pageY(column) + Math.floor(spin.offsetHeight / 3);
  65
  66     eventSender.mouseMoveTo(clickX, clickY);
  67     eventSender.mouseDown();
  68     eventSender.mouseUp();
  69     eventSender.mouseMoveTo(0, 0);
  70
  71     if (spin.value == expected)
  72         log("PASSED " + spinId);
  73     else
  74         log("FAILED " + spinId + " expected=" + expected + " got=" + spin.value + " " + clickX + "@" + clickY);
  75 }
  76
  77 function installMouseTracker() {
  78     document.body.onmousemove = function(e) {
  79         var resultBox = document.getElementById("mousepos");
  80         var offsets = "element id: " + e.target.id + "<br> clientX: " + e.clientX + " clientY: " + e.clientY + "<br>";
  81         offsets += "offsetX: " + e.offsetX + " offsetY: " + e.offsetY;
  82         resultBox.innerHTML = offsets;
  83     }
  84 }
  85
  86 function test()
  87 {
  88     if (!window.testRunner) {
  89         installMouseTracker();
  90         return;
  91     }
  92
  93     testRunner.dumpAsText();
  94
  95     for (var formIndex = 0; formIndex < numForms; formIndex++) {
  96         for (var colIndex = 0; colIndex < numCols; colIndex++) {
  97           testIt(formIndex, colIndex, 93, 10);
  98         }
  99     }
 100 }
 101 </script>
 102 </head>
 103 <body onload="test()">
 104 <h1>Spin In Multi-Coulumn</h1>
 105 This is test cases for <a href="https://webkit.org/b/70898">BUG 70898</a>.
 106
 107 <h2>No outer</h2>
 108 <form id="f0">
 109 <input id="c00" type="number" min="0" max="100" step="10" /><br />
 110 <input id="c01" type="number" min="0" max="100" step="10" /><br />
 111 <input id="c02" type="number" min="0" max="100" step="10" /><br />
 112 </form>
 113
 114 <h2>DIV outer</h2>
 115 <form id="f1">
 116 <div>
 117 <input id="c10" type="number" min="0" max="100" step="10" /><br />
 118 <input id="c11" type="number" min="0" max="100" step="10" /><br />
 119 <input id="c12" type="number" min="0" max="100" step="10" /><br />
 120 </div>
 121 </form>
 122
 123 <h2>SPAN outer</h2>
 124 <form id="f2">
 125 <span>
 126 <input id="c20" type="number" min="0" max="100" step="10" /><br />
 127 <input id="c21" type="number" min="0" max="100" step="10" /><br />
 128 <input id="c22" type="number" min="0" max="100" step="10" /><br />
 129 </span>
 130 </form>
 131
 132 <h2>TABLE outer</h2>
 133 <form id="f3">
 134 <table border="0" cellpadding="0" cellspacing="0">
 135 <tr><td><input id="c30" type="number" min="0" max="100" step="10" /></td></tr>
 136 <tr><td><input id="c31" type="number" min="0" max="100" step="10" /></td></tr>
 137 <tr><td><input id="c32" type="number" min="0" max="100" step="10" /></td></tr>
 138 </table>
 139 </form>
 140
 141 <h2>Results</h2>
 142 <div id="mousepos"></div>
 143 <div id="res"></div>
 144
 145 </html>