2504e4572c50d3f747c4db22547975ae7ffeec86
[WebKit-https.git] / LayoutTests / inspector-protocol / dom-debugger / node-removed.html
1 <html>
2 <head>
3 <script type="text/javascript" src="../../http/tests/inspector-protocol/resources/protocol-test.js"></script>
4 <script>
5 window.onload = runTest;
6
7 function removeNode()
8 {
9     document.getElementById("target_element").remove();
10 }
11
12 function moveNode()
13 {
14     var targetElement = document.getElementById("target_element");
15     document.getElementById("final_container").appendChild(targetElement);
16 }
17
18 function test()
19 {
20     var nodesById = {};
21
22     InspectorTest.eventHandler["DOM.setChildNodes"] = onSetChildNodes;
23     InspectorTest.eventHandler["DOM.childNodeRemoved"] = onChildNodeRemoved;
24     InspectorTest.eventHandler["DOM.childNodeInserted"] = onChildNodeInserted;
25     InspectorTest.eventHandler["Debugger.paused"] = onDebuggerPaused;
26     InspectorTest.eventHandler["Debugger.scriptParsed"] = onScriptParsed;
27     
28     function createNodeAttributesMap(attributes)
29     {
30         var attributesMap = {};
31         for (var i = 0; i < attributes.length; i += 2)
32             attributesMap[attributes[i]] = attributes[i + 1];
33         return attributesMap;
34     }
35
36     function collectNode(node)
37     {
38         if (node.nodeType === 1)
39             node.attributes = createNodeAttributesMap(node.attributes);
40         if (node.children)
41             node.children.forEach(collectNode);
42         nodesById[node.nodeId] = node;
43     }
44
45     function nodeToString(node)
46     {
47         switch (node.nodeType) {
48         case 1:
49             return node.localName + "#" + node.attributes.id;
50         case 3:
51             return "<text node " + JSON.stringify(node.nodeValue) + ">";
52         default:
53             return "<nodeType " + node.nodeType + ">";
54         }
55     }
56
57     function getNodeIdentifier(nodeId)
58     {
59         if (!nodeId)
60             return "<invalid node id>";
61         var node = nodesById[nodeId];
62         return node ? nodeToString(node) : "<unknown node>";
63     }
64
65     function onSetChildNodes(response)
66     {
67         response.params.nodes.forEach(collectNode);
68     }
69
70     function onChildNodeRemoved(response)
71     {
72         var nodeId = response.params.nodeId;
73         InspectorTest.assert(getNodeIdentifier(nodeId) === "div#target_element", "onChildNodeRemoved called for #target_element");
74         delete nodesById[nodeId];
75     }
76
77     function onChildNodeInserted(response)
78     {
79         collectNode(response.params.node);
80         InspectorTest.assert(getNodeIdentifier(response.params.parentNodeId) === "div#final_container", "onChildNodeInserted called for parent node #final_container");
81         InspectorTest.assert(getNodeIdentifier(response.params.node.nodeId) === "div#target_element", "onChildNodeInserted called for child node #target_element");
82     }
83
84     function onDebuggerPaused(response)
85     {   
86         InspectorTest.log("Stopped on DOM breakpoint");
87         InspectorTest.sendCommand("Runtime.evaluate", {"expression": "moveNode()"}, function() {
88             InspectorTest.sendCommand("Debugger.resume");
89             InspectorTest.completeTest();
90         });
91     }
92
93     function onScriptParsed(messageObject)
94     {
95         // FIXME: The DOM breakpoints are not working unless there's a JS brakpoint set. Setting a fake breakpoint to workaround that.
96         // https://bugs.webkit.org/show_bug.cgi?id=123770 
97         if (/node-removed\.html$/.test(messageObject.params.url) && messageObject.params.startLine > 20) {
98             InspectorTest.eventHandler["Debugger.scriptParsed"] = null;
99             InspectorTest.log("Found <script>");
100             var location = {scriptId: messageObject.params.scriptId, lineNumber: messageObject.params.startLine + 2, columnNumber: 0};
101             InspectorTest.sendCommand("Debugger.setBreakpoint", {location: location}, function() {
102                 InspectorTest.sendCommand("DOM.getDocument", {}, onGotDocument);
103             });
104         }
105     }
106
107     function onGotDocument(response)
108     {
109         InspectorTest.checkForError(response);
110         InspectorTest.sendCommand("DOM.querySelectorAll", {"nodeId": response.result.root.nodeId, "selector": "#target_element,#final_container"}, onQuerySelectorAll);
111     }
112
113     function onQuerySelectorAll(response)
114     {
115         var targetElementId = response.result.nodeIds[0];
116         var finalContainerId = response.result.nodeIds[1];
117
118         InspectorTest.sendCommand("DOMDebugger.setDOMBreakpoint", {nodeId: targetElementId, type: "node-removed"});
119         InspectorTest.sendCommand("DOM.requestChildNodes", {nodeId: finalContainerId});
120
121         InspectorTest.sendCommand("Runtime.evaluate", {"expression": "removeNode()"});        
122     }
123
124     InspectorTest.sendCommand("Debugger.enable", {});
125     InspectorTest.sendCommand("Debugger.setBreakpointsActive", {active: true}, function() {
126         InspectorTest.log("Breakpoints Enabled");
127     });
128 }
129 </script>
130 </head>
131 <body>
132
133 <p>Testing that DOM.childNodeRemoved is correctly triggered even when the element is moved while paused in the debugger on a DOMDebugger "node-removed" breakpoint.</p>
134
135 <div id="target_element"></div>
136 <div id="final_container"></div>
137
138 <!-- Script tag required to workaround bug 123770. See onScriptParsed for details. -->
139 <script>// Line 0
140 function testFunction() { // Line 1
141     console.log("FAIL: Workaround JS code should not run.");
142 }
143 </script>
144
145 </body>
146 </html>