| <!doctype html> |
| <html> |
| <head> |
| <script src="../../http/tests/inspector/resources/inspector-test.js"></script> |
| <script> |
| function test() |
| { |
| let suite = InspectorTest.createAsyncSuite("DOM.highlightNode"); |
| |
| let mainFrame = WI.frameResourceManager.mainFrame; |
| let childFrames = mainFrame.childFrameCollection.toArray(); |
| InspectorTest.expectEqual(childFrames.length, 1, "Page should have a subframe."); |
| |
| const highlightConfig = { |
| showInfo: true, |
| contentColor: {r: 255, g: 255, b: 255}, |
| paddingColor: {r: 255, g: 255, b: 255}, |
| borderColor: {r: 255, g: 255, b: 255}, |
| marginColor: {r: 255, g: 255, b: 255}, |
| }; |
| |
| function getHighlight(callback) { |
| InspectorTest.evaluateInPage("window.internals.inspectorHighlightObject()", (error, value, wasThrown) => { |
| InspectorTest.assert(!error, "Unexpected error dumping highlight: " + error); |
| InspectorTest.assert(!wasThrown, "Unexpected exception when dumping highlight."); |
| callback(JSON.parse(value)); |
| }); |
| } |
| |
| function dumpHighlight(callback) { |
| getHighlight((highlightObjectPayload) => { |
| InspectorTest.expectEqual(highlightObjectPayload.length, 1, "Should be one highlighted node."); |
| InspectorTest.log("Highlighted Element Data: " + JSON.stringify(highlightObjectPayload[0].elementData)); |
| callback(); |
| }); |
| } |
| |
| |
| let mainFrameDocumentNodeId, mainFrameTargetNode; |
| let childFrameDocumentNodeId, childFrameTargetNode; |
| |
| suite.addTestCase({ |
| name: "CheckEmptyHighlight", |
| description: "Should not be a highlight yet.", |
| test(resolve, reject) { |
| getHighlight((highlightObjectPayload) => { |
| InspectorTest.expectEqual(highlightObjectPayload.length, 0, "Should not be a highlight yet."); |
| resolve(); |
| }); |
| } |
| }); |
| |
| suite.addTestCase({ |
| name: "MainFrameNodeViaNodeId", |
| description: "Should highlight a node in the main frame using node id.", |
| test(resolve, reject) { |
| WI.domTreeManager.querySelector(mainFrameDocumentNodeId, "#id-one", function(nodeId) { |
| mainFrameTargetNode = WI.domTreeManager.nodeForId(nodeId); |
| DOMAgent.highlightNode(highlightConfig, mainFrameTargetNode.id, undefined, (error) => { |
| InspectorTest.assert(!error, "Should not have an error."); |
| dumpHighlight(resolve); |
| }); |
| }); |
| } |
| }); |
| |
| suite.addTestCase({ |
| name: "ChildFrameNodeViaNodeId", |
| description: "Should highlight a node in the child frame using node id.", |
| test(resolve, reject) { |
| WI.domTreeManager.querySelector(childFrameDocumentNodeId, "#id-one", function(nodeId) { |
| childFrameTargetNode = WI.domTreeManager.nodeForId(nodeId); |
| DOMAgent.highlightNode(highlightConfig, childFrameTargetNode.id, undefined, (error) => { |
| InspectorTest.assert(!error, "Should not have an error."); |
| dumpHighlight(resolve); |
| }); |
| }); |
| } |
| }); |
| |
| suite.addTestCase({ |
| name: "MainFrameNodeViaObjectId", |
| description: "Should highlight a node in the main frame using object id.", |
| test(resolve, reject) { |
| WI.RemoteObject.resolveNode(mainFrameTargetNode, "test").then((remoteObject) => { |
| DOMAgent.highlightNode(highlightConfig, undefined, remoteObject.objectId, (error) => { |
| InspectorTest.assert(!error, "Should not have an error."); |
| dumpHighlight(resolve); |
| }); |
| }) |
| .catch(reject); |
| } |
| }); |
| |
| suite.addTestCase({ |
| name: "ChildFrameNodeViaObjectId", |
| description: "Should highlight a node in the child frame using object id.", |
| test(resolve, reject) { |
| WI.RemoteObject.resolveNode(childFrameTargetNode, "test").then((remoteObject) => { |
| DOMAgent.highlightNode(highlightConfig, undefined, remoteObject.objectId, (error) => { |
| InspectorTest.assert(!error, "Should not have an error."); |
| dumpHighlight(resolve); |
| }); |
| }) |
| .catch(reject); |
| } |
| }); |
| |
| // ------ |
| |
| suite.addTestCase({ |
| name: "MissingNodeAndObjectIdShouldError", |
| description: "Missing identifiers should cause an error.", |
| async test() { |
| await InspectorTest.expectException(async () => { |
| await DOMAgent.highlightNode(highlightConfig, undefined, undefined); |
| }); |
| } |
| }); |
| |
| suite.addTestCase({ |
| name: "BadNodeId", |
| description: "Bad node id should cause an error.", |
| async test() { |
| await InspectorTest.expectException(async () => { |
| await DOMAgent.highlightNode(highlightConfig, 9999999, undefined); |
| }); |
| } |
| }); |
| |
| suite.addTestCase({ |
| name: "BadObjectId", |
| description: "Bad object id should cause an error.", |
| async test() { |
| await InspectorTest.expectException(async () => { |
| await DOMAgent.highlightNode(highlightConfig, undefined, "bad-object-id"); |
| }); |
| } |
| }); |
| |
| WI.domTreeManager.requestDocument((documentNode) => { |
| mainFrameDocumentNodeId = documentNode.id; |
| RuntimeAgent.evaluate.invoke({expression: "document", objectGroup: "test", contextId: childFrames[0].pageExecutionContext.id}, (error, remoteObjectPayload) => { |
| let remoteObject = WI.RemoteObject.fromPayload(remoteObjectPayload) |
| remoteObject.pushNodeToFrontend((documentNodeId) => { |
| childFrameDocumentNodeId = documentNodeId |
| |
| suite.runTestCasesAndFinish(); |
| }); |
| }) |
| }); |
| } |
| </script> |
| </head> |
| <body onload="runTest()"> |
| <p>Tests for the DOM.highlightNode command.</p> |
| <div style="width: 500px; height: 500px"> |
| <div class="class-one" style="width: 10px; height: 20px"></div> |
| <div id="id-one" class="class-two" style="width:100px; height: 200px"></div> |
| <iframe class="class-one" src="resources/highlight-iframe.html"></iframe> |
| </div> |
| </body> |
| </html> |
