mouse-capture-inside-shadow.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
if (window.testRunner) {
    testRunner.dumpAsText();
    testRunner.waitUntilDone();
}

function log(msg) {
    document.getElementById('console').innerHTML += '<li>' + msg + '</li>';
}

function runTest() {
    var div = document.getElementById('container');

    var plugin = document.createElement('object');
    plugin.type = 'application/x-webkit-test-webplugin';
    // Plugin takes up the full available space inside the ShadowRoot.
    plugin.style.width = '100%';
    plugin.style.height = '100%';

    var shadowRoot = div.attachShadow({mode: 'open'});
    shadowRoot.appendChild(plugin);

    // Start logging once plugin sees a mousedown.
    var startLogging = false;

    plugin.addEventListener('mousedown', function(e) {
        startLogging = true;
        log('plugin.mousedown');
    });
    plugin.addEventListener('mouseup', function(e) {
        if (startLogging)
            log('plugin.mouseup');
    });
    plugin.addEventListener('mousemove', function(e) {
        if (startLogging) {
            log('plugin.mousemove');
            if (window.testRunner)
                testRunner.notifyDone();
        }
    });

    eventSender.mouseMoveTo(20, 20);  // Within the plugin bounds.
    eventSender.mouseDown();
    eventSender.leapForward(100);
    eventSender.mouseMoveTo(220, 120);  // Outside of the plugin bounds.
    eventSender.mouseUp();

}
</script>
</head>
<body onload="runTest()">
  <div id="container" style="width: 200px; height: 100px;"></div>
  <div>This tests that mousedown captures the mouse correctly for a plugin object and continues to send events even if the mouse moves outside of the bounds of the plugin. On a successful run, plugin will see mousedown, followed by a mousemove, followed by a mouseup.</div>
  <ul id="console"><li>Console</li></ul>
</body>
</html>
chromium/third_party/blink/web_tests/plugins/mouse-capture-inside-shadow.html
