| OLD | NEW |
|---|
| 1 <html> | 1 <html> |
| 2 <head> | 2 <head> |
| 3 <style> | 3 <style> |
| 4 body { | 4 body { |
| 5 background-color: rgb(100, 0, 0); | 5 background-color: rgb(100, 0, 0); |
| 6 font-family: Arial; | 6 font-family: Arial; |
| 7 --a: red; |
| 7 } | 8 } |
| 8 | 9 |
| 9 div { | 10 div { |
| 10 text-decoration: underline; | 11 text-decoration: underline; |
| 11 } | 12 } |
| 12 | 13 |
| 13 #id1 { | 14 #id1 { |
| 14 background-color: green; | 15 background-color: green; |
| 15 font-family: Times; | 16 font-family: Times; |
| 17 --b: 44px; |
| 16 } | 18 } |
| 17 | 19 |
| 18 #id1 { | 20 #id1 { |
| 19 background-color: black; | 21 background-color: black; |
| 20 font-family: Courier; | 22 font-family: Courier; |
| 21 } | 23 } |
| 22 | 24 |
| 23 #id1 { | 25 #id1 { |
| 24 background: gray; | 26 background: gray; |
| 25 } | 27 } |
| 26 | 28 |
| 27 #id2 { | 29 #id2 { |
| 28 background-color: blue; | 30 background-color: blue; |
| 29 font-family: Courier; | 31 font-family: Courier; |
| 30 text-decoration: invalidvalue; | 32 text-decoration: invalidvalue; |
| 33 --a: green; |
| 31 } | 34 } |
| 32 | 35 |
| 33 </style> | 36 </style> |
| 34 <script src="../../../http/tests/inspector/inspector-test.js"></script> | 37 <script src="../../../http/tests/inspector/inspector-test.js"></script> |
| 35 <script src="../../../http/tests/inspector/elements-test.js"></script> | 38 <script src="../../../http/tests/inspector/elements-test.js"></script> |
| 36 <script> | 39 <script> |
| 37 | 40 |
| 38 function test() | 41 function test() |
| 39 { | 42 { |
| 40 InspectorTest.selectNodeAndWaitForStylesWithComputed("id1", step1); | 43 InspectorTest.selectNodeAndWaitForStylesWithComputed("id1", step1); |
| 41 | 44 function step1(node) |
| 42 function step1() | |
| 43 { | 45 { |
| 44 InspectorTest.addResult("==== Computed style for ID1 ===="); | 46 InspectorTest.addResult("==== Computed style for ID1 ===="); |
| 45 InspectorTest.dumpSelectedElementStyles(false, true); | 47 InspectorTest.dumpSelectedElementStyles(false, true); |
| 46 InspectorTest.selectNodeAndWaitForStylesWithComputed("id2", step2); | 48 InspectorTest.cssModel.computedStylePromise(node.id).then( |
| 49 function(style) { |
| 50 InspectorTest.addResult("value of --a: " + style.get("--a")); |
| 51 InspectorTest.selectNodeAndWaitForStylesWithComputed("id2", step
2); |
| 52 }); |
| 47 } | 53 } |
| 48 | 54 |
| 49 function step2() | 55 function step2(node) |
| 50 { | 56 { |
| 51 InspectorTest.addResult("==== Computed style for ID2 ===="); | 57 InspectorTest.addResult("==== Computed style for ID2 ===="); |
| 52 InspectorTest.dumpSelectedElementStyles(false, true); | 58 InspectorTest.dumpSelectedElementStyles(false, true); |
| 53 InspectorTest.selectNodeAndWaitForStylesWithComputed("id3", step3); | 59 InspectorTest.cssModel.computedStylePromise(node.id).then( |
| 54 } | 60 function(style) { |
| 55 | 61 InspectorTest.addResult("value of --b: " + style.get("--b")); |
| 56 function step3() | 62 InspectorTest.completeTest(); |
| 57 { | 63 }); |
| 58 InspectorTest.addResult("==== Style for ID3 ===="); | |
| 59 // The button[hidden] style specifies "display: none", which should not
be /-- overloaded --/. | |
| 60 InspectorTest.dumpSelectedElementStyles(true, true); | |
| 61 InspectorTest.completeTest(); | |
| 62 } | 64 } |
| 63 | 65 |
| 64 } | 66 } |
| 65 </script> | 67 </script> |
| 66 </head> | 68 </head> |
| 67 | 69 |
| 68 <body onload="runTest()"> | 70 <body onload="runTest()"> |
| 69 <p> | 71 <p> |
| 70 Tests that computed styles expand and allow tracing to style rules. | 72 Tests that computed styles expand and allow tracing to style rules. |
| 71 </p> | 73 </p> |
| 72 | 74 |
| 73 <div id="id1"> | 75 <div id="id1"> |
| 74 <div id="id2"> | 76 <div id="id2"> |
| 75 </div> | 77 </div> |
| 76 <button id="id3" hidden /> | |
| 77 </div> | 78 </div> |
| 78 | 79 |
| 79 </body> | 80 </body> |
| 80 </html> | 81 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1521323002:
Show custom properties in the computed style pane of the inspector. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master