test.css

.align-3 {
  justify-self: safe;
  justify-content: unsafe;
  justify-items: self-start;
  align-self: self-end;
  align-content: flex-start;
  align-items: flex-end;
  place-self: space-around;
  place-content: space-between;
  place-items: space-evenly;
  row-gap: legacy;
  column-gap: auto;
  gap: auto;
}

.animations {
  animation: forwards;
  animation-delay: backwards;
  animation-direction: running;
  animation-duration: paused;
  animation-fill-mode: alternate-reverse;
  animation-iteration-count: auto;
  animation-name: auto;
  animation-play-state: auto;
  animation-timing-function: auto;
}

.backgrounds-3 {
  background-clip: space;
  background-origin: round;
  background-size: local;
  border-image: fill;
  border-image-source: stretch;
  border-image-slice: clone;
  border-image-width: slice;
  border-image-outset: padding-box;
  border-image-repeat: border-box;
  border-radius: content-box;
  border-top-right-radius: auto;
  border-bottom-right-radius: auto;
  border-bottom-left-radius: auto;
  border-top-left-radius: auto;
  box-shadow: auto;
}

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

.box {
  overflow-style: scrollbar;
  overflow-x: panner;
  overflow-y: move;
  rotation-point: marquee;
  display: ruby;
  display: ruby-base;
  display: ruby-text;
  display: ruby-base-group;
  display: ruby-text-group;
  display: no-display;
  display: no-content;
}

.break-3 {
  break-after: avoid-column;
  break-before: auto;
  break-inside: auto;
  box-decoration-break: auto;
}

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

@import "test.css" supports(display: auto);
.cascade-4 {
  display: revert;
}

.color {
  opacity: rgba(0, 0, 0, 1);
  display: hsla(0, 0, 0, 1);
  display: currentcolor;
}

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

.color-4 {
  color-adjust: #FFEEDDFF;
  display: rebeccapurple;
  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%);
  display: color-mod(#112233 tint(50%));
}

.compositing-1 {
  mix-blend-mode: multiply;
  isolation: screen;
  background-blend-mode: 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 {
    display: auto;
  }
}

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

.content-3 {
  string-set: open;
  bookmark-level: closed;
  bookmark-label: leader('.');
  bookmark-state: 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: cyclic;
  negative: symbolic;
  prefix: additive;
  suffix: extends;
  range: bullets;
  pad: numbers;
  fallback: words;
  symbols: symbols("*" "\2020" "\2021" "\A7");
  additive-symbols: auto;
  speak-as: auto;
}

.counter-styles-3 {
  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;
}

.display-3 {
  display: flow;
  display: flow-root;
  display: contents;
  display: discard;
}

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

.fill-stroke-3 {
  fill-rule: butt;
  fill-break: arcs;
  fill-color: stupid;
  fill-image: compress;
  fill-origin: dashes;
  fill-position: gaps;
  fill-size: bounding-box;
  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;
}

.filter-effects-1 {
  flood-color: sRGB;
  flood-opacity: linearRGB;
  color-interpolation-filters: auto;
  lighting-color: auto;
  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 {
  flex-direction: flex;
  flex-wrap: inline-flex;
  flex-flow: row;
  order: row-reverse;
  flex: column-reverse;
  flex-grow: wrap;
  flex-shrink: wrap-reverse;
}

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

.fonts-4 {
}

.fonts-3 {
  font-feature-settings: common-ligatures;
  font-kerning: no-common-ligatures;
  font-language-override: discretionary-ligatures;
  font-synthesis: no-discretionary-ligatures;
  font-variant-alternates: historical-ligatures;
  font-variant-caps: no-historical-ligatures;
  font-variant-east-asian: contextual;
  font-variant-ligatures: no-contextual;
  font-variant-numeric: stylistic(feature-value-name);
  font-variant-position: 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: 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: ordinal;
  display: slashed-zero;
  display: jis78;
  display: jis83;
  display: jis90;
  display: jis04;
  display: simplified;
  display: traditional;
  display: proportional-width;
}

.fonts-4 {
  font-min-size: emoji;
  font-max-size: math;
  font-display: fangsong;
  font-optical-sizing: system-ui;
  font-variation-settings: infinity;
  font-palette: swap;
  font-presentation: fallback;
  display: optional;
  display: light;
  display: dark;
}

@font-palette-values Test {
  base-palette: 1;
}

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

.geometry-1 {
  display: auto;
}

.grid-1 {
  grid-template-columns: grid;
  grid-template-rows: inline-grid;
  grid-template-areas: minmax(0, 1);
  grid-template: fit-content(10%);
  grid-auto-rows: repeat(4);
  grid-auto-columns: 0.2fr;
  grid-auto-flow: dense;
  grid: auto-flow;
  grid-row-start: span;
  grid-column-start: auto;
  grid-row-end: auto;
  grid-column-end: auto;
  grid-column: auto;
  grid-row: auto;
  grid-area: auto;
}

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

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

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

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

.lists-3::marker {
  display: auto;
}

.logical-1 {
  block-size: logical;
  inline-size: physical;
  min-block-size: rotate;
  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;
  background-image-transform: auto;
  border-image-transform: auto;
}

.masking-1 {
  clip-path: fill-box;
  clip-rule: stroke-box;
  mask-image: view-box;
  mask-mode: nonzero;
  mask-repeat: evenodd;
  mask-position: alpha;
  mask-clip: luminance;
  mask-origin: no-clip;
  mask-size: add;
  mask-composite: subtract;
  mask: intersect;
  mask-border-source: 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: ray(45deg closest-side);
  offset-distance: path(M 100 100 L 300 100 L 200 300 z);
  offset-anchor: auto;
  offset-rotate: auto;
  offset: auto;
}

.multicol-1 {
  columns: column;
  column-count: balance;
  column-fill: balance-all;
  column-rule: auto;
  column-rule-color: auto;
  column-rule-style: auto;
  column-rule-width: auto;
  column-span: auto;
  column-width: auto;
}

@namespace "http://example.com/css3-namespace/";

.overflow-3 {
  max-lines: auto;
}

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

.page {
  display: avoid-page;
  display: page;
  display: recto;
  display: verso;
}

.page-floats-3 {
  float-reference: inline-start;
  float-defer: inline-end;
  float-offset: 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: pan-x;
  display: pan-y;
  display: manipulation;
}

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

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

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

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

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

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

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

.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;
}

.scroll-snap-1 {
  scroll-snap-type: x;
  scroll-padding: y;
  scroll-margin: mandatory;
  scroll-snap-align: proximity;
  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;
}

.selectors:target,
.selectors:enabled,
.selectors:disabled,
.selectors:checked,
.selectors:indeterminate,
.selectors:root,
.selectors:empty,
.selectors:last-child,
.selectors:last-of-type,
.selectors:first-of-type,
.selectors:only-child,
.selectors:only-of-type,
.selectors:nth-child(2n+1),
.selectors:nth-last-child(-n+2),
.selectors:nth-of-type(2n+1),
.selectors:nth-last-of-type(n+2),
.selectors:not([DISABLED]) {
  display: auto;
}

.selectors4 | h1,
.selectors4:scope,
.selectors4:current,
.selectors4:past,
.selectors4:future,
.selectors4:default,
.selectors4:valid,
.selectors4:invalid,
.selectors4:required,
.selectors4:optional,
.selectors4:blank,
.selectors4:any-link,
.selectors4:local-link,
.selectors4:read-only,
.selectors4:read-write,
.selectors4:placeholder-shown,
.selectors4:in-range,
.selectors4:out-of-range,
.selectors4:user-error,
.selectors4:active-drop-target,
.selectors4:valid-drop-target,
.selectors4:invalid-drop-target,
.selectors4:matches(:hover, :focus),
.selectors4:dir(ltr),
.selectors4:local-link(0),
.selectors4:current(p, li, dt, dd),
.selectors4:nth-match(2n+1),
.selectors4:nth-last-match(-n+2),
.selectors4:nth-column(2n+1),
.selectors4:nth-last-column(-n+2),
.selectors4:column(p, li, dt, dd) {
  display: auto;
}

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

.shapes-1 {
  shape-outside: margin-box;
  shape-image-threshold: inset(50% 50% 50% 50%);
  shape-margin: 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;
}

.speech {
  voice-volume: 10dB;
  voice-balance: literal-punctuation;
  rest-before: no-punctuation;
  rest-after: x-weak;
  rest: weak;
  voice-rate: strong;
  voice-pitch: x-strong;
  voice-range: young;
  voice-stress: old;
  voice-duration: neutral;
  display: preserve;
  display: 10st;
  display: moderate;
  display: reduced;
}

.style-attr {
  display: auto;
}

.syntax-3 {
  display: auto;
}

.tables-3 {
  display: auto;
}

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

.text-4 {
  text-space-collapse: preserve-auto;
  text-space-trim: preserve-trim;
  text-wrap: preserve-breaks;
  wrap-before: preserve-spaces;
  wrap-after: trim-inner;
  wrap-inside: discard-before;
  hyphenate-character: discard-after;
  hyphenate-limit-zone: avoid-line;
  hyphenate-limit-chars: avoid-flex;
  hyphenate-limit-lines: pre-wrap-auto;
  hyphenate-limit-last: no-limit;
  text-spacing: spread;
  display: trim-start;
  display: space-start;
  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: filled;
  text-decoration-line: dot;
  text-decoration-skip: triangle;
  text-decoration-style: sesame;
  text-emphasis: objects;
  text-emphasis-color: ink;
  text-emphasis-position: edges;
  text-emphasis-style: wavy;
  display: alphabetic;
  display: spaces;
  display: box-decoration;
  display: under;
  display: over;
}

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

.transforms-1 {
  backface-visibility: flat;
  perspective: preserve-3d;
  perspective-origin: matrix(1);
  transform: matrix3d(1);
  transform-origin: translate(1);
  transform-style: translate3d(1);
  display: translateX(1);
  display: translateY(1);
  display: translateZ(1);
  display: scale(1);
  display: scale3d(1);
  display: scaleX(1);
  display: scaleY(1);
  display: scaleZ(1);
  display: rotate(1);
  display: rotate3d(1);
  display: rotateX(1);
  display: rotateY(1);
  display: rotateZ(1);
  display: skew(1);
  display: skewX(1);
  display: skewY(1);
  display: perspective(1);
}

.transitions {
  transition: linear;
  transition-property: ease;
  transition-duration: ease-in;
  transition-timing-function: ease-out;
  transition-delay: ease-in-out;
  display: step-start;
  display: step-end;
  display: steps(1, start);
  display: cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

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

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

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

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

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

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

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

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

.writing-modes-3 {
  writing-mode: before;
  text-orientation: after;
  text-combine-upright: mixed;
  glyph-orientation-vertical: 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;
}

.html5,
picture,
rb,
rtc,
slot,
template {
  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: crispEdges;
  color-rendering: geometricPrecision;
  cx: optimizeQuality;
  cy: painted;
  d: visiblePainted;
  image-rendering: visibleFill;
  marker-end: stroke;
  marker-mid: viewport;
  marker-start: visibleStroke;
  pointer-events: context-fill;
  r: context-stroke;
  rx: fixed-position;
  ry: miter;
  shape-rendering: miter-clip;
  solid-color: non-scaling-stroke;
  solid-opacity: non-scaling-size;
  stop-color: non-rotation;
  stop-opacity: child(1);
  text-anchor: icc-color(foo);
  vector-effect: auto;
  x: auto;
  y: auto;
}