| 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 82 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 93 InspectorTest.addResult("Test that 'Subtree Modified' breakpoint is
hit when appending a child."); | 93 InspectorTest.addResult("Test that 'Subtree Modified' breakpoint is
hit when appending a child."); |
| 94 InspectorTest.nodeWithId("rootElement", step2); | 94 InspectorTest.nodeWithId("rootElement", step2); |
| 95 | 95 |
| 96 function step2(node) | 96 function step2(node) |
| 97 { | 97 { |
| 98 rootElement = node; | 98 rootElement = node; |
| 99 pane._setBreakpoint(node, pane._breakpointTypes.SubtreeModified,
true); | 99 pane._setBreakpoint(node, pane._breakpointTypes.SubtreeModified,
true); |
| 100 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint o
n rootElement."); | 100 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint o
n rootElement."); |
| 101 InspectorTest.evaluateInPageWithTimeout("appendElement('rootElem
ent', 'childElement')"); | 101 InspectorTest.evaluateInPageWithTimeout("appendElement('rootElem
ent', 'childElement')"); |
| 102 InspectorTest.addResult("Append childElement to rootElement."); | 102 InspectorTest.addResult("Append childElement to rootElement."); |
| 103 waitUntilPausedAndDumpStack(next); | 103 InspectorTest.waitUntilPausedAndDumpStackAndResume(next); |
| 104 } | 104 } |
| 105 }, | 105 }, |
| 106 | 106 |
| 107 function testInsertGrandchild(next) | 107 function testInsertGrandchild(next) |
| 108 { | 108 { |
| 109 InspectorTest.addResult("Test that 'Subtree Modified' breakpoint is
hit when appending a grandchild."); | 109 InspectorTest.addResult("Test that 'Subtree Modified' breakpoint is
hit when appending a grandchild."); |
| 110 InspectorTest.evaluateInPageWithTimeout("appendElement('childElement
', 'grandchildElement')"); | 110 InspectorTest.evaluateInPageWithTimeout("appendElement('childElement
', 'grandchildElement')"); |
| 111 InspectorTest.addResult("Append grandchildElement to childElement.")
; | 111 InspectorTest.addResult("Append grandchildElement to childElement.")
; |
| 112 waitUntilPausedAndDumpStack(next); | 112 InspectorTest.waitUntilPausedAndDumpStackAndResume(next); |
| 113 }, | 113 }, |
| 114 | 114 |
| 115 function testRemoveChild(next) | 115 function testRemoveChild(next) |
| 116 { | 116 { |
| 117 InspectorTest.addResult("Test that 'Subtree Modified' breakpoint is
hit when removing a child."); | 117 InspectorTest.addResult("Test that 'Subtree Modified' breakpoint is
hit when removing a child."); |
| 118 InspectorTest.evaluateInPageWithTimeout("removeElement('grandchildEl
ement')"); | 118 InspectorTest.evaluateInPageWithTimeout("removeElement('grandchildEl
ement')"); |
| 119 InspectorTest.addResult("Remove grandchildElement."); | 119 InspectorTest.addResult("Remove grandchildElement."); |
| 120 waitUntilPausedAndDumpStack(next); | 120 InspectorTest.waitUntilPausedAndDumpStackAndResume(next); |
| 121 }, | 121 }, |
| 122 | 122 |
| 123 function testInnerHTML(next) | 123 function testInnerHTML(next) |
| 124 { | 124 { |
| 125 InspectorTest.addResult("Test that 'Subtree Modified' breakpoint is
hit exactly once when setting innerHTML."); | 125 InspectorTest.addResult("Test that 'Subtree Modified' breakpoint is
hit exactly once when setting innerHTML."); |
| 126 InspectorTest.evaluateInPageWithTimeout("setInnerHTML('childElement'
, '<br><br>')"); | 126 InspectorTest.evaluateInPageWithTimeout("setInnerHTML('childElement'
, '<br><br>')"); |
| 127 InspectorTest.addResult("Set childElement.innerHTML."); | 127 InspectorTest.addResult("Set childElement.innerHTML."); |
| 128 waitUntilPausedAndDumpStack(step2); | 128 InspectorTest.waitUntilPausedAndDumpStackAndResume(step2); |
| 129 | 129 |
| 130 function step2() | 130 function step2() |
| 131 { | 131 { |
| 132 InspectorTest.waitUntilPaused(step3); | 132 InspectorTest.waitUntilPaused(step3); |
| 133 InspectorTest.evaluateInPageWithTimeout("breakDebugger()"); | 133 InspectorTest.evaluateInPageWithTimeout("breakDebugger()"); |
| 134 InspectorTest.addResult("Call breakDebugger, expect it to show u
p in next stack trace."); | 134 InspectorTest.addResult("Call breakDebugger, expect it to show u
p in next stack trace."); |
| 135 } | 135 } |
| 136 | 136 |
| 137 function step3(frames) | 137 function step3(frames) |
| 138 { | 138 { |
| 139 InspectorTest.captureStackTrace(frames); | 139 InspectorTest.captureStackTrace(frames); |
| 140 pane._removeBreakpoint(rootElement, pane._breakpointTypes.Subtre
eModified); | 140 pane._removeBreakpoint(rootElement, pane._breakpointTypes.Subtre
eModified); |
| 141 InspectorTest.resumeExecution(next); | 141 InspectorTest.resumeExecution(next); |
| 142 } | 142 } |
| 143 }, | 143 }, |
| 144 | 144 |
| 145 function testModifyAttribute(next) | 145 function testModifyAttribute(next) |
| 146 { | 146 { |
| 147 InspectorTest.addResult("Test that 'Attribute Modified' breakpoint i
s hit when modifying attribute."); | 147 InspectorTest.addResult("Test that 'Attribute Modified' breakpoint i
s hit when modifying attribute."); |
| 148 pane._setBreakpoint(rootElement, pane._breakpointTypes.AttributeModi
fied, true); | 148 pane._setBreakpoint(rootElement, pane._breakpointTypes.AttributeModi
fied, true); |
| 149 InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on
rootElement."); | 149 InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on
rootElement."); |
| 150 InspectorTest.evaluateInPageWithTimeout("modifyAttribute('rootElemen
t', 'data-test', 'foo')"); | 150 InspectorTest.evaluateInPageWithTimeout("modifyAttribute('rootElemen
t', 'data-test', 'foo')"); |
| 151 InspectorTest.addResult("Modify rootElement data-test attribute."); | 151 InspectorTest.addResult("Modify rootElement data-test attribute."); |
| 152 waitUntilPausedAndDumpStack(step2); | 152 InspectorTest.waitUntilPausedAndDumpStackAndResume(step2); |
| 153 | 153 |
| 154 function step2(callFrames) | 154 function step2(callFrames) |
| 155 { | 155 { |
| 156 pane._removeBreakpoint(rootElement, pane._breakpointTypes.Attrib
uteModified); | 156 pane._removeBreakpoint(rootElement, pane._breakpointTypes.Attrib
uteModified); |
| 157 next(); | 157 next(); |
| 158 } | 158 } |
| 159 }, | 159 }, |
| 160 | 160 |
| 161 function testModifyAttrNode(next) | 161 function testModifyAttrNode(next) |
| 162 { | 162 { |
| 163 InspectorTest.addResult("Test that 'Attribute Modified' breakpoint i
s hit when modifying Attr node."); | 163 InspectorTest.addResult("Test that 'Attribute Modified' breakpoint i
s hit when modifying Attr node."); |
| 164 pane._setBreakpoint(rootElement, pane._breakpointTypes.AttributeModi
fied, true); | 164 pane._setBreakpoint(rootElement, pane._breakpointTypes.AttributeModi
fied, true); |
| 165 InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on
rootElement."); | 165 InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on
rootElement."); |
| 166 InspectorTest.evaluateInPageWithTimeout("modifyAttrNode('rootElement
', 'data-test', 'bar')"); | 166 InspectorTest.evaluateInPageWithTimeout("modifyAttrNode('rootElement
', 'data-test', 'bar')"); |
| 167 InspectorTest.addResult("Modify rootElement data-test attribute."); | 167 InspectorTest.addResult("Modify rootElement data-test attribute."); |
| 168 waitUntilPausedAndDumpStack(step2); | 168 InspectorTest.waitUntilPausedAndDumpStackAndResume(step2); |
| 169 | 169 |
| 170 function step2(callFrames) | 170 function step2(callFrames) |
| 171 { | 171 { |
| 172 pane._removeBreakpoint(rootElement, pane._breakpointTypes.Attrib
uteModified); | 172 pane._removeBreakpoint(rootElement, pane._breakpointTypes.Attrib
uteModified); |
| 173 next(); | 173 next(); |
| 174 } | 174 } |
| 175 }, | 175 }, |
| 176 | 176 |
| 177 function testSetAttrNode(next) | 177 function testSetAttrNode(next) |
| 178 { | 178 { |
| 179 InspectorTest.addResult("Test that 'Attribute Modified' breakpoint i
s hit when adding a new Attr node."); | 179 InspectorTest.addResult("Test that 'Attribute Modified' breakpoint i
s hit when adding a new Attr node."); |
| 180 pane._setBreakpoint(rootElement, pane._breakpointTypes.AttributeModi
fied, true); | 180 pane._setBreakpoint(rootElement, pane._breakpointTypes.AttributeModi
fied, true); |
| 181 InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on
rootElement."); | 181 InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on
rootElement."); |
| 182 InspectorTest.evaluateInPageWithTimeout("setAttrNode('rootElement',
'data-foo', 'bar')"); | 182 InspectorTest.evaluateInPageWithTimeout("setAttrNode('rootElement',
'data-foo', 'bar')"); |
| 183 InspectorTest.addResult("Modify rootElement data-foo attribute."); | 183 InspectorTest.addResult("Modify rootElement data-foo attribute."); |
| 184 waitUntilPausedAndDumpStack(step2); | 184 InspectorTest.waitUntilPausedAndDumpStackAndResume(step2); |
| 185 | 185 |
| 186 function step2(callFrames) | 186 function step2(callFrames) |
| 187 { | 187 { |
| 188 pane._removeBreakpoint(rootElement, pane._breakpointTypes.Attrib
uteModified); | 188 pane._removeBreakpoint(rootElement, pane._breakpointTypes.Attrib
uteModified); |
| 189 next(); | 189 next(); |
| 190 } | 190 } |
| 191 }, | 191 }, |
| 192 | 192 |
| 193 function testModifyStyleAttribute(next) | 193 function testModifyStyleAttribute(next) |
| 194 { | 194 { |
| 195 InspectorTest.addResult("Test that 'Attribute Modified' breakpoint i
s hit when modifying style attribute."); | 195 InspectorTest.addResult("Test that 'Attribute Modified' breakpoint i
s hit when modifying style attribute."); |
| 196 pane._setBreakpoint(rootElement, pane._breakpointTypes.AttributeModi
fied, true); | 196 pane._setBreakpoint(rootElement, pane._breakpointTypes.AttributeModi
fied, true); |
| 197 InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on
rootElement."); | 197 InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on
rootElement."); |
| 198 InspectorTest.evaluateInPageWithTimeout("modifyStyleAttribute('rootE
lement', 'color', 'green')"); | 198 InspectorTest.evaluateInPageWithTimeout("modifyStyleAttribute('rootE
lement', 'color', 'green')"); |
| 199 InspectorTest.addResult("Modify rootElement style.color attribute.")
; | 199 InspectorTest.addResult("Modify rootElement style.color attribute.")
; |
| 200 waitUntilPausedAndDumpStack(step2); | 200 InspectorTest.waitUntilPausedAndDumpStackAndResume(step2); |
| 201 | 201 |
| 202 function step2(callFrames) | 202 function step2(callFrames) |
| 203 { | 203 { |
| 204 pane._removeBreakpoint(rootElement, pane._breakpointTypes.Attrib
uteModified); | 204 pane._removeBreakpoint(rootElement, pane._breakpointTypes.Attrib
uteModified); |
| 205 next(); | 205 next(); |
| 206 } | 206 } |
| 207 }, | 207 }, |
| 208 | 208 |
| 209 function testRemoveNode(next) | 209 function testRemoveNode(next) |
| 210 { | 210 { |
| 211 InspectorTest.addResult("Test that 'Node Removed' breakpoint is hit
when removing a node."); | 211 InspectorTest.addResult("Test that 'Node Removed' breakpoint is hit
when removing a node."); |
| 212 InspectorTest.nodeWithId("elementToRemove", step2); | 212 InspectorTest.nodeWithId("elementToRemove", step2); |
| 213 | 213 |
| 214 function step2(node) | 214 function step2(node) |
| 215 { | 215 { |
| 216 pane._setBreakpoint(node, pane._breakpointTypes.NodeRemoved, tru
e); | 216 pane._setBreakpoint(node, pane._breakpointTypes.NodeRemoved, tru
e); |
| 217 InspectorTest.addResult("Set 'Node Removed' DOM breakpoint on el
ementToRemove."); | 217 InspectorTest.addResult("Set 'Node Removed' DOM breakpoint on el
ementToRemove."); |
| 218 InspectorTest.evaluateInPageWithTimeout("removeElement('elementT
oRemove')"); | 218 InspectorTest.evaluateInPageWithTimeout("removeElement('elementT
oRemove')"); |
| 219 InspectorTest.addResult("Remove elementToRemove."); | 219 InspectorTest.addResult("Remove elementToRemove."); |
| 220 waitUntilPausedAndDumpStack(next); | 220 InspectorTest.waitUntilPausedAndDumpStackAndResume(next); |
| 221 } | 221 } |
| 222 }, | 222 }, |
| 223 | 223 |
| 224 function testReload(next) | 224 function testReload(next) |
| 225 { | 225 { |
| 226 InspectorTest.addResult("Test that DOM breakpoints are persisted bet
ween page reloads."); | 226 InspectorTest.addResult("Test that DOM breakpoints are persisted bet
ween page reloads."); |
| 227 InspectorTest.nodeWithId("rootElement", step2); | 227 InspectorTest.nodeWithId("rootElement", step2); |
| 228 | 228 |
| 229 function step2(node) | 229 function step2(node) |
| 230 { | 230 { |
| 231 pane._setBreakpoint(node, pane._breakpointTypes.SubtreeModified,
true); | 231 pane._setBreakpoint(node, pane._breakpointTypes.SubtreeModified,
true); |
| 232 pane._saveBreakpoints(); | 232 pane._saveBreakpoints(); |
| 233 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint o
n rootElement."); | 233 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint o
n rootElement."); |
| 234 InspectorTest.reloadPage(step3); | 234 InspectorTest.reloadPage(step3); |
| 235 } | 235 } |
| 236 | 236 |
| 237 function step3() | 237 function step3() |
| 238 { | 238 { |
| 239 InspectorTest.expandElementsTree(step4); | 239 InspectorTest.expandElementsTree(step4); |
| 240 } | 240 } |
| 241 | 241 |
| 242 function step4() | 242 function step4() |
| 243 { | 243 { |
| 244 InspectorTest.evaluateInPageWithTimeout("appendElement('rootElem
ent', 'childElement')"); | 244 InspectorTest.evaluateInPageWithTimeout("appendElement('rootElem
ent', 'childElement')"); |
| 245 InspectorTest.addResult("Append childElement to rootElement."); | 245 InspectorTest.addResult("Append childElement to rootElement."); |
| 246 waitUntilPausedAndDumpStack(next); | 246 InspectorTest.waitUntilPausedAndDumpStackAndResume(next); |
| 247 } | 247 } |
| 248 }, | 248 }, |
| 249 | 249 |
| 250 function testInsertChildIntoAuthorShadowTree(next) | 250 function testInsertChildIntoAuthorShadowTree(next) |
| 251 { | 251 { |
| 252 InspectorTest.shadowRootByHostId("hostElement", callback); | 252 InspectorTest.shadowRootByHostId("hostElement", callback); |
| 253 | 253 |
| 254 function callback(node) | 254 function callback(node) |
| 255 { | 255 { |
| 256 authorShadowRoot = node; | 256 authorShadowRoot = node; |
| 257 InspectorTest.addResult("Test that 'Subtree Modified' breakpoint
on author shadow root is hit when appending a child."); | 257 InspectorTest.addResult("Test that 'Subtree Modified' breakpoint
on author shadow root is hit when appending a child."); |
| 258 pane._setBreakpoint(authorShadowRoot, pane._breakpointTypes.Subt
reeModified, true); | 258 pane._setBreakpoint(authorShadowRoot, pane._breakpointTypes.Subt
reeModified, true); |
| 259 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint o
n author shadow root."); | 259 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint o
n author shadow root."); |
| 260 InspectorTest.evaluateInPageWithTimeout("appendElementToAuthorSh
adowRoot('childElement')"); | 260 InspectorTest.evaluateInPageWithTimeout("appendElementToAuthorSh
adowRoot('childElement')"); |
| 261 InspectorTest.addResult("Append childElement to author shadow ro
ot."); | 261 InspectorTest.addResult("Append childElement to author shadow ro
ot."); |
| 262 waitUntilPausedAndDumpStack(next); | 262 InspectorTest.waitUntilPausedAndDumpStackAndResume(next); |
| 263 } | 263 } |
| 264 }, | 264 }, |
| 265 | 265 |
| 266 function testReloadWithShadowElementBreakpoint(next) | 266 function testReloadWithShadowElementBreakpoint(next) |
| 267 { | 267 { |
| 268 InspectorTest.nodeWithId("outerElement", step1); | 268 InspectorTest.nodeWithId("outerElement", step1); |
| 269 | 269 |
| 270 function step1(node) | 270 function step1(node) |
| 271 { | 271 { |
| 272 outerElement = node; | 272 outerElement = node; |
| 273 | 273 |
| 274 InspectorTest.addResult("Test that shadow DOM breakpoints are pe
rsisted between page reloads."); | 274 InspectorTest.addResult("Test that shadow DOM breakpoints are pe
rsisted between page reloads."); |
| 275 pane._setBreakpoint(outerElement, pane._breakpointTypes.SubtreeM
odified, true); | 275 pane._setBreakpoint(outerElement, pane._breakpointTypes.SubtreeM
odified, true); |
| 276 pane._saveBreakpoints(); | 276 pane._saveBreakpoints(); |
| 277 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint o
n outerElement."); | 277 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint o
n outerElement."); |
| 278 InspectorTest.reloadPage(step2); | 278 InspectorTest.reloadPage(step2); |
| 279 } | 279 } |
| 280 | 280 |
| 281 function step2() | 281 function step2() |
| 282 { | 282 { |
| 283 InspectorTest.expandElementsTree(step3); | 283 InspectorTest.expandElementsTree(step3); |
| 284 } | 284 } |
| 285 | 285 |
| 286 function step3() | 286 function step3() |
| 287 { | 287 { |
| 288 InspectorTest.evaluateInPageWithTimeout("appendElementToAuthorSh
adowTree('outerElement', 'childElement')"); | 288 InspectorTest.evaluateInPageWithTimeout("appendElementToAuthorSh
adowTree('outerElement', 'childElement')"); |
| 289 InspectorTest.addResult("Append childElement to outerElement."); | 289 InspectorTest.addResult("Append childElement to outerElement."); |
| 290 waitUntilPausedAndDumpStack(next); | 290 InspectorTest.waitUntilPausedAndDumpStackAndResume(next); |
| 291 } | 291 } |
| 292 } | 292 } |
| 293 | 293 |
| 294 ]); | 294 ]); |
| 295 | |
| 296 function waitUntilPausedAndDumpStack(callback) | |
| 297 { | |
| 298 InspectorTest.waitUntilPaused(paused); | |
| 299 InspectorTest.addSniffer(WebInspector.CallStackSidebarPane.prototype, "s
etStatus", setStatus); | |
| 300 | |
| 301 var caption; | |
| 302 var callFrames; | |
| 303 | |
| 304 function setStatus(status) | |
| 305 { | |
| 306 if (typeof status === "string") | |
| 307 caption = status; | |
| 308 else | |
| 309 caption = status.textContent; | |
| 310 if (callFrames) | |
| 311 step1(); | |
| 312 } | |
| 313 | |
| 314 function paused(frames) | |
| 315 { | |
| 316 callFrames = frames; | |
| 317 if (typeof caption === "string") | |
| 318 step1(); | |
| 319 } | |
| 320 | |
| 321 function step1() | |
| 322 { | |
| 323 InspectorTest.captureStackTrace(callFrames); | |
| 324 InspectorTest.addResult(caption); | |
| 325 InspectorTest.runAfterPendingDispatches(step2); | |
| 326 } | |
| 327 | |
| 328 function step2() | |
| 329 { | |
| 330 InspectorTest.resumeExecution(InspectorTest.safeWrap(callback)); | |
| 331 } | |
| 332 } | |
| 333 } | 295 } |
| 334 | 296 |
| 335 </script> | 297 </script> |
| 336 </head> | 298 </head> |
| 337 | 299 |
| 338 <body onload="runTest()"> | 300 <body onload="runTest()"> |
| 339 <p> | 301 <p> |
| 340 Tests DOM breakpoints. <a href="https://bugs.webkit.org/show_bug.cgi?id=42886">B
ug 42886</a> | 302 Tests DOM breakpoints. <a href="https://bugs.webkit.org/show_bug.cgi?id=42886">B
ug 42886</a> |
| 341 </p> | 303 </p> |
| 342 | 304 |
| 343 <div id="rootElement" style="color: red"> | 305 <div id="rootElement" style="color: red"> |
| 344 <div id="elementToRemove"></div> | 306 <div id="elementToRemove"></div> |
| 345 </div> | 307 </div> |
| 346 | 308 |
| 347 <div id="hostElement"></div> | 309 <div id="hostElement"></div> |
| 348 <script> | 310 <script> |
| 349 var root = document.getElementById("hostElement").createShadowRoot(); | 311 var root = document.getElementById("hostElement").createShadowRoot(); |
| 350 root.innerHTML = "<div id='outerElement' style='red'><input id='input'/></div>"; | 312 root.innerHTML = "<div id='outerElement' style='red'><input id='input'/></div>"; |
| 351 </script> | 313 </script> |
| 352 | 314 |
| 353 </body> | 315 </body> |
| 354 </html> | 316 </html> |
| OLD | NEW |