Implement select element list box with 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..78f2ea4bcbc4e0044b9b2fd9e74779131bde4457 100644
--- a/LayoutTests/fast/forms/option-mouseevents.html
+++ b/LayoutTests/fast/forms/option-mouseevents.html
@@ -21,27 +21,28 @@ function shouldBe(description, actual, expected)
               "red");
     }
 }
-function mouseeventverify(event, x, y, target, type)
+function testEvent(listener, offsetX, offsetY, target, type)
 {
-    shouldBe("event type", event.type, type);
-    shouldBe("event target", event.target, target);
-    shouldBe("event.pageX", event.pageX, x);
-    shouldBe("event.pageY", event.pageY, y);
-    shouldBe("event.offsetX", event.offsetX, x);
-    shouldBe("event.offsetY", event.offsetY, y);
-    shouldBe("event.x", event.x, x);
-    shouldBe("event.y", event.y, y);
-}
-function mouseeventverify2(event, x, y, offsetX, offsetY, target, type)
-{
-    shouldBe("event type", event.type, type);
-    shouldBe("event target", event.target, target);
-    shouldBe("event.pageX", event.pageX, x);
-    shouldBe("event.pageY", event.pageY, y);
-    shouldBe("event.offsetX", event.offsetX, offsetX);
-    shouldBe("event.offsetY", event.offsetY, offsetY);
-    shouldBe("event.x", event.x, x);
-    shouldBe("event.y", event.y, y);
+    var rect = target.getBoundingClientRect();
+    var x = rect.left + offsetX;
+    var y = rect.top + offsetY;
+    listener.addEventListener(type, function () {
+        shouldBe("event type", event.type, type);
+        shouldBe("event target", event.target, target);
+        shouldBe("event.pageX", event.pageX, x);
+        shouldBe("event.pageY", event.pageY, y);
+        shouldBe("event.offsetX", event.offsetX, offsetX);
+        shouldBe("event.offsetY", event.offsetY, offsetY);
+        shouldBe("event.x", event.x, x);
+        shouldBe("event.y", event.y, y);
+    }, false);
+    eventSender.mouseMoveTo(x, y);
+    eventSender.mouseDown();
+    eventSender.mouseUp();
+    if (type == "dblclick") {
+        eventSender.mouseDown();
+        eventSender.mouseUp();
+    }
 }
 function test() {
     if (window.testRunner) {
@@ -49,39 +50,14 @@ function test() {
         testRunner.waitUntilDone();
     }
 
-    if (window.eventSender) {
-        eventSender.mouseMoveTo(22, 104);
-        eventSender.mouseDown();
-        eventSender.mouseUp();
-    }
-
-    if (window.eventSender) {
-        eventSender.mouseMoveTo(22, 184);
-        eventSender.mouseDown();
-        eventSender.mouseUp();
-    }
-
-    if (window.eventSender) {
-        eventSender.mouseMoveTo(22, 262);
-        eventSender.mouseDown();
-        eventSender.mouseUp();
-    }
-
-    if (window.eventSender) {
-        eventSender.mouseMoveTo(22, 344);
-        eventSender.mouseDown();
-        eventSender.mouseUp();
-        eventSender.mouseDown();
-        eventSender.mouseUp();
-    }
-
-    if (window.eventSender) {
-        eventSender.mouseMoveTo(22, 448);
-        eventSender.mouseDown();
-        eventSender.mouseUp();
-        eventSender.mouseDown();
-        eventSender.mouseUp();
-    }
+    testEvent(document.getElementById('s1'), 11, 3, document.getElementById('o1'), 'mousedown');
+    testEvent(document.getElementById('o1'), 11, 3, document.getElementById('o1'), 'mousedown');
+    testEvent(document.getElementById('s2'), 11, 3, document.getElementById('o2'), 'mouseup');
+    testEvent(document.getElementById('o2'), 11, 3, document.getElementById('o2'), 'mouseup');
+    testEvent(document.getElementById('s3'), 11, 3, document.getElementById('o3'), 'click');
+    testEvent(document.getElementById('o3'), 11, 3, document.getElementById('o3'), 'click');
+    testEvent(document.getElementById('s3'), 11, 3, document.getElementById('o3'), 'click');
+    testEvent(document.getElementById('o3'), 11, 3, document.getElementById('o3'), 'click');
 
     if (window.testRunner)
         testRunner.notifyDone();
@@ -93,32 +69,32 @@ 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 id="s1" style="position:absolute; top: 84;" size="2">
 <option>One
-<option id="o1" onmousedown="mouseeventverify(event, 22, 104, this, 'mousedown')">Two
+<option id="o1">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 id="s2" style="position:absolute; top: 164;" size="2", 'mouseup')">
 <option>One
-<option id="o2" onmouseup="mouseeventverify(event, 22, 184, this, 'mouseup')">Two
+<option id="o2">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 id="s3" style="position:absolute; top: 242;" size="2", 'click')">
 <option>One
-<option id="o3" onclick="mouseeventverify(event, 22, 262, this, 'click')">Two
+<option id="o3">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", 'dblclick')">
 <option>One
-<option id="o4" ondblclick="mouseeventverify(event, 22, 344, this, 'dblclick')">Two
+<option id="o4">Two
 </select>
 </form>
-<select style="position:absolute; top: 408;" size="3" onmousedown="mouseeventverify2(event, 22, 448, 12, 38, this, 'mousedown')">
+<select style="position:absolute; top: 408;" size="3">
 <option>One
-<option id="o5" onmousedown="mouseeventverify2(event, 22, 448, 12, 38, this, 'mousedown')">Two
+<option id="o5">Two
 </select>
 </form>
 <div style="position:absolute; top: 550;" id='console'></div>