<!DOCTYPE HTML>
<html>
<head>
<script src="../../resources/js-test.js"></script>
<script src="resources/common.js"></script>
<script>
description('Tests that changing input type in a cancel button handler works properly.');

window.jsTestIsAsync = true;

var inputElement;
var workProduct = [];

function finish() {
    testPassed("Search event was not triggered.");
    finishJSTest();
}

function handleSearch(e) {
    testFailed("A search event was triggered.");
    finishJSTest();
}

function changeType(e) {
    inputElement["type"] = "image"
    setTimeout(function() {
        finish();
    }, 0);
}

function clickCancel() {
    var cancelButtonPosition = searchCancelButtonPosition(inputElement);

    eventSender.mouseMoveTo(cancelButtonPosition.x, cancelButtonPosition.y);
    eventSender.mouseDown();
    eventSender.mouseUp();
}

function runTest() {
    if (!window.testRunner) {
        testRunner.dumpAsText(true);
        testRunner.waitUntilDone();
    }

    inputElement = document.getElementById("target");

    inputElement.addEventListener("input", changeType);

    setTimeout(function() {
        clickCancel();
    }, 0);
}
</script>
</head>
<body onload="runTest()">
    <input id="target" type="search" onSearch="handleSearch();" value="Click the cancel button."></input>
</body>
</html>