| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../../resources/js-test.js"></script> |
| <script src="resources/shadow-dom.js"></script> |
| </head> |
| <body> |
| <p id="description"></p> |
| <div id="sandbox"></div> |
| <pre id="console"></pre> |
| <script> |
| description("Tests to ensure that all kinds of events are not stopeed at shadow boundary if created by users."); |
| |
| var eventRecords = {}; |
| |
| function dispatchedEvent(eventType) |
| { |
| var events = eventRecords[eventType]; |
| if (!events) |
| return []; |
| return events; |
| } |
| |
| function dumpDispatchedEvent(eventType) |
| { |
| debug('\n ' + eventType); |
| var events = dispatchedEvent(eventType); |
| for (var i = 0; i < events.length; ++i) |
| debug(' ' + events[i]) |
| } |
| |
| function recordEvent(event) |
| { |
| var eventType = event.type |
| if (!eventRecords[eventType]) { |
| eventRecords[eventType] = [] |
| } |
| var eventString = ''; |
| if (event.currentTarget) |
| eventString += ' @' + event.currentTarget.id; |
| if (event.target) |
| eventString += ' (target: ' + event.target.id + ')'; |
| if (event.relatedTarget) |
| eventString += ' (related: ' + event.relatedTarget.id + ')'; |
| if (event.eventPhase == 1) |
| eventString += '(capturing phase)'; |
| if (event.target && event.currentTarget && event.target.id == event.currentTarget.id) |
| shouldBe("event.eventPhase", "2", true); |
| eventRecords[eventType].push(eventString); |
| } |
| |
| debug('None of the events should be stopped at a Shadow boundary if created by users.'); |
| |
| var events = ['abort', 'select', 'change', 'reset', 'resize', 'scroll', 'selectstart', 'load', 'click']; |
| |
| function addEventListeners(nodes) |
| { |
| for (var i = 0; i < nodes.length; ++i) { |
| var node = getNodeInComposedTree(nodes[i]); |
| for (var j = 0; j < events.length; ++j) |
| node.addEventListener(events[j], recordEvent, false); |
| } |
| } |
| |
| function testEventsShouldNotBeStoppedAtShadowBoundary() |
| { |
| var sandbox = document.getElementById('sandbox'); |
| sandbox.innerHTML = ''; |
| sandbox.appendChild( |
| createDOM('div', {'id': 'top'}, |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('div', {'id': 'parent-of-target'}, |
| createDOM('div', {'id': 'target'})), |
| createDOM('div', {'id': 'parent-of-content'}, |
| createDOM('content', {'id': 'content'}))), |
| createDOM('div', {'id': 'distributed-child'})))); |
| document.body.offsetLeft; |
| |
| addEventListeners(['top', 'host', 'host/parent-of-target', 'host/target', 'host/parent-of-content', 'host/content', 'distributed-child']); |
| |
| for (var i = 0; i < events.length; ++i) { |
| eventRecords = {}; |
| var event = document.createEvent('UIEvent'); |
| event.initEvent(events[i], true, false); |
| getNodeInComposedTree('host/target').dispatchEvent(event); |
| dumpDispatchedEvent(events[i]); |
| } |
| |
| } |
| |
| function testEventsFiredOnDistributedNodesShouldNotBeStoppedAtShadowBoundary() |
| { |
| var sandbox = document.getElementById('sandbox'); |
| sandbox.innerHTML = ''; |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host1'}, |
| createShadowRoot( |
| createDOM('div', {'id': 'host2'}, |
| createShadowRoot( |
| createDOM('div', {'id': 'parent-of-content'}, |
| createDOM('content', {'id': 'content'}))), |
| createDOM('div', {'id': 'distributed-child'}))))); |
| document.body.offsetLeft; |
| |
| addEventListeners(['host1', 'host1/host2', 'host1/host2/parent-of-content', 'host1/host2/content', 'host1/distributed-child']); |
| |
| debug('\nAn event fired on a distributed child should not be stopped at the shadow boundary of its host (host2), but should be stopped at the nearest shadow boundary (host1).'); |
| eventRecords = {}; |
| var event = document.createEvent('UIEvent'); |
| event.initEvent('selectstart', true, false); |
| getNodeInComposedTree('host1/distributed-child').dispatchEvent(event); |
| dumpDispatchedEvent('selectstart'); |
| } |
| |
| function test() |
| { |
| testEventsShouldNotBeStoppedAtShadowBoundary(); |
| testEventsFiredOnDistributedNodesShouldNotBeStoppedAtShadowBoundary(); |
| } |
| test(); |
| </script> |
| </body> |
| </html> |
