Implement select listbox using shadow DOM

LayoutTests/platform/mac/fast/text/international/bidi-listbox-atsui-expected.txt

Index: LayoutTests/platform/mac/fast/text/international/bidi-listbox-atsui-expected.txt
diff --git a/LayoutTests/platform/mac/fast/text/international/bidi-listbox-atsui-expected.txt b/LayoutTests/platform/mac/fast/text/international/bidi-listbox-atsui-expected.txt
index a22a1fcf39dccae8a62f42921cac7a33e3325d2d..135423049d5abb34c38bc804e49beb82ffb1a5b5 100644
--- a/LayoutTests/platform/mac/fast/text/international/bidi-listbox-atsui-expected.txt
+++ b/LayoutTests/platform/mac/fast/text/international/bidi-listbox-atsui-expected.txt
@@ -9,37 +9,52 @@ layer at (0,0) size 800x600
         RenderBR {BR} at (580,14) size 0x0
         RenderText {#text} at (0,18) size 566x18
           text run at (0,18) width 566: "The order of the text below each list box should match the order of the select's option text."
-      RenderBlock (anonymous) at (0,52) size 784x75
+      RenderBlock (anonymous) at (0,52) size 784x76
         RenderText {#text} at (0,0) size 97x18
           text run at (0,0) width 97: "1) direction: rtl;"
         RenderBR {BR} at (97,14) size 0x0
-        RenderListBox {SELECT} at (0,18) size 77x57 [bgcolor=#FFFFFF] [border: (1px inset #808080)]
-        RenderBR {BR} at (77,68) size 0x0
-      RenderBlock {DIV} at (0,127) size 100x19
+        RenderBR {BR} at (76,72) size 1x0
+      RenderBlock {DIV} at (0,128) size 100x19
         RenderText {#text} at (18,1) size 82x18
           text run at (18,1) width 60 RTL: "\x{5D0}\x{5E4}\x{5E8}\x{5E1}\x{5DE}\x{5D5}\x{5DF}"
           text run at (78,1) width 22: "a\x{300}bc"
-      RenderBlock (anonymous) at (0,146) size 784x93
+      RenderBlock (anonymous) at (0,147) size 784x94
         RenderBR {BR} at (0,0) size 0x18
         RenderText {#text} at (0,18) size 97x18
           text run at (0,18) width 97: "2) direction: ltr;"
         RenderBR {BR} at (97,32) size 0x0
-        RenderListBox {SELECT} at (0,36) size 77x57 [bgcolor=#FFFFFF] [border: (1px inset #808080)]
-        RenderBR {BR} at (77,86) size 0x0
-      RenderBlock {DIV} at (0,239) size 100x19
+        RenderBR {BR} at (76,90) size 1x0
+      RenderBlock {DIV} at (0,241) size 100x19
         RenderText {#text} at (0,1) size 82x18
           text run at (0,1) width 22: "a\x{300}bc"
           text run at (22,1) width 60 RTL: "\x{5D0}\x{5E4}\x{5E8}\x{5E1}\x{5DE}\x{5D5}\x{5DF}"
-      RenderBlock (anonymous) at (0,258) size 784x93
+      RenderBlock (anonymous) at (0,260) size 784x94
         RenderBR {BR} at (0,0) size 0x18
         RenderText {#text} at (0,18) size 70x18
           text run at (0,18) width 70: "3) No style"
         RenderBR {BR} at (70,32) size 0x0
-        RenderListBox {SELECT} at (0,36) size 77x57 [bgcolor=#FFFFFF] [border: (1px inset #808080)]
-        RenderBR {BR} at (77,86) size 0x0
-      RenderBlock {DIV} at (0,351) size 100x19
+        RenderBR {BR} at (76,90) size 1x0
+      RenderBlock {DIV} at (0,354) size 100x19
         RenderText {#text} at (0,1) size 82x18
           text run at (0,1) width 22: "a\x{300}bc"
           text run at (22,1) width 60 RTL: "\x{5D0}\x{5E4}\x{5E8}\x{5E1}\x{5DE}\x{5D5}\x{5DF}"
-      RenderBlock (anonymous) at (0,370) size 784x18
+      RenderBlock (anonymous) at (0,373) size 784x18
         RenderBR {BR} at (0,0) size 0x18
+layer at (8,78) size 77x58 clip at (20,79) size 64x56
+  RenderListBox {SELECT} at (0,18) size 76.50x58 [bgcolor=#FFFFFF] [border: (1px solid #999999)]
+    RenderBlock {OPTION} at (12,1) size 63.50x14
+      RenderText {#text} at (2,0) size 60x13
+        text run at (2,0) width 41 RTL: "\x{5D0}\x{5E4}\x{5E8}\x{5E1}\x{5DE}\x{5D5}\x{5DF}"
+        text run at (42,0) width 20: "a\x{300}bc"
+layer at (8,191) size 77x58 clip at (9,192) size 64x56
+  RenderListBox {SELECT} at (0,36) size 76.50x58 [bgcolor=#FFFFFF] [border: (1px solid #999999)]
+    RenderBlock {OPTION} at (1,1) size 63.50x14
+      RenderText {#text} at (2,0) size 60x13
+        text run at (2,0) width 19: "a\x{300}bc"
+        text run at (20,0) width 42 RTL: "\x{5D0}\x{5E4}\x{5E8}\x{5E1}\x{5DE}\x{5D5}\x{5DF}"
+layer at (8,304) size 77x58 clip at (9,305) size 64x56
+  RenderListBox {SELECT} at (0,36) size 76.50x58 [bgcolor=#FFFFFF] [border: (1px solid #999999)]
+    RenderBlock {OPTION} at (1,1) size 63.50x14
+      RenderText {#text} at (2,0) size 60x13
+        text run at (2,0) width 19: "a\x{300}bc"
+        text run at (20,0) width 42 RTL: "\x{5D0}\x{5E4}\x{5E8}\x{5E1}\x{5DE}\x{5D5}\x{5DF}"