third_party/WebKit/LayoutTests/touchadjustment/nested-touch.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <title>Touch Adjustment : Prefer deepest event handler - bug 78801</title>
   5     <script src="../resources/ahem.js"></script>
   6     <script src="../resources/js-test.js"></script>
   7     <script src="resources/touchadjustment.js"></script>
   8     <style>
   9         #sandbox { font: 16px Ahem; }
  10         .box { border: 1px solid black; border-radius: 5px 5px; margin: 12px; max-width: 40em; }
  11     </style>
  12 </head>
  13
  14 <body>
  15
  16 <div id=sandbox>
  17     <div class=box id=mybox1>
  18     Box with a local click handler.
  19     </div>
  20
  21     <div class=box id=mybox2>
  22     Box without a local click handler.
  23     </div>
  24 </div>
  25
  26 <script>
  27     function monitor(e) { alert(e.target +( e.target.id ? ( ' #' + e.target.id) : '')); };
  28     function doSomething(e) {};
  29
  30     var element = document.getElementById('mybox1');
  31     element.addEventListener('click', doSomething, false);
  32     element = document.body;
  33     element.addEventListener('click', monitor, false);
  34 </script>
  35
  36 <p id='description'></p>
  37 <div id='console'></div>
  38
  39 <script>
  40     var e = {};
  41     ['sandbox', 'mybox1', 'mybox2'].forEach(function(a) {
  42         e[a] = document.getElementById(a);
  43     });
  44
  45     function touchPointDoubleTouch(element1, element2, offset)
  46     {
  47         var bounds1 = findAbsoluteBounds(element1);
  48         var bounds2 = findAbsoluteBounds(element2);
  49         var bounds = new Object();
  50         // We assume the elements have the same x coord and width.
  51         bounds.left = bounds1.left + bounds1.width/2 - 1;
  52         var y1 = bounds1.top + bounds1.height/2 + offset;
  53         var y2 = bounds2.top + bounds2.height/2 - 1;
  54         bounds.top = y1;
  55         bounds.width = y2 - y1;
  56         bounds.height = y2 - y1;
  57         return bounds;
  58     }
  59
  60     function testDirectTouches()
  61     {
  62         debug('Testing small direct hits.');
  63
  64         var touchpoint = offsetTouchPoint(findAbsoluteBounds(e.mybox1), 'center', 0, 2);
  65         testTouchPoint(touchpoint, e.mybox1);
  66
  67         touchpoint = offsetTouchPoint(findAbsoluteBounds(e.mybox2), 'center', 0, 2);
  68         testTouchPoint(touchpoint, e.mybox2);
  69     }
  70
  71     function testPreferedTouch()
  72     {
  73         debug('Testing prefered hits.');
  74
  75         testTouchPoint(touchPointDoubleTouch(e.mybox1, e.mybox2, 0), e.mybox1);
  76
  77         // First test was centered, now move the test closer to the wrong node, and ensure we still get the prefered node.
  78         testTouchPoint(touchPointDoubleTouch(e.mybox1, e.mybox2, 5), e.mybox1);
  79
  80         testTouchPoint(touchPointDoubleTouch(e.mybox1, e.mybox2, 8), e.mybox1);
  81     }
  82
  83     function runTests()
  84     {
  85         if (window.testRunner && window.internals && internals.touchNodeAdjustedToBestClickableNode) {
  86             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.');
  87             testDirectTouches();
  88             testPreferedTouch();
  89             e['sandbox'].style.display = 'none';
  90         }
  91     }
  92     runTests();
  93 </script>
  94 </body>
  95 </html>