<!DOCTYPE html>
<script src="../../../../resources/js-test.js"></script>
<link rel="stylesheet" href="../resources/touch-hover-active-tests.css">
<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" class="touch-interactive">Gestures go here</div>
<div id="over">
<iframe id="frame"></iframe>
</div>
<p id="description"></p>
<div id="console"></div>
<script src="../resources/touch-hover-active-tests.js"></script>
<script>
var box = document.getElementById("box");
description("Tests that tap gesture events on a an element covered by a hidden iframe set and clear the active state.");
window.jsTestIsAsync = true;
function runTests()
{
if (!window.eventSender) {
debug("This test requires DRT.");
return;
}
if (!eventSender.gestureShowPress) {
debug("GestureShowPress is not supported by this platform");
return;
}
debug("Verify active isn't initially set");
shouldBeDefault("getHoverActiveState(box)");
debug("Verify showPress, tap sets and clears active");
eventSender.gestureTapDown(50, 50);
eventSender.gestureShowPress(50, 50);
shouldBeHoveredAndActive("getHoverActiveState(box)");
eventSender.gestureTap(50, 50);
waitUntilActiveCleared();
}
function waitUntilActiveCleared()
{
if (getHoverActiveState(box) == "hoveredAndActive") {
return setTimeout(waitUntilActiveCleared, 10);
}
shouldBeOnlyHovered("getHoverActiveState(box)");
finishJSTest();
}
window.onload = runTests;
</script>