| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../../resources/js-test-pre.js"></script> |
| <script src="resources/shadow-dom.js"></script> |
| <script src="resources/event-dispatching.js"></script> |
| </head> |
| <body> |
| <p>Touch event retargeting.</p> |
| <div id="sandbox"> |
| </div> |
| <pre id="console"></pre> |
| |
| <script> |
| sandbox.appendChild( |
| createDOM('div', {'id': 'container'}, |
| createDOM('div', {'id': 'div1'}, |
| document.createTextNode('foo')), |
| createDOM('div', {'id': 'div2'}, |
| createShadowRoot( |
| createDOM('div', {}, |
| document.createTextNode('foo')), |
| createDOM('div', {'id': 'div2-shadow-root-child'}, |
| document.createTextNode('foo')), |
| createDOM('div', {}, |
| document.createTextNode('foo')))), |
| createDOM('div', {'id': 'div3'}, |
| createShadowRoot( |
| createDOM('div', {}, |
| document.createTextNode('foo')), |
| createDOM('div', {'id': 'div3-shadow-root-child'}, |
| document.createTextNode('foo')), |
| createDOM('div', {}, |
| document.createTextNode('foo')))))); |
| |
| sandbox.offsetLeft; |
| |
| function addTouchPoint(target) |
| { |
| eventSender.addTouchPoint(target.offsetLeft + target.offsetWidth / 2, target.offsetTop + target.offsetHeight / 2); |
| } |
| |
| function sendTouchEvent(elements) |
| { |
| eventSender.clearTouchPoints(); |
| for (var i = 0; i < elements.length; ++i) |
| addTouchPoint(getNodeInShadowTreeStack(elements[i])); |
| eventSender.touchStart(); |
| eventSender.touchEnd(); |
| } |
| |
| addEventListeners(['div1', 'div2', 'div3', |
| 'div2/div2-shadow-root-child', 'div3/div3-shadow-root-child']); |
| sendTouchEvent(['div1', 'div2/div2-shadow-root-child', 'div3/div3-shadow-root-child']); |
| sortDispatchedEvent('touchstart'); |
| debugDispatchedEvent('touchstart'); |
| </script> |
| <script src="../../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
