|
15 | 15 | } |
16 | 16 | </style> |
17 | 17 |
|
| 18 | +<div id=lightdismiss>light dismiss</div> |
| 19 | + |
18 | 20 | <label for=custombutton>custom button</label> |
19 | 21 | <select id=custombutton> |
20 | 22 | <button>button</button> |
|
29 | 31 | </select> |
30 | 32 |
|
31 | 33 | <script> |
| 34 | +function touch(element) { |
| 35 | + return (new test_driver.Actions() |
| 36 | + .addPointer('finger', 'touch') |
| 37 | + .pointerMove(1, 1, {origin: element}) |
| 38 | + .pointerDown() |
| 39 | + .pointerUp()) |
| 40 | + .send(); |
| 41 | +} |
| 42 | + |
32 | 43 | for (const id of ['fallbackbutton', 'custombutton']) { |
33 | 44 | const select = document.getElementById(id); |
34 | 45 | const optionOne = select.querySelector('option.one'); |
|
79 | 90 | assert_false(select.matches(':open'), |
80 | 91 | 'select picker should be closed after clicking the label.'); |
81 | 92 | }, `${id}: Clicking the label should focus the select button without opening the picker.`); |
| 93 | + |
| 94 | + promise_test(async () => { |
| 95 | + select.value = 'one'; |
| 96 | + await touch(select); |
| 97 | + assert_true(select.matches(':open'), |
| 98 | + 'Select should open after touching button.'); |
| 99 | + |
| 100 | + await touch(optionTwo); |
| 101 | + assert_equals(select.value, 'two', |
| 102 | + 'select.value should be updated after touching another option.'); |
| 103 | + assert_false(select.matches(':open'), |
| 104 | + 'Picker should close after touching an option.'); |
| 105 | + |
| 106 | + await touch(select); |
| 107 | + assert_true(select.matches(':open'), |
| 108 | + 'Select should re-open after touching button.'); |
| 109 | + |
| 110 | + await touch(document.getElementById('lightdismiss')); |
| 111 | + assert_false(select.matches(':open'), |
| 112 | + 'Select should close via light dismiss when touching outside the picker.'); |
| 113 | + }, `${id}: Touch input should work the same as mouse input.`); |
82 | 114 | } |
83 | 115 | </script> |
0 commit comments