<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test.js"></script>
<script>
    function deleteChar(target) {
        target.focus();
        target.setSelectionRange(7, 7);
        if (window.testRunner) {
            eventSender.keyDown("Backspace", []);
        }
        target.blur();
    }

    function validate(evt) {
        var node = evt.target;
        var cloneNode =  node.cloneNode();
        var result = node.validity.tooLong == cloneNode.validity.tooLong;
        log(result, node.nodeName.toLowerCase());
    }

    function log(msg, consoleName) {
        var console = document.getElementById(consoleName + "Console" );
        console.innerHTML = console.innerHTML + msg + "<br>";
    }

    function startTest() {
        deleteChar(document.getElementById("input"));
        deleteChar(document.getElementById("textarea"));
        if (window.testRunner)
            testRunner.notifyDone();
    }

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

</script>
</head>
<body onload="startTest()">

<input type="text" id="input" maxlength=4 value="sampletext" onchange="validate(event)"/>
<div id="inputConsole">Input : validity.tooLong is equal for node and cloned node=</div>

<textarea id="textarea" maxlength=4 onchange="validate(event)">sampletext</textarea>
<div id="textareaConsole">Textarea: validity.tooLong is equal for node and cloned node=</div>

</body>
</html>