06fb6d351403f4ef32339bc6eca4b27b7eacafc8
[WebKit-https.git] / LayoutTests / inspector / dom / highlightNode.html
1 <!doctype html>
2 <html>
3 <head>
4 <script src="../../http/tests/inspector/resources/inspector-test.js"></script>
5 <script>
6 function test()
7 {
8     let suite = InspectorTest.createAsyncSuite("DOM.highlightNode");
9
10     let mainFrame = WI.frameResourceManager.mainFrame;
11     let childFrames = mainFrame.childFrameCollection.toArray();
12     InspectorTest.expectEqual(childFrames.length, 1, "Page should have a subframe.");
13
14     const highlightConfig = {
15         showInfo: true,
16         contentColor: {r: 255, g: 255, b: 255},
17         paddingColor: {r: 255, g: 255, b: 255},
18         borderColor: {r: 255, g: 255, b: 255},
19         marginColor: {r: 255, g: 255, b: 255},
20     };
21
22     function getHighlight(callback) {
23         InspectorTest.evaluateInPage("window.internals.inspectorHighlightObject()", (error, payload, wasThrown) => {
24             InspectorTest.assert(!error, "Unexpected error dumping highlight: " + error);
25             InspectorTest.assert(!wasThrown, "Unexpected exception when dumping highlight.");
26             callback(JSON.parse(payload.value));
27         });
28     }
29
30     function dumpHighlight(callback) {
31         getHighlight((highlightObjectPayload) => {
32             InspectorTest.expectEqual(highlightObjectPayload.length, 1, "Should be one highlighted node.");
33             InspectorTest.log("Highlighted Element Data: " + JSON.stringify(highlightObjectPayload[0].elementData));
34             callback();
35         });
36     }
37
38
39     let mainFrameDocumentNodeId, mainFrameTargetNode;
40     let childFrameDocumentNodeId, childFrameTargetNode;
41
42     suite.addTestCase({
43         name: "CheckEmptyHighlight",
44         description: "Should not be a highlight yet.",
45         test(resolve, reject) {
46             getHighlight((highlightObjectPayload) => {
47                 InspectorTest.expectEqual(highlightObjectPayload.length, 0, "Should not be a highlight yet.");
48                 resolve();
49             });
50         }
51     });
52
53     suite.addTestCase({
54         name: "MainFrameNodeViaNodeId",
55         description: "Should highlight a node in the main frame using node id.",
56         test(resolve, reject) {
57             WI.domTreeManager.querySelector(mainFrameDocumentNodeId, "#id-one", function(nodeId) {
58                 mainFrameTargetNode = WI.domTreeManager.nodeForId(nodeId);
59                 DOMAgent.highlightNode(highlightConfig, mainFrameTargetNode.id, undefined, (error) => {
60                     InspectorTest.assert(!error, "Should not have an error.");
61                     dumpHighlight(resolve);
62                 });
63             });
64         }
65     });
66
67     suite.addTestCase({
68         name: "ChildFrameNodeViaNodeId",
69         description: "Should highlight a node in the child frame using node id.",
70         test(resolve, reject) {
71             WI.domTreeManager.querySelector(childFrameDocumentNodeId, "#id-one", function(nodeId) {
72                 childFrameTargetNode = WI.domTreeManager.nodeForId(nodeId);
73                 DOMAgent.highlightNode(highlightConfig, childFrameTargetNode.id, undefined, (error) => {
74                     InspectorTest.assert(!error, "Should not have an error.");
75                     dumpHighlight(resolve);
76                 });
77             });
78         }
79     });
80
81     suite.addTestCase({
82         name: "MainFrameNodeViaObjectId",
83         description: "Should highlight a node in the main frame using object id.",
84         test(resolve, reject) {
85             WI.RemoteObject.resolveNode(mainFrameTargetNode, "test").then((remoteObject) => {
86                 DOMAgent.highlightNode(highlightConfig, undefined, remoteObject.objectId, (error) => {
87                     InspectorTest.assert(!error, "Should not have an error.");
88                     dumpHighlight(resolve);
89                 });
90             })
91             .catch(reject);
92         }
93     });
94
95     suite.addTestCase({
96         name: "ChildFrameNodeViaObjectId",
97         description: "Should highlight a node in the child frame using object id.",
98         test(resolve, reject) {
99             WI.RemoteObject.resolveNode(childFrameTargetNode, "test").then((remoteObject) => {
100                 DOMAgent.highlightNode(highlightConfig, undefined, remoteObject.objectId, (error) => {
101                     InspectorTest.assert(!error, "Should not have an error.");
102                     dumpHighlight(resolve);
103                 });
104             })
105             .catch(reject);
106         }
107     });
108
109     // ------
110
111     suite.addTestCase({
112         name: "MissingNodeAndObjectIdShouldError",
113         description: "Missing identifiers should cause an error.",
114         test(resolve, reject) {
115             DOMAgent.highlightNode(highlightConfig, undefined, undefined, (error) => {
116                 InspectorTest.expectThat(error, "Should produce an error.");
117                 InspectorTest.log("Error: " + error);
118                 resolve();
119             });
120         }
121     });
122
123     suite.addTestCase({
124         name: "BadNodeId",
125         description: "Bad node id should cause an error.",
126         test(resolve, reject) {
127             DOMAgent.highlightNode(highlightConfig, 9999999, undefined, (error) => {
128                 InspectorTest.expectThat(error, "Should produce an error.");
129                 InspectorTest.log("Error: " + error);
130                 resolve();
131             });
132         }
133     });
134
135     suite.addTestCase({
136         name: "BadObjectId",
137         description: "Bad object id should cause an error.",
138         test(resolve, reject) {
139             DOMAgent.highlightNode(highlightConfig, undefined, "bad-object-id", (error) => {
140                 InspectorTest.expectThat(error, "Should produce an error.");
141                 InspectorTest.log("Error: " + error);
142                 resolve();
143             });
144         }
145     });
146
147     WI.domTreeManager.requestDocument((documentNode) => {
148         mainFrameDocumentNodeId = documentNode.id;
149         RuntimeAgent.evaluate.invoke({expression: "document", objectGroup: "test", contextId: childFrames[0].pageExecutionContext.id}, (error, remoteObjectPayload) => {
150             let remoteObject = WI.RemoteObject.fromPayload(remoteObjectPayload)
151             remoteObject.pushNodeToFrontend((documentNodeId) => {
152                 childFrameDocumentNodeId = documentNodeId
153
154                 suite.runTestCasesAndFinish();
155             });
156         })
157     });
158 }
159 </script>
160 </head>
161 <body onload="runTest()">
162     <p>Tests for the DOM.highlightNode command.</p>
163     <div style="width: 500px; height: 500px">
164         <div class="class-one" style="width: 10px; height: 20px"></div>
165         <div id="id-one" class="class-two" style="width:100px; height: 200px"></div>
166         <iframe class="class-one" src="resources/highlight-iframe.html"></iframe>
167     </div>
168 </body>
169 </html>