Version 0.24.1

See also: http://www.w3.org/TR/2017/WD-css-fonts-4-20170711/

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

@@ -1,4 +1,4 @@
-syn match cssFontProp contained "\<\(justify\|align\)-\(self\|content\|items\)\>"
+syn match cssFontProp contained "\<\(justify\|align\|place\)-\(self\|content\|items\)\>"
 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-contain-1.vim

@@ -0,0 +1,2 @@
+syn keyword cssFontProp contained contain
+syn keyword cssFontAttr contained layout paint size

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

@@ -1,5 +1,4 @@
 " 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-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

@@ -3,7 +3,7 @@ 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-rhythm-1.vim

@@ -0,0 +1,3 @@
+syn match cssFontProp contained "\<line-height-step\>"
+syn match cssFontProp contained "\<block-step\(-\(size\|insert\|align\|round\)\)\=\>"
+syn keyword cssFontAttr contained margin up down nearest

after/syntax/css/css-style-attr.vim

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

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

@@ -0,0 +1 @@
+syn region cssFunction contained matchgroup=cssFunctionName start="\<frames\s*(" end=")" oneline keepend

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-namespace.vim

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

after/syntax/css/fill-stroke-3.vim

@@ -0,0 +1,5 @@
+syn match cssFontProp contained "\<\(fill\|stroke\)\(-\(break\|color\|image\|origin\|position\|size\|repeat\|opacity\)\)\=\>"
+syn match cssFontProp contained "\<fill-rule\>"
+syn match cssFontProp contained "\<stroke-\(width\|align\|line\(cap\|join\)\|miterlimit\|dash\(array\|offset\)\|dash-\(corner\|justify\)\)\>"
+syn keyword cssFontAttr contained butt arcs stupid compress dashes gaps
+syn match cssFontAttr contained "\<bounding-box\>"

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

@@ -2,19 +2,16 @@ syn keyword cssTagName animate animateMotion animateTransform circle clipPath cu
 
 syn keyword cssFontProp contained cx cy d r rx ry x y
 syn match cssFontProp contained "\<color-\(interpolation\|rendering\)\>"
-syn match cssFontProp contained "\<fill\(-\(opacity\|rule\)\)\=\>"
 syn match cssFontProp contained "\<image-rendering\>"
 syn match cssFontProp contained "\<marker-\(end\|mid\|start\)\>"
 syn match cssFontProp contained "\<pointer-events\>"
 syn match cssFontProp contained "\<shape-rendering\>"
 syn match cssFontProp contained "\<solid-\(color\|opacity\)\>"
 syn match cssFontProp contained "\<stop-\(color\|opacity\)\>"
-syn match cssFontProp contained "\<stroke\(-\(dash\(array\|offset\)\|line\(cap\|join\)\|miterlimit\|opacity\|width\)\)\=\>"
 syn match cssFontProp contained "\<text-anchor\>"
 syn match cssFontProp contained "\<vector-effect\>"
 
-syn keyword cssFontAttr contained arcs butt crispEdges geometricPrecision optimizeQuality painted stroke viewport visibleFill visiblePainted visibleStroke
+syn keyword cssFontAttr contained crispEdges geometricPrecision optimizeQuality painted stroke viewport visibleFill visiblePainted visibleStroke
-syn match cssFontAttr contained "\<bounding-box\>"
 syn match cssFontAttr contained "\<context-\(fill\|stroke\)\>"
 syn match cssFontAttr contained "\<fixed-position\>"
 syn match cssFontAttr contained "\<miter\(-clip\)\=\>"

after/syntax/html.vim

@@ -5,6 +5,7 @@ syn include @htmlCss syntax/css/css-break-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-color-4.vim
+syn include @htmlCss syntax/css/css-contain-1.vim
 syn include @htmlCss syntax/css/css-content-3.vim
 syn include @htmlCss syntax/css/css-counter-styles-3.vim
 syn include @htmlCss syntax/css/css-device-adapt-1.vim
@@ -15,27 +16,33 @@ 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
 syn include @htmlCss syntax/css/css-properties-values-api-1.vim
 syn include @htmlCss syntax/css/css-pseudo-4.vim
 syn include @htmlCss syntax/css/css-regions-1.vim
+syn include @htmlCss syntax/css/css-rhythm-1.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-scroll-snap-1.vim
 syn include @htmlCss syntax/css/css-shapes-1.vim
 syn include @htmlCss syntax/css/css-sizing-3.vim
+syn include @htmlCss syntax/css/css-style-attr.vim
 syn include @htmlCss syntax/css/css-syntax-3.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-timing-1.vim
 syn include @htmlCss syntax/css/css-transforms-1.vim
 syn include @htmlCss syntax/css/css-typed-om-1.vim
 syn include @htmlCss syntax/css/css-ui-3.vim
@@ -52,11 +59,13 @@ syn include @htmlCss syntax/css/css3-conditional.vim
 syn include @htmlCss syntax/css/css3-exclusions.vim
 syn include @htmlCss syntax/css/css3-images.vim
 syn include @htmlCss syntax/css/css3-multicol.vim
+syn include @htmlCss syntax/css/css3-namespace.vim
 syn include @htmlCss syntax/css/css3-page.vim
 syn include @htmlCss syntax/css/css3-speech.vim
 syn include @htmlCss syntax/css/css3-transitions.vim
 syn include @htmlCss syntax/css/cssom-1.vim
 syn include @htmlCss syntax/css/cssom-view-1.vim
+syn include @htmlCss syntax/css/fill-stroke-3.vim
 syn include @htmlCss syntax/css/filter-effects-1.vim
 syn include @htmlCss syntax/css/geometry-1.vim
 syn include @htmlCss syntax/css/html5.vim

test/test.css

@@ -5,9 +5,9 @@
   align-self: self-end;
   align-content: flex-start;
   align-items: flex-end;
-  display: space-around;
+  place-self: space-around;
-  display: space-between;
+  place-content: space-between;
-  display: space-evenly;
+  place-items: space-evenly;
   display: legacy;
 }
 
@@ -109,14 +109,6 @@
   display: color-mod(#112233 tint(50%));
 }
 
-@supports (display: auto) or
-  (display: auto) not
-  (display: auto) {
-  .conditional {
-    display: auto;
-  }
-}
-
 .compositing-1 {
   mix-blend-mode: multiply;
   isolation: screen;
@@ -135,6 +127,20 @@
   display: luminosity;
 }
 
+@supports (display: auto) or
+  (display: auto) not
+  (display: auto) {
+  .conditional {
+    display: auto;
+  }
+}
+
+.contain-1 {
+  contain: layout;
+  display: paint;
+  display: size;
+}
+
 .content-3 {
   string-set: open;
   bookmark-level: closed;
@@ -205,7 +211,7 @@
 }
 
 .display-3 {
-  box-suppress: flow;
+  display: flow;
   display: flow-root;
   display: contents;
   display: inline-list-item;
@@ -217,6 +223,37 @@
   wrap-through: maximum;
 }
 
+.fill-stroke-3 {
+  fill-rule: butt;
+  fill-break: arcs;
+  fill-color: stupid;
+  fill-image: compress;
+  fill-origin: dashes;
+  fill-position: gaps;
+  fill-size: bounding-box;
+  fill-repeat: auto;
+  fill: auto;
+  fill-opacity: auto;
+  stroke-width: auto;
+  stroke-align: auto;
+  stroke-linecap: auto;
+  stroke-linejoin: auto;
+  stroke-miterlimit: auto;
+  stroke-break: auto;
+  stroke-dasharray: auto;
+  stroke-dashoffset: auto;
+  stroke-dash-corner: auto;
+  stroke-dash-justify: auto;
+  stroke-color: auto;
+  stroke-image: auto;
+  stroke-origin: auto;
+  stroke-position: auto;
+  stroke-size: auto;
+  stroke-repeat: auto;
+  stroke: auto;
+  stroke-opacity: auto;
+}
+
 .filter-effects-1 {
   flood-color: sRGB;
   flood-opacity: linearRGB;
@@ -248,6 +285,9 @@
   display: auto;
 }
 
+.fonts-4 {
+}
+
 .fonts-3 {
   font-feature-settings: common-ligatures;
   font-kerning: no-common-ligatures;
@@ -287,10 +327,20 @@
 }
 
 .fonts-4 {
-  font-optical-sizing: emoji;
+  font-min-size: emoji;
-  font-variation-settings: math;
+  font-max-size: math;
-  display: fangsong;
+  font-display: fangsong;
-  display: system-ui;
+  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,
@@ -314,8 +364,8 @@
   grid-auto-columns: 0.2fr;
   grid-auto-flow: dense;
   grid: auto-flow;
-  grid-row-start: subgrid;
+  grid-row-start: span;
-  grid-column-start: span;
+  grid-column-start: auto;
   grid-row-end: auto;
   grid-column-end: auto;
   grid-column: auto;
@@ -326,19 +376,24 @@
   grid-gap: auto;
 }
 
-.images {
+.images-3 {
   object-fit: contain;
   object-position: cover;
-  image-resolution: snap;
+  image-orientation: snap;
-  image-orientation: scale-down;
+  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;
@@ -360,6 +415,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;
@@ -402,10 +511,20 @@
   column-width: auto;
 }
 
+@namespace "http://example.com/css3-namespace/";
+
 .overflow-3 {
   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;
@@ -453,6 +572,15 @@
   display: avoid-region;
 }
 
+.rhythm-1 {
+  line-height-step: margin;
+  block-step-size: up;
+  block-step-insert: down;
+  block-step-align: nearest;
+  block-step-round: auto;
+  block-step: auto;
+}
+
 @media (device-radius: 50%) {
   .round-display-1 {
     shape-inside: outside-shape;
@@ -601,6 +729,10 @@
   display: reduced;
 }
 
+.style-attr {
+  display: auto;
+}
+
 .syntax-3 {
   display: auto;
 }
@@ -660,6 +792,10 @@
   display: over;
 }
 
+.timing-1 {
+  display: frames(2);
+}
+
 .transforms-1 {
   backface-visibility: flat;
   perspective: preserve-3d;
@@ -757,6 +893,7 @@
 picture,
 rb,
 rtc,
+slot,
 template {
   display: auto;
 }
@@ -829,18 +966,15 @@ tspan,
 unknown,
 use,
 view {
-  color-interpolation: arcs;
+  color-interpolation: crispEdges;
-  color-rendering: butt;
+  color-rendering: geometricPrecision;
-  cx: crispEdges;
+  cx: optimizeQuality;
-  cy: geometricPrecision;
+  cy: painted;
-  d: optimizeQuality;
+  d: visiblePainted;
-  fill-opacity: painted;
-  fill-rule: stroke;
-  fill: viewport;
   image-rendering: visibleFill;
-  marker-end: visiblePainted;
+  marker-end: stroke;
-  marker-mid: visibleStroke;
+  marker-mid: viewport;
-  marker-start: bounding-box;
+  marker-start: visibleStroke;
   pointer-events: context-fill;
   r: context-stroke;
   rx: fixed-position;
@@ -850,15 +984,7 @@ view {
   solid-opacity: non-scaling-size;
   stop-color: non-rotation;
   stop-opacity: child(1);
-  stroke-dasharray: icc-color(foo);
+  text-anchor: icc-color(foo);
-  stroke-dashoffset: auto;
-  stroke-linecap: auto;
-  stroke-linejoin: auto;
-  stroke-miterlimit: auto;
-  stroke-opacity: auto;
-  stroke-width: auto;
-  stroke: auto;
-  text-anchor: auto;
   vector-effect: auto;
   x: auto;
   y: auto;

test/test.html

@@ -15,9 +15,9 @@
   align-self: self-end;
   align-content: flex-start;
   align-items: flex-end;
-  display: space-around;
+  place-self: space-around;
-  display: space-between;
+  place-content: space-between;
-  display: space-evenly;
+  place-items: space-evenly;
   display: legacy;
 }
 </style>
@@ -129,15 +129,6 @@
 }
 </style>
 <style>
-@supports (display: auto) or
-  (display: auto) not
-  (display: auto) {
-  .conditional {
-    display: auto;
-  }
-}
-</style>
-<style>
 .compositing-1 {
   mix-blend-mode: multiply;
   isolation: screen;
@@ -157,6 +148,22 @@
 }
 </style>
 <style>
+@supports (display: auto) or
+  (display: auto) not
+  (display: auto) {
+  .conditional {
+    display: auto;
+  }
+}
+</style>
+<style>
+.contain-1 {
+  contain: layout;
+  display: paint;
+  display: size;
+}
+</style>
+<style>
 .content-3 {
   string-set: open;
   bookmark-level: closed;
@@ -231,7 +238,7 @@
 </style>
 <style>
 .display-3 {
-  box-suppress: flow;
+  display: flow;
   display: flow-root;
   display: contents;
   display: inline-list-item;
@@ -245,6 +252,38 @@
 }
 </style>
 <style>
+.fill-stroke-3 {
+  fill-rule: butt;
+  fill-break: arcs;
+  fill-color: stupid;
+  fill-image: compress;
+  fill-origin: dashes;
+  fill-position: gaps;
+  fill-size: bounding-box;
+  fill-repeat: auto;
+  fill: auto;
+  fill-opacity: auto;
+  stroke-width: auto;
+  stroke-align: auto;
+  stroke-linecap: auto;
+  stroke-linejoin: auto;
+  stroke-miterlimit: auto;
+  stroke-break: auto;
+  stroke-dasharray: auto;
+  stroke-dashoffset: auto;
+  stroke-dash-corner: auto;
+  stroke-dash-justify: auto;
+  stroke-color: auto;
+  stroke-image: auto;
+  stroke-origin: auto;
+  stroke-position: auto;
+  stroke-size: auto;
+  stroke-repeat: auto;
+  stroke: auto;
+  stroke-opacity: auto;
+}
+</style>
+<style>
 .filter-effects-1 {
   flood-color: sRGB;
   flood-opacity: linearRGB;
@@ -319,10 +358,20 @@
 </style>
 <style>
 .fonts-4 {
-  font-optical-sizing: emoji;
+  font-min-size: emoji;
-  font-variation-settings: math;
+  font-max-size: math;
-  display: fangsong;
+  font-display: fangsong;
-  display: system-ui;
+  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>
@@ -349,8 +398,8 @@
   grid-auto-columns: 0.2fr;
   grid-auto-flow: dense;
   grid: auto-flow;
-  grid-row-start: subgrid;
+  grid-row-start: span;
-  grid-column-start: span;
+  grid-column-start: auto;
   grid-row-end: auto;
   grid-column-end: auto;
   grid-column: auto;
@@ -365,10 +414,9 @@
 .images {
   object-fit: contain;
   object-position: cover;
-  image-resolution: snap;
+  image-orientation: snap;
-  image-orientation: scale-down;
+  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);
@@ -376,6 +424,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;
@@ -423,6 +478,61 @@
 }
 </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;
@@ -445,11 +555,23 @@
 }
 </style>
 <style>
+@namespace "http://example.com/css3-namespace/";
+</style>
+<style>
 .overflow-3 {
   max-lines: auto;
 }
 </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;
@@ -504,6 +626,16 @@
 }
 </style>
 <style>
+.rhythm-1 {
+  line-height-step: margin;
+  block-step-size: up;
+  block-step-insert: down;
+  block-step-align: nearest;
+  block-step-round: auto;
+  block-step: auto;
+}
+</style>
+<style>
 @media (device-radius: 50%) {
   .round-display-1 {
     shape-inside: outside-shape;
@@ -661,6 +793,11 @@
   display: reduced;
 }
 </style>
+<style style="display: auto">
+.style-attr {
+  display: auto;
+}
+</style>
 <style>
 .syntax-3 {
   display: auto;
@@ -726,6 +863,11 @@
 }
 </style>
 <style>
+.timing-1 {
+  display: frames(2);
+}
+</style>
+<style>
 .transforms-1 {
   backface-visibility: flat;
   perspective: preserve-3d;
@@ -833,6 +975,7 @@
 picture,
 rb,
 rtc,
+slot,
 template {
   display: auto;
 }
@@ -906,18 +1049,15 @@ tspan,
 unknown,
 use,
 view {
-  color-interpolation: arcs;
+  color-interpolation: crispEdges;
-  color-rendering: butt;
+  color-rendering: geometricPrecision;
-  cx: crispEdges;
+  cx: optimizeQuality;
-  cy: geometricPrecision;
+  cy: painted;
-  d: optimizeQuality;
+  d: visiblePainted;
-  fill-opacity: painted;
-  fill-rule: stroke;
-  fill: viewport;
   image-rendering: visibleFill;
-  marker-end: visiblePainted;
+  marker-end: stroke;
-  marker-mid: visibleStroke;
+  marker-mid: viewport;
-  marker-start: bounding-box;
+  marker-start: visibleStroke;
   pointer-events: context-fill;
   r: context-stroke;
   rx: fixed-position;
@@ -927,15 +1067,7 @@ view {
   solid-opacity: non-scaling-size;
   stop-color: non-rotation;
   stop-opacity: child(1);
-  stroke-dasharray: icc-color(foo);
+  text-anchor: icc-color(foo);
-  stroke-dashoffset: auto;
-  stroke-linecap: auto;
-  stroke-linejoin: auto;
-  stroke-miterlimit: auto;
-  stroke-opacity: auto;
-  stroke-width: auto;
-  stroke: auto;
-  text-anchor: auto;
   vector-effect: auto;
   x: auto;
   y: auto;