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     <style>
   7         #targetDiv {
   8             background: #00f;
   9             height: 100px;
  10             position: relative;
  11             width: 100px;
  12         }
  13     </style>
  14
  15 </head>
  16
  17 <body>
  18
  19 <div id="targetDiv">
  20 </div>
  21
  22 <p id='description'></p>
  23 <div id='console'></div>
  24
  25 <script>
  26     var element;
  27     var adjustedNode;
  28     var adjustedPoint;
  29
  30     function findAbsolutePosition(node) {
  31         var pos = {left: 0, top: 0};
  32         do {
  33             pos.left += node.offsetLeft;
  34             pos.top += node.offsetTop;
  35         } while (node = node.offsetParent);
  36         return pos;
  37     }
  38
  39     function addShadowDOM() {
  40         var targetDiv = document.getElementById("targetDiv");
  41         var root = targetDiv.createShadowRoot();
  42         var shadowDiv = document.createElement("div");
  43         shadowDiv.style.width = "20px";
  44         shadowDiv.style.height = "20px";
  45         shadowDiv.style.background = "#ff0";
  46         shadowDiv.style.position = "absolute";
  47         shadowDiv.style.right = "10px";
  48         shadowDiv.style.top = "10px";
  49         shadowDiv.addEventListener('click', function() {}, false);
  50         root.appendChild(shadowDiv);
  51     }
  52
  53     function runTouchTests() {
  54         element = document.getElementById("targetDiv");
  55         element.addEventListener('click', function() {}, false);
  56         document.addEventListener('click', function() {}, false);
  57
  58         var pos = findAbsolutePosition(element);
  59         var x = pos.left;
  60         var y = pos.top;
  61         var width = element.clientWidth;
  62         var height = element.clientHeight;
  63         var midX = x + width / 2;
  64         var midY = y + height / 2;
  65         var border = 10;
  66         var targetRadius = 10;
  67         var padding = 30;
  68         var targetX = x + width - targetRadius - border;
  69         var targetY = y + targetRadius + border;
  70         var offset = 2;
  71
  72         // 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.
  73         testTouch(targetX + targetRadius + offset, targetY, padding, targetX, targetY, targetRadius);
  74         testTouch(targetX - targetRadius - offset, targetY, padding, targetX, targetY, targetRadius);
  75         testTouch(targetX, targetY + targetRadius + offset, padding, targetX, targetY, targetRadius);
  76         testTouch(targetX, targetY - targetRadius - offset, padding, targetX, targetY, targetRadius);
  77
  78         // A touch in the center of targetDiv is sufficient distance from the shadow-DOM element that the position should not snap.
  79         testTouch(midX, midY, padding, midX, midY, 1);
  80     }
  81
  82     function testTouch(touchX, touchY, padding, adjustedX, adjustedY, tolerance) {
  83         var left = touchX - padding / 2;
  84         var top = touchY - padding / 2;
  85         adjustedNode = internals.touchNodeAdjustedToBestClickableNode(left, top, padding, padding, document);
  86         shouldBe('adjustedNode.id', 'element.id');
  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>