test.js 6.9 KB

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