| OLD | NEW |
|---|
| 1 <html> | 1 <html> |
| 2 <head> | 2 <head> |
| 3 <script src="../../../http/tests/inspector/inspector-test.js"></script> | 3 <script src="../../../http/tests/inspector/inspector-test.js"></script> |
| 4 <script src="../../../http/tests/inspector/elements-test.js"></script> | 4 <script src="../../../http/tests/inspector/elements-test.js"></script> |
| 5 <style> |
| 6 body { |
| 7 --red-color: red; |
| 8 --blue-color: blue; |
| 9 } |
| 10 </style> |
| 5 <script> | 11 <script> |
| 6 | 12 |
| 7 function test() | 13 function test() |
| 8 { | 14 { |
| 9 var namePrompt = new Elements.StylesSidebarPane.CSSPropertyPrompt(SDK.cssMet
adata().allProperties(), null, true); | 15 var namePrompt = new Elements.StylesSidebarPane.CSSPropertyPrompt(SDK.cssMet
adata().allProperties(), null, true); |
| 10 var valuePrompt = valuePromptFor("color"); | 16 var valuePrompt = valuePromptFor("color"); |
| 11 | 17 |
| 12 function valuePromptFor(name) | 18 function valuePromptFor(name) |
| 13 { | 19 { |
| 14 return new Elements.StylesSidebarPane.CSSPropertyPrompt(SDK.cssMetadata(
).propertyValues(name), null, false); | 20 return new Elements.StylesSidebarPane.CSSPropertyPrompt(SDK.cssMetadata(
).propertyValues(name), null, false); |
| (...skipping 51 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 66 }, | 72 }, |
| 67 | 73 |
| 68 function testValueUnprefixed(next) | 74 function testValueUnprefixed(next) |
| 69 { | 75 { |
| 70 testAgainstGolden(valuePromptFor("transform"), "tr", false, ["transl
ate", "translateY", "translate3d"], ["initial", "inherit"], next); | 76 testAgainstGolden(valuePromptFor("transform"), "tr", false, ["transl
ate", "translateY", "translate3d"], ["initial", "inherit"], next); |
| 71 }, | 77 }, |
| 72 | 78 |
| 73 function testValueSubstring(next) | 79 function testValueSubstring(next) |
| 74 { | 80 { |
| 75 testAgainstGolden(valuePromptFor("color"), "blue", false, ["blue", "
darkblue", "lightblue"], ["darkred", "yellow", "initial", "inherit"], next); | 81 testAgainstGolden(valuePromptFor("color"), "blue", false, ["blue", "
darkblue", "lightblue"], ["darkred", "yellow", "initial", "inherit"], next); |
| 82 }, |
| 83 |
| 84 function testNameVariables(next) |
| 85 { |
| 86 testAgainstGolden(namePrompt, "", true, ["--red-color", "--blue-colo
r"], [], next); |
| 87 }, |
| 88 |
| 89 function testValueVariables(next) |
| 90 { |
| 91 testAgainstGolden(valuePromptFor("color"), "var(", true, ["--red-col
or)", "--blue-color)"], ["width"], next); |
| 76 } | 92 } |
| 77 ]); | 93 ]); |
| 78 | 94 |
| 79 function testAgainstGolden(prompt, inputText, force, golden, antiGolden, cal
lback) | 95 function testAgainstGolden(prompt, inputText, force, golden, antiGolden, cal
lback) |
| 80 { | 96 { |
| 81 var proxyElement = document.createElement("div"); | 97 var proxyElement = document.createElement("div"); |
| 82 document.body.appendChild(proxyElement); | 98 document.body.appendChild(proxyElement); |
| 83 proxyElement.style = "webkit-user-select: text; -webkit-user-modify: rea
d-write-plaintext-only"; | 99 proxyElement.style = "webkit-user-select: text; -webkit-user-modify: rea
d-write-plaintext-only"; |
| 84 proxyElement.textContent = inputText; | 100 proxyElement.textContent = inputText; |
| 85 var selectionRange = document.createRange(); | 101 var selectionRange = document.createRange(); |
| (...skipping 27 matching lines...) Expand all Loading... |
| 113 } | 129 } |
| 114 </script> | 130 </script> |
| 115 </head> | 131 </head> |
| 116 | 132 |
| 117 <body onload="runTest()"> | 133 <body onload="runTest()"> |
| 118 <p> | 134 <p> |
| 119 Tests that autocompletions are computed correctly when editing the Styles pane. | 135 Tests that autocompletions are computed correctly when editing the Styles pane. |
| 120 </p> | 136 </p> |
| 121 </body> | 137 </body> |
| 122 </html> | 138 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2637593002:
DevTools: Autocomplete CSS variables in StylesSidebar (Closed)
