<!DOCTYPE html>
<html>
<body>
<form><input></form>
<div id="editor" contenteditable>world</div>
<div id="console"></div>
<script src="../../resources/js-test-pre.js"></script>
<script>

var eventType;
var composed;

function logEvent(event) {
    eventType = event.type;
    composed = event.composed;
}

function checkFlags(code, expected) {
    shouldBeEqualToString(code ? code + '; eventType' : 'eventType', expected.eventType);
    shouldBe('composed', expected.composed.toString());
    debug('');
}

var lastTarget;
var lastEventName;
function log(target, eventName) {
    eventType = undefined;
    composed = undefined;
    if (lastTarget)
        lastTarget.removeEventListener(lastEventName, logEvent);
    target.addEventListener(eventName, logEvent);
    lastTarget = target;
    lastEventName = eventName;
}

var input = document.querySelector('input');
var form = document.querySelector('form');
form.tabIndex = 0;

checkFlags('input.type = "radio"; log(input, "change"); input.click()', {eventType: 'change', composed: false});
checkFlags('log(form, "reset"); form.reset()', {eventType: 'reset', composed: false});

checkFlags('form.focus(); log(input, "focus"); input.focus()', {eventType: 'focus', composed: true});
checkFlags('log(input, "blur"); form.focus()', {eventType: 'blur', composed: true});

if (!window.eventSender)
    testFailed('This test requires eventSender');
else {
    testRunner.waitUntilDone();

    eventSender.dragMode = false;

    var x = input.offsetLeft + input.offsetWidth / 2;
    var y = input.offsetTop + input.offsetHeight / 2;

    checkFlags('input.type = "text"; log(input, "mousemove"); eventSender.mouseMoveTo(x, y)', {eventType: 'mousemove', composed: true});
    checkFlags('log(input, "mousedown"); eventSender.mouseDown()', {eventType: 'mousedown', composed: true});
    checkFlags('log(input, "mouseup"); eventSender.mouseUp()', {eventType: 'mouseup', composed: true});
    checkFlags('log(input, "mouseout"); eventSender.mouseMoveTo(0, 0)', {eventType: 'mouseout', composed: true});
    checkFlags('log(input, "mouseover"); eventSender.mouseMoveTo(x, y)', {eventType: 'mouseover', composed: true});

    evalAndLog('input.value = "hello"; eventSender.mouseMoveTo(input.offsetLeft + 1, y); eventSender.mouseDown();');
    checkFlags('log(input, "select"); eventSender.mouseMoveTo(input.offsetLeft + input.offsetWidth - 2, y); eventSender.mouseUp()',
        {eventType: 'select', composed: false});

    var editableElement = document.getElementById('editor');
    y = editableElement.offsetTop + editableElement.offsetHeight / 2;
    checkFlags('log(editableElement, "selectstart"); eventSender.mouseMoveTo(editableElement.offsetLeft + 1, y); eventSender.mouseDown()',
        {eventType: 'selectstart', composed: false});
}

function testLoadEvent() {
    var scriptThatLoads = document.createElement('script');
    scriptThatLoads.src = "resources/event-path-test-helpers.js";
    scriptThatLoads.onload = function (event) {
        logEvent(event);
        checkFlags('', {eventType: 'load', composed: false});
        testErrorEvent();
    }
    document.body.appendChild(scriptThatLoads);
}

function testErrorEvent() {
    var scriptThatFailsToLoad = document.createElement('script');
    scriptThatFailsToLoad.src = "bad.js";
    scriptThatFailsToLoad.onerror = function (event) {
        logEvent(event);
        checkFlags('', {eventType: 'error', composed: false});
        testScrollEvent();
    }
    document.body.appendChild(scriptThatFailsToLoad);
}

function testScrollEvent() {
    document.body.style.marginBottom = '1000px';
    log(window, 'scroll');
    setTimeout(function () {
        window.scrollTo(0, 1000);
        requestAnimationFrame(() => {
            setTimeout(function () {
                checkFlags('', {eventType: 'scroll', composed: false});
                window.scrollTo(0, 0);
                testResizeEvent();
            }, 0);
        });
    }, 0);
}

function testResizeEvent() {
    var iframe = document.createElement('iframe');
    iframe.style.width = '100px';
    iframe.style.height = '100px';

    iframe.onload = function () {
        requestAnimationFrame(function () {
            setTimeout(function () {
                iframe.contentDocument.body.getBoundingClientRect();
                log(iframe.contentWindow, "resize");
                iframe.style.width = '200px';
                iframe.style.height = '200px';
                iframe.contentDocument.body.getBoundingClientRect();
                requestAnimationFrame(function () {
                    checkFlags('', {eventType: 'resize', composed: false});
                    finishJSTest();
                });
            }, 0);
        });
    }

    document.body.appendChild(iframe);
}

testLoadEvent();

// FIXME: Test abort and loadedmetadata events.

jsTestIsAsync = true;

</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>