third_party/WebKit/LayoutTests/editing/selection/user-drag-element-and-user-select-none.html

   1 <html>
   2     <head>
   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">
   5             .test {
   6                 background-color: #ccc;
   7                 border: 1px solid #333;
   8                 width: 200px;
   9                 text-align: center;
  10                 margin: 10px;
  11             }
  12
  13             .result {
  14                 float: right;
  15             }
  16
  17             body > div {
  18                 clear: both;
  19                 padding-top: 15px;
  20             }
  21
  22             #draggable {
  23                 -webkit-user-drag: element;
  24             }
  25
  26             #unselectable {
  27                 -webkit-user-select: none;
  28             }
  29
  30             #draggable-unselectable {
  31                 -webkit-user-drag: element;
  32                 -webkit-user-select: none;
  33             }
  34
  35             .fail {
  36                 color: red;
  37             }
  38
  39             .success {
  40                 color: green;
  41             }
  42         </style>
  43
  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.";
  49                 } else {
  50                     msg.innerHTML = "<span class='fail'>FAIL</span> Expected '" + expected + "' but got '" + actual + "'.";
  51                 }
  52                 resultElement.appendChild(msg);
  53             }
  54
  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]);
  60                 }
  61             }
  62
  63             function registerEventListenersWithResults(resultArray) {
  64                 document.ondragstart = function() {
  65                     resultArray.push('dragstart');
  66                 }
  67
  68                 document.onmousedown = function(event) {
  69                     resultArray.push('mousedown');
  70                 }
  71
  72                 document.onmouseup = function(event) {
  73                     resultArray.push('mouseup');
  74                     resultArray.push(window.getSelection().toString() == '' ? 'No selection' : 'Selection');
  75                 }
  76             }
  77
  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);
  84
  85                 var endX = Math.round(startX + dragOffset.x);
  86                 var endY = Math.round(startY + dragOffset.y);
  87                 eventSender.mouseMoveTo(endX, endY);
  88
  89                 eventSender.mouseUp()
  90             }
  91
  92             function runTest() {
  93                 if (!window.eventSender)
  94                     return;
  95
  96                 if (window.testRunner)
  97                     testRunner.dumpAsText();
  98
  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);
 104
 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);
 110
 111                 var draggableUnselectableResults = [];
 112                 registerEventListenersWithResults(draggableUnselectableResults);
 113                 var draggableUnselectable = document.getElementById('draggable-unselectable');
 114                 dragFromTopOfElement(draggableUnselectable, {x: 0, y: draggableUnselectable.offsetHeight / 2});
 115
 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);
 119
 120                 compareResults("draggable-unselectable", ["mousedown", "dragstart", "mouseup", "No selection"], draggableUnselectableResults);
 121             }
 122         </script>
 123     </head>
 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>
 126
 127         <div>
 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.
 131             </div>
 132         </div>
 133
 134         <div>
 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.
 138             </div>
 139         </div>
 140
 141         <div>
 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.
 145             </div>
 146         </div>
 147     </body>
 148 </html>