1 | // CodeMirror, copyright (c) by Marijn Haverbeke and others |
---|
2 | // Distributed under an MIT license: http://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 parenthese. |
---|
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("tagSelector", |
---|
22 | "[tag foo] { }"); |
---|
23 | |
---|
24 | MT("classSelector", |
---|
25 | "[qualifier .foo-bar_hello] { }"); |
---|
26 | |
---|
27 | MT("idSelector", |
---|
28 | "[builtin #foo] { [error #foo] }"); |
---|
29 | |
---|
30 | MT("tagSelectorUnclosed", |
---|
31 | "[tag foo] { [property margin]: [number 0] } [tag bar] { }"); |
---|
32 | |
---|
33 | MT("tagStringNoQuotes", |
---|
34 | "[tag foo] { [property font-family]: [variable hello] [variable world]; }"); |
---|
35 | |
---|
36 | MT("tagStringDouble", |
---|
37 | "[tag foo] { [property font-family]: [string \"hello world\"]; }"); |
---|
38 | |
---|
39 | MT("tagStringSingle", |
---|
40 | "[tag foo] { [property font-family]: [string 'hello world']; }"); |
---|
41 | |
---|
42 | MT("tagColorKeyword", |
---|
43 | "[tag foo] {", |
---|
44 | " [property color]: [keyword black];", |
---|
45 | " [property color]: [keyword navy];", |
---|
46 | " [property color]: [keyword yellow];", |
---|
47 | "}"); |
---|
48 | |
---|
49 | MT("tagColorHex3", |
---|
50 | "[tag foo] { [property background]: [atom #fff]; }"); |
---|
51 | |
---|
52 | MT("tagColorHex6", |
---|
53 | "[tag foo] { [property background]: [atom #ffffff]; }"); |
---|
54 | |
---|
55 | MT("tagColorHex4", |
---|
56 | "[tag foo] { [property background]: [atom&error #ffff]; }"); |
---|
57 | |
---|
58 | MT("tagColorHexInvalid", |
---|
59 | "[tag foo] { [property background]: [atom&error #ffg]; }"); |
---|
60 | |
---|
61 | MT("tagNegativeNumber", |
---|
62 | "[tag foo] { [property margin]: [number -5px]; }"); |
---|
63 | |
---|
64 | MT("tagPositiveNumber", |
---|
65 | "[tag foo] { [property padding]: [number 5px]; }"); |
---|
66 | |
---|
67 | MT("tagVendor", |
---|
68 | "[tag foo] { [meta -foo-][property box-sizing]: [meta -foo-][atom border-box]; }"); |
---|
69 | |
---|
70 | MT("tagBogusProperty", |
---|
71 | "[tag foo] { [property&error barhelloworld]: [number 0]; }"); |
---|
72 | |
---|
73 | MT("tagTwoProperties", |
---|
74 | "[tag foo] { [property margin]: [number 0]; [property padding]: [number 0]; }"); |
---|
75 | |
---|
76 | MT("tagTwoPropertiesURL", |
---|
77 | "[tag foo] { [property background]: [atom url]([string //example.com/foo.png]); [property padding]: [number 0]; }"); |
---|
78 | |
---|
79 | MT("commentSGML", |
---|
80 | "[comment <!--comment-->]"); |
---|
81 | |
---|
82 | MT("commentSGML2", |
---|
83 | "[comment <!--comment]", |
---|
84 | "[comment -->] [tag div] {}"); |
---|
85 | |
---|
86 | MT("indent_tagSelector", |
---|
87 | "[tag strong], [tag em] {", |
---|
88 | " [property background]: [atom rgba](", |
---|
89 | " [number 255], [number 255], [number 0], [number .2]", |
---|
90 | " );", |
---|
91 | "}"); |
---|
92 | |
---|
93 | MT("indent_atMedia", |
---|
94 | "[def @media] {", |
---|
95 | " [tag foo] {", |
---|
96 | " [property color]:", |
---|
97 | " [keyword yellow];", |
---|
98 | " }", |
---|
99 | "}"); |
---|
100 | |
---|
101 | MT("indent_comma", |
---|
102 | "[tag foo] {", |
---|
103 | " [property font-family]: [variable verdana],", |
---|
104 | " [atom sans-serif];", |
---|
105 | "}"); |
---|
106 | |
---|
107 | MT("indent_parentheses", |
---|
108 | "[tag foo]:[variable-3 before] {", |
---|
109 | " [property background]: [atom url](", |
---|
110 | "[string blahblah]", |
---|
111 | "[string etc]", |
---|
112 | "[string ]) [keyword !important];", |
---|
113 | "}"); |
---|
114 | |
---|
115 | MT("font_face", |
---|
116 | "[def @font-face] {", |
---|
117 | " [property font-family]: [string 'myfont'];", |
---|
118 | " [error nonsense]: [string 'abc'];", |
---|
119 | " [property src]: [atom url]([string http://blah]),", |
---|
120 | " [atom url]([string http://foo]);", |
---|
121 | "}"); |
---|
122 | |
---|
123 | MT("empty_url", |
---|
124 | "[def @import] [tag url]() [tag screen];"); |
---|
125 | |
---|
126 | MT("parens", |
---|
127 | "[qualifier .foo] {", |
---|
128 | " [property background-image]: [variable fade]([atom #000], [number 20%]);", |
---|
129 | " [property border-image]: [atom linear-gradient](", |
---|
130 | " [atom to] [atom bottom],", |
---|
131 | " [variable fade]([atom #000], [number 20%]) [number 0%],", |
---|
132 | " [variable fade]([atom #000], [number 20%]) [number 100%]", |
---|
133 | " );", |
---|
134 | "}"); |
---|
135 | |
---|
136 | MT("css_variable", |
---|
137 | ":[variable-3 root] {", |
---|
138 | " [variable-2 --main-color]: [atom #06c];", |
---|
139 | "}", |
---|
140 | "[tag h1][builtin #foo] {", |
---|
141 | " [property color]: [atom var]([variable-2 --main-color]);", |
---|
142 | "}"); |
---|
143 | |
---|
144 | MT("supports", |
---|
145 | "[def @supports] ([keyword not] (([property text-align-last]: [atom justify]) [keyword or] ([meta -moz-][property text-align-last]: [atom justify])) {", |
---|
146 | " [property text-align-last]: [atom justify];", |
---|
147 | "}"); |
---|
148 | |
---|
149 | MT("document", |
---|
150 | "[def @document] [tag url]([string http://blah]),", |
---|
151 | " [tag url-prefix]([string https://]),", |
---|
152 | " [tag domain]([string blah.com]),", |
---|
153 | " [tag regexp]([string \".*blah.+\"]) {", |
---|
154 | " [builtin #id] {", |
---|
155 | " [property background-color]: [keyword white];", |
---|
156 | " }", |
---|
157 | " [tag foo] {", |
---|
158 | " [property font-family]: [variable Verdana], [atom sans-serif];", |
---|
159 | " }", |
---|
160 | " }"); |
---|
161 | |
---|
162 | MT("document_url", |
---|
163 | "[def @document] [tag url]([string http://blah]) { [qualifier .class] { } }"); |
---|
164 | |
---|
165 | MT("document_urlPrefix", |
---|
166 | "[def @document] [tag url-prefix]([string https://]) { [builtin #id] { } }"); |
---|
167 | |
---|
168 | MT("document_domain", |
---|
169 | "[def @document] [tag domain]([string blah.com]) { [tag foo] { } }"); |
---|
170 | |
---|
171 | MT("document_regexp", |
---|
172 | "[def @document] [tag regexp]([string \".*blah.+\"]) { [builtin #id] { } }"); |
---|
173 | |
---|
174 | MT("counter-style", |
---|
175 | "[def @counter-style] [variable binary] {", |
---|
176 | " [property system]: [atom numeric];", |
---|
177 | " [property symbols]: [number 0] [number 1];", |
---|
178 | " [property suffix]: [string \".\"];", |
---|
179 | " [property range]: [atom infinite];", |
---|
180 | " [property speak-as]: [atom numeric];", |
---|
181 | "}"); |
---|
182 | |
---|
183 | MT("counter-style-additive-symbols", |
---|
184 | "[def @counter-style] [variable simple-roman] {", |
---|
185 | " [property system]: [atom additive];", |
---|
186 | " [property additive-symbols]: [number 10] [variable X], [number 5] [variable V], [number 1] [variable I];", |
---|
187 | " [property range]: [number 1] [number 49];", |
---|
188 | "}"); |
---|
189 | |
---|
190 | MT("counter-style-use", |
---|
191 | "[tag ol][qualifier .roman] { [property list-style]: [variable simple-roman]; }"); |
---|
192 | |
---|
193 | MT("counter-style-symbols", |
---|
194 | "[tag ol] { [property list-style]: [atom symbols]([atom cyclic] [string \"*\"] [string \"\\2020\"] [string \"\\2021\"] [string \"\\A7\"]); }"); |
---|
195 | })(); |
---|