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