Version 0.24.4

This changes generalize gap specific properties for flexbox, grid, and
multicol. So, move these.

See also: http://www.w3.org/TR/2017/WD-css-align-3-20170906/

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

@@ -1,4 +1,5 @@
 syn match cssFontProp contained "\<\(justify\|align\|place\)-\(self\|content\|items\)\>"
+syn match cssFontProp contained "\<\(grid-\)\=\(\(row\|column\)-\)\=gap\>"
 syn keyword cssFontAttr contained safe unsafe legacy
 syn match cssFontAttr contained "\<\(self\|flex\)-\(start\|end\)\>"
 syn match cssFontAttr contained "\<space-\(between\|around\|evenly\)\>"

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

@@ -1,4 +1,2 @@
-" TODO: create cssDisplayProp group and cssDisplayAttr group
 syn keyword cssFontAttr contained contents discard
 syn match cssFontAttr contained "\<flow\(-root\)\=\>"
-syn match cssFontAttr contained "\<inline-list-item\>"

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

@@ -1,4 +1,10 @@
+syn match cssFontProp contained "\<font-\(min\|max\)-size\>"
+syn match cssFontProp contained "\<font-display\>"
 syn match cssFontProp contained "\<font-optical-sizing\>"
 syn match cssFontProp contained "\<font-variation-settings\>"
-syn keyword cssFontAttr contained emoji math fangsong
+syn match cssFontProp contained "\<font-palette\>"
+syn match cssFontProp contained "\<font-presentation\>"
+syn match cssFontProp contained "\<base-palette\>"
+syn keyword cssFontAttr contained emoji math fangsong infinity swap fallback optional light dark
 syn match cssFontAttr contained "\<system-ui\>"
+syn region cssInclude start=/@font-palette-values\>/ end=/\ze{/ skipwhite skipnl contains=css.*Prop,css.*Attr,cssValueInteger,cssValueLength,cssMediaKeyword,cssVendor,cssIncludeKeyword,cssComment nextgroup=cssMediaBlock

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

@@ -2,8 +2,7 @@ syn match cssFontProp contained "\<grid-template\(-\(columns\|rows\|areas\)\)\=\
 syn match cssFontProp contained "\<grid-auto-\(columns\|rows\|flow\)\>"
 syn match cssFontProp contained "\<grid-\(row\|column\)\(-\(start\|end\)\)\=\>"
 syn match cssFontProp contained "\<grid-area\>"
-syn match cssFontProp contained "\<grid\(-\(column\|row\)\)\=-gap\>"
-syn keyword cssFontAttr contained grid subgrid dense span
+syn keyword cssFontAttr contained grid dense span
 syn match cssFontAttr contained "\<inline-grid\>"
 syn match cssFontAttr contained "\<auto-flow\>"
 syn match cssValueNumber contained "[01]\(.\d\+\)\=fr"

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

@@ -0,0 +1,2 @@
+syn match cssFontProp contained "\<image-resolution\>"
+syn region cssFunction contained matchgroup=cssFunctionName start="\<\(image\|element\|conic-gradient\)\s*(" end=")" oneline keepend

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

@@ -0,0 +1,5 @@
+syn match cssFontProp contained "\<\(\(min\|max\)-\)\=\(block\|inline\)-size\>"
+syn match cssFontProp contained "\<\(margin\|inset\|padding\)\(-\(block\|inline\)\(-\(start\|end\)\)\=\)\=\>"
+syn match cssFontProp contained "\<border-\(block\|inline\)\(\(-\(start\|end\)\)\=\(-\(width\|style\|color\)\)\=\)\=\>"
+syn match cssFontProp contained "\<\(background\|border\)-image-transform\>"
+syn keyword cssFontAttr contained logical physical rotate

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

@@ -0,0 +1,4 @@
+syn keyword cssFontProp contained continue
+syn match cssFontProp contained "\<scrollbar-gutter\>"
+syn keyword cssFontAttr contained stable force overflow paginate fragments
+syn region cssPseudoClassLang matchgroup=cssPseudoClassId start=":\(nth-fragment\)(" end=")" oneline

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

@@ -2,7 +2,8 @@ syn keyword cssTextProp contained hyphens
 syn match cssTextProp contained "\<line-break\>"
 syn match cssTextProp contained "\<overflow-wrap\>"
 syn match cssTextProp contained "\<tab-size\>"
-syn keyword cssTextAttr contained manual loose strict hanging
+syn match cssTextProp contained "\<text-align-all\>"
+syn keyword cssTextAttr contained manual loose strict hanging anywhere
 syn match cssTextAttr contained "\<match-parent\>"
 syn match cssTextAttr contained "\<each-line\>"
 syn match cssTextAttr contained "\<full-width\>"

after/syntax/css/css3-images.vim

@@ -1,7 +1,6 @@
-" TODO: create cssImagesProp group and cssImagesAttr group
 syn match cssFontProp contained "\<object-\(fit\|position\)\>"
-syn match cssFontProp contained "\<image-\(resolution\|orientation\)\>"
+syn match cssFontProp contained "\<image-orientation\>"
 syn keyword cssFontAttr contained contain cover snap
 syn match cssFontAttr contained "\<from-image\>"
 syn match cssFontAttr contained "\<scale-down\>"
-syn region cssFunction contained matchgroup=cssFunctionName start="\<\(image\|\(repeating-\)\=\(linear\|radial\)-gradient\)\s*(" end=")" oneline keepend
+syn region cssFunction contained matchgroup=cssFunctionName start="\<\(\(repeating-\)\=\(linear\|radial\)-gradient\)\s*(" end=")" oneline keepend

after/syntax/css/css3-multicol.vim

@@ -1,5 +1,4 @@
-" 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 match cssFontProp contained "\<column-\(count\|fill\|rule\(-\(color\|style\|width\)\)\=\|span\|width\)\>"
 syn keyword cssFontAttr contained balance
 syn match cssFontAttr contained "\<\(avoid-\)\=column\>"

after/syntax/css/html5.vim

@@ -1 +1 @@
-syn keyword cssTagName picture rb rtc template
+syn keyword cssTagName picture rb rtc slot template

after/syntax/css/motion-1.vim

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

after/syntax/html.vim

@@ -16,11 +16,14 @@ syn include @htmlCss syntax/css/css-fonts-3.vim
 syn include @htmlCss syntax/css/css-fonts-4.vim
 syn include @htmlCss syntax/css/css-gcpm-3.vim
 syn include @htmlCss syntax/css/css-grid-1.vim
+syn include @htmlCss syntax/css/css-images-4.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-logical-1.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-overflow-4.vim
 syn include @htmlCss syntax/css/css-page-floats-3.vim
 syn include @htmlCss syntax/css/css-paint-api-1.vim
 syn include @htmlCss syntax/css/css-position-3.vim

test/test.css

@@ -8,7 +8,12 @@
   place-self: space-around;
   place-content: space-between;
   place-items: space-evenly;
-  display: legacy;
+  row-gap: legacy;
+  column-gap: auto;
+  gap: auto;
+  grid-column-gap: auto;
+  grid-row-gap: auto;
+  grid-gap: auto;
 }
 
 .animations {
@@ -214,7 +219,6 @@
   display: flow;
   display: flow-root;
   display: contents;
-  display: inline-list-item;
   display: discard;
 }
 
@@ -285,6 +289,9 @@
   display: auto;
 }
 
+.fonts-4 {
+}
+
 .fonts-3 {
   font-feature-settings: common-ligatures;
   font-kerning: no-common-ligatures;
@@ -324,10 +331,20 @@
 }
 
 .fonts-4 {
-  font-optical-sizing: emoji;
-  font-variation-settings: math;
-  display: fangsong;
-  display: system-ui;
+  font-min-size: emoji;
+  font-max-size: math;
+  font-display: fangsong;
+  font-optical-sizing: system-ui;
+  font-variation-settings: infinity;
+  font-palette: swap;
+  font-presentation: fallback;
+  display: optional;
+  display: light;
+  display: dark;
+}
+
+@font-palette-values Test {
+  base-palette: 1;
 }
 
 .gcpm-3::footnote-call,
@@ -351,31 +368,33 @@
   grid-auto-columns: 0.2fr;
   grid-auto-flow: dense;
   grid: auto-flow;
-  grid-row-start: subgrid;
-  grid-column-start: span;
+  grid-row-start: span;
+  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;
 }
 
-.images {
+.images-3 {
   object-fit: contain;
   object-position: cover;
-  image-resolution: snap;
-  image-orientation: scale-down;
+  image-orientation: snap;
+  display: scale-down;
   display: from-image;
-  display: image("sprite.svg#xywh=40,0,20,20");
   display: linear-gradient(to bottom, yellow, blue);
   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);
 }
 
+.images-4 {
+  image-resolution: image("sprite.svg#xywh=40,0,20,20");
+  display: element(#test);
+  display: conic-gradient(at 25% 30%, white, black 60%);
+}
+
 .inline-3 {
   dominant-baseline: mathematical;
   alignment-baseline: ideographic;
@@ -397,6 +416,60 @@
   display: auto;
 }
 
+.logical-1 {
+  block-size: logical;
+  inline-size: physical;
+  min-block-size: rotate;
+  min-inline-size: auto;
+  max-block-size: auto;
+  max-inline-size: auto;
+  margin-block-start: auto;
+  margin-block-end: auto;
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+  margin-block: auto;
+  margin-inline: auto;
+  inset-block-start: auto;
+  inset-block-end: auto;
+  inset-inline-start: auto;
+  inset-inline-end: auto;
+  inset-block: auto;
+  inset-inline: auto;
+  inset: auto;
+  padding-block-start: auto;
+  padding-block-end: auto;
+  padding-inline-start: auto;
+  padding-inline-end: auto;
+  padding-block: auto;
+  padding-inline: auto;
+  border-block-start-width: auto;
+  border-block-end-width: auto;
+  border-inline-start-width: auto;
+  border-inline-end-width: auto;
+  border-block-width: auto;
+  border-inline-width: auto;
+  border-block-start-style: auto;
+  border-block-end-style: auto;
+  border-inline-start-style: auto;
+  border-inline-end-style: auto;
+  border-block-style: auto;
+  border-inline-style: auto;
+  border-block-start-color: auto;
+  border-block-end-color: auto;
+  border-inline-start-color: auto;
+  border-inline-end-color: auto;
+  border-block-color: auto;
+  border-inline-color: auto;
+  border-block-start: auto;
+  border-block-end: auto;
+  border-inline-start: auto;
+  border-inline-end: auto;
+  border-block: auto;
+  border-inline: auto;
+  background-image-transform: auto;
+  border-image-transform: auto;
+}
+
 .masking-1 {
   clip-path: fill-box;
   clip-rule: stroke-box;
@@ -420,17 +493,17 @@
 }
 
 .motion-1 {
-  motion-path: path(M 100 100 L 300 100 L 200 300 z);
-  motion-offset: auto;
-  motion-rotation: auto;
-  motion: auto;
+  offset-path: ray(45deg closest-side);
+  offset-distance: path(M 100 100 L 300 100 L 200 300 z);
+  offset-anchor: auto;
+  offset-rotate: auto;
+  offset: auto;
 }
 
 .multicol {
   columns: column;
   column-count: balance;
   column-fill: avoid-column;
-  column-gap: auto;
   column-rule: auto;
   column-rule-color: auto;
   column-rule-style: auto;
@@ -445,6 +518,14 @@
   max-lines: auto;
 }
 
+.overflow-4::nth-fragment(1) {
+  scrollbar-gutter: stable;
+  continue: force;
+  display: overflow;
+  display: paginate;
+  display: fragments;
+}
+
 .page {
   display: avoid-page;
   display: page;
@@ -666,9 +747,10 @@
   line-break: loose;
   overflow-wrap: strict;
   tab-size: match-parent;
-  display: hanging;
+  text-align-all: hanging;
   display: each-line;
   display: full-width;
+  display: anywhere;
 }
 
 .text-4 {
@@ -813,6 +895,7 @@
 picture,
 rb,
 rtc,
+slot,
 template {
   display: auto;
 }

test/test.html

@@ -18,7 +18,12 @@
   place-self: space-around;
   place-content: space-between;
   place-items: space-evenly;
-  display: legacy;
+  row-gap: legacy;
+  column-gap: auto;
+  gap: auto;
+  grid-column-gap: auto;
+  grid-row-gap: auto;
+  grid-gap: auto;
 }
 </style>
 <style>
@@ -241,7 +246,6 @@
   display: flow;
   display: flow-root;
   display: contents;
-  display: inline-list-item;
   display: discard;
 }
 </style>
@@ -358,10 +362,20 @@
 </style>
 <style>
 .fonts-4 {
-  font-optical-sizing: emoji;
-  font-variation-settings: math;
-  display: fangsong;
-  display: system-ui;
+  font-min-size: emoji;
+  font-max-size: math;
+  font-display: fangsong;
+  font-optical-sizing: system-ui;
+  font-variation-settings: infinity;
+  font-palette: swap;
+  font-presentation: fallback;
+  display: optional;
+  display: light;
+  display: dark;
+}
+
+@font-palette-values Test {
+  base-palette: 1;
 }
 </style>
 <style>
@@ -388,26 +402,22 @@
   grid-auto-columns: 0.2fr;
   grid-auto-flow: dense;
   grid: auto-flow;
-  grid-row-start: subgrid;
-  grid-column-start: span;
+  grid-row-start: span;
+  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>
 <style>
 .images {
   object-fit: contain;
   object-position: cover;
-  image-resolution: snap;
-  image-orientation: scale-down;
+  image-orientation: snap;
+  display: scale-down;
   display: from-image;
-  display: image("sprite.svg#xywh=40,0,20,20");
   display: linear-gradient(to bottom, yellow, blue);
   display: radial-gradient(farthest-corner at 50% 50%, yellow, green);
   display: repeating-linear-gradient(to bottom, yellow, blue);
@@ -415,6 +425,13 @@
 }
 </style>
 <style>
+.images-4 {
+  image-resolution: image("sprite.svg#xywh=40,0,20,20");
+  display: element(#test);
+  display: conic-gradient(at 25% 30%, white, black 60%);
+}
+</style>
+<style>
 .inline-3 {
   dominant-baseline: mathematical;
   alignment-baseline: ideographic;
@@ -462,11 +479,67 @@
 }
 </style>
 <style>
+.logical-1 {
+  block-size: logical;
+  inline-size: physical;
+  min-block-size: rotate;
+  min-inline-size: auto;
+  max-block-size: auto;
+  max-inline-size: auto;
+  margin-block-start: auto;
+  margin-block-end: auto;
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+  margin-block: auto;
+  margin-inline: auto;
+  inset-block-start: auto;
+  inset-block-end: auto;
+  inset-inline-start: auto;
+  inset-inline-end: auto;
+  inset-block: auto;
+  inset-inline: auto;
+  inset: auto;
+  padding-block-start: auto;
+  padding-block-end: auto;
+  padding-inline-start: auto;
+  padding-inline-end: auto;
+  padding-block: auto;
+  padding-inline: auto;
+  border-block-start-width: auto;
+  border-block-end-width: auto;
+  border-inline-start-width: auto;
+  border-inline-end-width: auto;
+  border-block-width: auto;
+  border-inline-width: auto;
+  border-block-start-style: auto;
+  border-block-end-style: auto;
+  border-inline-start-style: auto;
+  border-inline-end-style: auto;
+  border-block-style: auto;
+  border-inline-style: auto;
+  border-block-start-color: auto;
+  border-block-end-color: auto;
+  border-inline-start-color: auto;
+  border-inline-end-color: auto;
+  border-block-color: auto;
+  border-inline-color: auto;
+  border-block-start: auto;
+  border-block-end: auto;
+  border-inline-start: auto;
+  border-inline-end: auto;
+  border-block: auto;
+  border-inline: auto;
+  background-image-transform: auto;
+  border-image-transform: auto;
+}
+</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;
+  offset-path: ray(45deg closest-side);
+  offset-distance: path(M 100 100 L 300 100 L 200 300 z);
+  offset-anchor: auto;
+  offset-rotate: auto;
+  offset: auto;
 }
 </style>
 <style>
@@ -474,7 +547,6 @@
   columns: column;
   column-count: balance;
   column-fill: avoid-column;
-  column-gap: auto;
   column-rule: auto;
   column-rule-color: auto;
   column-rule-style: auto;
@@ -492,6 +564,15 @@
 }
 </style>
 <style>
+.overflow-4::nth-fragment(1) {
+  scrollbar-gutter: stable;
+  continue: force;
+  display: overflow;
+  display: paginate;
+  display: fragments;
+}
+</style>
+<style>
 .page {
   display: avoid-page;
   display: page;
@@ -734,9 +815,10 @@
   line-break: loose;
   overflow-wrap: strict;
   tab-size: match-parent;
-  display: hanging;
+  text-align-all: hanging;
   display: each-line;
   display: full-width;
+  display: anywhere;
 }
 </style>
 <style>
@@ -895,6 +977,7 @@
 picture,
 rb,
 rtc,
+slot,
 template {
   display: auto;
 }