Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(270)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/inspector/elements/styles-3/style-autocomplete.html

Issue 2637593002: DevTools: Autocomplete CSS variables in StylesSidebar (Closed)
Patch Set: merge Created 3 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « third_party/WebKit/LayoutTests/inspector/elements/styles-1/case-sensitive-suggestions.html ('k') | third_party/WebKit/LayoutTests/inspector/elements/styles-3/style-autocomplete-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/LayoutTests/inspector/elements/styles-3/style-autocomplete.html
diff --git a/third_party/WebKit/LayoutTests/inspector/elements/styles-3/style-autocomplete.html b/third_party/WebKit/LayoutTests/inspector/elements/styles-3/style-autocomplete.html
index e5873d52b30fc9216d1aeac67afc390831921b02..3cfe3f5a7275bf405da8e0cb5fb5d81e2743646f 100644
--- a/third_party/WebKit/LayoutTests/inspector/elements/styles-3/style-autocomplete.html
+++ b/third_party/WebKit/LayoutTests/inspector/elements/styles-3/style-autocomplete.html
@@ -2,79 +2,94 @@
<head>
<script src="../../../http/tests/inspector/inspector-test.js"></script>
<script src="../../../http/tests/inspector/elements-test.js"></script>
+<style>
+#outer {--red-color: red}
+#middle {--blue-color: blue}
+</style>
<script>
function test()
{
- var namePrompt = new Elements.StylesSidebarPane.CSSPropertyPrompt(SDK.cssMetadata().allProperties(), null, true);
- var valuePrompt = valuePromptFor("color");
-
- function valuePromptFor(name)
- {
- return new Elements.StylesSidebarPane.CSSPropertyPrompt(SDK.cssMetadata().propertyValues(name), null, false);
- }
-
- InspectorTest.runTestSuite([
- function testEmptyName(next)
- {
- testAgainstGolden(namePrompt, "", false, [], ["width"], next);
- },
-
- function testEmptyNameForce(next)
- {
- testAgainstGolden(namePrompt, "", true, ["width"], [], next);
- },
-
- function testSingleCharName(next)
- {
- testAgainstGolden(namePrompt, "w", false, ["width"], [], next);
- },
-
- function testSubstringName(next)
- {
- testAgainstGolden(namePrompt, "size", false, ["font-size", "background-size", "resize"], ["font-align"], next);
- },
-
- function testEmptyValue(next)
- {
- testAgainstGolden(valuePrompt, "", false, ["aliceblue", "red", "inherit"], [], next);
- },
-
- function testImportantDeclarationDoNotToggleOnExclamationMark(next)
+ var node = InspectorTest.nodeWithId('inner', node => InspectorTest.cssModel.cachedMatchedCascadeForNode(node).then(step1));
+ function step1(matchedStyles) {
+ var namePrompt = new Elements.StylesSidebarPane.CSSPropertyPrompt(SDK.cssMetadata().allProperties(), matchedStyles.cssVariables(), null, true);
+ var valuePrompt = valuePromptFor("color");
+ function valuePromptFor(name)
{
- testAgainstGolden(valuePrompt, "red !", false, [], ["!important"], next);
- },
-
- function testImportantDeclaration(next)
- {
- testAgainstGolden(valuePrompt, "red !i", false, ["!important"], [], next);
- },
-
- function testValueR(next)
- {
- testAgainstGolden(valuePrompt, "R", false, ["RED", "ROSYBROWN"], ["aliceblue", "inherit"], next);
- },
-
- function testValueWithParenthesis(next)
- {
- testAgainstGolden(valuePrompt, "saturate(0%)", false, [], ["inherit"], next);
- },
-
- function testValuePrefixed(next)
- {
- testAgainstGolden(valuePromptFor("-webkit-transform"), "tr", false, ["translate", "translateY", "translate3d"], ["initial", "inherit"], next);
- },
-
- function testValueUnprefixed(next)
- {
- testAgainstGolden(valuePromptFor("transform"), "tr", false, ["translate", "translateY", "translate3d"], ["initial", "inherit"], next);
- },
-
- function testValueSubstring(next)
- {
- testAgainstGolden(valuePromptFor("color"), "blue", false, ["blue", "darkblue", "lightblue"], ["darkred", "yellow", "initial", "inherit"], next);
+ return new Elements.StylesSidebarPane.CSSPropertyPrompt(SDK.cssMetadata().propertyValues(name), matchedStyles.cssVariables(), null, false);
}
- ]);
+ InspectorTest.runTestSuite([
+ function testEmptyName(next)
+ {
+ testAgainstGolden(namePrompt, "", false, [], ["width"], next);
+ },
+
+ function testEmptyNameForce(next)
+ {
+ testAgainstGolden(namePrompt, "", true, ["width"], [], next);
+ },
+
+ function testSingleCharName(next)
+ {
+ testAgainstGolden(namePrompt, "w", false, ["width"], [], next);
+ },
+
+ function testSubstringName(next)
+ {
+ testAgainstGolden(namePrompt, "size", false, ["font-size", "background-size", "resize"], ["font-align"], next);
+ },
+
+ function testEmptyValue(next)
+ {
+ testAgainstGolden(valuePrompt, "", false, ["aliceblue", "red", "inherit"], [], next);
+ },
+
+ function testImportantDeclarationDoNotToggleOnExclamationMark(next)
+ {
+ testAgainstGolden(valuePrompt, "red !", false, [], ["!important"], next);
+ },
+
+ function testImportantDeclaration(next)
+ {
+ testAgainstGolden(valuePrompt, "red !i", false, ["!important"], [], next);
+ },
+
+ function testValueR(next)
+ {
+ testAgainstGolden(valuePrompt, "R", false, ["RED", "ROSYBROWN"], ["aliceblue", "inherit"], next);
+ },
+
+ function testValueWithParenthesis(next)
+ {
+ testAgainstGolden(valuePrompt, "saturate(0%)", false, [], ["inherit"], next);
+ },
+
+ function testValuePrefixed(next)
+ {
+ testAgainstGolden(valuePromptFor("-webkit-transform"), "tr", false, ["translate", "translateY", "translate3d"], ["initial", "inherit"], next);
+ },
+
+ function testValueUnprefixed(next)
+ {
+ testAgainstGolden(valuePromptFor("transform"), "tr", false, ["translate", "translateY", "translate3d"], ["initial", "inherit"], next);
+ },
+
+ function testValueSubstring(next)
+ {
+ testAgainstGolden(valuePromptFor("color"), "blue", false, ["blue", "darkblue", "lightblue"], ["darkred", "yellow", "initial", "inherit"], next);
+ },
+
+ function testNameVariables(next)
+ {
+ testAgainstGolden(namePrompt, "", true, ["--red-color", "--blue-color"], [], next);
+ },
+
+ function testValueVariables(next)
+ {
+ testAgainstGolden(valuePromptFor("color"), "var(", true, ["--red-color)", "--blue-color)"], ["width"], next);
+ }
+ ]);
+ }
function testAgainstGolden(prompt, inputText, force, golden, antiGolden, callback)
{
@@ -118,5 +133,10 @@ function test()
<p>
Tests that autocompletions are computed correctly when editing the Styles pane.
</p>
+<div id="outer">
+ <div id="middle">
+ <div id="inner"></div>
+ </div>
+</div>
</body>
</html>
« no previous file with comments | « third_party/WebKit/LayoutTests/inspector/elements/styles-1/case-sensitive-suggestions.html ('k') | third_party/WebKit/LayoutTests/inspector/elements/styles-3/style-autocomplete-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698