third_party/WebKit/LayoutTests/inspector-protocol/css/pseudo-element-matching-selectors.html

   1 <html>
   2 <head>
   3 <script type="text/javascript" src="../../http/tests/inspector-protocol/inspector-protocol-test.js"></script>
   4 <script>
   5
   6 function addBeforeElement()
   7 {
   8     document.getElementById("style").textContent = "#for-pseudo:before { content: \"BEFORE\" }";
   9 }
  10
  11 function test()
  12 {
  13     var nodeInfo = {};
  14     var childrenCallback;
  15
  16     InspectorTest.eventHandler["DOM.setChildNodes"] = setChildNodes;
  17     getDocument();
  18
  19     function getDocument()
  20     {
  21         step({
  22             name: "Get the Document",
  23             command: "DOM.getDocument",
  24             parameters: {},
  25             callback: getImmediateChildren
  26         });
  27     };
  28
  29     function getImmediateChildren(result)
  30     {
  31         var bodyId = result.root.children[0].children[1].nodeId;
  32         childrenCallback = onChildrenRequested;
  33         step({
  34             name: "Get immediate children of the body",
  35             command: "DOM.requestChildNodes",
  36             parameters: {"nodeId": bodyId}
  37         });
  38     };
  39
  40     function onChildrenRequested()
  41     {
  42         var node = findNodeById("for-pseudo");
  43         var beforeNode = node.pseudoElements[0];
  44         step({
  45             name: "Request matching styles for #for-pseudo::before",
  46             command: "CSS.getMatchedStylesForNode",
  47             parameters: {nodeId: beforeNode.nodeId},
  48             callback: stylesReceived
  49         });
  50     }
  51
  52     function stylesReceived(result)
  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 element: " + (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
  67     function setChildNodes(message)
  68     {
  69         var nodes = message.params.nodes;
  70         for (var i = 0; i < nodes.length; ++i)
  71             addNodesRecursive(nodes[i]);
  72         var callback = childrenCallback;
  73         childrenCallback = null;
  74         if (callback)
  75             callback();
  76     }
  77
  78     function step(test)
  79     {
  80         InspectorTest.log("\n=== " + test.name + " ===\n");
  81         InspectorTest.sendCommand(test.command, test.parameters, function(messageObject) {
  82             if (messageObject.hasOwnProperty("error"))
  83                 InspectorTest.log("Backend error: " + messageObject.error.message + " (" + messageObject.error.code + ")\n");
  84
  85             if (test.callback)
  86                 test.callback(messageObject.result);
  87         });
  88     }
  89
  90     function findNodeById(id)
  91     {
  92         for (var nodeId in nodeInfo) {
  93             var node = nodeInfo[nodeId];
  94             var attrs = node.attributes;
  95             if (!attrs)
  96                 continue;
  97             for (var i = 0; i < attrs.length; i += 2) {
  98                 var name = attrs[i];
  99                 if (name !== "id")
 100                     continue;
 101                 if (attrs[i + 1]  === id)
 102                     return node;
 103             }
 104         }
 105         return null;
 106     }
 107
 108     function addNodesRecursive(root)
 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     {
 119         nodeInfo[node.nodeId] = node;
 120     }
 121 }
 122
 123 </script>
 124 <style>
 125 #for-pseudo:before {
 126   color: red;
 127   content: "BEFORE";
 128 }
 129 </style>
 130 </head>
 131 <body onload="runTest()">
 132 <div id="for-pseudo">Test</div>
 133 </body>
 134 </html>