third_party/WebKit/LayoutTests/fast/events/pointerevents/mouse-pointer-capture.html - chromium/src - Git at Google

 <!DOCTYPE HTML>
 <script src="../../../resources/js-test.js"></script>
 <style>
 div.box {
   margin: 5px;
   padding: 20px;
   float: left;
 }
 #grey {
   width: 50px;
   height: 50px;
 }
 </style>

 <div id="grey" class="box" style="background-color:grey">
   <div id="green" class="box" style="background-color:green;">
   </div>
 </div>
 <div id="blue" class="box" style="background-color:blue;">
 </div>

 <div id="console"></div>

 <script>
 description("Verifies that pointer capture works for mouse.");

 var implicitReleaseOutside = false;
 var explicitRelease = false;
 var removeElement = false;
 var pointerMoveCount = 0;

 var rect = document.getElementById("green").getBoundingClientRect();
 var x1 = rect.left + 5;
 var y1 = rect.top + 5;

 var rect = document.getElementById("grey").getBoundingClientRect();
 var x2 = rect.left + 5;
 var y2 = rect.top + 5;

 var rect = document.getElementById("blue").getBoundingClientRect();
 var x3 = rect.left + 5;
 var y3 = rect.top + 5;

 var lastPointerEvent = null;
 var pointereventProperties = [
     "clientX",
     "clientY",
     "layerX",
     "layerY",
     "movementX",
     "movementY",
     "offsetX",
     "offsetY",
     "pageX",
     "pageY",
     "screenX",
     "screenY",
     "x",
     "y",
     "button",
     "buttons",
     "pressure",
     "tiltX",
     "tiltY",
     "width",
     "height"
 ];

 function checkPointerCaptureProperties(lastPointerEvent, currentPointerEvent) {
   if (lastPointerEvent == null || lastPointerEvent.target == document)
     return false;

   var isImmediateRelease = (lastPointerEvent.type == 'pointerup') &&
                            (currentPointerEvent.type == 'lostpointercapture');
   var isDelayedCapture = lastPointerEvent.type.includes('pointercapture');

   if (!isImmediateRelease && !isDelayedCapture)
     return false;

   for (var i = 0; i < pointereventProperties.length; i++) {
     var property = pointereventProperties[i];
     if (lastPointerEvent[property] !== currentPointerEvent[property]) {
       debug("Capture pointer event attributes are incorrect! ");
       return true;
     }
   }

   debug("Capture pointer event attributes are correct!");
   return true
 }

 function init() {
   var eventList = ["mouseenter", "mouseleave", "mouseover", "mouseout", "mousemove", "mousedown", "mouseup",
                    "pointerenter", "pointerleave", "pointerover", "pointerout", "pointermove", "pointerdown", "pointerup",
                    "gotpointercapture", "lostpointercapture"];

   document.addEventListener("lostpointercapture", function(event) {
     if (event.eventPhase == Event.AT_TARGET) {
       debug("document received " + event.type);
       lastPointerEvent = event;
     }
   });
   ["grey", "green", "blue"].forEach(function(id) {
     var targetDiv = document.getElementById(id);
     eventList.forEach(function(eventName) {
       targetDiv.addEventListener(eventName, function(event) {
         if (event.eventPhase == Event.AT_TARGET) {
           debug(id + " received " + event.type);
           if (id == "green" && event.type == "pointerdown") {
             debug("    **** Set Pointer Capture  ***** ");
             targetDiv.setPointerCapture(event.pointerId);
           }
           if (id == "green" && event.type == "pointermove") {
             if (explicitRelease && pointerMoveCount++ > 3) {
               debug("    **** Release Pointer Capture  ***** ");
               targetDiv.releasePointerCapture(event.pointerId);
               explicitRelease = false;
             }
             if (removeElement && pointerMoveCount++ > 3) {
               debug("    **** Remove Element ***** ");
               targetDiv.parentNode.removeChild(targetDiv);
               removeElement = false;
             }
           }
           if (checkPointerCaptureProperties(lastPointerEvent, event)) {
               lastPointerEvent = null;
           } else {
             if (event.type.includes('pointer'))
               lastPointerEvent = event;
           }
         }
       });
     });
   });
 }

 function testScenario() {
   debug("    **** Move to green box & mouse press & jiggle ***** ");
   eventSender.mouseMoveTo(x1, y1);
   eventSender.mouseDown(1);
   eventSender.mouseMoveTo(x1+1, y1+1);

   debug("    **** Move to grey box & jiggle ***** ");
   eventSender.mouseMoveTo(x2, y2);
   eventSender.mouseMoveTo(x2+1, y2+1);

   debug("    **** Move to blue box & jiggle ****");
   eventSender.mouseMoveTo(x3, y3);

   if (implicitReleaseOutside) {
     debug("    **** Release the mouse outside of the page & move back to blue box ****");
     eventSender.setMouseButtonState(-1, []);
   }
   eventSender.mouseMoveTo(x3+1, y3+1);
   eventSender.mouseMoveTo(x3, y3);

   if (!implicitReleaseOutside) {
     debug("    **** Move back to green & again to blue & mouse release ***** ");
     eventSender.mouseMoveTo(x1, y1);
     eventSender.mouseMoveTo(x3, y3);
     eventSender.mouseUp(1);

     debug("    **** Jiggle in blue box ***** ");
     eventSender.mouseMoveTo(x3+1, y3+1);
   }

   debug("    **** Move to (0,0) ***** ");
   eventSender.mouseMoveTo(0, 0);
   eventSender.mouseDown(0);
   eventSender.mouseUp(0);
   eventSender.leapForward(500);
 }

 function runTests() {
   // TODO(mustaq): Merge with mouse-pointer-haspointercapture.html for a single w3c test?

   debug(" ======= Set pointer capture and release implicitly  =======");
   testScenario();

   implicitReleaseOutside = true;
   debug("");
   debug(" ======= Set pointer capture and release implicitly outside of the page =======");
   testScenario();
   implicitReleaseOutside = false;

   explicitRelease = true;
   pointerMoveCount = 0;
   debug("");
   debug(" ======= Set pointer capture and release explicitly  =======");
   testScenario();
   explicitRelease = false;

   removeElement = true;
   pointerMoveCount = 0;
   debug("");
   debug(" ======= Set pointer capture and remove element  =======");
   testScenario();
   removeElement = false;
 }

 init();
 if (window.eventSender)
   runTests();
 else
   debug("This test requires eventSender");

 </script>
	<!DOCTYPE HTML>
	<script src="../../../resources/js-test.js"></script>
	<style>
	div.box {
	margin: 5px;
	padding: 20px;
	float: left;
	}
	#grey {
	width: 50px;
	height: 50px;
	}
	</style>

	<div id="grey" class="box" style="background-color:grey">
	<div id="green" class="box" style="background-color:green;">
	</div>
	</div>
	<div id="blue" class="box" style="background-color:blue;">
	</div>

	<div id="console"></div>

	<script>
	description("Verifies that pointer capture works for mouse.");

	var implicitReleaseOutside = false;
	var explicitRelease = false;
	var removeElement = false;
	var pointerMoveCount = 0;

	var rect = document.getElementById("green").getBoundingClientRect();
	var x1 = rect.left + 5;
	var y1 = rect.top + 5;

	var rect = document.getElementById("grey").getBoundingClientRect();
	var x2 = rect.left + 5;
	var y2 = rect.top + 5;

	var rect = document.getElementById("blue").getBoundingClientRect();
	var x3 = rect.left + 5;
	var y3 = rect.top + 5;

	var lastPointerEvent = null;
	var pointereventProperties = [
	"clientX",
	"clientY",
	"layerX",
	"layerY",
	"movementX",
	"movementY",
	"offsetX",
	"offsetY",
	"pageX",
	"pageY",
	"screenX",
	"screenY",
	"x",
	"y",
	"button",
	"buttons",
	"pressure",
	"tiltX",
	"tiltY",
	"width",
	"height"
	];

	function checkPointerCaptureProperties(lastPointerEvent, currentPointerEvent) {
	if (lastPointerEvent == null \|\| lastPointerEvent.target == document)
	return false;

	var isImmediateRelease = (lastPointerEvent.type == 'pointerup') &&
	(currentPointerEvent.type == 'lostpointercapture');
	var isDelayedCapture = lastPointerEvent.type.includes('pointercapture');

	if (!isImmediateRelease && !isDelayedCapture)
	return false;

	for (var i = 0; i < pointereventProperties.length; i++) {
	var property = pointereventProperties[i];
	if (lastPointerEvent[property] !== currentPointerEvent[property]) {
	debug("Capture pointer event attributes are incorrect! ");
	return true;
	}
	}

	debug("Capture pointer event attributes are correct!");
	return true
	}

	function init() {
	var eventList = ["mouseenter", "mouseleave", "mouseover", "mouseout", "mousemove", "mousedown", "mouseup",
	"pointerenter", "pointerleave", "pointerover", "pointerout", "pointermove", "pointerdown", "pointerup",
	"gotpointercapture", "lostpointercapture"];

	document.addEventListener("lostpointercapture", function(event) {
	if (event.eventPhase == Event.AT_TARGET) {
	debug("document received " + event.type);
	lastPointerEvent = event;
	}
	});
	["grey", "green", "blue"].forEach(function(id) {
	var targetDiv = document.getElementById(id);
	eventList.forEach(function(eventName) {
	targetDiv.addEventListener(eventName, function(event) {
	if (event.eventPhase == Event.AT_TARGET) {
	debug(id + " received " + event.type);
	if (id == "green" && event.type == "pointerdown") {
	debug(" ** Set Pointer Capture *** ");
	targetDiv.setPointerCapture(event.pointerId);
	}
	if (id == "green" && event.type == "pointermove") {
	if (explicitRelease && pointerMoveCount++ > 3) {
	debug(" ** Release Pointer Capture *** ");
	targetDiv.releasePointerCapture(event.pointerId);
	explicitRelease = false;
	}
	if (removeElement && pointerMoveCount++ > 3) {
	debug(" ** Remove Element *** ");
	targetDiv.parentNode.removeChild(targetDiv);
	removeElement = false;
	}
	}
	if (checkPointerCaptureProperties(lastPointerEvent, event)) {
	lastPointerEvent = null;
	} else {
	if (event.type.includes('pointer'))
	lastPointerEvent = event;
	}
	}
	});
	});
	});
	}

	function testScenario() {
	debug(" ** Move to green box & mouse press & jiggle *** ");
	eventSender.mouseMoveTo(x1, y1);
	eventSender.mouseDown(1);
	eventSender.mouseMoveTo(x1+1, y1+1);

	debug(" ** Move to grey box & jiggle *** ");
	eventSender.mouseMoveTo(x2, y2);
	eventSender.mouseMoveTo(x2+1, y2+1);

	debug(" ** Move to blue box & jiggle **");
	eventSender.mouseMoveTo(x3, y3);

	if (implicitReleaseOutside) {
	debug(" ** Release the mouse outside of the page & move back to blue box **");
	eventSender.setMouseButtonState(-1, []);
	}
	eventSender.mouseMoveTo(x3+1, y3+1);
	eventSender.mouseMoveTo(x3, y3);

	if (!implicitReleaseOutside) {
	debug(" ** Move back to green & again to blue & mouse release *** ");
	eventSender.mouseMoveTo(x1, y1);
	eventSender.mouseMoveTo(x3, y3);
	eventSender.mouseUp(1);

	debug(" ** Jiggle in blue box *** ");
	eventSender.mouseMoveTo(x3+1, y3+1);
	}

	debug(" ** Move to (0,0) *** ");
	eventSender.mouseMoveTo(0, 0);
	eventSender.mouseDown(0);
	eventSender.mouseUp(0);
	eventSender.leapForward(500);
	}

	function runTests() {
	// TODO(mustaq): Merge with mouse-pointer-haspointercapture.html for a single w3c test?

	debug(" ======= Set pointer capture and release implicitly =======");
	testScenario();

	implicitReleaseOutside = true;
	debug("");
	debug(" ======= Set pointer capture and release implicitly outside of the page =======");
	testScenario();
	implicitReleaseOutside = false;

	explicitRelease = true;
	pointerMoveCount = 0;
	debug("");
	debug(" ======= Set pointer capture and release explicitly =======");
	testScenario();
	explicitRelease = false;

	removeElement = true;
	pointerMoveCount = 0;
	debug("");
	debug(" ======= Set pointer capture and remove element =======");
	testScenario();
	removeElement = false;
	}

	init();
	if (window.eventSender)
	runTests();
	else
	debug("This test requires eventSender");

	</script>