LayoutTests/inspector/elements/highlight-dom-updates.html - Issue 701153002: DevTools: [Elements] Highlight DOM updates

Side by Side Diff: LayoutTests/inspector/elements/highlight-dom-updates.html

Issue 701153002: DevTools: [Elements] Highlight DOM updates (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: Fix tests (for ETO not wired to DOMModel) Created 6 years, 1 month ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch | Annotate | Revision Log

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