LayoutTests/inspector/dom-breakpoints.html - WebKit - Git at Google

 <html>
 <head>
 <script src="../http/tests/inspector/inspector-test2.js"></script>
 <script src="../http/tests/inspector/debugger-test2.js"></script>
 <script>

 function appendElement(parentId, childId)
 {
     var child = document.createElement("div");
     child.id = childId;
     document.getElementById(parentId).appendChild(child);
 }

 function modifyAttribute(elementId, name, value)
 {
     var element = document.getElementById(elementId);
     element.setAttribute(name, value);
 }

 function removeElement(elementId)
 {
     var element = document.getElementById(elementId);
     element.parentNode.removeChild(element);
 }

 var test = function()
 {
     var subtreeModifiedBreakpoint;
     var attributeModifiedBreakpoint;
     testInsertChild = {};
     testInsertChild.step1 = function()
     {
         InspectorTest.addResult("Test that 'Subtree Modified' breakpoint is hit when appending a child.");
         findDOMNodeById("rootElement", testInsertChild.step2);
     };
     testInsertChild.step2 = function(node)
     {
         subtreeModifiedBreakpoint = WebInspector.breakpointManager.createDOMBreakpoint(node.id, WebInspector.DOMBreakpointTypes.SubtreeModified);
         InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint on rootElement.");
         InspectorTest.evaluateInPageWithTimeout("appendElement('rootElement', 'childElement')");
         InspectorTest.addResult("Append childElement to rootElement.");
         InspectorTest.waitUntilPaused(testInsertChild.step3);
     };
     testInsertChild.step3 = function(callFrames)
     {
         dumpStatus(callFrames);
         InspectorTest.resumeExecution(testInsertGrandchild.step1);
     };

     var testInsertGrandchild = {};
     testInsertGrandchild.step1 = function()
     {
         InspectorTest.addResult("Test that 'Subtree Modified' breakpoint is hit when appending a grandchild.");
         InspectorTest.evaluateInPageWithTimeout("appendElement('childElement', 'grandchildElement')");
         InspectorTest.addResult("Append grandchildElement to childElement.");
         InspectorTest.waitUntilPaused(testInsertGrandchild.step2);
     }
     testInsertGrandchild.step2 = function(callFrames)
     {
         dumpStatus(callFrames);
         InspectorTest.resumeExecution(testRemoveChild.step1);
     }

     var testRemoveChild = {};
     testRemoveChild.step1 = function()
     {
         InspectorTest.addResult("Test that 'Subtree Modified' breakpoint is hit when removing a child.");
         InspectorTest.evaluateInPageWithTimeout("removeElement('grandchildElement')");
         InspectorTest.addResult("Remove grandchildElement.");
         InspectorTest.waitUntilPaused(testRemoveChild.step2);

     }
     testRemoveChild.step2 = function(callFrames)
     {
         dumpStatus(callFrames);
         subtreeModifiedBreakpoint.remove();
         InspectorTest.resumeExecution(testModifyAttribute.step1);
     }

     var testModifyAttribute = {};
     testModifyAttribute.step1 = function()
     {
         InspectorTest.addResult("Test that 'Attribute Modified' breakpoint is hit when modifying attribute.");
         findDOMNodeById("rootElement", testModifyAttribute.step2);
     }
     testModifyAttribute.step2 = function(node)
     {
         attributeModifiedBreakpoint = WebInspector.breakpointManager.createDOMBreakpoint(node.id, WebInspector.DOMBreakpointTypes.AttributeModified);
         InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on rootElement.");
         InspectorTest.evaluateInPageWithTimeout("modifyAttribute('rootElement', 'className', 'foo')");
         InspectorTest.addResult("Modify rootElement className.");
         InspectorTest.waitUntilPaused(testModifyAttribute.step3.bind(null, node));
     }
     testModifyAttribute.step3 = function(node, callFrames)
     {
         dumpStatus(callFrames);
         attributeModifiedBreakpoint.remove();
         InspectorTest.resumeExecution(testRemoveNode.step1);
     }

     var testRemoveNode = {};
     testRemoveNode.step1 = function()
     {
         InspectorTest.addResult("Test that 'Node Removed' breakpoint is hit when removing a node.");
         InspectorTest.evaluateInPageWithTimeout("appendElement('rootElement', 'elementToRemove')", testRemoveNode.step2);
     }
     testRemoveNode.step2 = function()
     {
         InspectorTest.addResult("Append elementToRemove to rootElement.");
         findDOMNodeById("elementToRemove", testRemoveNode.step3);
     }
     testRemoveNode.step3 = function(node)
     {
         WebInspector.breakpointManager.createDOMBreakpoint(node.id, WebInspector.DOMBreakpointTypes.NodeRemoved);
         InspectorTest.addResult("Set 'Node Removed' DOM breakpoint on elementToRemove.");
         InspectorTest.evaluateInPageWithTimeout("removeElement('elementToRemove')");
         InspectorTest.addResult("Remove elementToRemove.");
         InspectorTest.waitUntilPaused(testRemoveNode.step4);
     }
     testRemoveNode.step4 = function(callFrames)
     {
         dumpStatus(callFrames);
         InspectorTest.resumeExecution(testReload.step1);
     }

     var testReload= {};
     testReload.step1 = function()
     {
         InspectorTest.addResult("Test that DOM breakpoints are persisted between page reloads.");
         findDOMNodeById("rootElement", testReload.step2);
     }
     testReload.step2 = function(node)
     {
         WebInspector.breakpointManager.createDOMBreakpoint(node.id, WebInspector.DOMBreakpointTypes.SubtreeModified);
         InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint on rootElement.");
         InspectorTest.reloadPage(testReload.step3);
     }
     testReload.step3 = function()
     {
         InspectorTest.evaluateInPageWithTimeout("appendElement('rootElement', 'childElement')");
         InspectorTest.addResult("Append childElement to rootElement.");
         InspectorTest.waitUntilPaused(testReload.step4);
     }
     testReload.step4 = function(callFrames)
     {
         dumpStatus(callFrames);
         InspectorTest.completeDebuggerTest();
     }

     function findDOMNodeById(id, callback)
     {
         InspectorTest.findDOMNode(null, function(node) {
             return node.getAttribute("id") === id;
         }, callback);
     }

     function dumpStatus(callFrames)
     {
         InspectorTest.captureStackTrace(callFrames);
         InspectorTest.addResult(WebInspector.panels.scripts.sidebarPanes.callstack.bodyElement.lastChild.innerText);
     }

     InspectorTest.startDebuggerTest(testInsertChild.step1);
 };

 </script>
 </head>

 <body onload="runTest()">
 <p>
 Tests DOM breakpoints. <a href="https://bugs.webkit.org/show_bug.cgi?id=42886">Bug 42886</a>
 </p>
 <div id="rootElement"></div>
 </body>
 </html>
	<html>
	<head>
	<script src="../http/tests/inspector/inspector-test2.js"></script>
	<script src="../http/tests/inspector/debugger-test2.js"></script>
	<script>

	function appendElement(parentId, childId)
	{
	var child = document.createElement("div");
	child.id = childId;
	document.getElementById(parentId).appendChild(child);
	}

	function modifyAttribute(elementId, name, value)
	{
	var element = document.getElementById(elementId);
	element.setAttribute(name, value);
	}

	function removeElement(elementId)
	{
	var element = document.getElementById(elementId);
	element.parentNode.removeChild(element);
	}

	var test = function()
	{
	var subtreeModifiedBreakpoint;
	var attributeModifiedBreakpoint;
	testInsertChild = {};
	testInsertChild.step1 = function()
	{
	InspectorTest.addResult("Test that 'Subtree Modified' breakpoint is hit when appending a child.");
	findDOMNodeById("rootElement", testInsertChild.step2);
	};
	testInsertChild.step2 = function(node)
	{
	subtreeModifiedBreakpoint = WebInspector.breakpointManager.createDOMBreakpoint(node.id, WebInspector.DOMBreakpointTypes.SubtreeModified);
	InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint on rootElement.");
	InspectorTest.evaluateInPageWithTimeout("appendElement('rootElement', 'childElement')");
	InspectorTest.addResult("Append childElement to rootElement.");
	InspectorTest.waitUntilPaused(testInsertChild.step3);
	};
	testInsertChild.step3 = function(callFrames)
	{
	dumpStatus(callFrames);
	InspectorTest.resumeExecution(testInsertGrandchild.step1);
	};

	var testInsertGrandchild = {};
	testInsertGrandchild.step1 = function()
	{
	InspectorTest.addResult("Test that 'Subtree Modified' breakpoint is hit when appending a grandchild.");
	InspectorTest.evaluateInPageWithTimeout("appendElement('childElement', 'grandchildElement')");
	InspectorTest.addResult("Append grandchildElement to childElement.");
	InspectorTest.waitUntilPaused(testInsertGrandchild.step2);
	}
	testInsertGrandchild.step2 = function(callFrames)
	{
	dumpStatus(callFrames);
	InspectorTest.resumeExecution(testRemoveChild.step1);
	}

	var testRemoveChild = {};
	testRemoveChild.step1 = function()
	{
	InspectorTest.addResult("Test that 'Subtree Modified' breakpoint is hit when removing a child.");
	InspectorTest.evaluateInPageWithTimeout("removeElement('grandchildElement')");
	InspectorTest.addResult("Remove grandchildElement.");
	InspectorTest.waitUntilPaused(testRemoveChild.step2);

	}
	testRemoveChild.step2 = function(callFrames)
	{
	dumpStatus(callFrames);
	subtreeModifiedBreakpoint.remove();
	InspectorTest.resumeExecution(testModifyAttribute.step1);
	}

	var testModifyAttribute = {};
	testModifyAttribute.step1 = function()
	{
	InspectorTest.addResult("Test that 'Attribute Modified' breakpoint is hit when modifying attribute.");
	findDOMNodeById("rootElement", testModifyAttribute.step2);
	}
	testModifyAttribute.step2 = function(node)
	{
	attributeModifiedBreakpoint = WebInspector.breakpointManager.createDOMBreakpoint(node.id, WebInspector.DOMBreakpointTypes.AttributeModified);
	InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on rootElement.");
	InspectorTest.evaluateInPageWithTimeout("modifyAttribute('rootElement', 'className', 'foo')");
	InspectorTest.addResult("Modify rootElement className.");
	InspectorTest.waitUntilPaused(testModifyAttribute.step3.bind(null, node));
	}
	testModifyAttribute.step3 = function(node, callFrames)
	{
	dumpStatus(callFrames);
	attributeModifiedBreakpoint.remove();
	InspectorTest.resumeExecution(testRemoveNode.step1);
	}

	var testRemoveNode = {};
	testRemoveNode.step1 = function()
	{
	InspectorTest.addResult("Test that 'Node Removed' breakpoint is hit when removing a node.");
	InspectorTest.evaluateInPageWithTimeout("appendElement('rootElement', 'elementToRemove')", testRemoveNode.step2);
	}
	testRemoveNode.step2 = function()
	{
	InspectorTest.addResult("Append elementToRemove to rootElement.");
	findDOMNodeById("elementToRemove", testRemoveNode.step3);
	}
	testRemoveNode.step3 = function(node)
	{
	WebInspector.breakpointManager.createDOMBreakpoint(node.id, WebInspector.DOMBreakpointTypes.NodeRemoved);
	InspectorTest.addResult("Set 'Node Removed' DOM breakpoint on elementToRemove.");
	InspectorTest.evaluateInPageWithTimeout("removeElement('elementToRemove')");
	InspectorTest.addResult("Remove elementToRemove.");
	InspectorTest.waitUntilPaused(testRemoveNode.step4);
	}
	testRemoveNode.step4 = function(callFrames)
	{
	dumpStatus(callFrames);
	InspectorTest.resumeExecution(testReload.step1);
	}

	var testReload= {};
	testReload.step1 = function()
	{
	InspectorTest.addResult("Test that DOM breakpoints are persisted between page reloads.");
	findDOMNodeById("rootElement", testReload.step2);
	}
	testReload.step2 = function(node)
	{
	WebInspector.breakpointManager.createDOMBreakpoint(node.id, WebInspector.DOMBreakpointTypes.SubtreeModified);
	InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint on rootElement.");
	InspectorTest.reloadPage(testReload.step3);
	}
	testReload.step3 = function()
	{
	InspectorTest.evaluateInPageWithTimeout("appendElement('rootElement', 'childElement')");
	InspectorTest.addResult("Append childElement to rootElement.");
	InspectorTest.waitUntilPaused(testReload.step4);
	}
	testReload.step4 = function(callFrames)
	{
	dumpStatus(callFrames);
	InspectorTest.completeDebuggerTest();
	}

	function findDOMNodeById(id, callback)
	{
	InspectorTest.findDOMNode(null, function(node) {
	return node.getAttribute("id") === id;
	}, callback);
	}

	function dumpStatus(callFrames)
	{
	InspectorTest.captureStackTrace(callFrames);
	InspectorTest.addResult(WebInspector.panels.scripts.sidebarPanes.callstack.bodyElement.lastChild.innerText);
	}

	InspectorTest.startDebuggerTest(testInsertChild.step1);
	};

	</script>
	</head>

	<body onload="runTest()">
	<p>
	Tests DOM breakpoints. <a href="https://bugs.webkit.org/show_bug.cgi?id=42886">Bug 42886</a>
	</p>
	<div id="rootElement"></div>
	</body>
	</html>