<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<style type="text/css">
#box {
height: 200px;
width: 200px;
}
#over {
z-index: 9000;
position: absolute;
top: -50px;
left: -50px;
}
#frame {
width: 400px;
height: 400px;
z-index: -1;
position: absolute;
visibility: hidden;
left: 0;
top: 0;
}
</style>
<div id="box">Touches go here</div>
<div id="over">
<iframe id="frame"></iframe>
</div>
<p id="description"></p>
<div id="console"></div>
<script type="text/javascript">
description("Tests that touch events on a an element covered by a hidden iframe trigger the touch handlers.");
window.jsTestIsAsync = true;
document.querySelector("#box").addEventListener("touchstart", testComplete);
function testComplete(event)
{
touch = event.touches[0];
shouldBe("touch.pageX", "50");
shouldBe("touch.pageY", "50");
finishJSTest();
}
function runTest() {
if (window.eventSender) {
eventSender.addTouchPoint(50, 50);
eventSender.touchStart();
} else {
debug("This test requires DRT.");
}
}
window.onload = runTest;
</script>