Do touch adjustment on GestureTapDown
[WebKit-https.git] / LayoutTests / touchadjustment / touch-links-active.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <title>Touch Adjustment : Testing that active will be set on a tapDown - bug 96677</title>
5     <script src="../fast/js/resources/js-test-pre.js"></script>
6     <script src="resources/touchadjustment.js"></script>
7     <style>
8         #sandbox {
9             position: absolute;
10             left: 0px;
11             top: 100px;
12         }
13         a {
14             background-color: rgb(255,255,255);
15         }
16         a:active {
17             background-color: rgb(0,0,255);
18         }        
19     </style>
20 </head>
21
22 <body>
23
24 <div id="sandbox">
25 <p><a href="" id="link1">I</a> propose to consider <a href="" id="link2">the question</a>, "Can machines think?"<br>This should begin with definitions of the meaning of the terms "machine" and <a href="" id="link3">"think."</a></p>
26 </div>
27
28 <p id='description'></p>
29 <div id='console'></div>
30
31 <script>
32     var element;
33     var adjustedNode;
34     // Set up shortcut access to elements
35     var e = {};
36     ['sandbox', 'link1', 'link2', 'link3'].forEach(function(a) {
37         e[a] = document.getElementById(a);
38     });
39     
40     var curElement;
41     
42     function isLinkActive()
43     {
44         // These need to match the background-color used above, after round-tripping.
45         var defaultColor = "rgb(255, 255, 255)";
46         var activeColor = "rgb(0, 0, 255)";
47     
48         color = window.getComputedStyle(curElement).backgroundColor;
49         if (color == activeColor)
50             return true;
51         if (color != defaultColor)
52             testFailed('Got unexpected backgroundColor: ' + color);
53         return false;
54     }
55     
56     function testTapDown(touchpoint, element)
57     {
58         curElement = element;
59         if (isLinkActive()) testFailed('Link unexpectedly active on entry');
60         eventSender.gestureTapDown(touchpoint.x, touchpoint.y, touchpoint.width, touchpoint.height);
61         shouldBeTrue("isLinkActive()");
62         eventSender.gestureTapCancel(touchpoint.x, touchpoint.y);
63         if (isLinkActive()) testFailed('Link unexpectedly active on exit');
64     }
65
66     // FIXME: Why doesn't the approach in findAbsoluteBounds work correctly here?
67     // I'll investigate/fix along with http://wkb.ug/96810
68     function getBounds(node)
69     {
70       var bounds = node.getBoundingClientRect();
71       return {
72           left: bounds.left,
73           top: bounds.top,
74           width: bounds.right - bounds.left,
75           height: bounds.bottom - bounds.top
76       };    
77     }
78     
79     function testDirectTouch(element)
80     {
81         // Touch directly in the center of the element.
82         var touchpoint = offsetTouchPoint(getBounds(element), 'center', 0, 20, 30);
83         if (document.elementFromPoint(touchpoint.x, touchpoint.y) != element)
84             testFailed('Direct touch ended up on some other element');
85         testTapDown(touchpoint, element);
86     }
87
88     function isDescendantOf(parent, child)
89     {
90         var n = child;
91         while(n) {
92             if(n==parent)
93                 return true;
94             n = n.parentNode;
95         }
96         return false;
97     }
98     
99     function testIndirectTouch(element)
100     {
101         // Touch just right of the element.
102         var touchpoint = offsetTouchPoint(getBounds(element), 'right', 10, 30, 20);
103         if (isDescendantOf(element, document.elementFromPoint(touchpoint.x, touchpoint.y)))
104             testFailed('Indirect touch ended up still on top of the element');
105         testTapDown(touchpoint, element);
106     }
107
108     function testDirectTouches()
109     {
110         debug('Testing direct hits.');
111         testDirectTouch(e.link1);
112         testDirectTouch(e.link2);
113         testDirectTouch(e.link3);
114     }
115
116     function testIndirectTouches()
117     {
118         debug('Testing indirect hits.');
119         testIndirectTouch(e.link1);
120         testIndirectTouch(e.link2);
121         testIndirectTouch(e.link3);
122     }
123
124     function runTests()
125     {
126         if (!window.eventSender) {
127             debug('This test requires DumpRenderTree');
128             return;
129         }
130         if (!window.eventSender.gestureTapDown) {
131             debug('GestureTapDown not supported by this platform');
132             return;
133         } 
134           
135         description('Tests that tapDown will trigger the active state.');
136         testIndirectTouches();
137         testDirectTouches();
138         e.sandbox.style.display = 'none';
139     }
140     runTests();
141 </script>
142 <script src="../fast/js/resources/js-test-post.js"></script>
143 </body>
144 </html>