| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../http/tests/inspector/resources/inspector-test.js"></script> |
| <script> |
| function test() { |
| let nodeStyles = null; |
| |
| WI.DOMNodeStyles.addEventListener(WI.DOMNodeStyles.Event.NeedsRefresh, function(event) { |
| // Normally, this would get called from views if the styles sidebar is visible. |
| // This doesn't work in tests. |
| event.target.refresh(); |
| }); |
| |
| let suite = InspectorTest.createAsyncSuite("ModifyInlineStyle"); |
| |
| suite.addTestCase({ |
| name: "ModifyInlineStyle.AddPropertyAndEdit", |
| 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 style = getInlineStyleDeclaration(); |
| |
| const fontPropertyIndex = 0; |
| let fontProperty = style.newBlankProperty(fontPropertyIndex); |
| fontProperty.name = "font"; |
| fontProperty.rawValue = "12px normal sans-serif!important"; |
| |
| let colorProperty = null; |
| |
| let cssPropertyChanged = (event) => { |
| if (event.target.ownerStyle && event.target.ownerStyle.type === WI.CSSStyleDeclaration.Type.Computed) |
| return; |
| |
| if (!event.target.text) |
| return; |
| |
| InspectorTest.log(`CSSProperty changed to "${event.target.text}".`); |
| InspectorTest.log(style.text + "\n"); |
| }; |
| |
| WI.CSSProperty.addEventListener(WI.CSSProperty.Event.Changed, cssPropertyChanged); |
| |
| fontProperty.awaitEvent(WI.CSSProperty.Event.Changed).then((event) => { |
| const colorPropertyIndex = 1; |
| colorProperty = style.newBlankProperty(colorPropertyIndex); |
| let promise = colorProperty.awaitEvent(WI.CSSProperty.Event.Changed); |
| colorProperty.name = "color"; |
| colorProperty.rawValue = "red"; |
| return promise; |
| }).then(() => { |
| let promise = fontProperty.awaitEvent(WI.CSSProperty.Event.Changed); |
| fontProperty.rawValue = "12px sans-serif"; |
| return promise; |
| }).then(() => { |
| let promise = colorProperty.awaitEvent(WI.CSSProperty.Event.Changed); |
| colorProperty.rawValue = "invalid_c010r"; |
| return promise; |
| }).then(() => { |
| WI.CSSProperty.removeEventListener(WI.CSSProperty.Event.Changed, cssPropertyChanged); |
| resolve(); |
| return true; |
| }); |
| } |
| }); |
| |
| WI.domManager.requestDocument((documentNode) => { |
| documentNode.querySelector("#x", (contentNodeId) => { |
| if (contentNodeId) { |
| let domNode = WI.domManager.nodeForId(contentNodeId); |
| nodeStyles = WI.cssManager.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 adding and editing CSS properties of inline styles works.</p> |
| <div id="x"></div> |
| </body> |
| </html> |
