third_party/WebKit/LayoutTests/fast/events/touch/gesture/gesture-tap-mouse-events-between-frames.html

   1 <!DOCTYPE HTML>
   2 <script src="../../../../resources/js-test.js"></script>
   3 <script src="../../resources/record-events.js"></script>
   4 <style>
   5 body { margin: 0px; }
   6 div.box { padding: 40px; }
   7 #yellow { background-color: yellow; }
   8 #console { padding: 0px; }
   9 iframe { margin: 0px; border: 0px; width: 100%; height: 320px; }
  10 </style>
  11 <div class="box" id="yellow"><iframe src='resources/gesture-tap-mouse-events-between-frames-iframe1.html' id='frameA'></iframe></div>
  12 <div id="console"></div>
  13 <script>
  14 description("Verifies that mouse events are fired on tapping of gesture across frames in the correct order.");
  15 var frameA, frameB, frameC, frameD, frameE;
  16
  17 var yellowEnterOrder = [
  18     ["yellow", "mouseover"],
  19     ["yellow", "mouseenter"],
  20     ["greenyellow", "mouseover"],
  21     ["greenyellow", "mouseenter"]];
  22
  23 var greenEnterOrder = [
  24     ["limegreen", "mouseover"],
  25     ["limegreen", "mouseenter"],
  26     ["green", "mouseover"],
  27     ["green", "mouseenter"]];
  28
  29 var greenLeaveOrder = [
  30     ["green", "mouseout"],
  31     ["green", "mouseleave"],
  32     ["limegreen", "mouseout"],
  33     ["limegreen", "mouseleave"],
  34     ["greenyellow", "mouseout"],
  35     ["greenyellow", "mouseover"]];
  36
  37 var pinkEnterOrder = [
  38     ["pink", "mouseover"],
  39     ["pink", "mouseenter"],
  40     ["hotpink", "mouseover"],
  41     ["hotpink", "mouseenter"]];
  42
  43 var pinkLeaveOrder = [
  44     ["hotpink", "mouseout"],
  45     ["hotpink", "mouseleave"],
  46     ["pink", "mouseout"],
  47     ["pink", "mouseleave"],
  48     ["greenyellow", "mouseout"],
  49     ["greenyellow", "mouseover"]];
  50
  51 function getElementById(obj)
  52 {
  53     if (obj.frame)
  54         return obj.frame.contentDocument.getElementById(obj.id);
  55     return document.getElementById(obj.id);
  56 }
  57
  58 function init() {
  59     frameA = document.getElementById("frameA");
  60     frameB = frameA.contentDocument.getElementById("frameB");
  61     frameC = frameB.contentDocument.getElementById("frameC");
  62     frameD = frameA.contentDocument.getElementById("frameD");
  63     frameE = frameD.contentDocument.getElementById("frameE");
  64
  65     var ids = [
  66     { id : "yellow" },
  67     { id : "greenyellow", frame : frameA },
  68     { id : "limegreen", frame: frameB },
  69     { id : "green", frame: frameC },
  70     { id : "pink", frame: frameD },
  71     { id : "hotpink", frame: frameE }];
  72
  73     var elements = [];
  74     ids.forEach(function(id) {
  75         var element = getElementById(id);
  76         elements.push(element);
  77     });
  78     registerElementsAndEventsToRecord(elements, ["mouseover", "mouseout", "mouseenter", "mouseleave"]);
  79 }
  80
  81 function doGesture(obj, base)
  82 {
  83     debug("-- sending gestureTap to " + obj.id + " --");
  84     var element = getElementById( { id : obj.id, frame : obj.frame });
  85
  86     var x = base.x + element.offsetLeft + element.offsetWidth / 2;
  87     var y = base.y + element.offsetTop + element.offsetHeight / 2;
  88     eventSender.gestureTap(x, y);
  89 }
  90
  91 function runTests()
  92 {
  93     init();
  94     if (window.eventSender) {
  95         debug("--- Tap tests ---");
  96
  97         var expectedOrder = [];
  98         beginRecordingEvents();
  99
 100         var greenX = frameA.offsetLeft + frameB.offsetLeft  + frameC.offsetLeft;;
 101         var greenY = frameA.offsetTop + frameB.offsetTop + frameC.offsetTop;;
 102
 103         doGesture({id: "green", frame: frameC}, {x: greenX, y: greenY});
 104         expectedOrder = expectedOrder.concat(yellowEnterOrder, greenEnterOrder);
 105         checkThatEventsFiredInOrder(expectedOrder);
 106
 107         doGesture({id: "green", frame: frameC}, {x: greenX, y: greenY});
 108         debug("There should not be any mouse event.");
 109         checkThatEventsFiredInOrder(expectedOrder);
 110
 111         var pinkX = frameA.offsetLeft + frameD.offsetLeft  + frameE.offsetLeft;;
 112         var pinkY = frameA.offsetTop + frameD.offsetTop + frameE.offsetTop;;
 113         doGesture({id: "hotpink", frame: frameE }, {x: pinkX, y: pinkY});
 114         expectedOrder = expectedOrder.concat(greenLeaveOrder, pinkEnterOrder);
 115         checkThatEventsFiredInOrder(expectedOrder);
 116
 117         doGesture({id: "hotpink", frame: frameE }, {x: pinkX, y: pinkY});
 118         debug("There should not be any mouse event.");
 119         checkThatEventsFiredInOrder(expectedOrder);
 120
 121         doGesture({id: "green", frame: frameC}, {x: greenX, y: greenY});
 122         expectedOrder = expectedOrder.concat(pinkLeaveOrder, greenEnterOrder);
 123         checkThatEventsFiredInOrder(expectedOrder);
 124         endRecordingEvents();
 125     } else {
 126         debug("This test requires eventSender");
 127     }
 128     finishJSTest();
 129 }
 130
 131 if (window.testRunner) {
 132     window.jsTestIsAsync = true;
 133     testRunner.waitUntilDone();
 134 }
 135
 136 window.onload = runTests;
 137 </script>