| <html> |
| <head> |
| <script src="../../http/tests/inspector/resources/protocol-test.js"></script> |
| <style> |
| #test { |
| margin: 1px 2px 3px 4px; |
| } |
| </style> |
| <script> |
| function test() |
| { |
| Promise.resolve() |
| .then(() => { |
| ProtocolTest.log("Enabling Page domain..."); |
| return InspectorProtocol.awaitCommand({ |
| method: "Page.enable", |
| params: {}, |
| }); |
| }) |
| .then(() => { |
| ProtocolTest.log("Enabling CSS domain..."); |
| return InspectorProtocol.awaitCommand({ |
| method: "CSS.enable", |
| params: {}, |
| }); |
| }) |
| .then(() => { |
| ProtocolTest.log("Requesting document..."); |
| return InspectorProtocol.awaitCommand({ |
| method: "DOM.getDocument", |
| params: {}, |
| }); |
| }) |
| .then(({root}) => { |
| ProtocolTest.log("Querying for \"#test\"..."); |
| return InspectorProtocol.awaitCommand({ |
| method: "DOM.querySelector", |
| params: { |
| nodeId: root.nodeId, |
| selector: "#test", |
| }, |
| }); |
| }) |
| .then(({nodeId}) => { |
| ProtocolTest.log("Getting matched styles for \"#test\"..."); |
| return InspectorProtocol.awaitCommand({ |
| method: "CSS.getComputedStyleForNode", |
| params: { |
| nodeId, |
| }, |
| }); |
| }) |
| .then(({computedStyle}) => { |
| let map = new Map; |
| for (let {name, value} of computedStyle) { |
| ProtocolTest.assert(!map.has(name), `Should have only one value for "${name}": ${value} vs ${map.get(name)}.`); |
| map.set(name, value); |
| } |
| |
| ProtocolTest.newline(); |
| |
| function checkProperty(property, expected) { |
| ProtocolTest.expectEqual(map.get(property), expected, `Property "${property}" should have value "${expected}".`); |
| } |
| |
| checkProperty("display", "block"); |
| |
| ProtocolTest.newline(); |
| |
| checkProperty("margin", "1px 2px 3px 4px"); |
| checkProperty("margin-top", "1px"); |
| checkProperty("margin-right", "2px"); |
| checkProperty("margin-bottom", "3px"); |
| checkProperty("margin-left", "4px"); |
| }) |
| .catch((error) => { |
| ProtocolTest.log(error); |
| }) |
| .finally(() => { |
| ProtocolTest.completeTest(); |
| }); |
| } |
| </script> |
| </head> |
| <body onLoad="runTest()"> |
| <p>Testing CSS.getComputedStyleForNode.</p> |
| <div id="test"></div> |
| </body> |
| </html> |
