mousemove-from-iframe-to-top-element.html

<!DOCTYPE html>
<style>
body { margin: 0 }
#top1 { display: block; width: 100%; height: 100px; background-color: green; z-index: 2; position: relative; }
#frame { border: 0; width: 100%; height: 140px; position: relative; top: -2px; z-index: 1; }
</style>
<body onload="runTest()">
<div id="top1">TOP</div>
<iframe id="frame" style="width:100%; height:300px;" srcdoc='
<style>body { margin: 0; } #target { display: block; height: 100px; width: 100%; background-color: yellow; } #target:hover { background-color: red; } </style>
<div id="target">Hover Test</div>'></iframe>
<div id="console"></div>
<script src="../../resources/js-test.js"></script>
<script>
description('Tests that hover is lost from iframe when the mouse is moved from iframe to the element that stacked up on iframe');

var bgColor;
var hoverBgColor;
var events = [];
var targetIds = [];
function runTest() {
    var i = 0;
    var frame = document.getElementById('frame');
    var hoverTarget = frame.contentDocument.getElementById('target');
    hoverTarget.addEventListener('mousemove', appendEventLog);
    hoverTarget.addEventListener('mouseenter', appendEventLog);
    hoverTarget.addEventListener('mouseleave', appendEventLog);
    hoverTarget.addEventListener('mouseout', appendEventLog);

    function appendEventLog(e) {
        events.push(e.type);
        targetIds.push(e.currentTarget.id);
    }

    function verifyEventLog(type, target) {
        shouldBeEqualToString('events[' + i + ']', type);
        shouldBeEqualToString('targetIds[' + i + ']', target);
        debug('');
        i++;
    }

    if (window.eventSender) {
        var style = frame.contentWindow.getComputedStyle(hoverTarget, null);
        var rect = frame.getBoundingClientRect();

        // move mouse to top of div in iframe
        eventSender.mouseMoveTo(rect.left + 2,  rect.top + 2);
        hoverBgColor = style.getPropertyValue('background-color');
        shouldBeEqualToString('hoverBgColor', 'rgb(255, 0, 0)');
        debug('');
        verifyEventLog('mouseenter', 'target');
        verifyEventLog('mousemove', 'target');

        // move mouse to bottom of div stacked up on iframe
        eventSender.mouseMoveTo(rect.left, rect.top) ;
        bgColor = style.getPropertyValue('background-color');
        shouldBeEqualToString('bgColor', 'rgb(255, 255, 0)');
        debug('');
        verifyEventLog('mouseleave', 'target');
        verifyEventLog('mouseout', 'target');
    }
}
</script>
</body>
chromium/third_party/blink/web_tests/fast/events/mousemove-from-iframe-to-top-element.html
