blob: 441f5e15e3aa62296b12c1e49d4bc9a06d6fd56a [file] [log] [blame]
<!DOCTYPE html>
<html>
<body>
<script src="../../resources/js-test-pre.js"></script>
<form>
Required text input: <input type="text" id="required_text_input" required><input id="required_text_input_submit" type="submit">
</form>
<div id="description"></div>
<div id="console"></div>
<script>
description("Tests that the custom validation message set by JavaScript is displayed on UI side.");
jsTestIsAsync = true;
function getValidationBubbleContents()
{
return `
(function() {
return JSON.stringify(uiController.contentsOfUserInterfaceItem('validationBubble'));
})();`
}
onload = function() {
input = document.getElementById("required_text_input");
input.setCustomValidity("This is a custom validity message.");
submit = document.getElementById("required_text_input_submit");
submit.click();
testRunner.runUIScript(getValidationBubbleContents(), function(result) {
validationBubbleContents = JSON.parse(result).validationBubble;
shouldBeEqualToString("validationBubbleContents.message", "This is a custom validity message.");
// Reset the validity message to the default one.
input.setCustomValidity("");
submit.click();
testRunner.runUIScript(getValidationBubbleContents(), function(result) {
validationBubbleContents = JSON.parse(result).validationBubble;
shouldBeEqualToString("validationBubbleContents.message", "Fill out this field");
finishJSTest();
});
});
}
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
<html>