<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body onload="startTests()">

<form action="input-image-submit.html" method=GET id=form>
<input type=hidden name=state id=state value=step1>
<input type=image name=image id=image src=resources/apple.gif value=value>
</form>

<div id="console"></div>
<script>
function notifyDone() {
    if (window.testRunner)
        testRunner.notifyDone();
}

function failAndDone(message) {
    testFailed(message);
    notifyDone();
}

function handleSubmit() {
    if (state.value == 'to-text-on-submit') {
        image.type = 'text';
    } else if (state.value == 'to-image-on-submit') {
        image.type = 'image';
    } else if (state.value == 'remove-input-on-submit') {
        image.parentNode.removeChild(image);
        image = null;
        // Try to clear the reference count of the element.
        gc();
    }
}

function handleClick() {
    if (state.value == 'to-image-on-click') {
        image.type = 'image'
    }
}

if (window.testRunner)
    testRunner.waitUntilDone();

var state = document.getElementById('state');
var image = document.getElementById('image');
image.addEventListener('click', handleClick, false);
var form = document.getElementById('form');
form.addEventListener('submit', handleSubmit, false);

function startTests() {
    var x = image.offsetLeft + 7;
    var y = image.offsetTop + 11;
    var clickEvent = document.createEvent('MouseEvent');
    clickEvent.initMouseEvent('click', true, false, document.defaultView, 1, x, y, x, y, false, false, false, false, 0, document);
    var enterEvent = document.createEvent('TextEvent');
    enterEvent.initTextEvent("textInput", true, true, document.defaultView, "\n");
    var query = window.location.search;

    if (query.indexOf('state=') == -1) {
        // Step 1: Normal submission with type=image
        state.value = 'normal';
        image.dispatchEvent(clickEvent);
    } else if (query.indexOf('state=normal') != -1) {
        // Should have image.x=7&image.y=11&image=value.
        if (query.indexOf('image.x=7&image.y=11&image=value') == -1) {
            failAndDone('Normal submission failed: ' + query);
            return;
        }

        // Step 2: Change the type to text on 'submit' event
        state.value = 'to-text-on-submit';
        image.dispatchEvent(clickEvent);
    } else if (query.indexOf('state=to-text-on-submit') != -1) {
        // Should have only image=value.
        if (query.indexOf('image=value') == -1) {
            failAndDone('Changing to text on submit failed: ' + query);
            return;
        }

        // Step 3: Change the type to image on 'submit' event
        state.value = 'to-image-on-submit';
        image.type = 'text';
        image.focus();
        image.dispatchEvent(enterEvent);
    } else if (query.indexOf('state=to-image-on-submit') != -1) {
        // Should have image.x and image.y, but their values are 0.
        if (query.indexOf('image.x=0&image.y=0&image=value') == -1) {
            failAndDone('Changing to image on submit failed: ' + query);
            return;
        }

        // Step 4: Change the type to image on 'click' event
        state.value = 'to-image-on-click';
        image.type = 'text';
        image.dispatchEvent(clickEvent);
    } else if (query.indexOf('state=to-image-on-click') != -1) {
        // Same as the normal submission.
        if (query.indexOf('image.x=7&image.y=11&image=value') == -1) {
            failAndDone('Changing to image on click failed: ' + query);
            return;
        }

        // Step 5: Removed the image button on 'submit' event
        state.value = 'remove-input-on-submit';
        image.dispatchEvent(clickEvent);
    } else if (query.indexOf('state=remove-input-on-submit') != -1) {
        // Should have nothing about image.
        if (query.indexOf('image.x=') != -1 || query.indexOf('image=value') != -1)
            testFailed('Removing the input on submit failed: ' + query);
        else
            testPassed('All tests passed.');
        notifyDone();
    }
}
</script>
</body>
</html>