Version 0.24.4

This changes generalize gap specific properties for flexbox, grid, and
multicol. So, move these.

See also: http://www.w3.org/TR/2017/WD-css-align-3-20170906/

README.md

@@ -1,7 +1,8 @@
 vim-css3-syntax
 ===============
 
-Add CSS3 syntax support to [Vim][1]'s built-in `syntax/css.vim`.
+CSS3 syntax (and syntax defined in some foreign specifications) support for
+[Vim][1]’s built-in `syntax/css.vim`
 
 
 INSTALLATION
@@ -11,25 +12,32 @@ I **strongly** recommend to install this plugin on *Vim 7.4 or higher with
 default runtime files*.
 
 
-### Manual Installation
+### Vim package
 
-Download from GitHub, extract `vim-css3-syntax.tar.gz`, and copy the contents to
-your `~/.vim` directory.
+    $ mkdir -p ~/.vim/pack/css3-syntax/start
+    $ cd ~/.vim/pack/css3-syntax/start
+    $ git clone https://github.com/hail2u/vim-css3-syntax.git
 
 
-### Installing with Git and pathogen
+### pathogen.vim
 
     $ cd ~/.vim/bundle
     $ git clone https://github.com/hail2u/vim-css3-syntax.git
 
 
+### Manual
+
+Download `vim-css3-syntax.tar.gz` from GitHub, extract it, and copy the contents
+to your `~/.vim` directory.
+
+
 NOTES
 -----
 
 ### Highlighting problems on: `vertical-align`, `box-shadow`, and others
 
 Some properties do not highlight correctly by default. This is a limitation of
-Vim's highlight priority mechanism. To fix this problems, put following lines in
+Vim’s highlight priority mechanism. To fix this problems, put following lines in
 your `~/.vim/after/css.vim`:
 
     setlocal iskeyword+=-
@@ -54,7 +62,7 @@ such as `-webkit-` or `-moz-`, etc. These are hard to maintain because they are:
   * Changed unexpectedly
   * Removed silently
 
-These must be supported by separate syntax plugins (Vim 7.4's default CSS syntax
+These must be supported by separate syntax plugins (Vim 7.4’s default CSS syntax
 file supports this). If you want to highlight prefixed properties or functions
 manually, `:highlight` and `:match` would help:
 
@@ -67,8 +75,8 @@ cyan and bold (on gVim).
 
 ### CSS Preprocessors: [Sass][2], [LESS][3], and [Stylus][4]
 
-`vim-css3-syntax` supports Sass's SCSS syntax only. If you want to use this
-plugin with LESS, install [VIM-LESS][5]. Sass's indent syntax and Stylus are not
+`vim-css3-syntax` supports Sass’s SCSS syntax only. If you want to use this
+plugin with LESS, install [VIM-LESS][5]. Sass’s indent syntax and Stylus are not
 supported.
 
 

after/syntax/css/css-align-3.vim

@@ -1,5 +1,5 @@
-" TODO: create cssAlignProp group and cssAlignAttr group
-syn match cssFontProp contained "\<\(justify\|align\)-\(self\|content\|items\)\>"
-syn keyword cssFontAttr contained safe unsafe
+syn match cssFontProp contained "\<\(justify\|align\|place\)-\(self\|content\|items\)\>"
+syn match cssFontProp contained "\<\(grid-\)\=\(\(row\|column\)-\)\=gap\>"
+syn keyword cssFontAttr contained safe unsafe legacy
 syn match cssFontAttr contained "\<\(self\|flex\)-\(start\|end\)\>"
 syn match cssFontAttr contained "\<space-\(between\|around\|evenly\)\>"

after/syntax/css/css-color-4.vim

@@ -0,0 +1,5 @@
+syn match cssColorProp contained "\<color-adjust\>"
+syn keyword cssColor contained rebeccapurple
+syn match cssColor contained "#[0-9A-Fa-f]\{8\}\>" contains=cssUnitDecorators
+syn region cssFunction contained matchgroup=cssFunctionName start="\<\(hwb\|lab\|lch\|gray\|color\|device-cmyk\|color-mod\=\)\s*(" end=")" oneline keepend
+syn match cssFontDescriptor "@color-profile\>" nextgroup=cssFontDescriptorBlock skipwhite skipnl

after/syntax/css/css-contain-1.vim

@@ -0,0 +1,2 @@
+syn keyword cssFontProp contained contain
+syn keyword cssFontAttr contained layout paint size

after/syntax/css/css-display-3.vim

@@ -1,5 +1,2 @@
-" TODO: create cssDisplayProp group and cssDisplayAttr group
-syn match cssFontProp contained "\<box-suppress\>"
 syn keyword cssFontAttr contained contents discard
 syn match cssFontAttr contained "\<flow\(-root\)\=\>"
-syn match cssFontAttr contained "\<inline-list-item\>"

after/syntax/css/css-fonts-4.vim

@@ -0,0 +1,10 @@
+syn match cssFontProp contained "\<font-\(min\|max\)-size\>"
+syn match cssFontProp contained "\<font-display\>"
+syn match cssFontProp contained "\<font-optical-sizing\>"
+syn match cssFontProp contained "\<font-variation-settings\>"
+syn match cssFontProp contained "\<font-palette\>"
+syn match cssFontProp contained "\<font-presentation\>"
+syn match cssFontProp contained "\<base-palette\>"
+syn keyword cssFontAttr contained emoji math fangsong infinity swap fallback optional light dark
+syn match cssFontAttr contained "\<system-ui\>"
+syn region cssInclude start=/@font-palette-values\>/ end=/\ze{/ skipwhite skipnl contains=css.*Prop,css.*Attr,cssValueInteger,cssValueLength,cssMediaKeyword,cssVendor,cssIncludeKeyword,cssComment nextgroup=cssMediaBlock

after/syntax/css/css-grid-1.vim

@@ -1,9 +1,8 @@
 syn match cssFontProp contained "\<grid-template\(-\(columns\|rows\|areas\)\)\=\>"
-syn match cssFontProp contained "\<grid-auto-\(columns\|rows\|flow\|position\)\>"
+syn match cssFontProp contained "\<grid-auto-\(columns\|rows\|flow\)\>"
 syn match cssFontProp contained "\<grid-\(row\|column\)\(-\(start\|end\)\)\=\>"
 syn match cssFontProp contained "\<grid-area\>"
-syn match cssFontProp contained "\<grid\(-\(column\|row\)\)\=-gap\>"
-syn keyword cssFontAttr contained grid subgrid dense span
+syn keyword cssFontAttr contained grid dense span
 syn match cssFontAttr contained "\<inline-grid\>"
 syn match cssFontAttr contained "\<auto-flow\>"
 syn match cssValueNumber contained "[01]\(.\d\+\)\=fr"

after/syntax/css/css-images-4.vim

@@ -0,0 +1,2 @@
+syn match cssFontProp contained "\<image-resolution\>"
+syn region cssFunction contained matchgroup=cssFunctionName start="\<\(image\|element\|conic-gradient\)\s*(" end=")" oneline keepend

after/syntax/css/css-logical-1.vim

@@ -0,0 +1,5 @@
+syn match cssFontProp contained "\<\(\(min\|max\)-\)\=\(block\|inline\)-size\>"
+syn match cssFontProp contained "\<\(margin\|inset\|padding\)\(-\(block\|inline\)\(-\(start\|end\)\)\=\)\=\>"
+syn match cssFontProp contained "\<border-\(block\|inline\)\(\(-\(start\|end\)\)\=\(-\(width\|style\|color\)\)\=\)\=\>"
+syn match cssFontProp contained "\<\(background\|border\)-image-transform\>"
+syn keyword cssFontAttr contained logical physical rotate

after/syntax/css/css-overflow-4.vim

@@ -0,0 +1,4 @@
+syn keyword cssFontProp contained continue
+syn match cssFontProp contained "\<scrollbar-gutter\>"
+syn keyword cssFontAttr contained stable force overflow paginate fragments
+syn region cssPseudoClassLang matchgroup=cssPseudoClassId start=":\(nth-fragment\)(" end=")" oneline

after/syntax/css/css-paint-api-1.vim

@@ -0,0 +1 @@
+syn region cssURL contained matchgroup=cssFunctionName start="\<paint\s*(" end=")" oneline keepend

after/syntax/css/css-rhythm-1.vim

@@ -0,0 +1,3 @@
+syn match cssFontProp contained "\<line-height-step\>"
+syn match cssFontProp contained "\<block-step\(-\(size\|insert\|align\|round\)\)\=\>"
+syn keyword cssFontAttr contained margin up down nearest

after/syntax/css/css-scroll-snap-1.vim

@@ -0,0 +1,3 @@
+syn match cssFontProp contained "\<scroll-snap-\(type\|align\|stop\)\>"
+syn match cssFontProp contained "\<scroll-\(padding\|snap-margin\)\(-\(top\|bottom\|right\|left\|\(block\|inline\)\(-\(end\|start\)\)\=\)\)\=\>"
+syn keyword cssFontAttr contained x y mandatory proximity

after/syntax/css/css-snappoints-1.vim

@@ -1,2 +0,0 @@
-syn match cssFontProp contained "\<scroll-snap-\(type\|padding\|margin\|align\)\=\>"
-syn keyword cssFontAttr contained mandatory proximity

after/syntax/css/css-tables-3.vim

@@ -0,0 +1 @@
+" N/A

after/syntax/css/css-text-3.vim

@@ -2,7 +2,8 @@ syn keyword cssTextProp contained hyphens
 syn match cssTextProp contained "\<line-break\>"
 syn match cssTextProp contained "\<overflow-wrap\>"
 syn match cssTextProp contained "\<tab-size\>"
-syn keyword cssTextAttr contained manual loose strict hanging
+syn match cssTextProp contained "\<text-align-all\>"
+syn keyword cssTextAttr contained manual loose strict hanging anywhere
 syn match cssTextAttr contained "\<match-parent\>"
 syn match cssTextAttr contained "\<each-line\>"
 syn match cssTextAttr contained "\<full-width\>"

after/syntax/css/css-timing-1.vim

@@ -0,0 +1 @@
+syn region cssFunction contained matchgroup=cssFunctionName start="\<frames\s*(" end=")" oneline keepend

after/syntax/css/css-typed-om-1.vim

@@ -0,0 +1 @@
+" N/A

after/syntax/css/css-values-3.vim

@@ -1,3 +1,3 @@
 syn match cssValueLength contained "[-+]\=\d\+\(\.\d*\)\=\(ch\|vw\|vh\|vmin\|vmax\|q\)"
 syn match cssValueAngle contained "[-+]\=\d\+\(\.\d*\)\=turn"
-syn region cssFunction contained matchgroup=cssFunctionName start="\<\(calc\|toggle\)\s*(" end=")" oneline keepend
+syn region cssFunction contained matchgroup=cssFunctionName start="\<calc\s*(" end=")" oneline keepend

after/syntax/css/css3-color.vim

@@ -1,3 +1,3 @@
 syn region cssFunction contained matchgroup=cssFunctionName start="\<\(rgba\|hsla\=\)\s*(" end=")" oneline keepend
 syn keyword cssColorProp contained opacity
-syn match cssColor contained "\<currentColor\>"
+syn match cssColor contained "\<currentcolor\>"

after/syntax/css/css3-images.vim

@@ -1,7 +1,6 @@
-" TODO: create cssImagesProp group and cssImagesAttr group
 syn match cssFontProp contained "\<object-\(fit\|position\)\>"
-syn match cssFontProp contained "\<image-\(resolution\|orientation\)\>"
+syn match cssFontProp contained "\<image-orientation\>"
 syn keyword cssFontAttr contained contain cover snap
 syn match cssFontAttr contained "\<from-image\>"
 syn match cssFontAttr contained "\<scale-down\>"
-syn region cssFunction contained matchgroup=cssFunctionName start="\<\(image\|\(repeating-\)\=\(linear\|radial\)-gradient\)\s*(" end=")" oneline keepend
+syn region cssFunction contained matchgroup=cssFunctionName start="\<\(\(repeating-\)\=\(linear\|radial\)-gradient\)\s*(" end=")" oneline keepend

after/syntax/css/css3-multicol.vim

@@ -1,5 +1,4 @@
-" TODO: create cssMulticolProp group and cssMulticolAttr group
 syn keyword cssFontProp contained columns
-syn match cssFontProp contained "\<column-\(count\|fill\|gap\|rule\(-\(color\|style\|width\)\)\=\|span\|width\)\>"
+syn match cssFontProp contained "\<column-\(count\|fill\|rule\(-\(color\|style\|width\)\)\=\|span\|width\)\>"
 syn keyword cssFontAttr contained balance
 syn match cssFontAttr contained "\<\(avoid-\)\=column\>"

after/syntax/css/css3-namespace.vim

@@ -0,0 +1 @@
+" N/A

after/syntax/css/cssom-1.vim

@@ -0,0 +1 @@
+" N/A

after/syntax/css/fill-stroke-3.vim

@@ -0,0 +1,5 @@
+syn match cssFontProp contained "\<\(fill\|stroke\)\(-\(break\|color\|image\|origin\|position\|size\|repeat\|opacity\)\)\=\>"
+syn match cssFontProp contained "\<fill-rule\>"
+syn match cssFontProp contained "\<stroke-\(width\|align\|line\(cap\|join\)\|miterlimit\|dash\(array\|offset\)\|dash-\(corner\|justify\)\)\>"
+syn keyword cssFontAttr contained butt arcs stupid compress dashes gaps
+syn match cssFontAttr contained "\<bounding-box\>"

after/syntax/css/html5-elements.vim

@@ -1,19 +0,0 @@
-" HTML5 new elements
-
-" Sections
-syn keyword cssTagName article section nav aside header footer
-
-" Grouping content
-syn keyword cssTagName figure figcaption main
-
-" Text-level semantics
-syn keyword cssTagName data time mark ruby rb rt rtc rp bdi wbr
-
-" Embedded content
-syn keyword cssTagName embed video audio source track
-
-" Forms
-syn keyword cssTagName datalist keygen output progress meter
-
-" Scripting
-syn keyword cssTagName template canvas

after/syntax/css/html5.vim

@@ -0,0 +1 @@
+syn keyword cssTagName picture rb rtc slot template

after/syntax/css/motion-1.vim

@@ -1,2 +1,2 @@
-syn match cssFontProp contained "\<motion\(-\(path\|offset\|rotation\)\)\=\>"
-syn region cssFunction contained matchgroup=cssFunctionName start="\<path\s*(" end=")" oneline keepend
+syn match cssFontProp contained "\<offset\(-\(path\|distance\|anchor\|rotate\)\)\=\>"
+syn region cssFunction contained matchgroup=cssFunctionName start="\<\(ray\|path\)\s*(" end=")" oneline keepend

after/syntax/css/pointerevents.vim

@@ -0,0 +1,3 @@
+syn match cssFontProp contained "\<touch-action\>"
+syn keyword cssFontAttr contained manipulation
+syn match cssFontAttr contained "\<pan-\(x\|y\)\>"

after/syntax/css/svg2.vim

@@ -0,0 +1,20 @@
+syn keyword cssTagName 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
+
+syn keyword cssFontProp contained cx cy d r rx ry x y
+syn match cssFontProp contained "\<color-\(interpolation\|rendering\)\>"
+syn match cssFontProp contained "\<image-rendering\>"
+syn match cssFontProp contained "\<marker-\(end\|mid\|start\)\>"
+syn match cssFontProp contained "\<pointer-events\>"
+syn match cssFontProp contained "\<shape-rendering\>"
+syn match cssFontProp contained "\<solid-\(color\|opacity\)\>"
+syn match cssFontProp contained "\<stop-\(color\|opacity\)\>"
+syn match cssFontProp contained "\<text-anchor\>"
+syn match cssFontProp contained "\<vector-effect\>"
+
+syn keyword cssFontAttr contained crispEdges geometricPrecision optimizeQuality painted stroke viewport visibleFill visiblePainted visibleStroke
+syn match cssFontAttr contained "\<context-\(fill\|stroke\)\>"
+syn match cssFontAttr contained "\<fixed-position\>"
+syn match cssFontAttr contained "\<miter\(-clip\)\=\>"
+syn match cssFontAttr contained "\<non-\(scaling-stroke\|scaling-size\|rotation\)\>"
+
+syn region cssFunction contained matchgroup=cssFunctionName start="\<\(child\|icc-color\)\s*(" end=")" oneline keepend

after/syntax/css/web-animations-1.vim

@@ -0,0 +1 @@
+" N/A

after/syntax/css/worklets-1.vim

@@ -0,0 +1 @@
+" N/A

after/syntax/html.vim

@@ -4,59 +4,76 @@ syn include @htmlCss syntax/css/css-backgrounds-4.vim
 syn include @htmlCss syntax/css/css-break-3.vim
 syn include @htmlCss syntax/css/css-cascade-3.vim
 syn include @htmlCss syntax/css/css-cascade-4.vim
+syn include @htmlCss syntax/css/css-color-4.vim
+syn include @htmlCss syntax/css/css-contain-1.vim
 syn include @htmlCss syntax/css/css-content-3.vim
 syn include @htmlCss syntax/css/css-counter-styles-3.vim
 syn include @htmlCss syntax/css/css-device-adapt-1.vim
 syn include @htmlCss syntax/css/css-display-3.vim
 syn include @htmlCss syntax/css/css-flexbox-1.vim
 syn include @htmlCss syntax/css/css-font-loading-3.vim
+syn include @htmlCss syntax/css/css-fonts-3.vim
+syn include @htmlCss syntax/css/css-fonts-4.vim
 syn include @htmlCss syntax/css/css-gcpm-3.vim
 syn include @htmlCss syntax/css/css-grid-1.vim
+syn include @htmlCss syntax/css/css-images-4.vim
 syn include @htmlCss syntax/css/css-inline-3.vim
 syn include @htmlCss syntax/css/css-line-grid-1.vim
 syn include @htmlCss syntax/css/css-lists-3.vim
+syn include @htmlCss syntax/css/css-logical-1.vim
 syn include @htmlCss syntax/css/css-masking-1.vim
 syn include @htmlCss syntax/css/css-overflow-3.vim
+syn include @htmlCss syntax/css/css-overflow-4.vim
 syn include @htmlCss syntax/css/css-page-floats-3.vim
-syn include @htmlCss syntax/css/css-positioning-3.vim
+syn include @htmlCss syntax/css/css-paint-api-1.vim
+syn include @htmlCss syntax/css/css-position-3.vim
+syn include @htmlCss syntax/css/css-properties-values-api-1.vim
 syn include @htmlCss syntax/css/css-pseudo-4.vim
+syn include @htmlCss syntax/css/css-regions-1.vim
+syn include @htmlCss syntax/css/css-rhythm-1.vim
 syn include @htmlCss syntax/css/css-round-display-1.vim
 syn include @htmlCss syntax/css/css-ruby-1.vim
 syn include @htmlCss syntax/css/css-scoping-1.vim
+syn include @htmlCss syntax/css/css-scroll-snap-1.vim
 syn include @htmlCss syntax/css/css-shapes-1.vim
 syn include @htmlCss syntax/css/css-sizing-3.vim
-syn include @htmlCss syntax/css/css-snappoints-1.vim
+syn include @htmlCss syntax/css/css-style-attr.vim
+syn include @htmlCss syntax/css/css-syntax-3.vim
 syn include @htmlCss syntax/css/css-text-3.vim
 syn include @htmlCss syntax/css/css-text-4.vim
 syn include @htmlCss syntax/css/css-text-decor-3.vim
+syn include @htmlCss syntax/css/css-timing-1.vim
+syn include @htmlCss syntax/css/css-transforms-1.vim
+syn include @htmlCss syntax/css/css-typed-om-1.vim
 syn include @htmlCss syntax/css/css-ui-3.vim
 syn include @htmlCss syntax/css/css-ui-4.vim
-syn include @htmlCss syntax/css/css-values.vim
-syn include @htmlCss syntax/css/css-variables.vim
+syn include @htmlCss syntax/css/css-values-3.vim
+syn include @htmlCss syntax/css/css-variables-1.vim
 syn include @htmlCss syntax/css/css-will-change-1.vim
 syn include @htmlCss syntax/css/css-writing-modes-3.vim
 syn include @htmlCss syntax/css/css3-animations.vim
 syn include @htmlCss syntax/css/css3-background.vim
 syn include @htmlCss syntax/css/css3-box.vim
-syn include @htmlCss syntax/css/css3-colors.vim
+syn include @htmlCss syntax/css/css3-color.vim
 syn include @htmlCss syntax/css/css3-conditional.vim
 syn include @htmlCss syntax/css/css3-exclusions.vim
-syn include @htmlCss syntax/css/css3-fonts.vim
 syn include @htmlCss syntax/css/css3-images.vim
 syn include @htmlCss syntax/css/css3-multicol.vim
+syn include @htmlCss syntax/css/css3-namespace.vim
 syn include @htmlCss syntax/css/css3-page.vim
-syn include @htmlCss syntax/css/css3-regions.vim
-syn include @htmlCss syntax/css/css3-selectors.vim
 syn include @htmlCss syntax/css/css3-speech.vim
-syn include @htmlCss syntax/css/css3-syntax.vim
-syn include @htmlCss syntax/css/css3-transforms.vim
 syn include @htmlCss syntax/css/css3-transitions.vim
-syn include @htmlCss syntax/css/cssom-view.vim
-syn include @htmlCss syntax/css/cssom.vim
-syn include @htmlCss syntax/css/filter-effects.vim
+syn include @htmlCss syntax/css/cssom-1.vim
+syn include @htmlCss syntax/css/cssom-view-1.vim
+syn include @htmlCss syntax/css/fill-stroke-3.vim
+syn include @htmlCss syntax/css/filter-effects-1.vim
 syn include @htmlCss syntax/css/geometry-1.vim
-syn include @htmlCss syntax/css/html5-elements.vim
+syn include @htmlCss syntax/css/html5.vim
 syn include @htmlCss syntax/css/motion-1.vim
+syn include @htmlCss syntax/css/pointerevents.vim
 syn include @htmlCss syntax/css/selectors-nonelement-1.vim
+syn include @htmlCss syntax/css/selectors.vim
 syn include @htmlCss syntax/css/selectors4.vim
-syn include @htmlCss syntax/css/web-animations.vim
+syn include @htmlCss syntax/css/svg2.vim
+syn include @htmlCss syntax/css/web-animations-1.vim
+syn include @htmlCss syntax/css/worklets-1.vim

test/test.css

@@ -1,13 +1,19 @@
-.align {
+.align-3 {
   justify-self: safe;
   justify-content: unsafe;
   justify-items: self-start;
   align-self: self-end;
   align-content: flex-start;
   align-items: flex-end;
-  display: space-around;
-  display: space-between;
-  display: space-evenly;
+  place-self: space-around;
+  place-content: space-between;
+  place-items: space-evenly;
+  row-gap: legacy;
+  column-gap: auto;
+  gap: auto;
+  grid-column-gap: auto;
+  grid-row-gap: auto;
+  grid-gap: auto;
 }
 
 .animations {
@@ -40,7 +46,7 @@
   box-shadow: auto;
 }
 
-.background-4 {
+.backgrounds-4 {
   background-position-x: x-start;
   background-position-y: x-end;
   background-position-inline: y-start;
@@ -69,7 +75,7 @@
   display: no-content;
 }
 
-.break {
+.break-3 {
   break-after: auto;
   break-before: auto;
   break-inside: auto;
@@ -86,21 +92,29 @@
   display: revert;
 }
 
-.colors {
+.color {
   opacity: rgba(0, 0, 0, 1);
   display: hsla(0, 0, 0, 1);
-  display: currentColor;
+  display: currentcolor;
 }
 
-@supports (display: auto) or
-  (display: auto) not
-  (display: auto) {
-  .conditional {
-    display: auto;
-  }
+@color-profile swopc {
+  src: url('http://example.org/swop-coated.icc');
 }
 
-.compositing {
+.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;
@@ -118,7 +132,21 @@
   display: luminosity;
 }
 
-.content {
+@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('.');
@@ -128,7 +156,7 @@
   display: target-text(attr(href url));
 }
 
-@counter-style counter-style {
+@counter-style counter-styles-3 {
   system: cyclic;
   negative: symbolic;
   prefix: additive;
@@ -141,7 +169,7 @@
   speak-as: auto;
 }
 
-.counter-style {
+.counter-styles-3 {
   display: arabic-indic;
   display: upper-armenian;
   display: lower-armenian;
@@ -179,19 +207,18 @@
   display: ethiopic-numeric;
 }
 
-.cssom-view {
-  scroll-behavior: smooth;
-}
-
-.cssom {
+.cssom-1 {
   display: auto;
 }
 
-.display {
-  box-suppress: flow;
+.cssom-view-1 {
+  scroll-behavior: smooth;
+}
+
+.display-3 {
+  display: flow;
   display: flow-root;
   display: contents;
-  display: inline-list-item;
   display: discard;
 }
 
@@ -200,7 +227,38 @@
   wrap-through: maximum;
 }
 
-.filter-effects {
+.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;
@@ -217,7 +275,7 @@
   display: sepia(60%);
 }
 
-.flexbox {
+.flexbox-1 {
   flex-direction: flex;
   flex-wrap: inline-flex;
   flex-flow: row;
@@ -231,7 +289,10 @@
   display: auto;
 }
 
-.fonts {
+.fonts-4 {
+}
+
+.fonts-3 {
   font-feature-settings: common-ligatures;
   font-kerning: no-common-ligatures;
   font-language-override: discretionary-ligatures;
@@ -269,28 +330,44 @@
   display: proportional-width;
 }
 
-.gcpm::footnote-call,
-.gcpm::footnote-marker {
-  running: running(heading);
-  footnote-display: element(header);
-  footnote-policy: footnote;
-  display: line;
+.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 {
+.grid-1 {
   grid-template-columns: grid;
   grid-template-rows: inline-grid;
   grid-template-areas: minmax(0, 1);
   grid-template: fit-content(10%);
-  grid-auto-columns: repeat(4);
-  grid-auto-rows: 0.2fr;
+  grid-auto-rows: repeat(4);
+  grid-auto-columns: 0.2fr;
   grid-auto-flow: dense;
-  grid-auto-position: auto-flow;
-  grid: subgrid;
+  grid: auto-flow;
   grid-row-start: span;
   grid-column-start: auto;
   grid-row-end: auto;
@@ -298,25 +375,27 @@
   grid-column: auto;
   grid-row: auto;
   grid-area: auto;
-  grid-column-gap: auto;
-  grid-row-gap: auto;
-  grid-gap: auto;
 }
 
-.images {
+.images-3 {
   object-fit: contain;
   object-position: cover;
-  image-resolution: snap;
-  image-orientation: scale-down;
+  image-orientation: snap;
+  display: scale-down;
   display: from-image;
-  display: image("sprite.svg#xywh=40,0,20,20");
   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);
 }
 
-.inline {
+.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;
@@ -325,7 +404,7 @@
   initial-letter-wrap: auto;
 }
 
-.line-grid {
+.line-grid-1 {
   line-grid: create;
   line-snap: block-start;
   box-snap: block-end;
@@ -333,13 +412,65 @@
   display: last-baseline;
 }
 
-.lists::marker {
-  marker-side: marker;
-  counter-set: list-container;
-  display: counters(list-item, '.');
+.lists-3::marker {
+  display: auto;
 }
 
-.masking {
+.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;
@@ -362,17 +493,17 @@
 }
 
 .motion-1 {
-  motion-path: path(M 100 100 L 300 100 L 200 300 z);
-  motion-offset: auto;
-  motion-rotation: auto;
-  motion: auto;
+  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 {
   columns: column;
   column-count: balance;
   column-fill: avoid-column;
-  column-gap: auto;
   column-rule: auto;
   column-rule-color: auto;
   column-rule-style: auto;
@@ -381,10 +512,20 @@
   column-width: auto;
 }
 
-.overflow {
+@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;
@@ -401,20 +542,30 @@
   display: snap-inline(2em, near);
 }
 
-.positioning {
+.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::inactive-selection,
-.pseudo::spelling-error,
-.pseudo::grammer-error {
-  display: block;
+.pseudo-4::inactive-selection,
+.pseudo-4::spelling-error,
+.pseudo-4::grammer-error {
+  display: auto;
 }
 
-.regions:region {
+.regions-1:region {
   flow-into: element;
   flow-from: content;
   region-fragment: break;
@@ -422,6 +573,15 @@
   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;
@@ -431,45 +591,73 @@
   }
 }
 
-.ruby {
+.ruby-1 {
   ruby-position: ruby-base-container;
   ruby-merge: ruby-text-container;
   ruby-align: inter-character;
 }
 
-@scope .scoping {
+@scope .scoping-1 {
   div {
     display: auto;
   }
 }
 
-.scoping:scope-context div,
-.scoping:host,
-.scping:host(.foo),
-.scoping:host-context,
-.scoping::shadow,
-.scoping::content,
-.scoping /deep/ span {
+.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;
 }
 
-.selectors3:target,
-.selectors3:enabled,
-.selectors3:disabled,
-.selectors3:checked,
-.selectors3:indeterminate,
-.selectors3:root,
-.selectors3:empty,
-.selectors3:last-child,
-.selectors3:last-of-type,
-.selectors3:first-of-type,
-.selectors3:only-child,
-.selectors3:only-of-type,
-.selectors3:nth-child(2n+1),
-.selectors3:nth-last-child(-n+2),
-.selectors3:nth-of-type(2n+1),
-.selectors3:nth-last-of-type(n+2),
-.selectors3:not([DISABLED]) {
+.scroll-snap-1 {
+  scroll-snap-type: x;
+  scroll-padding: y;
+  scroll-snap-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-snap-margin-top: auto;
+  scroll-snap-margin-right: auto;
+  scroll-snap-margin-bottom: auto;
+  scroll-snap-margin-left: auto;
+  scroll-snap-margin-inline-start: auto;
+  scroll-snap-margin-block-start: auto;
+  scroll-snap-margin-inline-end: auto;
+  scroll-snap-margin-block-end: auto;
+  scroll-snap-margin-block: auto;
+  scroll-snap-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;
 }
 
@@ -511,7 +699,7 @@
   display: auto;
 }
 
-.shapes {
+.shapes-1 {
   shape-outside: margin-box;
   shape-image-threshold: inset(50% 50% 50% 50%);
   shape-margin: circle(100px 50px 100px);
@@ -519,19 +707,12 @@
   display: polygon(0 0, 100% 100%, 0 100%);
 }
 
-.sizing {
+.sizing-3 {
   display: max-content;
   display: min-content;
   display: fit-content;
 }
 
-.snappoints {
-  scroll-snap-type: mandatory;
-  scroll-snap-padding: proximity;
-  scroll-snap-margin: auto;
-  scroll-snap-align: auto;
-}
-
 .speech {
   voice-volume: 10dB;
   voice-balance: literal-punctuation;
@@ -549,7 +730,15 @@
   display: reduced;
 }
 
-.syntax {
+.style-attr {
+  display: auto;
+}
+
+.syntax-3 {
+  display: auto;
+}
+
+.tables-3 {
   display: auto;
 }
 
@@ -558,9 +747,10 @@
   line-break: loose;
   overflow-wrap: strict;
   tab-size: match-parent;
-  display: hanging;
+  text-align-all: hanging;
   display: each-line;
   display: full-width;
+  display: anywhere;
 }
 
 .text-4 {
@@ -604,7 +794,11 @@
   display: over;
 }
 
-.transforms {
+.timing-1 {
+  display: frames(2);
+}
+
+.transforms-1 {
   backface-visibility: flat;
   perspective: preserve-3d;
   perspective-origin: matrix(1);
@@ -653,7 +847,7 @@
   caret-animation: underscore;
 }
 
-.values {
+.values-3 {
   display: 1ch;
   display: 1vw;
   display: 1vh;
@@ -661,10 +855,9 @@
   display: 1q;
   display: 1turn;
   display: calc(100%/3 - 2*1em - 2*1px);
-  display: toggle(italic, normal);
 }
 
-.variables {
+.variables-1 {
   var-foo: var(foo);
 }
 
@@ -674,15 +867,15 @@
   user-zoom: auto;
 }
 
-.web-animations {
+.web-animations-1 {
   display: auto;
 }
 
-.will-change {
+.will-change-1 {
   will-change: scroll-position;
 }
 
-.writing-modes {
+.writing-modes-3 {
   writing-mode: before;
   text-orientation: after;
   text-combine-upright: mixed;
@@ -698,37 +891,103 @@
   display: vertical-lr;
 }
 
-.html5-elements,
-article,
-section,
-nav,
-aside,
-header,
-footer,
-figure,
-figcaption,
-main,
-data,
-time,
-mark,
-ruby,
+.html5,
+picture,
 rb,
-rt,
 rtc,
-rp,
-bdi,
-wbr,
-embed,
-video,
-audio,
-source,
-track,
-datalist,
-keygen,
-output,
-progress,
-meter,
-template,
-canvas {
+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;
+}

test/test.html

@@ -8,16 +8,22 @@
 
     <link rel="stylesheet" href="http://hail2u.net/styles/natural.min.css">
 <style>
-.align {
+.align-3 {
   justify-self: safe;
   justify-content: unsafe;
   justify-items: self-start;
   align-self: self-end;
   align-content: flex-start;
   align-items: flex-end;
-  display: space-around;
-  display: space-between;
-  display: space-evenly;
+  place-self: space-around;
+  place-content: space-between;
+  place-items: space-evenly;
+  row-gap: legacy;
+  column-gap: auto;
+  gap: auto;
+  grid-column-gap: auto;
+  grid-row-gap: auto;
+  grid-gap: auto;
 }
 </style>
 <style>
@@ -53,7 +59,7 @@
 }
 </style>
 <style>
-.background-4 {
+.backgrounds-4 {
   background-position-x: x-start;
   background-position-y: x-end;
   background-position-inline: y-start;
@@ -84,7 +90,7 @@
 }
 </style>
 <style>
-.break {
+.break-3 {
   break-after: auto;
   break-before: auto;
   break-inside: auto;
@@ -104,23 +110,31 @@
 }
 </style>
 <style>
-.colors {
+.color {
   opacity: rgba(0, 0, 0, 1);
   display: hsla(0, 0, 0, 1);
-  display: currentColor;
+  display: currentcolor;
 }
 </style>
 <style>
-@supports (display: auto) or
-  (display: auto) not
-  (display: auto) {
-  .conditional {
-    display: auto;
-  }
+@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%));
 }
 </style>
 <style>
-.compositing {
+.compositing-1 {
   mix-blend-mode: multiply;
   isolation: screen;
   background-blend-mode: overlay;
@@ -139,7 +153,23 @@
 }
 </style>
 <style>
-.content {
+@supports (display: auto) or
+  (display: auto) not
+  (display: auto) {
+  .conditional {
+    display: auto;
+  }
+}
+</style>
+<style>
+.contain-1 {
+  contain: layout;
+  display: paint;
+  display: size;
+}
+</style>
+<style>
+.content-3 {
   string-set: open;
   bookmark-level: closed;
   bookmark-label: leader('.');
@@ -150,7 +180,7 @@
 }
 </style>
 <style>
-@counter-style counter-style {
+@counter-style counter-styles-3 {
   system: cyclic;
   negative: symbolic;
   prefix: additive;
@@ -162,9 +192,8 @@
   additive-symbols: auto;
   speak-as: auto;
 }
-</style>
-<style>
-.counter-style {
+
+.counter-styles-3 {
   display: arabic-indic;
   display: upper-armenian;
   display: lower-armenian;
@@ -203,21 +232,20 @@
 }
 </style>
 <style>
-.cssom-view {
-  scroll-behavior: smooth;
-}
-</style>
-<style>
-.cssom {
+.cssom-1 {
   display: auto;
 }
 </style>
 <style>
-.display {
-  box-suppress: flow;
+.cssom-view-1 {
+  scroll-behavior: smooth;
+}
+</style>
+<style>
+.display-3 {
+  display: flow;
   display: flow-root;
   display: contents;
-  display: inline-list-item;
   display: discard;
 }
 </style>
@@ -228,7 +256,39 @@
 }
 </style>
 <style>
-.filter-effects {
+.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;
+}
+</style>
+<style>
+.filter-effects-1 {
   flood-color: sRGB;
   flood-opacity: linearRGB;
   color-interpolation-filters: auto;
@@ -246,7 +306,7 @@
 }
 </style>
 <style>
-.flexbox {
+.flexbox-1 {
   flex-direction: flex;
   flex-wrap: inline-flex;
   flex-flow: row;
@@ -262,7 +322,7 @@
 }
 </style>
 <style>
-.fonts {
+.fonts-3 {
   font-feature-settings: common-ligatures;
   font-kerning: no-common-ligatures;
   font-language-override: discretionary-ligatures;
@@ -301,8 +361,26 @@
 }
 </style>
 <style>
-.gcpm::footnote-call,
-.gcpm::footnote-marker {
+.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;
+}
+</style>
+<style>
+.gcpm-3::footnote-call,
+.gcpm-3::footnote-marker {
   running: footnote;
   footnote-display: line; 
   footnote-policy: element(header);
@@ -315,16 +393,15 @@
 }
 </style>
 <style>
-.grid {
+.grid-1 {
   grid-template-columns: grid;
   grid-template-rows: inline-grid;
   grid-template-areas: minmax(0, 1);
   grid-template: fit-content(10%);
-  grid-auto-columns: repeat(4);
-  grid-auto-rows: 0.2fr;
+  grid-auto-rows: repeat(4);
+  grid-auto-columns: 0.2fr;
   grid-auto-flow: dense;
-  grid-auto-position: auto-flow;
-  grid: subgrid;
+  grid: auto-flow;
   grid-row-start: span;
   grid-column-start: auto;
   grid-row-end: auto;
@@ -332,19 +409,15 @@
   grid-column: auto;
   grid-row: auto;
   grid-area: auto;
-  grid-column-gap: auto;
-  grid-row-gap: auto;
-  grid-gap: auto;
 }
 </style>
 <style>
 .images {
   object-fit: contain;
   object-position: cover;
-  image-resolution: snap;
-  image-orientation: scale-down;
+  image-orientation: snap;
+  display: scale-down;
   display: from-image;
-  display: image("sprite.svg#xywh=40,0,20,20");
   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);
@@ -352,7 +425,14 @@
 }
 </style>
 <style>
-.inline {
+.images-4 {
+  image-resolution: image("sprite.svg#xywh=40,0,20,20");
+  display: element(#test);
+  display: conic-gradient(at 25% 30%, white, black 60%);
+}
+</style>
+<style>
+.inline-3 {
   dominant-baseline: mathematical;
   alignment-baseline: ideographic;
   baseline-shift: auto;
@@ -362,7 +442,7 @@
 }
 </style>
 <style>
-.line-grid {
+.line-grid-1 {
   line-grid: create;
   line-snap: block-start;
   box-snap: block-end;
@@ -371,12 +451,12 @@
 }
 </style>
 <style>
-.lists::marker {
+.lists-3::marker {
   display: auto;
 }
 </style>
 <style>
-.masking {
+.masking-1 {
   clip-path: fill-box;
   clip-rule: stroke-box;
   mask-image: view-box;
@@ -399,11 +479,67 @@
 }
 </style>
 <style>
+.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;
+}
+</style>
+<style>
 .motion-1 {
-  motion-path: path(M 100 100 L 300 100 L 200 300 z);
-  motion-offset: auto;
-  motion-rotation: auto;
-  motion: auto;
+  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;
 }
 </style>
 <style>
@@ -411,7 +547,6 @@
   columns: column;
   column-count: balance;
   column-fill: avoid-column;
-  column-gap: auto;
   column-rule: auto;
   column-rule-color: auto;
   column-rule-style: auto;
@@ -421,11 +556,23 @@
 }
 </style>
 <style>
-.overflow {
+@namespace "http://example.com/css3-namespace/";
+</style>
+<style>
+.overflow-3 {
   max-lines: auto;
 }
 </style>
 <style>
+.overflow-4::nth-fragment(1) {
+  scrollbar-gutter: stable;
+  continue: force;
+  display: overflow;
+  display: paginate;
+  display: fragments;
+}
+</style>
+<style>
 .page {
   display: avoid-page;
   display: page;
@@ -444,7 +591,19 @@
 }
 </style>
 <style>
-.positioning {
+.paint-api-1 {
+  display: paint(my_logo);
+}
+</style>
+<style>
+.pointerevents {
+  touch-action: pan-x;
+  display: pan-y;
+  display: manipulation;
+}
+</style>
+<style>
+.position-3 {
   offset-before: sticky;
   offset-end: auto;
   offset-after: auto;
@@ -452,14 +611,14 @@
 }
 </style>
 <style>
-.pseudo::inactive-selection,
-.pseudo::spelling-error,
-.pseudo::grammer-error {
-  display: block;
+.pseudo-4::inactive-selection,
+.pseudo-4::spelling-error,
+.pseudo-4::grammer-error {
+  display: auto;
 }
 </style>
 <style>
-.regions:region {
+.regions-1:region {
   flow-into: element;
   flow-from: content;
   region-fragment: break;
@@ -468,6 +627,16 @@
 }
 </style>
 <style>
+.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;
+}
+</style>
+<style>
 @media (device-radius: 50%) {
   .round-display-1 {
     shape-inside: outside-shape;
@@ -478,48 +647,76 @@
 }
 </style>
 <style>
-.ruby {
+.ruby-1 {
   ruby-position: ruby-base-container;
   ruby-merge: ruby-text-container;
   ruby-align: inter-character;
 }
 </style>
 <style>
-@scope .scoping {
+@scope .scoping-1 {
   div {
     display: auto;
   }
 }
-</style>
-<style>
-.scoping:scope-context div,
-.scoping:host,
-.scping:host(.foo),
-.scoping:host-context,
-.scoping::shadow,
-.scoping::content,
-.scoping /deep/ span {
+
+.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;
 }
 </style>
 <style>
-.selectors3:target,
-.selectors3:enabled,
-.selectors3:disabled,
-.selectors3:checked,
-.selectors3:indeterminate,
-.selectors3:root,
-.selectors3:empty,
-.selectors3:last-child,
-.selectors3:last-of-type,
-.selectors3:first-of-type,
-.selectors3:only-child,
-.selectors3:only-of-type,
-.selectors3:nth-child(2n+1),
-.selectors3:nth-last-child(-n+2),
-.selectors3:nth-of-type(2n+1),
-.selectors3:nth-last-of-type(n+2),
-.selectors3:not([DISABLED]) {
+.scroll-snap-1 {
+  scroll-snap-type: x;
+  scroll-padding: y;
+  scroll-snap-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-snap-margin-top: auto;
+  scroll-snap-margin-right: auto;
+  scroll-snap-margin-bottom: auto;
+  scroll-snap-margin-left: auto;
+  scroll-snap-margin-inline-start: auto;
+  scroll-snap-margin-block-start: auto;
+  scroll-snap-margin-inline-end: auto;
+  scroll-snap-margin-block-end: auto;
+  scroll-snap-margin-block: auto;
+  scroll-snap-margin-inline: auto;
+}
+</style>
+<style>
+.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;
 }
 </style>
@@ -564,7 +761,7 @@
 }
 </style>
 <style>
-.shapes {
+.shapes-1 {
   shape-outside: margin-box;
   shape-image-threshold: inset(50% 50% 50% 50%);
   shape-margin: circle(100px 50px 100px);
@@ -573,21 +770,13 @@
 }
 </style>
 <style>
-.sizing {
+.sizing-3 {
   display: max-content;
   display: min-content;
   display: fit-content;
 }
 </style>
 <style>
-.snappoints {
-  scroll-snap-type: mandatory;
-  scroll-snap-padding: proximity;
-  scroll-snap-margin: auto;
-  scroll-snap-align: auto;
-}
-</style>
-<style>
 .speech {
   voice-volume: 10dB;
   voice-balance: literal-punctuation;
@@ -605,8 +794,18 @@
   display: reduced;
 }
 </style>
+<style style="display: auto">
+.style-attr {
+  display: auto;
+}
+</style>
 <style>
-.syntax {
+.syntax-3 {
+  display: auto;
+}
+</style>
+<style>
+.tables-3 {
   display: auto;
 }
 </style>
@@ -616,9 +815,10 @@
   line-break: loose;
   overflow-wrap: strict;
   tab-size: match-parent;
-  display: hanging;
+  text-align-all: hanging;
   display: each-line;
   display: full-width;
+  display: anywhere;
 }
 </style>
 <style>
@@ -665,7 +865,12 @@
 }
 </style>
 <style>
-.transforms {
+.timing-1 {
+  display: frames(2);
+}
+</style>
+<style>
+.transforms-1 {
   backface-visibility: flat;
   perspective: preserve-3d;
   perspective-origin: matrix(1);
@@ -718,7 +923,7 @@
 }
 </style>
 <style>
-.values {
+.values-3 {
   display: 1ch;
   display: 1vw;
   display: 1vh;
@@ -726,11 +931,10 @@
   display: 1q;
   display: 1turn;
   display: calc(100%/3 - 2*1em - 2*1px);
-  display: toggle(italic, normal);
 }
 </style>
 <style>
-.variables {
+.variables-1 {
   var-foo: var(foo);
 }
 </style>
@@ -742,17 +946,17 @@
 }
 </style>
 <style>
-.web-animations {
+.web-animations-1 {
   display: auto;
 }
 </style>
 <style>
-.will-change {
+.will-change-1 {
   will-change: scroll-position;
 }
 </style>
 <style>
-.writing-modes {
+.writing-modes-3 {
   writing-mode: before;
   text-orientation: after;
   text-combine-upright: mixed;
@@ -769,40 +973,107 @@
 }
 </style>
 <style>
-.html5-elements,
-article,
-section,
-nav,
-aside,
-header,
-footer,
-figure,
-figcaption,
-main,
-data,
-time,
-mark,
-ruby,
+.html5,
+picture,
 rb,
-rt,
 rtc,
-rp,
-bdi,
-wbr,
-embed,
-video,
-audio,
-source,
-track,
-datalist,
-keygen,
-output,
-progress,
-meter,
-template,
-canvas {
+slot,
+template {
   display: auto;
 }
+</style>
+<style>
+.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;
+}
 </style>
   </head>
   <body>