<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test.js"></script>
</head>
<body>
<form method="GET" target="target" id="form">
      <input name="query" value="AAA" pattern="banana|cherry" onfocus="onFocus(event)"/>
      <input type="submit" id="submitButton"/>
</form>
<iframe id="target" name="target"></iframe>
<script>
description('Test that form.submit() when called on "focus" event for invalid form should submit the form');

function onFocus(event) {
    var form = document.getElementById('form');
    form.action = '#foo';
    form.submit();
}

document.getElementById('target').onload = function(event) {
    // This should return back query AAA
    var query = event.target.contentWindow.location.search;
    if (query === '?query=AAA') {
        testPassed('Form is successfully submitted and content is loaded in the frame');
        finishJSTest();
    }
}

window.onload = function() {
    document.getElementById('submitButton').click();
}

if (window.testRunner)
    window.jsTestIsAsync = true;
</script>
</body>
</html>