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
+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
-  * Add Compositing and Blending Level 1 features
+want to highlight Media Queries correctly, you must update Vim to 7.4+ or
-  * Add CSS Fonts Module Level 3 features
+install [JulesWang/css.vim][6].
-  * 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
 
 
 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
+" TODO: create cssCounterStyleDescriptor for `@counter-style` descriptors
-syn keyword cssGeneratedContentProp contained negative prefix suffix range pad fallback
+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 "\<\(japanese\|korean-hanja\|\(simp\|trad\)-chinese\)-\(in\)\=formal\>"
-syn match cssGeneratedContentAttr contained "\<trad-chinese-\(in\)\=formal\>"
+syn match cssGeneratedContentAttr contained "\<korean-hangul-formal\>"
-syn match cssGeneratedContentAttr contained "\<ethiopic-numeric\>"
 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')
+" 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
-endif

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')
+" 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\)\)\>"
-endif

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 region cssInclude start=/@supports\>/ end=/\ze{/ skipwhite skipnl contains=css.*Prop,css.*Attr,cssValueInteger,cssValueLength,cssMediaKeyword,cssVendor,cssIncludeKeyword,cssComment nextgroup=cssMediaBlock
-syn match cssMedia "@supports\>" nextgroup=cssMediaType skipwhite skipnl
-syn match cssMediaAnd "or" nextgroup=cssMediaType skipwhite skipnl
-syn match cssMediaAnd "not" nextgroup=cssMediaType skipwhite skipnl

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 keyword cssFontAttr contained balance
-syn match cssFontAttr contained "\<avoid-\(page\|column\)\>"
+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
+" TODO: Create cssPageAttr group
-" URL:  http://www.w3.org/TR/css3-page/
+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 keyword cssPseudoClassId contained target enabled disabled checked indeterminate root empty
-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 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')
+" 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
-endif

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
+" Scripting
-syn keyword cssTagName details summary menuitem dialog
+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/css-align-3.vim
-syn include @htmlCss syntax/css/css3-values.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 {
+.cascade-3 {
-  all: unset;
+  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 {
+@counter-style counter-style {
-  negative: disclosure-open;
+  system: cyclic;
-  prefix: disclosure-closed;
+  negative: symbolic;
-  suffix: simp-chinese-informal;
+  prefix: additive;
-  range: simp-chinese-formal;
+  suffix: extends;
-  pad: trad-chinese-informal;
+  range: bullets;
-  fallback: trad-chinese-formal;
+  pad: numbers;
-  symbols: ethiopic-numeric;
+  fallback: words;
-  additive-symbols: symbols("*" "\2020" "\2021" "\A7");
+  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-direction: flex;
-  flex: row;
+  flex-wrap: inline-flex;
-  flex-basis: wrap;
+  flex-flow: row;
-  flex-direction: inline-flex;
+  order: row-reverse;
-  flex-flow: row-reverse;
+  flex: column-reverse;
-  flex-grow: 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 {
+.gcpm::footnote-call,
-  bleed: target-counter(attr(href, url), page, decimal);
+.gcpm::footnote-marker {
-  marks: target-text(attr(href), content());
+  string-set: string(heading, first);
-  bookmark-label: open;
+  running: running(heading);
-  bookmark-level: closed;
+  footnote-display: element(header);
-  bookmark-state: target-text(attr(href), content());
+  footnote-policy: footnote;
-  bookmark-target: crop;
+  bookmark-label: line;
-  float-offset: cross;
+  bookmark-level: leader('.');
-  string-set: auto;
+  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-flow: dense;
-  grid-auto-position: columns;
+  grid-auto-position: span;
-  grid: dense;
+  grid: auto;
-  grid-row-start: span;
+  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;
-}
+  grid-column-gap: auto;
-
+  grid-row-gap: auto;
-.hyperlinks {
+  grid-gap: auto;
-  target: current;
-  target-name: new;
-  target-new: modal;
-  target-position: window;
-  display: tab;
-  display: front;
-  display: back;
 }
 
 .images {
@@ -215,78 +273,57 @@
   display: repeating-radial-gradient(farthest-corner at 50% 50%, yellow, green);
 }
 
-.layout::slot(b) {
+.inline {
-  display: same;
+  dominant-baseline: mathematical;
+  alignment-baseline: ideographic;
+  baseline-shift: auto;
+  initial-letter: auto;
+  initial-letter-align: auto;
+  initial-letter-wrap: auto;
 }
 
-.linebox {
+.line-grid {
-  alignment-adjust: central;
+  line-grid: create;
-  alignment-baseline: mathematical;
+  line-snap: block-start;
-  baseline-shift: before-edge;
+  box-snap: block-end;
-  dominate-baseline: after-edge;
+  display: first-baseline;
-  drop-initial-after-adjust: text-before-edge;
+  display: last-baseline;
-  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;
 }
 
 .lists::marker {
-  display: auto;
+  marker-side: marker;
-}
+  counter-set: list-container;
-
+  display: counters(list-item, '.');
-.marquee {
-  marquee-direction: forward;
-  marquee-play-count: reverse;
-  marquee-speed: infinite;
-  marquee-style: slide;
-  display: alternate;
-  display: marquee-line;
-  display: marquee-block;
 }
 
 .masking {
-  mask-image: alpha;
+  clip-path: fill-box;
-  mask-source-type: luminance;
+  clip-rule: stroke-box;
-  mask-repeat: no-clip;
+  mask-image: view-box;
-  mask-position: nonzero;
+  mask-mode: nonzero;
-  mask-clip: evenodd;
+  mask-repeat: evenodd;
-  mask-origin: auto;
+  mask-position: alpha;
-  mask-size: auto;
+  mask-clip: luminance;
-  mask: auto;
+  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;
+  columns: column;
-  column-count: column;
+  column-count: balance;
-  column-fill: balance;
+  column-fill: avoid-column;
-  column-gap: avoid-column;
+  column-gap: auto;
-  column-rule: avoid-page;
+  column-rule: auto;
   column-rule-color: auto;
   column-rule-style: auto;
   column-rule-width: auto;
@@ -302,73 +339,126 @@
   display: fragments;
 }
 
-.preslev {
+.page {
-  presentation-level: increment;
+  display: avoid-page;
+  display: page;
+  display: recto;
+  display: verso;
 }
 
-.regions:region(p),
+.page-floats-3 {
-.regions::region(p) {
+  float-reference: inline-start;
-  flow-from: break;
+  float-defer: inline-end;
-  flow-into: region;
+  float-offset: snap-block;
-  region-fragment: avoid-region;
+  display: snap-inline;
-  display: element;
+  display: snap-block(2em, near);
-  display: content;
+  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]),
+@scope .scoping {
-.selectors3:matches(:hover, :focus),
+  div {
-.selectors3:any-link,
+    display: auto;
-.selectors3:local-link,
+  }
-.selectors3:local-link(0),
+}
+
+.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-child(2n+1),
-.selectors3:nth-last-match(-n+2),
+.selectors3:nth-last-child(-n+2),
-.selectors3:column(p, li, dt, dd),
+.selectors3:nth-of-type(2n+1),
-.selectors3:nth-column(2n+1),
+.selectors3:nth-last-of-type(n+2),
-.selectors3:nth-last-column(-n+2) {
+.selectors3:not([DISABLED]) {
   display: auto;
 }
 
-foo | h1,
+.selectors4 | h1,
-.selectors4:dir(ltr),
+.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,
+.selectors3:matches(:hover, :focus),
-.selectors4:user-error {
+.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
+.text-3 {
-  (display: auto) not
-  (display: auto) {
-    .supports {
-      display: auto;
-    }
-}
-
-.text {
   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 {
+.ui-3 {
-  icon: active;
+  caret-color: grab;
-  resize: inactive;
+  display: grabbing;
-  box-sizing: disabled;
+}
-  ime-mode: root;
+
-  nav-index: horizontal;
+.ui-4 {
-  nav-up: vertical;
+  caret: fade;
-  nav-right: clip;
+  caret-shape: fade(1em);
-  nav-down: ellipsis;
+  caret-animation: underscore;
-  nav-left: auto;
-  outline-offset: auto;
 }
 
 .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,
+template,
-summary,
+canvas {
-menuitem,
-dialog {
   display: auto;
 }

test/test.html

@@ -19,7 +19,8 @@
   display: space-between;
   display: space-evenly;
 }
-
+</style>
+<style>
 .animations {
   animation: forwards;
   animation-delay: backwards;
@@ -31,7 +32,8 @@
   animation-play-state: auto;
   animation-timing-function: auto;
 }
-
+</style>
+<style>
 .background {
   background-clip: space;
   background-origin: round;
@@ -47,10 +49,10 @@
   border-bottom-right-radius: auto;
   border-bottom-left-radius: auto;
   border-top-left-radius: auto;
-        box-decoration-break: auto;
   box-shadow: auto;
 }
-
+</style>
+<style>
 .box {
   overflow-style: scrollbar;
   overflow-x: panner;
@@ -64,23 +66,44 @@
   display: no-display;
   display: no-content;
 }
-
+</style>
+<style>
 .break {
-        break-after: auto;
+  break-after: any;
   break-before: auto;
   break-inside: auto;
+  box-decoration-break: auto;
 }
-
+</style>
-      .cascade {
+<style>
-        all: unset;
+.cascade-3 {
+  all: initial;
+  display: unset;
 }
-
+</style>
+<style>
+@import "test.css" supports(display: auto);
+.cascade-4 {
+  display: revert;
+}
+</style>
+<style>
 .colors {
   opacity: rgba(0, 0, 0, 1);
   display: hsla(0, 0, 0, 1);
   display: currentColor;
 }
-
+</style>
+<style>
+@supports (display: auto) or
+  (display: auto) not
+  (display: auto) {
+  .conditional {
+    display: auto;
+  }
+}
+</style>
+<style>
 .compositing {
   mix-blend-mode: multiply;
   isolation: screen;
@@ -98,42 +121,96 @@
   display: color;
   display: luminosity;
 }
-
+</style>
+<style>
 .content {
   move-to: inhibit;
   page-policy: here;
   display: first;
   display: last;
 }
-
+</style>
-      .counter-styles {
+<style>
-        negative: disclosure-open;
+@counter-style counter-style {
-        prefix: disclosure-closed;
+  system: cyclic;
-        suffix: simp-chinese-informal;
+  negative: symbolic;
-        range: simp-chinese-formal;
+  prefix: additive;
-        pad: trad-chinese-informal;
+  suffix: extends;
-        fallback: trad-chinese-formal;
+  range: bullets;
-        symbols: ethiopic-numeric;
+  pad: numbers;
-        additive-symbols: symbols("*" "\2020" "\2021" "\A7");
+  fallback: words;
+  symbols: symbols("*" "\2020" "\2021" "\A7");
+  additive-symbols: auto;
   speak-as: auto;
 }
-
+</style>
+<style>
+.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;
+}
+</style>
+<style>
+.display {
+  box-suppress: flow;
+  display: flow-root;
+  display: contents;
+  display: inline-list-item;
+  display: discard;
+}
+</style>
+<style>
 .exclusions {
   wrap-flow: minimum;
   wrap-through: maximum;
 }
-
+</style>
+<style>
 .flexbox {
-        order: flex;
+  flex-direction: flex;
-        flex: row;
+  flex-wrap: inline-flex;
-        flex-basis: wrap;
+  flex-flow: row;
-        flex-direction: inline-flex;
+  order: row-reverse;
-        flex-flow: row-reverse;
+  flex: column-reverse;
-        flex-grow: column-reverse;
+  flex-grow: wrap;
   flex-shrink: wrap-reverse;
-        flex-wrap: auto;
+  flex-basis: main-size;
 }
-
+</style>
+<style>
 .fonts {
   font-feature-settings: common-ligatures;
   font-kerning: no-common-ligatures;
@@ -171,47 +248,47 @@
   display: traditional;
   display: proportional-width;
 }
-
+</style>
-      .gcpm {
+<style>
-        bleed: target-counter(attr(href, url), page, decimal);
+.gcpm::footnote-call,
-        marks: target-text(attr(href), content());
+.gcpm::footnote-marker {
-        bookmark-label: open;
+  string-set: string(heading, first);
-        bookmark-level: closed;
+  running: running(heading);
-        bookmark-state: target-text(attr(href), content());
+  footnote-display: element(header);
-        bookmark-target: crop;
+  footnote-policy: footnote;
-        float-offset: cross;
+  bookmark-label: line;
-        string-set: auto;
+  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;
 }
-
+</style>
-      .grid-layout {
+<style>
+.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-flow: dense;
-        grid-auto-position: columns;
+  grid-auto-position: span;
-        grid: dense;
+  grid: auto;
-        grid-row-start: span;
+  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;
+  grid-column-gap: auto;
+  grid-row-gap: auto;
+  grid-gap: auto;
 }
-
+</style>
-      .hyperlinks {
+<style>
-        target: current;
-        target-name: new;
-        target-new: modal;
-        target-position: window;
-        display: tab;
-        display: front;
-        display: back;
-      }
-
 .images {
   object-fit: contain;
   object-position: cover;
@@ -224,86 +301,69 @@
   display: repeating-linear-gradient(to bottom, yellow, blue);
   display: repeating-radial-gradient(farthest-corner at 50% 50%, yellow, green);
 }
-
+</style>
-      .layout::slot(b) {
+<style>
-        display: same;
+.inline {
+  dominant-baseline: mathematical;
+  alignment-baseline: ideographic;
+  baseline-shift: auto;
+  initial-letter: auto;
+  initial-letter-align: auto;
+  initial-letter-wrap: auto;
 }
-
+</style>
-      .linebox {
+<style>
-        alignment-adjust: central;
+.line-grid {
-        alignment-baseline: mathematical;
+  line-grid: create;
-        baseline-shift: before-edge;
+  line-snap: block-start;
-        dominate-baseline: after-edge;
+  box-snap: block-end;
-        drop-initial-after-adjust: text-before-edge;
+  display: first-baseline;
-        drop-initial-after-align: text-after-edge;
+  display: last-baseline;
-        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;
 }
-
+</style>
+<style>
 .lists::marker {
   display: auto;
 }
-
+</style>
-      .marquee {
+<style>
-        marquee-direction: forward;
-        marquee-play-count: reverse;
-        marquee-speed: infinite;
-        marquee-style: slide;
-        display: alternate;
-        display: marquee-line;
-        display: marquee-block;
-      }
-
 .masking {
-        mask-image: alpha;
+  clip-path: fill-box;
-        mask-source-type: luminance;
+  clip-rule: stroke-box;
-        mask-repeat: no-clip;
+  mask-image: view-box;
-        mask-position: nonzero;
+  mask-mode: nonzero;
-        mask-clip: evenodd;
+  mask-repeat: evenodd;
-        mask-origin: auto;
+  mask-position: alpha;
-        mask-size: auto;
+  mask-clip: luminance;
-        mask: auto;
+  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;
 }
-
+</style>
-      @media screen and (min-width: 999px) {
+<style>
-        .mediaqueries {
-          display: auto;
-        }
-      }
-
 .multicol {
-        columns: page;
+  columns: column;
-        column-count: column;
+  column-count: balance;
-        column-fill: balance;
+  column-fill: avoid-column;
-        column-gap: avoid-column;
+  column-gap: auto;
-        column-rule: avoid-page;
+  column-rule: auto;
   column-rule-color: auto;
   column-rule-style: auto;
   column-rule-width: auto;
   column-span: auto;
   column-width: auto;
 }
-
+</style>
+<style>
 .overflow {
   max-lines: paged-x;
   display: paged-y;
@@ -311,77 +371,142 @@
   display: paged-y-controls;
   display: fragments;
 }
-
+</style>
-      .preslev {
+<style>
-        presentation-level: increment;
+.page {
+  display: avoid-page;
+  display: page;
+  display: recto;
+  display: verso;
 }
-
+</style>
-      .regions:region(p),
+<style>
-      .regions::region(p) {
+.page-floats-3 {
-        flow-from: break;
+  float-reference: inline-start;
-        flow-into: region;
+  float-defer: inline-end;
-        region-fragment: avoid-region;
+  float-offset: snap-block;
-        display: element;
+  display: snap-inline;
-        display: content;
+  display: snap-block(2em, near);
+  display: snap-inline(2em, near);
 }
-
+</style>
+<style>
+.positioning {
+  offset-before: sticky;
+  offset-end: auto;
+  offset-after: auto;
+  offset-start: auto;
+}
+</style>
+<style>
+.pseudo::selection,
+.pseudo::spelling-error,
+.pseudo::grammer-error,
+.pseuod::placeholder {
+  display: block;
+}
+</style>
+<style>
+.regions:region {
+  flow-into: element;
+  flow-from: content;
+  region-fragment: break;
+  display: region;
+  display: avoid-region;
+}
+</style>
+<style>
+@media (device-radius: 50%) {
+  .round-display-1 {
+    shape-inside: outside-shape;
+    border-boundary: shape-box;
+    polar-angle: parent;
+    polar-distance: polar;
+  }
+}
+</style>
+<style>
 .ruby {
+  ruby-position: ruby-base-container;
   ruby-merge: ruby-text-container;
   ruby-align: inter-character;
-        ruby-position: ruby-base-container;
 }
-
+</style>
-      .selectors3:not([DISABLED]),
+<style>
-      .selectors3:matches(:hover, :focus),
+@scope .scoping {
-      .selectors3:any-link,
+  div {
-      .selectors3:local-link,
+    display: auto;
-      .selectors3:local-link(0),
+  }
+}
+</style>
+<style>
+.scoping:scope-context div,
+.scoping:host,
+.scping:host(.foo),
+.scoping:host-context,
+.scoping::shadow,
+.scoping::content,
+.scoping /deep/ span {
+  display: auto;
+}
+</style>
+<style>
 .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-child(2n+1),
-      .selectors3:nth-last-match(-n+2),
+.selectors3:nth-last-child(-n+2),
-      .selectors3:column(p, li, dt, dd),
+.selectors3:nth-of-type(2n+1),
-      .selectors3:nth-column(2n+1),
+.selectors3:nth-last-of-type(n+2),
-      .selectors3:nth-last-column(-n+2) {
+.selectors3:not([DISABLED]) {
   display: auto;
 }
-
+</style>
-      foo | h1,
+<style>
-      .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,
+.selectors3:matches(:hover, :focus),
-      .selectors4:user-error {
+.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;
 }
-
+</style>
+<style>
 .shapes {
   shape-outside: margin-box;
   shape-image-threshold: inset(50% 50% 50% 50%);
@@ -389,7 +514,8 @@
   display: ellipse(0 0 250px 100px);
   display: polygon(0 0, 100% 100%, 0 100%);
 }
-
+</style>
+<style>
 .sizing {
   display: max-content;
   display: fit-content;
@@ -397,7 +523,17 @@
   display: repudiate-floats;
   display: contain-floats;
 }
-
+</style>
+<style>
+.snappoints {
+  scroll-snap-type: mandatory;
+  scroll-snap-points-x: proximity;
+  scroll-snap-points-y: auto;
+  scroll-snap-destination: auto;
+  scroll-snap-coordinate: auto;
+}
+</style>
+<style>
 .speech {
   voice-volume: 10dB;
   voice-balance: literal-punctuation;
@@ -414,16 +550,9 @@
   display: moderate;
   display: reduced;
 }
-
+</style>
-      @supports (display: auto) or
+<style>
-        (display: auto) not
+.text-3 {
-        (display: auto) {
-        .supports {
-          display: auto;
-        }
-      }
-
-      .text {
   hyphens: manual;
   line-break: loose;
   overflow-wrap: strict;
@@ -432,7 +561,34 @@
   display: each-line;
   display: full-width;
 }
-
+</style>
+<style>
+.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;
+}
+</style>
+<style>
 .text-decor-3 {
   text-decoration-color: filled;
   text-decoration-line: dot;
@@ -448,7 +604,8 @@
   display: under;
   display: over;
 }
-
+</style>
+<style>
 .transforms {
   backface-visibility: flat;
   perspective: preserve-3d;
@@ -474,7 +631,8 @@
   display: skewY(1);
   display: perspective(1);
 }
-
+</style>
+<style>
 .transitions {
   transition: linear;
   transition-property: ease;
@@ -486,39 +644,43 @@
   display: steps(1, start);
   display: cubic-bezier(0.25, 0.1, 0.25, 1.0);
 }
-
+</style>
-      .ui {
+<style>
-        icon: active;
+.ui-3 {
-        resize: inactive;
+  caret-color: grab;
-        box-sizing: disabled;
+  display: grabbing;
-        ime-mode: root;
-        nav-index: horizontal;
-        nav-up: vertical;
-        nav-right: clip;
-        nav-down: ellipsis;
-        nav-left: auto;
-        outline-offset: auto;
 }
-
+</style>
+<style>
+.ui-4 {
+  caret: fade;
+  caret-shape: fade(1em);
+  caret-animation: underscore;
+}
+</style>
+<style>
 .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;
 }
-
+</style>
+<style>
 .variables {
   var-foo: var(foo);
 }
-
+</style>
+<style>
+.will-change {
+  will-change: scroll-position;
+}
+</style>
+<style>
 .writing-modes {
   text-orientation: before;
   text-combine-horizontal: after;
@@ -535,14 +697,13 @@
   display: vertical-rl;
   display: vertical-lr;
 }
-
+</style>
+<style>
 .html5-elements,
-      template,
 article,
 section,
 nav,
 aside,
-      hgroup,
 header,
 footer,
 figure,
@@ -552,7 +713,9 @@
 time,
 mark,
 ruby,
+rb,
 rt,
+rtc,
 rp,
 bdi,
 wbr,
@@ -561,21 +724,16 @@
 audio,
 source,
 track,
-      canvas,
 datalist,
 keygen,
 output,
 progress,
 meter,
-      details,
+template,
-      summary,
+canvas {
-      menuitem,
-      dialog {
   display: auto;
 }
 </style>
-
-    <!--[if lt IE 9]><script src="http://hail2u.net/scripts/html5shiv.min.js"></script><![endif]-->
   </head>
   <body>
     <header>