OLD | NEW |
1 <html> | 1 <html> |
2 <head> | 2 <head> |
3 <script src="../../../http/tests/inspector/inspector-test.js"></script> | 3 <script src="../../../http/tests/inspector/inspector-test.js"></script> |
4 <script src="../../../http/tests/inspector/elements-test.js"></script> | 4 <script src="../../../http/tests/inspector/elements-test.js"></script> |
5 <script src="../../../http/tests/inspector/debugger-test.js"></script> | 5 <script src="../../../http/tests/inspector/debugger-test.js"></script> |
6 <script> | 6 <script> |
7 | 7 |
8 function appendElement(parentId, childId) | 8 function appendElement(parentId, childId) |
9 { | 9 { |
10 var child = document.createElement("div"); | 10 var child = document.createElement("div"); |
(...skipping 64 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
75 function appendElementToOpenShadowRoot(childId) | 75 function appendElementToOpenShadowRoot(childId) |
76 { | 76 { |
77 var child = document.createElement("div"); | 77 var child = document.createElement("div"); |
78 child.id = childId; | 78 child.id = childId; |
79 authorShadowRoot().appendChild(child); | 79 authorShadowRoot().appendChild(child); |
80 } | 80 } |
81 | 81 |
82 function test() | 82 function test() |
83 { | 83 { |
84 | 84 |
85 var pane = Components.domBreakpointsSidebarPane; | 85 var pane = self.runtime.sharedInstance(Components.DOMBreakpointsSidebarPane)
; |
86 var rootElement; | 86 var rootElement; |
87 var outerElement; | 87 var outerElement; |
88 var authorShadowRoot; | 88 var authorShadowRoot; |
89 InspectorTest.runDebuggerTestSuite([ | 89 InspectorTest.runDebuggerTestSuite([ |
90 function testInsertChild(next) | 90 function testInsertChild(next) |
91 { | 91 { |
92 InspectorTest.addResult("Test that 'Subtree Modified' breakpoint is
hit when appending a child."); | 92 InspectorTest.addResult("Test that 'Subtree Modified' breakpoint is
hit when appending a child."); |
93 InspectorTest.nodeWithId("rootElement", step2); | 93 InspectorTest.nodeWithId("rootElement", step2); |
94 | 94 |
95 function step2(node) | 95 function step2(node) |
96 { | 96 { |
97 rootElement = node; | 97 rootElement = node; |
98 pane._setBreakpoint(node, Components.DOMBreakpointsSidebarPane.B
reakpointTypes.SubtreeModified, true); | 98 InspectorTest.domDebuggerModel.setDOMBreakpoint(node, SDK.DOMDeb
uggerModel.DOMBreakpoint.Type.SubtreeModified); |
99 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint o
n rootElement."); | 99 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint o
n rootElement."); |
100 InspectorTest.evaluateInPageWithTimeout("appendElement('rootElem
ent', 'childElement')"); | 100 InspectorTest.evaluateInPageWithTimeout("appendElement('rootElem
ent', 'childElement')"); |
101 InspectorTest.addResult("Append childElement to rootElement."); | 101 InspectorTest.addResult("Append childElement to rootElement."); |
102 InspectorTest.waitUntilPausedAndDumpStackAndResume(next); | 102 InspectorTest.waitUntilPausedAndDumpStackAndResume(next); |
103 } | 103 } |
104 }, | 104 }, |
105 | 105 |
106 function testBreakpointToggle(next) | 106 function testBreakpointToggle(next) |
107 { | 107 { |
108 InspectorTest.addResult("Test that DOM breakpoint toggles properly u
sing checkbox."); | 108 InspectorTest.addResult("Test that DOM breakpoint toggles properly u
sing checkbox."); |
109 Components.domBreakpointsSidebarPane._setBreakpoint(rootElement, Com
ponents.DOMBreakpointsSidebarPane.BreakpointTypes.AttributeModified, true); | 109 var breakpoint = InspectorTest.domDebuggerModel.setDOMBreakpoint(roo
tElement, SDK.DOMDebuggerModel.DOMBreakpoint.Type.AttributeModified); |
110 InspectorTest.addResult("Set DOM breakpoint."); | 110 InspectorTest.addResult("Set DOM breakpoint."); |
111 var elementId = pane._createBreakpointId(rootElement.id, Components.
DOMBreakpointsSidebarPane.BreakpointTypes.AttributeModified); | 111 pane._items.get(breakpoint).checkbox.click(); |
112 var element = pane._breakpointElements.get(elementId); | |
113 element._checkboxElement.click(); | |
114 InspectorTest.addResult("Uncheck DOM breakpoint."); | 112 InspectorTest.addResult("Uncheck DOM breakpoint."); |
115 InspectorTest.evaluateInPagePromise("modifyAttribute('rootElement',
'data-test-breakpoint-toggle', 'foo')").then(step2); | 113 InspectorTest.evaluateInPagePromise("modifyAttribute('rootElement',
'data-test-breakpoint-toggle', 'foo')").then(step2); |
116 InspectorTest.addResult("DOM breakpoint should not be hit when disab
led."); | 114 InspectorTest.addResult("DOM breakpoint should not be hit when disab
led."); |
117 | 115 |
118 function step2() | 116 function step2() |
119 { | 117 { |
120 InspectorTest.addResult("Check DOM breakpoint."); | 118 InspectorTest.addResult("Check DOM breakpoint."); |
121 element._checkboxElement.click(); | 119 pane._items.get(breakpoint).checkbox.click(); |
122 InspectorTest.evaluateInPageWithTimeout("modifyAttribute('rootEl
ement', 'data-test-breakpoint-toggle', 'bar')"); | 120 InspectorTest.evaluateInPageWithTimeout("modifyAttribute('rootEl
ement', 'data-test-breakpoint-toggle', 'bar')"); |
123 InspectorTest.addResult("Test that DOM breakpoint is hit when re
-enabled."); | 121 InspectorTest.addResult("Test that DOM breakpoint is hit when re
-enabled."); |
124 InspectorTest.waitUntilPausedAndDumpStackAndResume(next); | 122 InspectorTest.waitUntilPausedAndDumpStackAndResume(next); |
125 } | 123 } |
126 }, | 124 }, |
127 | 125 |
128 function testInsertGrandchild(next) | 126 function testInsertGrandchild(next) |
129 { | 127 { |
130 InspectorTest.addResult("Test that 'Subtree Modified' breakpoint is
hit when appending a grandchild."); | 128 InspectorTest.addResult("Test that 'Subtree Modified' breakpoint is
hit when appending a grandchild."); |
131 InspectorTest.evaluateInPageWithTimeout("appendElement('childElement
', 'grandchildElement')"); | 129 InspectorTest.evaluateInPageWithTimeout("appendElement('childElement
', 'grandchildElement')"); |
(...skipping 19 matching lines...) Expand all Loading... |
151 function step2() | 149 function step2() |
152 { | 150 { |
153 InspectorTest.waitUntilPaused(step3); | 151 InspectorTest.waitUntilPaused(step3); |
154 InspectorTest.evaluateInPageWithTimeout("breakDebugger()"); | 152 InspectorTest.evaluateInPageWithTimeout("breakDebugger()"); |
155 InspectorTest.addResult("Call breakDebugger, expect it to show u
p in next stack trace."); | 153 InspectorTest.addResult("Call breakDebugger, expect it to show u
p in next stack trace."); |
156 } | 154 } |
157 | 155 |
158 function step3(frames) | 156 function step3(frames) |
159 { | 157 { |
160 InspectorTest.captureStackTrace(frames); | 158 InspectorTest.captureStackTrace(frames); |
161 pane._removeBreakpoint(rootElement, Components.DOMBreakpointsSid
ebarPane.BreakpointTypes.SubtreeModified); | 159 InspectorTest.domDebuggerModel.removeDOMBreakpoint(rootElement,
SDK.DOMDebuggerModel.DOMBreakpoint.Type.SubtreeModified); |
162 InspectorTest.resumeExecution(next); | 160 InspectorTest.resumeExecution(next); |
163 } | 161 } |
164 }, | 162 }, |
165 | 163 |
166 function testModifyAttribute(next) | 164 function testModifyAttribute(next) |
167 { | 165 { |
168 InspectorTest.addResult("Test that 'Attribute Modified' breakpoint i
s hit when modifying attribute."); | 166 InspectorTest.addResult("Test that 'Attribute Modified' breakpoint i
s hit when modifying attribute."); |
169 pane._setBreakpoint(rootElement, Components.DOMBreakpointsSidebarPan
e.BreakpointTypes.AttributeModified, true); | 167 InspectorTest.domDebuggerModel.setDOMBreakpoint(rootElement, SDK.DOM
DebuggerModel.DOMBreakpoint.Type.AttributeModified); |
170 InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on
rootElement."); | 168 InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on
rootElement."); |
171 InspectorTest.evaluateInPageWithTimeout("modifyAttribute('rootElemen
t', 'data-test', 'foo')"); | 169 InspectorTest.evaluateInPageWithTimeout("modifyAttribute('rootElemen
t', 'data-test', 'foo')"); |
172 InspectorTest.addResult("Modify rootElement data-test attribute."); | 170 InspectorTest.addResult("Modify rootElement data-test attribute."); |
173 InspectorTest.waitUntilPausedAndDumpStackAndResume(step2); | 171 InspectorTest.waitUntilPausedAndDumpStackAndResume(step2); |
174 | 172 |
175 function step2(callFrames) | 173 function step2(callFrames) |
176 { | 174 { |
177 pane._removeBreakpoint(rootElement, Components.DOMBreakpointsSid
ebarPane.BreakpointTypes.AttributeModified); | 175 InspectorTest.domDebuggerModel.removeDOMBreakpoint(rootElement,
SDK.DOMDebuggerModel.DOMBreakpoint.Type.AttributeModified); |
178 next(); | 176 next(); |
179 } | 177 } |
180 }, | 178 }, |
181 | 179 |
182 function testModifyAttrNode(next) | 180 function testModifyAttrNode(next) |
183 { | 181 { |
184 InspectorTest.addResult("Test that 'Attribute Modified' breakpoint i
s hit when modifying Attr node."); | 182 InspectorTest.addResult("Test that 'Attribute Modified' breakpoint i
s hit when modifying Attr node."); |
185 pane._setBreakpoint(rootElement, Components.DOMBreakpointsSidebarPan
e.BreakpointTypes.AttributeModified, true); | 183 InspectorTest.domDebuggerModel.setDOMBreakpoint(rootElement, SDK.DOM
DebuggerModel.DOMBreakpoint.Type.AttributeModified); |
186 InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on
rootElement."); | 184 InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on
rootElement."); |
187 InspectorTest.evaluateInPageWithTimeout("modifyAttrNode('rootElement
', 'data-test', 'bar')"); | 185 InspectorTest.evaluateInPageWithTimeout("modifyAttrNode('rootElement
', 'data-test', 'bar')"); |
188 InspectorTest.addResult("Modify rootElement data-test attribute."); | 186 InspectorTest.addResult("Modify rootElement data-test attribute."); |
189 InspectorTest.waitUntilPausedAndDumpStackAndResume(step2); | 187 InspectorTest.waitUntilPausedAndDumpStackAndResume(step2); |
190 | 188 |
191 function step2(callFrames) | 189 function step2(callFrames) |
192 { | 190 { |
193 pane._removeBreakpoint(rootElement, Components.DOMBreakpointsSid
ebarPane.BreakpointTypes.AttributeModified); | 191 InspectorTest.domDebuggerModel.removeDOMBreakpoint(rootElement,
SDK.DOMDebuggerModel.DOMBreakpoint.Type.AttributeModified); |
194 next(); | 192 next(); |
195 } | 193 } |
196 }, | 194 }, |
197 | 195 |
198 function testSetAttrNode(next) | 196 function testSetAttrNode(next) |
199 { | 197 { |
200 InspectorTest.addResult("Test that 'Attribute Modified' breakpoint i
s hit when adding a new Attr node."); | 198 InspectorTest.addResult("Test that 'Attribute Modified' breakpoint i
s hit when adding a new Attr node."); |
201 pane._setBreakpoint(rootElement, Components.DOMBreakpointsSidebarPan
e.BreakpointTypes.AttributeModified, true); | 199 InspectorTest.domDebuggerModel.setDOMBreakpoint(rootElement, SDK.DOM
DebuggerModel.DOMBreakpoint.Type.AttributeModified); |
202 InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on
rootElement."); | 200 InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on
rootElement."); |
203 InspectorTest.evaluateInPageWithTimeout("setAttrNode('rootElement',
'data-foo', 'bar')"); | 201 InspectorTest.evaluateInPageWithTimeout("setAttrNode('rootElement',
'data-foo', 'bar')"); |
204 InspectorTest.addResult("Modify rootElement data-foo attribute."); | 202 InspectorTest.addResult("Modify rootElement data-foo attribute."); |
205 InspectorTest.waitUntilPausedAndDumpStackAndResume(step2); | 203 InspectorTest.waitUntilPausedAndDumpStackAndResume(step2); |
206 | 204 |
207 function step2(callFrames) | 205 function step2(callFrames) |
208 { | 206 { |
209 pane._removeBreakpoint(rootElement, Components.DOMBreakpointsSid
ebarPane.BreakpointTypes.AttributeModified); | 207 InspectorTest.domDebuggerModel.removeDOMBreakpoint(rootElement,
SDK.DOMDebuggerModel.DOMBreakpoint.Type.AttributeModified); |
210 next(); | 208 next(); |
211 } | 209 } |
212 }, | 210 }, |
213 | 211 |
214 function testModifyStyleAttribute(next) | 212 function testModifyStyleAttribute(next) |
215 { | 213 { |
216 InspectorTest.addResult("Test that 'Attribute Modified' breakpoint i
s hit when modifying style attribute."); | 214 InspectorTest.addResult("Test that 'Attribute Modified' breakpoint i
s hit when modifying style attribute."); |
217 pane._setBreakpoint(rootElement, Components.DOMBreakpointsSidebarPan
e.BreakpointTypes.AttributeModified, true); | 215 InspectorTest.domDebuggerModel.setDOMBreakpoint(rootElement, SDK.DOM
DebuggerModel.DOMBreakpoint.Type.AttributeModified); |
218 InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on
rootElement."); | 216 InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on
rootElement."); |
219 InspectorTest.evaluateInPageWithTimeout("modifyStyleAttribute('rootE
lement', 'color', 'green')"); | 217 InspectorTest.evaluateInPageWithTimeout("modifyStyleAttribute('rootE
lement', 'color', 'green')"); |
220 InspectorTest.addResult("Modify rootElement style.color attribute.")
; | 218 InspectorTest.addResult("Modify rootElement style.color attribute.")
; |
221 InspectorTest.waitUntilPausedAndDumpStackAndResume(step2); | 219 InspectorTest.waitUntilPausedAndDumpStackAndResume(step2); |
222 | 220 |
223 function step2(callFrames) | 221 function step2(callFrames) |
224 { | 222 { |
225 pane._removeBreakpoint(rootElement, Components.DOMBreakpointsSid
ebarPane.BreakpointTypes.AttributeModified); | 223 InspectorTest.domDebuggerModel.removeDOMBreakpoint(rootElement,
SDK.DOMDebuggerModel.DOMBreakpoint.Type.AttributeModified); |
226 next(); | 224 next(); |
227 } | 225 } |
228 }, | 226 }, |
229 | 227 |
230 function testRemoveNode(next) | 228 function testRemoveNode(next) |
231 { | 229 { |
232 InspectorTest.addResult("Test that 'Node Removed' breakpoint is hit
when removing a node."); | 230 InspectorTest.addResult("Test that 'Node Removed' breakpoint is hit
when removing a node."); |
233 InspectorTest.nodeWithId("elementToRemove", step2); | 231 InspectorTest.nodeWithId("elementToRemove", step2); |
234 | 232 |
235 function step2(node) | 233 function step2(node) |
236 { | 234 { |
237 pane._setBreakpoint(node, Components.DOMBreakpointsSidebarPane.B
reakpointTypes.NodeRemoved, true); | 235 InspectorTest.domDebuggerModel.setDOMBreakpoint(node, SDK.DOMDeb
uggerModel.DOMBreakpoint.Type.NodeRemoved); |
238 InspectorTest.addResult("Set 'Node Removed' DOM breakpoint on el
ementToRemove."); | 236 InspectorTest.addResult("Set 'Node Removed' DOM breakpoint on el
ementToRemove."); |
239 InspectorTest.evaluateInPageWithTimeout("removeElement('elementT
oRemove')"); | 237 InspectorTest.evaluateInPageWithTimeout("removeElement('elementT
oRemove')"); |
240 InspectorTest.addResult("Remove elementToRemove."); | 238 InspectorTest.addResult("Remove elementToRemove."); |
241 InspectorTest.waitUntilPausedAndDumpStackAndResume(next); | 239 InspectorTest.waitUntilPausedAndDumpStackAndResume(next); |
242 } | 240 } |
243 }, | 241 }, |
244 | 242 |
245 function testReload(next) | 243 function testReload(next) |
246 { | 244 { |
247 InspectorTest.addResult("Test that DOM breakpoints are persisted bet
ween page reloads."); | 245 InspectorTest.addResult("Test that DOM breakpoints are persisted bet
ween page reloads."); |
248 InspectorTest.nodeWithId("rootElement", step2); | 246 InspectorTest.nodeWithId("rootElement", step2); |
249 | 247 |
250 function step2(node) | 248 function step2(node) |
251 { | 249 { |
252 pane._setBreakpoint(node, Components.DOMBreakpointsSidebarPane.B
reakpointTypes.SubtreeModified, true); | 250 InspectorTest.domDebuggerModel.setDOMBreakpoint(node, SDK.DOMDeb
uggerModel.DOMBreakpoint.Type.SubtreeModified); |
253 pane._saveBreakpoints(); | |
254 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint o
n rootElement."); | 251 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint o
n rootElement."); |
255 InspectorTest.reloadPage(step3); | 252 InspectorTest.reloadPage(step3); |
256 } | 253 } |
257 | 254 |
258 function step3() | 255 function step3() |
259 { | 256 { |
260 InspectorTest.expandElementsTree(step4); | 257 InspectorTest.expandElementsTree(step4); |
261 } | 258 } |
262 | 259 |
263 function step4() | 260 function step4() |
264 { | 261 { |
265 InspectorTest.evaluateInPageWithTimeout("appendElement('rootElem
ent', 'childElement')"); | 262 InspectorTest.evaluateInPageWithTimeout("appendElement('rootElem
ent', 'childElement')"); |
266 InspectorTest.addResult("Append childElement to rootElement."); | 263 InspectorTest.addResult("Append childElement to rootElement."); |
267 InspectorTest.waitUntilPausedAndDumpStackAndResume(next); | 264 InspectorTest.waitUntilPausedAndDumpStackAndResume(next); |
268 } | 265 } |
269 }, | 266 }, |
270 | 267 |
271 function testInsertChildIntoAuthorShadowTree(next) | 268 function testInsertChildIntoAuthorShadowTree(next) |
272 { | 269 { |
273 InspectorTest.shadowRootByHostId("hostElement", callback); | 270 InspectorTest.shadowRootByHostId("hostElement", callback); |
274 | 271 |
275 function callback(node) | 272 function callback(node) |
276 { | 273 { |
277 authorShadowRoot = node; | 274 authorShadowRoot = node; |
278 InspectorTest.addResult("Test that 'Subtree Modified' breakpoint
on author shadow root is hit when appending a child."); | 275 InspectorTest.addResult("Test that 'Subtree Modified' breakpoint
on author shadow root is hit when appending a child."); |
279 pane._setBreakpoint(authorShadowRoot, Components.DOMBreakpointsS
idebarPane.BreakpointTypes.SubtreeModified, true); | 276 InspectorTest.domDebuggerModel.setDOMBreakpoint(authorShadowRoot
, SDK.DOMDebuggerModel.DOMBreakpoint.Type.SubtreeModified); |
280 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint o
n author shadow root."); | 277 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint o
n author shadow root."); |
281 InspectorTest.evaluateInPageWithTimeout("appendElementToOpenShad
owRoot('childElement')"); | 278 InspectorTest.evaluateInPageWithTimeout("appendElementToOpenShad
owRoot('childElement')"); |
282 InspectorTest.addResult("Append childElement to author shadow ro
ot."); | 279 InspectorTest.addResult("Append childElement to author shadow ro
ot."); |
283 InspectorTest.waitUntilPausedAndDumpStackAndResume(next); | 280 InspectorTest.waitUntilPausedAndDumpStackAndResume(next); |
284 } | 281 } |
285 }, | 282 }, |
286 | 283 |
287 function testReloadWithShadowElementBreakpoint(next) | 284 function testReloadWithShadowElementBreakpoint(next) |
288 { | 285 { |
289 InspectorTest.nodeWithId("outerElement", step1); | 286 InspectorTest.nodeWithId("outerElement", step1); |
290 | 287 |
291 function step1(node) | 288 function step1(node) |
292 { | 289 { |
293 outerElement = node; | 290 outerElement = node; |
294 | 291 |
295 InspectorTest.addResult("Test that shadow DOM breakpoints are pe
rsisted between page reloads."); | 292 InspectorTest.addResult("Test that shadow DOM breakpoints are pe
rsisted between page reloads."); |
296 pane._setBreakpoint(outerElement, Components.DOMBreakpointsSideb
arPane.BreakpointTypes.SubtreeModified, true); | 293 InspectorTest.domDebuggerModel.setDOMBreakpoint(outerElement, SD
K.DOMDebuggerModel.DOMBreakpoint.Type.SubtreeModified); |
297 pane._saveBreakpoints(); | |
298 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint o
n outerElement."); | 294 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint o
n outerElement."); |
299 InspectorTest.reloadPage(step2); | 295 InspectorTest.reloadPage(step2); |
300 } | 296 } |
301 | 297 |
302 function step2() | 298 function step2() |
303 { | 299 { |
304 InspectorTest.expandElementsTree(step3); | 300 InspectorTest.expandElementsTree(step3); |
305 } | 301 } |
306 | 302 |
307 function step3() | 303 function step3() |
(...skipping 20 matching lines...) Expand all Loading... |
328 </div> | 324 </div> |
329 | 325 |
330 <div id="hostElement"></div> | 326 <div id="hostElement"></div> |
331 <script> | 327 <script> |
332 var root = document.getElementById("hostElement").createShadowRoot(); | 328 var root = document.getElementById("hostElement").createShadowRoot(); |
333 root.innerHTML = "<div id='outerElement' style='red'><input id='input'/></div>"; | 329 root.innerHTML = "<div id='outerElement' style='red'><input id='input'/></div>"; |
334 </script> | 330 </script> |
335 | 331 |
336 </body> | 332 </body> |
337 </html> | 333 </html> |
OLD | NEW |