third_party/WebKit/LayoutTests/plugins/mouse-capture-inside-shadow.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script type="text/javascript">
   5 if (window.testRunner) {
   6     testRunner.dumpAsText();
   7     testRunner.waitUntilDone();
   8 }
   9
  10 function log(msg) {
  11     document.getElementById('console').innerHTML += '<li>' + msg + '</li>';
  12 }
  13
  14 function runTest() {
  15     var div = document.getElementById('container');
  16
  17     var plugin = document.createElement('object');
  18     plugin.type = 'application/x-webkit-test-netscape';
  19     // Plugin takes up the full available space inside the ShadowRoot.
  20     plugin.style.width = '100%';
  21     plugin.style.height = '100%';
  22
  23     var shadowRoot = div.createShadowRoot();
  24     shadowRoot.appendChild(plugin);
  25
  26     // Start logging once plugin sees a mousedown.
  27     var startLogging = false;
  28
  29     plugin.addEventListener('mousedown', function(e) {
  30         startLogging = true;
  31         log('plugin.mousedown');
  32     });
  33     plugin.addEventListener('mouseup', function(e) {
  34         if (startLogging)
  35             log('plugin.mouseup');
  36     });
  37     plugin.addEventListener('mousemove', function(e) {
  38         if (startLogging) {
  39             log('plugin.mousemove');
  40             if (window.testRunner)
  41                 testRunner.notifyDone();
  42         }
  43     });
  44
  45     eventSender.mouseMoveTo(20, 20);  // Within the plugin bounds.
  46     eventSender.mouseDown();
  47     eventSender.leapForward(100);
  48     eventSender.mouseMoveTo(220, 120);  // Outside of the plugin bounds.
  49     eventSender.mouseUp();
  50
  51 }
  52 </script>
  53 </head>
  54 <body onload="runTest()">
  55   <div id="container" style="width: 200px; height: 100px;"></div>
  56   <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>
  57   <ul id="console"><li>Console</li></ul>
  58 </body>
  59 </html>
  60