third_party/WebKit/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.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, document);
  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 </body>
 157 </html>