src/third_party/WebKit/LayoutTests/inspector/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 test()
  59 {
  60     WebInspector.showPanel("elements");
  61
  62     var pane = WebInspector.domBreakpointsSidebarPane;
  63     var rootElement;
  64     InspectorTest.runDebuggerTestSuite([
  65         function testInsertChild(next)
  66         {
  67             InspectorTest.addResult("Test that 'Subtree Modified' breakpoint is hit when appending a child.");
  68             InspectorTest.nodeWithId("rootElement", step2);
  69
  70             function step2(node)
  71             {
  72                 rootElement = node;
  73                 pane._setBreakpoint(node, pane._breakpointTypes.SubtreeModified, true);
  74                 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint on rootElement.");
  75                 InspectorTest.evaluateInPageWithTimeout("appendElement('rootElement', 'childElement')");
  76                 InspectorTest.addResult("Append childElement to rootElement.");
  77                 waitUntilPausedAndDumpStack(next);
  78             }
  79         },
  80
  81         function testInsertGrandchild(next)
  82         {
  83             InspectorTest.addResult("Test that 'Subtree Modified' breakpoint is hit when appending a grandchild.");
  84             InspectorTest.evaluateInPageWithTimeout("appendElement('childElement', 'grandchildElement')");
  85             InspectorTest.addResult("Append grandchildElement to childElement.");
  86             waitUntilPausedAndDumpStack(next);
  87         },
  88
  89         function testRemoveChild(next)
  90         {
  91             InspectorTest.addResult("Test that 'Subtree Modified' breakpoint is hit when removing a child.");
  92             InspectorTest.evaluateInPageWithTimeout("removeElement('grandchildElement')");
  93             InspectorTest.addResult("Remove grandchildElement.");
  94             waitUntilPausedAndDumpStack(next);
  95         },
  96
  97         function testInnerHTML(next)
  98         {
  99             InspectorTest.addResult("Test that 'Subtree Modified' breakpoint is hit exactly once when setting innerHTML.");
 100             InspectorTest.evaluateInPageWithTimeout("setInnerHTML('childElement', '<br><br>')");
 101             InspectorTest.addResult("Set childElement.innerHTML.");
 102             waitUntilPausedAndDumpStack(step2);
 103
 104             function step2()
 105             {
 106                 InspectorTest.waitUntilPaused(step3);
 107                 InspectorTest.evaluateInPageWithTimeout("breakDebugger()");
 108                 InspectorTest.addResult("Call breakDebugger, expect it to show up in next stack trace.");
 109             }
 110
 111             function step3(frames)
 112             {
 113                 InspectorTest.captureStackTrace(frames);
 114                 pane._removeBreakpoint(rootElement, pane._breakpointTypes.SubtreeModified);
 115                 InspectorTest.resumeExecution(next);
 116             }
 117         },
 118
 119         function testModifyAttribute(next)
 120         {
 121             InspectorTest.addResult("Test that 'Attribute Modified' breakpoint is hit when modifying attribute.");
 122             pane._setBreakpoint(rootElement, pane._breakpointTypes.AttributeModified, true);
 123             InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on rootElement.");
 124             InspectorTest.evaluateInPageWithTimeout("modifyAttribute('rootElement', 'data-test', 'foo')");
 125             InspectorTest.addResult("Modify rootElement data-test attribute.");
 126             waitUntilPausedAndDumpStack(step2);
 127
 128             function step2(callFrames)
 129             {
 130                 pane._removeBreakpoint(rootElement, pane._breakpointTypes.AttributeModified);
 131                 next();
 132             }
 133         },
 134
 135         function testModifyAttrNode(next)
 136         {
 137             InspectorTest.addResult("Test that 'Attribute Modified' breakpoint is hit when modifying Attr node.");
 138             pane._setBreakpoint(rootElement, pane._breakpointTypes.AttributeModified, true);
 139             InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on rootElement.");
 140             InspectorTest.evaluateInPageWithTimeout("modifyAttrNode('rootElement', 'data-test', 'bar')");
 141             InspectorTest.addResult("Modify rootElement data-test attribute.");
 142             waitUntilPausedAndDumpStack(step2);
 143
 144             function step2(callFrames)
 145             {
 146                 pane._removeBreakpoint(rootElement, pane._breakpointTypes.AttributeModified);
 147                 next();
 148             }
 149         },
 150
 151         function testSetAttrNode(next)
 152         {
 153             InspectorTest.addResult("Test that 'Attribute Modified' breakpoint is hit when adding a new Attr node.");
 154             pane._setBreakpoint(rootElement, pane._breakpointTypes.AttributeModified, true);
 155             InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on rootElement.");
 156             InspectorTest.evaluateInPageWithTimeout("setAttrNode('rootElement', 'data-foo', 'bar')");
 157             InspectorTest.addResult("Modify rootElement data-foo attribute.");
 158             waitUntilPausedAndDumpStack(step2);
 159
 160             function step2(callFrames)
 161             {
 162                 pane._removeBreakpoint(rootElement, pane._breakpointTypes.AttributeModified);
 163                 next();
 164             }
 165         },
 166
 167         function testModifyStyleAttribute(next)
 168         {
 169             InspectorTest.addResult("Test that 'Attribute Modified' breakpoint is hit when modifying style attribute.");
 170             pane._setBreakpoint(rootElement, pane._breakpointTypes.AttributeModified, true);
 171             InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on rootElement.");
 172             InspectorTest.evaluateInPageWithTimeout("modifyStyleAttribute('rootElement', 'color', 'green')");
 173             InspectorTest.addResult("Modify rootElement style.color attribute.");
 174             waitUntilPausedAndDumpStack(step2);
 175
 176             function step2(callFrames)
 177             {
 178                 pane._removeBreakpoint(rootElement, pane._breakpointTypes.AttributeModified);
 179                 next();
 180             }
 181         },
 182
 183         function testRemoveNode(next)
 184         {
 185             InspectorTest.addResult("Test that 'Node Removed' breakpoint is hit when removing a node.");
 186             InspectorTest.nodeWithId("elementToRemove", step2);
 187
 188             function step2(node)
 189             {
 190                 pane._setBreakpoint(node, pane._breakpointTypes.NodeRemoved, true);
 191                 InspectorTest.addResult("Set 'Node Removed' DOM breakpoint on elementToRemove.");
 192                 InspectorTest.evaluateInPageWithTimeout("removeElement('elementToRemove')");
 193                 InspectorTest.addResult("Remove elementToRemove.");
 194                 waitUntilPausedAndDumpStack(next);
 195             }
 196         },
 197
 198         function testReload(next)
 199         {
 200             InspectorTest.addResult("Test that DOM breakpoints are persisted between page reloads.");
 201             InspectorTest.nodeWithId("rootElement", step2);
 202
 203             function step2(node)
 204             {
 205                 pane._setBreakpoint(node, pane._breakpointTypes.SubtreeModified, true);
 206                 pane._saveBreakpoints();
 207                 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint on rootElement.");
 208                 InspectorTest.reloadPage(step3);
 209             }
 210
 211             function step3()
 212             {
 213                 InspectorTest.expandElementsTree(step4);
 214             }
 215
 216             function step4()
 217             {
 218                 InspectorTest.evaluateInPageWithTimeout("appendElement('rootElement', 'childElement')");
 219                 InspectorTest.addResult("Append childElement to rootElement.");
 220                 waitUntilPausedAndDumpStack(next);
 221             }
 222         }
 223     ]);
 224
 225     function waitUntilPausedAndDumpStack(callback)
 226     {
 227         InspectorTest.waitUntilPaused(paused);
 228         InspectorTest.addSniffer(WebInspector.CallStackSidebarPane.prototype, "setStatus", setStatus);
 229
 230         var caption;
 231         var callFrames;
 232
 233         function setStatus(status)
 234         {
 235             if (typeof status === "string")
 236                 caption = status;
 237             else
 238                 caption = status.textContent;
 239             if (callFrames)
 240                 step1();
 241         }
 242
 243         function paused(frames)
 244         {
 245             callFrames = frames;
 246             if (typeof caption === "string")
 247                 step1();
 248         }
 249
 250         function step1()
 251         {
 252             InspectorTest.captureStackTrace(callFrames);
 253             InspectorTest.addResult(caption);
 254             InspectorTest.runAfterPendingDispatches(step2);
 255         }
 256
 257         function step2()
 258         {
 259             InspectorTest.resumeExecution(InspectorTest.safeWrap(callback));
 260         }
 261     }
 262 }
 263
 264 </script>
 265 </head>
 266
 267 <body onload="runTest()">
 268 <p>
 269 Tests DOM breakpoints. <a href="https://bugs.webkit.org/show_bug.cgi?id=42886">Bug 42886</a>
 270 </p>
 271
 272 <div id="rootElement" style="color: red">
 273 <div id="elementToRemove"></div>
 274 </div>
 275
 276 </body>
 277 </html>