LayoutTests/fast/events/event-trace.html

   1 <html id="HTML">
   2 <body id="Body">
   3
   4 <p>This tests the target, currentEvent, and phase of a complete trace through event bubbling and capture.</p>
   5 <pre id="console"></pre>
   6
   7 <br>
   8 <div id="Parent" style="background-color:lightblue;border:1px solid #000000; padding: 10px; margin: 10px;">
   9   Parent
  10   <div id="Self" style="background-color:blue; border:1px solid black; padding: 10px; margin: 10px;">
  11     Self
  12   </div>
  13 </div>
  14
  15 <script>
  16     if (window.testRunner)
  17         testRunner.dumpAsText();
  18
  19     function log(msg)
  20     {
  21         document.getElementById('console').appendChild(document.createTextNode(msg + "\n"));
  22     }
  23
  24     function traceEvent(event)
  25     {
  26         function targetString(target)
  27         {
  28             if (!target)
  29                 return "No Target";
  30             if (target instanceof window.Element)
  31                 return target.toString() + " (ID: " + target.id + ")";
  32             return target.toString();
  33         }
  34
  35         function phaseString(eventPhase)
  36         {
  37             if (eventPhase == Event.NONE)
  38                 return "NONE";
  39             else if (eventPhase == Event.CAPTURING_PHASE)
  40                 return "CAPTURE";
  41             else if (eventPhase == Event.BUBBLING_PHASE)
  42                 return "BUBBLE";
  43             else if (eventPhase == Event.AT_TARGET)
  44                 return "AT TARGET";
  45         }
  46
  47         var target = targetString(event.target);
  48         var currentTarget = targetString(event.currentTarget);
  49         var phase = phaseString(event.eventPhase);
  50
  51         log("Target = " + target + "; Phase = " + phase + "; CurrentTarget = " + currentTarget + ";");
  52     }
  53
  54
  55     window.addEventListener("customevent", traceEvent, true);
  56     document.addEventListener("customevent", traceEvent, true);
  57     document.getElementById("HTML").addEventListener("customevent", traceEvent, true);
  58     document.getElementById("Body").addEventListener("customevent", traceEvent, true);
  59     document.getElementById("Parent").addEventListener("customevent", traceEvent, true);
  60     document.getElementById("Self").addEventListener("customevent", traceEvent, true);
  61
  62     window.addEventListener("customevent", traceEvent, false);
  63     document.addEventListener("customevent", traceEvent, false);
  64     document.getElementById("HTML").addEventListener("customevent", traceEvent, false);
  65     document.getElementById("Body").addEventListener("customevent", traceEvent, false);
  66     document.getElementById("Parent").addEventListener("customevent", traceEvent, false);
  67     document.getElementById("Self").addEventListener("customevent", traceEvent, false);
  68
  69     var theEvent = document.createEvent("Event");
  70     theEvent.initEvent("customevent", true, true);
  71
  72     // Trace before dispatch.
  73     traceEvent(theEvent);
  74
  75     document.getElementById("Self").dispatchEvent(theEvent);
  76 </script>
  77 </body>
  78 </html>