select-click-drag-option.optional.html (4546B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=help href="https://github.com/whatwg/html/issues/10762"> 4 <link rel=help href="https://issues.chromium.org/issues/385300320"> 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-vendor.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 11 <!-- This test is optional because the click and drag behavior is not 12 explicitly specified. The spec does say that mousedown on the select 13 element opens the picker and mouseup chooses options in order to support 14 this behavior. --> 15 16 <style> 17 select, ::picker(select) { 18 appearance: base-select; 19 } 20 21 #s2, #s2 > option { 22 width: 200px; 23 height: 100px; 24 padding: 10px; 25 border: 1px solid black; 26 box-sizing: border-box; 27 border-radius: 0; 28 } 29 #s2 { 30 position: absolute; 31 top: 300px; 32 left: 300px; 33 } 34 #s2::picker(select) { 35 border: 0; 36 top: anchor(top); 37 } 38 </style> 39 40 <select id=s1> 41 <option class=one>one</option> 42 <option class=two>two</option> 43 </select> 44 45 <select id=s2> 46 <option class=one>one</option> 47 <option class=two>two</option> 48 </select> 49 50 <script> 51 function assertAppearance() { 52 const style = getComputedStyle(document.querySelector('select')); 53 assert_equals(style.appearance, 'base-select', 54 'appearance:base-select must be supported in order to run this test.'); 55 } 56 57 promise_test(async () => { 58 assertAppearance(); 59 const select = document.getElementById('s1'); 60 const optionOne = select.querySelector('.one'); 61 const optionTwo = select.querySelector('.two'); 62 assert_false(select.matches(':open'), 63 'select should be closed at the start of the test.'); 64 65 await (new test_driver.Actions() 66 .pointerMove(2, 2, {origin: select}) 67 .pointerDown() 68 .pointerMove(2, 2, {origin: optionOne}) 69 .pointerMove(2, 2, {origin: optionTwo}) 70 .pointerUp()) 71 .send(); 72 assert_false(select.matches(':open'), 73 'select should be closed after pointerUp() on second option.'); 74 assert_equals(select.value, 'two', 75 'select.value should be changed to two after releasing the pointer on the second option.'); 76 77 await (new test_driver.Actions() 78 .pointerMove(2, 2, {origin: select}) 79 .pointerDown() 80 .pointerMove(4, 4, {origin: select}) 81 .pointerMove(2, 2, {origin: optionOne}) 82 .pointerUp()) 83 .send(); 84 assert_false(select.matches(':open'), 85 'select should be closed after pointerUp() on first option.'); 86 assert_equals(select.value, 'one', 87 'select.value should be changed to one after releasing the pointer on the first option.'); 88 }, 'Clicking the invoker button and dragging to an option should choose that option and close the picker.'); 89 90 [false, true].forEach(isTouch => { 91 promise_test(async () => { 92 assertAppearance(); 93 const select = document.getElementById('s2'); 94 const optionOne = select.querySelector('.one'); 95 const optionTwo = select.querySelector('.two'); 96 assert_false(select.matches(':open'), 97 'select should be closed at the start of the test.'); 98 99 let actions = new test_driver.Actions(); 100 if (isTouch) { 101 actions.addPointer('finger', 'touch'); 102 } 103 await (actions 104 .pointerMove(2, 2, {origin: select}) 105 .pointerDown() 106 .pointerUp()) 107 .send(); 108 assert_true(select.matches(':open'), 109 'select should still be open after pointerUp() without moving the pointer.'); 110 111 actions = new test_driver.Actions(); 112 if (isTouch) { 113 actions.addPointer('finger', 'touch'); 114 } 115 await (actions 116 .pointerMove(2, 2, {origin: optionOne}) 117 .pointerDown() 118 .pointerUp()) 119 .send(); 120 assert_false(select.matches(':open'), 121 'select should close after clicking option on top of the invoker.'); 122 123 // Click and drag isn't supported on touch. 124 if (!isTouch) { 125 await (new test_driver.Actions() 126 .pointerMove(2, 2, {origin: select}) 127 .pointerDown() 128 .pointerMove(2, 2, {origin: optionOne}) 129 .pointerMove(2, 2, {origin: optionTwo}) 130 .pointerUp()) 131 .send(); 132 assert_false(select.matches(':open'), 133 'select should close after clicking and dragging to second option.'); 134 assert_equals(select.value, 'two', 135 'select.value should change two after choosing the second option.'); 136 } 137 }, `${isTouch ? 'touch' : 'mouse'}: Releasing the pointer on an option positioned on top of the invoker button should not close the picker.`); 138 }); 139 </script>