Follow changes in CR-css-ui-3-20170302

See also: http://www.w3.org/TR/2017/CR-css-ui-3-20170302/

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,4 @@
-" 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 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,4 @@
 " 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,4 @@
+syn match cssFontProp contained "\<font-optical-sizing\>"
+syn match cssFontProp contained "\<font-variation-settings\>"
+syn keyword cssFontAttr contained emoji math fangsong
+syn match cssFontAttr contained "\<system-ui\>"

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

@@ -1,5 +1,5 @@
 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\>"

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-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-namespace.vim

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

after/syntax/css/cssom-1.vim

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

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 template

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,23 @@
+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 "\<fill\(-\(opacity\|rule\)\)\=\>"
+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 "\<stroke\(-\(dash\(array\|offset\)\|line\(cap\|join\)\|miterlimit\|opacity\|width\)\)\=\>"
+syn match cssFontProp contained "\<text-anchor\>"
+syn match cssFontProp contained "\<vector-effect\>"
+
+syn keyword cssFontAttr contained arcs butt crispEdges geometricPrecision optimizeQuality painted stroke viewport visibleFill visiblePainted visibleStroke
+syn match cssFontAttr contained "\<bounding-box\>"
+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,12 +4,16 @@ 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-inline-3.vim
@@ -18,45 +22,54 @@ syn include @htmlCss syntax/css/css-lists-3.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-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/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,14 @@
-.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;
+  display: legacy;
 }
 
 .animations {
@@ -40,7 +41,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 +70,7 @@
   display: no-content;
 }
 
-.break {
+.break-3 {
   break-after: auto;
   break-before: auto;
   break-inside: auto;
@@ -86,21 +87,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 +127,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 +151,7 @@
   display: target-text(attr(href url));
 }
 
-@counter-style counter-style {
+@counter-style counter-styles-3 {
   system: cyclic;
   negative: symbolic;
   prefix: additive;
@@ -141,7 +164,7 @@
   speak-as: auto;
 }
 
-.counter-style {
+.counter-styles-3 {
   display: arabic-indic;
   display: upper-armenian;
   display: lower-armenian;
@@ -179,16 +202,16 @@
   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;
@@ -200,7 +223,7 @@
   wrap-through: maximum;
 }
 
-.filter-effects {
+.filter-effects-1 {
   flood-color: sRGB;
   flood-opacity: linearRGB;
   color-interpolation-filters: auto;
@@ -217,7 +240,7 @@
   display: sepia(60%);
 }
 
-.flexbox {
+.flexbox-1 {
   flex-direction: flex;
   flex-wrap: inline-flex;
   flex-flow: row;
@@ -231,7 +254,7 @@
   display: auto;
 }
 
-.fonts {
+.fonts-3 {
   font-feature-settings: common-ligatures;
   font-kerning: no-common-ligatures;
   font-language-override: discretionary-ligatures;
@@ -269,30 +292,36 @@
   display: proportional-width;
 }
 
-.gcpm::footnote-call,
-.gcpm::footnote-marker {
-  running: running(heading);
-  footnote-display: element(header);
-  footnote-policy: footnote;
-  display: line;
+.fonts-4 {
+  font-optical-sizing: emoji;
+  font-variation-settings: math;
+  display: fangsong;
+  display: system-ui;
+}
+
+.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-row-start: span;
-  grid-column-start: auto;
+  grid: auto-flow;
+  grid-row-start: subgrid;
+  grid-column-start: span;
   grid-row-end: auto;
   grid-column-end: auto;
   grid-column: auto;
@@ -316,7 +345,7 @@
   display: repeating-radial-gradient(farthest-corner at 50% 50%, yellow, green);
 }
 
-.inline {
+.inline-3 {
   dominant-baseline: mathematical;
   alignment-baseline: ideographic;
   baseline-shift: auto;
@@ -325,7 +354,7 @@
   initial-letter-wrap: auto;
 }
 
-.line-grid {
+.line-grid-1 {
   line-grid: create;
   line-snap: block-start;
   box-snap: block-end;
@@ -333,13 +362,11 @@
   display: last-baseline;
 }
 
-.lists::marker {
-  marker-side: marker;
-  counter-set: list-container;
-  display: counters(list-item, '.');
+.lists-3::marker {
+  display: auto;
 }
 
-.masking {
+.masking-1 {
   clip-path: fill-box;
   clip-rule: stroke-box;
   mask-image: view-box;
@@ -381,7 +408,9 @@
   column-width: auto;
 }
 
-.overflow {
+@namespace "http://example.com/css3-namespace/";
+
+.overflow-3 {
   max-lines: auto;
 }
 
@@ -401,20 +430,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 +461,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 +479,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 +587,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 +595,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 +618,15 @@
   display: reduced;
 }
 
-.syntax {
+.style-attr {
+  display: auto;
+}
+
+.syntax-3 {
+  display: auto;
+}
+
+.tables-3 {
   display: auto;
 }
 
@@ -604,7 +681,11 @@
   display: over;
 }
 
-.transforms {
+.timing-1 {
+  display: frames(2);
+}
+
+.transforms-1 {
   backface-visibility: flat;
   perspective: preserve-3d;
   perspective-origin: matrix(1);
@@ -653,7 +734,7 @@
   caret-animation: underscore;
 }
 
-.values {
+.values-3 {
   display: 1ch;
   display: 1vw;
   display: 1vh;
@@ -661,10 +742,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 +754,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 +778,113 @@
   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 {
+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: arcs;
+  color-rendering: butt;
+  cx: crispEdges;
+  cy: geometricPrecision;
+  d: optimizeQuality;
+  fill-opacity: painted;
+  fill-rule: stroke;
+  fill: viewport;
+  image-rendering: visibleFill;
+  marker-end: visiblePainted;
+  marker-mid: visibleStroke;
+  marker-start: bounding-box;
+  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);
+  stroke-dasharray: icc-color(foo);
+  stroke-dashoffset: auto;
+  stroke-linecap: auto;
+  stroke-linejoin: auto;
+  stroke-miterlimit: auto;
+  stroke-opacity: auto;
+  stroke-width: auto;
+  stroke: auto;
+  text-anchor: auto;
+  vector-effect: auto;
+  x: auto;
+  y: auto;
+}

test/test.html

@@ -8,16 +8,17 @@
 
     <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;
+  display: legacy;
 }
 </style>
 <style>
@@ -53,7 +54,7 @@
 }
 </style>
 <style>
-.background-4 {
+.backgrounds-4 {
   background-position-x: x-start;
   background-position-y: x-end;
   background-position-inline: y-start;
@@ -84,7 +85,7 @@
 }
 </style>
 <style>
-.break {
+.break-3 {
   break-after: auto;
   break-before: auto;
   break-inside: auto;
@@ -104,23 +105,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 +148,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 +175,7 @@
 }
 </style>
 <style>
-@counter-style counter-style {
+@counter-style counter-styles-3 {
   system: cyclic;
   negative: symbolic;
   prefix: additive;
@@ -162,9 +187,8 @@
   additive-symbols: auto;
   speak-as: auto;
 }
-</style>
-<style>
-.counter-style {
+
+.counter-styles-3 {
   display: arabic-indic;
   display: upper-armenian;
   display: lower-armenian;
@@ -203,18 +227,18 @@
 }
 </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;
@@ -228,7 +252,7 @@
 }
 </style>
 <style>
-.filter-effects {
+.filter-effects-1 {
   flood-color: sRGB;
   flood-opacity: linearRGB;
   color-interpolation-filters: auto;
@@ -246,7 +270,7 @@
 }
 </style>
 <style>
-.flexbox {
+.flexbox-1 {
   flex-direction: flex;
   flex-wrap: inline-flex;
   flex-flow: row;
@@ -262,7 +286,7 @@
 }
 </style>
 <style>
-.fonts {
+.fonts-3 {
   font-feature-settings: common-ligatures;
   font-kerning: no-common-ligatures;
   font-language-override: discretionary-ligatures;
@@ -301,8 +325,16 @@
 }
 </style>
 <style>
-.gcpm::footnote-call,
-.gcpm::footnote-marker {
+.fonts-4 {
+  font-optical-sizing: emoji;
+  font-variation-settings: math;
+  display: fangsong;
+  display: system-ui;
+}
+</style>
+<style>
+.gcpm-3::footnote-call,
+.gcpm-3::footnote-marker {
   running: footnote;
   footnote-display: line; 
   footnote-policy: element(header);
@@ -315,18 +347,17 @@
 }
 </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-row-start: span;
-  grid-column-start: auto;
+  grid: auto-flow;
+  grid-row-start: subgrid;
+  grid-column-start: span;
   grid-row-end: auto;
   grid-column-end: auto;
   grid-column: auto;
@@ -352,7 +383,7 @@
 }
 </style>
 <style>
-.inline {
+.inline-3 {
   dominant-baseline: mathematical;
   alignment-baseline: ideographic;
   baseline-shift: auto;
@@ -362,7 +393,7 @@
 }
 </style>
 <style>
-.line-grid {
+.line-grid-1 {
   line-grid: create;
   line-snap: block-start;
   box-snap: block-end;
@@ -371,12 +402,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;
@@ -421,7 +452,10 @@
 }
 </style>
 <style>
-.overflow {
+@namespace "http://example.com/css3-namespace/";
+</style>
+<style>
+.overflow-3 {
   max-lines: auto;
 }
 </style>
@@ -444,7 +478,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 +498,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 +514,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 +534,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 +648,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 +657,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 +681,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>
@@ -665,7 +751,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 +809,7 @@
 }
 </style>
 <style>
-.values {
+.values-3 {
   display: 1ch;
   display: 1vw;
   display: 1vh;
@@ -726,11 +817,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 +832,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 +859,117 @@
 }
 </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 {
+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: arcs;
+  color-rendering: butt;
+  cx: crispEdges;
+  cy: geometricPrecision;
+  d: optimizeQuality;
+  fill-opacity: painted;
+  fill-rule: stroke;
+  fill: viewport;
+  image-rendering: visibleFill;
+  marker-end: visiblePainted;
+  marker-mid: visibleStroke;
+  marker-start: bounding-box;
+  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);
+  stroke-dasharray: icc-color(foo);
+  stroke-dashoffset: auto;
+  stroke-linecap: auto;
+  stroke-linejoin: auto;
+  stroke-miterlimit: auto;
+  stroke-opacity: auto;
+  stroke-width: auto;
+  stroke: auto;
+  text-anchor: auto;
+  vector-effect: auto;
+  x: auto;
+  y: auto;
+}
 </style>
   </head>
   <body>