third_party/WebKit/LayoutTests/fast/events/mousemove-from-iframe-to-top-element.html

   1 <!DOCTYPE html>
   2 <style>
   3 body { margin: 0 }
   4 #top1 { display: block; width: 100%; height: 100px; background-color: green; z-index: 2; position: relative; }
   5 #frame { border: 0; width: 100%; height: 140px; position: relative; top: -2px; z-index: 1; }
   6 </style>
   7 <body onload="runTest()">
   8 <div id="top1">TOP</div>
   9 <iframe id="frame" style="width:100%; height:300px;" srcdoc='
  10 <style>body { margin: 0; } #target { display: block; height: 100px; width: 100%; background-color: yellow; } #target:hover { background-color: red; } </style>
  11 <div id="target">Hover Test</div>'></iframe>
  12 <div id="console"></div>
  13 <script src="../../resources/js-test.js"></script>
  14 <script>
  15 description('Tests that hover is lost from iframe when the mouse is moved from iframe to the element that stacked up on iframe');
  16
  17 var bgColor;
  18 var hoverBgColor;
  19 var events = [];
  20 var targetIds = [];
  21 function runTest() {
  22     var i = 0;
  23     var frame = document.getElementById('frame');
  24     var hoverTarget = frame.contentDocument.getElementById('target');
  25     hoverTarget.addEventListener('mousemove', appendEventLog);
  26     hoverTarget.addEventListener('mouseenter', appendEventLog);
  27     hoverTarget.addEventListener('mouseleave', appendEventLog);
  28     hoverTarget.addEventListener('mouseout', appendEventLog);
  29
  30     function appendEventLog(e) {
  31         events.push(e.type);
  32         targetIds.push(e.currentTarget.id);
  33     }
  34
  35     function verifyEventLog(type, target) {
  36         shouldBeEqualToString('events[' + i + ']', type);
  37         shouldBeEqualToString('targetIds[' + i + ']', target);
  38         debug('');
  39         i++;
  40     }
  41
  42     if (window.eventSender) {
  43         var style = frame.contentWindow.getComputedStyle(hoverTarget, null);
  44         var rect = frame.getBoundingClientRect();
  45
  46         // move mouse to top of div in iframe
  47         eventSender.mouseMoveTo(rect.left + 2,  rect.top + 2);
  48         hoverBgColor = style.getPropertyValue('background-color');
  49         shouldBeEqualToString('hoverBgColor', 'rgb(255, 0, 0)');
  50         debug('');
  51         verifyEventLog('mouseenter', 'target');
  52         verifyEventLog('mousemove', 'target');
  53
  54         // move mouse to bottom of div stacked up on iframe
  55         eventSender.mouseMoveTo(rect.left, rect.top) ;
  56         bgColor = style.getPropertyValue('background-color');
  57         shouldBeEqualToString('bgColor', 'rgb(255, 255, 0)');
  58         debug('');
  59         verifyEventLog('mouseleave', 'target');
  60         verifyEventLog('mouseout', 'target');
  61     }
  62 }
  63 </script>
  64 </body>