third_party/WebKit/LayoutTests/fast/events/mouseenter-mouseleave-capture.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             document.body.addEventListener('mouseenter', handleEvent, true);
  10             document.body.addEventListener('mouseleave', handleEvent, true);
  11
  12             if (window.testRunner) {
  13                 eventSender.mouseMoveTo(1, 1);
  14                 eventSender.mouseMoveTo(90,140);
  15                 debug("// Entering #outer");
  16                 eventSender.mouseMoveTo(110,140);
  17                 debug("// Entering #inner1");
  18                 eventSender.mouseMoveTo(130,140);
  19                 debug("// Entering #inner3 (and therefore also #inner2)");
  20                 eventSender.mouseMoveTo(170,140);
  21                 debug("// Leaving #inner3 and #inner2, but not #outer");
  22                 eventSender.mouseMoveTo(180,140);
  23                 debug("// Leaving #outer");
  24                 eventSender.mouseMoveTo(210,140);
  25             }
  26
  27             finishJSTest();
  28         });
  29
  30         function handleEvent(e) {
  31             var target = e.target ? e.target : e.srcElement;
  32             if (target.id && target.id != "console")
  33                 debug(e.type + " on " + target.id);
  34         }
  35     </script>
  36
  37     <style>
  38         #outer {
  39             background: blue;
  40             height: 100px;
  41             left: 100px;
  42             position: absolute;
  43             top: 100px;
  44             width: 100px;
  45         }
  46
  47         #inner1 {
  48             background: red;
  49             height: 50px;
  50             left: 20px;
  51             position: absolute;
  52             top: 20px;
  53             width: 50px;
  54         }
  55
  56         #inner2 {
  57             background: yellow;
  58             height: 20px;
  59             left: 60px;
  60             position: absolute;
  61             top: 30px;
  62             width: 20px;
  63         }
  64
  65         #inner3 {
  66             background-color: green;
  67             height: 10px;
  68             margin: 5px;
  69             width: 10px;
  70         }
  71     </style>
  72 </head>
  73 <body>
  74     <div id="outer">
  75         <div id="inner1"></div>
  76         <div id="inner2">
  77             <div id="inner3"></div>
  78         </div>
  79     </div>
  80 </body>
  81 </html>