LayoutTests/fast/dom/shadow/shadow-contents-event.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../js/resources/js-test-pre.js"></script>
   5 </head>
   6 <body>
   7 <p id="description"></p>
   8 <div id="sandbox">
   9     <details open id="details" style="height: 200px">
  10       <summary id="summary">summary</summary>
  11       details
  12     </details>
  13 </div>
  14 <pre id="console"></pre>
  15 <script>
  16 description("Tests to ensure that moving mouse from 'summary' to 'details' should dispatch events correctly. "
  17     + "Note that 'details' is a shadow host and has a 'summary' element as a immediate child element. "
  18     + "There is no shadow root between them.");
  19
  20 function moveMouseOver(element)
  21 {
  22     if (!window.eventSender)
  23         return;
  24     var x = element.offsetLeft + element.offsetWidth / 2;
  25     var y = element.offsetTop + element.offsetHeight / 2;
  26     eventSender.mouseMoveTo(x, y);
  27 }
  28
  29 var eventRecords = {};
  30
  31 function clearEventRecords()
  32 {
  33     eventRecords = {};
  34 }
  35
  36 function dispatchedEvent(eventType)
  37 {
  38     var events = eventRecords[eventType];
  39     if (!events)
  40         return [];
  41     return events;
  42 }
  43
  44 function recordEvent(event)
  45 {
  46     var eventType = event.type
  47     if (!eventRecords[eventType]) {
  48         eventRecords[eventType] = []
  49     }
  50     // Records each event in the following format per event type:
  51     //   eventRecords[eventType] = ['target.id(<-relatedTarget.id)(@currentTarget.id)',,,]
  52     //   * RelatedTarget and currentTarget may be omitted if they are not defined.
  53     // A new event is pushed back to the array of its event type.
  54     var eventString = '';
  55     eventString += event.target.id;
  56     if (event.relatedTarget)
  57         eventString += '(<-' + event.relatedTarget.id + ')';
  58     if (event.currentTarget)
  59         eventString += '(@' + event.currentTarget.id + ')';
  60     eventRecords[eventType].push(eventString);
  61 }
  62
  63 function moveMouse(oldElementId, newElementId)
  64 {
  65     debug('\n' + 'Moving mouse from ' + oldElementId + ' to ' + newElementId);
  66     moveMouseOver(document.getElementById(oldElementId));
  67     clearEventRecords();
  68     moveMouseOver(document.getElementById(newElementId));
  69 }
  70
  71 function test()
  72 {
  73     if (window.layoutTestController)
  74         layoutTestController.dumpAsText();
  75     var ids = ['sandbox', 'details', 'summary'];
  76     for (var i = 0; i < ids.length; ++i) {
  77         var element = document.getElementById(ids[i]);
  78         element.addEventListener('mouseover', recordEvent, false);
  79         element.addEventListener('mouseout', recordEvent, false);
  80     }
  81
  82     moveMouse('summary', 'details');
  83     shouldBe('dispatchedEvent("mouseover")', '["details(<-summary)(@details)", "details(<-summary)(@sandbox)"]');
  84     shouldBe('dispatchedEvent("mouseout")', '["summary(<-details)(@summary)", "summary(<-details)(@details)", "summary(<-details)(@sandbox)"]');
  85
  86     moveMouse('details', 'summary');
  87     shouldBe('dispatchedEvent("mouseover")', '["summary(<-details)(@summary)", "summary(<-details)(@details)", "summary(<-details)(@sandbox)"]');
  88     shouldBe('dispatchedEvent("mouseout")', '["details(<-summary)(@details)", "details(<-summary)(@sandbox)"]');
  89 }
  90
  91 test();
  92 </script>
  93 <script src="../../js/resources/js-test-post.js"></script>
  94 </body>
  95 </html>