14 content: "EmptyBefore";
18 content: "EmptyAfter";
21 <script src="../../../http/tests/inspector/inspector-test.js"></script>
22 <script src="../../../http/tests/inspector/elements-test.js"></script>
25 var initialize_PseudoElementsTest = function() {
27 InspectorTest.selectIdNodeWithId = function(idValue, pseudoType, callback)
29 callback = InspectorTest.safeWrap(callback);
30 function onNodeFound(node)
32 WebInspector.Revealer.reveal(node);
36 InspectorTest.findNode(nodeIdMatches, onNodeFound);
37 function nodeIdMatches(node)
39 return node.parentNode && node.pseudoType() === pseudoType && node.parentNode.getAttribute("id") === idValue;
43 InspectorTest.waitForPseudoIdNodeStyles = function(idValue, pseudoType, callback, requireRebuild)
45 callback = InspectorTest.safeWrap(callback);
47 (function sniff(node, rebuild)
49 if ((rebuild || !requireRebuild) && node && node.parentNode && node.pseudoType() === pseudoType && node.parentNode.getAttribute("id") === idValue) {
53 InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_nodeStylesUpdatedForTest", sniff);
57 InspectorTest.selectPseudoIdNodeAndWaitForStyles = function(idValue, pseudoType, callback)
59 WebInspector.inspectorView.showPanel("elements");
60 callback = InspectorTest.safeWrap(callback);
64 InspectorTest.waitForPseudoIdNodeStyles(idValue, pseudoType, stylesUpdated, true);
65 InspectorTest.selectIdNodeWithId(idValue, pseudoType, nodeSelected);
67 function nodeSelected(node)
72 function stylesUpdated()
80 function removeLastRule()
82 document.styleSheets[0].deleteRule(document.styleSheets[0].cssRules.length - 1);
85 function addAfterRule()
87 document.styleSheets[0].addRule("#inspected:after", "content: \"AFTER\"");
90 function addBeforeRule()
92 document.styleSheets[0].addRule("#inspected:before", "content: \"BEFORE\"");
95 function modifyTextContent()
97 document.getElementById("inspected").textContent = "bar";
100 function clearTextContent()
102 document.getElementById("inspected").textContent = "";
105 function removeNode()
107 document.getElementById("inspected").remove();
115 InspectorTest.runTestSuite([
116 function dumpOriginalTree(next)
118 InspectorTest.expandElementsTree(callback);
121 containerNode = InspectorTest.expandedNodeWithId("container");
122 inspectedNode = InspectorTest.expandedNodeWithId("inspected");
123 InspectorTest.addResult("Original elements tree:");
124 InspectorTest.dumpElementsTree(containerNode);
129 function dumpNormalNodeStyles(next)
131 selectNodeAndDumpStyles("inspected", "", next);
134 function dumpBeforeStyles(next)
136 selectNodeAndDumpStyles("inspected", "before", next);
139 function dumpAfterStyles(next)
141 selectNodeAndDumpStyles("inspected", "after", next);
144 function removeAfter(next)
146 executeAndDumpTree("removeLastRule()", WebInspector.DOMModel.Events.NodeRemoved, next);
149 function removeBefore(next)
151 executeAndDumpTree("removeLastRule()", WebInspector.DOMModel.Events.NodeRemoved, next);
154 function addAfter(next)
156 executeAndDumpTree("addAfterRule()", WebInspector.DOMModel.Events.NodeInserted, next);
159 function addBefore(next)
161 executeAndDumpTree("addBeforeRule()", WebInspector.DOMModel.Events.NodeInserted, next);
164 function modifyTextContent(next)
166 executeAndDumpTree("modifyTextContent()", WebInspector.DOMModel.Events.NodeInserted, next);
169 function clearTextContent(next)
171 executeAndDumpTree("clearTextContent()", WebInspector.DOMModel.Events.NodeRemoved, next);
174 function removeNodeAndCheckPseudoElementsUnbound(next)
176 var inspectedBefore = inspectedNode.pseudoElements()["before"];
177 var inspectedAfter = inspectedNode.pseudoElements()["after"];
179 executeAndDumpTree("removeNode()", WebInspector.DOMModel.Events.NodeRemoved, callback);
182 InspectorTest.addResult("inspected:before DOMNode in DOMAgent: " + !!(WebInspector.domModel.nodeForId(inspectedBefore.id)));
183 InspectorTest.addResult("inspected:after DOMNode in DOMAgent: " + !!(WebInspector.domModel.nodeForId(inspectedAfter.id)));
189 function executeAndDumpTree(pageFunction, eventName, next)
191 WebInspector.domModel.addEventListener(eventName, domCallback, this);
192 InspectorTest.evaluateInPage(pageFunction);
194 function domCallback()
196 WebInspector.domModel.removeEventListener(eventName, domCallback, this);
197 InspectorTest.firstElementsTreeOutline().addEventListener(WebInspector.ElementsTreeOutline.Events.ElementsTreeUpdated, treeCallback, this);
200 function treeCallback()
202 InspectorTest.firstElementsTreeOutline().removeEventListener(WebInspector.ElementsTreeOutline.Events.ElementsTreeUpdated, treeCallback, this);
203 InspectorTest.dumpElementsTree(containerNode);
208 function selectNodeAndDumpStyles(id, pseudoTypeName, callback)
211 InspectorTest.selectPseudoIdNodeAndWaitForStyles("inspected", pseudoTypeName, stylesCallback);
213 InspectorTest.selectNodeAndWaitForStyles("inspected", stylesCallback);
215 function stylesCallback()
217 InspectorTest.dumpSelectedElementStyles(false, false, false, true);
226 <body onload="runTest()">
228 Tests that pseudo elements and their styles are handled properly.
232 <div id="inspected">Text</div>
233 <div id="empty"></div>