3 <title>Test for WebKit bug 15106: Dragging text inside an element with "user-drag: element" and "user-select: none" should initiate a drag</title>
4 <style type="text/css">
6 background-color: #ccc;
7 border: 1px solid #333;
23 -webkit-user-drag: element;
27 -webkit-user-select: none;
30 #draggable-unselectable {
31 -webkit-user-drag: element;
32 -webkit-user-select: none;
44 <script type="text/javascript">
45 function shouldBe(resultElement, expected, actual) {
46 var msg = document.createElement('p');
47 if (expected == actual) {
48 msg.innerHTML = "<span class='success'>SUCCESS</span> Expected '" + expected + "' and got it.";
50 msg.innerHTML = "<span class='fail'>FAIL</span> Expected '" + expected + "' but got '" + actual + "'.";
52 resultElement.appendChild(msg);
55 function compareResults(id, expectedResult, actualResult) {
56 var resultElement = document.getElementById(id + '-result');
57 shouldBe(resultElement, expectedResult.length, actualResult.length);
58 for (var i = 0; i < expectedResult.length; i++) {
59 shouldBe(resultElement, expectedResult[i], actualResult[i]);
63 function registerEventListenersWithResults(resultArray) {
64 document.ondragstart = function() {
65 resultArray.push('dragstart');
68 document.onmousedown = function(event) {
69 resultArray.push('mousedown');
72 document.onmouseup = function(event) {
73 resultArray.push('mouseup');
74 resultArray.push(window.getSelection().toString() == '' ? 'No selection' : 'Selection');
78 function dragFromTopOfElement(element, dragOffset) {
79 var startX = Math.round(element.offsetLeft + element.offsetWidth / 2);
80 var startY = Math.round(element.offsetTop + 1.0);
81 eventSender.mouseMoveTo(startX, startY);
82 eventSender.mouseDown();
83 eventSender.mouseMoveTo(startX, startY);
85 var endX = Math.round(startX + dragOffset.x);
86 var endY = Math.round(startY + dragOffset.y);
87 eventSender.mouseMoveTo(endX, endY);
93 if (!window.eventSender)
96 if (window.testRunner)
97 testRunner.dumpAsText();
99 var draggableResults = [];
100 registerEventListenersWithResults(draggableResults);
101 var draggable = document.getElementById('draggable');
102 dragFromTopOfElement(draggable, {x: 0, y: draggable.offsetHeight / 2});
103 compareResults("draggable", ["mousedown", "mouseup", "Selection"], draggableResults);
105 var unselectableResults = [];
106 registerEventListenersWithResults(unselectableResults);
107 var unselectable = document.getElementById('unselectable');
108 dragFromTopOfElement(unselectable, {x: 0, y: unselectable.offsetHeight / 2});
109 compareResults("unselectable", ["mousedown", "mouseup", "No selection"], unselectableResults);
111 var draggableUnselectableResults = [];
112 registerEventListenersWithResults(draggableUnselectableResults);
113 var draggableUnselectable = document.getElementById('draggable-unselectable');
114 dragFromTopOfElement(draggableUnselectable, {x: 0, y: draggableUnselectable.offsetHeight / 2});
116 // <https://bugs.webkit.org/show_bug.cgi?id=26758>: eventSender.mouseUp during a drag can dispatch a duplicate mouseup event on Mac OS X
117 if (draggableUnselectableResults.length == 6 && draggableUnselectableResults[4] == "mouseup" && draggableUnselectableResults[5] == "No selection")
118 draggableUnselectableResults = draggableUnselectableResults.slice(0, 4);
120 compareResults("draggable-unselectable", ["mousedown", "dragstart", "mouseup", "No selection"], draggableUnselectableResults);
124 <body onload="runTest()">
125 <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>
128 <div id="draggable-result" class="result"></div>
129 <div id="draggable" class="test">
130 This element should be draggable, but initiating a drag from within the text should begin a selection.
135 <div id="unselectable-result" class="result"></div>
136 <div id="unselectable" class="test">
137 This element should not be draggable, and initiating a drag from within the text should not begin a selection.
142 <div id="draggable-unselectable-result" class="result"></div>
143 <div id="draggable-unselectable" class="test">
144 This element should be draggable, and initiating a drag from within the text should drag the element.