Add css-round-display-1.vim

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

README.md

@@ -68,13 +68,13 @@ cyan and bold (on gVim).
 ### CSS Preprocessors: [Sass][2], [LESS][3], and [Stylus][4]
 
 `vim-css3-syntax` supports Sass's SCSS syntax only. If you want to use this
-plugin with LESS, install [VIM-LESS][5]. Sass's indent synatx and Stylus are not
+plugin with LESS, install [VIM-LESS][5]. Sass's indent syntax and Stylus are not
 supported.
 
 
 ### Media Queries
 
-I drop Media Queries Level 3 support in v0.12.0. There is no easy way to supprt
+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].
@@ -83,7 +83,7 @@ install [JulesWang/css.vim][6].
 AUTHOR
 ------
 
-Kyo Namegashima <kyo@hail2u.net>
+Kyo Nagashima <hail2u@gmail.com> (https://kyonagashima.com/)
 
 
 LICENSE

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

@@ -1,5 +1,5 @@
 " TODO: create cssDisplayProp group and cssDisplayAttr group
-syn match cssFontProp contained "\<display-\(inside\|outside\|extras\|box\)\>"
-syn keyword cssFontAttr contained contents
-syn match cssFontAttr contained "\<\(block\|inline\)-level\>"
+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-grid-1.vim

@@ -2,7 +2,8 @@ syn match cssFontProp contained "\<grid-template\(-\(columns\|rows\|areas\)\)\=\
 syn match cssFontProp contained "\<grid-auto-\(columns\|rows\|flow\|position\)\>"
 syn match cssFontProp contained "\<grid-\(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

@@ -1,7 +1,6 @@
 " TODO: create cssLineGridProp and cssLineGridAttr
-syn match cssFontProp contained "\<line-\(grid\|snap\|slack\)"
+syn match cssFontProp contained "\<line-\(grid\|snap\)"
 syn match cssFontProp contained "\<box-snap\>"
-syn match cssFontAttr contained "\<half-border\>"
 syn keyword cssFontAttr contained create
-syn match cssValueNumber contained "\d\+gd"
-syn region cssFunction contained matchgroup=cssFunctionName start="\<round\(down\|up\)\s*(" end=")" oneline keepend
+syn match cssFontAttr contained "\<block-\(start\|end\)\>"
+syn match cssFontAttr contained "\<\(first\|last\)-baseline\>"

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-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/css3-cascade.vim

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

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-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-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-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/html.vim

@@ -1,46 +1,50 @@
 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-content.vim
 syn include @htmlCss syntax/css/css3-exclusions.vim
 syn include @htmlCss syntax/css/css3-fonts.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-marquee.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

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

@@ -61,8 +61,14 @@
   box-decoration-break: auto;
 }
 
-.cascade {
-  all: unset;
+.cascade-3 {
+  all: initial;
+  display: unset;
+}
+
+@import "test.css" supports(display: auto);
+.cascade-4 {
+  display: revert;
 }
 
 .colors {
@@ -104,23 +110,63 @@
   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 {
-  display-inside: block-level;
-  display-outside: inline-level;
-  display-extras: inline-list-item;
-  display-box: contents;
+  box-suppress: flow;
+  display: flow-root;
+  display: contents;
+  display: inline-list-item;
+  display: discard;
 }
 
 .exclusions {
@@ -136,7 +182,7 @@
   flex: column-reverse;
   flex-grow: wrap;
   flex-shrink: wrap-reverse;
-  flex-basis: auto;
+  flex-basis: main-size;
 }
 
 .fonts {
@@ -192,33 +238,26 @@
   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 {
@@ -234,38 +273,21 @@
   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;
 }
 
 .line-grid {
   line-grid: create;
-  line-snap: half-border;
-  line-slack: rounddown(1em);
-  box-snap: roundup(1em);
-  display: 10gd;
-}
-
-.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-snap: block-start;
+  box-snap: block-end;
+  display: first-baseline;
+  display: last-baseline;
 }
 
 .lists::marker {
@@ -274,16 +296,6 @@
   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 {
   clip-path: fill-box;
   clip-rule: stroke-box;
@@ -334,8 +346,27 @@
   display: verso;
 }
 
-.preslev {
-  presentation-level: increment;
+.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 {
@@ -346,10 +377,19 @@
   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;
 }
 
 @scope .scoping {
@@ -438,6 +478,14 @@
   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;
@@ -455,7 +503,7 @@
   display: reduced;
 }
 
-.text {
+.text-3 {
   hyphens: manual;
   line-break: loose;
   overflow-wrap: strict;
@@ -465,6 +513,31 @@
   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;
@@ -519,32 +592,26 @@
   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 {

test/test.html

@@ -7,8 +7,8 @@
     <title>vim-css3-syntax</title>
 
     <link rel="stylesheet" href="http://hail2u.net/styles/natural.min.css">
-    <style>
-      .align {
+<style>
+.align {
   justify-self: safe;
   justify-content: true;
   justify-items: self-start;
@@ -18,9 +18,10 @@
   display: space-around;
   display: space-between;
   display: space-evenly;
-      }
-
-      .animations {
+}
+</style>
+<style>
+.animations {
   animation: forwards;
   animation-delay: backwards;
   animation-direction: running;
@@ -30,9 +31,10 @@
   animation-name: auto;
   animation-play-state: auto;
   animation-timing-function: auto;
-      }
-
-      .background {
+}
+</style>
+<style>
+.background {
   background-clip: space;
   background-origin: round;
   background-size: local;
@@ -48,9 +50,10 @@
   border-bottom-left-radius: auto;
   border-top-left-radius: auto;
   box-shadow: auto;
-      }
-
-      .box {
+}
+</style>
+<style>
+.box {
   overflow-style: scrollbar;
   overflow-x: panner;
   overflow-y: move;
@@ -62,34 +65,46 @@
   display: ruby-text-group;
   display: no-display;
   display: no-content;
-      }
-
-      .break {
+}
+</style>
+<style>
+.break {
   break-after: any;
   break-before: auto;
   break-inside: auto;
   box-decoration-break: auto;
-      }
-
-      .cascade {
-        all: unset;
-      }
-
-      .colors {
+}
+</style>
+<style>
+.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;
-      }
-
-      @supports (display: auto) or
+}
+</style>
+<style>
+@supports (display: auto) or
   (display: auto) not
   (display: auto) {
   .conditional {
     display: auto;
   }
-      }
-
-      .compositing {
+}
+</style>
+<style>
+.compositing {
   mix-blend-mode: multiply;
   isolation: screen;
   background-blend-mode: overlay;
@@ -105,40 +120,86 @@
   display: saturation;
   display: color;
   display: luminosity;
-      }
-
-      .content {
+}
+</style>
+<style>
+.content {
   move-to: inhibit;
   page-policy: here;
   display: first;
   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");
+}
+</style>
+<style>
+@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;
-      }
-
-      .display {
-        display-inside: block-level;
-        display-outside: inline-level;
-        display-extras: inline-list-item;
-        display-box: contents;
-      }
-
-      .exclusions {
+}
+</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;
-      }
-
-      .flexbox {
+}
+</style>
+<style>
+.flexbox {
   flex-direction: flex;
   flex-wrap: inline-flex;
   flex-flow: row;
@@ -146,10 +207,11 @@
   flex: column-reverse;
   flex-grow: wrap;
   flex-shrink: wrap-reverse;
-        flex-basis: auto;
-      }
-
-      .fonts {
+  flex-basis: main-size;
+}
+</style>
+<style>
+.fonts {
   font-feature-settings: common-ligatures;
   font-kerning: no-common-ligatures;
   font-language-override: discretionary-ligatures;
@@ -185,11 +247,11 @@
   display: simplified;
   display: traditional;
   display: proportional-width;
-      }
-
-
-      .gcpm::footnote-call,
-      .gcpm::footnote-marker {
+}
+</style>
+<style>
+.gcpm::footnote-call,
+.gcpm::footnote-marker {
   string-set: string(heading, first);
   running: running(heading);
   footnote-display: element(header);
@@ -201,38 +263,33 @@
   display: target-text(attr(href url));
   display: open;
   display: closed;
-      }
-
-      .grid-layout {
+}
+</style>
+<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-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;
-      }
-
-      .images {
+  grid-column-gap: auto;
+  grid-row-gap: auto;
+  grid-gap: auto;
+}
+</style>
+<style>
+.images {
   object-fit: contain;
   object-position: cover;
   image-resolution: snap;
@@ -243,57 +300,34 @@
   display: radial-gradient(farthest-corner at 50% 50%, yellow, green);
   display: repeating-linear-gradient(to bottom, yellow, blue);
   display: repeating-radial-gradient(farthest-corner at 50% 50%, yellow, green);
-      }
-
-      .layout::slot(b) {
-        display: same;
-      }
-
-      .line-grid {
+}
+</style>
+<style>
+.inline {
+  dominant-baseline: mathematical;
+  alignment-baseline: ideographic;
+  baseline-shift: auto;
+  initial-letter: auto;
+  initial-letter-align: auto;
+  initial-letter-wrap: auto;
+}
+</style>
+<style>
+.line-grid {
   line-grid: create;
-        line-snap: half-border;
-        line-slack: rounddown(1em);
-        box-snap: roundup(1em);
-        display: 10gd;
-      }
-
-      .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;
-      }
-
-      .lists::marker {
+  line-snap: block-start;
+  box-snap: block-end;
+  display: first-baseline;
+  display: last-baseline;
+}
+</style>
+<style>
+.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;
-      }
-
-      .masking {
+}
+</style>
+<style>
+.masking {
   clip-path: fill-box;
   clip-rule: stroke-box;
   mask-image: view-box;
@@ -313,9 +347,10 @@
   mask-border-repeat: auto;
   mask-border: auto;
   mask-type: auto;
-      }
-
-      .multicol {
+}
+</style>
+<style>
+.multicol {
   columns: column;
   column-count: balance;
   column-fill: avoid-column;
@@ -326,128 +361,180 @@
   column-rule-width: auto;
   column-span: auto;
   column-width: auto;
-      }
-
-      .overflow {
+}
+</style>
+<style>
+.overflow {
   max-lines: paged-x;
   display: paged-y;
   display: paged-x-controls;
   display: paged-y-controls;
   display: fragments;
-      }
-
-      .page {
+}
+</style>
+<style>
+.page {
   display: avoid-page;
   display: page;
   display: recto;
   display: verso;
-      }
-
-      .preslev {
-        presentation-level: increment;
-      }
-
-      .regions:region {
+}
+</style>
+<style>
+.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);
+}
+</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;
   }
-
-      .ruby {
+}
+</style>
+<style>
+.ruby {
+  ruby-position: ruby-base-container;
   ruby-merge: ruby-text-container;
   ruby-align: inter-character;
-        ruby-position: ruby-base-container;
-      }
-
-      @scope .scoping {
+}
+</style>
+<style>
+@scope .scoping {
   div {
     display: auto;
   }
-      }
-
-      .scoping:scope-context div,
-      .scoping:host,
-      .scping:host(.foo),
-      .scoping:host-context,
-      .scoping::shadow,
-      .scoping::content,
-      .scoping /deep/ span {
+}
+</style>
+<style>
+.scoping:scope-context div,
+.scoping:host,
+.scping:host(.foo),
+.scoping:host-context,
+.scoping::shadow,
+.scoping::content,
+.scoping /deep/ span {
   display: auto;
-      }
-
-      .selectors3:target,
-      .selectors3:enabled,
-      .selectors3:disabled,
-      .selectors3:checked,
-      .selectors3:indeterminate,
-      .selectors3:root,
-      .selectors3:empty,
-      .selectors3:last-child,
-      .selectors3:last-of-type,
-      .selectors3:first-of-type,
-      .selectors3:only-child,
-      .selectors3:only-of-type,
-      .selectors3:nth-child(2n+1),
-      .selectors3:nth-last-child(-n+2),
-      .selectors3:nth-of-type(2n+1),
-      .selectors3:nth-last-of-type(n+2),
-      .selectors3:not([DISABLED]) {
+}
+</style>
+<style>
+.selectors3:target,
+.selectors3:enabled,
+.selectors3:disabled,
+.selectors3:checked,
+.selectors3:indeterminate,
+.selectors3:root,
+.selectors3:empty,
+.selectors3:last-child,
+.selectors3:last-of-type,
+.selectors3:first-of-type,
+.selectors3:only-child,
+.selectors3:only-of-type,
+.selectors3:nth-child(2n+1),
+.selectors3:nth-last-child(-n+2),
+.selectors3:nth-of-type(2n+1),
+.selectors3:nth-last-of-type(n+2),
+.selectors3:not([DISABLED]) {
   display: auto;
-      }
-
-      .selectors4 | h1,
-      .selectors4:scope,
-      .selectors4:current,
-      .selectors4:past,
-      .selectors4:future,
-      .selectors4:default,
-      .selectors4:valid,
-      .selectors4:invalid,
-      .selectors4:required,
-      .selectors4:optional,
-      .selectors4:blank,
-      .selectors4:any-link,
-      .selectors4:local-link,
-      .selectors4:read-only,
-      .selectors4:read-write,
-      .selectors4:placeholder-shown,
-      .selectors4:in-range,
-      .selectors4:out-of-range,
-      .selectors4:user-error,
-      .selectors4:active-drop-target,
-      .selectors4:valid-drop-target,
-      .selectors4:invalid-drop-target,
-      .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) {
+}
+</style>
+<style>
+.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,
+.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;
-      }
-
-      .shapes {
+}
+</style>
+<style>
+.shapes {
   shape-outside: margin-box;
   shape-image-threshold: inset(50% 50% 50% 50%);
   shape-margin: circle(100px 50px 100px);
   display: ellipse(0 0 250px 100px);
   display: polygon(0 0, 100% 100%, 0 100%);
-      }
-
-      .sizing {
+}
+</style>
+<style>
+.sizing {
   display: max-content;
   display: fit-content;
   display: fill-available;
   display: repudiate-floats;
   display: contain-floats;
-      }
-
-      .speech {
+}
+</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;
   rest-before: no-punctuation;
@@ -462,9 +549,10 @@
   display: 10st;
   display: moderate;
   display: reduced;
-      }
-
-      .text {
+}
+</style>
+<style>
+.text-3 {
   hyphens: manual;
   line-break: loose;
   overflow-wrap: strict;
@@ -472,9 +560,36 @@
   display: hanging;
   display: each-line;
   display: full-width;
-      }
-
-      .text-decor-3 {
+}
+</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;
   text-decoration-skip: triangle;
@@ -488,9 +603,10 @@
   display: box-decoration;
   display: under;
   display: over;
-      }
-
-      .transforms {
+}
+</style>
+<style>
+.transforms {
   backface-visibility: flat;
   perspective: preserve-3d;
   perspective-origin: matrix(1);
@@ -514,9 +630,10 @@
   display: skewX(1);
   display: skewY(1);
   display: perspective(1);
-      }
-
-      .transitions {
+}
+</style>
+<style>
+.transitions {
   transition: linear;
   transition-property: ease;
   transition-duration: ease-in;
@@ -526,45 +643,45 @@
   display: step-end;
   display: steps(1, start);
   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;
-      }
-
-      .values {
+}
+</style>
+<style>
+.ui-3 {
+  caret-color: grab;
+  display: grabbing;
+}
+</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;
-      }
-
-      .variables {
+}
+</style>
+<style>
+.variables {
   var-foo: var(foo);
-      }
-
-      .will-change {
+}
+</style>
+<style>
+.will-change {
   will-change: scroll-position;
-      }
-
-      .writing-modes {
+}
+</style>
+<style>
+.writing-modes {
   text-orientation: before;
   text-combine-horizontal: after;
   writing-mode: isolate;
@@ -579,45 +696,44 @@
   display: horizontal-tb;
   display: vertical-rl;
   display: vertical-lr;
-      }
-
-      .html5-elements,
-      article,
-      section,
-      nav,
-      aside,
-      header,
-      footer,
-      figure,
-      figcaption,
-      main,
-      data,
-      time,
-      mark,
-      ruby,
-      rb,
-      rt,
-      rtc,
-      rp,
-      bdi,
-      wbr,
-      embed,
-      video,
-      audio,
-      source,
-      track,
-      datalist,
-      keygen,
-      output,
-      progress,
-      meter,
-      template,
-      canvas {
+}
+</style>
+<style>
+.html5-elements,
+article,
+section,
+nav,
+aside,
+header,
+footer,
+figure,
+figcaption,
+main,
+data,
+time,
+mark,
+ruby,
+rb,
+rt,
+rtc,
+rp,
+bdi,
+wbr,
+embed,
+video,
+audio,
+source,
+track,
+datalist,
+keygen,
+output,
+progress,
+meter,
+template,
+canvas {
   display: auto;
-      }
-    </style>
-
-    <!--[if lt IE 9]><script src="http://hail2u.net/scripts/html5shiv.min.js"></script><![endif]-->
+}
+</style>
   </head>
   <body>
     <header>