| <!DOCTYPE html> |
| <script src="../../../resources/testharness.js"></script> |
| <script src="../../../resources/testharnessreport.js"></script> |
| <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; |
| } |
| |
| body > div { |
| clear: both; |
| padding-top: 15px; |
| } |
| </style> |
| </head> |
| <body> |
| <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" class="test" style="-webkit-user-drag: element;"> |
| This element should be draggable, but initiating a drag from within the text should begin a selection. |
| </div> |
| </div> |
| |
| <div> |
| <div id="unselectable" class="test" style="-webkit-user-select: none;"> |
| 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" class="test" style="-webkit-user-drag: element; -webkit-user-select: none;"> |
| This element should be draggable, and initiating a drag from within the text should drag the element. |
| </div> |
| </div> |
| <div id="log"></div> |
| <script type="text/javascript"> |
| function compareResults(id, expectedResult, actualResult) { |
| var resultElement = document.getElementById(id + '-result'); |
| assert_equals(actualResult.length, expectedResult.length, 'results length'); |
| for (var i = 0; i < expectedResult.length; i++) { |
| assert_equals(actualResult[i], expectedResult[i], 'action'); |
| } |
| } |
| |
| 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) { |
| var startX = Math.round(element.offsetLeft + element.offsetWidth / 2); |
| var startY = Math.round(element.offsetTop + 1.0); |
| |
| eventSender.mouseMoveTo(startX, startY); |
| eventSender.mouseDown(); |
| eventSender.mouseMoveTo(startX, startY + element.offsetHeight / 2); |
| eventSender.mouseUp(); |
| } |
| |
| test(function () { |
| getSelection().removeAllRanges(); |
| var draggableResults = []; |
| registerEventListenersWithResults(draggableResults); |
| var draggable = document.getElementById('draggable'); |
| dragFromTopOfElement(draggable); |
| compareResults('draggable', ['mousedown', 'mouseup', 'Selection'], draggableResults); |
| }); |
| |
| test(function () { |
| getSelection().removeAllRanges(); |
| var unselectableResults = []; |
| registerEventListenersWithResults(unselectableResults); |
| var unselectable = document.getElementById('unselectable'); |
| dragFromTopOfElement(unselectable); |
| compareResults('unselectable', ['mousedown', 'mouseup', 'No selection'], unselectableResults); |
| }); |
| |
| test(function () { |
| getSelection().removeAllRanges(); |
| var draggableUnselectableResults = []; |
| registerEventListenersWithResults(draggableUnselectableResults); |
| var draggableUnselectable = document.getElementById('draggable-unselectable'); |
| dragFromTopOfElement(draggableUnselectable); |
| compareResults('draggable-unselectable', ['mousedown', 'dragstart'], draggableUnselectableResults); |
| }); |
| </script> |
| </body> |
