| <!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true IOSFormControlRefreshEnabled=false ] --> |
| <html> |
| <head> |
| <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> |
| <script src="../../../resources/js-test.js"></script> |
| <script src="../../../resources/ui-helper.js"></script> |
| <style> |
| select { |
| width: 100px; |
| height: 100px; |
| } |
| </style> |
| </head> |
| <body> |
| <select id="select-multiple" multiple> |
| <option value="1">One</option> |
| <option value="2" disabled>Two</option> |
| <option value="3">Three</option> |
| <option value="4" disabled>Four</option> |
| </select> |
| |
| <select id="select-optgroup"> |
| <option value="1">One</option> |
| <option value="2" disabled>Two</option> |
| <optgroup label="Group"> |
| <option value="3">Three</option> |
| <option value="4" disabled>Four</option> |
| </optgroup> |
| </select> |
| </body> |
| <script> |
| jsTestIsAsync = true; |
| |
| async function attemptSelectForElementAndRow(element, row) { |
| selectElement = element; |
| option = element.getElementsByTagName("*")[row]; |
| previousValue = element.value; |
| |
| await UIHelper.selectFormAccessoryPickerRow(row); |
| selected = await UIHelper.selectFormAccessoryHasCheckedItemAtRow(row); |
| |
| if (option instanceof HTMLOptGroupElement || option.disabled) { |
| expectedValue = previousValue; |
| shouldBeFalse("selected"); |
| } else { |
| expectedValue = option.value; |
| shouldBeTrue("selected"); |
| } |
| |
| // <select multiple> does not update the value until the accessory is |
| // dismissed. In that case, the previous assertion on `selected` is |
| // enough for this test. |
| if (!selectElement.multiple) |
| shouldBeEqualToString("selectElement.value", expectedValue); |
| } |
| |
| async function testAllItemsInSelectElement(element) { |
| await UIHelper.activateElementAndWaitForInputSession(element); |
| |
| for (i = 0; i < element.getElementsByTagName("*").length; i++) |
| await attemptSelectForElementAndRow(element, i); |
| |
| element.blur(); |
| await UIHelper.waitForKeyboardToHide(); |
| } |
| |
| addEventListener("load", async () => { |
| description("This test verifies that disabled options cannot be selected in the multi-select picker on iPhones."); |
| |
| debug("Test select multiple\n"); |
| const selectMultiple = document.getElementById("select-multiple"); |
| await testAllItemsInSelectElement(selectMultiple); |
| |
| // <select> with an <optgroup> displays the multi-select picker on iPhones. |
| debug("\nTest select with optgroup\n"); |
| const selectWithGroup = document.getElementById("select-optgroup"); |
| await testAllItemsInSelectElement(selectWithGroup); |
| |
| finishJSTest(); |
| }); |
| </script> |
| </html> |
