blob: e771bcdf8bc1e8488ca4aef8b2c7f99338923e3a [file] [log] [blame]
<!DOCTYPE html>
<title>Touch Adjustment : HTML Label and form fields - bug 78801</title>
<script src="../resources/ahem.js"></script>
<script src="../resources/js-test.js"></script>
<script src="resources/touchadjustment.js"></script>
#sandbox {
position: absolute;
left: 0px;
top: 0px;
font: 16px Ahem;
<div id=sandbox>
<a href="#myform" id="mylink">Do not click here</a><br>
<form id="myform">
<label for="myinput" id="mylabel">Click here,</label>
<span id="myspan">but not here.</span>
<input type="text" id="myinput" value="To focus this."></input>
<p id='description'></p>
<div id='console'></div>
var element;
var adjustedNode;
// Set up shortcut access to elements
var e = {};
['sandbox', 'mylink', 'myform', 'myinput', 'mylabel', 'myspan'].forEach(function(a) {
e[a] = document.getElementById(a);
function testDirectTouch(element)
var touchpoint = offsetTouchPoint(findAbsoluteBounds(element), 'center', 0, 20, 30);
testTouchPoint(touchpoint, element, /* allowTextNodes */ false, /* disallowShadowDOM */ true);
function testIndirectTouch(element, offset)
// Touch just right of the element.
var touchpoint = offsetTouchPoint(findAbsoluteBounds(element), 'right', offset, 30, 20);
testTouchPoint(touchpoint, element, /* allowTextNodes */ false, /* disallowShadowDOM */ true);
function testDirectTouches()
debug('Testing small direct hits.');
function testIndirectTouches()
debug('Testing indirect hits.');
testIndirectTouch(e.mylink, 10);
// This case is very borderline - there's not much reason to adjust
// left to the label instead of up to the link (it's closer to
// the label, but overlaps with more of the link).
testIndirectTouch(e.mylabel, 1);
testIndirectTouch(e.myinput, 10);
function runTests()
if (window.testRunner && window.internals && internals.touchNodeAdjustedToBestClickableNode) {
description('Tests if labels are treated as clickable if the input they control is.');
testIndirectTouches(); = 'none';