Add css-round-display-1.vim

See also: http://www.w3.org/TR/2015/WD-css-round-display-1-20150922/

README.md

@@ -7,12 +7,14 @@ Add CSS3 syntax support to [Vim][1]'s built-in `syntax/css.vim`.
 INSTALLATION
 ------------
 
-I **strongly** recommend to install this plugin on *Vim 7.4 or higher with default runtime files*.
+I **strongly** recommend to install this plugin on *Vim 7.4 or higher with
+default runtime files*.
 
 
 ### Manual Installation
 
-Download from GitHub, extract `vim-css3-syntax.tar.gz`, and copy the contents to your `~/.vim` directory.
+Download from GitHub, extract `vim-css3-syntax.tar.gz`, and copy the contents to
+your `~/.vim` directory.
 
 
 ### Installing with Git and pathogen
@@ -24,121 +26,64 @@ Download from GitHub, extract `vim-css3-syntax.tar.gz`, and copy the contents to
 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
+your `~/.vim/after/css.vim`:
+
+    setlocal iskeyword+=-
+
+Or in your `~/.vimrc`:
+
+    augroup VimCSS3Syntax
+      autocmd!
+
+      autocmd FileType css setlocal iskeyword+=-
+    augroup END
+
+This setting have side effects, so use it at your own risk.
+
+
 ### Vendor Prefixes
 
-I do not plan to support CSS3 properties (or functions) with vendor prefixes, such as `-webkit-` or `-moz-`, etc. These are hard to maintain because they are:
+I do not plan to support CSS3 properties (or functions) with vendor prefixes,
+such as `-webkit-` or `-moz-`, etc. These are hard to maintain because they are:
 
   * Added frequently
   * Changed unexpectedly
   * Removed silently
 
-These must be supported by seperate 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:
+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:
 
     :highlight VendorPrefix guifg=#00ffff gui=bold
     :match VendorPrefix /-\(moz\|webkit\|o\|ms\)-[a-zA-Z-]\+/
 
-These commands highlight vendor prefixed properties and functions instantly with cyan and bold (on gVim).
+These commands highlight vendor prefixed properties and functions instantly with
+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 use this plugin with LESS, install [VIM-LESS][5]. Sass's indent synatx and Stylus are not supported.
+`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.
 
 
-HISTORY
--------
+### Media Queries
 
-### v0.9
-
-  * Add Compositing and Blending Level 1 features
-  * Add CSS Fonts Module Level 3 features
-  * Add CSS Speech Module features
-  * Add Selectors Level 4 features
-  * Split CSS Counter Styles Level 3 features from `css3-lists.vim`
-  * Follow spec updates
-  * Add missing values
-  * Add notes about CSS preprocessors
-  * Fix test
-  * Add version checking
-
-
-### v0.8
-
-  * Add CSS Masking Level 1 features
-  * Add CSS Shapes Module Level 1 features
-  * Follow spec updates
-  * Add missing properties
-  * Some minor bug fixes
-
-
-### v0.7
-
-  * Add CSS Conditional Rules Module Level 3 features
-  * Add CSS Intrinsic & Extrinsic Sizing Module Level 3 features
-  * Add CSS Cascading and Inheritance Level 3 features
-  * Add CSS Paged Media Module Level 3 features
-  * Add CSS Custom Properties for Cascading Variables Module Level 1 features
-  * Add CSS Overflow Module Level 3 features
-  * Seperate CSS Text Decoration Module Level 3 features
-  * Follow spec updates
-  * Bundle `after/syntax/html.vim` and `after/syntax/scss.vim`
-  * Some minor bug fixes
-
-
-### v0.6
-
-  * Add Test
-  * Remove deprecated CSS Grid Positioning Module
-  * Follow spec updates
-  * Some minor bug fixes
-
-
-### v0.5
-
-  * Add CSS Regions Module Level 3 features
-  * Add CSS Exclusions and Shapes Module Level 3 features
-  * Add CSS Grid Layout features
-  * Add CSS Box Alignment features
-  * Add `gr` unit
-  * Follow spec updates
-  * Some minor bug fixes
-
-
-### v0.4
-
-  * Add CSS Fragmentation Module Level 3 features
-  * Fix a problem on pseudo-class and pseudo-element names inside @media block
-  * Fix a problem on media type and expression
-  * Add CSS Values and Units Module Level 3 features
-  * Follow spec updates
-  * Some minor bug fixes
-
-
-### v0.3
-
-  * Add CSS3 Presentation Levels Module features
-  * Add CSS3 Lists Module features
-  * Add CSS3 Generated and Replaced Content Module features
-  * Add CSS Template Layout Module features
-  * Add CSS Image Values and Replaced Content Module Level 3 features
-  * Fix a problem on class names inside @media block
-  * Some minor bug fixes
-
-
-### v0.2
-
-  * Almost all CSS3 features added
-
-
-### v0.1
-
-  * Initial release
+I drop Media Queries Level 3 support in v0.12.0. There is no easy way to support
+Media Queries properly with `after` syntax plugin like this one, sorry. If you
+want to highlight Media Queries correctly, you must update Vim to 7.4+ or
+install [JulesWang/css.vim][6].
 
 
 AUTHOR
 ------
 
-Kyo Namegashima <kyo@hail2u.net>
+Kyo Nagashima <hail2u@gmail.com> (https://kyonagashima.com/)
 
 
 LICENSE
@@ -152,3 +97,4 @@ MIT: http://hail2u.mit-license.org/2011
 [3]: http://lesscss.org/
 [4]: http://learnboost.github.io/stylus/
 [5]: https://github.com/groenewege/vim-less
+[6]: https://github.com/JulesWang/css.vim

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

@@ -0,0 +1,2 @@
+syn keyword cssFontProp all
+syn keyword cssCommonAttr contained initial unset

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

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

after/syntax/css/css-counter-styles-3.vim

@@ -1,9 +1,14 @@
-" TODO: create cssCounterStyleDescriptor for `@counter-style` descriptor
-syn keyword cssGeneratedContentProp contained negative prefix suffix range pad fallback
+" TODO: create cssCounterStyleDescriptor for `@counter-style` descriptors
+syn region cssInclude start=/@counter-style\>/ end=/\ze{/ skipwhite skipnl contains=css.*Prop,css.*Attr,cssValueInteger,cssValueLength,cssMediaKeyword,cssVendor,cssIncludeKeyword,cssComment nextgroup=cssMediaBlock
+syn keyword cssGeneratedContentProp contained system negative prefix suffix range pad fallback
 syn match cssGeneratedContentProp contained "\<\(additive-\)\=symbols\>"
 syn match cssGeneratedContentProp contained "\<speak-as\>"
+syn keyword cssGeneratedContentAttr contained cyclic symbolic additive extends bullets numbers words bengali cambodian khmer devanagari gujarati gurmukhi kannada lao malayalam mongolian myanmar oriya persian tamil telugu thai tibetan
+syn match cssGeneratedContentAttr contained "\<\(ethiopic-\)\=numeric\>"
+syn match cssGeneratedContentAttr contained "\<arabic-indic\>"
+syn match cssGeneratedContentAttr contained "\<\(upper\|lower\)-armenian\>"
+syn match cssGeneratedContentAttr contained "\<cjk-\(decimal\|earthly-branch\|heavenly-stem\)\>"
 syn match cssGeneratedContentAttr contained "\<disclosure-\(open\|closed\)\>"
-syn match cssGeneratedContentAttr contained "\<simp-chinese-\(in\)\=formal\>"
-syn match cssGeneratedContentAttr contained "\<trad-chinese-\(in\)\=formal\>"
-syn match cssGeneratedContentAttr contained "\<ethiopic-numeric\>"
+syn match cssGeneratedContentAttr contained "\<\(japanese\|korean-hanja\|\(simp\|trad\)-chinese\)-\(in\)\=formal\>"
+syn match cssGeneratedContentAttr contained "\<korean-hangul-formal\>"
 syn region cssFunction contained matchgroup=cssFunctionName start="\<symbols\s*(" end=")" oneline keepend

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

@@ -0,0 +1,5 @@
+" 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-flexbox-1.vim

@@ -4,3 +4,4 @@ syn match cssFontProp contained "\<flex\(-\(basis\|direction\|flow\|grow\|shrink
 syn keyword cssFontAttr contained flex row wrap
 syn match cssFontAttr contained "\<inline-flex\>"
 syn match cssFontAttr contained "\<\(row\|column\|wrap\)-reverse\>"
+syn match cssFontAttr contained "\<main-size\>"

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

@@ -0,0 +1,7 @@
+syn keyword cssGeneratedContentProp contained running
+syn match cssGeneratedContentProp contained "\<string-set\>"
+syn match cssGeneratedContentProp contained "\<footnote-\(display\|policy\)\>"
+syn match cssGeneratedContentProp contained "\<bookmark-\(label\|level\|state\)\>"
+syn keyword cssGeneratedContentAttr contained footnote line open closed
+syn region cssFunction contained matchgroup=cssFunctionName start="\<\(string\|running\|element\|leader\|target-\(counter\|counters\|text\)\)\s*(" end=")" oneline keepend
+syn match cssPseudoClassId contained "\<footnote-\(call\|marker\)\>"

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

@@ -1,9 +1,9 @@
-" TODO: create cssGridLayoutProp group and cssGridLayoutAttr group
 syn match cssFontProp contained "\<grid-template\(-\(columns\|rows\|areas\)\)\=\>"
 syn match cssFontProp contained "\<grid-auto-\(columns\|rows\|flow\|position\)\>"
 syn match cssFontProp contained "\<grid-\(row\|column\)\(-\(start\|end\)\)\=\>"
 syn match cssFontProp contained "\<grid-area\>"
-syn keyword cssFontAttr contained grid subgrid rows columns dense span
+syn match cssFontProp contained "\<grid\(-\(column\|row\)\)\=-gap\>"
+syn keyword cssFontAttr contained grid subgrid dense span
 syn match cssFontAttr contained "\<inline-grid\>"
 syn match cssValueNumber contained "[01]\(.\d\+\)\=fr"
 syn region cssFunction contained matchgroup=cssFunctionName start="\<\(minmax\|repeat\)\s*(" end=")" oneline keepend

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

@@ -0,0 +1,4 @@
+syn match cssFontProp contained "\<\(dominant\|alignment\)-baseline\>"
+syn match cssFontProp contained "\<baseline-shift\>"
+syn match cssFontProp contained "\<initial-letter\(-\(align\|wrap\)\)\="
+syn keyword cssFontAttr contained mathematical ideographic

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

@@ -0,0 +1,6 @@
+" TODO: create cssLineGridProp and cssLineGridAttr
+syn match cssFontProp contained "\<line-\(grid\|snap\)"
+syn match cssFontProp contained "\<box-snap\>"
+syn keyword cssFontAttr contained create
+syn match cssFontAttr contained "\<block-\(start\|end\)\>"
+syn match cssFontAttr contained "\<\(first\|last\)-baseline\>"

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

@@ -0,0 +1,6 @@
+syn match cssGeneratedContentProp contained "\<marker-side\>"
+syn match cssGeneratedContentProp contained "\<counter-set\>"
+syn keyword cssGeneratedContentAttr contained marker
+syn match cssGeneratedContentAttr contained "\<list-container\>"
+syn keyword cssPseudoClassId contained marker
+syn region cssFunction contained matchgroup=cssFunctionName start="\<counters\s*(" end=")" oneline keepend

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

@@ -1,9 +1,10 @@
 " TODO: create cssMaskingProp group and cssMaskingValue group
-syn match cssFontProp contained "\<mask\(-\(image\|source-type\|repeat\|position\|clip\|origin\|size\|type\)\)\=\>"
-syn match cssFontProp contained "\<mask-box-image\(-\(source\|slice\|width\|outset\|repeat\)\)\=\>"
 syn match cssFontProp contained "\<clip-\(path\|rule\)\>"
-syn keyword cssFontAttr contained alpha luminance nonzero evenodd
+syn match cssFontProp contained "\<mask\(-\(image\|mode\|repeat\|position\|clip\|origin\|size\|composite\|type\)\)\=\>"
+syn match cssFontProp contained "\<mask-border\(-\(source\|mode\|slice\|width\|outset\|repeat\)\)\=\>"
+syn keyword cssFontAttr contained nonzero evenodd alpha luminance add subtract intersect exclude
+syn match cssFontAttr contained "\<\(fill\|stroke\|view\)-box\>"
 syn match cssFontAttr contained "\<no-clip\>"
 
 " http://www.w3.org/TR/css-masking/#MaskElement
-" syn keyword cssTagName mask
+syn keyword cssTagName mask

after/syntax/css/css-page-floats-3.vim

@@ -0,0 +1,4 @@
+syn match cssPositioningProp contained "\<float-\(reference\|defer\|offset\)\>"
+syn match cssPositioningAttr contained "\<inline-\(start\|end\)\>"
+syn match cssPositioningAttr contained "\<snap-\(block\|inline\)\>"
+syn region cssURL contained matchgroup=cssFunctionName start="\<snap-\(block\|inline\)\s*(" end=")" oneline keepend

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

@@ -0,0 +1 @@
+syn match cssPseudoClassId contained "\<\(spelling\|grammer\)-error\>"

after/syntax/css/css-round-display-1.vim

@@ -0,0 +1,7 @@
+syn match cssFontProp contained "\<shape-inside\>"
+syn match cssFontProp contained "\<border-boundary\>"
+syn match cssFontProp contained "\<polar-\(angle\|distance\)\>"
+syn keyword cssFontAttr contained parent polar
+syn match cssFontAttr contained "\<outside-shape\>"
+syn match cssFontAttr contained "\<shape-box\>"
+syn match cssMediaProp contained /device-radius/

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

@@ -0,0 +1,5 @@
+syn region cssInclude start=/@scope\>/ end=/\ze{/ skipwhite skipnl nextgroup=cssMediaBlock
+syn keyword cssPseudoClassId contained host shadow content
+syn match cssPseudoClassId contained "\<\(scope\|host\)-context\>"
+syn region cssPseudoClassLang matchgroup=cssPseudoClassId start=":\(host\)(" end=")" oneline
+syn match cssSelectorOp2 "/deep/"

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

@@ -1,5 +1,4 @@
-if !hlexists('cssShapesProp')
-  syn match cssFontProp contained "\<shape-\(outside\|image-threshold\|margin\)\>"
-  syn match cssFontAttr contained "\<margin-box\>"
-  syn region cssFunction contained matchgroup=cssFunctionName start="\<\(inset\|circle\|ellipse\|polygon\)\s*(" end=")" oneline keepend
-endif
+" TODO: create cssShapesProp group and cssShapesAttr group
+syn match cssFontProp contained "\<shape-\(outside\|image-threshold\|margin\)\>"
+syn match cssFontAttr contained "\<margin-box\>"
+syn region cssFunction contained matchgroup=cssFunctionName start="\<\(inset\|circle\|ellipse\|polygon\)\s*(" end=")" oneline keepend

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

@@ -0,0 +1,2 @@
+syn match cssFontProp contained "\<scroll-snap-\(type\|points-\(x\|y\)\|destination\|coordinate\)\=\>"
+syn keyword cssFontAttr contained mandatory proximity

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

@@ -0,0 +1,14 @@
+syn match cssTextProp contained "\<text-space-\(collapse\|trim\)\>"
+syn match cssTextProp contained "\<text-\(wrap\|spacing\)\>"
+syn match cssTextProp contained "\<wrap-\(before\|after\|inside\)\>"
+syn match cssTextProp contained "\<hyphenate-\(character\|limit-\(zone\|chars\|lines\|last\)\)\>"
+syn keyword cssTextAttr contained spread punctuation
+syn match cssTextAttr contained "\<preserve-\(auto\|trim\|breaks\|spaces\)\>"
+syn match cssTextAttr contained "\<trim-inner\>"
+syn match cssTextAttr contained "\<discard-\(before\|after\)\>"
+syn match cssTextAttr contained "\<avoid-\(line\|flex\)\>"
+syn match cssTextAttr contained "\<pre-wrap-auto\>"
+syn match cssTextAttr contained "\<no-limit\>"
+syn match cssTextAttr contained "\<\(trim\|space\)-\(start\|end\|adjacent\)\>"
+syn match cssTextAttr contained "\<no-compress\>"
+syn match cssTextAttr contained "\<ideograph-\(alpha\|numeric\)\>"

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

@@ -0,0 +1,2 @@
+syn match cssUIProp contained "\<caret-color\>"
+syn keyword cssUIAttr contained grab grabbing

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

@@ -0,0 +1,3 @@
+syn match cssUIProp contained "\<caret\(-\(shape\|animation\)\)\=\>"
+syn keyword cssUIAttr contained fade underscore
+syn region cssFunction contained matchgroup=cssFunctionName start="\<fade\s*(" end=")" oneline keepend

after/syntax/css/css-values.vim

@@ -0,0 +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

after/syntax/css/css-will-change-1.vim

@@ -0,0 +1,3 @@
+" TODO: create cssWillChangeProp group and cssWillChangeAttr group
+syn match cssFontProp contained "\<will-change\>"
+syn match cssFontAttr contained "\<scroll-position\>"

after/syntax/css/css-writing-modes-3.vim

@@ -1,8 +1,7 @@
-if !hlexists('cssWritingModeProp')
-  syn match cssFontProp contained "\<text-\(orientation\|combine-horizontal\)\>"
-  syn match cssFontProp contained "\<writing-mode\>"
-  syn keyword cssFontAttr contained before after mixed isolate plaintext
-  syn match cssFontAttr contained "\<\(upright\|sideways\(-right\|-left\)\=\|use-glyph-orientation\)\>"
-  syn match cssFontAttr contained "\<isolate-override\>"
-  syn match cssFontAttr contained "\<\(horizontal-tb\|vertical-\(rl\|lr\)\)\>"
-endif
+" TODO: create cssWritingModesProp group and cssWritingModesAttr group
+syn match cssFontProp contained "\<text-\(orientation\|combine-horizontal\)\>"
+syn match cssFontProp contained "\<writing-mode\>"
+syn keyword cssFontAttr contained before after mixed isolate plaintext
+syn match cssFontAttr contained "\<\(upright\|sideways\(-right\|-left\)\=\|use-glyph-orientation\)\>"
+syn match cssFontAttr contained "\<isolate-override\>"
+syn match cssFontAttr contained "\<\(horizontal-tb\|vertical-\(rl\|lr\)\)\>"

after/syntax/css/css3-background.vim

@@ -2,6 +2,6 @@
 syn match cssFontProp contained "\<background-\(clip\|origin\|size\)\>"
 syn match cssFontProp contained "\<border-image\(-\(source\|slice\|width\|outset\|repeat\)\)\=\>"
 syn match cssFontProp contained "\<border-\(\(top-right\|bottom-right\|bottom-left\|top-left\)-\)\=radius\>"
-syn match cssFontProp contained "\<box-\(decoration-break\|shadow\)\>"
+syn match cssFontProp contained "\<box-shadow\>"
 syn keyword cssFontAttr contained space round local fill stretch clone slice
 syn match cssFontAttr contained "\<\(padding\|border\|content\)-box\>"

after/syntax/css/css3-break.vim

@@ -1,2 +1,4 @@
 " TODO: create cssBreakProp group and cssBreakAttr group
 syn match cssFontProp contained "\<break-\(after\|before\|inside\)\>"
+syn match cssFontProp contained "\<box-decoration-break\>"
+syn keyword cssFontAttr contained any

after/syntax/css/css3-cascade.vim

@@ -1,3 +0,0 @@
-" TODO: create cssCascadeProp and cssCascadeAttr
-syn keyword cssFontProp all
-syn keyword cssFontAttr unset

after/syntax/css/css3-conditional.vim

@@ -1,4 +1 @@
-" TODO: create cssSupports group and cssSupportsType group
-syn match cssMedia "@supports\>" nextgroup=cssMediaType skipwhite skipnl
-syn match cssMediaAnd "or" nextgroup=cssMediaType skipwhite skipnl
-syn match cssMediaAnd "not" nextgroup=cssMediaType skipwhite skipnl
+syn region cssInclude start=/@supports\>/ end=/\ze{/ skipwhite skipnl contains=css.*Prop,css.*Attr,cssValueInteger,cssValueLength,cssMediaKeyword,cssVendor,cssIncludeKeyword,cssComment nextgroup=cssMediaBlock

after/syntax/css/css3-gcpm.vim

@@ -1,6 +0,0 @@
-syn region cssFunction contained matchgroup=cssFunctionName start="\<\(target-\(counter\|counters\|text\)\|symbols\)\s*(" end=")" oneline keepend
-syn keyword cssGeneratedContentProp contained bleed marks
-syn match cssGeneratedContentProp contained "\<bookmark-\(label\|level\|state\|target\)\>"
-syn match cssGeneratedContentProp contained "\<float-offset\>"
-syn match cssGeneratedContentProp contained "\<string-set\>"
-syn keyword cssGeneratedContentAttr contained open closed crop cross

after/syntax/css/css3-hyperlinks.vim

@@ -1,3 +0,0 @@
-" TODO: create cssHyperlinksProp group and cssHyperlinksAttr group
-syn match cssFontProp contained "\<target\(-\(name\|new\|position\)\)\=\>"
-syn keyword cssFontAttr contained current new modal window tab front back

after/syntax/css/css3-layout.vim

@@ -1,3 +0,0 @@
-" TODO: create cssLayoutAttr group
-syn keyword cssFontAttr contained same
-syn keyword cssPseudoClassId contained slot

after/syntax/css/css3-linebox.vim

@@ -1,16 +0,0 @@
-" TODO: create cssLineboxProp group and cssLineboxAttr group
-syn match cssFontProp contained "\<alignment-\(adjust\|baseline\)\>"
-syn match cssFontProp contained "\<baseline-shift\>"
-syn match cssFontProp contained "\<dominate-baseline\>"
-syn match cssFontProp contained "\<drop-initial-\(after-\(adjust\|align\)\|before-\(adjust\|align\)\|size\|value\)\>"
-syn match cssFontProp contained "\<inline-box-align\>"
-syn match cssFontProp contained "\<line-stacking\(-\(ruby\|shift\|strategy\)\)\=\>"
-syn match cssFontProp contained "\<text-height\>"
-syn keyword cssFontAttr contained central mathematical
-syn match cssFontAttr contained "\<\(text-\)\=\(before\|after\)-edge\>"
-syn match cssFontAttr contained "\<use-script\>"
-syn match cssFontAttr contained "\<caps-height\>"
-syn match cssFontAttr contained "\<\(exclude\|include\)-ruby\>"
-syn match cssFontAttr contained "\<\(consider\|disregard\)-shift\>"
-syn match cssFontAttr contained "\<\(\(inline\|block\)-line\|max\|grid\)-height\>"
-syn match cssFontAttr contained "\<\(font\|text\|max\)-size\>"

after/syntax/css/css3-lists.vim

@@ -1 +0,0 @@
-syn keyword cssPseudoClassId contained marker

after/syntax/css/css3-marquee.vim

@@ -1,4 +0,0 @@
-" TODO: create cssMarqueeProp group and cssMarqueeAttr group
-syn match cssFontProp contained "\<marquee-\(direction\|play-count\|speed\|style\)\>"
-syn keyword cssFontAttr contained forward reverse infinite slide alternate
-syn match cssFontAttr contained "\<marquee-\(line\|block\)\>"

after/syntax/css/css3-mediaqueries.vim

@@ -1,4 +0,0 @@
-syn region cssMediaType contained start='(' end=')' contains=css.*Attr,css.*Prop,cssComment,cssValue.*,cssColor,cssURL,cssImportant,cssError,cssStringQ,cssStringQQ,cssFunction,cssUnicodeEscape nextgroup=cssMediaComma,cssMediaAnd,cssMediaBlock skipwhite skipnl
-syn match cssMediaAnd "and" nextgroup=cssMediaType skipwhite skipnl
-syn clear cssMediaBlock
-syn region cssMediaBlock contained transparent matchgroup=cssBraces start='{' end='}' contains=cssTagName,cssSelectorOp,cssAttributeSelector,cssIdentifier,cssError,cssDefinition,cssPseudoClass,cssPseudoClassLang,cssComment,cssUnicodeEscape,cssClassName,cssURL

after/syntax/css/css3-multicol.vim

@@ -1,5 +1,5 @@
 " 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 keyword cssFontAttr contained page column balance
-syn match cssFontAttr contained "\<avoid-\(page\|column\)\>"
+syn keyword cssFontAttr contained balance
+syn match cssFontAttr contained "\<\(avoid-\)\=column\>"

after/syntax/css/css3-page.vim

@@ -1,2 +1,3 @@
-" TODO: Add support CSS Paged Media Module Level 3
-" URL:  http://www.w3.org/TR/css3-page/
+" TODO: Create cssPageAttr group
+syn keyword cssFontAttr contained recto verso
+syn match cssFontAttr contained "\<\(avoid-\)\=page\>"

after/syntax/css/css3-positioning.vim

@@ -0,0 +1,3 @@
+" TODO: create cssPositioningProp and cssPositioningAttr
+syn match cssFontProp contained "\<offset-\(before\|end\|after\|start\)\>"
+syn keyword cssFontAttr contained sticky

after/syntax/css/css3-preslev.vim

@@ -1,3 +0,0 @@
-" TODO: create cssPresLevProp group and cssPresLevAttr group
-syn match cssFontProp contained "\<presentation-level\>"
-syn keyword cssFontAttr contained increment

after/syntax/css/css3-regions.vim

@@ -1,6 +1,6 @@
 " TODO: create cssRegionsProp group and cssRegionsAttr group
-syn match cssFontProp contained "\<flow-\(from\|into\)\>"
+syn match cssFontProp contained "\<flow-\(into\|from\)\>"
 syn match cssFontProp contained "\<region-fragment\>"
 syn keyword cssFontAttr contained element content break
 syn match cssFontAttr contained "\<\(avoid-\)\=region\>"
-syn region cssPseudoClassLang matchgroup=cssPseudoClassId start="::\=region(" end=")" oneline
+syn keyword cssPseudoClassId contained region

after/syntax/css/css3-selectors.vim

@@ -1,8 +1,5 @@
-syn keyword cssPseudoClassId contained target scope current past future enabled disabled checked indeterminate default required optional root empty blank
-syn match cssPseudoClassId contained "\<\(any\|local\)-link\>"
-syn match cssPseudoClassId contained "\<\(in\|out-of\)-range\>"
-syn match cssPseudoClassId contained "\<read-\(only\|write\)\>"
-syn match cssPseudoClassId contained "\<first-of-type\>"
+syn keyword cssPseudoClassId contained target enabled disabled checked indeterminate root empty
 syn match cssPseudoClassId contained "\<last-\(child\|of-type\)\>"
+syn match cssPseudoClassId contained "\<first-of-type\>"
 syn match cssPseudoClassId contained "\<only-\(child\|of-type\)\>"
-syn region cssPseudoClassLang matchgroup=cssPseudoClassId start=":\(not\|matches\|current\|local-link\|nth\(-last\)\=-\(child\|of-type\|match\|column\)\|column\)(" end=")" oneline
+syn region cssPseudoClassLang matchgroup=cssPseudoClassId start=":\(nth\(-last\)\=-\(child\|of-type\)\|not\)(" end=")" oneline

after/syntax/css/css3-transitions.vim

@@ -1,7 +1,6 @@
-if !hlexists('cssTransitionProp')
-  syn match cssFontProp contained "\<transition\(-\(property\|duration\|timing-function\|delay\)\)\=\>"
-  syn keyword cssFontAttr contained linear
-  syn match cssFontAttr contained "\<ease\(-\(in\|out\|in-out\)\)\=\>"
-  syn match cssFontAttr contained "\<step-\(start\|end\)\>"
-  syn region cssFunction contained matchgroup=cssFunctionName start="\<\(steps\|cubic-bezier\)\s*(" end=")" oneline keepend
-endif
+" TODO: create cssTransitionsProp group and cssTransitionsAttr group
+syn match cssFontProp contained "\<transition\(-\(property\|duration\|timing-function\|delay\)\)\=\>"
+syn keyword cssFontAttr contained linear
+syn match cssFontAttr contained "\<ease\(-\(in\|out\|in-out\)\)\=\>"
+syn match cssFontAttr contained "\<step-\(start\|end\)\>"
+syn region cssFunction contained matchgroup=cssFunctionName start="\<\(steps\|cubic-bezier\)\s*(" end=")" oneline keepend

after/syntax/css/css3-ui.vim

@@ -1,7 +0,0 @@
-syn keyword cssUIProp contained icon resize
-syn match cssUIProp contained "\<box-sizing\>"
-syn match cssUIProp contained "\<ime-mode\>"
-syn match cssUIProp contained "\<nav-\(index\|up\|right\|down\|left\)"
-syn match cssUIProp contained "\<outline-offset\>"
-syn match cssUIProp contained "\<text-overflow\>"
-syn keyword cssUIAttr contained active inactive disabled root horizontal vertical clip ellipsis

after/syntax/css/css3-values.vim

@@ -1,6 +0,0 @@
-syn match cssValueLength contained "[-+]\=\d\+\(\.\d*\)\=\(ch\|rem\|vw\|vh\|vmin\|vmax\)"
-syn match cssValueAngle contained "[-+]\=\d\+\(\.\d*\)\=turn"
-" TODO: create cssValueResolution group
-syn match cssValueNumber contained "[-+]\=\d\+\(\.\d*\)\=dp\(i\|cm\|px\)"
-syn region cssFunction contained matchgroup=cssFunctionName start="\<\(calc\|toggle\)\s*(" end=")" oneline keepend
-syn keyword cssCommonAttr contained initial

after/syntax/css/html5-elements.vim

@@ -1,21 +1,19 @@
 " HTML5 new elements
-" Scripting
-syn keyword cssTagName template
 
 " Sections
-syn keyword cssTagName article section nav aside hgroup header footer
+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 rt rp bdi wbr
+syn keyword cssTagName data time mark ruby rb rt rtc rp bdi wbr
 
 " Embedded content
-syn keyword cssTagName embed video audio source track canvas
+syn keyword cssTagName embed video audio source track
 
 " Forms
 syn keyword cssTagName datalist keygen output progress meter
 
-" Interactive elements
-syn keyword cssTagName details summary menuitem dialog
+" Scripting
+syn keyword cssTagName template canvas

after/syntax/css/selectors4.vim

@@ -1,5 +1,9 @@
 syn match cssSelectorOp "[|]"
-syn match cssPseudoClassId contained "\<\(active\|valid\|invalid\)-drop-target\>"
+syn keyword cssPseudoClassId contained scope current past future default valid invalid required optional blank
+syn match cssPseudoClassId contained "\<\(any\|local\)-link\>"
+syn match cssPseudoClassId contained "\<read-\(only\|write\)\>"
 syn match cssPseudoClassId contained "\<placeholder-shown\>"
+syn match cssPseudoClassId contained "\<\(in\|out-of\)-range\>"
 syn match cssPseudoClassId contained "\<user-error\>"
-syn region cssPseudoClassLang matchgroup=cssPseudoClassId start=":dir(" end=")" oneline
+syn match cssPseudoClassId contained "\<\(active\|valid\|invalid\)-drop-target\>"
+syn region cssPseudoClassLang matchgroup=cssPseudoClassId start=":\(matches\|dir\|local-link\|current\|nth\(-last\)\=-\(match\|column\)\|column\)(" end=")" oneline

after/syntax/html.vim

@@ -1,44 +1,51 @@
 syn include @htmlCss syntax/css/html5-elements.vim
 syn include @htmlCss syntax/css/compositing-1.vim
-syn include @htmlCss syntax/css/css3-align.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-break.vim
-syn include @htmlCss syntax/css/css3-cascade.vim
 syn include @htmlCss syntax/css/css3-colors.vim
-" syn include @htmlCss syntax/css/css3-conditional.vim
+syn include @htmlCss syntax/css/css3-conditional.vim
 syn include @htmlCss syntax/css/css3-content.vim
 syn include @htmlCss syntax/css/css3-exclusions.vim
-syn include @htmlCss syntax/css/css3-flexbox.vim
 syn include @htmlCss syntax/css/css3-fonts.vim
-syn include @htmlCss syntax/css/css3-gcpm.vim
-syn include @htmlCss syntax/css/css3-grid-layout.vim
-syn include @htmlCss syntax/css/css3-hyperlinks.vim
 syn include @htmlCss syntax/css/css3-images.vim
-syn include @htmlCss syntax/css/css3-layout.vim
-syn include @htmlCss syntax/css/css3-linebox.vim
-syn include @htmlCss syntax/css/css3-lists.vim
-syn include @htmlCss syntax/css/css3-marquee.vim
-" syn include @htmlCss syntax/css/css3-mediaqueries.vim
 syn include @htmlCss syntax/css/css3-multicol.vim
 syn include @htmlCss syntax/css/css3-page.vim
-syn include @htmlCss syntax/css/css3-preslev.vim
+syn include @htmlCss syntax/css/css3-positioning.vim
 syn include @htmlCss syntax/css/css3-regions.vim
-syn include @htmlCss syntax/css/css3-ruby.vim
 syn include @htmlCss syntax/css/css3-selectors.vim
 syn include @htmlCss syntax/css/css3-sizing.vim
 syn include @htmlCss syntax/css/css3-speech.vim
 syn include @htmlCss syntax/css/css3-transforms.vim
 syn include @htmlCss syntax/css/css3-transitions.vim
-syn include @htmlCss syntax/css/css3-ui.vim
-syn include @htmlCss syntax/css/css3-values.vim
+syn include @htmlCss syntax/css/css-align-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-counter-styles-3.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-gcpm-3.vim
+syn include @htmlCss syntax/css/css-grid-1.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-masking-1.vim
 syn include @htmlCss syntax/css/css-overflow-3.vim
+syn include @htmlCss syntax/css/css-pseudo-4.vim
+syn include @htmlCss syntax/css/css-page-floats-3.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-shapes-1.vim
+syn include @htmlCss syntax/css/css-snappoints-1.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-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-will-change-1.vim
 syn include @htmlCss syntax/css/css-writing-modes-3.vim
 syn include @htmlCss syntax/css/selectors4.vim

after/syntax/scss.vim

@@ -1,3 +1 @@
 runtime! syntax/css/*.vim
-syn clear cssMediaBlock
-syn region cssMediaBlock contained transparent matchgroup=cssBraces start='{' end='}' contains=TOP

test/test.css

@@ -37,7 +37,6 @@
   border-bottom-right-radius: auto;
   border-bottom-left-radius: auto;
   border-top-left-radius: auto;
-  box-decoration-break: auto;
   box-shadow: auto;
 }
 
@@ -56,13 +55,20 @@
 }
 
 .break {
-  break-after: auto;
+  break-after: any;
   break-before: auto;
   break-inside: auto;
+  box-decoration-break: auto;
 }
 
-.cascade {
-  all: unset;
+.cascade-3 {
+  all: initial;
+  display: unset;
+}
+
+@import "test.css" supports(display: auto);
+.cascade-4 {
+  display: revert;
 }
 
 .colors {
@@ -71,6 +77,14 @@
   display: currentColor;
 }
 
+@supports (display: auto) or
+  (display: auto) not
+  (display: auto) {
+  .conditional {
+    display: auto;
+  }
+}
+
 .compositing {
   mix-blend-mode: multiply;
   isolation: screen;
@@ -96,32 +110,79 @@
   display: last;
 }
 
-.counter-styles {
-  negative: disclosure-open;
-  prefix: disclosure-closed;
-  suffix: simp-chinese-informal;
-  range: simp-chinese-formal;
-  pad: trad-chinese-informal;
-  fallback: trad-chinese-formal;
-  symbols: ethiopic-numeric;
-  additive-symbols: symbols("*" "\2020" "\2021" "\A7");
+@counter-style counter-style {
+  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-style {
+  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;
+}
+
+.display {
+  box-suppress: flow;
+  display: flow-root;
+  display: contents;
+  display: inline-list-item;
+  display: discard;
+}
+
 .exclusions {
   wrap-flow: minimum;
   wrap-through: maximum;
 }
 
 .flexbox {
-  order: flex;
-  flex: row;
-  flex-basis: wrap;
-  flex-direction: inline-flex;
-  flex-flow: row-reverse;
-  flex-grow: column-reverse;
+  flex-direction: flex;
+  flex-wrap: inline-flex;
+  flex-flow: row;
+  order: row-reverse;
+  flex: column-reverse;
+  flex-grow: wrap;
   flex-shrink: wrap-reverse;
-  flex-wrap: auto;
+  flex-basis: main-size;
 }
 
 .fonts {
@@ -162,44 +223,41 @@
   display: proportional-width;
 }
 
-.gcpm {
-  bleed: target-counter(attr(href, url), page, decimal);
-  marks: target-text(attr(href), content());
-  bookmark-label: open;
-  bookmark-level: closed;
-  bookmark-state: target-text(attr(href), content());
-  bookmark-target: crop;
-  float-offset: cross;
-  string-set: auto;
+.gcpm::footnote-call,
+.gcpm::footnote-marker {
+  string-set: string(heading, first);
+  running: running(heading);
+  footnote-display: element(header);
+  footnote-policy: footnote;
+  bookmark-label: line;
+  bookmark-level: leader('.');
+  bookmark-state: target-counter(attr(href url), page);
+  display: target-counters(lack-of-example);
+  display: target-text(attr(href url));
+  display: open;
+  display: closed;
 }
 
-.grid-layout {
+.grid {
   grid-template-columns: grid;
   grid-template-rows: inline-grid;
   grid-template-areas: minmax(0, 1);
   grid-template: repeat(4);
   grid-auto-columns: 0.2fr;
   grid-auto-rows: subgrid;
-  grid-auto-flow: rows;
-  grid-auto-position: columns;
-  grid: dense;
-  grid-row-start: span;
+  grid-auto-flow: dense;
+  grid-auto-position: span;
+  grid: auto;
+  grid-row-start: auto;
   grid-column-start: auto;
   grid-row-end: auto;
   grid-column-end: auto;
   grid-column: auto;
   grid-row: auto;
   grid-area: auto;
-}
-
-.hyperlinks {
-  target: current;
-  target-name: new;
-  target-new: modal;
-  target-position: window;
-  display: tab;
-  display: front;
-  display: back;
+  grid-column-gap: auto;
+  grid-row-gap: auto;
+  grid-gap: auto;
 }
 
 .images {
@@ -215,78 +273,57 @@
   display: repeating-radial-gradient(farthest-corner at 50% 50%, yellow, green);
 }
 
-.layout::slot(b) {
-  display: same;
+.inline {
+  dominant-baseline: mathematical;
+  alignment-baseline: ideographic;
+  baseline-shift: auto;
+  initial-letter: auto;
+  initial-letter-align: auto;
+  initial-letter-wrap: auto;
 }
 
-.linebox {
-  alignment-adjust: central;
-  alignment-baseline: mathematical;
-  baseline-shift: before-edge;
-  dominate-baseline: after-edge;
-  drop-initial-after-adjust: text-before-edge;
-  drop-initial-after-align: text-after-edge;
-  drop-initial-before-adjust: use-script;
-  drop-initial-before-align: caps-height;
-  drop-initial-size: exclude-ruby;
-  drop-initial-value: include-ruby;
-  inline-box-align: consider-shift;
-  line-stacking: disregard-shift;
-  line-stacking-ruby: inline-line-height;
-  line-stacking-shift: block-line-height;
-  line-stacking-strategy: max-height;
-  text-height: grid-height;
-  display: font-size;
-  display: text-size;
-  display: max-size;
+.line-grid {
+  line-grid: create;
+  line-snap: block-start;
+  box-snap: block-end;
+  display: first-baseline;
+  display: last-baseline;
 }
 
 .lists::marker {
-  display: auto;
-}
-
-.marquee {
-  marquee-direction: forward;
-  marquee-play-count: reverse;
-  marquee-speed: infinite;
-  marquee-style: slide;
-  display: alternate;
-  display: marquee-line;
-  display: marquee-block;
+  marker-side: marker;
+  counter-set: list-container;
+  display: counters(list-item, '.');
 }
 
 .masking {
-  mask-image: alpha;
-  mask-source-type: luminance;
-  mask-repeat: no-clip;
-  mask-position: nonzero;
-  mask-clip: evenodd;
-  mask-origin: auto;
-  mask-size: auto;
-  mask: auto;
+  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;
-  mask-box-image-source: auto;
-  mask-box-image-slice: auto;
-  mask-box-image-width: auto;
-  mask-box-image-outset: auto;
-  mask-box-image-repeat: auto;
-  mask-box-image: auto;
-  clip-path: auto;
-  clip-rule: auto;
-}
-
-@media screen and (min-width: 999px) {
-  .mediaqueries {
-    display: auto;
-  }
 }
 
 .multicol {
-  columns: page;
-  column-count: column;
-  column-fill: balance;
-  column-gap: avoid-column;
-  column-rule: avoid-page;
+  columns: column;
+  column-count: balance;
+  column-fill: avoid-column;
+  column-gap: auto;
+  column-rule: auto;
   column-rule-color: auto;
   column-rule-style: auto;
   column-rule-width: auto;
@@ -302,73 +339,126 @@
   display: fragments;
 }
 
-.preslev {
-  presentation-level: increment;
+.page {
+  display: avoid-page;
+  display: page;
+  display: recto;
+  display: verso;
 }
 
-.regions:region(p),
-.regions::region(p) {
-  flow-from: break;
-  flow-into: region;
-  region-fragment: avoid-region;
-  display: element;
-  display: content;
+.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);
+}
+
+.positioning {
+  offset-before: sticky;
+  offset-end: auto;
+  offset-after: auto;
+  offset-start: auto;
+}
+
+.pseudo::selection,
+.pseudo::spelling-error,
+.pseudo::grammer-error,
+.pseuod::placeholder {
+  display: block;
+}
+
+.regions:region {
+  flow-into: element;
+  flow-from: content;
+  region-fragment: break;
+  display: region;
+  display: avoid-region;
+}
+
+@media (device-radius: 50%) {
+  .round-display-1 {
+    shape-inside: outside-shape;
+    border-boundary: shape-box;
+    polar-angle: parent;
+    polar-distance: polar;
+  }
 }
 
 .ruby {
+  ruby-position: ruby-base-container;
   ruby-merge: ruby-text-container;
   ruby-align: inter-character;
-  ruby-position: ruby-base-container;
 }
 
-.selectors3:not([DISABLED]),
-.selectors3:matches(:hover, :focus),
-.selectors3:any-link,
-.selectors3:local-link,
-.selectors3:local-link(0),
+@scope .scoping {
+  div {
+    display: auto;
+  }
+}
+
+.scoping:scope-context div,
+.scoping:host,
+.scping:host(.foo),
+.scoping:host-context,
+.scoping::shadow,
+.scoping::content,
+.scoping /deep/ span {
+  display: auto;
+}
+
 .selectors3:target,
-.selectors3:scope,
-.selectors3:current,
-.selectors3:current(p, li, dt, dd),
-.selectors3:past,
-.selectors3:future,
 .selectors3:enabled,
 .selectors3:disabled,
 .selectors3:checked,
 .selectors3:indeterminate,
-.selectors3:default,
-.selectors3:in-range,
-.selectors3:out-of-range,
-.selectors3:required,
-.selectors3:optional,
-.selectors3:read-only,
-.selectors3:read-write,
 .selectors3:root,
 .selectors3:empty,
-.selectors3:nth-child(2n+1),
 .selectors3:last-child,
-.selectors3:nth-last-child(-n+2),
-.selectors3:only-child,
-.selectors3:first-of-type,
-.selectors3:nth-of-type(2n+1),
 .selectors3:last-of-type,
-.selectors3:nth-last-of-type(n+2),
+.selectors3:first-of-type,
+.selectors3:only-child,
 .selectors3:only-of-type,
-.selectors3:nth-match(2n+1),
-.selectors3:nth-last-match(-n+2),
-.selectors3:column(p, li, dt, dd),
-.selectors3:nth-column(2n+1),
-.selectors3:nth-last-column(-n+2) {
+.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]) {
   display: auto;
 }
 
-foo | h1,
-.selectors4:dir(ltr),
+.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:placeholder-shown,
-.selectors4:user-error {
+.selectors3: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;
 }
 
@@ -388,6 +478,14 @@ foo | h1,
   display: contain-floats;
 }
 
+.snappoints {
+  scroll-snap-type: mandatory;
+  scroll-snap-points-x: proximity;
+  scroll-snap-points-y: auto;
+  scroll-snap-destination: auto;
+  scroll-snap-coordinate: auto;
+}
+
 .speech {
   voice-volume: 10dB;
   voice-balance: literal-punctuation;
@@ -405,15 +503,7 @@ foo | h1,
   display: reduced;
 }
 
-@supports (display: auto) or
-  (display: auto) not
-  (display: auto) {
-    .supports {
-      display: auto;
-    }
-}
-
-.text {
+.text-3 {
   hyphens: manual;
   line-break: loose;
   overflow-wrap: strict;
@@ -423,6 +513,31 @@ foo | h1,
   display: full-width;
 }
 
+.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;
@@ -477,38 +592,36 @@ foo | h1,
   display: cubic-bezier(0.25, 0.1, 0.25, 1.0);
 }
 
-.ui {
-  icon: active;
-  resize: inactive;
-  box-sizing: disabled;
-  ime-mode: root;
-  nav-index: horizontal;
-  nav-up: vertical;
-  nav-right: clip;
-  nav-down: ellipsis;
-  nav-left: auto;
-  outline-offset: auto;
+.ui-3 {
+  caret-color: grab;
+  display: grabbing;
+}
+
+.ui-4 {
+  caret: fade;
+  caret-shape: fade(1em);
+  caret-animation: underscore;
 }
 
 .values {
   display: 1ch;
-  display: 1rem;
   display: 1vw;
   display: 1vh;
   display: 1vmin;
+  display: 1q;
   display: 1turn;
-  display: 1dpi;
-  display: 1dpcm;
-  display: 1dppx;
   display: calc(100%/3 - 2*1em - 2*1px);
   display: toggle(italic, normal);
-  display: initial;
 }
 
 .variables {
   var-foo: var(foo);
 }
 
+.will-change {
+  will-change: scroll-position;
+}
+
 .writing-modes {
   text-orientation: before;
   text-combine-horizontal: after;
@@ -527,12 +640,10 @@ foo | h1,
 }
 
 .html5-elements,
-template,
 article,
 section,
 nav,
 aside,
-hgroup,
 header,
 footer,
 figure,
@@ -542,7 +653,9 @@ data,
 time,
 mark,
 ruby,
+rb,
 rt,
+rtc,
 rp,
 bdi,
 wbr,
@@ -551,15 +664,12 @@ video,
 audio,
 source,
 track,
-canvas,
 datalist,
 keygen,
 output,
 progress,
 meter,
-details,
-summary,
-menuitem,
-dialog {
+template,
+canvas {
   display: auto;
 }