LayoutTests/fast/forms/select/listbox-in-multi-column.html - WebKit - Git at Google

 <html>
 <head>
 <style type="text/css" media="screen">
 body {
     font-size: 13px;
 }
 form {
     -webkit-column-count: 3;
     -webkit-column-gap: 0px;
     background: #ccccff;
     margin: 0px;
     padding: 0px;
     border: solid 1px red;
 }

 input[type="number"] {
     width: 200px;
     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 + ofsX;
     const clickY = pageY(column) + Math.floor(spin.offsetHeight / 3);

     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 test()
 {
     if (!window.testRunner)
         return;

     testRunner.dumpAsText();

     for (var formIndex = 0; formIndex < numForms; formIndex++) {
         for (var colIndex = 0; colIndex < numCols; colIndex++) {
           testIt(formIndex, colIndex, 10, "b");
         }
     }
 }
 </script>
 </head>
 <body onload="test()">
 <h1>ListBox 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">
 <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 />
 <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 />
 <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 />
 </form>

 <h2>DIV outer</h2>
 <form id="f1">
 <div>
 <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 />
 <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 />
 <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 />
 </div>
 </form>

 <h2>SPAN outer</h2>
 <form id="f2">
 <span>
 <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 />
 <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 />
 <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 />
 </span>
 </form>

 <h2>TABLE outer</h2>
 <form id="f3">
 <table border="0" cellpadding="0" cellspacing="0">
 <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>
 <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>
 <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>
 </table>
 </form>

 <h2>Results</h2>
 <div id="res">
 </div>

 </html>
	<html>
	<head>
	<style type="text/css" media="screen">
	body {
	font-size: 13px;
	}
	form {
	-webkit-column-count: 3;
	-webkit-column-gap: 0px;
	background: #ccccff;
	margin: 0px;
	padding: 0px;
	border: solid 1px red;
	}

	input[type="number"] {
	width: 200px;
	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 + ofsX;
	const clickY = pageY(column) + Math.floor(spin.offsetHeight / 3);

	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 test()
	{
	if (!window.testRunner)
	return;

	testRunner.dumpAsText();

	for (var formIndex = 0; formIndex < numForms; formIndex++) {
	for (var colIndex = 0; colIndex < numCols; colIndex++) {
	testIt(formIndex, colIndex, 10, "b");
	}
	}
	}
	</script>
	</head>
	<body onload="test()">
	<h1>ListBox 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">
	<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 />
	<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 />
	<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 />
	</form>

	<h2>DIV outer</h2>
	<form id="f1">
	<div>
	<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 />
	<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 />
	<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 />
	</div>
	</form>

	<h2>SPAN outer</h2>
	<form id="f2">
	<span>
	<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 />
	<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 />
	<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 />
	</span>
	</form>

	<h2>TABLE outer</h2>
	<form id="f3">
	<table border="0" cellpadding="0" cellspacing="0">
	<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>
	<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>
	<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>
	</table>
	</form>

	<h2>Results</h2>
	<div id="res">
	</div>

	</html>