Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(439)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/inspector/elements/styles/styles-update-links.html

Issue 698113006: DevTools: [SSP] update ranges for all section in sidebar pane (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: fixup Created 6 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
« no previous file with comments | « LayoutTests/http/tests/inspector/elements-test.js ('k') | LayoutTests/inspector/elements/styles/styles-update-links-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <html> 1 <html>
2 <head> 2 <head>
3 <script src="../../../http/tests/inspector/inspector-test.js"></script> 3 <script src="../../../http/tests/inspector/inspector-test.js"></script>
4 <script src="../../../http/tests/inspector/elements-test.js"></script> 4 <script src="../../../http/tests/inspector/elements-test.js"></script>
5 <script> 5 <script>
6 6
7 function test() 7 function test()
8 { 8 {
9 function flattenRuleRanges(rule) 9 function flattenRuleRanges(rule)
10 { 10 {
(...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after
68 } 68 }
69 if (!lazyRange.range.equal(originalRange.range)) { 69 if (!lazyRange.range.equal(originalRange.range)) {
70 InspectorTest.addResult("Error: ranges '" + lazyRange.name + "' are not equal: " + lazyRange.range.toString() + " != " + originalRange.range.toS tring()); 70 InspectorTest.addResult("Error: ranges '" + lazyRange.name + "' are not equal: " + lazyRange.range.toString() + " != " + originalRange.range.toS tring());
71 return false; 71 return false;
72 } 72 }
73 } 73 }
74 InspectorTest.addResult(flattenLazy.length + " rule ranges are equal."); 74 InspectorTest.addResult(flattenLazy.length + " rule ranges are equal.");
75 return true; 75 return true;
76 } 76 }
77 77
78 function validateRuleRanges(rules, callback) 78 function validateRuleRanges(selector, rules, callback)
79 { 79 {
80 InspectorTest.selectNodeAndWaitForStyles("other", onOtherSelected); 80 InspectorTest.selectNodeAndWaitForStyles("other", onOtherSelected);
81 81
82 function onOtherSelected() 82 function onOtherSelected()
83 { 83 {
84 InspectorTest.selectNodeAndWaitForStyles("container", onContainerSel ected); 84 InspectorTest.selectNodeAndWaitForStyles(selector, onContainerSelect ed);
85 } 85 }
86 86
87 function onContainerSelected() 87 function onContainerSelected()
88 { 88 {
89 var fetchedRules = getMatchedRules(); 89 var fetchedRules = getMatchedRules();
90 if (fetchedRules.length !== rules.length) { 90 if (fetchedRules.length !== rules.length) {
91 InspectorTest.addResult("Error: rules sizes are not equal!"); 91 InspectorTest.addResult(String.sprintf("Error: rules sizes are n ot equal! Expected: %d, actual: %d", fetchedRules.length, rules.length));
92 InspectorTest.completeTest(); 92 InspectorTest.completeTest();
93 return; 93 return;
94 } 94 }
95 for (var i = 0; i < fetchedRules.length; ++i) { 95 for (var i = 0; i < fetchedRules.length; ++i) {
96 if (!compareRuleRanges(rules[i], fetchedRules[i])) { 96 if (!compareRuleRanges(rules[i], fetchedRules[i])) {
97 InspectorTest.completeTest(); 97 InspectorTest.completeTest();
98 return; 98 return;
99 } 99 }
100 } 100 }
101 callback(); 101 callback();
102 } 102 }
103 } 103 }
104 104
105 function getMatchedRules() 105 function getMatchedRules()
106 { 106 {
107 var matchedStyleSections = WebInspector.panels.elements.sidebarPanes.sty les.sections[0];
108 var rules = []; 107 var rules = [];
109 for (var i = 1; i < matchedStyleSections.length; ++i) { 108 for (var pseudoId in WebInspector.panels.elements.sidebarPanes.styles.se ctions) {
110 var rule = matchedStyleSections[i].rule; 109 var matchedStyleSections = WebInspector.panels.elements.sidebarPanes .styles.sections[pseudoId];
111 if (rule) 110 for (var i = 0; i < matchedStyleSections.length; ++i) {
112 rules.push(rule); 111 var section = matchedStyleSections[i];
112 if (section.computedStyle)
113 continue;
114 var rule = section.rule;
115 if (rule)
116 rules.push(rule);
117 }
113 } 118 }
114 return rules; 119 return rules;
115 } 120 }
116 121
117 function insertProperty() 122 InspectorTest.runTestSuite([
118 { 123 function selectInitialNode(next)
119 InspectorTest.dumpSelectedElementStyles(true, false, true); 124 {
120 var treeItem = InspectorTest.getMatchedStylePropertyTreeItem("color"); 125 InspectorTest.selectNodeAndWaitForStyles("container", next);
121 var treeElement = treeItem.section().addNewBlankProperty(1); 126 },
122 InspectorTest.waitForStyleApplied(onPropertyInserted);
123 treeElement.applyStyleText("PROPERTY: INSERTED;", true, true);
124 }
125 127
126 function onPropertyInserted() 128 function testInsertProperty(next)
127 { 129 {
128 InspectorTest.addResult("\n\n#### AFTER PROPERTY INSERTION ####\n\n"); 130 InspectorTest.dumpSelectedElementStyles(true, false, true);
129 InspectorTest.dumpSelectedElementStyles(true, false, true); 131 var treeItem = InspectorTest.getMatchedStylePropertyTreeItem("color" );
130 var rules = getMatchedRules(); 132 var treeElement = treeItem.section().addNewBlankProperty(1);
131 validateRuleRanges(rules, editSelector); 133 InspectorTest.waitForStyleApplied(onPropertyInserted);
132 } 134 treeElement.applyStyleText("PROPERTY: INSERTED;", true, true);
133 135
134 function editSelector() 136 function onPropertyInserted()
135 { 137 {
136 var section = WebInspector.panels.elements.sidebarPanes.styles.sections[ 0][4]; 138 InspectorTest.addResult("\n\n#### AFTER PROPERTY INSERTION ####\ n\n");
137 section.startEditingSelector(); 139 InspectorTest.dumpSelectedElementStyles(true, false, true);
138 section._selectorElement.textContent = ".should-change, .INSERTED-OTHER- SELECTOR"; 140 var rules = getMatchedRules();
139 InspectorTest.waitForSelectorCommitted(onSelectorEdited); 141 validateRuleRanges("container", rules, next);
140 section._selectorElement.dispatchEvent(InspectorTest.createKeyEvent("Ent er")); 142 }
141 } 143 },
142 144
143 function onSelectorEdited() 145 function testEditSelector(next)
144 { 146 {
145 InspectorTest.addResult("\n\n#### AFTER SELECTOR EDIT ####\n\n"); 147 var section = WebInspector.panels.elements.sidebarPanes.styles.secti ons[0][4];
146 InspectorTest.dumpSelectedElementStyles(true, false, true); 148 section.startEditingSelector();
147 var rules = getMatchedRules(); 149 section._selectorElement.textContent = ".should-change, .INSERTED-OT HER-SELECTOR";
148 validateRuleRanges(rules, disableProperty); 150 InspectorTest.waitForSelectorCommitted(onSelectorEdited);
149 } 151 section._selectorElement.dispatchEvent(InspectorTest.createKeyEvent( "Enter"));
150 152
151 function disableProperty() 153 function onSelectorEdited()
152 { 154 {
153 var treeItem = InspectorTest.getMatchedStylePropertyTreeItem("border"); 155 InspectorTest.addResult("\n\n#### AFTER SELECTOR EDIT ####\n\n") ;
154 InspectorTest.waitForStyleApplied(onPropertyDisabled); 156 InspectorTest.dumpSelectedElementStyles(true, false, true);
155 treeItem.toggleEnabled({ target: { checked: false }, consume: function() { } }); 157 var rules = getMatchedRules();
156 } 158 validateRuleRanges("container", rules, next);
159 }
160 },
157 161
158 function onPropertyDisabled() 162 function testDisableProperty(next)
159 { 163 {
160 InspectorTest.addResult("\n\n#### AFTER PROPERTY DISABLED ####\n\n"); 164 var treeItem = InspectorTest.getMatchedStylePropertyTreeItem("border ");
161 InspectorTest.dumpSelectedElementStyles(true, false, true); 165 InspectorTest.waitForStyleApplied(onPropertyDisabled);
162 var rules = getMatchedRules(); 166 treeItem.toggleEnabled({ target: { checked: false }, consume: functi on() { } });
163 validateRuleRanges(rules, InspectorTest.completeTest.bind(InspectorTest) );
164 }
165 167
166 InspectorTest.selectNodeAndWaitForStyles("container", insertProperty); 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 ]);
167 } 198 }
168 </script> 199 </script>
169 <link rel="stylesheet" href="resources/styles-update-links-2.css"></link> 200 <link rel="stylesheet" href="resources/styles-update-links-2.css"></link>
170 <link rel="stylesheet" href="resources/styles-update-links.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>
171 </head> 216 </head>
172 217
173 <body onload="runTest()"> 218 <body onload="runTest()">
174 <p> 219 <p>
175 Tests that removal of property following its disabling works. 220 Tests that removal of property following its disabling works.
176 </p> 221 </p>
177 222
178 <div id="container" class="left-intact should-change"> 223 <div id="container" class="left-intact should-change">
179 Red text here. 224 Red text here.
180 </div> 225 </div>
181 226
182 <div id="other"></div> 227 <div id="other"></div>
183 228
229 <section id="pseudo"></div>
230
184 </body> 231 </body>
185 </html> 232 </html>
OLDNEW
« no previous file with comments | « LayoutTests/http/tests/inspector/elements-test.js ('k') | LayoutTests/inspector/elements/styles/styles-update-links-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698