select-many-options.tentative.html (4036B)
1 <!DOCTYPE html> 2 <html> 3 <title>HTMLselectElement Test: many options</title> 4 <link rel="author" title="Ionel Popescu" href="mailto:iopopesc@microsoft.com"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-actions.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 11 <style> 12 #select0 { 13 position: absolute; 14 top: 0px; 15 left: 0px; 16 } 17 18 ::picker(select) { 19 border: 1px solid rgba(0, 0, 0, 0.15); 20 border-radius: 4px; 21 box-shadow: 0px 12.8px 28.8px rgba(0, 0, 0, 0.13), 0px 0px 9.2px rgba(0, 0, 0, 0.11); 22 box-sizing: border-box; 23 overflow: auto; 24 padding: 4px; 25 } 26 select, ::picker(select) { 27 appearance: base-select; 28 } 29 </style> 30 31 <select id="select0"> 32 <div id="select0-popover"> 33 <option>bottom left</option> 34 <option>two</option> 35 <option>three</option> 36 <option>two</option> 37 <option>three</option> 38 <option>two</option> 39 <option>three</option> 40 <option>two</option> 41 <option>three</option> 42 <option>two</option> 43 <option>three</option> 44 <option>two</option> 45 <option>three</option> 46 <option>two</option> 47 <option>three</option> 48 <option>two</option> 49 <option>three</option> 50 <option>two</option> 51 <option>three</option> 52 <option>two</option> 53 <option>three</option> 54 <option>two</option> 55 <option>three</option> 56 <option>two</option> 57 <option>three</option> 58 <option>two</option> 59 <option>three</option> 60 <option>two</option> 61 <option>three</option> 62 <option>two</option> 63 <option>three</option> 64 <option>two</option> 65 <option>three</option> 66 <option>two</option> 67 <option>three</option> 68 <option>two</option> 69 <option>three</option> 70 <option>two</option> 71 <option>three</option> 72 <option>two</option> 73 <option>three</option> 74 <option>two</option> 75 <option>three</option> 76 <option>two</option> 77 <option>three</option> 78 <option>two</option> 79 <option>three</option> 80 <option>two</option> 81 <option>three</option> 82 <option>two</option> 83 <option>three</option> 84 <option>two</option> 85 <option>three</option> 86 <option>two</option> 87 <option>three</option> 88 <option>two</option> 89 <option>three</option> 90 <option>two</option> 91 <option>three</option> 92 <option>two</option> 93 <option>three</option> 94 <option>two</option> 95 <option>three</option> 96 <option>two</option> 97 <option>three</option> 98 <option>two</option> 99 <option>three</option> 100 <option>two</option> 101 <option>three</option> 102 <option>two</option> 103 <option>three</option> 104 <option>two</option> 105 <option>three</option> 106 <option>two</option> 107 <option>three</option> 108 <option>two</option> 109 <option>three</option> 110 <option>two</option> 111 <option>three</option> 112 <option>two</option> 113 <option>three</option> 114 <option>two</option> 115 <option>three</option> 116 <option>two</option> 117 <option>three</option> 118 <option>two</option> 119 <option>three</option> 120 </div> 121 </select> 122 <br> 123 124 <script> 125 function clickOn(element) { 126 const actions = new test_driver.Actions(); 127 return actions.pointerMove(0, 0, {origin: element}) 128 .pointerDown({button: actions.ButtonType.LEFT}) 129 .pointerUp({button: actions.ButtonType.LEFT}) 130 .send(); 131 } 132 133 promise_test(async () => { 134 const select0 = document.getElementById("select0"); 135 const select0Popover = document.getElementById("select0-popover"); 136 137 await clickOn(select0); 138 assert_equals(Math.round(select0.getBoundingClientRect().bottom), Math.round(select0Popover.getBoundingClientRect().top)); 139 assert_equals(Math.round(select0.getBoundingClientRect().left), Math.round(select0Popover.getBoundingClientRect().left)); 140 assert_equals(window.innerHeight, Math.round(select0Popover.getBoundingClientRect().bottom)); 141 }, "The popover should be bottom left positioned"); 142 143 </script>