scripts/CodeMirror/mode/css/test.js (view raw)
1// CodeMirror, copyright (c) by Marijn Haverbeke and others
2// Distributed under an MIT license: https://codemirror.net/LICENSE
3
4(function() {
5 var mode = CodeMirror.getMode({indentUnit: 2}, "css");
6 function MT(name) { test.mode(name, mode, Array.prototype.slice.call(arguments, 1)); }
7
8 // Error, because "foobarhello" is neither a known type or property, but
9 // property was expected (after "and"), and it should be in parentheses.
10 MT("atMediaUnknownType",
11 "[def @media] [attribute screen] [keyword and] [error foobarhello] { }");
12
13 // Soft error, because "foobarhello" is not a known property or type.
14 MT("atMediaUnknownProperty",
15 "[def @media] [attribute screen] [keyword and] ([error foobarhello]) { }");
16
17 // Make sure nesting works with media queries
18 MT("atMediaMaxWidthNested",
19 "[def @media] [attribute screen] [keyword and] ([property max-width]: [number 25px]) { [tag foo] { } }");
20
21 MT("atMediaFeatureValueKeyword",
22 "[def @media] ([property orientation]: [keyword landscape]) { }");
23
24 MT("atMediaUnknownFeatureValueKeyword",
25 "[def @media] ([property orientation]: [error upsidedown]) { }");
26
27 MT("atMediaUppercase",
28 "[def @MEDIA] ([property orienTAtion]: [keyword landScape]) { }");
29
30 MT("tagSelector",
31 "[tag foo] { }");
32
33 MT("classSelector",
34 "[qualifier .foo-bar_hello] { }");
35
36 MT("idSelector",
37 "[builtin #foo] { [error #foo] }");
38
39 MT("tagSelectorUnclosed",
40 "[tag foo] { [property margin]: [number 0] } [tag bar] { }");
41
42 MT("tagStringNoQuotes",
43 "[tag foo] { [property font-family]: [variable hello] [variable world]; }");
44
45 MT("tagStringDouble",
46 "[tag foo] { [property font-family]: [string \"hello world\"]; }");
47
48 MT("tagStringSingle",
49 "[tag foo] { [property font-family]: [string 'hello world']; }");
50
51 MT("tagColorKeyword",
52 "[tag foo] {",
53 " [property color]: [keyword black];",
54 " [property color]: [keyword navy];",
55 " [property color]: [keyword yellow];",
56 "}");
57
58 MT("tagColorHex3",
59 "[tag foo] { [property background]: [atom #fff]; }");
60
61 MT("tagColorHex4",
62 "[tag foo] { [property background]: [atom #ffff]; }");
63
64 MT("tagColorHex6",
65 "[tag foo] { [property background]: [atom #ffffff]; }");
66
67 MT("tagColorHex8",
68 "[tag foo] { [property background]: [atom #ffffffff]; }");
69
70 MT("tagColorHex5Invalid",
71 "[tag foo] { [property background]: [atom&error #fffff]; }");
72
73 MT("tagColorHexInvalid",
74 "[tag foo] { [property background]: [atom&error #ffg]; }");
75
76 MT("tagNegativeNumber",
77 "[tag foo] { [property margin]: [number -5px]; }");
78
79 MT("tagPositiveNumber",
80 "[tag foo] { [property padding]: [number 5px]; }");
81
82 MT("tagVendor",
83 "[tag foo] { [meta -foo-][property box-sizing]: [meta -foo-][atom border-box]; }");
84
85 MT("tagBogusProperty",
86 "[tag foo] { [property&error barhelloworld]: [number 0]; }");
87
88 MT("tagTwoProperties",
89 "[tag foo] { [property margin]: [number 0]; [property padding]: [number 0]; }");
90
91 MT("tagTwoPropertiesURL",
92 "[tag foo] { [property background]: [variable&callee url]([string //example.com/foo.png]); [property padding]: [number 0]; }");
93
94 MT("indent_tagSelector",
95 "[tag strong], [tag em] {",
96 " [property background]: [variable&callee rgba](",
97 " [number 255], [number 255], [number 0], [number .2]",
98 " );",
99 "}");
100
101 MT("indent_atMedia",
102 "[def @media] {",
103 " [tag foo] {",
104 " [property color]:",
105 " [keyword yellow];",
106 " }",
107 "}");
108
109 MT("indent_comma",
110 "[tag foo] {",
111 " [property font-family]: [variable verdana],",
112 " [atom sans-serif];",
113 "}");
114
115 MT("indent_parentheses",
116 "[tag foo]:[variable-3 before] {",
117 " [property background]: [variable&callee url](",
118 "[string blahblah]",
119 "[string etc]",
120 "[string ]) [keyword !important];",
121 "}");
122
123 MT("font_face",
124 "[def @font-face] {",
125 " [property font-family]: [string 'myfont'];",
126 " [error nonsense]: [string 'abc'];",
127 " [property src]: [variable&callee url]([string http://blah]),",
128 " [variable&callee url]([string http://foo]);",
129 "}");
130
131 MT("empty_url",
132 "[def @import] [variable&callee url]() [attribute screen];");
133
134 MT("parens",
135 "[qualifier .foo] {",
136 " [property background-image]: [variable&callee fade]([atom #000], [number 20%]);",
137 " [property border-image]: [variable&callee linear-gradient](",
138 " [atom to] [atom bottom],",
139 " [variable&callee fade]([atom #000], [number 20%]) [number 0%],",
140 " [variable&callee fade]([atom #000], [number 20%]) [number 100%]",
141 " );",
142 "}");
143
144 MT("css_variable",
145 ":[variable-3 root] {",
146 " [variable-2 --main-color]: [atom #06c];",
147 "}",
148 "[tag h1][builtin #foo] {",
149 " [property color]: [variable&callee var]([variable-2 --main-color]);",
150 "}");
151
152 MT("blank_css_variable",
153 ":[variable-3 root] {",
154 " [variable-2 --]: [atom #06c];",
155 "}",
156 "[tag h1][builtin #foo] {",
157 " [property color]: [variable&callee var]([variable-2 --]);",
158 "}");
159
160 MT("supports",
161 "[def @supports] ([keyword not] (([property text-align-last]: [atom justify]) [keyword or] ([meta -moz-][property text-align-last]: [atom justify])) {",
162 " [property text-align-last]: [atom justify];",
163 "}");
164
165 MT("document",
166 "[def @document] [variable&callee url]([string http://blah]),",
167 " [variable&callee url-prefix]([string https://]),",
168 " [variable&callee domain]([string blah.com]),",
169 " [variable&callee regexp]([string \".*blah.+\"]) {",
170 " [builtin #id] {",
171 " [property background-color]: [keyword white];",
172 " }",
173 " [tag foo] {",
174 " [property font-family]: [variable Verdana], [atom sans-serif];",
175 " }",
176 "}");
177
178 MT("document_url",
179 "[def @document] [variable&callee url]([string http://blah]) { [qualifier .class] { } }");
180
181 MT("document_urlPrefix",
182 "[def @document] [variable&callee url-prefix]([string https://]) { [builtin #id] { } }");
183
184 MT("document_domain",
185 "[def @document] [variable&callee domain]([string blah.com]) { [tag foo] { } }");
186
187 MT("document_regexp",
188 "[def @document] [variable&callee regexp]([string \".*blah.+\"]) { [builtin #id] { } }");
189
190 MT("counter-style",
191 "[def @counter-style] [variable binary] {",
192 " [property system]: [atom numeric];",
193 " [property symbols]: [number 0] [number 1];",
194 " [property suffix]: [string \".\"];",
195 " [property range]: [atom infinite];",
196 " [property speak-as]: [atom numeric];",
197 "}");
198
199 MT("counter-style-additive-symbols",
200 "[def @counter-style] [variable simple-roman] {",
201 " [property system]: [atom additive];",
202 " [property additive-symbols]: [number 10] [variable X], [number 5] [variable V], [number 1] [variable I];",
203 " [property range]: [number 1] [number 49];",
204 "}");
205
206 MT("counter-style-use",
207 "[tag ol][qualifier .roman] { [property list-style]: [variable simple-roman]; }");
208
209 MT("counter-style-symbols",
210 "[tag ol] { [property list-style]: [variable&callee symbols]([atom cyclic] [string \"*\"] [string \"\\2020\"] [string \"\\2021\"] [string \"\\A7\"]); }");
211
212 MT("comment-does-not-disrupt",
213 "[def @font-face] [comment /* foo */] {",
214 " [property src]: [variable&callee url]([string x]);",
215 " [property font-family]: [variable One];",
216 "}")
217})();