Add css3-syntax.vim

See also: http://www.w3.org/TR/css3-syntax/

README.md

@@ -42,7 +42,7 @@ Or in your `~/.vimrc`:
       autocmd FileType css setlocal iskeyword+=-
     augroup END
 
-This setting have side effects, so use it at your own risk.
+This setting have side effects. So, use it at your own risk.
 
 
 ### Vendor Prefixes

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

@@ -0,0 +1,7 @@
+syn keyword cssFontProp contained corners
+syn match cssFontProp contained "\<background-position-\(x\|y\|inline\|block\)\>"
+syn match cssFontProp contained "\<corner-shape\>"
+syn match cssFontProp contained "\<border-limit\>"
+syn match cssFontProp contained "\<border-clip\(-\(top\|right\|bottom\|left\)\)\=\>"
+syn keyword cssFontAttr contained bevel scoop notch
+syn match cssFontAttr contained "\<\(x\|y\)-\(start\|end\)\>"

after/syntax/css/css-device-adapt.vim

@@ -0,0 +1,2 @@
+syn match cssFontProp contained "\<\(min\|max\|user\)-zoom\>"
+syn region cssInclude start=/@viewport\>/ end=/\ze{/ skipwhite skipnl contains=css.*Prop,css.*Attr,cssValueInteger,cssValueLength,cssMediaKeyword,cssVendor,cssIncludeKeyword,cssComment nextgroup=cssMediaBlock

after/syntax/css/css-font-loading-3.vim

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

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

@@ -1,7 +1,8 @@
-" 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\)\)\>"
+syn match cssFontProp contained "\<text-\(orientation\|combine-upright\)\>"
+syn match cssFontProp contained "\<glyph-orientation-vertical\>"
+syn keyword cssFontAttr contained before after mixed upright plaintext
+syn match cssFontAttr contained "\<sideways\(-rl\|-lr\)\=\>"
+syn match cssFontAttr contained "\<isolate\(-override\)\=\>"
+syn match cssFontAttr contained "\<horizontal-tb\>"
+syn match cssFontAttr contained "\<vertical-\(rl\|lr\)\>"

after/syntax/css/css3-syntax.vim

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

after/syntax/css/cssom-view.vim

@@ -0,0 +1,2 @@
+syn match cssFontProp contained "\<scroll-behavior\>"
+syn keyword cssFontAttr contained instant smooth

after/syntax/css/cssom.vim

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

after/syntax/css/filter-effects.vim

@@ -0,0 +1,4 @@
+syn match cssFontProp contained "\<flood-\(color\|opacity\)\>"
+syn match cssFontProp contained "\<color-interpolation-filters\>"
+syn match cssFontProp contained "\<lighting-color\>"
+syn keyword cssFontAttr sRGB linearRGB

after/syntax/css/geometry-1.vim

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

after/syntax/css/motion-1.vim

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

after/syntax/css/selectors-nonelement-1.vim

@@ -0,0 +1 @@
+syn region cssPseudoClassLang matchgroup=cssPseudoClassId start="::attr(" end=")" oneline

after/syntax/css/web-animations.vim

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

after/syntax/html.vim

@@ -1,5 +1,36 @@
-syn include @htmlCss syntax/css/html5-elements.vim
 syn include @htmlCss syntax/css/compositing-1.vim
+syn include @htmlCss syntax/css/css-align-3.vim
+syn include @htmlCss syntax/css/css-backgrounds-4.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-device-adapt.vim
+syn include @htmlCss syntax/css/css-display-3.vim
+syn include @htmlCss syntax/css/css-flexbox-1.vim
+syn include @htmlCss syntax/css/css-font-loading-3.vim
+syn include @htmlCss syntax/css/css-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-page-floats-3.vim
+syn include @htmlCss syntax/css/css-pseudo-4.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/css3-animations.vim
 syn include @htmlCss syntax/css/css3-background.vim
 syn include @htmlCss syntax/css/css3-box.vim
@@ -17,35 +48,15 @@ syn include @htmlCss syntax/css/css3-regions.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-syntax.vim
 syn include @htmlCss syntax/css/css3-transforms.vim
 syn include @htmlCss syntax/css/css3-transitions.vim
-syn include @htmlCss syntax/css/css-align-3.vim
-syn include @htmlCss syntax/css/css-cascade-3.vim
-syn include @htmlCss syntax/css/css-cascade-4.vim
-syn include @htmlCss syntax/css/css-counter-styles-3.vim
-syn include @htmlCss syntax/css/css-display-3.vim
-syn include @htmlCss syntax/css/css-flexbox-1.vim
-syn include @htmlCss syntax/css/css-gcpm-3.vim
-syn include @htmlCss syntax/css/css-grid-1.vim
-syn include @htmlCss syntax/css/css-inline-3.vim
-syn include @htmlCss syntax/css/css-line-grid-1.vim
-syn include @htmlCss syntax/css/css-lists-3.vim
-syn include @htmlCss syntax/css/css-masking-1.vim
-syn include @htmlCss syntax/css/css-overflow-3.vim
-syn include @htmlCss syntax/css/css-pseudo-4.vim
-syn include @htmlCss syntax/css/css-page-floats-3.vim
-syn include @htmlCss syntax/css/css-round-display-1.vim
-syn include @htmlCss syntax/css/css-ruby-1.vim
-syn include @htmlCss syntax/css/css-scoping-1.vim
-syn include @htmlCss syntax/css/css-shapes-1.vim
-syn include @htmlCss syntax/css/css-snappoints-1.vim
-syn include @htmlCss syntax/css/css-text-3.vim
-syn include @htmlCss syntax/css/css-text-4.vim
-syn include @htmlCss syntax/css/css-text-decor-3.vim
-syn include @htmlCss syntax/css/css-ui-3.vim
-syn include @htmlCss syntax/css/css-ui-4.vim
-syn include @htmlCss syntax/css/css-values.vim
-syn include @htmlCss syntax/css/css-variables.vim
-syn include @htmlCss syntax/css/css-will-change-1.vim
-syn include @htmlCss syntax/css/css-writing-modes-3.vim
+syn include @htmlCss syntax/css/cssom-view.vim
+syn include @htmlCss syntax/css/cssom.vim
+syn include @htmlCss syntax/css/filter-effects.vim
+syn include @htmlCss syntax/css/geometry-1.vim
+syn include @htmlCss syntax/css/html5-elements.vim
+syn include @htmlCss syntax/css/motion-1.vim
+syn include @htmlCss syntax/css/selectors-nonelement-1.vim
 syn include @htmlCss syntax/css/selectors4.vim
+syn include @htmlCss syntax/css/web-animations.vim

test/test.css

@@ -40,6 +40,21 @@
   box-shadow: auto;
 }
 
+.background-4 {
+  background-position-x: x-start;
+  background-position-y: x-end;
+  background-position-inline: y-start;
+  background-position-block: y-end;
+  corner-shape: bevel;
+  corners: scoop;
+  border-limit: notch;
+  border-clip: auto;
+  border-clip-top: auto;
+  border-clip-right: auto;
+  border-clip-bottom: auto;
+  border-clip-left: auto;
+}
+
 .box {
   overflow-style: scrollbar;
   overflow-x: panner;
@@ -161,6 +176,15 @@
   display: ethiopic-numeric;
 }
 
+.cssom-view {
+  scroll-behavior: instant;
+  display: smooth;
+}
+
+.cssom {
+  display: auto;
+}
+
 .display {
   box-suppress: flow;
   display: flow-root;
@@ -174,6 +198,13 @@
   wrap-through: maximum;
 }
 
+.filter-effects {
+  flood-color: sRGB;
+  flood-opacity: linearRGB;
+  color-interpolation-filters: auto;
+  lighting-color: auto;
+}
+
 .flexbox {
   flex-direction: flex;
   flex-wrap: inline-flex;
@@ -185,6 +216,10 @@
   flex-basis: main-size;
 }
 
+.font-loading-3 {
+  display: auto;
+}
+
 .fonts {
   font-feature-settings: common-ligatures;
   font-kerning: no-common-ligatures;
@@ -238,6 +273,10 @@
   display: closed;
 }
 
+.geometry-1 {
+  display: auto;
+}
+
 .grid {
   grid-template-columns: grid;
   grid-template-rows: inline-grid;
@@ -318,6 +357,13 @@
   mask-type: auto;
 }
 
+.motion-1 {
+  motion-path: path(M 100 100 L 300 100 L 200 300 z);
+  motion-offset: auto;
+  motion-rotation: auto;
+  motion: auto;
+}
+
 .multicol {
   columns: column;
   column-count: balance;
@@ -450,7 +496,7 @@
 .selectors4:active-drop-target,
 .selectors4:valid-drop-target,
 .selectors4:invalid-drop-target,
-.selectors3:matches(:hover, :focus),
+.selectors4:matches(:hover, :focus),
 .selectors4:dir(ltr),
 .selectors4:local-link(0),
 .selectors4:current(p, li, dt, dd),
@@ -462,6 +508,10 @@
   display: auto;
 }
 
+.selectors-nonelement-1::attr(title) {
+  display: auto;
+}
+
 .shapes {
   shape-outside: margin-box;
   shape-image-threshold: inset(50% 50% 50% 50%);
@@ -503,6 +553,10 @@
   display: reduced;
 }
 
+.syntax {
+  display: auto;
+}
+
 .text-3 {
   hyphens: manual;
   line-break: loose;
@@ -618,22 +672,31 @@
   var-foo: var(foo);
 }
 
+@viewport {
+  min-zoom: auto;
+  max-zoom: auto;
+  user-zoom: auto;
+}
+
+.web-animations {
+  display: auto;
+}
+
 .will-change {
   will-change: scroll-position;
 }
 
 .writing-modes {
-  text-orientation: before;
-  text-combine-horizontal: after;
-  writing-mode: isolate;
-  display: isolate;
+  writing-mode: before;
+  text-orientation: after;
+  text-combine-upright: mixed;
+  glyph-orientation-vertical: upright;
   display: plaintext;
-  display: mixed;
-  display: upright;
   display: sideways;
-  display: sideways-right;
-  display: sideways-left;
-  display: use-glyph-orientation;
+  display: sideways-rl;
+  display: sideways-lr;
+  display: isolate;
+  display: isolate-override;
   display: horizontal-tb;
   display: vertical-rl;
   display: vertical-lr;

test/test.html

@@ -53,6 +53,22 @@
 }
 </style>
 <style>
+.background-4 {
+  background-position-x: x-start;
+  background-position-y: x-end;
+  background-position-inline: y-start;
+  background-position-block: y-end;
+  corner-shape: bevel;
+  corners: scoop;
+  border-limit: notch;
+  border-clip: auto;
+  border-clip-top: auto;
+  border-clip-right: auto;
+  border-clip-bottom: auto;
+  border-clip-left: auto;
+}
+</style>
+<style>
 .box {
   overflow-style: scrollbar;
   overflow-x: panner;
@@ -184,6 +200,17 @@
 }
 </style>
 <style>
+.cssom-view {
+  scroll-behavior: instant;
+  display: smooth;
+}
+</style>
+<style>
+.cssom {
+  display: auto;
+}
+</style>
+<style>
 .display {
   box-suppress: flow;
   display: flow-root;
@@ -199,6 +226,14 @@
 }
 </style>
 <style>
+.filter-effects {
+  flood-color: sRGB;
+  flood-opacity: linearRGB;
+  color-interpolation-filters: auto;
+  lighting-color: auto;
+}
+</style>
+<style>
 .flexbox {
   flex-direction: flex;
   flex-wrap: inline-flex;
@@ -211,6 +246,11 @@
 }
 </style>
 <style>
+.font-loading-3 {
+  display: auto;
+}
+</style>
+<style>
 .fonts {
   font-feature-settings: common-ligatures;
   font-kerning: no-common-ligatures;
@@ -266,6 +306,11 @@
 }
 </style>
 <style>
+.geometry-1 {
+  display: auto;
+}
+</style>
+<style>
 .grid {
   grid-template-columns: grid;
   grid-template-rows: inline-grid;
@@ -350,6 +395,14 @@
 }
 </style>
 <style>
+.motion-1 {
+  motion-path: path(M 100 100 L 300 100 L 200 300 z);
+  motion-offset: auto;
+  motion-rotation: auto;
+  motion: auto;
+}
+</style>
+<style>
 .multicol {
   columns: column;
   column-count: balance;
@@ -494,7 +547,7 @@
 .selectors4:active-drop-target,
 .selectors4:valid-drop-target,
 .selectors4:invalid-drop-target,
-.selectors3:matches(:hover, :focus),
+.selectors4:matches(:hover, :focus),
 .selectors4:dir(ltr),
 .selectors4:local-link(0),
 .selectors4:current(p, li, dt, dd),
@@ -507,6 +560,11 @@
 }
 </style>
 <style>
+.selectors-nonelement-1::attr(title) {
+  display: auto;
+}
+</style>
+<style>
 .shapes {
   shape-outside: margin-box;
   shape-image-threshold: inset(50% 50% 50% 50%);
@@ -552,6 +610,11 @@
 }
 </style>
 <style>
+.syntax {
+  display: auto;
+}
+</style>
+<style>
 .text-3 {
   hyphens: manual;
   line-break: loose;
@@ -676,23 +739,34 @@
 }
 </style>
 <style>
+@viewport {
+  min-zoom: auto;
+  max-zoom: auto;
+  user-zoom: auto;
+}
+</style>
+<style>
+.web-animations {
+  display: auto;
+}
+</style>
+<style>
 .will-change {
   will-change: scroll-position;
 }
 </style>
 <style>
 .writing-modes {
-  text-orientation: before;
-  text-combine-horizontal: after;
-  writing-mode: isolate;
-  display: isolate;
+  writing-mode: before;
+  text-orientation: after;
+  text-combine-upright: mixed;
+  glyph-orientation-vertical: upright;
   display: plaintext;
-  display: mixed;
-  display: upright;
   display: sideways;
-  display: sideways-right;
-  display: sideways-left;
-  display: use-glyph-orientation;
+  display: sideways-rl;
+  display: sideways-lr;
+  display: isolate;
+  display: isolate-override;
   display: horizontal-tb;
   display: vertical-rl;
   display: vertical-lr;