490b4bdbf65764152710f26fc16f75f5aa6e889c
[WebKit-https.git] / LayoutTests / touchadjustment / event-triggered-widgets.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <title>Touch Adjustment : Event triggered widgets - bug 78801</title>
5     <script src="../resources/js-test-pre.js"></script>
6     <script src="resources/touchadjustment.js"></script>
7     <style>
8         .box { border: 1px solid black; border-radius: 5px 5px; margin: 1em; width: 40em; }
9     </style>
10 </head>
11
12 <body>
13
14 <div id=sandbox>
15     <script>
16         function triggerInput() {
17             var element = event.srcElement;
18             if (!element.open) {
19                 element.innerHTML = '<input type=text style="width: 100%"></input>'
20                 element.open = true;
21             }
22             element.firstChild.focus();
23         }
24     </script>
25
26     <div id=test1 class=box tabindex=1 onfocus='triggerInput()'>
27     Focus here should give a text input-field.
28     </div>
29
30     <div id=test2 class=box onmouseover='triggerInput()'> 
31     Mouse-over here should give a text input-field.
32     </div>
33
34     <style>
35         .box:not(:hover) .hovertriggered { visibility: hidden;}
36         .box:hover .hoverfallback { display: none; }  
37     </style>
38
39     <div id=test3 class=box> 
40         <span class=hoverfallback>Hovering here should give a text input-field.</span>
41         <input type=text class=hovertriggered></input>
42     </div>
43
44     <div id=test4 class=box onfocus='triggerInput()'>
45         <span tabindex=1> Focusing here should only give focus outline to this inner text.
46         </span>
47     </div>
48
49     <div class=box>
50         <span id=test5 tabindex=1> Focusing here should give a text input-field.
51         </span>
52     </div>
53
54     <script>
55         var element = document.getElementById('test5');
56         element.addEventListener('DOMFocusIn', triggerInput, false);
57     </script>
58 </div>
59
60 <p id='description'></p>
61 <div id='console'></div>
62
63 <script>
64     var element;
65     var adjustedNode;
66     function findAbsolutePosition(node) {
67         var pos = new Object();
68         pos.left = 0; pos.top = 0;
69         do {
70             pos.left += node.offsetLeft;
71             pos.top += node.offsetTop;
72         } while (node = node.offsetParent);
73         return pos;
74     }
75
76     function findBestClickableNode(x, y, width, height)
77     {
78         var adjustedNode = internals.touchNodeAdjustedToBestClickableNode(x, y, width, height);
79         if (adjustedNode && adjustedNode.nodeType == 3) // TEXT node
80             adjustedNode = adjustedNode.parentNode;
81         return adjustedNode;
82     }
83
84     function testDirectTouch(element)
85     {
86         var touchpoint = offsetTouchPoint(findAbsoluteBounds(element), 'center', 0, 2, 2);
87         adjustedNode = findBestClickableNode(touchpoint.left, touchpoint.top, touchpoint.width, touchpoint.height);
88     }
89
90     function testDirectFatFinger(element)
91     {
92         var touchpoint = offsetTouchPoint(findAbsoluteBounds(element), 'top', -5, element.clientHeight/2, (element.clientHeight+10)/2);
93         adjustedNode = findBestClickableNode(touchpoint.left, touchpoint.top, touchpoint.width, touchpoint.height);
94     }
95
96     function testIndirectFatFinger(element)
97     {
98         var touchpoint = offsetTouchPoint(findAbsoluteBounds(element), 'top', 3, 5, 5);
99         adjustedNode = findBestClickableNode(touchpoint.left, touchpoint.top, touchpoint.width, touchpoint.height);
100     }
101
102     function testTouchHit(elementid, touchType) {
103         element = document.getElementById(elementid);
104         touchType(element);
105         shouldBe('adjustedNode.id', 'element.id');
106     }
107
108     function testTouchMiss(elementid, touchType) {
109         element = document.getElementById(elementid);
110         touchType(element);
111         shouldNotBe('adjustedNode.id', 'element.id');
112     }
113
114     function testDirectTouches()
115     {
116         debug('Testing small direct hits');
117         testTouchHit('test1', testDirectTouch);
118         testTouchHit('test2', testDirectTouch);
119         testTouchHit('test3', testDirectTouch);
120         testTouchMiss('test4', testDirectTouch);
121         testTouchHit('test5', testDirectTouch);
122     }
123
124     function testDirectFatFingers()
125     {
126         debug('Testing large direct hits');
127         testTouchHit('test1', testDirectFatFinger);
128         testTouchHit('test2', testDirectFatFinger);
129         testTouchHit('test3', testDirectFatFinger);
130         testTouchMiss('test4', testDirectFatFinger);
131         testTouchHit('test5', testDirectFatFinger);
132     }
133
134     function testIndirectFatFingers()
135     {
136         debug('Testing large direct hits');
137         testTouchHit('test1', testIndirectFatFinger);
138         testTouchHit('test2', testIndirectFatFinger);
139         testTouchHit('test3', testIndirectFatFinger);
140         testTouchMiss('test4', testIndirectFatFinger);
141         testTouchHit('test5', testIndirectFatFinger);
142     }
143
144     function runTests()
145     {
146         if (window.testRunner && window.internals && internals.touchNodeAdjustedToBestClickableNode) {
147             description('Test various ways to trigger input-widgets. On a touch interface, all the actions should be triggerable with either a touch down or a touch tap.');
148             testDirectTouches();
149             testDirectFatFingers();
150             testIndirectFatFingers();
151             document.getElementById('sandbox').style.display = 'none';
152         }
153     }
154     runTests();
155 </script>
156 <script src="../resources/js-test-post.js"></script>
157 </body>
158 </html>