/* SYNTAX TEST "Packages/CSS/CSS.sublime-syntax" */

   /* What am I, a comment? */
/* ^^                          punctuation.definition.comment.css */
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^ comment.block.css                  */
/*                          ^^ punctuation.definition.comment.css */

.test-strings {
    content: "double";
/*           ^^^^^^^^  string.quoted.double.css                */
/*           ^         punctuation.definition.string.begin.css */
/*                  ^  punctuation.definition.string.end.css   */
    content: 'single';
/*           ^^^^^^^^  string.quoted.single.css                */
/*           ^         punctuation.definition.string.begin.css */
/*                  ^  punctuation.definition.string.end.css   */

    content: 'invalid;
/*                    ^ invalid.illegal.newline.css */
}

.test-punctuation {
/*                ^ punctuation.section.property-list.css */
    top: 1px;
/*     ^      punctuation.separator.key-value.css  */
/*          ^ punctuation.terminator.rule.css      */

    top: cubic-bezier(0.2, 0, 0.13, 2);
/*                       ^ punctuation.separator.css*/

    top: url("image");
/*          ^         punctuation.definition.group.begin.css */
/*                  ^ punctuation.definition.group.end.css */
}
/* < punctuation.section.property-list.css */

    .classname {}
/*  ^^^^^^^^^^^ meta.selector.css */
/*  ^          punctuation.definition.entity.css     */
/*   ^^^^^^^^^ entity.other.attribute-name.class.css */

    #id {}
/*  ^   punctuation.definition.entity.css  */
/*   ^^ entity.other.attribute-name.id.css */

    html {}
/*  ^^^^ entity.name.tag.css */

    @charset "UTF-8";
/*  ^^^^^^^^^^^^^^^^ meta.at-rule.charset.css */
/*  ^        punctuation.definition.keyword.css  */
/*   ^^^^^^^ keyword.control.at-rule.charset.css */

    @import "x" print;
/*  ^^^^^^^^^^^^^^^^^ meta.at-rule.import.css */
/*  ^                 punctuation.definition.keyword.css */
/*   ^^^^^^           keyword.control.at-rule.import.css */
/*              ^^^^^ support.constant.media.css         */

    @namespace svg "http://www.w3.org/1999/xhtml";
/*  ^^^^^^^^^^^^^^^^^ meta.at-rule.namespace.css */
/*  ^              punctuation.definition.keyword.css    */
/*   ^^^^^^^^^     keyword.control.at-rule.namespace.css */
/*             ^^^ entity.other.namespace-prefix.css     */

    @page :left {}
/*  ^^^^^^^^^^^^^^ meta.at-rule.page.css */
/*  ^     punctuation.definition.keyword.css */
/*   ^^^^ keyword.control.at-rule.page.css   */

    @media only screen {}
/*  ^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css */
/*  ^                  punctuation.definition.keyword.css */
/*   ^^^^^             keyword.control.at-rule.media.css  */
/*         ^^^^        keyword.operator.logic.media.css   */
/*              ^^^^^^ support.constant.media.css         */

    @custom-media --a-b (width: 1px);
/*  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.custom-media.css */
/*  ^                          punctuation.definition.keyword.css       */
/*   ^^^^^^^^^^^^              keyword.control.at-rule.custom-media.css */
/*                       ^^^^^ support.type.property-name.media.css     */

    @keyframes beat, bounce {}
/*  ^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.keyframe.css */
/*  ^                       punctuation.definition.keyword.css              */
/*   ^^^^^^^^^              keyword.control.at-rule.keyframe.css            */
/*             ^^^^         entity.other.animation-name.css                 */
/*                 ^        punctuation.definition.arbitrary-repetition.css */
/*                   ^^^^^^ entity.other.animation-name.css                 */

@keyframes test-keyframes-keywords {
    from, to {}
/*  ^^^^     keyword.keyframe-selector.css */
/*        ^^ keyword.keyframe-selector.css */

    0%, 100% {}
/*  ^^       constant.numeric.css */
/*      ^^^^ constant.numeric.css */


    .99%, 100.99% {}
/*  ^^^^          constant.numeric.css */
/*        ^^^^^^^ constant.numeric.css */

    0%, to {}
/*  ^^     constant.numeric.css          */
/*      ^^ keyword.keyframe-selector.css */
}

    @document url(http://) { }
/*  ^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.document.css */
/*  ^ punctuation.definition.keyword.css */
/*  ^^^^^^^^^ keyword.control.at-rule.document.css */
/*                         ^^^ meta.block.css */
/*                         ^ punctuation.definition.block.begin.css */
/*                           ^ punctuation.definition.block.end.css */

@document url(http://www),
/*        ^^^ support.function.url.css */
/*            ^^^^^^^^^^ string.unquoted.css */
/*                       ^ punctuation.separator.css */
          url-prefix("http://www"),
/*        ^^^^^^^^^^ support.function.url-prefix.css */
/*                   ^^^^^^^^^^^^ string.quoted.double.css */
          domain(mozilla.org),
/*        ^^^^^^ support.function.domain.css */
/*               ^^^^^^^^^^^ string.unquoted.css */
          regexp("https:.*")
/*        ^^^^^^ support.function.regexp.css */
/*               ^^^^^^^^^^ string.quoted.double.css */
{
    .class {
/*  ^^^^^^ meta.at-rule.document.css entity.other.attribute-name.class.css */
        display: none;
/*      ^^^^^^^ meta.at-rule.document.css meta.property-name.css */
    }
}

    @font-face {
/*  ^^^^^^^^^^^ meta.at-rule.font-face.css */
/*  ^          punctuation.definition.keyword.css    */
/*   ^^^^^^^^^ keyword.control.at-rule.font-face.css */

    src: local(Font),
        /* */
/*      ^^^^^ comment.block.css */
}

    @font-face
/*  ^^^^^^^^^^^ meta.at-rule.font-face.css */
/*  ^          punctuation.definition.keyword.css    */
/*   ^^^^^^^^^ keyword.control.at-rule.font-face.css */
{
    font-family: monospace,
/*  ^^^^^^^^^^^ support.type.property-name.css */
/*               ^^^^^^^^^ support.constant.font-name.css */
        /* */
/*      ^^^^^ comment.block.css */
}

    @supports not ( and ( top: 2px ) ) { }
/*  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.supports.css */
/*  ^          punctuation.definition.keyword.css  */
/*   ^^^^^^^^ keyword.control.at-rule.supports.css */
/*            ^^^ keyword.operator.logic.css */
/*                ^ meta.group.css punctuation.definition.group.begin.css */
/*                  ^^^ keyword.operator.logic.css */
/*                      ^ meta.group.css punctuation.definition.group.begin.css */
/*                        ^^^ support.type.property-name.css */
/*                           ^ punctuation.separator.key-value.css */
/*                              ^^ constant.numeric.css keyword.other.unit.css */
/*                                 ^ meta.group.css punctuation.definition.group.end.css */
/*                                   ^ meta.group.css punctuation.definition.group.end.css */
/*                                     ^^^ meta.block.css */
/*                                     ^ punctuation.definition.block.begin.css */
/*                                       ^ punctuation.definition.block.end.css */

@supports (--foo: green) {
/*         ^^^^^ support.type.custom-property.css */
    .class {
/*  ^^^^^^ meta.at-rule.supports.css entity.other.attribute-name.class.css */
        display: none;
/*      ^^^^^^^ meta.at-rule.supports.css meta.property-name.css */
    }
}

@counter-style none {}
/*             ^^^^ invalid.illegal.counter-style-name.css */

@counter-style decimal {}
/*             ^^^^^^^ invalid.illegal.counter-style-name.css */

    @counter-style name {
/*  ^          punctuation.definition.keyword.css  */
/*  ^^^^^^^^^^^^^^ keyword.control.at-rule.counter-style.css */
/*                 ^^^^ entity.other.counter-style-name.css */
    symbols: "‣";
/*  ^^^^^^^ meta.at-rule.counter-style.css support.type.property-name.css */
    suffix: " ";
/*  ^^^^^^ meta.at-rule.counter-style.css support.type.property-name.css */
/*          ^^^ string.quoted.double.css */
}

    @counter-style blacknwhite
/*  ^^^^^^^^^^^^^^ meta.at-rule.counter-style.css keyword.control.at-rule.counter-style.css */
/*                 ^^^^^^^^^^^ entity.other.counter-style-name.css */
{
  system: cyclic;
  negative: "(" ")";
  prefix: "/";
  symbols: ◆ ◇;
  suffix: "/ ";
  range: 2 4;
  speak-as: "bullets";
/*^^^^^^^^ support.type.property-name.css */
}

.test-var { --test-var: arial; }
/*          ^^^^^^^^^^ support.type.custom-property.css       */
/*          ^^         punctuation.definition.custom-property */
/*            ^^^^^^^^ support.type.custom-property.name.css  */

.test-deprecated-var { var-deprecated- }
/*                     ^^^^^^^^^^^^^^^ invalid.deprecated.custom-property.css */
/*                     ^^^^ keyword.other.custom-property.prefix.css */

.test-types {
    top: 20;
/*       ^^ constant.numeric.css */
    top: +.95e-20;
/*       ^^^^^^^^ constant.numeric.css */
    top: -1.5e+93%;
/*       ^^^^^^^^^ constant.numeric.css */
}

.test-units {
    top: 1px;
/*        ^^        keyword.other.unit.css */
    top: 1.1em;
/*          ^^      keyword.other.unit.css */
    top: -100%;
/*           ^      keyword.other.unit.css */
    top: 1.1.1deg;
/*            ^^^   keyword.other.unit.css */
}

.test-properties {
/*               ^ meta.property-list.css */

    -webkit-transform: none;
/*  ^^^^^^^^^^^^^^^^^ meta.property-name.css */
/*  ^^^^^^^^ support.type.vendor-prefix.css */
/*          ^^^^^^^^^ support.type.property-name.css */
/*                     ^^^^ meta.property-value.css support.constant.property-value.css */
}

.test-operators {
    top: calc(1px + 1px);
    /*            ^ keyword.operator.css */
    top: calc(1px - 1px);
    /*            ^ keyword.operator.css */
    top: calc(1px / 1px);
    /*            ^ keyword.operator.css */
    top: calc(1px * 1px);
    /*            ^ keyword.operator.css */

    top: calc(1px+1px);
    /*           ^ -keyword.operator.css */
    top: calc(1px-1px);
    /*           ^ -keyword.operator.css */
    top: calc(1px/1px);
    /*           ^ keyword.operator.css */
    top: calc(1px*1px);
    /*           ^ keyword.operator.css */
}

.test-important {
    top: 1px !important;
/*           ^^^^^^^^^^ keyword.other.important.css */
    top: 1px!important;
/*          ^^^^^^^^^^ keyword.other.important.css */
}

/* Test Functional Pseudo Class Meta Scopes */
.test:nth-child(even) {}
/*   ^^^^^^^^^^^^^^^^ meta.function-call.css                 */
/*             ^^^^^^ meta.group.css                         */
/*             ^      punctuation.definition.group.begin.css */
/*                  ^ punctuation.definition.group.end.css   */

.test-pseudo-classes:nth-child(2):hover {}
/*                   ^^^^^^^^^          entity.other.pseudo-class.css     */
/*                             ^        constant.numeric.css              */
/*                               ^      punctuation.definition.entity.css */
/*                                ^^^^^ entity.other.pseudo-class.css     */

.test-pseudo-class-numerics:nth-last-of-type(-n+3) {}
/*                         ^^^^^^^^^^^^^^^^^      entity.other.pseudo-class.css */
/*                                           ^^^^ constant.numeric.css          */

.test-pseudo-class-keywords:nth-of-type(odd) {}
/*                         ^^^^^^^^^^^^     entity.other.pseudo-class.css  */
/*                                      ^^^ keyword.other.pseudo-class.css */

.test-pseudo-class-strings:dir(ltr) {}
/*                        ^^^^     entity.other.pseudo-class.css */
/*                             ^^^ string.unquoted.css           */

.test-pseudo-class-tag:not(*) {}
/*                    ^^^^   entity.other.pseudo-class.css */
/*                         ^ entity.name.tag.wildcard.css  */

.test-pseudo-elements::before {}
/*                   ^^       punctuation.definition.entity.css */
/*                   ^^^^^^^^ entity.other.pseudo-element.css   */

.test-pseudo-elements:after {}
/*                   ^      punctuation.definition.entity.css */
/*                   ^^^^^^ entity.other.pseudo-element.css   */

.test-pseudo-elements::-webkit-slider-runnable-track
/*                   ^^ punctuation.definition.entity.css                            */
/*                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ entity.other.pseudo-element.css */

.test-unicode { top: "\2764 \273e"; }
/*                    ^^^^^       constant.character.escape.css */
/*                          ^^^^^ constant.character.escape.css */

.test-unicode-range {
    unicode-range: U+0025-00FF, U+4??;
/*                 ^^^^^^^^^^^        support.unicode-range.css                 */
/*                 ^^                 support.constant.unicode-range.prefix.css */
/*                   ^^^^^^^^^        constant.codepoint-range.css              */
/*                       ^            punctuation.section.range.css             */
/*                              ^^^^^ support.unicode-range.css                 */
/*                              ^^    support.constant.unicode-range.prefix.css */
/*                                ^^^ constant.codepoint-range.css              */
}

.test-escape-character { top: "\nstring\n"; }
/*                             ^^         constant.character.escape.css */
/*                                     ^^ constant.character.escape.css */

.test-attribute-selectors[disabled][type=button] {}
/*                       ^^^^^^^^^^ meta.attribute-selector.css */
/*                       ^ punctuation.definition.entity.css */
/*                        ^^^^^^^^ entity.other.attribute-name.css */
/*                                ^ punctuation.definition.entity.css */
/*                                  ^^^^ entity.other.attribute-name.css */
/*                                       ^^^^^^ string.unquoted.css */

.test-attribute-selectors-namespaces[n|a=""][*|a=""][|att] {}
/*                                   ^ entity.other.namespace-prefix.css */
/*                                    ^ punctuation.separator.namespace.css */
/*                                           ^ entity.name.namespace.wildcard.css */
/*                                            ^ punctuation.separator.namespace.css */
/*                                                   ^ punctuation.separator.namespace.css */

.test-attribute-selectors-operators[a=""][a~=""][a|=""][a^=""][a$=""][a*=""] {}
/*                                   ^ keyword.operator.attribute-selector.css */
/*                                         ^^ keyword.operator.attribute-selector.css */
/*                                                ^^ keyword.operator.attribute-selector.css */
/*                                                       ^^ keyword.operator.attribute-selector.css */
/*                                                              ^^ keyword.operator.attribute-selector.css */
/*                                                                     ^^ keyword.operator.attribute-selector.css */

.test-attribute-selectors-whitespace[a = ""] {}
/*                                   ^   entity.other.attribute-name.css         */
/*                                     ^ keyword.operator.attribute-selector.css */

.test-attribute-selectors-flags[a="" i] {}
/*                                   ^ keyword.other.css */

   *.test-universal-selector {}
/* ^ entity.name.tag.wildcard.css */

.test-combinators >>> a >> a > a + b ~ a {}
/*                ^^^                  punctuation.separator.combinator.css */
/*                      ^^             punctuation.separator.combinator.css */
/*                           ^         punctuation.separator.combinator.css */
/*                               ^     punctuation.separator.combinator.css */
/*                                   ^ punctuation.separator.combinator.css */

.test-invalid-combinators +>> a +++ a ~+> {}
/*                        ^^^             invalid.illegal.combinator.css */
/*                              ^^^       invalid.illegal.combinator.css */
/*                                    ^^^ invalid.illegal.combinator.css */

.test-generic-font-families {
    font: serif;
/*        ^^^^^      support.constant.font-name.css */
    font: sans-serif;
/*        ^^^^^^^^^^ support.constant.font-name.css */
    font: cursive;
/*        ^^^^^^^    support.constant.font-name.css */
    font: fantasy;
/*        ^^^^^^^    support.constant.font-name.css */
    font: monospace;
/*        ^^^^^^^^^  support.constant.font-name.css */
}

.test-unquoted-font-name {
    font: m700, aria;
/*        ^^^^ string.unquoted */
/*            ^ punctuation.separator */
/*            ^^ - string */
/*              ^^^^ string.unquoted */
    font: inherit;
/*        ^ - string */
    font: initial;
/*        ^ - string */
    font: unset;
/*        ^ - string */
    font: italic;
/*        ^ - string */
    font: small-caps;
/*        ^ - string */
    font: 2em m700, sans-serif;
/*        ^ - string */
/*            ^^^^ string.unquoted */
/*                ^ punctuation.separator */
/*                  ^ - string */
    font-weight: bold;
/*  ^^^^^^^^^^^ meta.property-name support.type.property-name */
}

.test-color-values {
    color: aqua;
/*         ^^^^ support.constant.color.w3c-standard-color-name.css */

    color: aliceblue;
/*         ^^^^^^^^^ support.constant.color.w3c-extended-color-keywords.css */

    color: currentColor;
/*         ^^^^^^^^^^^^ support.constant.color.w3c-special-color-keyword.css */

    color: transparent;
/*         ^^^^^^^^^^^ support.constant.color.w3c-special-color-keyword.css */

    color: #b4da55;
/*         ^ punctuation.definition.constant.css */
/*         ^^^^^^^ constant.other.color.rgb-value.css */

    color: #137;
/*         ^^^^ constant.other.color.rgb-value.css */

    color: #a1b2c3d4;
/*         ^^^^^^^^^ constant.other.color.rgba-value.css */

    color: #E5F6A7B8;
/*         ^ punctuation.definition.constant.css */
/*         ^^^^^^^^^ constant.other.color.rgba-value.css */
}

.test-function-meta {
    top: filter(param1, 20px);
/*       ^^^^^^^^^^^^^^^^^^^^ meta.function-call.css */
/*             ^^^^^^^^^^^^^^ meta.group.css         */
}

.test-color-functions {
    top: rgb(1, 4.5%);
/*       ^^^         support.function.color.css */
/*           ^       constant.numeric.css       */
/*            ^      punctuation.separator.css  */
/*              ^^^^ constant.numeric.css       */

    top: rgba();
/*       ^^^^ support.function.color.css */

    top: hsl(1deg, 4.5%);
/*       ^^^            support.function.color.css */
/*           ^^^^       constant.numeric.css       */
/*               ^      punctuation.separator.css  */
/*                 ^^^^ constant.numeric.css       */

    top: hsla();
/*       ^^^^ support.function.color.css */

    top: hwb();
/*       ^^^ support.function.color.css */


    top: gray(1, 4.5%);
/*       ^^^^         support.function.color.css */
/*            ^       constant.numeric.css       */
/*             ^      punctuation.separator.css  */
/*               ^^^^ constant.numeric.css       */

    top: device-cmyk(0.5, 1%, red());
/*       ^^^^^^^^^^^              support.function.color.css */
/*                   ^^^          constant.numeric.css       */
/*                      ^         punctuation.separator.css  */
/*                        ^^      constant.numeric.css       */
/*                            ^^^ support.function.color.css */

    top: color(w() s());
/*       ^^^^^       support.function.color.css */
/*             ^     support.function.color.css */
/*                 ^ support.function.color.css */

    top: alpha(- 1.5%);
/*       ^^^^^        support.function.color.css */
/*             ^      keyword.operator.css       */
/*               ^^^^ constant.numeric.css       */

    top: h(+ 1.5deg);
/*       ^          support.function.color.css */
/*         ^        keyword.operator.css       */
/*           ^^^^^^ constant.numeric.css       */

    top: w(* 1.5%);
/*       ^        support.function.color.css */
/*         ^      keyword.operator.css       */
/*           ^^^^ constant.numeric.css       */

    top: shade(1.5%);
/*       ^^^^^      support.function.color.css */
/*             ^^^^ constant.numeric.css       */

    top: blenda(red 50% hsl);
/*       ^^^^^^             support.function.color.css                         */
/*              ^^^         support.constant.color.w3c-standard-color-name.css */
/*                  ^^^     constant.numeric.css                               */
/*                      ^^^ keyword.other.color-space.css                      */

    background-color: color(var(--background) blend(var(--foreground) 80%));
/*  ^^^^^^^^^^^^^^^^ support.type.property-name.css */
/*                  ^ punctuation.separator.key-value.css */
/*                    ^^^^^ support.function.color.css */
/*                         ^ punctuation.definition.group.begin.css */
/*                          ^^^ support.function.var.css */
/*                             ^ punctuation.definition.group.begin.css */
/*                              ^^^^^^^^^^^^ support.type.custom-property */
/*                                          ^ punctuation.definition.group.end.css */
/*                                            ^^^^^ support.function.color.css */
/*                                                 ^ punctuation.definition.group.begin.css */
/*                                                  ^^^ support.function.var.css */
/*                                                     ^ punctuation.definition.group.begin.css */
/*                                                      ^^^^^^^^^^^^ support.type.custom-property.css */
/*                                                                  ^ punctuation.definition.group.end.css */
/*                                                                    ^^^ constant.numeric.css */
/*                                                                       ^^ punctuation.definition.group.end.css */
/*                                                                         ^ punctuation.terminator.rule.css */
}

.test-transform-functions {
    top: rotate3d(-1, 2deg);
/*       ^^^^^^^^          support.function.transform.css */
/*                ^^       constant.numeric.css           */
/*                    ^^^^ constant.numeric.css           */

    top: matrix3d(1, 0);
/*       ^^^^^^^^      support.function.transform.css */
/*                ^    constant.numeric.css           */
/*                 ^   punctuation.separator.css      */
/*                   ^ constant.numeric.css           */

    top: translate3d(1, 2px, 3%);
/*       ^^^^^^^^^^^            support.function.transform.css */
/*                   ^          constant.numeric.css           */
/*                    ^         punctuation.separator.css      */
/*                      ^^^     constant.numeric.css           */
/*                           ^^ constant.numeric.css           */

    top: translateY(2px);
/*       ^^^^^^^^^^     support.function.transform.css */
/*                  ^^^ constant.numeric.css           */

    top: translateX(1%);
/*                  ^^ constant.numeric.css */

    top: skewY(1deg);
/*       ^^^^^      support.function.transform.css */
/*             ^^^^ constant.numeric.css           */

    top: skew(1deg, 2turn);
/*       ^^^^             support.function.transform.css */
/*            ^^^^        constant.numeric.css           */
/*                ^       punctuation.separator.css      */
/*                  ^^^^^ constant.numeric.css           */

    top: perspective(17px);
/*       ^^^^^^^^^^^      support.function.transform.css */
/*                   ^^^^ constant.numeric.css           */

    top: scaleY(2);
/*       ^^^^^^   support.function.transform.css */
/*              ^ constant.numeric.css           */

    top: skewY(1rad) rotate(1turn);
/*                   ^^^^^^       support.function.transform.css */
/*                          ^^^^^ constant.numeric.css           */
}

.test-timing-functions {
    top: cubic-bezier(0.42, 0, 0.58, 1);
/*       ^^^^^^^^^^^^      support.function.timing.css */
/*                    ^^^^ constant.numeric.css        */

    top: steps(020, start);
/*       ^^^^^          support.function.timing.css            */
/*             ^^^      constant.numeric.css                   */
/*                  ^^^^^ support.keyword.timing-direction.css */

    top: steps(1, end);
/*                ^^^ support.keyword.timing-direction.css */

    top: steps(1, middle);
/*                ^^^^^^ support.keyword.timing-direction.css */
}

.test-shape-functions {
    top: circle(at top 5.5e20em);
/*       ^^^^^^                 support.function.shape.css          */
/*              ^^              keyword.other.css                   */
/*                 ^^^          support.constant.property-value.css */
/*                     ^^^^^^^^ constant.numeric.css                */

    top: ellipse(at 0%);
/*       ^^^^^^^       support.function.shape.css */
/*               ^^    keyword.other.css          */
/*                  ^^ constant.numeric.css       */

    top: ellipse(closest-side);
/*               ^^^^^^^^^^^^ support.constant.property-value.css */

    top: inset(1.1px round 50%);
/*       ^^^^^             support.function.shape.css */
/*             ^^^^^       constant.numeric.css       */
/*                   ^^^^^ keyword.other.css          */

    top: rect(auto);
/*       ^^^^      support.function.shape.css          */
/*            ^^^^ support.constant.property-value.css */

    top: rect(1px);
/*            ^^^ constant.numeric.css */
}

.test-calc-function {
    top: calc(1.1px + 2rad);
/*       ^^^^              support.function.calc.css */
/*            ^^^^^        constant.numeric.css      */
/*                    ^^^^ constant.numeric.css      */

    top: calc(attr(start, 1) - 1);
    /*        ^^^^ support.function.attr.css */

    top: calc(calc() * calc());
/*       ^^^^               support.function.calc.css         */
/*            ^^^^          support.function.calc.css         */
/*                   ^      keyword.operator.css */
/*                     ^^^^ support.function.calc.css         */
    top: calc(100% - (1 * 10px) / 1 - (1 * 10px) / 1 - (1 * 10px) / 1);
/*       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function-call.css */
/*       ^^^^ support.function.calc.css */
/*           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.group.css */
/*           ^ punctuation.definition.group.begin.css */
/*            ^^^ constant.numeric.css */
/*                 ^ keyword.operator.css */
/*                   ^ punctuation.definition.group.begin.css */
/*                   ^^^^^^^^^^ meta.group.css meta.group.css */
/*                            ^ punctuation.definition.group.end.css */
/*                              ^ keyword.operator.css */
/*                                    ^ punctuation.definition.group.begin.css */
/*                                         ^^ constant.numeric.css */
/*                                           ^^ keyword.other.unit.css */
/*                                             ^ punctuation.definition.group.end.css */
/*                                               ^ keyword.operator.css */
/*                                                   ^ keyword.operator.css */
/*                                                     ^ punctuation.definition.group.begin.css */
/*                                                      ^ constant.numeric.css */
/*                                                        ^ keyword.operator.css */
/*                                                          ^^ constant.numeric.css */
/*                                                              ^ punctuation.definition.group.end.css */
/*                                                                ^ keyword.operator.css */
/*                                                                  ^ constant.numeric.css */
/*                                                                   ^ punctuation.definition.group.end.css */
/*                                                                    ^ punctuation.terminator.rule.css - meta.group */
}

.test-toggle-function {
    top: toggle(5px red preserve-3d);
/*       ^^^^^^                     support.function.toggle.css                        */
/*              ^^^                 constant.numeric.css                               */
/*                  ^^^             support.constant.color.w3c-standard-color-name.css */
/*                      ^^^^^^^^^^^ support.constant.property-value.css                */
}

.test-attr-function {
    top: attr(*|c);
/*       ^^^^      support.function.attr.css           */
/*            ^    entity.name.namespace.wildcard.css  */
/*             ^   punctuation.separator.namespace.css */
/*              ^  entity.other.attribute-name.css     */

    top: attr(n|size);
/*            ^      entity.other.namespace-prefix.css */
/*              ^^^^ entity.other.attribute-name.css   */

    top: attr(size px, auto);
/*            ^^^^          entity.other.attribute-name.css     */
/*                 ^^       keyword.other.unit.css              */
/*                   ^      punctuation.separator.css           */
/*                     ^^^^ support.constant.property-value.css */

    top: attr(preserve-3d);
/*            ^^^^^^^^^^^ entity.other.attribute-name.css */
}

.test-url-function {
    top: url("a");
/*       ^^^     support.function.url.css */
/*           ^^^ string.quoted.double.css */

    top: url(a);
/*           ^ string.unquoted.css */
}

.test-image-functions {
    top: image("a");
/*       ^^^^^     support.function.image.css */
/*             ^^^ string.quoted.double.css   */

    top: image(a);
/*             ^ string.unquoted.css */

    top: image("a", rgb(0, 0, 0));
/*                ^       punctuation.separator.css */
/*                      ^ constant.numeric.css      */

    top: image-set("a" 1x, a 4dpi);
/*                 ^^^            string.quoted.double.css  */
/*                     ^^         constant.numeric.css      */
/*                      ^         keyword.other.unit.css    */
/*                       ^        punctuation.separator.css */
/*                         ^      string.unquoted.css       */
/*                           ^^^^ constant.numeric.css      */

    top: cross-fade(50% "a", b);
/*       ^^^^^^^^^^            support.function.image.css */
/*                  ^^^        constant.numeric.css       */
/*                      ^^^    string.quoted.double.css   */
/*                         ^   punctuation.separator.css  */
/*                           ^ string.unquoted.css        */
}

.test-gradient-functions {
    top: linear-gradient();
/*       ^^^^^^^^^^^^^^^ support.function.gradient.css */

    top: linear-gradient(45deg, white);
/*                       ^^^^^        constant.numeric.css                               */
/*                            ^       punctuation.separator.css                          */
/*                              ^^^^^ support.constant.color.w3c-standard-color-name.css */

    top: linear-gradient(to top left);
/*                       ^^          keyword.other.css                   */
/*                          ^^^      support.constant.property-value.css */
/*                              ^^^^ support.constant.property-value.css */

    top: linear-gradient(0%, 100%);
/*                       ^^       constant.numeric.css */
/*                           ^^^^ constant.numeric.css */

    top: repeating-linear-gradient();
/*       ^^^^^^^^^^^^^^^^^^^^^^^^^ support.function.gradient.css */

    top: radial-gradient();
/*       ^^^^^^^^^^^^^^^ support.function.gradient.css */

    top: radial-gradient(circle at top left);
/*                       ^^^^^^             keyword.other.css                   */
/*                              ^^          keyword.other.css                   */
/*                                 ^^^      support.constant.property-value.css */
/*                                     ^^^^ support.constant.property-value.css */

    top: radial-gradient(red, blue);
/*                       ^^^  support.constant.color.w3c-standard-color-name.css */
/*                          ^ punctuation.separator.css                          */

    top: repeating-radial-gradient();
/*       ^^^^^^^^^^^^^^^^^^^^^^^^^ support.function.gradient.css */
}

.test-counter-functions {
    top: counter(name, decimal-leading-zero);
/*       ^^^^^^^                            support.function.counter.css                      */
/*               ^^^^                       entity.other.counter-name.css string.unquoted.css */
/*                   ^                      punctuation.separator.css                         */
/*                     ^^^^^^^^^^^^^^^^^^^^ support.constant.property-value.counter-style.css */

    top: counters(name, "str", none);
/*       ^^^^^^^^                   support.function.counter.css                      */
/*                ^^^^              entity.other.counter-name.css string.unquoted.css */
/*                    ^             punctuation.separator.css                         */
/*                      ^^^^^       string.quoted.double.css                          */
/*                           ^      punctuation.separator.css                         */
/*                             ^^^^ support.constant.property-value.counter-style.css */

    top: symbols(fixed "\2020" url());
/*       ^^^^^^^                   support.function.counter.css     */
/*               ^^^^^             support.constant.symbol-type.css */
/*                     ^^^^^^^     string.quoted.double.css         */
/*                             ^^^ support.function.url.css         */
}

.test-grid-functions {
    top: repeat(20);
/*       ^^^^^^    support.function.grid.css */
/*              ^^ constant.numeric.css      */

    top: repeat(auto-fit, 2fr minmax() 5%);
/*              ^^^^^^^^                  support.keyword.repetitions.css */
/*                      ^                 punctuation.separator.css       */
/*                        ^^^             constant.numeric.css            */
/*                            ^^^^^^      support.function.grid.css       */
/*                                     ^^ constant.numeric.css            */

    top: minmax(min-content, 1fr);
/*       ^^^^^^                  support.function.grid.css           */
/*              ^^^^^^^^^^^      support.constant.property-value.css */
/*                         ^     punctuation.separator.css           */
/*                           ^^^ constant.numeric.css                */
    grid-template: repeat(2, var(--size)) / repeat(2, 50%);
/*                           ^^^ support.function.var.css */
/*                               ^^^^^^ support.type.custom-property.css */
/*                                     ^^ punctuation.definition.group.end.css */
/*                                          ^^^^^^ support.function.grid.css */
}

.test-filter-functions {
    top: filter(url(), blur());
/*       ^^^^^^             support.function.filter.css */
/*              ^^^         support.function.url.css    */
/*                     ^^^^ support.function.filter.css */

    top: blur(1px);
/*       ^^^^     support.function.filter.css */

    top: sepia(1% 1);
/*       ^^^^^      support.function.filter.css */
/*             ^^   constant.numeric.css        */
/*                ^ constant.numeric.css        */

    top: drop-shadow(1px rgb());
/*       ^^^^^^^^^^^         support.function.filter.css */
/*                   ^^^     constant.numeric.css        */
/*                       ^^^ support.function.color.css  */

    top: hue-rotate(1turn);
/*       ^^^^^^^^^^       support.function.filter.css */
/*                  ^^^^^ constant.numeric.css        */
}

/* Test Font Functions: format() & local() */
@font-face {
  src: format("embedded-opentype");
/*     ^^^^^^                     support.function.font-face.css */
/*            ^^^^^^^^^^^^^^^^^^^ string.quoted.double.css       */

  src: local(Gentium-Bold);
/*     ^^^^^              support.function.font-face.css */
/*           ^^^^^^^^^^^^ string.unquoted.css            */
}

@font-face {
    font-family: m700, aria;
/*               ^^^^ string.unquoted.css */
/*                     ^^^^ string.unquoted.css */
}

.test-var-function {
    top: var(--name);
/*       ^^^         support.function.var.css                   */
/*           ^^      punctuation.definition.custom-property.css */
/*             ^^^^  support.type.custom-property.name.css      */
}

.test-custom-tags > div > span + cust·m-tÀg > div-cøstom-tag ~ form-Çust😀m-tag.classname:last-child:hover {}
/*                ^ -entity.name.tag.custom.css */
/*                  ^^^ entity.name.tag.css */
/*                        ^^^^ entity.name.tag.css */
/*                             ^ -entity.name.tag.custom.css */
/*                               ^^^^^^^^^^ entity.name.tag.custom.css */
/*                                            ^^^^^^^^^^^^^^ entity.name.tag.custom.css */
/*                                                           ^ -entity.name.tag.custom.css */
/*                                                             ^^^^^^^^^^^^^^^ entity.name.tag.custom.css */
/*                                                                             ^^^^^^^^^ entity.other.attribute-name.class.css */
/*                                                                                       ^^^^^^^^^^ -entity.name.tag.custom.css */
/*                                                                                                  ^^^^^ -entity.name.tag.custom.css */

.test-meta-scopes-for-completions {
    top: 5px;
/*^^^^^^^^^^^ meta.property-list */
/*  ^^^ meta.property-name */
/*      ^^^^ meta.property-value */
    top: ;
/*^^^^^^^^^^^ meta.property-list */
/*  ^^^ meta.property-name */
/*      ^ meta.property-value */
    top:
/*^^^^^^^ meta.property-list */
/*  ^^^ meta.property-name */
}/*     ^ meta.property-value */

.generic-font-family { font-family: my-serif, serif }
/*                                  ^^^^^^^^ string.unquoted */
/*                                          ^ - string */
/*                                            ^^^^^ support.constant.font-name */
.generic-font-family2 { font-family: sans-serif , fantasy ; }
/*                                   ^^^^^^^^^^ support.constant.font-name */
/*                                                ^^^^^^^ support.constant.font-name */
.generic-font-family3 {
    font-family: cursive
/*               ^^^^^^^ support.constant.font-name */
}
.generic-font-family4 {
    font-family: droid serif;
/*               ^^^^^^^^^^^ string.unquoted */
}