OLD | NEW |
| (Empty) |
1 <html> | |
2 <head> | |
3 <style> | |
4 #inspected:before, .some-other-selector { | |
5 content: "BEFORE"; | |
6 } | |
7 | |
8 #inspected:after { | |
9 content: "AFTER"; | |
10 } | |
11 </style> | |
12 <style> | |
13 #empty::before { | |
14 content: "EmptyBefore"; | |
15 } | |
16 | |
17 #empty::after { | |
18 content: "EmptyAfter"; | |
19 } | |
20 </style> | |
21 <script src="../../../http/tests/inspector/inspector-test.js"></script> | |
22 <script src="../../../http/tests/inspector/elements-test.js"></script> | |
23 <script> | |
24 | |
25 function removeLastRule() | |
26 { | |
27 document.styleSheets[0].deleteRule(document.styleSheets[0].cssRules.length -
1); | |
28 } | |
29 | |
30 function addAfterRule() | |
31 { | |
32 document.styleSheets[0].addRule("#inspected:after", "content: \"AFTER\""); | |
33 } | |
34 | |
35 function addBeforeRule() | |
36 { | |
37 document.styleSheets[0].addRule("#inspected:before", "content: \"BEFORE\""); | |
38 } | |
39 | |
40 function modifyTextContent() | |
41 { | |
42 document.getElementById("inspected").textContent = "bar"; | |
43 } | |
44 | |
45 function clearTextContent() | |
46 { | |
47 document.getElementById("inspected").textContent = ""; | |
48 } | |
49 | |
50 function removeNode() | |
51 { | |
52 document.getElementById("inspected").remove(); | |
53 } | |
54 | |
55 function test() | |
56 { | |
57 var containerNode; | |
58 var inspectedNode; | |
59 | |
60 InspectorTest.runTestSuite([ | |
61 function dumpOriginalTree(next) | |
62 { | |
63 InspectorTest.expandElementsTree(callback); | |
64 function callback() | |
65 { | |
66 containerNode = InspectorTest.expandedNodeWithId("container"); | |
67 inspectedNode = InspectorTest.expandedNodeWithId("inspected"); | |
68 InspectorTest.addResult("Original elements tree:"); | |
69 InspectorTest.dumpElementsTree(containerNode); | |
70 next(); | |
71 } | |
72 }, | |
73 | |
74 function dumpNormalNodeStyles(next) | |
75 { | |
76 selectNodeAndDumpStyles("inspected", "", next); | |
77 }, | |
78 | |
79 function dumpBeforeStyles(next) | |
80 { | |
81 selectNodeAndDumpStyles("inspected", "before", next); | |
82 }, | |
83 | |
84 function dumpAfterStyles(next) | |
85 { | |
86 selectNodeAndDumpStyles("inspected", "after", next); | |
87 }, | |
88 | |
89 function removeAfter(next) | |
90 { | |
91 executeAndDumpTree("removeLastRule()", WebInspector.DOMModel.Events.
NodeRemoved, next); | |
92 }, | |
93 | |
94 function removeBefore(next) | |
95 { | |
96 executeAndDumpTree("removeLastRule()", WebInspector.DOMModel.Events.
NodeRemoved, next); | |
97 }, | |
98 | |
99 function addAfter(next) | |
100 { | |
101 executeAndDumpTree("addAfterRule()", WebInspector.DOMModel.Events.No
deInserted, expandAndDumpTree.bind(this, next)); | |
102 }, | |
103 | |
104 function addBefore(next) | |
105 { | |
106 executeAndDumpTree("addBeforeRule()", WebInspector.DOMModel.Events.N
odeInserted, next); | |
107 }, | |
108 | |
109 function modifyTextContent(next) | |
110 { | |
111 executeAndDumpTree("modifyTextContent()", WebInspector.DOMModel.Even
ts.NodeInserted, next); | |
112 }, | |
113 | |
114 function clearTextContent(next) | |
115 { | |
116 executeAndDumpTree("clearTextContent()", WebInspector.DOMModel.Event
s.NodeRemoved, next); | |
117 }, | |
118 | |
119 function removeNodeAndCheckPseudoElementsUnbound(next) | |
120 { | |
121 var inspectedBefore = inspectedNode.beforePseudoElement(); | |
122 var inspectedAfter = inspectedNode.afterPseudoElement(); | |
123 | |
124 executeAndDumpTree("removeNode()", WebInspector.DOMModel.Events.Node
Removed, callback); | |
125 function callback() | |
126 { | |
127 InspectorTest.addResult("inspected:before DOMNode in DOMAgent: "
+ !!(InspectorTest.domModel.nodeForId(inspectedBefore.id))); | |
128 InspectorTest.addResult("inspected:after DOMNode in DOMAgent: "
+ !!(InspectorTest.domModel.nodeForId(inspectedAfter.id))); | |
129 next(); | |
130 } | |
131 } | |
132 ]); | |
133 | |
134 function executeAndDumpTree(pageFunction, eventName, next) | |
135 { | |
136 InspectorTest.domModel.addEventListener(eventName, domCallback, this); | |
137 InspectorTest.evaluateInPage(pageFunction); | |
138 | |
139 function domCallback() | |
140 { | |
141 InspectorTest.domModel.removeEventListener(eventName, domCallback, t
his); | |
142 InspectorTest.firstElementsTreeOutline().addEventListener(WebInspect
or.ElementsTreeOutline.Events.ElementsTreeUpdated, treeCallback, this); | |
143 } | |
144 | |
145 function treeCallback() | |
146 { | |
147 InspectorTest.firstElementsTreeOutline().removeEventListener(WebInsp
ector.ElementsTreeOutline.Events.ElementsTreeUpdated, treeCallback, this); | |
148 InspectorTest.dumpElementsTree(containerNode); | |
149 next(); | |
150 } | |
151 } | |
152 | |
153 function expandAndDumpTree(next) | |
154 { | |
155 InspectorTest.addResult("== Expanding: =="); | |
156 InspectorTest.expandElementsTree(callback); | |
157 function callback() | |
158 { | |
159 InspectorTest.dumpElementsTree(containerNode); | |
160 next(); | |
161 } | |
162 } | |
163 | |
164 function selectNodeAndDumpStyles(id, pseudoTypeName, callback) | |
165 { | |
166 if (pseudoTypeName) | |
167 InspectorTest.selectPseudoElementAndWaitForStyles("inspected", pseud
oTypeName, stylesCallback); | |
168 else | |
169 InspectorTest.selectNodeAndWaitForStyles("inspected", stylesCallback
); | |
170 | |
171 function stylesCallback() | |
172 { | |
173 InspectorTest.dumpSelectedElementStyles(true, false, false, true); | |
174 callback(); | |
175 } | |
176 } | |
177 } | |
178 | |
179 </script> | |
180 </head> | |
181 | |
182 <body onload="runTest()"> | |
183 <p> | |
184 Tests that pseudo elements and their styles are handled properly. | |
185 </p> | |
186 | |
187 <div id="container"> | |
188 <div id="inspected">Text</div> | |
189 <div id="empty"></div> | |
190 </div> | |
191 | |
192 </body> | |
193 </html> | |
OLD | NEW |