src/third_party/WebKit/LayoutTests/touchadjustment/nested-shadow-node.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <title>Touch Adjustment : Touch adjustment does not target shadow DOM elements - bug 89556</title>
   5     <script src="../resources/js-test.js"></script>
   6     <script src="resources/touchadjustment.js"></script>
   7     <style>
   8         #targetDiv {
   9             background: #00f;
  10             height: 100px;
  11             position: relative;
  12             width: 100px;
  13         }
  14     </style>
  15
  16 </head>
  17
  18 <body>
  19
  20 <div id="targetDiv">
  21 </div>
  22
  23 <p id='description'></p>
  24 <div id='console'></div>
  25
  26 <script>
  27     var element;
  28     var adjustedNode;
  29     var adjustedPoint;
  30
  31     function findAbsolutePosition(node) {
  32         var pos = {left: 0, top: 0};
  33         do {
  34             pos.left += node.offsetLeft;
  35             pos.top += node.offsetTop;
  36         } while (node = node.offsetParent);
  37         return pos;
  38     }
  39
  40     function addShadowDOM() {
  41         var targetDiv = document.getElementById("targetDiv");
  42         var root = targetDiv.createShadowRoot();
  43         var shadowDiv = document.createElement("div");
  44         shadowDiv.style.width = "20px";
  45         shadowDiv.style.height = "20px";
  46         shadowDiv.style.background = "#ff0";
  47         shadowDiv.style.position = "absolute";
  48         shadowDiv.style.right = "10px";
  49         shadowDiv.style.top = "10px";
  50         shadowDiv.addEventListener('click', function() {}, false);
  51         root.appendChild(shadowDiv);
  52     }
  53
  54     function runTouchTests() {
  55         element = document.getElementById("targetDiv");
  56         element.addEventListener('click', function() {}, false);
  57         document.addEventListener('click', function() {}, false);
  58
  59         var pos = findAbsolutePosition(element);
  60         var x = pos.left;
  61         var y = pos.top;
  62         var width = element.clientWidth;
  63         var height = element.clientHeight;
  64         var midX = x + width / 2;
  65         var midY = y + height / 2;
  66         var border = 10;
  67         var targetRadius = 10;
  68         var padding = 30;
  69         var targetX = x + width - targetRadius - border;
  70         var targetY = y + targetRadius + border;
  71         var offset = 2;
  72
  73         // 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.
  74         testTouch(targetX + targetRadius + offset, targetY, padding, targetX, targetY, targetRadius);
  75         testTouch(targetX - targetRadius - offset, targetY, padding, targetX, targetY, targetRadius);
  76         testTouch(targetX, targetY + targetRadius + offset, padding, targetX, targetY, targetRadius);
  77         testTouch(targetX, targetY - targetRadius - offset, padding, targetX, targetY, targetRadius);
  78
  79         // A touch in the center of targetDiv is sufficient distance from the shadow-DOM element that the position should not snap.
  80         testTouch(midX, midY, padding, midX, midY, 1);
  81     }
  82
  83     function testTouch(touchX, touchY, padding, adjustedX, adjustedY, tolerance) {
  84         var left = touchX - padding / 2;
  85         var top = touchY - padding / 2;
  86         testTouchPoint(touchPoint(left, top, padding), element, /* allowTextNodes */ false, /* disallowShadowDOM */ true);
  87         adjustedPoint = internals.touchPositionAdjustedToBestClickableNode(left, top, padding, padding, document);
  88         shouldBeCloseTo('adjustedPoint.x', adjustedX, tolerance);
  89         shouldBeCloseTo('adjustedPoint.y', adjustedY, tolerance);
  90     }
  91
  92     function runTests()
  93     {
  94         if (window.testRunner && window.internals && internals.touchNodeAdjustedToBestClickableNode) {
  95             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.')
  96             addShadowDOM();
  97             runTouchTests();
  98         }
  99     }
 100     runTests();
 101 </script>
 102 </body>
 103 </html>