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

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