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