| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Touch Adjustment : HTML Label and form fields - bug 78801</title> |
| <script src="../fast/js/resources/js-test-pre.js"></script> |
| <script src="resources/touchadjustment.js"></script> |
| <style> |
| #sandbox { |
| position: absolute; |
| left: 0px; |
| top: 0px; |
| font: 16px Ahem; |
| } |
| </style> |
| </head> |
| |
| <body> |
| |
| <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> |
| </form> |
| </div> |
| |
| <p id='description'></p> |
| <div id='console'></div> |
| |
| <script> |
| 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); |
| } |
| |
| function testIndirectTouch(element, offset) |
| { |
| // Touch just right of the element. |
| var touchpoint = offsetTouchPoint(findAbsoluteBounds(element), 'right', offset, 30, 20); |
| testTouchPoint(touchpoint, element); |
| } |
| |
| function testDirectTouches() |
| { |
| debug('Testing small direct hits.'); |
| |
| testDirectTouch(e.mylink); |
| testDirectTouch(e.mylabel); |
| testDirectTouch(e.myinput); |
| } |
| |
| 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.'); |
| testDirectTouches(); |
| testIndirectTouches(); |
| e.sandbox.style.display = 'none'; |
| } |
| } |
| runTests(); |
| </script> |
| <script src="../fast/js/resources/js-test-post.js"></script> |
| </body> |
| </html> |
