| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../../resources/js-test-pre.js"></script> |
| </head> |
| <body> |
| <p id="description"></p> |
| <div id="sandbox"> |
| <details open id="details" style="height: 200px"> |
| <summary id="summary">summary</summary> |
| details |
| </details> |
| </div> |
| <pre id="console"></pre> |
| <script> |
| description("Tests to ensure that moving mouse from 'summary' to 'details' should dispatch events correctly. " |
| + "Note that 'details' is a shadow host and has a 'summary' element as a immediate child element. " |
| + "There is no shadow root between them."); |
| |
| function moveMouseOver(element) |
| { |
| if (!window.eventSender) |
| return; |
| var x = element.offsetLeft + element.offsetWidth / 2; |
| var y = element.offsetTop + element.offsetHeight / 2; |
| eventSender.mouseMoveTo(x, y); |
| } |
| |
| var eventRecords = {}; |
| |
| function clearEventRecords() |
| { |
| eventRecords = {}; |
| } |
| |
| function dispatchedEvent(eventType) |
| { |
| var events = eventRecords[eventType]; |
| if (!events) |
| return []; |
| return events; |
| } |
| |
| function recordEvent(event) |
| { |
| var eventType = event.type |
| if (!eventRecords[eventType]) { |
| eventRecords[eventType] = [] |
| } |
| // Records each event in the following format per event type: |
| // eventRecords[eventType] = ['target.id(<-relatedTarget.id)(@currentTarget.id)',,,] |
| // * RelatedTarget and currentTarget may be omitted if they are not defined. |
| // A new event is pushed back to the array of its event type. |
| var eventString = ''; |
| eventString += event.target.id; |
| if (event.relatedTarget) |
| eventString += '(<-' + event.relatedTarget.id + ')'; |
| if (event.currentTarget) |
| eventString += '(@' + event.currentTarget.id + ')'; |
| eventRecords[eventType].push(eventString); |
| } |
| |
| function moveMouse(oldElementId, newElementId) |
| { |
| debug('\n' + 'Moving mouse from ' + oldElementId + ' to ' + newElementId); |
| moveMouseOver(document.getElementById(oldElementId)); |
| clearEventRecords(); |
| moveMouseOver(document.getElementById(newElementId)); |
| } |
| |
| function test() |
| { |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| var ids = ['sandbox', 'details', 'summary']; |
| for (var i = 0; i < ids.length; ++i) { |
| var element = document.getElementById(ids[i]); |
| element.addEventListener('mouseover', recordEvent, false); |
| element.addEventListener('mouseout', recordEvent, false); |
| } |
| |
| moveMouse('summary', 'details'); |
| shouldBe('dispatchedEvent("mouseover")', '["details(<-summary)(@details)", "details(<-summary)(@sandbox)"]'); |
| shouldBe('dispatchedEvent("mouseout")', '["summary(<-details)(@summary)", "summary(<-details)(@details)", "summary(<-details)(@sandbox)"]'); |
| |
| moveMouse('details', 'summary'); |
| shouldBe('dispatchedEvent("mouseover")', '["summary(<-details)(@summary)", "summary(<-details)(@details)", "summary(<-details)(@sandbox)"]'); |
| shouldBe('dispatchedEvent("mouseout")', '["details(<-summary)(@details)", "details(<-summary)(@sandbox)"]'); |
| } |
| |
| test(); |
| </script> |
| <script src="../../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
