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 |