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