third_party/WebKit/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="../resources/js-test.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.gestureShowPress(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     function testDirectTouch(element)
  67     {
  68         // Touch directly in the center of the element.
  69         var touchpoint = offsetTouchPoint(findAbsoluteBounds(element), 'center', 0, 20, 30);
  70         if (document.elementFromPoint(touchpoint.x, touchpoint.y) != element)
  71             testFailed('Direct touch ended up on some other element');
  72         testTapDown(touchpoint, element);
  73     }
  74
  75     function isDescendantOf(parent, child)
  76     {
  77         var n = child;
  78         while(n) {
  79             if(n==parent)
  80                 return true;
  81             n = n.parentNode;
  82         }
  83         return false;
  84     }
  85
  86     function testIndirectTouch(element)
  87     {
  88         // Touch just right of the element.
  89         var touchpoint = offsetTouchPoint(findAbsoluteBounds(element), 'right', 10, 30, 20);
  90         if (isDescendantOf(element, document.elementFromPoint(touchpoint.x, touchpoint.y)))
  91             testFailed('Indirect touch ended up still on top of the element');
  92         testTapDown(touchpoint, element);
  93     }
  94
  95     function testDirectTouches()
  96     {
  97         debug('Testing direct hits.');
  98         testDirectTouch(e.link1);
  99         testDirectTouch(e.link2);
 100         testDirectTouch(e.link3);
 101     }
 102
 103     function testIndirectTouches()
 104     {
 105         debug('Testing indirect hits.');
 106         testIndirectTouch(e.link1);
 107         testIndirectTouch(e.link2);
 108         testIndirectTouch(e.link3);
 109     }
 110
 111     function runTests()
 112     {
 113         if (!window.eventSender) {
 114             debug('This test requires DumpRenderTree');
 115             return;
 116         }
 117         if (!window.eventSender.gestureShowPress) {
 118             debug('GestureShowPress not supported by this platform');
 119             return;
 120         }
 121
 122         description('Tests that tapDown will trigger the active state.');
 123         testIndirectTouches();
 124         testDirectTouches();
 125         e.sandbox.style.display = 'none';
 126     }
 127     runTests();
 128 </script>
 129 </body>
 130 </html>