| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../http/tests/inspector/resources/inspector-test.js"></script> |
| <script> |
| function makeNarrow() { |
| document.getElementById("x").style.width = "50px"; |
| } |
| |
| function makeWide() { |
| document.getElementById("x").style.width = "200px"; |
| } |
| |
| function test() { |
| let nodeStyles = null; |
| let suite = InspectorTest.createAsyncSuite("ModifyCSSProperty"); |
| |
| suite.addTestCase({ |
| name: "Update value when CSSStyleDeclaration is not locked", |
| test(resolve, reject) { |
| let getMatchedStyleDeclaration = () => { |
| for (let rule of nodeStyles.matchedRules) { |
| if (rule.selectorText === ".rule-b") |
| return rule.style; |
| } |
| }; |
| |
| let getProperty = (propertyName) => { |
| let styleDeclaration = getMatchedStyleDeclaration(); |
| for (let property of styleDeclaration.properties) { |
| if (property.name === propertyName) |
| return property; |
| } |
| }; |
| |
| let styleDeclaration = getMatchedStyleDeclaration(); |
| styleDeclaration.locked = false; |
| getProperty("font-size").rawValue = "11px"; |
| getProperty("font-size").rawValue = "10px"; |
| |
| InspectorTest.expectEqual(getProperty("font-size").rawValue, "10px", `"font-size" property value should update immediately.`); |
| |
| InspectorTest.expectEqual(styleDeclaration.text, `font-size: 12px; color: antiquewhite`, `Style declaration text should stay unchanged.`); |
| |
| resolve(); |
| } |
| }); |
| |
| suite.addTestCase({ |
| name: "Update value when CSSStyleDeclaration is locked", |
| test(resolve, reject) { |
| let getMatchedStyleDeclaration = () => { |
| for (let rule of nodeStyles.matchedRules) { |
| if (rule.selectorText === ".rule-a") |
| return rule.style; |
| } |
| }; |
| |
| let getProperty = (propertyName) => { |
| let styleDeclaration = getMatchedStyleDeclaration(); |
| for (let property of styleDeclaration.properties) { |
| if (property.name === propertyName) |
| return property; |
| } |
| }; |
| |
| let styleDeclaration = getMatchedStyleDeclaration(); |
| styleDeclaration.locked = true; |
| getProperty("font-size").rawValue = "15px"; |
| getProperty("font-size").rawValue = "16px"; |
| |
| InspectorTest.expectEqual(getProperty("font-size").rawValue, "16px", `"font-size" property value should update immediately.`); |
| |
| InspectorTest.expectEqual(styleDeclaration.text, ` |
| font-size: 16px; |
| color: #333; |
| |
| margin-left: 0; |
| margin-top: 1em; |
| `, `Style declaration text should update immediately.`); |
| |
| styleDeclaration.locked = false; |
| |
| resolve(); |
| } |
| }); |
| |
| suite.addTestCase({ |
| name: "Update inline style value when CSSStyleDeclaration locked and not locked", |
| test(resolve, reject) { |
| let getInlineStyleDeclaration = () => { |
| for (let styleDeclaration of nodeStyles.orderedStyles) { |
| if (styleDeclaration.type === styleDeclaration.constructor.Type.Inline) |
| return styleDeclaration; |
| } |
| }; |
| |
| let getProperty = (propertyName) => { |
| let styleDeclaration = getInlineStyleDeclaration(); |
| for (let property of styleDeclaration.properties) { |
| if (property.name === propertyName) |
| return property; |
| } |
| }; |
| |
| let styleDeclaration = getInlineStyleDeclaration(); |
| |
| styleDeclaration.awaitEvent(WI.CSSStyleDeclaration.Event.PropertiesChanged) |
| .then((event) => { |
| InspectorTest.expectEqual(getProperty("width").rawValue, "200px", `"width" property value should update to "200px".`); |
| InspectorTest.expectEqual(styleDeclaration.text, `width: 200px;`, `Inline style declaration text should update when not locked.`); |
| }) |
| .then(resolve, reject); |
| |
| styleDeclaration.locked = true; |
| getProperty("width").rawValue = "64px"; |
| InspectorTest.expectEqual(styleDeclaration.text, `\nwidth: 64px;`, `Style declaration text should update immediately.`); |
| |
| // WI.CSSStyleDeclaration.Event.PropertiesChanged event should not fire when the style declaration is locked. |
| InspectorTest.evaluateInPage(`makeNarrow()`); |
| |
| styleDeclaration.locked = false; |
| getProperty("width").rawValue = "128px"; |
| InspectorTest.expectEqual(styleDeclaration.text, `\nwidth: 64px;`, `Style declaration text should stay "width: 64px".`); |
| |
| InspectorTest.evaluateInPage(`makeWide()`); |
| } |
| }); |
| |
| WI.domTreeManager.requestDocument((documentNode) => { |
| WI.domTreeManager.querySelector(documentNode.id, "#x", (contentNodeId) => { |
| if (contentNodeId) { |
| let domNode = WI.domTreeManager.nodeForId(contentNodeId); |
| nodeStyles = WI.cssStyleManager.stylesForNode(domNode); |
| |
| if (nodeStyles.needsRefresh) { |
| nodeStyles.singleFireEventListener(WI.DOMNodeStyles.Event.Refreshed, (event) => { |
| suite.runTestCasesAndFinish() |
| }); |
| } else |
| suite.runTestCasesAndFinish(); |
| } else { |
| InspectorTest.fail("DOM node not found."); |
| InspectorTest.completeTest(); |
| } |
| }); |
| }); |
| } |
| </script> |
| </head> |
| <body onload="runTest()"> |
| <p>Testing that CSSStyleDeclaration update immediately after modifying its properties when it is not locked.</p> |
| |
| <style> |
| .rule-a { |
| font-size: 14px; |
| color: #333; |
| |
| margin-left: 0; |
| margin-top: 1em; |
| } |
| .rule-b {font-size: 12px; color: antiquewhite} |
| </style> |
| <div id="x" class="test-node rule-a rule-b" style="width: 100px"></div> |
| </body> |
| </html> |
