| <html> |
| <head> |
| <style> |
| .box { border: 1px solid black; border-radius: 5px 5px; margin: 1em; max-width: 40em; } |
| </style> |
| <script src="../fast/js/resources/js-test-pre.js"></script> |
| |
| </head> |
| |
| <body onload="runTests()"> |
| |
| <div class=box id=mybox1> |
| Box with a local click handler. |
| </div> |
| |
| <div class=box id=mybox2> |
| Box without a local click handler. |
| </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 element; |
| var adjustedNode; |
| function findAbsolutePosition(node) { |
| var pos = new Object(); |
| pos.left = 0; pos.top = 0; |
| do { |
| pos.left += node.offsetLeft; |
| pos.top += node.offsetTop; |
| } while (node = node.offsetParent); |
| return pos; |
| } |
| |
| function testDirectTouch(element) |
| { |
| var pos = findAbsolutePosition(element); |
| var x = pos.left + element.clientWidth / 2 - 1; |
| var y = pos.top + element.clientHeight / 2 - 1; |
| var width = 3; |
| var height = 3; |
| var adjustedNode = internals.touchNodeAdjustedToBestClickableNode(x, y, width, height, document); |
| if (adjustedNode.nodeType == 3) // TEXT node |
| adjustedNode = adjustedNode.parentNode; |
| return adjustedNode; |
| } |
| |
| function testDoubleTouch(element1, element2, offset) |
| { |
| var pos1 = findAbsolutePosition(element1); |
| var pos2 = findAbsolutePosition(element2); |
| // We assume the elements have the same x coord and width. |
| var x = pos1.left + element1.clientWidth/2 - 1; |
| var y1 = pos1.top + element1.clientHeight/2 + 1; |
| var y2 = pos2.top + element2.clientHeight/2 - 1; |
| var width = y2 - y1; |
| var height = y2 - y1; |
| var adjustedNode = internals.touchNodeAdjustedToBestClickableNode(x, y1, width, height, document); |
| if (adjustedNode.nodeType == 3) // TEXT node |
| adjustedNode = adjustedNode.parentNode; |
| return adjustedNode; |
| } |
| |
| function testDirectTouches() |
| { |
| debug('Testing small direct hits.'); |
| |
| element = document.getElementById('mybox1'); |
| adjustedNode = testDirectTouch(element); |
| shouldBe('adjustedNode.id', 'element.id'); |
| |
| element = document.getElementById('mybox2'); |
| adjustedNode = testDirectTouch(element); |
| shouldBe('adjustedNode.id', 'element.id'); |
| } |
| |
| function testPreferedTouch() |
| { |
| debug('Testing prefered hits.'); |
| |
| element1 = document.getElementById('mybox1'); |
| element2 = document.getElementById('mybox2'); |
| adjustedNode = testDoubleTouch(element1, element2, 0); |
| shouldBe('adjustedNode.id', 'element1.id'); |
| |
| // First test was centered, now move the test closer to the wrong node, and ensure we still get the prefered node. |
| adjustedNode = testDoubleTouch(element1, element2, 5); |
| shouldBe('adjustedNode.id', 'element1.id'); |
| |
| adjustedNode = testDoubleTouch(element1, element2, 10); |
| shouldBe('adjustedNode.id', 'element1.id'); |
| } |
| |
| 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.'); |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| testDirectTouches(); |
| testPreferedTouch(); |
| isSuccessfullyParsed(); |
| testRunner.notifyDone(); |
| } |
| } |
| </script> |
| </body> |
| </html> |
