src/third_party/WebKit/LayoutTests/fast/dom/shadow/events-stopped-at-shadow-boundary.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../../resources/js-test.js"></script>
   5 <script src="resources/shadow-dom.js"></script>
   6 </head>
   7 <body>
   8 <p id="description"></p>
   9 <div id="sandbox"></div>
  10 <pre id="console"></pre>
  11 <script>
  12 description("Tests to ensure that some kinds of events are stopeed at shadow boundary.");
  13
  14 var eventRecords = {};
  15
  16 function dispatchedEvent(eventType)
  17 {
  18     var events = eventRecords[eventType];
  19     if (!events)
  20         return [];
  21     return events;
  22 }
  23
  24 function dumpDispatchedEvent(eventType)
  25 {
  26     debug('\n  ' + eventType);
  27     var events = dispatchedEvent(eventType);
  28     for (var i = 0; i < events.length; ++i)
  29         debug('    ' + events[i])
  30 }
  31
  32 function recordEvent(event)
  33 {
  34     var eventType = event.type
  35     if (!eventRecords[eventType]) {
  36         eventRecords[eventType] = []
  37     }
  38     var eventString = '';
  39     if (event.currentTarget)
  40         eventString += ' @' + event.currentTarget.id;
  41     if (event.target)
  42         eventString += ' (target: ' + event.target.id + ')';
  43     if (event.relatedTarget)
  44         eventString += ' (related: ' + event.relatedTarget.id + ')';
  45     if (event.eventPhase == 1)
  46         eventString += '(capturing phase)';
  47     if (event.target && event.currentTarget && event.target.id == event.currentTarget.id)
  48         shouldBe("event.eventPhase", "2", true);
  49     eventRecords[eventType].push(eventString);
  50 }
  51
  52 debug('Other events than "click" should be stopped at shadow boundary.  A "click" is added for the purpose of comparing results.');
  53
  54 var events = ['abort', 'select', 'change', 'reset', 'resize', 'scroll', 'selectstart', 'load', 'error', 'click'];
  55
  56 function addEventListeners(nodes)
  57 {
  58     for (var i = 0; i < nodes.length; ++i) {
  59         var node = getNodeInTreeOfTrees(nodes[i]);
  60         for (var j = 0; j < events.length; ++j)
  61             node.addEventListener(events[j], recordEvent, false);
  62     }
  63 }
  64
  65 function testEventsShoudBeStoppedAtShadowBoundary()
  66 {
  67     var sandbox = document.getElementById('sandbox');
  68     sandbox.innerHTML = '';
  69     sandbox.appendChild(
  70         createDOM('div', {'id': 'top'},
  71                   createDOM('div', {'id': 'host'},
  72                             createShadowRoot(
  73                                 createDOM('div', {'id': 'parent-of-target'},
  74                                           createDOM('div', {'id': 'target'})),
  75                                 createDOM('div', {'id': 'parent-of-content'},
  76                                           createDOM('content', {'id': 'content'}))),
  77                             createDOM('div', {'id': 'distributed-child'}))));
  78     document.body.offsetLeft;
  79
  80     addEventListeners(['top', 'host', 'host/parent-of-target', 'host/target', 'host/parent-of-content', 'host/content', 'distributed-child']);
  81
  82     for (var i = 0; i < events.length; ++i) {
  83         eventRecords = {};
  84         var event = document.createEvent('UIEvent');
  85         event.initEvent(events[i], true, false);
  86         getNodeInTreeOfTrees('host/target').dispatchEvent(event);
  87         dumpDispatchedEvent(events[i]);
  88     }
  89
  90 }
  91
  92 function testEventsFiredOnDistributedNodesShouldNotBeStoppedAtShadowBoundary()
  93 {
  94     var sandbox = document.getElementById('sandbox');
  95     sandbox.innerHTML = '';
  96     sandbox.appendChild(
  97         createDOM('div', {'id': 'host1'},
  98                   createShadowRoot(
  99                       createDOM('div', {'id': 'host2'},
 100                                 createShadowRoot(
 101                                     createDOM('div', {'id': 'parent-of-content'},
 102                                               createDOM('content', {'id': 'content'}))),
 103                                 createDOM('div', {'id': 'distributed-child'})))));
 104     document.body.offsetLeft;
 105
 106     addEventListeners(['host1', 'host1/host2', 'host1/host2/parent-of-content', 'host1/host2/content', 'host1/distributed-child']);
 107
 108     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).');
 109     eventRecords = {};
 110     var event = document.createEvent('UIEvent');
 111     event.initEvent('selectstart', true, false);
 112     getNodeInTreeOfTrees('host1/distributed-child').dispatchEvent(event);
 113     dumpDispatchedEvent('selectstart');
 114 }
 115
 116 function testEventsInMultipleShadowTrees()
 117 {
 118     debug("\nAn event is dispatched on a node in an older shadow tree. The older and the younger shadow root should receive the event, however, the shadow host shouldn't");
 119
 120     var sandbox = document.getElementById('sandbox');
 121     sandbox.innerHTML = '';
 122     sandbox.appendChild(
 123           createDOM('div', {'id': 'shadow-host'},
 124                     createShadowRoot({'id': 'older-shadow-root'},
 125                                      createDOM('div', {'id': 'target'})),
 126                     createShadowRoot({'id': 'younger-shadow-root'},
 127                         createDOM('shadow', {'id': 'shadow-insertion-point'}))));
 128     document.body.offsetLeft;
 129
 130     addEventListeners(['shadow-host', 'shadow-host/', 'shadow-host/target', 'shadow-host//', 'shadow-host//shadow-insertion-point']);
 131
 132     eventRecords = {};
 133     var event = document.createEvent('UIEvent');
 134     event.initEvent('selectstart', true, false);
 135     getNodeInTreeOfTrees('shadow-host/target').dispatchEvent(event);
 136     dumpDispatchedEvent('selectstart');
 137 }
 138
 139 function test()
 140 {
 141     if (window.testRunner)
 142         testRunner.dumpAsText();
 143
 144     testEventsShoudBeStoppedAtShadowBoundary()
 145     testEventsFiredOnDistributedNodesShouldNotBeStoppedAtShadowBoundary();
 146     testEventsInMultipleShadowTrees();
 147 }
 148 test();
 149 </script>
 150 </body>
 151 </html>