<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>
<p id="description"></p>
<div id="console"></div>
<form id=f action="interactive-validation-cancel.html">
<input type=hidden name=submitted value="true">
<input name=i0 required id="i0">
<input type=submit id="s">
</form>
<script>
description('Test if the form is not submitted even if an "invalid" event for a control is canceled.');

function cancel(event) {
    event.preventDefault();
}

function startOrVerify() {
    var query = window.location.search;
    if (query.indexOf('submitted=true') != -1) {
        testFailed('The form should not be submitted.');
        shouldBeTrue('location.search.indexOf("i0=") != -1');
    } else {
        document.getElementById('i0').addEventListener('invalid', cancel, false);
        // HTMLFormElement::submit() skips validation. Use the submit button.
        document.getElementById('s').click();
        testPassed('The form was not submitted.');
    }
    debug('TEST COMPLETE');
    if (window.testRunner)
        testRunner.notifyDone();
}

if (window.testRunner)
    testRunner.waitUntilDone();
window.onload = startOrVerify;
</script>
</body>
</html>