LayoutTests/editing/selection/user-drag-element-and-user-select-none.html - WebKit - Git at Google

 <html>
     <head>
         <title>Test for WebKit bug 15106: Dragging text inside an element with "user-drag: element" and "user-select: none" should initiate a drag</title>
         <style type="text/css">
             .test {
                 background-color: #ccc;
                 border: 1px solid #333;
                 width: 200px;
                 text-align: center;
                 margin: 10px;
             }

             .result {
                 float: right;
             }

             body > div {
                 clear: both;
                 padding-top: 15px;
             }

             #draggable {
                 -webkit-user-drag: element;
             }

             #unselectable {
                 -webkit-user-select: none;
             }

             #draggable-unselectable {
                 -webkit-user-drag: element;
                 -webkit-user-select: none;
             }

             .fail {
                 color: red;
             }

             .success {
                 color: green;
             }
         </style>

         <script type="text/javascript">
             function shouldBe(resultElement, expected, actual) {
                 var msg = document.createElement('p');
                 if (expected == actual) {
                     msg.innerHTML = "<span class='success'>SUCCESS</span> Expected '" + expected + "' and got it.";
                 } else {
                     msg.innerHTML = "<span class='fail'>FAIL</span> Expected '" + expected + "' but got '" + actual + "'.";
                 }
                 resultElement.appendChild(msg);
             }

             function compareResults(id, expectedResult, actualResult) {
                 var resultElement = document.getElementById(id + '-result');
                 shouldBe(resultElement, expectedResult.length, actualResult.length);
                 for (var i = 0; i < expectedResult.length; i++) {
                     shouldBe(resultElement, expectedResult[i], actualResult[i]);
                 }
             }

             function registerEventListenersWithResults(resultArray) {
                 document.ondragstart = function() {
                     resultArray.push('dragstart');
                 }

                 document.onmousedown = function(event) {
                     resultArray.push('mousedown');
                 }

                 document.onmouseup = function(event) {
                     resultArray.push('mouseup');
                     resultArray.push(window.getSelection().toString() == '' ? 'No selection' : 'Selection');
                 }
             }

             function dragFromTopOfElement(element, dragOffset) {
                 var startX = element.offsetLeft + element.offsetWidth / 2;
                 var startY = element.offsetTop + 1.0;
                 eventSender.mouseMoveTo(startX, startY);
                 eventSender.mouseDown();
                 eventSender.mouseMoveTo(startX, startY);

                 var endX = startX + dragOffset.x;
                 var endY = startY + dragOffset.y;
                 eventSender.mouseMoveTo(endX, endY);

                 eventSender.mouseUp()
             }

             function runTest() {
                 if (!window.eventSender)
                     return;

                 if (window.testRunner)
                     testRunner.dumpAsText();

                 var draggableResults = [];
                 registerEventListenersWithResults(draggableResults);
                 var draggable = document.getElementById('draggable');
                 dragFromTopOfElement(draggable, {x: 0, y: draggable.offsetHeight / 2});
                 compareResults("draggable", ["mousedown", "mouseup", "Selection"], draggableResults);

                 var unselectableResults = [];
                 registerEventListenersWithResults(unselectableResults);
                 var unselectable = document.getElementById('unselectable');
                 dragFromTopOfElement(unselectable, {x: 0, y: unselectable.offsetHeight / 2});
                 compareResults("unselectable", ["mousedown", "mouseup", "No selection"], unselectableResults);

                 var draggableUnselectableResults = [];
                 registerEventListenersWithResults(draggableUnselectableResults);
                 var draggableUnselectable = document.getElementById('draggable-unselectable');
                 dragFromTopOfElement(draggableUnselectable, {x: 0, y: draggableUnselectable.offsetHeight / 2});

                 // <https://bugs.webkit.org/show_bug.cgi?id=26758>: eventSender.mouseUp during a drag can dispatch a duplicate mouseup event on Mac OS X
                 if (draggableUnselectableResults.length == 6 && draggableUnselectableResults[4] == "mouseup" && draggableUnselectableResults[5] == "No selection")
                     draggableUnselectableResults = draggableUnselectableResults.slice(0, 4);

                 compareResults("draggable-unselectable", ["mousedown", "dragstart", "mouseup", "No selection"], draggableUnselectableResults);
             }
         </script>
     </head>
     <body onload="runTest()">
         <h3>Test for <a href='https://bugs.webkit.org/show_bug.cgi?id=15106'>WebKit bug 15106</a>: Dragging text inside an element with "user-drag: element" and "user-select: none" should initiate a drag</h3>

         <div>
             <div id="draggable-result" class="result"></div>
             <div id="draggable" class="test">
                 This element should be draggable, but initiating a drag from within the text should begin a selection.
             </div>
         </div>

         <div>
             <div id="unselectable-result" class="result"></div>
             <div id="unselectable" class="test">
                 This element should not be draggable, and initiating a drag from within the text should not begin a selection.
             </div>
         </div>

         <div>
             <div id="draggable-unselectable-result" class="result"></div>
             <div id="draggable-unselectable" class="test">
                 This element should be draggable, and initiating a drag from within the text should drag the element.
             </div>
         </div>
     </body>
 </html>
	<html>
	<head>
	<title>Test for WebKit bug 15106: Dragging text inside an element with "user-drag: element" and "user-select: none" should initiate a drag</title>
	<style type="text/css">
	.test {
	background-color: #ccc;
	border: 1px solid #333;
	width: 200px;
	text-align: center;
	margin: 10px;
	}

	.result {
	float: right;
	}

	body > div {
	clear: both;
	padding-top: 15px;
	}

	#draggable {
	-webkit-user-drag: element;
	}

	#unselectable {
	-webkit-user-select: none;
	}

	#draggable-unselectable {
	-webkit-user-drag: element;
	-webkit-user-select: none;
	}

	.fail {
	color: red;
	}

	.success {
	color: green;
	}
	</style>

	<script type="text/javascript">
	function shouldBe(resultElement, expected, actual) {
	var msg = document.createElement('p');
	if (expected == actual) {
	msg.innerHTML = "<span class='success'>SUCCESS</span> Expected '" + expected + "' and got it.";
	} else {
	msg.innerHTML = "<span class='fail'>FAIL</span> Expected '" + expected + "' but got '" + actual + "'.";
	}
	resultElement.appendChild(msg);
	}

	function compareResults(id, expectedResult, actualResult) {
	var resultElement = document.getElementById(id + '-result');
	shouldBe(resultElement, expectedResult.length, actualResult.length);
	for (var i = 0; i < expectedResult.length; i++) {
	shouldBe(resultElement, expectedResult[i], actualResult[i]);
	}
	}

	function registerEventListenersWithResults(resultArray) {
	document.ondragstart = function() {
	resultArray.push('dragstart');
	}

	document.onmousedown = function(event) {
	resultArray.push('mousedown');
	}

	document.onmouseup = function(event) {
	resultArray.push('mouseup');
	resultArray.push(window.getSelection().toString() == '' ? 'No selection' : 'Selection');
	}
	}

	function dragFromTopOfElement(element, dragOffset) {
	var startX = element.offsetLeft + element.offsetWidth / 2;
	var startY = element.offsetTop + 1.0;
	eventSender.mouseMoveTo(startX, startY);
	eventSender.mouseDown();
	eventSender.mouseMoveTo(startX, startY);

	var endX = startX + dragOffset.x;
	var endY = startY + dragOffset.y;
	eventSender.mouseMoveTo(endX, endY);

	eventSender.mouseUp()
	}

	function runTest() {
	if (!window.eventSender)
	return;

	if (window.testRunner)
	testRunner.dumpAsText();

	var draggableResults = [];
	registerEventListenersWithResults(draggableResults);
	var draggable = document.getElementById('draggable');
	dragFromTopOfElement(draggable, {x: 0, y: draggable.offsetHeight / 2});
	compareResults("draggable", ["mousedown", "mouseup", "Selection"], draggableResults);

	var unselectableResults = [];
	registerEventListenersWithResults(unselectableResults);
	var unselectable = document.getElementById('unselectable');
	dragFromTopOfElement(unselectable, {x: 0, y: unselectable.offsetHeight / 2});
	compareResults("unselectable", ["mousedown", "mouseup", "No selection"], unselectableResults);

	var draggableUnselectableResults = [];
	registerEventListenersWithResults(draggableUnselectableResults);
	var draggableUnselectable = document.getElementById('draggable-unselectable');
	dragFromTopOfElement(draggableUnselectable, {x: 0, y: draggableUnselectable.offsetHeight / 2});

	// <https://bugs.webkit.org/show_bug.cgi?id=26758>: eventSender.mouseUp during a drag can dispatch a duplicate mouseup event on Mac OS X
	if (draggableUnselectableResults.length == 6 && draggableUnselectableResults[4] == "mouseup" && draggableUnselectableResults[5] == "No selection")
	draggableUnselectableResults = draggableUnselectableResults.slice(0, 4);

	compareResults("draggable-unselectable", ["mousedown", "dragstart", "mouseup", "No selection"], draggableUnselectableResults);
	}
	</script>
	</head>
	<body onload="runTest()">
	<h3>Test for <a href='https://bugs.webkit.org/show_bug.cgi?id=15106'>WebKit bug 15106</a>: Dragging text inside an element with "user-drag: element" and "user-select: none" should initiate a drag</h3>

	<div>
	<div id="draggable-result" class="result"></div>
	<div id="draggable" class="test">
	This element should be draggable, but initiating a drag from within the text should begin a selection.
	</div>
	</div>

	<div>
	<div id="unselectable-result" class="result"></div>
	<div id="unselectable" class="test">
	This element should not be draggable, and initiating a drag from within the text should not begin a selection.
	</div>
	</div>

	<div>
	<div id="draggable-unselectable-result" class="result"></div>
	<div id="draggable-unselectable" class="test">
	This element should be draggable, and initiating a drag from within the text should drag the element.
	</div>
	</div>
	</body>
	</html>