| <!DOCTYPE html> |
| <html> |
| <head> |
| <link rel="stylesheet" href="resources/modify-css-property.css"> |
| <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; |
| } |
| InspectorTest.fail("No declaration found."); |
| resolve(); |
| }; |
| |
| let getProperty = (propertyName) => { |
| let styleDeclaration = getMatchedStyleDeclaration(); |
| for (let property of styleDeclaration.enabledProperties) { |
| if (property.name === propertyName) |
| return property; |
| } |
| InspectorTest.fail("No property found."); |
| resolve(); |
| }; |
| |
| let styleDeclaration = getMatchedStyleDeclaration(); |
| styleDeclaration.locked = false; |
| |
| styleDeclaration.singleFireEventListener(WI.CSSStyleDeclaration.Event.PropertiesChanged, function(event) { |
| let fontProperty = getProperty("font-size"); |
| let relativeRange = fontProperty.styleSheetTextRange.relativeTo(fontProperty.ownerStyle.styleSheetTextRange.startLine, fontProperty.ownerStyle.styleSheetTextRange.startOffset); |
| relativeRange.resolveOffsets(fontProperty.ownerStyle.text); |
| let propertyText = fontProperty.ownerStyle.text.slice(relativeRange.startOffset, relativeRange.endOffset); |
| InspectorTest.expectEqual(propertyText, "font-size: 10px;", `styleSheetTextRange should correspond to "font-size: 10px;"`); |
| resolve(); |
| }); |
| |
| 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, `\n font-size: 10px;\n color: antiquewhite;\n`, `Style declaration text should update immediately.`); |
| } |
| }); |
| |
| 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; |
| } |
| InspectorTest.fail("No declaration found."); |
| resolve(); |
| }; |
| |
| let getProperty = (propertyName) => { |
| let styleDeclaration = getMatchedStyleDeclaration(); |
| for (let property of styleDeclaration.enabledProperties) { |
| if (property.name === propertyName) |
| return property; |
| } |
| InspectorTest.fail("No property found."); |
| resolve(); |
| }; |
| |
| 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: "ModifyCSSProperty.PropertiesChangedEvent", |
| test(resolve, reject) { |
| let getInlineStyleDeclaration = () => { |
| for (let styleDeclaration of nodeStyles.orderedStyles) { |
| if (styleDeclaration.type === styleDeclaration.constructor.Type.Inline) |
| return styleDeclaration; |
| } |
| InspectorTest.fail("No declaration found."); |
| resolve(); |
| }; |
| |
| let getProperty = (propertyName) => { |
| let styleDeclaration = getInlineStyleDeclaration(); |
| for (let property of styleDeclaration.properties) { |
| if (property.name === propertyName) |
| return property; |
| } |
| InspectorTest.fail("No property found."); |
| resolve(); |
| }; |
| |
| let styleDeclaration = getInlineStyleDeclaration(); |
| |
| styleDeclaration.awaitEvent(WI.CSSStyleDeclaration.Event.PropertiesChanged).then((event) => { |
| InspectorTest.expectThat(!styleDeclaration.locked, `Style declaration is unlocked.`); |
| 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.`); |
| resolve(); |
| }); |
| |
| styleDeclaration.locked = true; |
| // WI.CSSStyleDeclaration.Event.PropertiesChanged event should not fire when the style declaration is locked. |
| InspectorTest.evaluateInPage(`makeNarrow()`); |
| |
| styleDeclaration.locked = false; |
| InspectorTest.evaluateInPage(`makeWide()`); |
| } |
| }); |
| |
| 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; |
| } |
| InspectorTest.fail("No declaration found."); |
| resolve(); |
| }; |
| |
| let getProperty = (propertyName) => { |
| let styleDeclaration = getInlineStyleDeclaration(); |
| for (let property of styleDeclaration.enabledProperties) { |
| if (property.name === propertyName) |
| return property; |
| } |
| InspectorTest.fail("No property found."); |
| resolve(); |
| }; |
| |
| let styleDeclaration = getInlineStyleDeclaration(); |
| |
| WI.CSSStyleDeclaration.awaitEvent(WI.CSSStyleDeclaration.Event.PropertiesChanged).then((event) => { |
| InspectorTest.expectThat(!styleDeclaration.locked, `Style declaration is unlocked.`); |
| InspectorTest.expectEqual(getProperty("width").rawValue, "128px", `"width" property value should update to "128px".`); |
| InspectorTest.expectEqual(styleDeclaration.text, `width: 128px;`, `Inline style declaration text should update when not locked.`); |
| resolve(); |
| }); |
| |
| styleDeclaration.locked = true; |
| getProperty("width").rawValue = "64px"; |
| InspectorTest.expectEqual(styleDeclaration.text, `width: 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, `width: 128px;`, `Style declaration text should update immediately.`); |
| |
| InspectorTest.evaluateInPage(`makeWide()`); |
| } |
| }); |
| |
| suite.addTestCase({ |
| name: "ModifyCSSProperty.ConsequentValueChanges", |
| test(resolve, reject) { |
| let getInlineStyleDeclaration = () => { |
| for (let styleDeclaration of nodeStyles.orderedStyles) { |
| if (styleDeclaration.type === styleDeclaration.constructor.Type.Inline) |
| return styleDeclaration; |
| } |
| InspectorTest.fail("No declaration found."); |
| resolve(); |
| }; |
| |
| let getProperty = (propertyName) => { |
| let styleDeclaration = getInlineStyleDeclaration(); |
| for (let property of styleDeclaration.properties) { |
| if (property.name === propertyName) |
| return property; |
| } |
| InspectorTest.fail("No property found."); |
| resolve(); |
| }; |
| |
| let styleDeclaration = getInlineStyleDeclaration(); |
| styleDeclaration.locked = false; |
| |
| for (let i = 0; i <= 20; ++i) |
| getProperty("width").rawValue = i + "px"; |
| |
| InspectorTest.expectEqual(styleDeclaration.text, `width: 20px;`, `Style declaration text should contain most recent value.`); |
| |
| resolve(); |
| } |
| }); |
| |
| suite.addTestCase({ |
| name: "ModifyCSSProperty.CommentOutAndUncommentPropertyWithNewlines", |
| test(resolve, reject) { |
| let getMatchedStyleDeclaration = () => { |
| for (let rule of nodeStyles.matchedRules) { |
| if (rule.selectorText === ".rule-c") |
| return rule.style; |
| } |
| InspectorTest.fail("No declaration found."); |
| resolve(); |
| }; |
| |
| let getProperty = (propertyName) => { |
| let styleDeclaration = getMatchedStyleDeclaration(); |
| for (let property of styleDeclaration.properties) { |
| if (property.name === propertyName) |
| return property; |
| } |
| InspectorTest.fail("No property found."); |
| resolve(); |
| }; |
| |
| let styleDeclaration = getMatchedStyleDeclaration(); |
| styleDeclaration.locked = true; |
| |
| InspectorTest.expectThat(!getProperty("padding-right").enabled, `Commented out property should be disabled.`); |
| |
| let disabled = false; |
| getProperty("padding-right").commentOut(disabled); |
| |
| let expectedStyleText = `\n /* padding-left: 2em; */\n padding-right: 0px;\n`; |
| InspectorTest.expectEqual(styleDeclaration.text, expectedStyleText, `Style declaration text should update immediately with uncommented property.`); |
| |
| InspectorTest.expectThat(getProperty("padding-right").enabled, `Uncommented property should be enabled.`); |
| |
| disabled = true; |
| getProperty("padding-right").commentOut(disabled); |
| |
| expectedStyleText = `\n /* padding-left: 2em; */\n /* padding-right: 0px; */\n`; |
| InspectorTest.expectEqual(styleDeclaration.text, expectedStyleText, `Style declaration text should update immediately with commented out property.`); |
| |
| InspectorTest.expectThat(!getProperty("padding-right").enabled, `Commented out property should be disabled.`); |
| |
| resolve(); |
| } |
| }); |
| |
| suite.addTestCase({ |
| name: "ModifyCSSProperty.CommentOutAndUncommentPropertyWithoutNewlines", |
| test(resolve, reject) { |
| let getMatchedStyleDeclaration = () => { |
| for (let rule of nodeStyles.matchedRules) { |
| if (rule.selectorText === ".rule-d") |
| return rule.style; |
| } |
| InspectorTest.fail("No declaration found."); |
| resolve(); |
| }; |
| |
| let getProperty = (propertyName) => { |
| let styleDeclaration = getMatchedStyleDeclaration(); |
| for (let property of styleDeclaration.properties) { |
| if (property.name === propertyName) |
| return property; |
| } |
| InspectorTest.fail("No property found."); |
| resolve(); |
| }; |
| |
| let styleDeclaration = getMatchedStyleDeclaration(); |
| styleDeclaration.locked = true; |
| |
| InspectorTest.expectThat(!getProperty("font-size").enabled, `Commented out property should be disabled.`); |
| |
| let disabled = false; |
| getProperty("font-size").commentOut(disabled); |
| |
| let expectedStyleText = `\n font-size: 13px;\n /* border: 2px solid brown; */\n`; |
| InspectorTest.expectEqual(styleDeclaration.text, expectedStyleText, `Style declaration text should update immediately with uncommented property.`); |
| |
| InspectorTest.expectThat(getProperty("font-size").enabled, `Uncommented property should be enabled.`); |
| InspectorTest.expectThat(!getProperty("border").enabled, `Commented out property should be disabled.`); |
| |
| disabled = false; |
| getProperty("border").commentOut(disabled); |
| |
| expectedStyleText = `\n font-size: 13px;\n border: 2px solid brown\n`; |
| InspectorTest.expectEqual(styleDeclaration.text, expectedStyleText, `Style declaration text should update immediately with commented out property.`); |
| |
| InspectorTest.expectThat(getProperty("border").enabled, `Uncommented property should be enabled.`); |
| |
| resolve(); |
| } |
| }); |
| |
| suite.addTestCase({ |
| name: "ModifyCSSProperty.ReplacePropertyName", |
| async test() { |
| let getMatchedStyleDeclaration = () => { |
| for (let rule of nodeStyles.matchedRules) { |
| if (rule.selectorText === ".rule-e") |
| return rule.style; |
| } |
| throw "No declaration found."; |
| }; |
| let getProperty = (propertyName) => { |
| let styleDeclaration = getMatchedStyleDeclaration(); |
| for (let property of styleDeclaration.properties) { |
| if (property.name === propertyName) |
| return property; |
| } |
| throw "No property found."; |
| }; |
| let styleDeclaration = getMatchedStyleDeclaration(); |
| |
| let cssProperty = getProperty("color"); |
| cssProperty.name = ""; |
| InspectorTest.expectEqual(styleDeclaration.text, "", "Style declaration text should be empty."); |
| |
| cssProperty.name = "border-color"; |
| InspectorTest.expectEqual(styleDeclaration.text, `\n border-color: darkseagreen;\n`, "Style declaration text should have new property name."); |
| } |
| }); |
| |
| function addTestCase({name, description, selector, authoredRulesHandler}) |
| { |
| suite.addTestCase({ |
| name, |
| description, |
| async test() { |
| let documentNode = await WI.domManager.requestDocument(); |
| let nodeId = await documentNode.querySelector(selector); |
| let domNode = WI.domManager.nodeForId(nodeId); |
| InspectorTest.assert(domNode, `Should find DOM Node for selector '#item'.`); |
| |
| let domNodeStyles = WI.cssManager.stylesForNode(domNode); |
| InspectorTest.assert(domNodeStyles, `Should find CSS Styles for DOM Node.`); |
| await domNodeStyles.refresh(); |
| |
| let flatInheritedRules = domNodeStyles.inheritedRules.flatMap((inheritedRuleInfo) => inheritedRuleInfo.matchedRules); |
| |
| let authoredRules = [...domNodeStyles.matchedRules, ...flatInheritedRules].filter((rule) => rule.type === WI.CSSStyleSheet.Type.Author); |
| await authoredRulesHandler(authoredRules, domNodeStyles); |
| }, |
| }); |
| } |
| |
| function findRuleStyleInRules(rules, {selector, nestingRootSelector}) { |
| for (let rule of rules) { |
| if (rule.selectorText !== selector) |
| continue; |
| |
| if (!nestingRootSelector) |
| return rule.style; |
| |
| for (let grouping of rule.groupings) { |
| if (grouping.type !== WI.CSSGrouping.Type.StyleRule) |
| continue; |
| |
| if (grouping.text !== nestingRootSelector) |
| continue; |
| |
| return rule.style; |
| } |
| } |
| InspectorTest.fail(`No rule found with selector "${selector}" nested under selector "${nestingRootSelector}".`); |
| } |
| |
| function getColorProperty(styleDeclaration) { |
| for (let property of styleDeclaration.properties) { |
| if (property.name === "color") |
| return property; |
| } |
| InspectorTest.fail("No color property found in style declaration."); |
| } |
| |
| addTestCase({ |
| name: "ModifyCSSProperty.EnsureNestedRulesEditingDoesNotTrampleInnerRules", |
| description: "", |
| selector: ".rule-f", |
| async authoredRulesHandler(authoredRules, domNodeStyles) { |
| let outerRuleStyle = findRuleStyleInRules(authoredRules, { selector: ".rule-f" }); |
| InspectorTest.expectEqual(outerRuleStyle.text, "\n color: red;\n\n @media(min-width: 0px) {\n &.explicit-nested-rule { \n color: blue;\n }\n\n color: green;\n }\n", "Outer style declaration text should contain the expected `color` property."); |
| let outerRuleStyleChangedPromise = domNodeStyles.awaitEvent(WI.DOMNodeStyles.Event.Refreshed); |
| getColorProperty(outerRuleStyle).rawValue = "magenta"; |
| await outerRuleStyleChangedPromise; |
| InspectorTest.expectEqual(outerRuleStyle.text, "\n color: magenta;\n\n @media(min-width: 0px) {\n &.explicit-nested-rule { \n color: blue;\n }\n\n color: green;\n }\n\n", "Outer style declaration text should contain the new `color` value."); |
| |
| let innerImplicitRuleStyle = findRuleStyleInRules(authoredRules, { selector: "&", nestingRootSelector: ".rule-f" }); |
| InspectorTest.expectEqual(innerImplicitRuleStyle.text, "\n &.explicit-nested-rule { \n color: blue;\n }\n\n color: green;\n ", "Inner implicit style declaration text should contain the expected `color` property."); |
| let innerImplicitRuleStyleChangedPromise = domNodeStyles.awaitEvent(WI.DOMNodeStyles.Event.Refreshed); |
| getColorProperty(innerImplicitRuleStyle).rawValue = "yellow"; |
| await innerImplicitRuleStyleChangedPromise; |
| InspectorTest.expectEqual(innerImplicitRuleStyle.text, "\n color: yellow;\n \n &.explicit-nested-rule { \n color: blue;\n }\n\n ", "Inner implicit style declaration text should contain the new `color` value."); |
| |
| let innerExplicitRuleStyle = findRuleStyleInRules(authoredRules, { selector: "&.explicit-nested-rule", nestingRootSelector: ".rule-f" }); |
| InspectorTest.expectEqual(innerExplicitRuleStyle.text, " \n color: blue;\n ", "Inner explicit style declaration text should contain the expected `color` property."); |
| let innerExplicitRuleStyleChangedPromise = domNodeStyles.awaitEvent(WI.DOMNodeStyles.Event.Refreshed); |
| getColorProperty(innerExplicitRuleStyle).rawValue = "cyan"; |
| await innerExplicitRuleStyleChangedPromise; |
| InspectorTest.expectEqual(innerExplicitRuleStyle.text, "\n color: cyan;\n \n ", "Inner explicit style declaration text should contain the new `color` value."); |
| }, |
| }) |
| |
| addTestCase({ |
| name: "ModifyCSSProperty.EnsureNestedRulesEditingDoesNotTrampleInnerRulesOriginalExcludesNewlines", |
| description: "", |
| selector: ".rule-g", |
| async authoredRulesHandler(authoredRules, domNodeStyles) { |
| let outerRuleStyle = findRuleStyleInRules(authoredRules, { selector: ".rule-g" }); |
| InspectorTest.expectEqual(outerRuleStyle.text, " color: red; @media(min-width: 0px) { &.explicit-nested-rule { color: blue; } color: green; } ", "Outer style declaration text should contain the expected `color` property."); |
| let outerRuleStyleChangedPromise = domNodeStyles.awaitEvent(WI.DOMNodeStyles.Event.Refreshed); |
| getColorProperty(outerRuleStyle).rawValue = "magenta"; |
| await outerRuleStyleChangedPromise; |
| InspectorTest.expectEqual(outerRuleStyle.text, "\n color: magenta;\n\n @media(min-width: 0px) { &.explicit-nested-rule { color: blue; } color: green; }\n\n", "Outer style declaration text should contain the new `color` value."); |
| |
| let innerImplicitRuleStyle = findRuleStyleInRules(authoredRules, { selector: "&", nestingRootSelector: ".rule-g" }); |
| InspectorTest.expectEqual(innerImplicitRuleStyle.text, " &.explicit-nested-rule { color: blue; } color: green; ", "Inner implicit style declaration text should contain the expected `color` property."); |
| let innerImplicitRuleStyleChangedPromise = domNodeStyles.awaitEvent(WI.DOMNodeStyles.Event.Refreshed); |
| getColorProperty(innerImplicitRuleStyle).rawValue = "yellow"; |
| await innerImplicitRuleStyleChangedPromise; |
| InspectorTest.expectEqual(innerImplicitRuleStyle.text, "\n color: yellow;\n \n &.explicit-nested-rule { color: blue; }\n\n ", "Inner implicit style declaration text should contain the new `color` value."); |
| |
| let innerExplicitRuleStyle = findRuleStyleInRules(authoredRules, { selector: "&.explicit-nested-rule", nestingRootSelector: ".rule-g" }); |
| InspectorTest.expectEqual(innerExplicitRuleStyle.text, " color: blue; ", "Inner explicit style declaration text should contain the expected `color` property."); |
| let innerExplicitRuleStyleChangedPromise = domNodeStyles.awaitEvent(WI.DOMNodeStyles.Event.Refreshed); |
| getColorProperty(innerExplicitRuleStyle).rawValue = "cyan"; |
| await innerExplicitRuleStyleChangedPromise; |
| InspectorTest.expectEqual(innerExplicitRuleStyle.text, "\n color: cyan;\n \n ", "Inner explicit style declaration text should contain the new `color` value."); |
| }, |
| }) |
| |
| WI.domManager.requestDocument((documentNode) => { |
| documentNode.querySelector("#x", (contentNodeId) => { |
| if (contentNodeId) { |
| let domNode = WI.domManager.nodeForId(contentNodeId); |
| nodeStyles = WI.cssManager.stylesForNode(domNode); |
| |
| let flatInheritedRules = nodeStyles.inheritedRules.flatMap((inheritedRuleInfo) => inheritedRuleInfo.matchedRules); |
| authoredRules = [...nodeStyles.matchedRules, ...flatInheritedRules].filter((rule) => rule.type === WI.CSSStyleSheet.Type.Author); |
| |
| 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> |
| <div id="x" class="test-node rule-a rule-b rule-c rule-d rule-e rule-f rule-g explicit-nested-rule" style="width: 100px"></div> |
| </body> |
| </html> |
