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(rules, callback)
  79     {
  80         InspectorTest.selectNodeAndWaitForStyles("other", onOtherSelected);
  81
  82         function onOtherSelected()
  83         {
  84             InspectorTest.selectNodeAndWaitForStyles("container", onContainerSelected);
  85         }
  86
  87         function onContainerSelected()
  88         {
  89             var fetchedRules = getMatchedRules();
  90             if (fetchedRules.length !== rules.length) {
  91                 InspectorTest.addResult("Error: rules sizes are not equal!");
  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 matchedStyleSections = WebInspector.panels.elements.sidebarPanes.styles.sections[0];
 108         var rules = [];
 109         for (var i = 1; i < matchedStyleSections.length; ++i) {
 110             var rule = matchedStyleSections[i].rule;
 111             if (rule)
 112                 rules.push(rule);
 113         }
 114         return rules;
 115     }
 116
 117     function insertProperty()
 118     {
 119         InspectorTest.dumpSelectedElementStyles(true, false, true);
 120         var treeItem = InspectorTest.getMatchedStylePropertyTreeItem("color");
 121         var treeElement = treeItem.section().addNewBlankProperty(1);
 122         treeElement.applyStyleText("PROPERTY: INSERTED;", true, true);
 123         InspectorTest.runAfterPendingDispatches(onPropertyInserted);
 124     }
 125
 126     function onPropertyInserted()
 127     {
 128         InspectorTest.addResult("\n\n#### AFTER PROPERTY INSERTION ####\n\n");
 129         InspectorTest.dumpSelectedElementStyles(true, false, true);
 130         var rules = getMatchedRules();
 131         validateRuleRanges(rules, editSelector);
 132     }
 133
 134     function editSelector()
 135     {
 136         var section = WebInspector.panels.elements.sidebarPanes.styles.sections[0][4];
 137         section.startEditingSelector();
 138         section._selectorElement.textContent = ".should-change, .INSERTED-OTHER-SELECTOR";
 139         section._selectorElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
 140         InspectorTest.runAfterPendingDispatches(onSelectorEdited);
 141     }
 142
 143     function onSelectorEdited()
 144     {
 145         InspectorTest.addResult("\n\n#### AFTER SELECTOR EDIT ####\n\n");
 146         InspectorTest.dumpSelectedElementStyles(true, false, true);
 147         var rules = getMatchedRules();
 148         validateRuleRanges(rules, disableProperty);
 149     }
 150
 151     function disableProperty()
 152     {
 153         var treeItem = InspectorTest.getMatchedStylePropertyTreeItem("border");
 154         treeItem.toggleEnabled({ target: { checked: false }, consume: function() { } });
 155         InspectorTest.runAfterPendingDispatches(onPropertyDisabled);
 156     }
 157
 158     function onPropertyDisabled()
 159     {
 160         InspectorTest.addResult("\n\n#### AFTER PROPERTY DISABLED ####\n\n");
 161         InspectorTest.dumpSelectedElementStyles(true, false, true);
 162         var rules = getMatchedRules();
 163         validateRuleRanges(rules, InspectorTest.completeTest.bind(InspectorTest));
 164     }
 165
 166     InspectorTest.selectNodeAndWaitForStyles("container", insertProperty);
 167 }
 168 </script>
 169 <link rel="stylesheet" href="resources/styles-update-links.css"></link>
 170 </head>
 171
 172 <body onload="runTest()">
 173 <p>
 174 Tests that removal of property following its disabling works.
 175 </p>
 176
 177 <div id="container" class="left-intact should-change">
 178 Red text here.
 179 </div>
 180
 181 <div id="other"></div>
 182
 183 </body>
 184 </html>