LayoutTests/inspector/utilities-highlight-results.html

   1 <html>
   2 <head>
   3 <script src="../http/tests/inspector/inspector-test.js"></script>
   4 <script src="utilities-test.js"></script>
   5 <script>
   6 function test()
   7 {
   8     function dumpTextNodesAsString(node)
   9     {
  10         var result = "";
  11         function dumpTextNode(node)
  12         {
  13             var str = node.textContent;
  14             if (node.parentElement.className)
  15                 result += "[" + str + "]";
  16             else
  17                 result += str;
  18         };
  19
  20         function dumpElement(element)
  21         {
  22             for (var i = 0; i < element.childNodes.length; i++)
  23                 dumpNode(element.childNodes[i]);
  24         }
  25
  26         function dumpNode(node)
  27         {
  28             if (node.nodeType === Node.TEXT_NODE)
  29                 dumpTextNode(node);
  30             else if (node.nodeType === Node.ELEMENT_NODE)
  31                 dumpElement(node);
  32         };
  33
  34         dumpNode(node);
  35
  36         return result;
  37     }
  38
  39     function performTestForElement(element, ranges)
  40     {
  41         var changes = [];
  42         InspectorTest.addResult("--------- Running test: ----------");
  43         WebInspector.highlightRangesWithStyleClass(element, ranges, "highlighted", changes);
  44         InspectorTest.addResult("After highlight: " + dumpTextNodesAsString(element));
  45         WebInspector.revertDomChanges(changes);
  46         InspectorTest.addResult("After revert: " + dumpTextNodesAsString(element));
  47         WebInspector.applyDomChanges(changes);
  48         InspectorTest.addResult("After apply: " + dumpTextNodesAsString(element));
  49     }
  50
  51     function textElement(strings)
  52     {
  53         var element = document.createElement("div");
  54         for (var i = 0; i < strings.length; i++) {
  55             var span = document.createElement("span");
  56             span.textContent = strings[i];
  57             element.appendChild(span);
  58         }
  59         return element;
  60     }
  61
  62     function range(offset, length)
  63     {
  64         var result = {};
  65         result.offset = offset;
  66         result.length = length;
  67         return result;
  68     }
  69
  70     performTestForElement(textElement(["function"]), [range(0, 8)]); // Highlight whole text node.
  71     performTestForElement(textElement(["function"]), [range(0, 7)]); // Highlight only text node beginning.
  72     performTestForElement(textElement(["function"]), [range(1, 7)]); // Highlight only text node ending.
  73     performTestForElement(textElement(["function"]), [range(1, 6)]); // Highlight in the middle of text node.
  74
  75     performTestForElement(textElement(["function", " ", "functionName"]), [range(0, 21)]); // Highlight all text in 3 text nodes.
  76     performTestForElement(textElement(["function", " ", "functionName"]), [range(0, 20)]); // Highlight all text in 3 text nodes except for the last character.
  77     performTestForElement(textElement(["function", " ", "functionName"]), [range(1, 20)]); // Highlight all text in 3 text nodes except for the first character.
  78     performTestForElement(textElement(["function", " ", "functionName"]), [range(1, 19)]); // Highlight all text in 3 text nodes except for the first and the last characters.
  79     performTestForElement(textElement(["function", " ", "functionName"]), [range(7, 3)]); // Highlight like that "functio[n f]unctionName"
  80
  81     performTestForElement(textElement(["function", " ", "functionName"]), [range(0, 1), range(8, 1), range(9, 1)]); // Highlight first characters in text nodes.
  82     performTestForElement(textElement(["function", " ", "functionName"]), [range(7, 1), range(8, 1), range(20, 1)]); // Highlight last characters in text node.
  83     performTestForElement(textElement(["function", " ", "functionName"]), [range(0, 1), range(7, 3), range(20, 1)]); // Highlight like that: "[f]unctio[n f]unctionNam[e]"
  84     InspectorTest.completeTest();
  85 }
  86 </script>
  87 </head>
  88 <body onload="runTest()">
  89     <p>Tests how utilities functions highlight text and then revert/re-apply highlighting changes.</p>
  90     <a href="https://bugs.webkit.org/show_bug.cgi?id=70244">Bug 70244</a>
  91 </body>
  92 </html>