gesture-tap-mouse-events-between-frames.html

<!DOCTYPE HTML>
<script src="../../../../resources/js-test.js"></script>
<script src="../../resources/record-events.js"></script>
<style>
body { margin: 0px; }
#spacer { height: 40px; }
div.box { padding: 40px; }
#yellow { background-color: yellow; }
#console { padding: 0px; }
iframe { margin: 0px; border: 0px; width: 100%; height: 320px; }
</style>
<div id="spacer"></div>
<div class="box" id="yellow"><iframe src='resources/gesture-tap-mouse-events-between-frames-iframe1.html' id='frameA'></iframe></div>
<div id="console"></div>
<script>
description("Verifies that mouse events are fired on tapping of gesture across frames in the correct order.");
var frameA, frameB, frameC, frameD, frameE;

var yellowEnterOrder = [
    ["yellow", "mouseover"],
    ["yellow", "mouseenter"],
    ["greenyellow", "mouseover"],
    ["greenyellow", "mouseenter"]];

var greenEnterOrder = [
    ["limegreen", "mouseover"],
    ["limegreen", "mouseenter"],
    ["green", "mouseover"],
    ["green", "mouseenter"]];
 
var greenLeaveOrder = [
    ["green", "mouseout"],
    ["green", "mouseleave"],
    ["limegreen", "mouseout"],
    ["limegreen", "mouseleave"],
    ["greenyellow", "mouseout"],
    ["greenyellow", "mouseover"]];

var pinkEnterOrder = [
    ["pink", "mouseover"],
    ["pink", "mouseenter"],
    ["hotpink", "mouseover"],
    ["hotpink", "mouseenter"]];

var pinkLeaveOrder = [
    ["hotpink", "mouseout"],
    ["hotpink", "mouseleave"],
    ["pink", "mouseout"],
    ["pink", "mouseleave"],
    ["greenyellow", "mouseout"],
    ["greenyellow", "mouseover"]];

function getElementById(obj)
{
    if (obj.frame)
        return obj.frame.contentDocument.getElementById(obj.id);
    return document.getElementById(obj.id);
}

function init() {
    frameA = document.getElementById("frameA");
    frameB = frameA.contentDocument.getElementById("frameB");
    frameC = frameB.contentDocument.getElementById("frameC");
    frameD = frameA.contentDocument.getElementById("frameD");
    frameE = frameD.contentDocument.getElementById("frameE");

    var ids = [
    { id : "yellow" },
    { id : "greenyellow", frame : frameA },
    { id : "limegreen", frame: frameB },
    { id : "green", frame: frameC },
    { id : "pink", frame: frameD },
    { id : "hotpink", frame: frameE }];

    var elements = [];
    ids.forEach(function(id) {
        var element = getElementById(id);
        elements.push(element);
    });
    registerElementsAndEventsToRecord(elements, ["mouseover", "mouseout", "mouseenter", "mouseleave"]);
}

function doGesture(obj, base)
{
    debug("-- sending gestureTap to " + obj.id + " --");
    var element = getElementById( { id : obj.id, frame : obj.frame });

    var x = base.x + element.offsetLeft + element.offsetWidth / 2;
    var y = base.y + element.offsetTop + element.offsetHeight / 2;
    eventSender.gestureTap(x, y);
}

function runTests()
{
    init();
    if (window.eventSender) {
        debug("--- Tap tests ---");
 
        var expectedOrder = [];
        beginRecordingEvents();

        var greenX = frameA.offsetLeft + frameB.offsetLeft  + frameC.offsetLeft;;
        var greenY = frameA.offsetTop + frameB.offsetTop + frameC.offsetTop;;

        doGesture({id: "green", frame: frameC}, {x: greenX, y: greenY});
        expectedOrder = expectedOrder.concat(yellowEnterOrder, greenEnterOrder);
        checkThatEventsFiredInOrder(expectedOrder);

        doGesture({id: "green", frame: frameC}, {x: greenX, y: greenY});
        debug("There should not be any mouse event.");
        checkThatEventsFiredInOrder(expectedOrder);

        var pinkX = frameA.offsetLeft + frameD.offsetLeft  + frameE.offsetLeft;;
        var pinkY = frameA.offsetTop + frameD.offsetTop + frameE.offsetTop;;
        doGesture({id: "hotpink", frame: frameE }, {x: pinkX, y: pinkY});
        expectedOrder = expectedOrder.concat(greenLeaveOrder, pinkEnterOrder);
        checkThatEventsFiredInOrder(expectedOrder);

        doGesture({id: "hotpink", frame: frameE }, {x: pinkX, y: pinkY});
        debug("There should not be any mouse event.");
        checkThatEventsFiredInOrder(expectedOrder);

        doGesture({id: "green", frame: frameC}, {x: greenX, y: greenY});
        expectedOrder = expectedOrder.concat(pinkLeaveOrder, greenEnterOrder);
        checkThatEventsFiredInOrder(expectedOrder);
        endRecordingEvents();
    } else {
        debug("This test requires eventSender");
    }
    finishJSTest();
}

if (window.testRunner) {
    window.jsTestIsAsync = true;
    testRunner.waitUntilDone();
}

window.onload = runTests;
</script>
chromium/third_party/blink/web_tests/fast/events/touch/gesture/gesture-tap-mouse-events-between-frames.html
