| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/js-test.js"></script> |
| <Script src="../../resources/ui-helper.js"></Script> |
| <script> |
| window.jsTestIsAsync = true; |
| |
| let input; |
| let numberOfCharactersToOverflowFieldWhenCapsLockShown; |
| |
| let tests = [ |
| // Test for caret selection |
| // Empty field |
| testFocusedEmptyFieldIsNotScrolled, |
| testFieldDidNotScrollAfterCapsLockEnabled, |
| testFieldDidNotScrollAfterCapsLockDisabled, |
| |
| // Non-empty field |
| testFieldDidNotScrollAfterTyping, |
| testFieldDidScrollAfterCapsLockEnabled, |
| testFieldDidScrollAfterCapsLockDisabled, |
| |
| // Test for range selection |
| // Select the first few characters |
| testFieldDidNotScrollAfterSelectingPrefix, |
| testFieldDidNotScrollAfterCapsLockEnabled, |
| testFieldDidNotScrollAfterCapsLockDisabled, |
| |
| // Select the last few characters |
| testFieldDidNotScrollAfterSelectingSuffix, |
| testFieldDidScrollAfterCapsLockEnabled, |
| testFieldDidScrollAfterCapsLockDisabled, |
| ]; |
| |
| let currentTest = 0; |
| |
| function runNextTest() |
| { |
| if (currentTest >= tests.length) { |
| done(); |
| return; |
| } |
| tests[currentTest++](); |
| } |
| |
| function runTest() |
| { |
| runNextTest(); |
| } |
| |
| function testFocusedEmptyFieldIsNotScrolled() |
| { |
| debug("Case 1: Empty field:"); |
| function handleFocus() { |
| shouldBeZero("document.getElementById('input').scrollLeft"); |
| runNextTest(); |
| } |
| input.addEventListener("focus", handleFocus, { once: true }); |
| if (window.testRunner) |
| UIHelper.activateElement(input); |
| else |
| input.focus(); |
| } |
| |
| function testFieldDidNotScrollAfterTyping() |
| { |
| function checkFieldFilled(event) { |
| console.assert(event.target === input); |
| if (input.value.length < numberOfCharactersToOverflowFieldWhenCapsLockShown) |
| return; |
| input.oninput = null; |
| shouldBeZero("document.getElementById('input').scrollLeft"); |
| runNextTest(); |
| } |
| input.oninput = checkFieldFilled; |
| |
| debug("<br>Case 2: After typing into field:"); |
| if (window.testRunner) { |
| for (let i = 0; i < numberOfCharactersToOverflowFieldWhenCapsLockShown; ++i) |
| UIHelper.keyDown("a"); |
| } |
| } |
| |
| function _toggleCapsLockWithCallbackAndRunNextTest(expectCapsLockEnabled, callback) |
| { |
| if (window.internals) |
| console.assert(internals.capsLockIsOn() != expectCapsLockEnabled); |
| let newCapsLockStateDisplayName; |
| let eventToListenFor; |
| if (expectCapsLockEnabled) { |
| newCapsLockStateDisplayName = "enabled"; |
| eventToListenFor = "keydown"; |
| } else { |
| newCapsLockStateDisplayName = "disabled"; |
| eventToListenFor = "keyup"; |
| } |
| |
| let oldValue = document.getElementById("input").scrollLeft; |
| function handleCapsLockChange(event) { |
| console.assert(event.key === "CapsLock"); |
| callback(oldValue, document.getElementById("input").scrollLeft); |
| runNextTest(); |
| } |
| input.addEventListener(eventToListenFor, handleCapsLockChange, { once: true }); |
| debug(`<br>After caps lock ${newCapsLockStateDisplayName}:`); |
| if (window.testRunner) |
| UIHelper.toggleCapsLock(); |
| } |
| |
| function testFieldDidScrollAfterCapsLockEnabled() |
| { |
| _toggleCapsLockWithCallbackAndRunNextTest(true, (oldValue, newValue) => { |
| console.assert(oldValue != newValue); |
| shouldBeNonZero("document.getElementById('input').scrollLeft"); |
| }); |
| } |
| |
| function testFieldDidScrollAfterCapsLockDisabled() |
| { |
| _toggleCapsLockWithCallbackAndRunNextTest(false, (oldValue, newValue) => { |
| console.assert(oldValue != newValue); |
| shouldBeZero("document.getElementById('input').scrollLeft"); |
| }); |
| } |
| |
| function testFieldDidNotScrollAfterCapsLockEnabled() |
| { |
| _toggleCapsLockWithCallbackAndRunNextTest(true, (oldValue, newValue) => { |
| console.assert(oldValue == newValue); |
| shouldBeZero("document.getElementById('input').scrollLeft"); |
| }); |
| } |
| |
| function testFieldDidNotScrollAfterCapsLockDisabled() |
| { |
| _toggleCapsLockWithCallbackAndRunNextTest(false, (oldValue, newValue) => { |
| console.assert(oldValue == newValue); |
| shouldBeZero("document.getElementById('input').scrollLeft"); |
| }); |
| } |
| |
| function testFieldDidNotScrollAfterSelectingPrefix() |
| { |
| let prefixLength = Math.floor(numberOfCharactersToOverflowFieldWhenCapsLockShown / 2); |
| debug(`<br>Case 3: After selecting the first ${prefixLength} characters:`); |
| input.setSelectionRange(0, prefixLength); |
| shouldBeZero("document.getElementById('input').scrollLeft"); |
| runNextTest(); |
| } |
| |
| function testFieldDidNotScrollAfterSelectingSuffix() |
| { |
| let suffixLength = Math.floor(numberOfCharactersToOverflowFieldWhenCapsLockShown / 2); |
| debug(`<br>Case 4: After selecting the last ${suffixLength} characters:`); |
| input.setSelectionRange(input.value.length - suffixLength, input.value.length); |
| shouldBeZero("document.getElementById('input').scrollLeft"); |
| runNextTest(); |
| } |
| |
| function done() |
| { |
| if (window.testRunner) |
| document.body.removeChild(document.getElementById("input")); |
| finishJSTest(); |
| } |
| </script> |
| </head> |
| <body onload="runTest()"> |
| <input type="password" id="input" size="5"> |
| <script> |
| input = document.getElementById("input"); |
| console.assert(input.hasAttribute("size")); |
| numberOfCharactersToOverflowFieldWhenCapsLockShown = input.size; |
| |
| // FIXME: Find a way to compute the maximum number of visible characters the field can hold |
| // in a way that allows for running this test by hand. |
| let mayBeIOS = window.TouchEvent != undefined; |
| if (mayBeIOS) { |
| // The look of the password field on iOS gives less space to the value than on Mac. |
| --numberOfCharactersToOverflowFieldWhenCapsLockShown; |
| } |
| console.assert(numberOfCharactersToOverflowFieldWhenCapsLockShown >= 3); |
| |
| description("Tests that the password field is scrolled when the caps lock indicator is toggled."); |
| </script> |
| </body> |
| </html> |
