third_party/WebKit/LayoutTests/fast/events/touch/gesture/focus-selectionchange-on-tap.html

   1 <!DOCTYPE html>
   2 <style>
   3 #target {
   4   position: absolute;
   5   top: 10px;
   6   right: 10px;
   7 }
   8 #target:focus {
   9   background-color: rgb(255, 0, 0);
  10 }
  11 </style>
  12 <input type=text id=target>
  13 <script src="../../../../resources/js-test.js"></script>
  14 <script>
  15 description("Verifies that a GestureTap triggers focus and selectionchange if and only if mousedown isn't prevented.");
  16
  17 function logEvent(e, opt_extra) {
  18     var msg = 'Received ' + e.type + ' on ' + (e.target.id || e.target.nodeName);
  19     if (opt_extra)
  20         msg += ' ' + opt_extra;
  21     debug(msg);
  22 }
  23
  24 var target = document.getElementById('target');
  25 var eventsToLog = ['mousemove', 'mousedown', 'mouseover', 'mouseup', 'mouseout', 'click'];
  26 for (var i = 0; i < eventsToLog.length; i++) {
  27     target.addEventListener(eventsToLog[i], logEvent);
  28 }
  29 document.addEventListener('selectionchange', function(e) {
  30     var selection = getSelection();
  31     var selectionNode = selection.anchorNode;
  32     var anchor = 'none';
  33     if (selectionNode)
  34         anchor = (selectionNode.id || selectionNode.nodeName) + '[' + selection.anchorOffset + ']';
  35     logEvent(e, 'anchor=' + anchor);
  36 });
  37
  38 var tapHandled;
  39 function doTap(targetNode, expectHandled) {
  40     var rect = targetNode.getBoundingClientRect();
  41     var targetX = rect.left + 2;
  42     var targetY = rect.top + 2;
  43
  44     return new Promise(function(resolve, reject) {
  45         if (!('eventSender' in window)) {
  46             reject(Error('test requires eventSender'));
  47             return;
  48         }
  49
  50         debug('Sending GestureTapDown');
  51         eventSender.gestureTapDown(targetX, targetY, 30, 30);
  52         debug('Sending GestureShowPress');
  53         eventSender.gestureShowPress(targetX, targetY, 30, 30);
  54         debug('Sending GestureTap');
  55         tapHandled = eventSender.gestureTap(targetX, targetY, 1, 30, 30);
  56         shouldBe('tapHandled', expectHandled ? 'true' : 'false');
  57
  58         // Run any pending tasks before resolving the promise.
  59         setTimeout(resolve, 0);
  60     });
  61 }
  62
  63 function consumeEvent(e) {
  64     e.preventDefault();
  65 }
  66
  67 function isFocused(element) {
  68     var style = getComputedStyle(element);
  69     return style.backgroundColor == 'rgb(255, 0, 0)';
  70 }
  71
  72 function case1() {
  73     return new Promise(function(resolve, reject) {
  74         debug('Tap on input field but consume mousedown');
  75         target.addEventListener('mousedown', consumeEvent);
  76         doTap(target, true).then(function() {
  77             shouldBeFalse('isFocused(target)');
  78             debug('');
  79         }).then(resolve, reject);
  80     });
  81 }
  82
  83 function case2() {
  84     return new Promise(function(resolve, reject) {
  85         debug('Tap on input field without consuming mousedown');
  86         target.removeEventListener('mousedown', consumeEvent);
  87         doTap(target, false).then(function() {
  88             shouldBeTrue('isFocused(target)');
  89             debug('');
  90         }).then(resolve, reject);
  91     });
  92
  93 }
  94
  95 function case3() {
  96     return new Promise(function(resolve, reject) {
  97         debug ('Tap elsewhere to clear focus');
  98         doTap(document.getElementById('description'), false).then(function() {
  99             shouldBeFalse('isFocused(target)');
 100             debug('');
 101         }).then(resolve, reject);
 102     });
 103 }
 104
 105 jsTestIsAsync = true;
 106 onload = function() {
 107     case1()
 108     .then(case2)
 109     .then(case3)
 110     .catch(function(err) {
 111       testFailed("Promise rejected: " + err.message);
 112     }).then(finishJSTest);
 113 };
 114
 115 </script>