third_party/WebKit/LayoutTests/inspector/elements/styles-2/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 function removeLastRule()
  26 {
  27     document.styleSheets[0].deleteRule(document.styleSheets[0].cssRules.length - 1);
  28 }
  29
  30 function addAfterRule()
  31 {
  32     document.styleSheets[0].addRule("#inspected:after", "content: \"AFTER\"");
  33 }
  34
  35 function addBeforeRule()
  36 {
  37     document.styleSheets[0].addRule("#inspected:before", "content: \"BEFORE\"");
  38 }
  39
  40 function modifyTextContent()
  41 {
  42     document.getElementById("inspected").textContent = "bar";
  43 }
  44
  45 function clearTextContent()
  46 {
  47     document.getElementById("inspected").textContent = "";
  48 }
  49
  50 function removeNode()
  51 {
  52     document.getElementById("inspected").remove();
  53 }
  54
  55 function test()
  56 {
  57     var containerNode;
  58     var inspectedNode;
  59
  60     InspectorTest.runTestSuite([
  61         function dumpOriginalTree(next)
  62         {
  63             InspectorTest.expandElementsTree(callback);
  64             function callback()
  65             {
  66                 containerNode = InspectorTest.expandedNodeWithId("container");
  67                 inspectedNode = InspectorTest.expandedNodeWithId("inspected");
  68                 InspectorTest.addResult("Original elements tree:");
  69                 InspectorTest.dumpElementsTree(containerNode);
  70                 next();
  71             }
  72         },
  73
  74         function dumpNormalNodeStyles(next)
  75         {
  76             selectNodeAndDumpStyles("inspected", "", next);
  77         },
  78
  79         function dumpBeforeStyles(next)
  80         {
  81             selectNodeAndDumpStyles("inspected", "before", next);
  82         },
  83
  84         function dumpAfterStyles(next)
  85         {
  86             selectNodeAndDumpStyles("inspected", "after", next);
  87         },
  88
  89         function removeAfter(next)
  90         {
  91             executeAndDumpTree("removeLastRule()", WebInspector.DOMModel.Events.NodeRemoved, next);
  92         },
  93
  94         function removeBefore(next)
  95         {
  96             executeAndDumpTree("removeLastRule()", WebInspector.DOMModel.Events.NodeRemoved, next);
  97         },
  98
  99         function addAfter(next)
 100         {
 101             executeAndDumpTree("addAfterRule()", WebInspector.DOMModel.Events.NodeInserted, expandAndDumpTree.bind(this, next));
 102         },
 103
 104         function addBefore(next)
 105         {
 106             executeAndDumpTree("addBeforeRule()", WebInspector.DOMModel.Events.NodeInserted, next);
 107         },
 108
 109         function modifyTextContent(next)
 110         {
 111             executeAndDumpTree("modifyTextContent()", WebInspector.DOMModel.Events.NodeInserted, next);
 112         },
 113
 114         function clearTextContent(next)
 115         {
 116             executeAndDumpTree("clearTextContent()", WebInspector.DOMModel.Events.NodeRemoved, next);
 117         },
 118
 119         function removeNodeAndCheckPseudoElementsUnbound(next)
 120         {
 121             var inspectedBefore = inspectedNode.beforePseudoElement();
 122             var inspectedAfter = inspectedNode.afterPseudoElement();
 123
 124             executeAndDumpTree("removeNode()", WebInspector.DOMModel.Events.NodeRemoved, callback);
 125             function callback()
 126             {
 127                 InspectorTest.addResult("inspected:before DOMNode in DOMAgent: " + !!(InspectorTest.domModel.nodeForId(inspectedBefore.id)));
 128                 InspectorTest.addResult("inspected:after DOMNode in DOMAgent: " + !!(InspectorTest.domModel.nodeForId(inspectedAfter.id)));
 129                 next();
 130             }
 131         }
 132     ]);
 133
 134     function executeAndDumpTree(pageFunction, eventName, next)
 135     {
 136         InspectorTest.domModel.addEventListener(eventName, domCallback, this);
 137         InspectorTest.evaluateInPage(pageFunction);
 138
 139         function domCallback()
 140         {
 141             InspectorTest.domModel.removeEventListener(eventName, domCallback, this);
 142             InspectorTest.firstElementsTreeOutline().addEventListener(WebInspector.ElementsTreeOutline.Events.ElementsTreeUpdated, treeCallback, this);
 143         }
 144
 145         function treeCallback()
 146         {
 147             InspectorTest.firstElementsTreeOutline().removeEventListener(WebInspector.ElementsTreeOutline.Events.ElementsTreeUpdated, treeCallback, this);
 148             InspectorTest.dumpElementsTree(containerNode);
 149             next();
 150         }
 151     }
 152
 153     function expandAndDumpTree(next)
 154     {
 155           InspectorTest.addResult("== Expanding: ==");
 156           InspectorTest.expandElementsTree(callback);
 157           function callback()
 158           {
 159               InspectorTest.dumpElementsTree(containerNode);
 160               next();
 161           }
 162     }
 163
 164     function selectNodeAndDumpStyles(id, pseudoTypeName, callback)
 165     {
 166         if (pseudoTypeName)
 167             InspectorTest.selectPseudoElementAndWaitForStyles("inspected", pseudoTypeName, stylesCallback);
 168         else
 169             InspectorTest.selectNodeAndWaitForStyles("inspected", stylesCallback);
 170
 171         function stylesCallback()
 172         {
 173             InspectorTest.dumpSelectedElementStyles(true, false, false, true);
 174             callback();
 175         }
 176     }
 177 }
 178
 179 </script>
 180 </head>
 181
 182 <body onload="runTest()">
 183 <p>
 184 Tests that pseudo elements and their styles are handled properly.
 185 </p>
 186
 187 <div id="container">
 188     <div id="inspected">Text</div>
 189     <div id="empty"></div>
 190 </div>
 191
 192 </body>
 193 </html>