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