src/third_party/WebKit/LayoutTests/inspector/sources/debugger/dom-breakpoints.html

   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 src="../../../http/tests/inspector/debugger-test.js"></script>
   6 <script>
   7
   8 function appendElement(parentId, childId)
   9 {
  10     var child = document.createElement("div");
  11     child.id = childId;
  12     document.getElementById(parentId).appendChild(child);
  13 }
  14
  15 function modifyAttribute(elementId, name, value)
  16 {
  17     var element = document.getElementById(elementId);
  18     element.setAttribute(name, value);
  19 }
  20
  21 function modifyAttrNode(elementId, name, value)
  22 {
  23     var element = document.getElementById(elementId);
  24     element.attributes[name].value = value;
  25 }
  26
  27 function setAttrNode(elementId, name, value)
  28 {
  29     var element = document.getElementById(elementId);
  30     var attr = document.createAttribute(name);
  31     attr.value = value;
  32     element.attributes.setNamedItem(attr);
  33 }
  34
  35 function modifyStyleAttribute(elementId, name, value)
  36 {
  37     var element = document.getElementById(elementId);
  38     element.style.setProperty(name, value);
  39 }
  40
  41 function removeElement(elementId)
  42 {
  43     var element = document.getElementById(elementId);
  44     element.parentNode.removeChild(element);
  45 }
  46
  47 function setInnerHTML(elementId, html)
  48 {
  49     var element = document.getElementById(elementId);
  50     element.innerHTML = html;
  51 }
  52
  53 function breakDebugger()
  54 {
  55     debugger;
  56 }
  57
  58 function authorShadowRoot()
  59 {
  60     return document.getElementById("hostElement").shadowRoot;
  61 }
  62
  63 function authorShadowElement(id)
  64 {
  65     return authorShadowRoot().getElementById(id);
  66 }
  67
  68 function appendElementToAuthorShadowTree(parentId, childId)
  69 {
  70     var child = document.createElement("div");
  71     child.id = childId;
  72     authorShadowElement(parentId).appendChild(child);
  73 }
  74
  75 function appendElementToAuthorShadowRoot(childId)
  76 {
  77     var child = document.createElement("div");
  78     child.id = childId;
  79     authorShadowRoot().appendChild(child);
  80 }
  81
  82 function test()
  83 {
  84
  85     var pane = WebInspector.domBreakpointsSidebarPane;
  86     var rootElement;
  87     var outerElement;
  88     var authorShadowRoot;
  89     InspectorTest.runDebuggerTestSuite([
  90         function testInsertChild(next)
  91         {
  92             InspectorTest.addResult("Test that 'Subtree Modified' breakpoint is hit when appending a child.");
  93             InspectorTest.nodeWithId("rootElement", step2);
  94
  95             function step2(node)
  96             {
  97                 rootElement = node;
  98                 pane._setBreakpoint(node, pane._breakpointTypes.SubtreeModified, true);
  99                 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint on rootElement.");
 100                 InspectorTest.evaluateInPageWithTimeout("appendElement('rootElement', 'childElement')");
 101                 InspectorTest.addResult("Append childElement to rootElement.");
 102                 InspectorTest.waitUntilPausedAndDumpStackAndResume(next);
 103             }
 104         },
 105
 106         function testInsertGrandchild(next)
 107         {
 108             InspectorTest.addResult("Test that 'Subtree Modified' breakpoint is hit when appending a grandchild.");
 109             InspectorTest.evaluateInPageWithTimeout("appendElement('childElement', 'grandchildElement')");
 110             InspectorTest.addResult("Append grandchildElement to childElement.");
 111             InspectorTest.waitUntilPausedAndDumpStackAndResume(next);
 112         },
 113
 114         function testRemoveChild(next)
 115         {
 116             InspectorTest.addResult("Test that 'Subtree Modified' breakpoint is hit when removing a child.");
 117             InspectorTest.evaluateInPageWithTimeout("removeElement('grandchildElement')");
 118             InspectorTest.addResult("Remove grandchildElement.");
 119             InspectorTest.waitUntilPausedAndDumpStackAndResume(next);
 120         },
 121
 122         function testInnerHTML(next)
 123         {
 124             InspectorTest.addResult("Test that 'Subtree Modified' breakpoint is hit exactly once when setting innerHTML.");
 125             InspectorTest.evaluateInPageWithTimeout("setInnerHTML('childElement', '<br><br>')");
 126             InspectorTest.addResult("Set childElement.innerHTML.");
 127             InspectorTest.waitUntilPausedAndDumpStackAndResume(step2);
 128
 129             function step2()
 130             {
 131                 InspectorTest.waitUntilPaused(step3);
 132                 InspectorTest.evaluateInPageWithTimeout("breakDebugger()");
 133                 InspectorTest.addResult("Call breakDebugger, expect it to show up in next stack trace.");
 134             }
 135
 136             function step3(frames)
 137             {
 138                 InspectorTest.captureStackTrace(frames);
 139                 pane._removeBreakpoint(rootElement, pane._breakpointTypes.SubtreeModified);
 140                 InspectorTest.resumeExecution(next);
 141             }
 142         },
 143
 144         function testModifyAttribute(next)
 145         {
 146             InspectorTest.addResult("Test that 'Attribute Modified' breakpoint is hit when modifying attribute.");
 147             pane._setBreakpoint(rootElement, pane._breakpointTypes.AttributeModified, true);
 148             InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on rootElement.");
 149             InspectorTest.evaluateInPageWithTimeout("modifyAttribute('rootElement', 'data-test', 'foo')");
 150             InspectorTest.addResult("Modify rootElement data-test attribute.");
 151             InspectorTest.waitUntilPausedAndDumpStackAndResume(step2);
 152
 153             function step2(callFrames)
 154             {
 155                 pane._removeBreakpoint(rootElement, pane._breakpointTypes.AttributeModified);
 156                 next();
 157             }
 158         },
 159
 160         function testModifyAttrNode(next)
 161         {
 162             InspectorTest.addResult("Test that 'Attribute Modified' breakpoint is hit when modifying Attr node.");
 163             pane._setBreakpoint(rootElement, pane._breakpointTypes.AttributeModified, true);
 164             InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on rootElement.");
 165             InspectorTest.evaluateInPageWithTimeout("modifyAttrNode('rootElement', 'data-test', 'bar')");
 166             InspectorTest.addResult("Modify rootElement data-test attribute.");
 167             InspectorTest.waitUntilPausedAndDumpStackAndResume(step2);
 168
 169             function step2(callFrames)
 170             {
 171                 pane._removeBreakpoint(rootElement, pane._breakpointTypes.AttributeModified);
 172                 next();
 173             }
 174         },
 175
 176         function testSetAttrNode(next)
 177         {
 178             InspectorTest.addResult("Test that 'Attribute Modified' breakpoint is hit when adding a new Attr node.");
 179             pane._setBreakpoint(rootElement, pane._breakpointTypes.AttributeModified, true);
 180             InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on rootElement.");
 181             InspectorTest.evaluateInPageWithTimeout("setAttrNode('rootElement', 'data-foo', 'bar')");
 182             InspectorTest.addResult("Modify rootElement data-foo attribute.");
 183             InspectorTest.waitUntilPausedAndDumpStackAndResume(step2);
 184
 185             function step2(callFrames)
 186             {
 187                 pane._removeBreakpoint(rootElement, pane._breakpointTypes.AttributeModified);
 188                 next();
 189             }
 190         },
 191
 192         function testModifyStyleAttribute(next)
 193         {
 194             InspectorTest.addResult("Test that 'Attribute Modified' breakpoint is hit when modifying style attribute.");
 195             pane._setBreakpoint(rootElement, pane._breakpointTypes.AttributeModified, true);
 196             InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on rootElement.");
 197             InspectorTest.evaluateInPageWithTimeout("modifyStyleAttribute('rootElement', 'color', 'green')");
 198             InspectorTest.addResult("Modify rootElement style.color attribute.");
 199             InspectorTest.waitUntilPausedAndDumpStackAndResume(step2);
 200
 201             function step2(callFrames)
 202             {
 203                 pane._removeBreakpoint(rootElement, pane._breakpointTypes.AttributeModified);
 204                 next();
 205             }
 206         },
 207
 208         function testRemoveNode(next)
 209         {
 210             InspectorTest.addResult("Test that 'Node Removed' breakpoint is hit when removing a node.");
 211             InspectorTest.nodeWithId("elementToRemove", step2);
 212
 213             function step2(node)
 214             {
 215                 pane._setBreakpoint(node, pane._breakpointTypes.NodeRemoved, true);
 216                 InspectorTest.addResult("Set 'Node Removed' DOM breakpoint on elementToRemove.");
 217                 InspectorTest.evaluateInPageWithTimeout("removeElement('elementToRemove')");
 218                 InspectorTest.addResult("Remove elementToRemove.");
 219                 InspectorTest.waitUntilPausedAndDumpStackAndResume(next);
 220             }
 221         },
 222
 223         function testReload(next)
 224         {
 225             InspectorTest.addResult("Test that DOM breakpoints are persisted between page reloads.");
 226             InspectorTest.nodeWithId("rootElement", step2);
 227
 228             function step2(node)
 229             {
 230                 pane._setBreakpoint(node, pane._breakpointTypes.SubtreeModified, true);
 231                 pane._saveBreakpoints();
 232                 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint on rootElement.");
 233                 InspectorTest.reloadPage(step3);
 234             }
 235
 236             function step3()
 237             {
 238                 InspectorTest.expandElementsTree(step4);
 239             }
 240
 241             function step4()
 242             {
 243                 InspectorTest.evaluateInPageWithTimeout("appendElement('rootElement', 'childElement')");
 244                 InspectorTest.addResult("Append childElement to rootElement.");
 245                 InspectorTest.waitUntilPausedAndDumpStackAndResume(next);
 246             }
 247         },
 248
 249         function testInsertChildIntoAuthorShadowTree(next)
 250         {
 251             InspectorTest.shadowRootByHostId("hostElement", callback);
 252
 253             function callback(node)
 254             {
 255                 authorShadowRoot = node;
 256                 InspectorTest.addResult("Test that 'Subtree Modified' breakpoint on author shadow root is hit when appending a child.");
 257                 pane._setBreakpoint(authorShadowRoot, pane._breakpointTypes.SubtreeModified, true);
 258                 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint on author shadow root.");
 259                 InspectorTest.evaluateInPageWithTimeout("appendElementToAuthorShadowRoot('childElement')");
 260                 InspectorTest.addResult("Append childElement to author shadow root.");
 261                 InspectorTest.waitUntilPausedAndDumpStackAndResume(next);
 262             }
 263         },
 264
 265         function testReloadWithShadowElementBreakpoint(next)
 266         {
 267             InspectorTest.nodeWithId("outerElement", step1);
 268
 269             function step1(node)
 270             {
 271                 outerElement = node;
 272
 273                 InspectorTest.addResult("Test that shadow DOM breakpoints are persisted between page reloads.");
 274                 pane._setBreakpoint(outerElement, pane._breakpointTypes.SubtreeModified, true);
 275                 pane._saveBreakpoints();
 276                 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint on outerElement.");
 277                 InspectorTest.reloadPage(step2);
 278             }
 279
 280             function step2()
 281             {
 282                 InspectorTest.expandElementsTree(step3);
 283             }
 284
 285             function step3()
 286             {
 287                 InspectorTest.evaluateInPageWithTimeout("appendElementToAuthorShadowTree('outerElement', 'childElement')");
 288                 InspectorTest.addResult("Append childElement to outerElement.");
 289                 InspectorTest.waitUntilPausedAndDumpStackAndResume(next);
 290             }
 291         }
 292
 293     ]);
 294 }
 295
 296 </script>
 297 </head>
 298
 299 <body onload="runTest()">
 300 <p>
 301 Tests DOM breakpoints. <a href="https://bugs.webkit.org/show_bug.cgi?id=42886">Bug 42886</a>
 302 </p>
 303
 304 <div id="rootElement" style="color: red">
 305 <div id="elementToRemove"></div>
 306 </div>
 307
 308 <div id="hostElement"></div>
 309 <script>
 310 var root = document.getElementById("hostElement").createShadowRoot();
 311 root.innerHTML = "<div id='outerElement' style='red'><input id='input'/></div>";
 312 </script>
 313
 314 </body>
 315 </html>