|
Line 0
a/LayoutTests/fast/forms/ios/ipad/open-picker-using-keyboard.html_sec1
|
|
|
1 |
<!DOCTYPE html> |
| 2 |
<html> |
| 3 |
<head> |
| 4 |
<meta name="viewport" content="width=800"> |
| 5 |
<script src="../../../../resources/js-test.js"></script> |
| 6 |
<script src="../../../../resources/ui-helper.js"></script> |
| 7 |
</head> |
| 8 |
<body style="height: 4096px"> |
| 9 |
<!-- Place the test container above the console output to avoid the need to compensate for page scroll. --> |
| 10 |
<div id="test-container"> |
| 11 |
<p><select id="test"> |
| 12 |
<option>First</option> |
| 13 |
<option>Second</option> |
| 14 |
</select></p> |
| 15 |
</div> |
| 16 |
<p id="description"></p> |
| 17 |
<div id="console"></div> |
| 18 |
<script> |
| 19 |
window.jsTestIsAsync = true; |
| 20 |
|
| 21 |
let expectedValue; |
| 22 |
|
| 23 |
const modifierDisplayNameMap = { |
| 24 |
"altKey": "Option", |
| 25 |
"ctrlKey": "Control", |
| 26 |
"metaKey": "Command", |
| 27 |
"shiftKey": "Shift", |
| 28 |
"capsLockKey": "Caps Lock", |
| 29 |
} |
| 30 |
|
| 31 |
class KeyCommand { |
| 32 |
constructor(key, modifiers = []) |
| 33 |
{ |
| 34 |
this.key = key; |
| 35 |
this.modifiers = modifiers; |
| 36 |
} |
| 37 |
|
| 38 |
toString() |
| 39 |
{ |
| 40 |
let readableCommand = this.modifiers.map((modifier) => modifierDisplayNameMap[modifier]); |
| 41 |
readableCommand.push(this.key); |
| 42 |
return readableCommand.join(" + "); |
| 43 |
} |
| 44 |
} |
| 45 |
|
| 46 |
function done() |
| 47 |
{ |
| 48 |
let testContainer = document.getElementById("test-container"); |
| 49 |
document.body.removeChild(testContainer); |
| 50 |
finishJSTest() |
| 51 |
} |
| 52 |
|
| 53 |
async function runTest() |
| 54 |
{ |
| 55 |
if (!window.testRunner) { |
| 56 |
testFailed("Must be run in WebKitTestRunner."); |
| 57 |
done(); |
| 58 |
return; |
| 59 |
} |
| 60 |
|
| 61 |
async function testScrollIntoView() { |
| 62 |
shouldBeNonZero("window.scrollY"); |
| 63 |
async function handleScroll() { |
| 64 |
if (window.scrollY) |
| 65 |
return; |
| 66 |
shouldBeZero("window.scrollY"); |
| 67 |
await UIHelper.waitForPopoverToPresent(); |
| 68 |
UIHelper.keyDown("escape"); |
| 69 |
await UIHelper.waitForPopoverToDismiss(); |
| 70 |
done(); |
| 71 |
} |
| 72 |
// The scroll initiated by pressing the spacebar is animated. Multiple scroll events are |
| 73 |
// dispatched. We want to wait until the page scrolls to the top before continuing to ensure |
| 74 |
// consistent test results. |
| 75 |
window.addEventListener("scroll", handleScroll); |
| 76 |
UIHelper.keyDown(" "); |
| 77 |
} |
| 78 |
|
| 79 |
async function handleFocus() { |
| 80 |
debug("<br>After tab focused:"); |
| 81 |
shouldBeEqualToString('document.getElementById("test").value', expectedValue); |
| 82 |
debug("<br>After dismissing popover by pressing Escape:"); |
| 83 |
UIHelper.keyDown("escape"); |
| 84 |
await UIHelper.waitForPopoverToDismiss(); |
| 85 |
shouldBeEqualToString('document.getElementById("test").value', expectedValue); |
| 86 |
debug("<br>After opening popover by pressing spacebar:"); |
| 87 |
UIHelper.keyDown(" "); |
| 88 |
await UIHelper.waitForPopoverToPresent(); |
| 89 |
shouldBeEqualToString('document.getElementById("test").value', expectedValue); |
| 90 |
UIHelper.keyDown("escape"); |
| 91 |
await UIHelper.waitForPopoverToDismiss(); |
| 92 |
debug("<br>After scrolling the page and pressing spacebar:"); |
| 93 |
window.addEventListener("scroll", testScrollIntoView, { once: true }); |
| 94 |
window.scrollTo(0, document.body.scrollHeight); // Scroll to the bottom of the page. |
| 95 |
} |
| 96 |
let elementToTest = document.getElementById("test"); |
| 97 |
expectedValue = elementToTest.value; |
| 98 |
elementToTest.addEventListener("focus", handleFocus, { once: true }); |
| 99 |
UIHelper.keyDown("\t", ["altKey"]); |
| 100 |
} |
| 101 |
|
| 102 |
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."); |
| 103 |
|
| 104 |
runTest(); |
| 105 |
</script> |
| 106 |
</body> |
| 107 |
</html> |