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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side 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 unified diff | 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 »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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 #outer {--red-color: red}
7 #middle {--blue-color: blue}
8 </style>
5 <script> 9 <script>
6 10
7 function test() 11 function test()
8 { 12 {
9 var namePrompt = new Elements.StylesSidebarPane.CSSPropertyPrompt(SDK.cssMet adata().allProperties(), null, true); 13 var node = InspectorTest.nodeWithId('inner', node => InspectorTest.cssModel. cachedMatchedCascadeForNode(node).then(step1));
10 var valuePrompt = valuePromptFor("color"); 14 function step1(matchedStyles) {
15 var namePrompt = new Elements.StylesSidebarPane.CSSPropertyPrompt(SDK.cs sMetadata().allProperties(), matchedStyles.cssVariables(), null, true);
16 var valuePrompt = valuePromptFor("color");
17 function valuePromptFor(name)
18 {
19 return new Elements.StylesSidebarPane.CSSPropertyPrompt(SDK.cssMetad ata().propertyValues(name), matchedStyles.cssVariables(), null, false);
20 }
21 InspectorTest.runTestSuite([
22 function testEmptyName(next)
23 {
24 testAgainstGolden(namePrompt, "", false, [], ["width"], next);
25 },
11 26
12 function valuePromptFor(name) 27 function testEmptyNameForce(next)
13 { 28 {
14 return new Elements.StylesSidebarPane.CSSPropertyPrompt(SDK.cssMetadata( ).propertyValues(name), null, false); 29 testAgainstGolden(namePrompt, "", true, ["width"], [], next);
30 },
31
32 function testSingleCharName(next)
33 {
34 testAgainstGolden(namePrompt, "w", false, ["width"], [], next);
35 },
36
37 function testSubstringName(next)
38 {
39 testAgainstGolden(namePrompt, "size", false, ["font-size", "back ground-size", "resize"], ["font-align"], next);
40 },
41
42 function testEmptyValue(next)
43 {
44 testAgainstGolden(valuePrompt, "", false, ["aliceblue", "red", " inherit"], [], next);
45 },
46
47 function testImportantDeclarationDoNotToggleOnExclamationMark(next)
48 {
49 testAgainstGolden(valuePrompt, "red !", false, [], ["!important" ], next);
50 },
51
52 function testImportantDeclaration(next)
53 {
54 testAgainstGolden(valuePrompt, "red !i", false, ["!important"], [], next);
55 },
56
57 function testValueR(next)
58 {
59 testAgainstGolden(valuePrompt, "R", false, ["RED", "ROSYBROWN"], ["aliceblue", "inherit"], next);
60 },
61
62 function testValueWithParenthesis(next)
63 {
64 testAgainstGolden(valuePrompt, "saturate(0%)", false, [], ["inhe rit"], next);
65 },
66
67 function testValuePrefixed(next)
68 {
69 testAgainstGolden(valuePromptFor("-webkit-transform"), "tr", fal se, ["translate", "translateY", "translate3d"], ["initial", "inherit"], next);
70 },
71
72 function testValueUnprefixed(next)
73 {
74 testAgainstGolden(valuePromptFor("transform"), "tr", false, ["tr anslate", "translateY", "translate3d"], ["initial", "inherit"], next);
75 },
76
77 function testValueSubstring(next)
78 {
79 testAgainstGolden(valuePromptFor("color"), "blue", false, ["blue ", "darkblue", "lightblue"], ["darkred", "yellow", "initial", "inherit"], next);
80 },
81
82 function testNameVariables(next)
83 {
84 testAgainstGolden(namePrompt, "", true, ["--red-color", "--blue- color"], [], next);
85 },
86
87 function testValueVariables(next)
88 {
89 testAgainstGolden(valuePromptFor("color"), "var(", true, ["--red -color)", "--blue-color)"], ["width"], next);
90 }
91 ]);
15 } 92 }
16 93
17 InspectorTest.runTestSuite([
18 function testEmptyName(next)
19 {
20 testAgainstGolden(namePrompt, "", false, [], ["width"], next);
21 },
22
23 function testEmptyNameForce(next)
24 {
25 testAgainstGolden(namePrompt, "", true, ["width"], [], next);
26 },
27
28 function testSingleCharName(next)
29 {
30 testAgainstGolden(namePrompt, "w", false, ["width"], [], next);
31 },
32
33 function testSubstringName(next)
34 {
35 testAgainstGolden(namePrompt, "size", false, ["font-size", "backgrou nd-size", "resize"], ["font-align"], next);
36 },
37
38 function testEmptyValue(next)
39 {
40 testAgainstGolden(valuePrompt, "", false, ["aliceblue", "red", "inhe rit"], [], next);
41 },
42
43 function testImportantDeclarationDoNotToggleOnExclamationMark(next)
44 {
45 testAgainstGolden(valuePrompt, "red !", false, [], ["!important"], n ext);
46 },
47
48 function testImportantDeclaration(next)
49 {
50 testAgainstGolden(valuePrompt, "red !i", false, ["!important"], [], next);
51 },
52
53 function testValueR(next)
54 {
55 testAgainstGolden(valuePrompt, "R", false, ["RED", "ROSYBROWN"], ["a liceblue", "inherit"], next);
56 },
57
58 function testValueWithParenthesis(next)
59 {
60 testAgainstGolden(valuePrompt, "saturate(0%)", false, [], ["inherit" ], next);
61 },
62
63 function testValuePrefixed(next)
64 {
65 testAgainstGolden(valuePromptFor("-webkit-transform"), "tr", false, ["translate", "translateY", "translate3d"], ["initial", "inherit"], next);
66 },
67
68 function testValueUnprefixed(next)
69 {
70 testAgainstGolden(valuePromptFor("transform"), "tr", false, ["transl ate", "translateY", "translate3d"], ["initial", "inherit"], next);
71 },
72
73 function testValueSubstring(next)
74 {
75 testAgainstGolden(valuePromptFor("color"), "blue", false, ["blue", " darkblue", "lightblue"], ["darkred", "yellow", "initial", "inherit"], next);
76 }
77 ]);
78
79 function testAgainstGolden(prompt, inputText, force, golden, antiGolden, cal lback) 94 function testAgainstGolden(prompt, inputText, force, golden, antiGolden, cal lback)
80 { 95 {
81 var proxyElement = document.createElement("div"); 96 var proxyElement = document.createElement("div");
82 document.body.appendChild(proxyElement); 97 document.body.appendChild(proxyElement);
83 proxyElement.style = "webkit-user-select: text; -webkit-user-modify: rea d-write-plaintext-only"; 98 proxyElement.style = "webkit-user-select: text; -webkit-user-modify: rea d-write-plaintext-only";
84 proxyElement.textContent = inputText; 99 proxyElement.textContent = inputText;
85 var selectionRange = document.createRange(); 100 var selectionRange = document.createRange();
86 var textNode = proxyElement.childNodes[0]; 101 var textNode = proxyElement.childNodes[0];
87 if (textNode) { 102 if (textNode) {
88 selectionRange.setStart(textNode, inputText.length); 103 selectionRange.setStart(textNode, inputText.length);
(...skipping 22 matching lines...) Expand all
111 } 126 }
112 } 127 }
113 } 128 }
114 </script> 129 </script>
115 </head> 130 </head>
116 131
117 <body onload="runTest()"> 132 <body onload="runTest()">
118 <p> 133 <p>
119 Tests that autocompletions are computed correctly when editing the Styles pane. 134 Tests that autocompletions are computed correctly when editing the Styles pane.
120 </p> 135 </p>
136 <div id="outer">
137 <div id="middle">
138 <div id="inner"></div>
139 </div>
140 </div>
121 </body> 141 </body>
122 </html> 142 </html>
OLDNEW
« 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