third_party/WebKit/LayoutTests/fast/multicol/event-offset.html

   1 <!DOCTYPE html>
   2 <style>
   3 body {
   4     margin: 0;
   5 }
   6
   7 #columns {
   8     position: absolute;
   9     width: 332px;
  10     height: 200px;
  11     top: 220px;
  12     left: 300px;
  13     border: 1px solid black;
  14     -webkit-column-count: 3;
  15     -webkit-column-gap: 16px;
  16     column-fill: auto;
  17     line-height: 50px;
  18 }
  19 </style>
  20
  21 <div id="columns">
  22     <br>
  23     <br>
  24     <br>
  25     <div id="in-column1">first</div>
  26     <br>
  27     <div id="in-column2">second</div>
  28     <br>
  29     <br>
  30     <div id="in-column3">third</div>
  31     <br>
  32 </div>
  33
  34 <script src="../../resources/js-test.js"></script>
  35 <script>
  36 description("Dispatch mouse click events in each column and check the result.");
  37
  38 function dispatchEvent(clientX, clientY, expectedElementID, expectedOffsetX, expectedOffsetY) {
  39     var e = document.createEvent("MouseEvent");
  40     e.initMouseEvent("click", true, true, window, 1, 1, 1, clientX, clientY, false, false, false, false, 0, document);
  41     e.expectedElementID = expectedElementID;
  42     e.expectedOffsetX = expectedOffsetX;
  43     e.expectedOffsetY = expectedOffsetY;
  44     var target = document.elementFromPoint(e.clientX, e.clientY);
  45     target.dispatchEvent(e);
  46 }
  47
  48 onclick = function(event) {
  49     if (!event.expectedElementID)
  50         return;
  51     shouldBe("event.target.id", "event.expectedElementID");
  52     shouldBe("event.offsetX", "event.expectedOffsetX");
  53     shouldBe("event.offsetY", "event.expectedOffsetY");
  54 }
  55
  56 window.onload = function() {
  57     dispatchEvent(380, 400, 'in-column1', 79, 29);
  58     dispatchEvent(480, 300, 'in-column2', 63, 29);
  59     dispatchEvent(632, 221, 'in-column3', 99, 0);
  60 }
  61 </script>