| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Touch Adjustment : Prefer deepest event handler - bug 78801</title> |
| <script src="../resources/js-test-pre.js"></script> |
| <script src="resources/touchadjustment.js"></script> |
| <style> |
| #sandbox { font: 16px Ahem; } |
| .box { border: 1px solid black; border-radius: 5px 5px; margin: 12px; max-width: 40em; } |
| </style> |
| </head> |
| |
| <body> |
| |
| <div id=sandbox> |
| <div class=box id=mybox1> |
| Box with a local click handler. |
| </div> |
| |
| <div class=box id=mybox2> |
| Box without a local click handler. |
| </div> |
| </div> |
| |
| <script> |
| function monitor(e) { alert(e.target +( e.target.id ? ( ' #' + e.target.id) : '')); }; |
| function doSomething(e) {}; |
| |
| var element = document.getElementById('mybox1'); |
| element.addEventListener('click', doSomething, false); |
| element = document.body; |
| element.addEventListener('click', monitor, false); |
| </script> |
| |
| <p id='description'></p> |
| <div id='console'></div> |
| |
| <script> |
| var e = {}; |
| ['sandbox', 'mybox1', 'mybox2'].forEach(function(a) { |
| e[a] = document.getElementById(a); |
| }); |
| |
| function touchPointDoubleTouch(element1, element2, offset) |
| { |
| var bounds1 = findAbsoluteBounds(element1); |
| var bounds2 = findAbsoluteBounds(element2); |
| var bounds = new Object(); |
| // We assume the elements have the same x coord and width. |
| bounds.left = bounds1.left + bounds1.width/2 - 1; |
| var y1 = bounds1.top + bounds1.height/2 + offset; |
| var y2 = bounds2.top + bounds2.height/2 - 1; |
| bounds.top = y1; |
| bounds.width = y2 - y1; |
| bounds.height = y2 - y1; |
| return bounds; |
| } |
| |
| function testDirectTouches() |
| { |
| debug('Testing small direct hits.'); |
| |
| var touchpoint = offsetTouchPoint(findAbsoluteBounds(e.mybox1), 'center', 0, 2); |
| testTouchPoint(touchpoint, e.mybox1); |
| |
| touchpoint = offsetTouchPoint(findAbsoluteBounds(e.mybox2), 'center', 0, 2); |
| testTouchPoint(touchpoint, e.mybox2); |
| } |
| |
| function testPreferedTouch() |
| { |
| debug('Testing prefered hits.'); |
| |
| testTouchPoint(touchPointDoubleTouch(e.mybox1, e.mybox2, 0), e.mybox1); |
| |
| // First test was centered, now move the test closer to the wrong node, and ensure we still get the prefered node. |
| testTouchPoint(touchPointDoubleTouch(e.mybox1, e.mybox2, 5), e.mybox1); |
| |
| testTouchPoint(touchPointDoubleTouch(e.mybox1, e.mybox2, 8), e.mybox1); |
| } |
| |
| function runTests() |
| { |
| if (window.testRunner && window.internals && internals.touchNodeAdjustedToBestClickableNode) { |
| description('Test the case where a clickable target is nested inside a document that is monitoring clicks. The target with the local event-handler should be chosen if multiple targets are touched.'); |
| testDirectTouches(); |
| testPreferedTouch(); |
| e['sandbox'].style.display = 'none'; |
| } |
| } |
| runTests(); |
| </script> |
| <script src="../resources/js-test-post.js"></script> |
| </body> |
| </html> |
