| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Touch Adjustment : Touch adjustment does not target shadow DOM elements - bug 89556</title> |
| <script src="../resources/js-test-pre.js"></script> |
| <style> |
| #targetDiv { |
| background: #00f; |
| height: 100px; |
| position: relative; |
| width: 100px; |
| } |
| </style> |
| |
| </head> |
| |
| <body> |
| |
| <div id="targetDiv"> |
| </div> |
| |
| <p id='description'></p> |
| <div id='console'></div> |
| |
| <script> |
| var element; |
| var adjustedNode; |
| var adjustedPoint; |
| |
| function findAbsolutePosition(node) { |
| var pos = {left: 0, top: 0}; |
| do { |
| pos.left += node.offsetLeft; |
| pos.top += node.offsetTop; |
| } while (node = node.offsetParent); |
| return pos; |
| } |
| |
| function addShadowDOM() { |
| var targetDiv = document.getElementById("targetDiv"); |
| var root = internals.ensureShadowRoot(targetDiv); |
| var shadowDiv = document.createElement("div"); |
| shadowDiv.style.width = "20px"; |
| shadowDiv.style.height = "20px"; |
| shadowDiv.style.background = "#ff0"; |
| shadowDiv.style.position = "absolute"; |
| shadowDiv.style.right = "10px"; |
| shadowDiv.style.top = "10px"; |
| shadowDiv.addEventListener('click', function() {}, false); |
| root.appendChild(shadowDiv); |
| } |
| |
| function runTouchTests() { |
| element = document.getElementById("targetDiv"); |
| element.addEventListener('click', function() {}, false); |
| document.addEventListener('click', function() {}, false); |
| |
| var pos = findAbsolutePosition(element); |
| var x = pos.left; |
| var y = pos.top; |
| var width = element.clientWidth; |
| var height = element.clientHeight; |
| var midX = x + width / 2; |
| var midY = y + height / 2; |
| var border = 10; |
| var targetRadius = 10; |
| var padding = 30; |
| var targetX = x + width - targetRadius - border; |
| var targetY = y + targetRadius + border; |
| var offset = 2; |
| |
| // Test touches that are just outside the bounds of the shadow-DOM. The adjusted point should be pulled within the bounds of the shadow-DOM node. |
| testTouch(targetX + targetRadius + offset, targetY, padding, targetX, targetY, targetRadius); |
| testTouch(targetX - targetRadius - offset, targetY, padding, targetX, targetY, targetRadius); |
| testTouch(targetX, targetY + targetRadius + offset, padding, targetX, targetY, targetRadius); |
| testTouch(targetX, targetY - targetRadius - offset, padding, targetX, targetY, targetRadius); |
| |
| // A touch in the center of targetDiv is sufficient distance from the shadow-DOM element that the position should not snap. |
| testTouch(midX, midY, padding, midX, midY, 1); |
| } |
| |
| function testTouch(touchX, touchY, padding, adjustedX, adjustedY, tolerance) { |
| var left = touchX - padding / 2; |
| var top = touchY - padding / 2; |
| adjustedNode = internals.touchNodeAdjustedToBestClickableNode(left, top, padding, padding); |
| shouldBe('adjustedNode.id', 'element.id'); |
| adjustedPoint = internals.touchPositionAdjustedToBestClickableNode(left, top, padding, padding); |
| shouldBeCloseTo('adjustedPoint.x', adjustedX, tolerance); |
| shouldBeCloseTo('adjustedPoint.y', adjustedY, tolerance); |
| } |
| |
| function runTests() |
| { |
| if (window.testRunner && window.internals && internals.touchNodeAdjustedToBestClickableNode && internals.ensureShadowRoot) { |
| description('Test the case where a clickable target contains a shadow-DOM element. The adjusted point should snap to the location of the shadow-DOM element if close enough to the original touch position.') |
| addShadowDOM(); |
| runTouchTests(); |
| } |
| } |
| runTests(); |
| </script> |
| <script src="../resources/js-test-post.js"></script> |
| </body> |
| </html> |
