vim-css3-syntax/test/test.css

.align-3 {
  place-self: auto;
  place-content: auto;
  place-items: auto;
  row-gap: auto;
  gap: auto;
  display: safe;
  display: unsafe;
  display: self-start;
  display: self-end;
  display: space-evenly;
  display: legacy;
}

.animations-1 {
  display: auto;
}

.backgrounds-3 {
  display: auto;
}

.backgrounds-4 {
  background-position-x: auto;
  background-position-y: auto;
  background-position-inline: auto;
  background-position-block: auto;
  corner-shape: auto;
  corners: auto;
  border-limit: auto;
  border-clip: auto;
  border-clip-top: auto;
  border-clip-right: auto;
  border-clip-bottom: auto;
  border-clip-left: auto;
  display: x-start;
  display: x-end;
  display: y-start;
  display: y-end;
  display: bevel;
  display: scoop;
  display: notch;
}

.box-3 {
  margin-trim: auto;
  display: in-flow;
  /* .block-3 */
  clear-after: auto;
  float-displace: auto;
  indent-edge-reset: auto;
  display: scrollbar;
  display: panner;
  display: marquee;
  display: discard;
  display: decendants;
  display: block-within-page;
  display: margin-edge;
  display: border-edge;
  display: padding-edge;
  display: content-edge;
}

.break-3 {
  display: recto;
  display: verso;
}

.break-4 {
  margin-break: auto;
  display: keep;
}

.cascade-3 {
  all: auto;
  display: initial;
  display: unset;
}

.cascade-4 {
  display: revert;
}

@import "test.css" supports(display: auto);

.color-3 {
  display: auto;
}

.color-4 {
  color-adjust: auto;
  display: hwb(120deg, 44%, 50%);
  display: lab(1 2 3);
  display: lch(4 5 6);
  display: gray(50%);
  display: color(swopc, 0 206 190 77);
  display: device-cmyk(0, 81%, 81%, 30%);
}

@color-profile swopc {
  src: url("http://example.org/swop-coated.icc");
}

.compositing-1 {
  mix-blend-mode: auto;
  isolation: auto;
  background-blend-mode: auto;
  display: multiply;
  display: screen;
  display: overlay;
  display: darken;
  display: lighten;
  display: color-dodge;
  display: color-burn;
  display: hard-light;
  display: soft-light;
  display: difference;
  display: exclusion;
  display: hue;
  display: saturation;
  display: color;
  display: luminosity;
}

@supports (display: auto) or
  (display: auto) not
  (display: auto) {
  .conditional-3 {
    display: auto;
  }
}

.contain-1 {
  contain: auto;
  display: layout;
  display: paint;
  display: size;
}

.content-3 {
  string-set: auto;
  bookmark-level: auto;
  bookmark-label: auto;
  bookmark-state: auto;
  display: open;
  display: closed;
  display: leader('.');
  display: string(heading, first);
  display: target-counter(attr(href url), page);
  display: target-counters(lack-of-example);
  display: target-text(attr(href url));
}

@counter-style counter-styles-3 {
  system: auto;
  negative: auto;
  prefix: auto;
  suffix: auto;
  range: auto;
  pad: auto;
  fallback: auto;
  symbols: auto;
  additive-symbols: auto;
  speak-as: auto;
  display: cyclic;
  display: symbolic;
  display: additive;
  display: extends;
  display: bullets;
  display: numbers;
  display: words;
  display: symbols("*" "\2020" "\2021" "\A7");
  display: arabic-indic;
  display: upper-armenian;
  display: lower-armenian;
  display: bengali;
  display: cambodian;
  display: khmer;
  display: cjk-decimal;
  display: devanagari;
  display: gujarati;
  display: gurmukhi;
  display: kannada;
  display: lao;
  display: malayalam;
  display: mongolian;
  display: myanmar;
  display: oriya;
  display: persian;
  display: tamil;
  display: telugu;
  display: thai;
  display: tibetan;
  display: cjk-earthly-branch;
  display: cjk-heavenly-stem;
  display: disclosure-closed;
  display: disclosure-open;
  display: japanese-informal;
  display: japanese-formal;
  display: korean-hangul-formal;
  display: korean-hanja-informal;
  display: korean-hanja-formal;
  display: simp-chinese-informal;
  display: simp-chinese-formal;
  display: trad-chinese-informal;
  display: trad-chinese-formal;
  display: ethiopic-numeric;
}

.cssom-1 {
  display: auto;
}

.cssom-view-1 {
  scroll-behavior: smooth;
}

.device-adapt-1 {
  display: auto;
}

@viewport {
  min-zoom: auto;
  max-zoom: auto;
  user-zoom: auto;
}

.display-3 {
  display: flow;
  display: flow-root;
  display: contents;
  display: ruby;
  display: ruby-base;
  display: ruby-text;
  display: ruby-base-group;
  display: ruby-text-group;
}

.easing-1 {
  display: auto;
}

.exclusions-3 {
  wrap-flow: auto;
  wrap-through: auto;
  display: minimum;
  display: maximum;
}

.fill-stroke-3 {
  fill-rule: auto;
  fill-break: auto;
  fill-color: auto;
  fill-image: auto;
  fill-origin: auto;
  fill-position: auto;
  fill-size: auto;
  fill-repeat: auto;
  fill: auto;
  fill-opacity: auto;
  stroke-width: auto;
  stroke-align: auto;
  stroke-linecap: auto;
  stroke-linejoin: auto;
  stroke-miterlimit: auto;
  stroke-break: auto;
  stroke-dasharray: auto;
  stroke-dashoffset: auto;
  stroke-dash-corner: auto;
  stroke-dash-justify: auto;
  stroke-color: auto;
  stroke-image: auto;
  stroke-origin: auto;
  stroke-position: auto;
  stroke-size: auto;
  stroke-repeat: auto;
  stroke: auto;
  stroke-opacity: auto;
  display: butt;
  display: arcs;
  display: stupid;
  display: compress;
  display: dashes;
  display: gaps;
  display: bounding-box;
}

.filter-effects-1 {
  flood-color: auto;
  flood-opacity: auto;
  color-interpolation-filters: auto;
  lighting-color: auto;
  display: sRGB;
  display: linearRGB;
  display: blur(5px);
  display: brightness(0.4);
  display: contrast(200%);
  display: drop-shadow(16px 16px 20px blue);
  display: grayscale(50%);
  display: hue-rotate(90deg);
  display: invert(75%);
  display: opacity(25%);
  display: saturate(30%);
  display: sepia(60%);
}

.flexbox-1 {
  display: auto;
}

.font-loading-3 {
  display: auto;
}

.fonts-3 {
  display: common-ligatures;
  display: no-common-ligatures;
  display: discretionary-ligatures;
  display: no-discretionary-ligatures;
  display: historical-ligatures;
  display: no-historical-ligatures;
  display: contextual;
  display: no-contextual;
  display: all-small-caps;
  display: petite-caps;
  display: all-petite-caps;
  display: unicase;
  display: titling-caps;
  display: lining-nums;
  display: oldstyle-nums;
  display: proportional-nums;
  display: tabular-nums;
  display: diagonal-fractions;
  display: stacked-fractions;
  display: jis78;
  display: jis83;
  display: jis90;
  display: jis04;
  display: simplified;
  display: traditional;
  display: proportional-width;
  display: ordinal;
  display: slashed-zero;
}

.fonts-4 {
  font-min-size: auto;
  font-max-size: auto;
  font-display: auto;
  font-optical-sizing: auto;
  font-variation-settings: auto;
  font-palette: auto;
  font-presentation: auto;
  font-variant-emoji: auto;
  display: system-ui;
  display: emoji;
  display: math;
  display: fangsong;
  display: infinity;
  display: stylistic(feature-value-name);
  display: historical-forms;
  display: styleset(feature-value-name #);
  display: character-variant(feature-vlue-name #);
  display: swash(feature-value-name);
  display: ornaments(feature-value-name);
  display: annotation(feature-value-name);
  display: swap;
  display: fallback;
  display: optional;
  display: light;
  display: dark;
}

@font-palette-values Test {
  base-palette: 1;
  override-color: 1 rgb(43, 12, 9);
}

.gcpm-3::footnote-call,
.gcpm-3::footnote-marker {
  running: auto;
  footnote-display: auto;
  footnote-policy: auto;
  display: footnote;
  display: line; 
  display: element(header);
  display: running(heading);
}

.geometry-1 {
  display: auto;
}

.grid-1 {
  grid-template: auto;
  display: minmax(0, 1);
  display: repeat(4);
  display: 0.2fr;
  display: dense;
  display: auto-flow;
  display: span;
}

.grid-2 {
  display: 1.618ar;
}

.html5,
picture,
rb,
rtc,
slot,
template {
  display: auto;
}

.images-3 {
  object-fit: auto;
  object-position: auto;
  image-orientation: auto;
  display: snap;
  display: scale-down;
  display: from-image;
  display: repeating-linear-gradient(to bottom, yellow, blue);
  display: repeating-radial-gradient(farthest-corner at 50% 50%, yellow, green);
}

.images-4 {
  image-resolution: auto;
  display: image("sprite.svg#xywh=40,0,20,20");
  display: element(#test);
  display: conic-gradient(at 25% 30%, white, black 60%);
}

.inline-3 {
  dominant-baseline: auto;
  alignment-baseline: auto;
  baseline-shift: auto;
  inline-sizing: auto;
  initial-letters: auto;
  initial-letters-align: auto;
  initial-letters-wrap: auto;
  display: mathematical;
  display: ideographic;
}

.layout-api-1 {
  display: auto;
}

.line-grid-1 {
  line-grid: auto;
  line-snap: auto;
  box-snap: auto;
  display: create;
  display: block-start;
  display: block-end;
  display: first-baseline;
  display: last-baseline;
}

.lists-3::marker {
  marker-side: auto;
  counter-set: auto;
  display: match-self;
  display: list-container;
  display: counters(lack-of-example);
}

.logical-1 {
  block-size: auto;
  inline-size: auto;
  min-block-size: auto;
  min-inline-size: auto;
  max-block-size: auto;
  max-inline-size: auto;
  margin-block-start: auto;
  margin-block-end: auto;
  margin-inline-start: auto;
  margin-inline-end: auto;
  margin-block: auto;
  margin-inline: auto;
  inset-block-start: auto;
  inset-block-end: auto;
  inset-inline-start: auto;
  inset-inline-end: auto;
  inset-block: auto;
  inset-inline: auto;
  inset: auto;
  padding-block-start: auto;
  padding-block-end: auto;
  padding-inline-start: auto;
  padding-inline-end: auto;
  padding-block: auto;
  padding-inline: auto;
  border-block-start-width: auto;
  border-block-end-width: auto;
  border-inline-start-width: auto;
  border-inline-end-width: auto;
  border-block-width: auto;
  border-inline-width: auto;
  border-block-start-style: auto;
  border-block-end-style: auto;
  border-inline-start-style: auto;
  border-inline-end-style: auto;
  border-block-style: auto;
  border-inline-style: auto;
  border-block-start-color: auto;
  border-block-end-color: auto;
  border-inline-start-color: auto;
  border-inline-end-color: auto;
  border-block-color: auto;
  border-inline-color: auto;
  border-block-start: auto;
  border-block-end: auto;
  border-inline-start: auto;
  border-inline-end: auto;
  border-block: auto;
  border-inline: auto;
  border-start-start-radius: auto;
  border-start-end-radius: auto;
  border-end-start-radius: auto;
  border-end-end-radius: auto;
  display: logical;
  display: physical;
  display: rotate;
}

.masking-1,
mask {
  clip-path: auto;
  clip-rule: auto;
  mask-image: auto;
  mask-mode: auto;
  mask-repeat: auto;
  mask-position: auto;
  mask-clip: auto;
  mask-origin: auto;
  mask-size: auto;
  mask-composite: auto;
  mask: auto;
  mask-border-source: auto;
  display: fill-box;
  display: stroke-box;
  display: view-box;
  display: nonzero;
  display: evenodd;
  display: alpha;
  display: luminance;
  display: no-clip;
  display: add;
  display: subtract;
  display: intersect;
  display: exclude;
  mask-border-mode: auto;
  mask-border-slice: auto;
  mask-border-width: auto;
  mask-border-outset: auto;
  mask-border-repeat: auto;
  mask-border: auto;
  mask-type: auto;
}

.motion-1 {
  offset-path: auto;
  offset-distance: auto;
  offset-position: auto;
  offset-anchor: auto;
  offset-rotate: auto;
  offset: auto;
  display: ray(45deg closest-side);
  display: path(M 100 100 L 300 100 L 200 300 z);
}

.multicol-1 {
  display: balance-all;
}

.namespace-3 {
  display: auto;
}

.nav-1 {
  spatial-navigation-contain: auto;
  spatial-navigation-action: auto;
  display: focus;
}

.overflow-3 {
  max-lines: auto;
  block-overflow: auto;
  line-clamp: auto;
  continue: auto;
  overflow-block: auto;
  overflow-inline: auto;
}

.overflow-4::nth-fragment(1) {
  scrollbar-gutter: auto;
  display: stable;
  display: force;
  display: overflow;
  display: paginate;
  display: fragments;
}

.page-3 {
  marks: auto;
  bleed: auto;
}

.page-floats-3 {
  float-reference: auto;
  float-defer: auto;
  float-offset: auto;
  display: inline-start;
  display: inline-end;
  display: snap-block;
  display: snap-inline;
  display: snap-block(2em, near);
  display: snap-inline(2em, near);
}

.paint-api-1 {
  display: paint(my_logo);
}

.pointerevents {
  touch-action: auto;
  display: pan-x;
  display: pan-y;
  display: manipulation;
}

.position-3 {
  offset-before: auto;
  offset-end: auto;
  offset-after: auto;
  offset-start: auto;
  display: sticky;
}

.properties-values-api-1 {
  display: auto;
}

.pseudo-4::inactive-selection,
.pseudo-4::spelling-error,
.pseudo-4::grammer-error {
  display: auto;
}

.regions-1:region {
  flow-into: auto;
  flow-from: auto;
  region-fragment: auto;
  display: element;
  display: content;
  display: break;
  display: region;
  display: avoid-region;
}

.rhythm-1 {
  line-height-step: auto;
  block-step-size: auto;
  block-step-insert: auto;
  block-step-align: auto;
  display: margin;
  display: up;
  display: down;
  display: nearest;
  block-step-round: auto;
  block-step: auto;
}

@media (device-radius: 50%) {
  .round-display-1 {
    shape-inside: auto;
    border-boundary: auto;
    polar-angle: auto;
    polar-distance: auto;
    display: outside-shape;
    display: shape-box;
    display: parent;
    display: polar;
  }
}

.ruby-1 {
  ruby-position: auto;
  ruby-merge: auto;
  ruby-align: auto;
  display: ruby-base-container;
  display: ruby-text-container;
  display: inter-character;
}

.scoping-1:scope-context div,
.scoping-1:host,
.scoping-1:host(.foo),
.scoping-1:host-context,
.scoping-1::shadow,
.scoping-1::content,
.scoping-1 /deep/ span {
  display: auto;
}

@scope .scoping-1 {
  div {
    display: auto;
  }
}

.scroll-snap-1 {
  scroll-snap-type: auto;
  scroll-padding: auto;
  scroll-margin: auto;
  scroll-snap-align: auto;
  scroll-snap-stop: auto;
  scroll-padding-top: auto;
  scroll-padding-right: auto;
  scroll-padding-bottom: auto;
  scroll-padding-left: auto;
  scroll-padding-inline-start: auto;
  scroll-padding-block-start: auto;
  scroll-padding-inline-end: auto;
  scroll-padding-block-end: auto;
  scroll-padding-block: auto;
  scroll-padding-inline: auto;
  scroll-margin-top: auto;
  scroll-margin-right: auto;
  scroll-margin-bottom: auto;
  scroll-margin-left: auto;
  scroll-margin-inline-start: auto;
  scroll-margin-block-start: auto;
  scroll-margin-inline-end: auto;
  scroll-margin-block-end: auto;
  scroll-margin-block: auto;
  scroll-margin-inline: auto;
  display: x;
  display: y;
  display: mandatory;
  display: proximity;
}

.selectors-3:enabled,
.selectors-3:indeterminate,
.selectors-3:nth-child(2n+1),
.selectors-3:nth-last-child(-n+2),
.selectors-3:nth-of-type(2n+1),
.selectors-3:nth-last-of-type(n+2),
.selectors-3:not([DISABLED]) {
  display: auto;
}

.selectors-4 | h1,
.selectors-4:scope,
.selectors-4:current,
.selectors-4:past,
.selectors-4:future,
.selectors-4:default,
.selectors-4:valid,
.selectors-4:required,
.selectors-4:optional,
.selectors-4:blank,
.selectors-4:any-link,
.selectors-4:local-link,
.selectors-4:read-only,
.selectors-4:read-write,
.selectors-4:placeholder-shown,
.selectors-4:in-range,
.selectors-4:out-of-range,
.selectors-4:user-invalid,
.selectors-4:is(:hover, :focus),
.selectors-4:dir(ltr),
.selectors-4:local-link(0),
.selectors-4:current(p, li, dt, dd),
.selectors-4:nth-col(2n+1),
.selectors-4:nth-last-col(-n+2),
.selectors-4:target-within,
.selectors-4:focus-within,
.selectors-4:focus-visible,
.selectors-4:playing,
.selectors-4:paused,
.selectors-4:has(> img),
.selectors-4:where(:not(:hover)) {
  display: auto;
}

.selectors-nonelement-1::attr(title) {
  display: auto;
}

.shadow-parts::part(textspan) {
  display: auto;
}

.shapes-1 {
  shape-outside: auto;
  shape-image-threshold: auto;
  shape-margin: auto;
  display: margin-box;
  display: inset(50% 50% 50% 50%);
  display: circle(100px 50px 100px);
  display: ellipse(0 0 250px 100px);
  display: polygon(0 0, 100% 100%, 0 100%);
}

.sizing-3 {
  display: max-content;
  display: min-content;
  display: fit-content(10%);
}

.style-attr {
  display: auto;
}

.svg2,
animate,
animateMotion,
animateTransform,
circle,
clipPath,
cursor,
defs,
desc,
discard,
ellipse,
feBlend,
feColorMatrix,
feComponentTransfer,
feComposite,
feConvolveMatrix,
feDiffuseLighting,
feDisplacementMap,
feDistantLight,
feDropShadow,
feFlood,
feFuncA,
feFuncB,
feFuncG,
feFuncR,
feGaussianBlur,
feImage,
feMerge,
feMergeNode,
feMorphology,
feOffset,
fePointLight,
feSpecularLighting,
feSpotLight,
feTile,
feTurbulence,
filter,
foreignObject,
g,
hatch,
hatchpath,
image,
line,
linearGradient,
marker,
mesh,
meshgradient,
meshpatch,
meshrow,
metadata,
mpath,
path,
pattern,
polygon,
polyline,
radialGradient,
rect,
set,
solidcolor,
stop,
switch,
symbol,
text,
textPath,
tspan,
unknown,
use,
view {
  color-interpolation: auto;
  color-rendering: auto;
  cx: auto;
  cy: auto;
  d: auto;
  marker-end: auto;
  marker-mid: auto;
  marker-start: auto;
  r: auto;
  rx: auto;
  ry: auto;
  shape-rendering: auto;
  solid-color: auto;
  solid-opacity: auto;
  stop-color: auto;
  stop-opacity: auto;
  text-anchor: auto;
  vector-effect: auto;
  x: auto;
  y: auto;
  display: crispEdges;
  display: geometricPrecision;
  display: optimizeQuality;
  display: viewport;
  display: context-fill;
  display: context-stroke;
  display: fixed-position;
  display: miter;
  display: miter-clip;
  display: non-scaling-stroke;
  display: non-scaling-size;
  display: non-rotation;
  display: child(1);
  display: icc-color(foo);
}

.syntax-3 {
  display: auto;
}

.tables-3 {
  display: auto;
}

.text-3 {
  hyphens: auto;
  line-break: auto;
  overflow-wrap: auto;
  tab-size: auto;
  text-align-all: auto;
  display: manual;
  display: loose;
  display: strict;
  display: match-parent;
  display: hanging;
  display: each-line;
  display: full-width;
  display: anywhere;
  display: justify-all;
  display: break-spaces;
}

.text-4 {
  text-space-collapse: auto;
  text-space-trim: auto;
  text-wrap: auto;
  wrap-before: auto;
  wrap-after: auto;
  wrap-inside: auto;
  hyphenate-character: auto;
  hyphenate-limit-zone: auto;
  hyphenate-limit-chars: auto;
  hyphenate-limit-lines: auto;
  hyphenate-limit-last: auto;
  text-group-align: auto;
  line-padding: auto;
  text-spacing: auto;
  display: preserve-breaks;
  display: preserve-spaces;
  display: trim-inner;
  display: discard-before;
  display: discard-after;
  display: avoid-line;
  display: avoid-flex;
  display: pre-wrap-auto;
  display: no-limit;
  display: spread;
  display: trim-start;
  display: space-start;
  display: space-first;
  display: trim-end;
  display: space-end;
  display: trim-adjacent;
  display: space-adjacent;
  display: no-compress;
  display: ideograph-alpha;
  display: ideograph-numeric;
  display: punctuation;
}

.text-decor-3 {
  text-decoration-color: auto;
  text-decoration-line: auto;
  text-decoration-style: auto;
  text-emphasis: auto;
  text-emphasis-color: auto;
  text-emphasis-position: auto;
  text-emphasis-style: auto;
  display: filled;
  display: dot;
  display: sesame;
  display: alphabetic;
  display: ink;
  display: under;
  display: wavy;
  display: under;
  display: over;
  display: triangle;
}

.text-decor-4 {
  text-decoration-width: auto;
  text-underline-offset: auto;
  text-decoration-skip: auto;
  text-decoration-skip-ink: auto;
  text-emphasis-skip: auto;
  display: objects;
  display: spaces;
  display: leading-spaces;
  display: trailing-spaces;
  display: edges;
  display: box-decoration;
  display: symbols;
  display: narrow;
}

.timing-1 {
  display: frames(2);
}

.transforms-1 {
  transform-box: auto;
}

.transitions-1 {
  display: auto;
}

.typed-om-1 {
  display: auto;
}

.ui-3 {
  caret-color: auto;
  display: grab;
  display: grabbing;
}

.ui-4 {
  caret: auto;
  caret-shape: auto;
  display: fade;
  display: fade(1em);
  display: underscore;
}

.values-3 {
  display: 1ch;
  display: 1vw;
  display: 1vh;
  display: 1vmin;
  display: 1q;
  display: 1turn;
  display: calc(100%/3 - 2*1em - 2*1px);
}

.values-4 {
  display: 1vi;
  display: 1vb;
  display: 1ic;
  display: 1cap;
  display: 1lh;
  display: 1rlh;
  display: min(0, 1);
  display: max(0, 1);
  display: clamp(0, 100, 2);
  display: toggle(italic, normal);
}

.variables-1 {
  --var-foo: auto;
  display: var(foo);
}

.web-animations-1 {
  display: auto;
}

.webvtt1::cue,
.webvtt1::cue-region,
.webvtt1::cue(#cue1),
.webvtt1::cue-region(#scroll), {
  display: auto;
}

.will-change-1 {
  will-change: auto;
  display: scroll-position;
}

.worklets-1 {
  display: auto;
}

.writing-modes-3 {
  writing-mode: auto;
  text-orientation: auto;
  text-combine-upright: auto;
  glyph-orientation-vertical: auto;
  display: before;
  display: after;
  display: mixed;
  display: upright;
  display: plaintext;
  display: sideways;
  display: isolate;
  display: isolate-override;
  display: horizontal-tb;
  display: vertical-rl;
  display: vertical-lr;
}

.writing-modes-4 {
  display: sideways-rl;
  display: sideways-lr;
}