|
| 1 | +<!DOCTYPE html> |
| 2 | +<html> |
| 3 | +<body> |
| 4 | +<script src="../../resources/js-test-pre.js"></script> |
| 5 | +<form> |
| 6 | + Required text input: <input type="text" required><input id="required_text_input_submit" type="submit"> |
| 7 | +</form> |
| 8 | +<form> |
| 9 | + Required checkbox input: <input type="checkbox" required><input id="required_checkbox_submit" type="submit"> |
| 10 | +</form> |
| 11 | +<form> |
| 12 | + Required radio input: <input type="radio" name="myradiogroup1" required><br> |
| 13 | + Required radio input: <input type="radio" name="myradiogroup1"> |
| 14 | + <input id="required_radio_submit" type="submit"> |
| 15 | +</form> |
| 16 | +<form> |
| 17 | + Required file input: <input type="file" required><input id="required_file_submit" type="submit"> |
| 18 | +</form> |
| 19 | +<form> |
| 20 | + Required email input: <input type="email" value="invalid" required><input id="required_email_submit" type="submit"> |
| 21 | +</form> |
| 22 | +<form> |
| 23 | + Required url input: <input type="url" value="invalid" required><input id="required_url_submit" type="submit"> |
| 24 | +</form> |
| 25 | +<form> |
| 26 | + Required input with pattern: <input type="text" value="1" pattern="[a-z]" required><input id="input_with_pattern_submit" type="submit"> |
| 27 | +</form> |
| 28 | +<form> |
| 29 | + Required input with minlength=100: <input type="text" minlength=100 id="field_with_minlength" required><input id="input_with_minlength_submit" type="submit"> |
| 30 | +</form> |
| 31 | +<form> |
| 32 | + Required range with min=5: <input type="number" value="1" min=5 required><input id="range_with_min_submit" type="submit"> |
| 33 | +</form> |
| 34 | +<form> |
| 35 | + Required range with max=5: <input type="number" value="10" max=5 required><input id="range_with_max_submit" type="submit"> |
| 36 | +</form> |
| 37 | +<form> |
| 38 | + Required range with step=3 / min=0: <input type="number" value="10" min=0 step=3 required><input id="range_with_step_submit" type="submit"> |
| 39 | +</form> |
| 40 | +<script> |
| 41 | +description("Tests the HTML form validation messages being shown on UI side."); |
| 42 | +jsTestIsAsync = true; |
| 43 | + |
| 44 | +function getValidationBubbleContents() |
| 45 | +{ |
| 46 | + return ` |
| 47 | + (function() { |
| 48 | + uiController.uiScriptComplete(JSON.stringify(uiController.contentsOfUserInterfaceItem('validationBubble'))); |
| 49 | + })();` |
| 50 | +} |
| 51 | + |
| 52 | +var tests = [ |
| 53 | + ['required_text_input_submit', 'Please fill out this field.'], |
| 54 | + ['required_checkbox_submit', 'Please check this box if you want to proceed.'], |
| 55 | + ['required_radio_submit', 'Please select one of these options.'], |
| 56 | + ['required_file_submit', 'Please select a file.'], |
| 57 | + ['required_email_submit', 'Please enter an email address.'], |
| 58 | + ['required_url_submit', 'Please enter a URL.'], |
| 59 | + ['input_with_pattern_submit', 'Please match the requested format.'], |
| 60 | + ['input_with_minlength_submit', 'Please use at least 100 characters.'], |
| 61 | + ['range_with_min_submit', 'Value must be greater than or equal to 5.'], |
| 62 | + ['range_with_max_submit', 'Value must be less than or equal to 5.'], |
| 63 | + ['range_with_step_submit', 'Please enter a valid value.'], |
| 64 | +]; |
| 65 | +var currentTestIndex = -1; |
| 66 | + |
| 67 | +function runNextTest() |
| 68 | +{ |
| 69 | + ++currentTestIndex; |
| 70 | + if (currentTestIndex >= tests.length) { |
| 71 | + finishJSTest(); |
| 72 | + return; |
| 73 | + } |
| 74 | + |
| 75 | + var currentTest = tests[currentTestIndex]; |
| 76 | + var submitButton = document.getElementById(currentTest[0]); |
| 77 | + expectedMessage = currentTest[1]; |
| 78 | + |
| 79 | + submitButton.click(); |
| 80 | + testRunner.runUIScript(getValidationBubbleContents(), function(result) { |
| 81 | + validationBubbleContents = JSON.parse(result).validationBubble; |
| 82 | + shouldBeEqualToString("validationBubbleContents.message", "" + expectedMessage); |
| 83 | + runNextTest(); |
| 84 | + }); |
| 85 | +} |
| 86 | + |
| 87 | +function setup() |
| 88 | +{ |
| 89 | + var field = document.getElementById("field_with_minlength"); |
| 90 | + field.focus(); |
| 91 | + eventSender.keyDown("Z"); |
| 92 | +} |
| 93 | + |
| 94 | +onload = function() { |
| 95 | + setup(); |
| 96 | + setTimeout(function() { |
| 97 | + runNextTest(); |
| 98 | + }, 0); |
| 99 | +} |
| 100 | +</script> |
| 101 | +<script src="../../resources/js-test-post.js"></script> |
| 102 | +</body> |
| 103 | +<html> |
0 commit comments