Implement select listbox using shadow DOM

LayoutTests/fast/forms/option-mouseevents.html

Index: LayoutTests/fast/forms/option-mouseevents.html
diff --git a/LayoutTests/fast/forms/option-mouseevents.html b/LayoutTests/fast/forms/option-mouseevents.html
index 8f2fe2b695b15d1dffe6d4e8f3ac46169490be6c..ad65434c8b07d8293e1ab9788c48310b53461900 100644
--- a/LayoutTests/fast/forms/option-mouseevents.html
+++ b/LayoutTests/fast/forms/option-mouseevents.html
@@ -93,27 +93,27 @@ function test() {
 Bug 3248: Mouse events on OPTION element seem to be ignored<br>
 <a href="https://bugs.webkit.org/show_bug.cgi?id=3248">https://bugs.webkit.org/show_bug.cgi?id=3248</a></p>
 <form action="" method="post">
-<select style="position:absolute; top: 84;" size="2" onmousedown="mouseeventverify(event, 22, 104, document.getElementById('o1'), 'mousedown')">
+<select style="position:absolute; top: 84;" size="2" onmousedown="mouseeventverify2(event, 22, 104, 11, 3, document.getElementById('o1'), 'mousedown')">
 <option>One
-<option id="o1" onmousedown="mouseeventverify(event, 22, 104, this, 'mousedown')">Two
+<option id="o1" onmousedown="mouseeventverify2(event, 22, 104, 11, 3, this, 'mousedown')">Two
 </select>
 </form>
 <form action="" method="post">
-<select style="position:absolute; top: 164;" size="2" onmouseup="mouseeventverify(event, 22, 184, document.getElementById('o2'), 'mouseup')">
+<select style="position:absolute; top: 164;" size="2" onmouseup="mouseeventverify2(event, 22, 184, 11, 3, document.getElementById('o2'), 'mouseup')">
 <option>One
-<option id="o2" onmouseup="mouseeventverify(event, 22, 184, this, 'mouseup')">Two
+<option id="o2" onmouseup="mouseeventverify2(event, 22, 184, 11, 3, this, 'mouseup')">Two
 </select>
 </form>
 <form action="" method="post">
-<select style="position:absolute; top: 242;" size="2" onclick="mouseeventverify(event, 22, 262, document.getElementById('o3'), 'click')">
+<select style="position:absolute; top: 242;" size="2" onclick="mouseeventverify2(event, 22, 262, 11, 3, document.getElementById('o3'), 'click')">
 <option>One
-<option id="o3" onclick="mouseeventverify(event, 22, 262, this, 'click')">Two
+<option id="o3" onclick="mouseeventverify2(event, 22, 262, 11, 3, this, 'click')">Two
 </select>
 </form>
 <form action="" method="post">
-<select style="position:absolute; top: 324;" size="2" ondblclick="mouseeventverify(event, 22, 344, document.getElementById('o4'), 'dblclick')">
+<select style="position:absolute; top: 324;" size="2" ondblclick="mouseeventverify2(event, 22, 344, 11, 3, document.getElementById('o4'), 'dblclick')">
 <option>One
-<option id="o4" ondblclick="mouseeventverify(event, 22, 344, this, 'dblclick')">Two
+<option id="o4" ondblclick="mouseeventverify2(event, 22, 344, 11, 3, this, 'dblclick')">Two
 </select>
 </form>
 <select style="position:absolute; top: 408;" size="3" onmousedown="mouseeventverify2(event, 22, 448, 12, 38, this, 'mousedown')">