| OLD | NEW |
| (Empty) |
| 1 <html> | |
| 2 <head> | |
| 3 <style> | |
| 4 .red div:first-child { | |
| 5 background-color: red; | |
| 6 } | |
| 7 | |
| 8 div[foo="bar"] + div { | |
| 9 background-color: blue; | |
| 10 } | |
| 11 | |
| 12 </style> | |
| 13 <script src="../../../http/tests/inspector/inspector-test.js"></script> | |
| 14 <script src="../../../http/tests/inspector/elements-test.js"></script> | |
| 15 <script> | |
| 16 function modifyStyleAttribute() | |
| 17 { | |
| 18 document.getElementById("container").setAttribute("style", "color: #daC0DE;
border: 1px solid black;"); | |
| 19 } | |
| 20 | |
| 21 function modifyCSSText() | |
| 22 { | |
| 23 document.getElementById("container").style.cssText = "color: #C0FFEE"; | |
| 24 } | |
| 25 | |
| 26 function modifyParsedAttributes() | |
| 27 { | |
| 28 var style = document.getElementById("container").style; | |
| 29 style.border = "2px dashed green"; | |
| 30 style.borderWidth = "3px"; | |
| 31 } | |
| 32 | |
| 33 function modifyContainerClass() | |
| 34 { | |
| 35 document.getElementById("container").className = "red"; | |
| 36 } | |
| 37 | |
| 38 function modifyChildAttr() | |
| 39 { | |
| 40 document.getElementById("child").setAttribute("foo", "bar"); | |
| 41 } | |
| 42 | |
| 43 function test() | |
| 44 { | |
| 45 InspectorTest.runTestSuite([ | |
| 46 function testInit(next) | |
| 47 { | |
| 48 InspectorTest.selectNodeAndWaitForStyles("container", next); | |
| 49 }, | |
| 50 | |
| 51 function testSetStyleAttribute(next) | |
| 52 { | |
| 53 waitAndDumpAttributeAndStyles(next); | |
| 54 InspectorTest.evaluateInPage("modifyStyleAttribute()"); | |
| 55 }, | |
| 56 | |
| 57 function testSetStyleCSSText(next) | |
| 58 { | |
| 59 waitAndDumpAttributeAndStyles(next); | |
| 60 InspectorTest.evaluateInPage("modifyCSSText()"); | |
| 61 }, | |
| 62 | |
| 63 function testSetViaParsedAttributes(next) | |
| 64 { | |
| 65 waitAndDumpAttributeAndStyles(next); | |
| 66 InspectorTest.evaluateInPage("modifyParsedAttributes()"); | |
| 67 }, | |
| 68 | |
| 69 function testSetViaAncestorClass(next) | |
| 70 { | |
| 71 InspectorTest.selectNodeAndWaitForStyles("child", callback); | |
| 72 | |
| 73 function callback() | |
| 74 { | |
| 75 waitAndDumpAttributeAndStyles(next, "child"); | |
| 76 InspectorTest.evaluateInPage("modifyContainerClass()"); | |
| 77 } | |
| 78 }, | |
| 79 | |
| 80 function testSetViaSiblingAttr(next) | |
| 81 { | |
| 82 InspectorTest.selectNodeAndWaitForStyles("childSibling", callback); | |
| 83 | |
| 84 function callback() | |
| 85 { | |
| 86 waitAndDumpAttributeAndStyles(next, "childSibling"); | |
| 87 InspectorTest.evaluateInPage("modifyChildAttr()"); | |
| 88 } | |
| 89 } | |
| 90 ]); | |
| 91 | |
| 92 function waitAndDumpAttributeAndStyles(next, id) | |
| 93 { | |
| 94 id = id || "container"; | |
| 95 function callback() | |
| 96 { | |
| 97 dumpAttributeAndStyles(id); | |
| 98 next(); | |
| 99 } | |
| 100 InspectorTest.waitForStyles(id, callback); | |
| 101 } | |
| 102 | |
| 103 function dumpAttributeAndStyles(id) | |
| 104 { | |
| 105 var treeElement = findNodeTreeElement(id); | |
| 106 if (!treeElement) { | |
| 107 InspectorTest.addResult("'" + id + "' tree element not found"); | |
| 108 return; | |
| 109 } | |
| 110 InspectorTest.addResult(treeElement.listItemElement.textContent.replace(
/\u200b/g, "")); | |
| 111 InspectorTest.dumpSelectedElementStyles(true); | |
| 112 } | |
| 113 | |
| 114 function findNodeTreeElement(id) | |
| 115 { | |
| 116 InspectorTest.firstElementsTreeOutline().runPendingUpdates(); | |
| 117 var expandedNode = InspectorTest.expandedNodeWithId(id); | |
| 118 if (!expandedNode) { | |
| 119 InspectorTest.addResult("'" + id + "' node not found"); | |
| 120 InspectorTest.completeTest(); | |
| 121 } | |
| 122 return InspectorTest.firstElementsTreeOutline().findTreeElement(expanded
Node); | |
| 123 } | |
| 124 } | |
| 125 </script> | |
| 126 </head> | |
| 127 | |
| 128 <body onload="runTest()"> | |
| 129 <p> | |
| 130 Tests that changes to an inline style and ancestor/sibling className from JavaSc
ript are reflected in the Styles pane and Elements tree. | |
| 131 </p> | |
| 132 | |
| 133 <div id="container" style="font-weight:bold"><div id="child"></div><div id="chil
dSibling"></div></div> | |
| 134 | |
| 135 </body> | |
| 136 </html> | |
| OLD | NEW |