<!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] -->

<html>

<head>
    <script src="../../../resources/js-test-pre.js"></script>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <script id="ui-script" type="text/plain">
        (function() {
            uiController.didShowKeyboardCallback = function() {
                uiController.typeCharacterUsingHardwareKeyboard(" ", function() {
                    uiController.uiScriptComplete();
                });
            }
            uiController.singleTapAtPoint(100, 100, function() {});
        })();
    </script>

    <script>
        var progress = 0;

        if (window.testRunner) {
            testRunner.dumpAsText();
            testRunner.waitUntilDone();
            internals.settings.setInputEventsEnabled(true);
        }

        function incrementProgress()
        {
            progress++;
            if (progress == 2)
                testRunner.notifyDone();
        }

        function getUIScript()
        {
            return document.getElementById("ui-script").text;
        }

        function runTest()
        {
            if (!window.testRunner || !testRunner.runUIScript)
                return;

            testRunner.runUIScript(getUIScript(), function(result) {
                incrementProgress();
            });
        }

        function yesno(b) { return b ? "YES" : "NO"; }

        function handleInput(event)
        {
            debug("Does the event have an inputType method? " + yesno(event.__lookupGetter__("inputType")));
            debug("Does the event have InputEvent's prototype? " + yesno(Object.getPrototypeOf(event) === InputEvent.prototype));
            debug("What is the event's id? " + event.target.id);
            debug("Does the event bubble? " + yesno(event.bubbles));
            debug("Is the event cancelable? " + yesno(event.cancelable));
            debug("Is the event composed? " + yesno(event.composed));
            incrementProgress();
        }
    </script>
    <style>
    #editable {
        width: 100vw;
        height: 100vh;
    }
    </style>
</head>

<body style="margin: 0;" onload=runTest()>
    <div contenteditable id="editable" oninput=handleInput(event)>
    <div id="console"></div>
    <script src="../../../resources/js-test-post.js"></script>
</body>

</html>