| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Touch Adjustment : Improved targetting for small controls - bug 92293</title> |
| <script src="../resources/js-test.js"></script> |
| <script src="resources/touchadjustment.js"></script> |
| |
| <style> |
| body { |
| margin-inline-start: 20px; |
| margin-top: 20px; |
| } |
| .control-pair { |
| margin-bottom: 30px; |
| } |
| |
| #check { |
| border: 1px solid black; |
| display: inline-block; |
| padding: 5px; |
| vertical-align: middle; |
| } |
| |
| #remove-button { |
| border: none; |
| background: #999; |
| display: inline-block; |
| padding: 5px; |
| vertical-align: middle; |
| } |
| |
| #combo-button { |
| border: 1px solid #777; |
| padding: 5px; |
| margin-top: 20px; |
| } |
| |
| #combo-label { |
| border: 1px solid #777; |
| height: 1em; |
| width: 4em; |
| } |
| |
| #combo-button, |
| #combo-label, |
| #drop-down-selector { |
| display: inline-block; |
| vertical-align: middle; |
| } |
| |
| #drop-down-selector { |
| -webkit-box-sizing: content-box; |
| width: 0; |
| height: 0; |
| border-left: 5px solid transparent; |
| border-right: 5px solid transparent; |
| border-top: 10px solid #777; |
| } |
| |
| </style> |
| |
| </head> |
| |
| <body id="mybody"> |
| |
| <div id=sandbox> |
| <div class="control-pair"> |
| <!-- Small checkbox to the left of another control --> |
| <div id="check" onclick="onClick();"></div> |
| <input id="task" type="text" value="Task 1"> |
| </div> |
| <div class="control-pair"> |
| <!-- Small remove button to the right of another control --> |
| <input id = "item-label" type="text" value = "Option 1"> |
| <div id = "remove-button" onclick="onClick();"></div> |
| </div> |
| <div> |
| <div id="combo-button"> |
| <!-- Combo-button controls --> |
| <div id = "combo-label" onclick="function() {};"></div> |
| <div id = "drop-down-selector" onclick="onClick();"></div> |
| </div> |
| </div> |
| </div> |
| |
| <p id='description'></p> |
| <div id='console'></div> |
| |
| <script> |
| var touchRadius = 20; |
| var touchOffset = 8; |
| |
| var element; |
| var adjustedNode; |
| |
| function onClick() |
| { |
| } |
| |
| function testDirectTouch(id) |
| { |
| testTouch(id, 'center'); |
| } |
| |
| function testIndirectTouch(id) |
| { |
| testTouch(id, 'left'); |
| testTouch(id, 'right'); |
| testTouch(id, 'top-left'); |
| testTouch(id, 'top-right'); |
| testTouch(id, 'bottom-left'); |
| testTouch(id, 'bottom-right'); |
| testTouch(id, 'top'); |
| testTouch(id, 'bottom'); |
| } |
| |
| function testTouch(id, relativePosition) |
| { |
| var element = document.getElementById(id); |
| testTouchPoint(offsetTouchPoint(findAbsoluteBounds(element), relativePosition, touchOffset, touchRadius), element, /* allowTextNodes */ false, /* disallowShadowDOM */ true); |
| } |
| |
| function testDirectTouches() |
| { |
| debug('Testing small direct hits.'); |
| |
| testDirectTouch('check'); |
| testDirectTouch('task'); |
| testDirectTouch('item-label'); |
| testDirectTouch('remove-button'); |
| testDirectTouch('combo-label'); |
| testDirectTouch('drop-down-selector'); |
| } |
| |
| function testIndirectTouches() |
| { |
| debug('Testing indirect hits.'); |
| |
| testIndirectTouch('check'); |
| testIndirectTouch('remove-button'); |
| testIndirectTouch('drop-down-selector'); |
| } |
| |
| function runTests() |
| { |
| if (window.testRunner && window.internals && internals.touchNodeAdjustedToBestClickableNode) { |
| description('Tests if small clickable targets adjacent to larger clickable controls are properly targetted with touch adjustment.'); |
| testDirectTouches(); |
| testIndirectTouches(); |
| document.getElementById('sandbox').style.display = 'none'; |
| } |
| } |
| runTests(); |
| </script> |
| </body> |
| </html> |
