| OLD | NEW |
|---|
| 1 <html> | 1 <html> |
| 2 <head> | 2 <head> |
| 3 <script type="text/javascript" src="../../http/tests/inspector-protocol/inspecto
r-protocol-test.js"></script> | 3 <script type="text/javascript" src="../../http/tests/inspector-protocol/inspecto
r-protocol-test.js"></script> |
| 4 <script> | 4 <script> |
| 5 | 5 |
| 6 function addBeforeElement() | 6 function addBeforeElement() |
| 7 { | 7 { |
| 8 document.getElementById("style").textContent = "#for-pseudo:before { content
: \"BEFORE\" }"; | 8 document.getElementById("style").textContent = "#for-pseudo:before { content
: \"BEFORE\" }"; |
| 9 } | 9 } |
| 10 | 10 |
| 11 function test() | 11 async function test() |
| 12 { | 12 { |
| 13 var nodeInfo = {}; | 13 var nodeInfo = {}; |
| 14 var childrenCallback; | 14 var childrenCallback; |
| 15 | 15 |
| 16 InspectorTest.eventHandler["DOM.setChildNodes"] = setChildNodes; | 16 InspectorTest.eventHandler["DOM.setChildNodes"] = setChildNodes; |
| 17 getDocument(); | 17 await InspectorTest.sendCommandOrDie("DOM.enable", {}); |
| 18 await InspectorTest.sendCommandOrDie("CSS.enable", {}); |
| 18 | 19 |
| 19 function getDocument() | 20 InspectorTest.log("\n=== Get the Document ===\n"); |
| 20 { | 21 var result = await InspectorTest.sendCommandOrDie("DOM.getDocument", {}); |
| 21 step({ | 22 var bodyId = result.root.children[0].children[1].nodeId; |
| 22 name: "Get the Document", | |
| 23 command: "DOM.getDocument", | |
| 24 parameters: {}, | |
| 25 callback: getImmediateChildren | |
| 26 }); | |
| 27 }; | |
| 28 | 23 |
| 29 function getImmediateChildren(result) | 24 InspectorTest.log("\n=== Get immediate children of the body ===\n"); |
| 30 { | 25 result = await InspectorTest.sendCommandOrDie("DOM.requestChildNodes", {"nod
eId": bodyId}); |
| 31 var bodyId = result.root.children[0].children[1].nodeId; | 26 var node = findNodeById("for-pseudo"); |
| 32 childrenCallback = onChildrenRequested; | 27 var beforeNode = node.pseudoElements[0]; |
| 33 step({ | |
| 34 name: "Get immediate children of the body", | |
| 35 command: "DOM.requestChildNodes", | |
| 36 parameters: {"nodeId": bodyId} | |
| 37 }); | |
| 38 }; | |
| 39 | 28 |
| 40 function onChildrenRequested() | 29 InspectorTest.log("\n=== Request matching styles for #for-pseudo::before ===
\n"); |
| 41 { | 30 result = await InspectorTest.sendCommandOrDie("CSS.getMatchedStylesForNode",
{nodeId: beforeNode.nodeId}); |
| 42 var node = findNodeById("for-pseudo"); | 31 var matchedRules = result.matchedCSSRules; |
| 43 var beforeNode = node.pseudoElements[0]; | 32 for (var i = 0; i < matchedRules.length; ++i) { |
| 44 step({ | 33 var match = matchedRules[i]; |
| 45 name: "Request matching styles for #for-pseudo::before", | 34 if (match.rule.selectorList.text === "#for-pseudo::before") { |
| 46 command: "CSS.getMatchedStylesForNode", | 35 InspectorTest.log("#for-pseudo::before matching the :before element:
" + (match.matchingSelectors[0] === 0)); |
| 47 parameters: {nodeId: beforeNode.nodeId}, | 36 InspectorTest.completeTest(); |
| 48 callback: stylesReceived | 37 return; |
| 49 }); | 38 } |
| 50 } | 39 } |
| 51 | 40 InspectorTest.log("#for-pseudo::before rule not received"); |
| 52 function stylesReceived(result) | 41 InspectorTest.completeTest(); |
| 53 { | |
| 54 var matchedRules = result.matchedCSSRules; | |
| 55 for (var i = 0; i < matchedRules.length; ++i) { | |
| 56 var match = matchedRules[i]; | |
| 57 if (match.rule.selectorList.text === "#for-pseudo::before") { | |
| 58 InspectorTest.log("#for-pseudo::before matching the :before elem
ent: " + (match.matchingSelectors[0] === 0)); | |
| 59 InspectorTest.completeTest(); | |
| 60 return; | |
| 61 } | |
| 62 } | |
| 63 InspectorTest.log("#for-pseudo::before rule not received"); | |
| 64 InspectorTest.completeTest(); | |
| 65 } | |
| 66 | 42 |
| 67 function setChildNodes(message) | 43 function setChildNodes(message) |
| 68 { | 44 { |
| 69 var nodes = message.params.nodes; | 45 var nodes = message.params.nodes; |
| 70 for (var i = 0; i < nodes.length; ++i) | 46 for (var i = 0; i < nodes.length; ++i) |
| 71 addNodesRecursive(nodes[i]); | 47 addNodesRecursive(nodes[i]); |
| 72 var callback = childrenCallback; | 48 var callback = childrenCallback; |
| 73 childrenCallback = null; | 49 childrenCallback = null; |
| 74 if (callback) | 50 if (callback) |
| 75 callback(); | 51 callback(); |
| 76 } | 52 } |
| 77 | 53 |
| 78 function step(test) | |
| 79 { | |
| 80 InspectorTest.log("\n=== " + test.name + " ===\n"); | |
| 81 InspectorTest.sendCommand(test.command, test.parameters, function(messag
eObject) { | |
| 82 if (messageObject.hasOwnProperty("error")) | |
| 83 InspectorTest.log("Backend error: " + messageObject.error.messag
e + " (" + messageObject.error.code + ")\n"); | |
| 84 | |
| 85 if (test.callback) | |
| 86 test.callback(messageObject.result); | |
| 87 }); | |
| 88 } | |
| 89 | |
| 90 function findNodeById(id) | 54 function findNodeById(id) |
| 91 { | 55 { |
| 92 for (var nodeId in nodeInfo) { | 56 for (var nodeId in nodeInfo) { |
| 93 var node = nodeInfo[nodeId]; | 57 var node = nodeInfo[nodeId]; |
| 94 var attrs = node.attributes; | 58 var attrs = node.attributes; |
| 95 if (!attrs) | 59 if (!attrs) |
| 96 continue; | 60 continue; |
| 97 for (var i = 0; i < attrs.length; i += 2) { | 61 for (var i = 0; i < attrs.length; i += 2) { |
| 98 var name = attrs[i]; | 62 var name = attrs[i]; |
| 99 if (name !== "id") | 63 if (name !== "id") |
| 100 continue; | 64 continue; |
| 101 if (attrs[i + 1] === id) | 65 if (attrs[i + 1] === id) |
| 102 return node; | 66 return node; |
| 103 } | 67 } |
| 104 } | 68 } |
| 105 return null; | 69 return null; |
| 106 } | 70 } |
| 107 | 71 |
| 108 function addNodesRecursive(root) | 72 function addNodesRecursive(node) |
| 109 { | |
| 110 addNode(root); | |
| 111 if (!root.children) | |
| 112 return; | |
| 113 for (var i = 0; i < root.children.length; ++i) | |
| 114 addNodesRecursive(root.children[i]); | |
| 115 } | |
| 116 | |
| 117 function addNode(node) | |
| 118 { | 73 { |
| 119 nodeInfo[node.nodeId] = node; | 74 nodeInfo[node.nodeId] = node; |
| 75 (node.children || []).forEach(addNodesRecursive); |
| 120 } | 76 } |
| 121 } | 77 } |
| 122 | 78 |
| 123 </script> | 79 </script> |
| 124 <style> | 80 <style> |
| 125 #for-pseudo:before { | 81 #for-pseudo:before { |
| 126 color: red; | 82 color: red; |
| 127 content: "BEFORE"; | 83 content: "BEFORE"; |
| 128 } | 84 } |
| 129 </style> | 85 </style> |
| 130 </head> | 86 </head> |
| 131 <body onload="runTest()"> | 87 <body onload="runTest()"> |
| 132 <div id="for-pseudo">Test</div> | 88 <div id="for-pseudo">Test</div> |
| 133 </body> | 89 </body> |
| 134 </html> | 90 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2914663002:
DevTools: require enabling CSS domain before running CSS.* commands. (Closed)
