third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-update-links.html

   1 <html>
   2 <head>
   3 <script src="../../../http/tests/inspector/inspector-test.js"></script>
   4 <script src="../../../http/tests/inspector/elements-test.js"></script>
   5 <style>
   6 #pseudo::after {
   7     pseudo-property: "12";
   8     color: red;
   9 }
  10
  11 #pseudo::after {
  12     border: 1px solid black;
  13 }
  14
  15 #pseudo::before {
  16     color: blue;
  17 }
  18 </style>
  19 <script>
  20
  21 function test()
  22 {
  23     function flattenRuleRanges(rule)
  24     {
  25         var ranges = [];
  26         var medias = rule.media || [];
  27         for (var i = 0; i < medias.length; ++i) {
  28             var media = medias[i];
  29             if (!media.range)
  30                 continue;
  31             ranges.push({
  32                 range: media.range,
  33                 name: "media #" + i
  34             });
  35         }
  36         for (var i = 0; i < rule.selectors.length; ++i) {
  37             var selector = rule.selectors[i];
  38             if (!selector.range)
  39                 continue;
  40             ranges.push({
  41                 range: selector.range,
  42                 name: "selector #" + i
  43             });
  44         }
  45         if (rule.style.range) {
  46             ranges.push({
  47                 range: rule.style.range,
  48                 name: "style range"
  49             });
  50         }
  51         var properties = rule.style.allProperties;
  52         for (var i = 0; i < properties.length; ++i) {
  53             var property = properties[i];
  54             if (!property.range)
  55                 continue;
  56             ranges.push({
  57                 range: property.range,
  58                 name: "property >>" + property.text + "<<"
  59             });
  60         }
  61         return ranges;
  62     }
  63
  64     function compareRuleRanges(lazyRule, originalRule)
  65     {
  66         if (lazyRule.selectorText !== originalRule.selectorText) {
  67             InspectorTest.addResult("Error: rule selectors are not equal: " + lazyRule.selectorText + " != " + originalRule.selectorText);
  68             return false;
  69         }
  70         var flattenLazy = flattenRuleRanges(lazyRule);
  71         var flattenOriginal = flattenRuleRanges(originalRule);
  72         if (flattenLazy.length !== flattenOriginal.length) {
  73             InspectorTest.addResult("Error: rule range amount is not equal: " + flattenLazy.length + " != " + flattenOriginal.length);
  74             return false
  75         }
  76         for (var i = 0; i < flattenLazy.length; ++i) {
  77             var lazyRange = flattenLazy[i];
  78             var originalRange = flattenOriginal[i];
  79             if (lazyRange.name !== originalRange.name) {
  80                 InspectorTest.addResult("Error: rule names are not equal: " + lazyRange.name + " != " + originalRange.name);
  81                 return false;
  82             }
  83             if (!lazyRange.range.equal(originalRange.range)) {
  84                 InspectorTest.addResult("Error: ranges '" + lazyRange.name + "' are not equal: " + lazyRange.range.toString() + " != " + originalRange.range.toString());
  85                 return false;
  86             }
  87         }
  88         InspectorTest.addResult(flattenLazy.length + " rule ranges are equal.");
  89         return true;
  90     }
  91
  92     function validateRuleRanges(selector, rules, callback)
  93     {
  94         InspectorTest.selectNodeAndWaitForStyles("other", onOtherSelected);
  95
  96         function onOtherSelected()
  97         {
  98             InspectorTest.selectNodeAndWaitForStyles(selector, onContainerSelected);
  99         }
 100
 101         function onContainerSelected()
 102         {
 103             var fetchedRules = getMatchedRules();
 104             if (fetchedRules.length !== rules.length) {
 105                 InspectorTest.addResult(String.sprintf("Error: rules sizes are not equal! Expected: %d, actual: %d", fetchedRules.length, rules.length));
 106                 InspectorTest.completeTest();
 107                 return;
 108             }
 109             for (var i = 0; i < fetchedRules.length; ++i) {
 110                 if (!compareRuleRanges(rules[i], fetchedRules[i])) {
 111                     InspectorTest.completeTest();
 112                     return;
 113                 }
 114             }
 115             callback();
 116         }
 117     }
 118
 119     function getMatchedRules()
 120     {
 121         var rules = [];
 122         for (var block of WebInspector.panels.elements.sidebarPanes.styles._sectionBlocks) {
 123             for (var section of block.sections) {
 124                 var rule = section.rule();
 125                 if (rule)
 126                     rules.push(rule);
 127             }
 128         }
 129         return rules;
 130     }
 131
 132     InspectorTest.runTestSuite([
 133         function selectInitialNode(next)
 134         {
 135             InspectorTest.selectNodeAndWaitForStyles("container", next);
 136         },
 137
 138         function testInsertProperty(next)
 139         {
 140             InspectorTest.dumpSelectedElementStyles(true, false, true);
 141             var treeItem = InspectorTest.getMatchedStylePropertyTreeItem("color");
 142             var treeElement = treeItem.section().addNewBlankProperty(1);
 143             InspectorTest.waitForStyleApplied(onPropertyInserted);
 144             treeElement.applyStyleText("PROPERTY: INSERTED;", true);
 145
 146             function onPropertyInserted()
 147             {
 148                 InspectorTest.addResult("\n\n#### AFTER PROPERTY INSERTION ####\n\n");
 149                 InspectorTest.dumpSelectedElementStyles(true, false, true);
 150                 var rules = getMatchedRules();
 151                 validateRuleRanges("container", rules, next);
 152             }
 153         },
 154
 155         function testEditSelector(next)
 156         {
 157             var section = WebInspector.panels.elements.sidebarPanes.styles._sectionBlocks[0].sections[3];
 158             section.startEditingSelector();
 159             section._selectorElement.textContent = ".should-change, .INSERTED-OTHER-SELECTOR";
 160             InspectorTest.waitForSelectorCommitted(onSelectorEdited);
 161             section._selectorElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
 162
 163             function onSelectorEdited()
 164             {
 165                 InspectorTest.addResult("\n\n#### AFTER SELECTOR EDIT ####\n\n");
 166                 InspectorTest.dumpSelectedElementStyles(true, false, true);
 167                 var rules = getMatchedRules();
 168                 validateRuleRanges("container", rules, next);
 169             }
 170         },
 171
 172         function testDisableProperty(next)
 173         {
 174             var treeItem = InspectorTest.getMatchedStylePropertyTreeItem("border");
 175             InspectorTest.waitForStyleApplied(onPropertyDisabled);
 176             treeItem._toggleEnabled({ target: { checked: false }, consume: function() { } });
 177
 178             function onPropertyDisabled()
 179             {
 180                 InspectorTest.addResult("\n\n#### AFTER PROPERTY DISABLED ####\n\n");
 181                 InspectorTest.dumpSelectedElementStyles(true, false, true);
 182                 var rules = getMatchedRules();
 183                 validateRuleRanges("container", rules, next);
 184             }
 185         },
 186
 187         function selectNodeWithPseudoElements(next)
 188         {
 189             InspectorTest.selectNodeAndWaitForStyles("pseudo", next);
 190         },
 191
 192         function testPseudoSectionPropertyEdit(next)
 193         {
 194             var treeItem = InspectorTest.getMatchedStylePropertyTreeItem("pseudo-property");
 195             var treeElement = treeItem.section().addNewBlankProperty(1);
 196             InspectorTest.waitForStyleApplied(onPropertyInserted);
 197             treeElement.applyStyleText("PROPERTY: INSERTED;", true);
 198
 199             function onPropertyInserted()
 200             {
 201                 InspectorTest.addResult("\n\n#### AFTER PROPERTY INSERTED ####\n\n");
 202                 InspectorTest.dumpSelectedElementStyles(true, false, true);
 203                 var rules = getMatchedRules();
 204                 validateRuleRanges("pseudo", rules, next);
 205             }
 206         },
 207     ]);
 208 }
 209 </script>
 210 <link rel="stylesheet" href="../styles/resources/styles-update-links-2.css"></link>
 211 <link rel="stylesheet" href="../styles/resources/styles-update-links.css"></link>
 212 </head>
 213
 214 <body onload="runTest()">
 215 <p>
 216 Tests that removal of property following its disabling works.
 217 </p>
 218
 219 <div id="container" class="left-intact should-change">
 220 Red text here.
 221 </div>
 222
 223 <div id="other"></div>
 224
 225 <section id="pseudo"></div>
 226
 227 </body>
 228 </html>