third_party/WebKit/LayoutTests/fast/events/mouseenter-mouseleave.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <script src="../../resources/js-test.js"></script>
   5     <script>
   6         window.jsTestIsAsync = true;
   7
   8         document.addEventListener('DOMContentLoaded', function () {
   9             listenForEvents(document.querySelector('#outer'));
  10             listenForEvents(document.querySelector('#inner1'));
  11             listenForEvents(document.querySelector('#inner2'));
  12             listenForEvents(document.querySelector('#inner3'));
  13
  14             if (window.testRunner) {
  15                 eventSender.mouseMoveTo(1, 1);
  16                 eventSender.mouseMoveTo(90,140);
  17                 debug("// Entering #outer");
  18                 eventSender.mouseMoveTo(110,140);
  19                 debug("// Entering #inner1");
  20                 eventSender.mouseMoveTo(130,140);
  21                 debug("// Entering #inner3 (and therefore also #inner2)");
  22                 eventSender.mouseMoveTo(170,140);
  23                 debug("// Leaving #inner3 and #inner2, but not #outer");
  24                 eventSender.mouseMoveTo(180,140);
  25                 debug("// Leaving #outer");
  26                 eventSender.mouseMoveTo(210,140);
  27             }
  28
  29             finishJSTest();
  30         });
  31
  32         function handleEvent(e) {
  33             var phases = ['', 'capturing', 'at target', 'bubbling'];
  34             var target = e.target ? e.target : e.srcElement;
  35             if (target.id && target.id != "console") {
  36                 debug(e.type + " (" + phases[e.eventPhase] + ") on " + target.id);
  37                 if (e.relatedTarget && e.relatedTarget.id)
  38                     debug('- Related target: ' + e.relatedTarget.id);
  39             }
  40
  41         }
  42
  43         function listenForEvents(el) {
  44             ['mouseover', 'mouseout', 'mouseenter', 'mouseleave'].forEach(function(type) {
  45                 el.addEventListener(type, handleEvent);
  46             });
  47         }
  48     </script>
  49
  50     <style>
  51         #outer {
  52             background: blue;
  53             height: 100px;
  54             left: 100px;
  55             position: absolute;
  56             top: 100px;
  57             width: 100px;
  58         }
  59
  60         #inner1 {
  61             background: red;
  62             height: 50px;
  63             left: 20px;
  64             position: absolute;
  65             top: 20px;
  66             width: 50px;
  67         }
  68
  69         #inner2 {
  70             background: yellow;
  71             height: 20px;
  72             left: 60px;
  73             position: absolute;
  74             top: 30px;
  75             width: 20px;
  76         }
  77
  78         #inner3 {
  79             background-color: green;
  80             height: 10px;
  81             margin: 5px;
  82             width: 10px;
  83         }
  84     </style>
  85 </head>
  86 <body>
  87     <div id="outer">
  88         <div id="inner1"></div>
  89         <div id="inner2">
  90             <div id="inner3"></div>
  91         </div>
  92     </div>
  93 </body>
  94 </html>