| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta name="viewport" content="width=800"> |
| <script src="../../../../resources/js-test.js"></script> |
| <script src="../../../../resources/ui-helper.js"></script> |
| </head> |
| <body style="height: 4096px"> |
| <!-- Place the test container above the console output to avoid the need to compensate for page scroll. --> |
| <div id="test-container"> |
| <p><select id="test"> |
| <option>First</option> |
| <option>Second</option> |
| </select></p> |
| </div> |
| <p id="description"></p> |
| <div id="console"></div> |
| <script> |
| window.jsTestIsAsync = true; |
| |
| let expectedValue; |
| |
| const modifierDisplayNameMap = { |
| "altKey": "Option", |
| "ctrlKey": "Control", |
| "metaKey": "Command", |
| "shiftKey": "Shift", |
| "capsLockKey": "Caps Lock", |
| } |
| |
| class KeyCommand { |
| constructor(key, modifiers = []) |
| { |
| this.key = key; |
| this.modifiers = modifiers; |
| } |
| |
| toString() |
| { |
| let readableCommand = this.modifiers.map((modifier) => modifierDisplayNameMap[modifier]); |
| readableCommand.push(this.key); |
| return readableCommand.join(" + "); |
| } |
| } |
| |
| function done() |
| { |
| let testContainer = document.getElementById("test-container"); |
| document.body.removeChild(testContainer); |
| finishJSTest() |
| } |
| |
| async function runTest() |
| { |
| if (!window.testRunner) { |
| testFailed("Must be run in WebKitTestRunner."); |
| done(); |
| return; |
| } |
| |
| async function testScrollIntoView() { |
| shouldBeNonZero("window.scrollY"); |
| async function handleScroll() { |
| if (window.scrollY) |
| return; |
| shouldBeZero("window.scrollY"); |
| await UIHelper.waitForPopoverToPresent(); |
| UIHelper.keyDown("escape"); |
| await UIHelper.waitForPopoverToDismiss(); |
| done(); |
| } |
| // The scroll initiated by pressing the spacebar is animated. Multiple scroll events are |
| // dispatched. We want to wait until the page scrolls to the top before continuing to ensure |
| // consistent test results. |
| window.addEventListener("scroll", handleScroll); |
| UIHelper.keyDown(" "); |
| } |
| |
| async function handleFocus() { |
| debug("<br>After tab focused:"); |
| shouldBeEqualToString('document.getElementById("test").value', expectedValue); |
| debug("<br>After dismissing popover by pressing Escape:"); |
| UIHelper.keyDown("escape"); |
| await UIHelper.waitForPopoverToDismiss(); |
| shouldBeEqualToString('document.getElementById("test").value', expectedValue); |
| debug("<br>After opening popover by pressing spacebar:"); |
| UIHelper.keyDown(" "); |
| await UIHelper.waitForPopoverToPresent(); |
| shouldBeEqualToString('document.getElementById("test").value', expectedValue); |
| UIHelper.keyDown("escape"); |
| await UIHelper.waitForPopoverToDismiss(); |
| debug("<br>After scrolling the page and pressing spacebar:"); |
| window.addEventListener("scroll", testScrollIntoView, { once: true }); |
| window.scrollTo(0, document.body.scrollHeight); // Scroll to the bottom of the page. |
| } |
| let elementToTest = document.getElementById("test"); |
| expectedValue = elementToTest.value; |
| elementToTest.addEventListener("focus", handleFocus, { once: true }); |
| UIHelper.keyDown("\t", ["altKey"]); |
| } |
| |
| description("Tests that pressing the spacebar and Escape to open and close the popover work, do not cause a value change, and that we scroll the form control into view when the popover is opened."); |
| |
| runTest(); |
| </script> |
| </body> |
| </html> |
