c1817029f768e68c53e9ec374465e339cc227e1d
[WebKit-https.git] / LayoutTests / inspector / css / modify-css-property.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="../../http/tests/inspector/resources/inspector-test.js"></script>
5 <script>
6 function makeNarrow() {
7     document.getElementById("x").style.width = "50px";
8 }
9
10 function makeWide() {
11     document.getElementById("x").style.width = "200px";
12 }
13
14 function test() {
15     let nodeStyles = null;
16     let suite = InspectorTest.createAsyncSuite("ModifyCSSProperty");
17
18     suite.addTestCase({
19         name: "Update value when CSSStyleDeclaration is not locked",
20         test(resolve, reject) {
21             let getMatchedStyleDeclaration = () => {
22                 for (let rule of nodeStyles.matchedRules) {
23                     if (rule.selectorText === ".rule-b")
24                         return rule.style;
25                 }
26                 InspectorTest.fail("No declaration found.");
27                 resolve();
28             };
29
30             let getProperty = (propertyName) => {
31                 let styleDeclaration = getMatchedStyleDeclaration();
32                 for (let property of styleDeclaration.enabledProperties) {
33                     if (property.name === propertyName)
34                         return property;
35                 }
36                 InspectorTest.fail("No property found.");
37                 resolve();
38             };
39
40             let styleDeclaration = getMatchedStyleDeclaration();
41             styleDeclaration.locked = false;
42             getProperty("font-size").rawValue = "11px";
43             getProperty("font-size").rawValue = "10px";
44
45             InspectorTest.expectEqual(getProperty("font-size").rawValue, "10px", `"font-size" property value should update immediately.`);
46
47             InspectorTest.expectEqual(styleDeclaration.text, `font-size: 12px; color: antiquewhite`, `Style declaration text should stay unchanged.`);
48
49             resolve();
50         }
51     });
52
53     suite.addTestCase({
54         name: "Update value when CSSStyleDeclaration is locked",
55         test(resolve, reject) {
56             let getMatchedStyleDeclaration = () => {
57                 for (let rule of nodeStyles.matchedRules) {
58                     if (rule.selectorText === ".rule-a")
59                         return rule.style;
60                 }
61                 InspectorTest.fail("No declaration found.");
62                 resolve();
63             };
64
65             let getProperty = (propertyName) => {
66                 let styleDeclaration = getMatchedStyleDeclaration();
67                 for (let property of styleDeclaration.enabledProperties) {
68                     if (property.name === propertyName)
69                         return property;
70                 }
71                 InspectorTest.fail("No property found.");
72                 resolve();
73             };
74
75             let styleDeclaration = getMatchedStyleDeclaration();
76             styleDeclaration.locked = true;
77             getProperty("font-size").rawValue = "15px";
78             getProperty("font-size").rawValue = "16px";
79
80             InspectorTest.expectEqual(getProperty("font-size").rawValue, "16px", `"font-size" property value should update immediately.`);
81
82             InspectorTest.expectEqual(styleDeclaration.text, `
83         font-size: 16px;
84         color: #333;
85
86         margin-left: 0;
87         margin-top: 1em;
88     `, `Style declaration text should update immediately.`);
89
90             styleDeclaration.locked = false;
91
92             resolve();
93         }
94     });
95
96     suite.addTestCase({
97         name: "Update inline style value when CSSStyleDeclaration locked and not locked",
98         test(resolve, reject) {
99             let getInlineStyleDeclaration = () => {
100                 for (let styleDeclaration of nodeStyles.orderedStyles) {
101                     if (styleDeclaration.type === styleDeclaration.constructor.Type.Inline)
102                         return styleDeclaration;
103                 }
104                 InspectorTest.fail("No declaration found.");
105                 resolve();
106             };
107
108             let getProperty = (propertyName) => {
109                 let styleDeclaration = getInlineStyleDeclaration();
110                 for (let property of styleDeclaration.enabledProperties) {
111                     if (property.name === propertyName)
112                         return property;
113                 }
114                 InspectorTest.fail("No property found.");
115                 resolve();
116             };
117
118             let styleDeclaration = getInlineStyleDeclaration();
119
120             styleDeclaration.awaitEvent(WI.CSSStyleDeclaration.Event.PropertiesChanged)
121                 .then((event) => {
122                     InspectorTest.expectEqual(getProperty("width").rawValue, "200px", `"width" property value should update to "200px".`);
123                     InspectorTest.expectEqual(styleDeclaration.text, `width: 200px;`, `Inline style declaration text should update when not locked.`);
124                 })
125                 .then(resolve, reject);
126
127             styleDeclaration.locked = true;
128             getProperty("width").rawValue = "64px";
129             InspectorTest.expectEqual(styleDeclaration.text, `width: 64px;`, `Style declaration text should update immediately.`);
130
131             // WI.CSSStyleDeclaration.Event.PropertiesChanged event should not fire when the style declaration is locked.
132             InspectorTest.evaluateInPage(`makeNarrow()`);
133
134             styleDeclaration.locked = false;
135             getProperty("width").rawValue = "128px";
136             InspectorTest.expectEqual(styleDeclaration.text, `width: 64px;`, `Style declaration text should stay "width: 64px".`);
137
138             InspectorTest.evaluateInPage(`makeWide()`);
139         }
140     });
141
142     suite.addTestCase({
143         name: "ModifyCSSProperty.CommentOutAndUncommentPropertyWithNewlines",
144         test(resolve, reject) {
145             let getMatchedStyleDeclaration = () => {
146                 for (let rule of nodeStyles.matchedRules) {
147                     if (rule.selectorText === ".rule-c")
148                         return rule.style;
149                 }
150                 InspectorTest.fail("No declaration found.");
151                 resolve();
152             };
153
154             let getProperty = (propertyName) => {
155                 let styleDeclaration = getMatchedStyleDeclaration();
156                 for (let property of styleDeclaration.properties) {
157                     if (property.name === propertyName)
158                         return property;
159                 }
160                 InspectorTest.fail("No property found.");
161                 resolve();
162             };
163
164             let styleDeclaration = getMatchedStyleDeclaration();
165             styleDeclaration.locked = true;
166
167             InspectorTest.expectThat(!getProperty("padding-right").enabled, `Commented out property should be disabled.`);
168
169             let disabled = false;
170             getProperty("padding-right").commentOut(disabled);
171
172             let expectedStyleText = `\n        /* padding-left: 2em; */\n        padding-right: 0px;\n    `;
173             InspectorTest.expectEqual(styleDeclaration.text, expectedStyleText, `Style declaration text should update immediately with uncommented property.`);
174
175             InspectorTest.expectThat(getProperty("padding-right").enabled, `Uncommented property should be enabled.`);
176
177             disabled = true;
178             getProperty("padding-right").commentOut(disabled);
179
180             expectedStyleText = `\n        /* padding-left: 2em; */\n        /* padding-right: 0px; */\n    `;
181             InspectorTest.expectEqual(styleDeclaration.text, expectedStyleText, `Style declaration text should update immediately with commented out property.`);
182
183             InspectorTest.expectThat(!getProperty("padding-right").enabled, `Commented out property should be disabled.`);
184
185             resolve();
186         }
187     });
188
189     suite.addTestCase({
190         name: "ModifyCSSProperty.CommentOutAndUncommentPropertyWithoutNewlines",
191         test(resolve, reject) {
192             let getMatchedStyleDeclaration = () => {
193                 for (let rule of nodeStyles.matchedRules) {
194                     if (rule.selectorText === ".rule-d")
195                         return rule.style;
196                 }
197                 InspectorTest.fail("No declaration found.");
198                 resolve();
199             };
200
201             let getProperty = (propertyName) => {
202                 let styleDeclaration = getMatchedStyleDeclaration();
203                 for (let property of styleDeclaration.properties) {
204                     if (property.name === propertyName)
205                         return property;
206                 }
207                 InspectorTest.fail("No property found.");
208                 resolve();
209             };
210
211             let styleDeclaration = getMatchedStyleDeclaration();
212             styleDeclaration.locked = true;
213
214             InspectorTest.expectThat(!getProperty("font-size").enabled, `Commented out property should be disabled.`);
215
216             let disabled = false;
217             getProperty("font-size").commentOut(disabled);
218
219             let expectedStyleText = `font-size: 13px;/*border: 2px solid brown*/`;
220             InspectorTest.expectEqual(styleDeclaration.text, expectedStyleText, `Style declaration text should update immediately with uncommented property.`);
221
222             InspectorTest.expectThat(getProperty("font-size").enabled, `Uncommented property should be enabled.`);
223             InspectorTest.expectThat(!getProperty("border").enabled, `Commented out property should be disabled.`);
224
225             disabled = false;
226             getProperty("border").commentOut(disabled);
227
228             expectedStyleText = `font-size: 13px;border: 2px solid brown`;
229             InspectorTest.expectEqual(styleDeclaration.text, expectedStyleText, `Style declaration text should update immediately with commented out property.`);
230
231             InspectorTest.expectThat(getProperty("border").enabled, `Uncommented property should be enabled.`);
232
233             resolve();
234         }
235     });
236
237     WI.domManager.requestDocument((documentNode) => {
238         WI.domManager.querySelector(documentNode.id, "#x", (contentNodeId) => {
239             if (contentNodeId) {
240                 let domNode = WI.domManager.nodeForId(contentNodeId);
241                 nodeStyles = WI.cssManager.stylesForNode(domNode);
242
243                 if (nodeStyles.needsRefresh) {
244                     nodeStyles.singleFireEventListener(WI.DOMNodeStyles.Event.Refreshed, (event) => {
245                         suite.runTestCasesAndFinish()
246                     });
247                 } else
248                     suite.runTestCasesAndFinish();
249             } else {
250                 InspectorTest.fail("DOM node not found.");
251                 InspectorTest.completeTest();
252             }
253         });
254     });
255 }
256 </script>
257 </head>
258 <body onload="runTest()">
259     <p>Testing that CSSStyleDeclaration update immediately after modifying its properties when it is not locked.</p>
260
261     <style>
262     .rule-a {
263         font-size: 14px;
264         color: #333;
265
266         margin-left: 0;
267         margin-top: 1em;
268     }
269     .rule-b {font-size: 12px; color: antiquewhite}
270     .rule-c {
271         /* padding-left: 2em; */
272         /* padding-right: 0px; */
273     }
274     .rule-d {/*font-size: 13px;*//*border: 2px solid brown*/}
275     </style>
276     <div id="x" class="test-node rule-a rule-b rule-c rule-d" style="width: 100px"></div>
277 </body>
278 </html>