third_party/WebKit/LayoutTests/fast/forms/select/listbox-in-multi-column.html

   1 <html>
   2 <head>
   3 <style type="text/css" media="screen">
   4 body {
   5     font-size: 13px;
   6 }
   7 form {
   8     -webkit-column-count: 3;
   9     -webkit-column-gap: 0px;
  10     background: #ccccff;
  11     margin: 0px;
  12     padding: 0px;
  13     border: solid 1px red;
  14 }
  15
  16 input[type="number"] {
  17     width: 200px;
  18     height: 50px;
  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
  62     const clickX = pageX(column) + colWidth * colIndex + ofsX;
  63     const clickY = pageY(column) + Math.floor(spin.offsetHeight / 3);
  64
  65     eventSender.mouseMoveTo(clickX, clickY);
  66     eventSender.mouseDown();
  67     eventSender.mouseUp();
  68     eventSender.mouseMoveTo(0, 0);
  69
  70     if (spin.value == expected)
  71         log("PASSED " + spinId);
  72     else
  73         log("FAILED " + spinId + " expected=" + expected + " got=" + spin.value + " " + clickX + "@" + clickY);
  74 }
  75
  76 function test()
  77 {
  78     if (!window.testRunner)
  79         return;
  80
  81     testRunner.dumpAsText();
  82
  83     for (var formIndex = 0; formIndex < numForms; formIndex++) {
  84         for (var colIndex = 0; colIndex < numCols; colIndex++) {
  85           testIt(formIndex, colIndex, 10, "b");
  86         }
  87     }
  88 }
  89 </script>
  90 </head>
  91 <body onload="test()">
  92 <h1>ListBox In Multi-Coulumn</h1>
  93 This is test cases for <a href="https://webkit.org/b/70898">BUG 70898</a>.
  94
  95 <h2>No outer</h2>
  96 <form id="f0">
  97 <select id="c00" size="4"><option value="a">Alpha</option><option value="b">Bravo</option><option value="c">Charlie</option><option value="d">Delta</option></select><br />
  98 <select id="c01" size="4"><option value="a">Alpha</option><option value="b">Bravo</option><option value="c">Charlie</option><option value="d">Delta</option></select><br />
  99 <select id="c02" size="4"><option value="a">Alpha</option><option value="b">Bravo</option><option value="c">Charlie</option><option value="d">Delta</option></select><br />
 100 </form>
 101
 102 <h2>DIV outer</h2>
 103 <form id="f1">
 104 <div>
 105 <select id="c10" size="4"><option value="a">Alpha</option><option value="b">Bravo</option><option value="c">Charlie</option><option value="d">Delta</option></select><br />
 106 <select id="c11" size="4"><option value="a">Alpha</option><option value="b">Bravo</option><option value="c">Charlie</option><option value="d">Delta</option></select><br />
 107 <select id="c12" size="4"><option value="a">Alpha</option><option value="b">Bravo</option><option value="c">Charlie</option><option value="d">Delta</option></select><br />
 108 </div>
 109 </form>
 110
 111 <h2>SPAN outer</h2>
 112 <form id="f2">
 113 <span>
 114 <select id="c20" size="4"><option value="a">Alpha</option><option value="b">Bravo</option><option value="c">Charlie</option><option value="d">Delta</option></select><br />
 115 <select id="c21" size="4"><option value="a">Alpha</option><option value="b">Bravo</option><option value="c">Charlie</option><option value="d">Delta</option></select><br />
 116 <select id="c22" size="4"><option value="a">Alpha</option><option value="b">Bravo</option><option value="c">Charlie</option><option value="d">Delta</option></select><br />
 117 </span>
 118 </form>
 119
 120 <h2>TABLE outer</h2>
 121 <form id="f3">
 122 <table border="0" cellpadding="0" cellspacing="0">
 123 <tr><td><select id="c30" size="4"><option value="a">Alpha</option><option value="b">Bravo</option><option value="c">Charlie</option><option value="d">Delta</option></select></td></tr>
 124 <tr><td><select id="c31" size="4"><option value="a">Alpha</option><option value="b">Bravo</option><option value="c">Charlie</option><option value="d">Delta</option></select></td></tr>
 125 <tr><td><select id="c32" size="4"><option value="a">Alpha</option><option value="b">Bravo</option><option value="c">Charlie</option><option value="d">Delta</option></select></td></tr>
 126 </table>
 127 </form>
 128
 129 <h2>Results</h2>
 130 <div id="res">
 131 </div>
 132
 133 </html>