| OLD | NEW |
|---|
| (Empty) | |
| 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: " + la
zyRule.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: " + la
zyRange.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.toS
tring()); |
| 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", onContainerSel
ected); |
| 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.sty
les.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("Ent
er")); |
| 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> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 220403005:
DevTools: synchronize links in StylesSidebarPane on edits. (Closed)
Base URL: svn://svn.chromium.org/blink/trunk