<!DOCTYPE html>
<html>
<body>
<script src="../../resources/js-test.js"></script>
<script src="form-validation.js"></script>
<form>
  <button id="button">Submit</button>
  <div style="height:800px; background:red"></div>
  <input type=text required>
</form>
<script>
description("Tests that the validation bubble is shown even if the invalid field needs to be scrolled into view.");
jsTestIsAsync = true;

onload = function() {
    button.click();

    requestAnimationFrame(() => {
        setTimeout(() => {
            getValidationMessage().then((_message) => {
                if (_message !== "Fill out this field")
                    testFailed("Unexpected message: " + _message);

                // Make sure the message stays visible.
                setTimeout(() => {
                    getValidationMessage().then((_message) => {
                        message = _message;
                        shouldBeEqualToString("message", "Fill out this field");
                        finishJSTest();
                    });
                }, 10);
            });
        });
    });
}
</script>
</body>
</html>
