third_party/WebKit/LayoutTests/inspector/console/console-viewport-selection.html

   1 <html>
   2 <head>
   3 <script src="../../http/tests/inspector/inspector-test.js"></script>
   4 <script src="../../http/tests/inspector/console-test.js"></script>
   5 <script>
   6 function populateConsoleWithMessages(count)
   7 {
   8     for (var i = 0; i < count - 1; ++i)
   9         console.log("Message #" + i);
  10     console.log("hello %cworld", "color: blue");
  11 }
  12 //# sourceURL=console-viewport-selection.html
  13 </script>
  14
  15 <script>
  16 function test()
  17 {
  18     InspectorTest.fixConsoleViewportDimensions(600, 200);
  19     var consoleView = WebInspector.ConsolePanel._view();
  20     var viewport = consoleView._viewport;
  21     const minimumViewportMessagesCount = 10;
  22     const messagesCount = 150;
  23     const middleMessage = messagesCount / 2;
  24     var viewportMessagesCount;
  25
  26     var testSuite = [
  27         function verifyViewportIsTallEnough(next)
  28         {
  29             viewport.invalidate();
  30             viewport.forceScrollItemToBeFirst(0);
  31             viewportMessagesCount = viewport.lastVisibleIndex() - viewport.firstVisibleIndex() + 1;
  32             if (viewportMessagesCount < minimumViewportMessagesCount) {
  33                 InspectorTest.addResult(String.sprintf("Test cannot be run as viewport is not tall enough. It is required to contain at least %d messages, but %d only fit", minimumViewportMessagesCount, viewportMessagesCount));
  34                 InspectorTest.completeTest();
  35                 return;
  36             }
  37             InspectorTest.addResult(String.sprintf("Viewport contains %d messages", viewportMessagesCount));
  38             next();
  39         },
  40
  41         function testSelectionSingleLineText(next)
  42         {
  43             selectMessages(middleMessage, 2, middleMessage, 7);
  44             dumpSelectionText();
  45             dumpViewportRenderedItems();
  46             next();
  47         },
  48
  49         function testReversedSelectionSingleLineText(next)
  50         {
  51             selectMessages(middleMessage, 7, middleMessage, 2);
  52             dumpSelectionText();
  53             dumpViewportRenderedItems();
  54             next();
  55         },
  56
  57         function testSelectionMultiLineText(next)
  58         {
  59             selectMessages(middleMessage - 1, 4, middleMessage + 1, 7);
  60             dumpSelectionText();
  61             dumpViewportRenderedItems();
  62             next();
  63         },
  64
  65         function testSimpleVisibleSelection(next)
  66         {
  67             selectMessages(middleMessage - 3, 6, middleMessage + 2, 6);
  68             dumpSelectionModel();
  69             dumpViewportRenderedItems();
  70             next();
  71         },
  72
  73         function testHalfScrollSelectionUp(next)
  74         {
  75             viewport.forceScrollItemToBeFirst(middleMessage);
  76             dumpSelectionModel();
  77             dumpViewportRenderedItems();
  78             next();
  79         },
  80
  81         function testHalfScrollSelectionDown(next)
  82         {
  83             viewport.forceScrollItemToBeFirst(middleMessage - viewportMessagesCount + 1);
  84             dumpSelectionModel();
  85             dumpViewportRenderedItems();
  86             next();
  87         },
  88
  89         function testScrollSelectionAwayUp(next)
  90         {
  91             viewport.forceScrollItemToBeFirst(0);
  92             dumpSelectionModel();
  93             dumpViewportRenderedItems();
  94             next();
  95         },
  96
  97         function testScrollSelectionAwayDown(next)
  98         {
  99             consoleView._immediatelyScrollToBottom();
 100             viewport.refresh();
 101             dumpSelectionModel();
 102             dumpViewportRenderedItems();
 103             next();
 104         },
 105
 106         function testShiftClickSelectionOver(next)
 107         {
 108             emulateShiftClickOnMessage(minimumViewportMessagesCount);
 109             dumpSelectionModel();
 110             dumpViewportRenderedItems();
 111             next();
 112         },
 113
 114         function testShiftClickSelectionBelow(next)
 115         {
 116             emulateShiftClickOnMessage(messagesCount - minimumViewportMessagesCount);
 117             dumpSelectionModel();
 118             dumpViewportRenderedItems();
 119             next();
 120         },
 121
 122         function testRemoveSelection(next)
 123         {
 124             var selection = window.getSelection();
 125             selection.removeAllRanges();
 126             dumpSelectionModel();
 127             dumpViewportRenderedItems();
 128             next();
 129         },
 130
 131         function testReversedVisibleSelection(next)
 132         {
 133             selectMessages(middleMessage + 1, 6, middleMessage - 4, 6);
 134             dumpSelectionModel();
 135             dumpViewportRenderedItems();
 136             next();
 137         },
 138
 139         function testShiftClickReversedSelectionOver(next)
 140         {
 141             emulateShiftClickOnMessage(minimumViewportMessagesCount);
 142             dumpSelectionModel();
 143             dumpViewportRenderedItems();
 144             next();
 145         },
 146
 147         function testShiftClickReversedSelectionBelow(next)
 148         {
 149             emulateShiftClickOnMessage(messagesCount - minimumViewportMessagesCount);
 150             dumpSelectionModel();
 151             dumpViewportRenderedItems();
 152             next();
 153         },
 154
 155         function testZeroOffsetSelection(next)
 156         {
 157             viewport.forceScrollItemToBeLast(messagesCount - 1);
 158             var lastMessageElement = viewport.renderedElementAt(messagesCount - 1);
 159             // there is a blue-colored "world" span in last message.
 160             var blueSpan = lastMessageElement;
 161             while (blueSpan.nodeName !== "SPAN" || blueSpan.textContent !== "world")
 162                 blueSpan = blueSpan.traverseNextNode();
 163
 164             window.getSelection().setBaseAndExtent(blueSpan, 0, blueSpan, blueSpan.textContent.length);
 165             InspectorTest.addResult("Selected text: " + viewport._selectedText());
 166             next();
 167         },
 168
 169         function testSelectAll(next)
 170         {
 171             viewport.forceScrollItemToBeFirst(0);
 172
 173             // Set some initial selection in console.
 174             var base = consoleView.itemElement(messagesCount - 2);
 175             var extent = consoleView.itemElement(messagesCount - 1);
 176             window.getSelection().setBaseAndExtent(base, 0, extent, 0);
 177
 178             // Try to select all messages.
 179             document.execCommand("selectAll");
 180
 181             var text = viewport._selectedText();
 182             var count = text ? text.split("\n").length : 0;
 183             InspectorTest.addResult(count === messagesCount ? "Selected all " + count + " messages." : "Selected " + count + " messages instead of " + messagesCount);
 184             next();
 185         }
 186     ];
 187
 188     var awaitingMessagesCount = messagesCount;
 189     function messageAdded()
 190     {
 191         if (!--awaitingMessagesCount)
 192             InspectorTest.runTestSuite(testSuite);
 193     }
 194
 195     InspectorTest.addConsoleSniffer(messageAdded, true);
 196     InspectorTest.evaluateInPage(String.sprintf("populateConsoleWithMessages(%d)", messagesCount));
 197
 198     function dumpSelectionModelElement(model)
 199     {
 200         if (!model)
 201             return "null";
 202         return String.sprintf("{item: %d, offset: %d}", model.item, model.offset);
 203     }
 204
 205     function dumpSelectionModel()
 206     {
 207         viewport.refresh();
 208         var text = String.sprintf("anchor = %s, head = %s", dumpSelectionModelElement(viewport._anchorSelection), dumpSelectionModelElement(viewport._headSelection));
 209         InspectorTest.addResult(text);
 210     }
 211
 212     function dumpSelectionText()
 213     {
 214         viewport.refresh();
 215         var text = viewport._selectedText();
 216         InspectorTest.addResult("Selected text:<<<EOL\n" + text + "\nEOL");
 217     }
 218
 219     function dumpViewportRenderedItems()
 220     {
 221         viewport.refresh();
 222         var firstVisibleIndex = viewport.firstVisibleIndex();
 223         var lastVisibleIndex = viewport.lastVisibleIndex();
 224         var renderedEnoughElements = viewportMessagesCount <= lastVisibleIndex - firstVisibleIndex + 1;
 225         InspectorTest.addResult("first visible message index: " + firstVisibleIndex + "   viewport is covered: " + (renderedEnoughElements ? "YES" : "NO"));
 226     }
 227
 228     function emulateShiftClickOnMessage(messageIndex)
 229     {
 230         viewport.refresh();
 231         var selection = window.getSelection();
 232         if (!selection || !selection.rangeCount) {
 233             InspectorTest.addResult("FAILURE: There's no selection");
 234             return;
 235         }
 236         viewport.forceScrollItemToBeFirst(Math.max(messageIndex - minimumViewportMessagesCount / 2, 0));
 237         var element = consoleView.itemElement(messageIndex).element();
 238         selection.setBaseAndExtent(selection.anchorNode, selection.anchorOffset, element, 0);
 239         viewport.refresh();
 240     }
 241
 242     function selectionContainerAndOffset(container, offset)
 243     {
 244         var charCount = 0;
 245         var node = container;
 246         while (node = node.traverseNextTextNode(true)) {
 247             var length = node.textContent.length;
 248             if (charCount + length >= offset) {
 249                 return {
 250                     container: node,
 251                     offset: offset - charCount
 252                 };
 253             }
 254             charCount += length;
 255         }
 256         return null;
 257     }
 258
 259     function selectMessages(fromMessage, fromTextOffset, toMessage, toTextOffset)
 260     {
 261         if (Math.abs(toMessage - fromMessage) > minimumViewportMessagesCount) {
 262             InspectorTest.addResult(String.sprintf("FAILURE: Cannot select more then %d messages (requested to select from %d to %d", minimumViewportMessagesCount, fromMessage, toMessage));
 263             InspectorTest.completeTest();
 264             return;
 265         }
 266         viewport.forceScrollItemToBeFirst(Math.min(fromMessage, toMessage));
 267
 268         var from = selectionContainerAndOffset(consoleView.itemElement(fromMessage).element(), fromTextOffset);
 269         var to = selectionContainerAndOffset(consoleView.itemElement(toMessage).element(), toTextOffset);
 270         window.getSelection().setBaseAndExtent(from.container, from.offset, to.container, to.offset);
 271         viewport.refresh();
 272     }
 273 }
 274 </script>
 275 </head>
 276 <body onload="runTest()">
 277 <p>
 278     Tests that console viewport handles selection properly.
 279 </p>
 280 </body>
 281 </html>