blob: 8a3e10e9fa639d6151ad072ca895262423f4408c [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
<script src="../../resources/ui-helper.js"></script>
<style>
body:active {
/* Must be non-empty. */
-webkit-tap-highlight-color: yellow;
}
</style>
<script>
window.jsTestIsAsync = true;
function notifyPass()
{
testPassed("clicked blue square");
var testContainer = document.getElementById("test-container");
testContainer.parentNode.removeChild(testContainer);
finishJSTest();
}
function runTest()
{
if (!window.testRunner)
return;
var iframe = document.getElementById("iframe");
var square = iframe.contentDocument.getElementById("square");
var x = iframe.offsetLeft + square.offsetLeft + Math.floor(square.offsetWidth / 2);
var y = iframe.offsetTop + square.offsetTop + Math.floor(square.offsetHeight / 2);
UIHelper.activateAt(x, y);
}
</script>
</head>
<body>
<div id="description"></div>
<div id="test-container">
<p><input type="search" placeholder="Do not click me"></p>
<iframe id="iframe" width="128" height="128" onload="runTest()" srcdoc='
<style>
body {
margin: 0;
padding 0;
}
#square {
-webkit-box-align: center;
-webkit-box-pack: center;
-webkit-user-select: none;
background-color: blue;
color: white;
cursor: pointer;
display: -webkit-box;
height: 128px;
width: 128px;
}
</style>
<div id="square" ontouchstart="" onclick="window.parent.notifyPass()">Click me</div><!-- Intentionally empty attribute ontouchstart. -->
'></iframe>
</div>
<div id="console"></div>
<script>
description("Test that an element, with an onclick handler and an empty ontouchstart attribute, in an &lt;iframe&gt; on a page with a search field and specifies an <code>:active</code> pseudo-class for &lt;body&gt; receives a DOM click event when tapped. To run this test by hand, click the blue square below.");
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>