<!DOCTYPE html>
<html><body>
<script src="../../../resources/js-test-pre.js"></script>

<p>Touch event should be fired in Shadow DOM.</p>
<p>Elements in ShadowDOM should not be revealed in touchTarget if it's examined in non shadow tree.</p>

<div id="container">
    <input id="input1" type="text">
    <div id="host1"></div>
</div>
<pre id="console"></pre>

<script>
var shadowRoot1 = host1.webkitCreateShadowRoot();
shadowRoot1.innerHTML = 'foo <span id="host2">bar</span> baz';

var host2 = shadowRoot1.getElementById('host2');
var shadowRoot2 = host2.webkitCreateShadowRoot();
shadowRoot2.innerHTML = '(foo <span id="target">bar</span> baz)';

var target = shadowRoot2.getElementById('target');

var touchTargetsForHost1;
host1.addEventListener('touchstart', function(e) {
    touchTargetForHost1 = e.targetTouches[0].target;
});

var touchstartFiredInShadowDOM = false;
target.addEventListener('touchstart', function(e) {
    touchstartFiredInShadowDOM = true;
});

var touchTargetForInput1;
input1.addEventListener('touchstart', function(e) {
    touchTargetForInput1 = e.targetTouches[0].target;
});

eventSender.clearTouchPoints();
eventSender.addTouchPoint(target.offsetLeft + target.offsetWidth / 2, target.offsetTop + target.offsetHeight / 2);
eventSender.addTouchPoint(input1.offsetLeft + input1.offsetWidth / 2, input1.offsetTop + input1.offsetHeight / 2);
eventSender.touchStart();
eventSender.touchEnd();

shouldBeTrue('touchstartFiredInShadowDOM');
shouldBe('touchTargetForHost1', 'host1');
shouldBe('touchTargetForInput1', 'input1');

container.remove();
</script>

<script src="../../../resources/js-test-post.js"></script>
</body></html>