third_party/WebKit/LayoutTests/fast/events/mouse-relative-position.html

   1 <html>
   2 <head>
   3 <script src="../../resources/js-test.js"></script>
   4 <style>
   5     html, body {
   6         margin: 0;
   7         padding: 0;
   8     }
   9
  10     #test1 {
  11         margin: 100px;
  12         width: 200px;
  13         height: 200px;
  14         background: silver;
  15     }
  16
  17     #test2 {
  18         margin: -90px 0 0 100px;
  19         width: 190px;
  20         height: 190px;
  21         border: 1px solid silver;
  22         padding: 4px;
  23     }
  24
  25     #test2 > div {
  26         position: relative;
  27         height: 150px;
  28         width: 150px;
  29         overflow: auto;
  30         background: white;
  31     }
  32
  33     #test2 > div > input {
  34         width: 80px;
  35         margin: 150px;
  36         border: 1px solid;
  37     }
  38
  39     input, span {
  40         font-size: 14px;
  41         display: inline-block;
  42         height: 20px;
  43         overflow: hidden;
  44     }
  45
  46 </style>
  47 <body>
  48     <div id="test1">
  49         <span>span</span>
  50     </div>
  51     <div id="test2">
  52         <div>
  53             <input type="text" value="input">
  54         </div>
  55     </div>
  56     <div id="console"></div>
  57 </body>
  58 <script>
  59     var TOLERANCE = 5;
  60     function isAcceptable(expected, result)
  61     {
  62         for (var i = 0; i < 4; i++) {
  63             if (Math.abs(expected[i] - result[i]) > TOLERANCE)
  64                 return false;
  65         }
  66         return true;
  67     }
  68
  69     function simulateElementClick(element, expected)
  70     {
  71         element.scrollIntoView(true);
  72         if (!window.eventSender)
  73             return 'This test requires eventSender';
  74
  75         var result;
  76         function listener(event)
  77         {
  78             result = [event.offsetX, event.offsetY, event.layerX, event.layerY];
  79         }
  80
  81         var rect = element.getBoundingClientRect();
  82         element.addEventListener('click', listener, false);
  83         eventSender.mouseMoveTo(rect.left + rect.width / 2, rect.top + rect.height / 2);
  84         eventSender.mouseDown();
  85         eventSender.mouseUp();
  86         element.removeEventListener('click', listener, false);
  87
  88         if (result && isAcceptable(expected, result))
  89             return expected.join(', ');
  90
  91         return result.join(', ');
  92     }
  93
  94     var testElement = document.getElementById('test1');
  95     var spanElement = testElement.getElementsByTagName('span')[0];
  96     var testElement2 = document.getElementById('test2');
  97     var inputElement = testElement2.getElementsByTagName('input')[0];
  98
  99     shouldBe("simulateElementClick(testElement, [100, 100, 200, 200]);", "'100, 100, 200, 200'");
 100     shouldBe("simulateElementClick(spanElement, [16, 10, 16, 10]);", "'16, 10, 16, 10'");
 101     shouldBe("simulateElementClick(inputElement, [40, 10, 40, 10]);", "'40, 10, 40, 10'");
 102 </script>
 103 </html>