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