third_party/WebKit/LayoutTests/fast/events/touch/gesture/gesture-tap-mouse-events-between-frames.html - chromium/src - Git at Google

 <!DOCTYPE HTML>
 <script src="../../../../resources/js-test.js"></script>
 <script src="../../resources/record-events.js"></script>
 <style>
 body { margin: 0px; }
 #spacer { height: 40px; }
 div.box { padding: 40px; }
 #yellow { background-color: yellow; }
 #console { padding: 0px; }
 iframe { margin: 0px; border: 0px; width: 100%; height: 320px; }
 </style>
 <div id="spacer"></div>
 <div class="box" id="yellow"><iframe src='resources/gesture-tap-mouse-events-between-frames-iframe1.html' id='frameA'></iframe></div>
 <div id="console"></div>
 <script>
 description("Verifies that mouse events are fired on tapping of gesture across frames in the correct order.");
 var frameA, frameB, frameC, frameD, frameE;

 var yellowEnterOrder = [
     ["yellow", "mouseover"],
     ["yellow", "mouseenter"],
     ["greenyellow", "mouseover"],
     ["greenyellow", "mouseenter"]];

 var greenEnterOrder = [
     ["limegreen", "mouseover"],
     ["limegreen", "mouseenter"],
     ["green", "mouseover"],
     ["green", "mouseenter"]];

 var greenLeaveOrder = [
     ["green", "mouseout"],
     ["green", "mouseleave"],
     ["limegreen", "mouseout"],
     ["limegreen", "mouseleave"],
     ["greenyellow", "mouseout"],
     ["greenyellow", "mouseover"]];

 var pinkEnterOrder = [
     ["pink", "mouseover"],
     ["pink", "mouseenter"],
     ["hotpink", "mouseover"],
     ["hotpink", "mouseenter"]];

 var pinkLeaveOrder = [
     ["hotpink", "mouseout"],
     ["hotpink", "mouseleave"],
     ["pink", "mouseout"],
     ["pink", "mouseleave"],
     ["greenyellow", "mouseout"],
     ["greenyellow", "mouseover"]];

 function getElementById(obj)
 {
     if (obj.frame)
         return obj.frame.contentDocument.getElementById(obj.id);
     return document.getElementById(obj.id);
 }

 function init() {
     frameA = document.getElementById("frameA");
     frameB = frameA.contentDocument.getElementById("frameB");
     frameC = frameB.contentDocument.getElementById("frameC");
     frameD = frameA.contentDocument.getElementById("frameD");
     frameE = frameD.contentDocument.getElementById("frameE");

     var ids = [
     { id : "yellow" },
     { id : "greenyellow", frame : frameA },
     { id : "limegreen", frame: frameB },
     { id : "green", frame: frameC },
     { id : "pink", frame: frameD },
     { id : "hotpink", frame: frameE }];

     var elements = [];
     ids.forEach(function(id) {
         var element = getElementById(id);
         elements.push(element);
     });
     registerElementsAndEventsToRecord(elements, ["mouseover", "mouseout", "mouseenter", "mouseleave"]);
 }

 function doGesture(obj, base)
 {
     debug("-- sending gestureTap to " + obj.id + " --");
     var element = getElementById( { id : obj.id, frame : obj.frame });

     var x = base.x + element.offsetLeft + element.offsetWidth / 2;
     var y = base.y + element.offsetTop + element.offsetHeight / 2;
     eventSender.gestureTap(x, y);
 }

 function runTests()
 {
     init();
     if (window.eventSender) {
         debug("--- Tap tests ---");

         var expectedOrder = [];
         beginRecordingEvents();

         var greenX = frameA.offsetLeft + frameB.offsetLeft  + frameC.offsetLeft;;
         var greenY = frameA.offsetTop + frameB.offsetTop + frameC.offsetTop;;

         doGesture({id: "green", frame: frameC}, {x: greenX, y: greenY});
         expectedOrder = expectedOrder.concat(yellowEnterOrder, greenEnterOrder);
         checkThatEventsFiredInOrder(expectedOrder);

         doGesture({id: "green", frame: frameC}, {x: greenX, y: greenY});
         debug("There should not be any mouse event.");
         checkThatEventsFiredInOrder(expectedOrder);

         var pinkX = frameA.offsetLeft + frameD.offsetLeft  + frameE.offsetLeft;;
         var pinkY = frameA.offsetTop + frameD.offsetTop + frameE.offsetTop;;
         doGesture({id: "hotpink", frame: frameE }, {x: pinkX, y: pinkY});
         expectedOrder = expectedOrder.concat(greenLeaveOrder, pinkEnterOrder);
         checkThatEventsFiredInOrder(expectedOrder);

         doGesture({id: "hotpink", frame: frameE }, {x: pinkX, y: pinkY});
         debug("There should not be any mouse event.");
         checkThatEventsFiredInOrder(expectedOrder);

         doGesture({id: "green", frame: frameC}, {x: greenX, y: greenY});
         expectedOrder = expectedOrder.concat(pinkLeaveOrder, greenEnterOrder);
         checkThatEventsFiredInOrder(expectedOrder);
         endRecordingEvents();
     } else {
         debug("This test requires eventSender");
     }
     finishJSTest();
 }

 if (window.testRunner) {
     window.jsTestIsAsync = true;
     testRunner.waitUntilDone();
 }

 window.onload = runTests;
 </script>
	<!DOCTYPE HTML>
	<script src="../../../../resources/js-test.js"></script>
	<script src="../../resources/record-events.js"></script>
	<style>
	body { margin: 0px; }
	#spacer { height: 40px; }
	div.box { padding: 40px; }
	#yellow { background-color: yellow; }
	#console { padding: 0px; }
	iframe { margin: 0px; border: 0px; width: 100%; height: 320px; }
	</style>
	<div id="spacer"></div>
	<div class="box" id="yellow"><iframe src='resources/gesture-tap-mouse-events-between-frames-iframe1.html' id='frameA'></iframe></div>
	<div id="console"></div>
	<script>
	description("Verifies that mouse events are fired on tapping of gesture across frames in the correct order.");
	var frameA, frameB, frameC, frameD, frameE;

	var yellowEnterOrder = [
	["yellow", "mouseover"],
	["yellow", "mouseenter"],
	["greenyellow", "mouseover"],
	["greenyellow", "mouseenter"]];

	var greenEnterOrder = [
	["limegreen", "mouseover"],
	["limegreen", "mouseenter"],
	["green", "mouseover"],
	["green", "mouseenter"]];

	var greenLeaveOrder = [
	["green", "mouseout"],
	["green", "mouseleave"],
	["limegreen", "mouseout"],
	["limegreen", "mouseleave"],
	["greenyellow", "mouseout"],
	["greenyellow", "mouseover"]];

	var pinkEnterOrder = [
	["pink", "mouseover"],
	["pink", "mouseenter"],
	["hotpink", "mouseover"],
	["hotpink", "mouseenter"]];

	var pinkLeaveOrder = [
	["hotpink", "mouseout"],
	["hotpink", "mouseleave"],
	["pink", "mouseout"],
	["pink", "mouseleave"],
	["greenyellow", "mouseout"],
	["greenyellow", "mouseover"]];

	function getElementById(obj)
	{
	if (obj.frame)
	return obj.frame.contentDocument.getElementById(obj.id);
	return document.getElementById(obj.id);
	}

	function init() {
	frameA = document.getElementById("frameA");
	frameB = frameA.contentDocument.getElementById("frameB");
	frameC = frameB.contentDocument.getElementById("frameC");
	frameD = frameA.contentDocument.getElementById("frameD");
	frameE = frameD.contentDocument.getElementById("frameE");

	var ids = [
	{ id : "yellow" },
	{ id : "greenyellow", frame : frameA },
	{ id : "limegreen", frame: frameB },
	{ id : "green", frame: frameC },
	{ id : "pink", frame: frameD },
	{ id : "hotpink", frame: frameE }];

	var elements = [];
	ids.forEach(function(id) {
	var element = getElementById(id);
	elements.push(element);
	});
	registerElementsAndEventsToRecord(elements, ["mouseover", "mouseout", "mouseenter", "mouseleave"]);
	}

	function doGesture(obj, base)
	{
	debug("-- sending gestureTap to " + obj.id + " --");
	var element = getElementById( { id : obj.id, frame : obj.frame });

	var x = base.x + element.offsetLeft + element.offsetWidth / 2;
	var y = base.y + element.offsetTop + element.offsetHeight / 2;
	eventSender.gestureTap(x, y);
	}

	function runTests()
	{
	init();
	if (window.eventSender) {
	debug("--- Tap tests ---");

	var expectedOrder = [];
	beginRecordingEvents();

	var greenX = frameA.offsetLeft + frameB.offsetLeft + frameC.offsetLeft;;
	var greenY = frameA.offsetTop + frameB.offsetTop + frameC.offsetTop;;

	doGesture({id: "green", frame: frameC}, {x: greenX, y: greenY});
	expectedOrder = expectedOrder.concat(yellowEnterOrder, greenEnterOrder);
	checkThatEventsFiredInOrder(expectedOrder);

	doGesture({id: "green", frame: frameC}, {x: greenX, y: greenY});
	debug("There should not be any mouse event.");
	checkThatEventsFiredInOrder(expectedOrder);

	var pinkX = frameA.offsetLeft + frameD.offsetLeft + frameE.offsetLeft;;
	var pinkY = frameA.offsetTop + frameD.offsetTop + frameE.offsetTop;;
	doGesture({id: "hotpink", frame: frameE }, {x: pinkX, y: pinkY});
	expectedOrder = expectedOrder.concat(greenLeaveOrder, pinkEnterOrder);
	checkThatEventsFiredInOrder(expectedOrder);

	doGesture({id: "hotpink", frame: frameE }, {x: pinkX, y: pinkY});
	debug("There should not be any mouse event.");
	checkThatEventsFiredInOrder(expectedOrder);

	doGesture({id: "green", frame: frameC}, {x: greenX, y: greenY});
	expectedOrder = expectedOrder.concat(pinkLeaveOrder, greenEnterOrder);
	checkThatEventsFiredInOrder(expectedOrder);
	endRecordingEvents();
	} else {
	debug("This test requires eventSender");
	}
	finishJSTest();
	}

	if (window.testRunner) {
	window.jsTestIsAsync = true;
	testRunner.waitUntilDone();
	}

	window.onload = runTests;
	</script>