| 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 <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: " + la
zyRule.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: " + la
zyRange.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.toS
tring()); | |
| 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, onContainerSelect
ed); | |
| 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 n
ot 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._sect
ionBlocks) { | |
| 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._sect
ionBlocks[0].sections[3]; | |
| 158 section.startEditingSelector(); | |
| 159 section._selectorElement.textContent = ".should-change, .INSERTED-OT
HER-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: funct
ion() { } }); | |
| 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="resources/styles-update-links-2.css"></link> | |
| 211 <link rel="stylesheet" href="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> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1158883003:
DevTools: shard inspector/elements tests for faster execution. (Closed)
Base URL: svn://svn.chromium.org/blink/trunk