third_party/WebKit/LayoutTests/inspector/elements/highlight/highlight-dom-updates.html

   1 <html>
   2 <head>
   3 <script src="../../../http/tests/inspector/inspector-test.js"></script>
   4 <script src="../../../http/tests/inspector/elements-test.js"></script>
   5 <script src="../../../http/tests/inspector/console-test.js"></script>
   6 <script>
   7
   8 function appendChild(parentId, id)
   9 {
  10     var e = document.createElement("span");
  11     e.id = id;
  12     document.getElementById(parentId).appendChild(e);
  13 }
  14
  15 function remove(id)
  16 {
  17     document.getElementById(id).remove();
  18 }
  19
  20 function removeFirstChild(id)
  21 {
  22     document.getElementById(id).firstChild.remove();
  23 }
  24
  25 function setAttribute(id, name, value)
  26 {
  27     var e = document.getElementById(id);
  28     if (value === undefined)
  29         e.removeAttribute(name);
  30     else
  31         e.setAttribute(name, value);
  32 }
  33
  34 function setTextContent(id, content)
  35 {
  36     document.getElementById(id).textContent = content;
  37 }
  38
  39 function setFirstChildTextContent(id, content)
  40 {
  41     document.getElementById(id).firstChild.textContent = content;
  42 }
  43
  44 function test()
  45 {
  46     var attrTestNode;
  47     var childTestNode;
  48     var textTestNode;
  49
  50     InspectorTest.runTestSuite([
  51         function testDumpInitial(next)
  52         {
  53             function callback(node)
  54             {
  55                 attrTestNode = InspectorTest.expandedNodeWithId("attrTest");
  56                 childTestNode = InspectorTest.expandedNodeWithId("childTest");
  57                 textTestNode = InspectorTest.expandedNodeWithId("textTest");
  58                 next();
  59             }
  60             InspectorTest.addResult("========= Original ========");
  61             InspectorTest.dumpDOMUpdateHighlights(null);
  62             InspectorTest.expandElementsTree(callback);
  63         },
  64
  65         function testSetAttributeOtherValue(next)
  66         {
  67             runAndDumpHighlights("setAttribute('attrTest', 'attrFoo', 'bar')", attrTestNode, next);
  68         },
  69
  70         function testSetAttributeEmpty(next)
  71         {
  72             runAndDumpHighlights("setAttribute('attrTest', 'attrFoo', '')", attrTestNode, next);
  73         },
  74
  75         function testAddAttribute(next)
  76         {
  77             runAndDumpHighlights("setAttribute('attrTest', 'attrBar', 'newBar')", attrTestNode, next);
  78         },
  79
  80         function testRemoveAttribute(next)
  81         {
  82             runAndDumpHighlights("setAttribute('attrTest', 'attrFoo')", attrTestNode, next);
  83         },
  84
  85         function testAppendChildToEmpty(next)
  86         {
  87             runAndDumpHighlights("appendChild('childTest', 'child1')", childTestNode, callback);
  88             function callback()
  89             {
  90                 // Expand the #childTest node.
  91                 InspectorTest.expandElementsTree(next);
  92             }
  93         },
  94
  95         function testAppendChildToExpanded(next)
  96         {
  97             runAndDumpHighlights("appendChild('childTest', 'child2')", childTestNode, next);
  98         },
  99
 100         function testRemoveChild1(next)
 101         {
 102             runAndDumpHighlights("remove('child1')", childTestNode, next);
 103         },
 104
 105         function testRemoveChild2(next)
 106         {
 107             runAndDumpHighlights("remove('child2')", childTestNode, next);
 108         },
 109
 110         function testSetTextContent(next)
 111         {
 112             runAndDumpHighlights("setTextContent('textTest', 'Text')", textTestNode, next);
 113         },
 114
 115         function testSetTextNodeTextContent(next)
 116         {
 117             runAndDumpHighlights("setFirstChildTextContent('textTest', 'NewText')", textTestNode, next);
 118         },
 119
 120         function testRemoveInlineTextNode(next)
 121         {
 122             runAndDumpHighlights("removeFirstChild('textTest')", textTestNode, next);
 123         },
 124
 125         function testSetTextContentWithEmptyText(next)
 126         {
 127             runAndDumpHighlights("setTextContent('textTest', 'Text')", textTestNode, next);
 128         },
 129
 130         function testClearTextNodeTextContent(next)
 131         {
 132             runAndDumpHighlights("setFirstChildTextContent('textTest', '')", textTestNode, next);
 133         },
 134
 135         function testAppendChildWhenHidden(next)
 136         {
 137             WebInspector.ConsolePanel.show();
 138             runAndDumpHighlights("appendChild('childTest', 'child1')", childTestNode, next);
 139         }
 140     ]);
 141
 142     function runAndDumpHighlights(script, root, next)
 143     {
 144         dumpHighlights(root, next);
 145         InspectorTest.evaluateInPage(script);
 146     }
 147
 148     function dumpHighlights(root, next)
 149     {
 150         InspectorTest.dumpDOMUpdateHighlights(root, callback);
 151
 152         function callback()
 153         {
 154             var treeOutline = InspectorTest.firstElementsTreeOutline();
 155             var highlights = treeOutline._element.getElementsByClassName("dom-update-highlight");
 156             for (var i = 0; i < highlights.length; ++i)
 157                 highlights[i].classList.remove("dom-update-highlight");
 158             next();
 159         }
 160     }
 161 }
 162
 163 </script>
 164 </head>
 165
 166 <body onload="runTest()">
 167 <p>
 168 Tests DOM update highlights in the DOM tree.
 169 </p>
 170
 171 <div id="container">
 172     <div id="attrTest" attrFoo="foo"></div>
 173     <div id="childTest"></div>
 174     <div id="textTest"></div>
 175 </div>
 176
 177 </body>
 178 </html>