| Index: LayoutTests/inspector/elements/highlight-dom-updates.html
|
| diff --git a/LayoutTests/inspector/elements/highlight-dom-updates.html b/LayoutTests/inspector/elements/highlight-dom-updates.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..159636741fe3e5ceabc9fdb8dea3689e37aaef44
|
| --- /dev/null
|
| +++ b/LayoutTests/inspector/elements/highlight-dom-updates.html
|
| @@ -0,0 +1,170 @@
|
| +<html>
|
| +<head>
|
| +<script src="../../http/tests/inspector/inspector-test.js"></script>
|
| +<script src="../../http/tests/inspector/elements-test.js"></script>
|
| +<script>
|
| +
|
| +function appendChild(parentId, id)
|
| +{
|
| + var e = document.createElement("span");
|
| + e.id = id;
|
| + document.getElementById(parentId).appendChild(e);
|
| +}
|
| +
|
| +function remove(id)
|
| +{
|
| + document.getElementById(id).remove();
|
| +}
|
| +
|
| +function removeFirstChild(id)
|
| +{
|
| + document.getElementById(id).firstChild.remove();
|
| +}
|
| +
|
| +function setAttribute(id, name, value)
|
| +{
|
| + var e = document.getElementById(id);
|
| + if (value === undefined)
|
| + e.removeAttribute(name);
|
| + else
|
| + e.setAttribute(name, value);
|
| +}
|
| +
|
| +function setTextContent(id, content)
|
| +{
|
| + document.getElementById(id).textContent = content;
|
| +}
|
| +
|
| +function setFirstChildTextContent(id, content)
|
| +{
|
| + document.getElementById(id).firstChild.textContent = content;
|
| +}
|
| +
|
| +function test()
|
| +{
|
| + var containerNode;
|
| + var attrTestNode;
|
| + var childTestNode;
|
| + var textTestNode;
|
| +
|
| + InspectorTest.runTestSuite([
|
| + function testDumpInitial(next)
|
| + {
|
| + function callback(node)
|
| + {
|
| + containerNode = InspectorTest.expandedNodeWithId("container");
|
| + attrTestNode = InspectorTest.expandedNodeWithId("attrTest");
|
| + childTestNode = InspectorTest.expandedNodeWithId("childTest");
|
| + textTestNode = InspectorTest.expandedNodeWithId("textTest");
|
| +
|
| + InspectorTest.addResult("========= Original ========");
|
| + InspectorTest.dumpDOMUpdateHighlights(containerNode);
|
| + next();
|
| + }
|
| + InspectorTest.expandElementsTree(callback);
|
| + },
|
| +
|
| + function testSetAttributeOtherValue(next)
|
| + {
|
| + runAndDumpHighlights("setAttribute('attrTest', 'attrFoo', 'bar')", attrTestNode, next);
|
| + },
|
| +
|
| + function testSetAttributeEmpty(next)
|
| + {
|
| + runAndDumpHighlights("setAttribute('attrTest', 'attrFoo', '')", attrTestNode, next);
|
| + },
|
| +
|
| + function testAddAttribute(next)
|
| + {
|
| + runAndDumpHighlights("setAttribute('attrTest', 'attrBar', 'newBar')", attrTestNode, next);
|
| + },
|
| +
|
| + function testRemoveAttribute(next)
|
| + {
|
| + runAndDumpHighlights("setAttribute('attrTest', 'attrFoo')", attrTestNode, next);
|
| + },
|
| +
|
| + function testAppendChildToEmpty(next)
|
| + {
|
| + runAndDumpHighlights("appendChild('childTest', 'child1')", childTestNode, callback);
|
| + function callback()
|
| + {
|
| + // Expand the #childTest node.
|
| + InspectorTest.expandElementsTree(next);
|
| + }
|
| + },
|
| +
|
| + function testAppendChildToExpanded(next)
|
| + {
|
| + runAndDumpHighlights("appendChild('childTest', 'child2')", childTestNode, next);
|
| + },
|
| +
|
| + function testRemoveChild1(next)
|
| + {
|
| + runAndDumpHighlights("remove('child1')", childTestNode, next);
|
| + },
|
| +
|
| + function testRemoveChild2(next)
|
| + {
|
| + runAndDumpHighlights("remove('child2')", childTestNode, next);
|
| + },
|
| +
|
| + function testSetTextContent(next)
|
| + {
|
| + runAndDumpHighlights("setTextContent('textTest', 'Text')", textTestNode, next);
|
| + },
|
| +
|
| + function testSetTextNodeTextContent(next)
|
| + {
|
| + runAndDumpHighlights("setFirstChildTextContent('textTest', 'NewText')", textTestNode, next);
|
| + },
|
| +
|
| + function testRemoveInlineTextNode(next)
|
| + {
|
| + runAndDumpHighlights("removeFirstChild('textTest')", textTestNode, next);
|
| + },
|
| +
|
| + function testSetTextContentWithEmptyText(next)
|
| + {
|
| + runAndDumpHighlights("setTextContent('textTest', 'Text')", textTestNode, next);
|
| + },
|
| +
|
| + function testClearTextNodeTextContent(next)
|
| + {
|
| + runAndDumpHighlights("setFirstChildTextContent('textTest', '')", textTestNode, next);
|
| + }
|
| + ]);
|
| +
|
| + function runAndDumpHighlights(script, root, next)
|
| + {
|
| + InspectorTest.evaluateInPage(script, callback);
|
| +
|
| + function callback()
|
| + {
|
| + // InspectorTest.dumpElementsTree(root);
|
| + InspectorTest.dumpDOMUpdateHighlights(root);
|
| + var treeOutline = InspectorTest.firstElementsTreeOutline();
|
| + var highlights = treeOutline._element.getElementsByClassName("dom-update-highlight");
|
| + for (var i = 0; i < highlights.length; ++i)
|
| + highlights[i].classList.remove("dom-update-highlight");
|
| + next();
|
| + }
|
| + }
|
| +}
|
| +
|
| +</script>
|
| +</head>
|
| +
|
| +<body onload="runTest()">
|
| +<p>
|
| +Tests DOM update highlights in the DOM tree.
|
| +</p>
|
| +
|
| +<div id="container">
|
| + <div id="attrTest" attrFoo="foo"></div>
|
| + <div id="childTest"></div>
|
| + <div id="textTest"></div>
|
| +</div>
|
| +
|
| +</body>
|
| +</html>
|
|
|
Chromium Code Reviews
Issue 701153002:
DevTools: [Elements] Highlight DOM updates (Closed)
Base URL: svn://svn.chromium.org/blink/trunk