third_party/WebKit/LayoutTests/touchadjustment/rotated-node.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <title>Test touch adjustment to a non-rectilinear element.</title>
   5     <script src="../resources/js-test.js"></script>
   6     <script src="resources/touchadjustment.js"></script>
   7     <style>
   8         body { margin: 0px; padding: 0px; }
   9         #container {
  10             -webkit-box-sizing: border-box;
  11             position: relative;
  12             border: 1px solid black;
  13             height: 100px;
  14             width: 100px;
  15         }
  16         #rotated {
  17             -webkit-box-sizing: border-box;
  18             transform: rotate(45deg);
  19             border: 1px solid black;
  20             height: 40px;
  21             left: 10px;
  22             position: absolute;
  23             top: 10px;
  24             width: 40px;
  25         }
  26     </style>
  27
  28 </head>
  29
  30 <body>
  31
  32 <div id="container">
  33     <div id="rotated"></div>
  34 </div>
  35
  36 <p id='description'></p>
  37 <div id='console'></div>
  38
  39 <script>
  40     // Set up shortcut access to elements
  41     var e = {};
  42     ['container', 'rotated'].forEach(function(a) {
  43         e[a] = document.getElementById(a);
  44         e[a].addEventListener('click', function() {}, false);
  45     });
  46
  47     function testDirectTouches()
  48     {
  49         debug('Direct Touches');
  50
  51         testTouchPoint(touchPoint(30, 30, 20), e.rotated);
  52         testTouchPoint(touchPoint(20, 30, 20), e.rotated);
  53         testTouchPoint(touchPoint(40, 30, 20), e.rotated);
  54         testTouchPoint(touchPoint(30, 20, 20), e.rotated);
  55         testTouchPoint(touchPoint(30, 40, 20), e.rotated);
  56
  57         testTouchPoint(touchPoint(80, 80, 20), e.container);
  58         testTouchPoint(touchPoint(80, 20, 20), e.container);
  59         testTouchPoint(touchPoint(20, 80, 20), e.container);
  60     }
  61
  62     function testAdjustedTouches()
  63     {
  64         debug('\nAdjusted Touches');
  65
  66         // Touch overlaps center of element.
  67         testTouchPoint(touchPoint(10, 10, 30), e.rotated);
  68
  69         // Touch overlaps corner of element.
  70         testTouchPoint(touchPoint(20, 0, 20), e.rotated);
  71
  72         debug('\nNear Misses');
  73
  74         // Touch overlaps bounding-box of element, but not the actual bounds.
  75         testTouchPoint(touchPoint(71, 0, 20), e.container);
  76         testTouchPoint(touchPoint(71, 60, 20), e.container);
  77     }
  78
  79     function testAdjustedPoints()
  80     {
  81         debug('\nAdjusted point within bounds');
  82         var adjustedPoint = adjustTouchPoint(touchPoint(20, 0, 20))
  83         // Note: we allow 1 pixel of slop here due to corresponding 1px
  84         // padding FIXME in HitTestLocation::rectForPoint.
  85         shouldBeWithin(adjustedPoint, touchPoint(20.5, 0.5, 20.5));
  86
  87         adjustedPoint = adjustTouchPoint(touchPoint(60, 60, 20))
  88         shouldBeWithin(adjustedPoint, touchPoint(60, 60, 20));
  89
  90         adjustedPoint = adjustTouchPoint(touchPoint(0, 60, 40, 20))
  91         shouldBeWithin(adjustedPoint, touchPoint(0, 60, 40, 20));
  92
  93         adjustedPoint = adjustTouchPoint(touchPoint(70, 20, 20, 40))
  94         shouldBeWithin(adjustedPoint, touchPoint(70, 20, 20, 40));
  95     }
  96
  97     function runTests()
  98     {
  99         document.addEventListener('click', function() {}, false);
 100         if (window.testRunner && window.internals && internals.touchNodeAdjustedToBestClickableNode) {
 101             description(document.title);
 102             testDirectTouches();
 103             testAdjustedTouches();
 104             testAdjustedPoints()
 105             e.container.style.display = 'none';
 106         }
 107     }
 108     runTests();
 109 </script>
 110
 111 </body>
 112 </html>