<!DOCTYPE html>
<html>
<body>
<script src="../../resources/js-test-pre.js"></script>
<form>
  Required text input: <input type="text" required><input id="required_text_input_submit" type="submit">
</form>
<form>
  Required checkbox input: <input type="checkbox" required><input id="required_checkbox_submit" type="submit">
</form>
<form>
  Required radio input: <input type="radio" name="myradiogroup1" required><br>
  Required radio input: <input type="radio" name="myradiogroup1">
  <input id="required_radio_submit" type="submit">
</form>
<form>
  Required file input: <input type="file" required><input id="required_file_submit" type="submit">
</form>
<form>
  Required email input: <input type="email" value="invalid" required><input id="required_email_submit" type="submit">
</form>
<form>
  Required url input: <input type="url" value="invalid" required><input id="required_url_submit" type="submit">
</form>
<form>
  Required input with pattern: <input type="text" value="1" pattern="[a-z]" required><input id="input_with_pattern_submit" type="submit">
</form>
<form>
  Required input with minlength=100: <input type="text" minlength=100 id="field_with_minlength" required><input id="input_with_minlength_submit" type="submit">
</form>
<form>
  Required range with min=5: <input type="number" value="1" min=5 required><input id="range_with_min_submit" type="submit">
</form>
<form>
  Required range with max=5: <input type="number" value="10" max=5 required><input id="range_with_max_submit" type="submit">
</form>
<form>
  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">
</form>
<div id="description"></div>
<div id="console"></div>
<script>
description("Tests the HTML form validation messages being shown on UI side.");
jsTestIsAsync = true;

function getValidationBubbleContents()
{
    return `
    (function() {
        uiController.uiScriptComplete(JSON.stringify(uiController.contentsOfUserInterfaceItem('validationBubble')));
    })();`
}

var tests = [
    ['required_text_input_submit', 'Fill out this field'],
    ['required_checkbox_submit', 'Select this checkbox'],
    ['required_radio_submit', 'Select one of these options'],
    ['required_file_submit', 'Select a file'],
    ['required_email_submit', 'Enter an email address'],
    ['required_url_submit', 'Enter a URL'],
    ['input_with_pattern_submit', 'Match the requested format'],
    ['input_with_minlength_submit', 'Use at least 100 characters'],
    ['range_with_min_submit', 'Value must be greater than or equal to 5'],
    ['range_with_max_submit', 'Value must be less than or equal to 5'],
    ['range_with_step_submit', 'Enter a valid value'],
];
var currentTestIndex = -1;

function runNextTest()
{
    ++currentTestIndex;
    if (currentTestIndex >= tests.length) {
        finishJSTest();
        return;
    }

    var currentTest = tests[currentTestIndex];
    var submitButton = document.getElementById(currentTest[0]);
    expectedMessage = currentTest[1];

    submitButton.click();
    testRunner.runUIScript(getValidationBubbleContents(), function(result) {
        validationBubbleContents = JSON.parse(result).validationBubble;
        shouldBeEqualToString("validationBubbleContents.message", "" + expectedMessage);
        runNextTest();
    });
}

function setup()
{
    var field = document.getElementById("field_with_minlength");
    field.focus();
    eventSender.keyDown("Z");
}

onload = function() {
    setup();
    setTimeout(function() {
        runNextTest();
    }, 0);
}
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
<html>