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