reportValidity-cancel.html | Explore in Territory

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../resources/js-test.js"></script>
</head>
<body>
<p id="description"></p>
<div id="console"></div>
<script>
function $(id) { return document.getElementById(id); }
function focusOn(id) {
    $(id).focus();
}

description('Tests for reportValidity() with invalid event canceling');

var parent = document.createElement('div');
document.body.appendChild(parent);
parent.innerHTML = '<form><input id=input-unset name=i required><input id=input2></form>';
var form = parent.firstChild;
var input = form.firstChild;

debug('"invalid" event is not canceled.');
var invalidFired  = false;
var nothingListener = {};
nothingListener.handleEvent = function(event) {
    invalidFired = true;
};
focusOn('input2');
shouldBeTrue('input.addEventListener("invalid", nothingListener, false); !input.reportValidity() && invalidFired');
shouldBe('document.activeElement', '$("input-unset")');
focusOn('input2');
shouldBeTrue('invalidFired = false; !form.reportValidity() && invalidFired');
shouldBe('document.activeElement', '$("input-unset")');
input.removeEventListener('invalid', nothingListener, false);

debug('');
debug('"invalid" event is canceled.');
invalidFired = false;
var cancelListener = {};
cancelListener.handleEvent = function(event) {
    invalidFired = true;
    event.preventDefault();
};
// Even if 'invalid' is canceled, the input.reportValidity() result is still false.
focusOn('input2');
shouldBeTrue('input.addEventListener("invalid", cancelListener, false); !input.reportValidity() && invalidFired');
shouldNotBe('document.activeElement', '$("input-unset")');
// form.reportValidity() also should be false.
shouldBeTrue('invalidFired = false; !form.reportValidity() && invalidFired');
shouldNotBe('document.activeElement', '$("input-unset")');
</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/forms/reportValidity-cancel.html
