src/third_party/WebKit/LayoutTests/inspector/elements/styles/pseudo-elements.html

   1 <html>
   2 <head>
   3 <style>
   4 #inspected:before {
   5   content: "BEFORE";
   6 }
   7
   8 #inspected:after {
   9   content: "AFTER";
  10 }
  11 </style>
  12 <style>
  13 #empty::before {
  14   content: "EmptyBefore";
  15 }
  16
  17 #empty::after {
  18   content: "EmptyAfter";
  19 }
  20 </style>
  21 <script src="../../../http/tests/inspector/inspector-test.js"></script>
  22 <script src="../../../http/tests/inspector/elements-test.js"></script>
  23 <script>
  24
  25 var initialize_PseudoElementsTest = function() {
  26
  27 InspectorTest.selectIdNodeWithId = function(idValue, pseudoType, callback)
  28 {
  29     callback = InspectorTest.safeWrap(callback);
  30     function onNodeFound(node)
  31     {
  32         WebInspector.Revealer.reveal(node);
  33         callback(node);
  34     }
  35
  36     InspectorTest.findNode(nodeIdMatches, onNodeFound);
  37     function nodeIdMatches(node)
  38     {
  39         return node.parentNode && node.pseudoType() === pseudoType && node.parentNode.getAttribute("id") === idValue;
  40     }
  41 }
  42
  43 InspectorTest.waitForPseudoIdNodeStyles = function(idValue, pseudoType, callback, requireRebuild)
  44 {
  45     callback = InspectorTest.safeWrap(callback);
  46
  47     (function sniff(node, rebuild)
  48     {
  49         if ((rebuild || !requireRebuild) && node && node.parentNode && node.pseudoType() === pseudoType && node.parentNode.getAttribute("id") === idValue) {
  50             callback();
  51             return;
  52         }
  53         InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_nodeStylesUpdatedForTest", sniff);
  54     })(null);
  55 }
  56
  57 InspectorTest.selectPseudoIdNodeAndWaitForStyles = function(idValue, pseudoType, callback)
  58 {
  59     WebInspector.inspectorView.showPanel("elements");
  60     callback = InspectorTest.safeWrap(callback);
  61
  62     var targetNode;
  63
  64     InspectorTest.waitForPseudoIdNodeStyles(idValue, pseudoType, stylesUpdated, true);
  65     InspectorTest.selectIdNodeWithId(idValue, pseudoType, nodeSelected);
  66
  67     function nodeSelected(node)
  68     {
  69         targetNode = node;
  70     }
  71
  72     function stylesUpdated()
  73     {
  74         callback(targetNode);
  75     }
  76 }
  77
  78 };
  79
  80 function removeLastRule()
  81 {
  82     document.styleSheets[0].deleteRule(document.styleSheets[0].cssRules.length - 1);
  83 }
  84
  85 function addAfterRule()
  86 {
  87     document.styleSheets[0].addRule("#inspected:after", "content: \"AFTER\"");
  88 }
  89
  90 function addBeforeRule()
  91 {
  92     document.styleSheets[0].addRule("#inspected:before", "content: \"BEFORE\"");
  93 }
  94
  95 function modifyTextContent()
  96 {
  97     document.getElementById("inspected").textContent = "bar";
  98 }
  99
 100 function clearTextContent()
 101 {
 102     document.getElementById("inspected").textContent = "";
 103 }
 104
 105 function removeNode()
 106 {
 107     document.getElementById("inspected").remove();
 108 }
 109
 110 function test()
 111 {
 112     var containerNode;
 113     var inspectedNode;
 114
 115     InspectorTest.runTestSuite([
 116         function dumpOriginalTree(next)
 117         {
 118             InspectorTest.expandElementsTree(callback);
 119             function callback()
 120             {
 121                 containerNode = InspectorTest.expandedNodeWithId("container");
 122                 inspectedNode = InspectorTest.expandedNodeWithId("inspected");
 123                 InspectorTest.addResult("Original elements tree:");
 124                 InspectorTest.dumpElementsTree(containerNode);
 125                 next();
 126             }
 127         },
 128
 129         function dumpNormalNodeStyles(next)
 130         {
 131             selectNodeAndDumpStyles("inspected", "", next);
 132         },
 133
 134         function dumpBeforeStyles(next)
 135         {
 136             selectNodeAndDumpStyles("inspected", "before", next);
 137         },
 138
 139         function dumpAfterStyles(next)
 140         {
 141             selectNodeAndDumpStyles("inspected", "after", next);
 142         },
 143
 144         function removeAfter(next)
 145         {
 146             executeAndDumpTree("removeLastRule()", WebInspector.DOMModel.Events.NodeRemoved, next);
 147         },
 148
 149         function removeBefore(next)
 150         {
 151             executeAndDumpTree("removeLastRule()", WebInspector.DOMModel.Events.NodeRemoved, next);
 152         },
 153
 154         function addAfter(next)
 155         {
 156             executeAndDumpTree("addAfterRule()", WebInspector.DOMModel.Events.NodeInserted, expandAndDumpTree.bind(this, next));
 157         },
 158
 159         function addBefore(next)
 160         {
 161             executeAndDumpTree("addBeforeRule()", WebInspector.DOMModel.Events.NodeInserted, next);
 162         },
 163
 164         function modifyTextContent(next)
 165         {
 166             executeAndDumpTree("modifyTextContent()", WebInspector.DOMModel.Events.NodeInserted, next);
 167         },
 168
 169         function clearTextContent(next)
 170         {
 171             executeAndDumpTree("clearTextContent()", WebInspector.DOMModel.Events.NodeRemoved, next);
 172         },
 173
 174         function removeNodeAndCheckPseudoElementsUnbound(next)
 175         {
 176             var inspectedBefore = inspectedNode.pseudoElements()["before"];
 177             var inspectedAfter = inspectedNode.pseudoElements()["after"];
 178
 179             executeAndDumpTree("removeNode()", WebInspector.DOMModel.Events.NodeRemoved, callback);
 180             function callback()
 181             {
 182                 InspectorTest.addResult("inspected:before DOMNode in DOMAgent: " + !!(WebInspector.domModel.nodeForId(inspectedBefore.id)));
 183                 InspectorTest.addResult("inspected:after DOMNode in DOMAgent: " + !!(WebInspector.domModel.nodeForId(inspectedAfter.id)));
 184                 next();
 185             }
 186         }
 187     ]);
 188
 189     function executeAndDumpTree(pageFunction, eventName, next)
 190     {
 191         WebInspector.domModel.addEventListener(eventName, domCallback, this);
 192         InspectorTest.evaluateInPage(pageFunction);
 193
 194         function domCallback()
 195         {
 196             WebInspector.domModel.removeEventListener(eventName, domCallback, this);
 197             InspectorTest.firstElementsTreeOutline().addEventListener(WebInspector.ElementsTreeOutline.Events.ElementsTreeUpdated, treeCallback, this);
 198         }
 199
 200         function treeCallback()
 201         {
 202             InspectorTest.firstElementsTreeOutline().removeEventListener(WebInspector.ElementsTreeOutline.Events.ElementsTreeUpdated, treeCallback, this);
 203             InspectorTest.dumpElementsTree(containerNode);
 204             next();
 205         }
 206     }
 207
 208     function expandAndDumpTree(next)
 209     {
 210           InspectorTest.addResult("== Expanding: ==");
 211           InspectorTest.expandElementsTree(callback);
 212           function callback()
 213           {
 214               InspectorTest.dumpElementsTree(containerNode);
 215               next();
 216           }
 217     }
 218
 219     function selectNodeAndDumpStyles(id, pseudoTypeName, callback)
 220     {
 221         if (pseudoTypeName)
 222             InspectorTest.selectPseudoIdNodeAndWaitForStyles("inspected", pseudoTypeName, stylesCallback);
 223         else
 224             InspectorTest.selectNodeAndWaitForStyles("inspected", stylesCallback);
 225
 226         function stylesCallback()
 227         {
 228             InspectorTest.dumpSelectedElementStyles(false, false, false, true);
 229             callback();
 230         }
 231     }
 232 }
 233
 234 </script>
 235 </head>
 236
 237 <body onload="runTest()">
 238 <p>
 239 Tests that pseudo elements and their styles are handled properly.
 240 </p>
 241
 242 <div id="container">
 243     <div id="inspected">Text</div>
 244     <div id="empty"></div>
 245 </div>
 246
 247 </body>
 248 </html>