| <html> |
| <head> |
| <style> |
| .red div:first-child { |
| background-color: red; |
| } |
| |
| div[foo="bar"] + div { |
| background-color: blue; |
| } |
| |
| </style> |
| <script src="../../http/tests/inspector/inspector-test.js"></script> |
| <script src="../../http/tests/inspector/elements-test.js"></script> |
| <script> |
| function modifyStyleAttribute() |
| { |
| document.getElementById("container").setAttribute("style", "color: #daC0DE; border: 1px solid black;"); |
| } |
| |
| function modifyCSSText() |
| { |
| document.getElementById("container").style.cssText = "color: #C0FFEE"; |
| } |
| |
| function modifyParsedAttributes() |
| { |
| var style = document.getElementById("container").style; |
| style.border = "2px dashed green"; |
| style.borderWidth = "3px"; |
| } |
| |
| function modifyContainerClass() |
| { |
| document.getElementById("container").className = "red"; |
| } |
| |
| function modifyChildAttr() |
| { |
| document.getElementById("child").setAttribute("foo", "bar"); |
| } |
| |
| function test() |
| { |
| InspectorTest.runTestSuite([ |
| function testInit(next) |
| { |
| InspectorTest.selectNodeAndWaitForStyles("container", next); |
| }, |
| |
| function testSetStyleAttribute(next) |
| { |
| waitAndDumpAttributeAndStyles(next); |
| InspectorTest.evaluateInPage("modifyStyleAttribute()"); |
| }, |
| |
| function testSetStyleCSSText(next) |
| { |
| waitAndDumpAttributeAndStyles(next); |
| InspectorTest.evaluateInPage("modifyCSSText()"); |
| }, |
| |
| function testSetViaParsedAttributes(next) |
| { |
| waitAndDumpAttributeAndStyles(next); |
| InspectorTest.evaluateInPage("modifyParsedAttributes()"); |
| }, |
| |
| function testSetViaAncestorClass(next) |
| { |
| InspectorTest.selectNodeAndWaitForStyles("child", callback); |
| |
| function callback() |
| { |
| waitAndDumpAttributeAndStyles(next, "child"); |
| InspectorTest.evaluateInPage("modifyContainerClass()"); |
| } |
| }, |
| |
| function testSetViaSiblingAttr(next) |
| { |
| InspectorTest.selectNodeAndWaitForStyles("childSibling", callback); |
| |
| function callback() |
| { |
| waitAndDumpAttributeAndStyles(next, "childSibling"); |
| InspectorTest.evaluateInPage("modifyChildAttr()"); |
| } |
| } |
| ]); |
| |
| function waitAndDumpAttributeAndStyles(next, id) |
| { |
| id = id || "container"; |
| function callback() |
| { |
| dumpAttributeAndStyles(id); |
| next(); |
| } |
| InspectorTest.waitForStyles(id, callback); |
| } |
| |
| function dumpAttributeAndStyles(id) |
| { |
| var treeElement = findNodeTreeElement(id); |
| if (!treeElement) { |
| InspectorTest.addResult("'" + id + "' tree element not found"); |
| return; |
| } |
| InspectorTest.addResult(treeElement.listItemElement.textContent.replace(/\u200b/g, "")); |
| InspectorTest.dumpSelectedElementStyles(true); |
| } |
| |
| function findNodeTreeElement(id) |
| { |
| WebInspector.panels.elements.treeOutline._updateModifiedNodes(); |
| var expandedNode = InspectorTest.expandedNodeWithId(id); |
| if (!expandedNode) { |
| InspectorTest.addResult("'" + id + "' node not found"); |
| InspectorTest.completeTest(); |
| } |
| return WebInspector.panels.elements.treeOutline.findTreeElement(expandedNode); |
| } |
| } |
| </script> |
| </head> |
| |
| <body onload="runTest()"> |
| <p> |
| Tests that changes to an inline style and ancestor/sibling className from JavaScript are reflected in the Styles pane and Elements tree. |
| </p> |
| |
| <div id="container" style="font-weight:bold"><div id="child"></div><div id="childSibling"></div></div> |
| |
| </body> |
| </html> |
