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