Merge pull request #29 from adelarsq/patch-1

spelling correction

README.md

@@ -7,12 +7,14 @@ Add CSS3 syntax support to [Vim][1]'s built-in `syntax/css.vim`.
 INSTALLATION
 ------------
 
-I **strongly** recommend to install this plugin on *Vim 7.4 or higher with default runtime files*.
+I **strongly** recommend to install this plugin on *Vim 7.4 or higher with
+default runtime files*.
 
 
 ### Manual Installation
 
-Download from GitHub, extract `vim-css3-syntax.tar.gz`, and copy the contents to your `~/.vim` directory.
+Download from GitHub, extract `vim-css3-syntax.tar.gz`, and copy the contents to
+your `~/.vim` directory.
 
 
 ### Installing with Git and pathogen
@@ -26,7 +28,9 @@ NOTES
 
 ### Highlighting problems on: `vertical-align`, `box-shadow`, and others
 
-Some properties do not highlight correctly by default. This is a limitation of Vim's highlight priority mechanism. To fix this problems, put following lines in your `~/.vim/after/css.vim`:
+Some properties do not highlight correctly by default. This is a limitation of
+Vim's highlight priority mechanism. To fix this problems, put following lines in
+your `~/.vim/after/css.vim`:
 
     setlocal iskeyword+=-
 
@@ -43,23 +47,37 @@ This setting have side effects, so use it at your own risk.
 
 ### Vendor Prefixes
 
-I do not plan to support CSS3 properties (or functions) with vendor prefixes, such as `-webkit-` or `-moz-`, etc. These are hard to maintain because they are:
+I do not plan to support CSS3 properties (or functions) with vendor prefixes,
+such as `-webkit-` or `-moz-`, etc. These are hard to maintain because they are:
 
   * Added frequently
   * Changed unexpectedly
   * Removed silently
 
-These must be supported by separate syntax plugins (Vim 7.4's default CSS syntax file supports this). If you want to highlight prefixed properties or functions manually, `:highlight` and `:match` would help:
+These must be supported by separate syntax plugins (Vim 7.4's default CSS syntax
+file supports this). If you want to highlight prefixed properties or functions
+manually, `:highlight` and `:match` would help:
 
     :highlight VendorPrefix guifg=#00ffff gui=bold
     :match VendorPrefix /-\(moz\|webkit\|o\|ms\)-[a-zA-Z-]\+/
 
-These commands highlight vendor prefixed properties and functions instantly with cyan and bold (on gVim).
+These commands highlight vendor prefixed properties and functions instantly with
+cyan and bold (on gVim).
 
 
 ### CSS Preprocessors: [Sass][2], [LESS][3], and [Stylus][4]
 
-`vim-css3-syntax` supports Sass's SCSS syntax only. If you want use this plugin with LESS, install [VIM-LESS][5]. Sass's indent synatx and Stylus are not supported.
+`vim-css3-syntax` supports Sass's SCSS syntax only. If you want to use this
+plugin with LESS, install [VIM-LESS][5]. Sass's indent syntax and Stylus are not
+supported.
+
+
+### Media Queries
+
+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].
 
 
 AUTHOR
@@ -79,3 +97,4 @@ MIT: http://hail2u.mit-license.org/2011
 [3]: http://lesscss.org/
 [4]: http://learnboost.github.io/stylus/
 [5]: https://github.com/groenewege/vim-less
+[6]: https://github.com/JulesWang/css.vim

after/syntax/css/css-counter-styles-3.vim

@@ -1,7 +1,10 @@
-" 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
+syn match cssGeneratedContentAttr contained "\<cjk-decimal\>"
 syn match cssGeneratedContentAttr contained "\<disclosure-\(open\|closed\)\>"
 syn match cssGeneratedContentAttr contained "\<simp-chinese-\(in\)\=formal\>"
 syn match cssGeneratedContentAttr contained "\<trad-chinese-\(in\)\=formal\>"

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 cssFontProp contained "\<display-\(inside\|outside\|list\|suppress\)\>"
+syn keyword cssFontAttr contained contents show
 syn match cssFontAttr contained "\<\(block\|inline\)-level\>"
 syn match cssFontAttr contained "\<inline-list-item\>"

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

@@ -4,3 +4,4 @@ syn match cssFontProp contained "\<flex\(-\(basis\|direction\|flow\|grow\|shrink
 syn keyword cssFontAttr contained flex row wrap
 syn match cssFontAttr contained "\<inline-flex\>"
 syn match cssFontAttr contained "\<\(row\|column\|wrap\)-reverse\>"
+syn match cssFontAttr contained "\<main-size\>"

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

@@ -0,0 +1,7 @@
+syn keyword cssGeneratedContentProp contained running
+syn match cssGeneratedContentProp contained "\<string-set\>"
+syn match cssGeneratedContentProp contained "\<footnote-\(display\|policy\)\>"
+syn match cssGeneratedContentProp contained "\<bookmark-\(label\|level\|state\)\>"
+syn keyword cssGeneratedContentAttr contained footnote line open closed
+syn region cssFunction contained matchgroup=cssFunctionName start="\<\(string\|running\|element\|leader\|target-\(counter\|counters\|text\)\)\s*(" end=")" oneline keepend
+syn match cssPseudoClassId contained "\<footnote-\(call\|marker\)\>"

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

@@ -0,0 +1,6 @@
+" TODO: create cssLineGridProp and cssLineGridAttr
+syn match cssFontProp contained "\<line-\(grid\|snap\)"
+syn match cssFontProp contained "\<box-snap\>"
+syn keyword cssFontAttr contained create
+syn match cssFontAttr contained "\<block-\(start\|end\)\>"
+syn match cssFontAttr contained "\<\(first\|last\)-baseline\>"

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

@@ -0,0 +1,6 @@
+syn match cssGeneratedContentProp contained "\<marker-side\>"
+syn match cssGeneratedContentProp contained "\<counter-set\>"
+syn keyword cssGeneratedContentAttr contained marker
+syn match cssGeneratedContentAttr contained "\<list-container\>"
+syn keyword cssPseudoClassId contained marker
+syn region cssFunction contained matchgroup=cssFunctionName start="\<counters\s*(" end=")" oneline keepend

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

@@ -1,9 +1,10 @@
 " TODO: create cssMaskingProp group and cssMaskingValue group
-syn match cssFontProp contained "\<mask\(-\(image\|source-type\|repeat\|position\|clip\|origin\|size\|type\)\)\=\>"
-syn match cssFontProp contained "\<mask-box-image\(-\(source\|slice\|width\|outset\|repeat\)\)\=\>"
 syn match cssFontProp contained "\<clip-\(path\|rule\)\>"
-syn keyword cssFontAttr contained alpha luminance nonzero evenodd
+syn match cssFontProp contained "\<mask\(-\(image\|mode\|repeat\|position\|clip\|origin\|size\|composite\|type\)\)\=\>"
+syn match cssFontProp contained "\<mask-border\(-\(source\|mode\|slice\|width\|outset\|repeat\)\)\=\>"
+syn keyword cssFontAttr contained nonzero evenodd alpha luminance add subtract intersect exclude
+syn match cssFontAttr contained "\<\(fill\|stroke\|view\)-box\>"
 syn match cssFontAttr contained "\<no-clip\>"
 
 " http://www.w3.org/TR/css-masking/#MaskElement
-" syn keyword cssTagName mask
+syn keyword cssTagName mask

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

@@ -0,0 +1,5 @@
+syn region cssInclude start=/@scope\>/ end=/\ze{/ skipwhite skipnl nextgroup=cssMediaBlock
+syn keyword cssPseudoClassId contained host shadow content
+syn match cssPseudoClassId contained "\<\(scope\|host\)-context\>"
+syn region cssPseudoClassLang matchgroup=cssPseudoClassId start=":\(host\)(" end=")" oneline
+syn match cssSelectorOp2 "/deep/"

after/syntax/css/css-will-change-1.vim

@@ -0,0 +1,3 @@
+" TODO: create cssWillChangeProp group and cssWillChangeAttr group
+syn match cssFontProp contained "\<will-change\>"
+syn match cssFontAttr contained "\<scroll-position\>"

after/syntax/css/css3-conditional.vim

@@ -1,4 +1 @@
-" TODO: create cssSupports group and cssSupportsType group
-syn match cssMedia "@supports\>" nextgroup=cssMediaType skipwhite skipnl
-syn match cssMediaAnd "or" nextgroup=cssMediaType skipwhite skipnl
-syn match cssMediaAnd "not" nextgroup=cssMediaType skipwhite skipnl
+syn region cssInclude start=/@supports\>/ end=/\ze{/ skipwhite skipnl contains=css.*Prop,css.*Attr,cssValueInteger,cssValueLength,cssMediaKeyword,cssVendor,cssIncludeKeyword,cssComment nextgroup=cssMediaBlock

after/syntax/css/css3-gcpm.vim

@@ -1,6 +0,0 @@
-syn region cssFunction contained matchgroup=cssFunctionName start="\<\(target-\(counter\|counters\|text\)\|symbols\)\s*(" end=")" oneline keepend
-syn keyword cssGeneratedContentProp contained bleed marks
-syn match cssGeneratedContentProp contained "\<bookmark-\(label\|level\|state\|target\)\>"
-syn match cssGeneratedContentProp contained "\<float-offset\>"
-syn match cssGeneratedContentProp contained "\<string-set\>"
-syn keyword cssGeneratedContentAttr contained open closed crop cross

after/syntax/css/css3-hyperlinks.vim

@@ -1,3 +0,0 @@
-" TODO: create cssHyperlinksProp group and cssHyperlinksAttr group
-syn match cssFontProp contained "\<target\(-\(name\|new\|position\)\)\=\>"
-syn keyword cssFontAttr contained current new modal window tab front back

after/syntax/css/css3-lists.vim

@@ -1 +0,0 @@
-syn keyword cssPseudoClassId contained marker

after/syntax/css/css3-marquee.vim

@@ -1,4 +0,0 @@
-" TODO: create cssMarqueeProp group and cssMarqueeAttr group
-syn match cssFontProp contained "\<marquee-\(direction\|play-count\|speed\|style\)\>"
-syn keyword cssFontAttr contained forward reverse infinite slide alternate
-syn match cssFontAttr contained "\<marquee-\(line\|block\)\>"

after/syntax/css/css3-mediaqueries.vim

@@ -1,4 +0,0 @@
-syn region cssMediaType contained start='(' end=')' contains=css.*Attr,css.*Prop,cssComment,cssValue.*,cssColor,cssURL,cssImportant,cssError,cssStringQ,cssStringQQ,cssFunction,cssUnicodeEscape nextgroup=cssMediaComma,cssMediaAnd,cssMediaBlock skipwhite skipnl
-syn match cssMediaAnd "and" nextgroup=cssMediaType skipwhite skipnl
-syn clear cssMediaBlock
-syn region cssMediaBlock contained transparent matchgroup=cssBraces start='{' end='}' contains=cssTagName,cssSelectorOp,cssAttributeSelector,cssIdentifier,cssError,cssDefinition,cssPseudoClass,cssPseudoClassLang,cssComment,cssUnicodeEscape,cssClassName,cssURL

after/syntax/css/html5-elements.vim

@@ -15,8 +15,5 @@ syn keyword cssTagName embed video audio source track
 " Forms
 syn keyword cssTagName datalist keygen output progress meter
 
-" Interactive elements
-syn keyword cssTagName details summary dialog
-
 " Scripting
 syn keyword cssTagName template canvas

after/syntax/html.vim

@@ -7,24 +7,17 @@ syn include @htmlCss syntax/css/css3-box.vim
 syn include @htmlCss syntax/css/css3-break.vim
 syn include @htmlCss syntax/css/css3-cascade.vim
 syn include @htmlCss syntax/css/css3-colors.vim
-" syn include @htmlCss syntax/css/css3-conditional.vim
+syn include @htmlCss syntax/css/css3-conditional.vim
 syn include @htmlCss syntax/css/css3-content.vim
 syn include @htmlCss syntax/css/css3-exclusions.vim
-syn include @htmlCss syntax/css/css3-flexbox.vim
 syn include @htmlCss syntax/css/css3-fonts.vim
-syn include @htmlCss syntax/css/css3-gcpm.vim
-syn include @htmlCss syntax/css/css3-hyperlinks.vim
 syn include @htmlCss syntax/css/css3-images.vim
 syn include @htmlCss syntax/css/css3-layout.vim
 syn include @htmlCss syntax/css/css3-linebox.vim
-syn include @htmlCss syntax/css/css3-lists.vim
-syn include @htmlCss syntax/css/css3-marquee.vim
-" syn include @htmlCss syntax/css/css3-mediaqueries.vim
 syn include @htmlCss syntax/css/css3-multicol.vim
 syn include @htmlCss syntax/css/css3-page.vim
 syn include @htmlCss syntax/css/css3-preslev.vim
 syn include @htmlCss syntax/css/css3-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
@@ -34,12 +27,19 @@ syn include @htmlCss syntax/css/css3-ui.vim
 syn include @htmlCss syntax/css/css3-values.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-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-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-text-3.vim
 syn include @htmlCss syntax/css/css-text-decor-3.vim
 syn include @htmlCss syntax/css/css-variables.vim
+syn include @htmlCss syntax/css/css-will-change-1.vim
 syn include @htmlCss syntax/css/css-writing-modes-3.vim
 syn include @htmlCss syntax/css/selectors4.vim

after/syntax/scss.vim

@@ -1,3 +1 @@
 runtime! syntax/css/*.vim
-syn clear cssMediaBlock
-syn region cssMediaBlock contained transparent matchgroup=cssBraces start='{' end='}' contains=TOP

test/test.css

@@ -71,6 +71,14 @@
   display: currentColor;
 }
 
+@supports (display: auto) or
+  (display: auto) not
+  (display: auto) {
+  .conditional {
+    display: auto;
+  }
+}
+
 .compositing {
   mix-blend-mode: multiply;
   isolation: screen;
@@ -96,23 +104,31 @@
   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");
-  speak-as: auto;
+@counter-style counter-style {
+  system: cyclic;
+  negative: symbolic;
+  prefix: numbers;
+  suffix: additive;
+  range: extends;
+  pad: cjk-decimal;
+  fallback: disclosure-open;
+  symbols: disclosure-closed;
+  additive-symbols: simp-chinese-informal;
+  speak-as: simp-chinese-formal;
+  display: trad-chinese-informal;
+  display: trad-chinese-formal;
+  display: ethiopic-numeric;
+  display: symbols("*" "\2020" "\2021" "\A7");
+  display: bullets;
+  display: words;
 }
 
 .display {
   display-inside: block-level;
   display-outside: inline-level;
-  display-extras: inline-list-item;
-  display-box: contents;
+  display-list: contents;
+  display-suppress: inline-list-item;
+  display: show;
 }
 
 .exclusions {
@@ -121,14 +137,14 @@
 }
 
 .flexbox {
-  order: flex;
-  flex: row;
-  flex-basis: wrap;
-  flex-direction: inline-flex;
-  flex-flow: row-reverse;
-  flex-grow: column-reverse;
+  flex-direction: flex;
+  flex-wrap: inline-flex;
+  flex-flow: row;
+  order: row-reverse;
+  flex: column-reverse;
+  flex-grow: wrap;
   flex-shrink: wrap-reverse;
-  flex-wrap: auto;
+  flex-basis: main-size;
 }
 
 .fonts {
@@ -169,15 +185,19 @@
   display: proportional-width;
 }
 
-.gcpm {
-  bleed: target-counter(attr(href, url), page, decimal);
-  marks: target-text(attr(href), content());
-  bookmark-label: open;
-  bookmark-level: closed;
-  bookmark-state: target-text(attr(href), content());
-  bookmark-target: crop;
-  float-offset: cross;
-  string-set: auto;
+.gcpm::footnote-call,
+.gcpm::footnote-marker {
+  string-set: string(heading, first);
+  running: running(heading);
+  footnote-display: element(header);
+  footnote-policy: footnote;
+  bookmark-label: line;
+  bookmark-level: leader('.');
+  bookmark-state: target-counter(attr(href url), page);
+  display: target-counters(lack-of-example);
+  display: target-text(attr(href url));
+  display: open;
+  display: closed;
 }
 
 .grid-layout {
@@ -199,16 +219,6 @@
   grid-area: auto;
 }
 
-.hyperlinks {
-  target: current;
-  target-name: new;
-  target-new: modal;
-  target-position: window;
-  display: tab;
-  display: front;
-  display: back;
-}
-
 .images {
   object-fit: contain;
   object-position: cover;
@@ -226,6 +236,14 @@
   display: same;
 }
 
+.line-grid {
+  line-grid: create;
+  line-snap: block-start;
+  box-snap: block-end;
+  display: first-baseline;
+  display: last-baseline;
+}
+
 .linebox {
   alignment-adjust: central;
   alignment-baseline: mathematical;
@@ -249,43 +267,31 @@
 }
 
 .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;
+  marker-side: marker;
+  counter-set: list-container;
+  display: counters(list-item, '.');
 }
 
 .masking {
-  mask-image: alpha;
-  mask-source-type: luminance;
-  mask-repeat: no-clip;
-  mask-position: nonzero;
-  mask-clip: evenodd;
-  mask-origin: auto;
-  mask-size: auto;
-  mask: auto;
+  clip-path: fill-box;
+  clip-rule: stroke-box;
+  mask-image: view-box;
+  mask-mode: nonzero;
+  mask-repeat: evenodd;
+  mask-position: alpha;
+  mask-clip: luminance;
+  mask-origin: no-clip;
+  mask-size: add;
+  mask-composite: subtract;
+  mask: intersect;
+  mask-border-source: exclude;
+  mask-border-mode: auto;
+  mask-border-slice: auto;
+  mask-border-width: auto;
+  mask-border-outset: auto;
+  mask-border-repeat: auto;
+  mask-border: auto;
   mask-type: auto;
-  mask-box-image-source: auto;
-  mask-box-image-slice: auto;
-  mask-box-image-width: auto;
-  mask-box-image-outset: auto;
-  mask-box-image-repeat: auto;
-  mask-box-image: auto;
-  clip-path: auto;
-  clip-rule: auto;
-}
-
-@media screen and (min-width: 999px) {
-  .mediaqueries {
-    display: auto;
-  }
 }
 
 .multicol {
@@ -329,9 +335,25 @@
 }
 
 .ruby {
+  ruby-position: ruby-base-container;
   ruby-merge: ruby-text-container;
   ruby-align: inter-character;
-  ruby-position: ruby-base-container;
+}
+
+@scope .scoping {
+  div {
+    display: auto;
+  }
+}
+
+.scoping:scope-context div,
+.scoping:host,
+.scping:host(.foo),
+.scoping:host-context,
+.scoping::shadow,
+.scoping::content,
+.scoping /deep/ span {
+  display: auto;
 }
 
 .selectors3:target,
@@ -421,14 +443,6 @@
   display: reduced;
 }
 
-@supports (display: auto) or
-  (display: auto) not
-  (display: auto) {
-    .supports {
-      display: auto;
-    }
-}
-
 .text {
   hyphens: manual;
   line-break: loose;
@@ -525,6 +539,10 @@
   var-foo: var(foo);
 }
 
+.will-change {
+  will-change: scroll-position;
+}
+
 .writing-modes {
   text-orientation: before;
   text-combine-horizontal: after;
@@ -572,9 +590,6 @@ keygen,
 output,
 progress,
 meter,
-details,
-summary,
-dialog,
 template,
 canvas {
   display: auto;

test/test.html

@@ -81,6 +81,14 @@
         display: currentColor;
       }
 
+      @supports (display: auto) or
+        (display: auto) not
+        (display: auto) {
+        .conditional {
+          display: auto;
+        }
+      }
+
       .compositing {
         mix-blend-mode: multiply;
         isolation: screen;
@@ -106,23 +114,31 @@
         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");
-        speak-as: auto;
+      @counter-style counter-style {
+        system: cyclic;
+        negative: symbolic;
+        prefix: numbers;
+        suffix: additive;
+        range: extends;
+        pad: cjk-decimal;
+        fallback: disclosure-open;
+        symbols: disclosure-closed;
+        additive-symbols: simp-chinese-informal;
+        speak-as: simp-chinese-formal;
+        display: trad-chinese-informal;
+        display: trad-chinese-formal;
+        display: ethiopic-numeric;
+        display: symbols("*" "\2020" "\2021" "\A7");
+        display: bullets;
+        display: words;
       }
 
       .display {
         display-inside: block-level;
         display-outside: inline-level;
-        display-extras: inline-list-item;
-        display-box: contents;
+        display-list: contents;
+        display-suppress: inline-list-item;
+        display: show;
       }
 
       .exclusions {
@@ -131,14 +147,14 @@
       }
 
       .flexbox {
-        order: flex;
-        flex: row;
-        flex-basis: wrap;
-        flex-direction: inline-flex;
-        flex-flow: row-reverse;
-        flex-grow: column-reverse;
+        flex-direction: flex;
+        flex-wrap: inline-flex;
+        flex-flow: row;
+        order: row-reverse;
+        flex: column-reverse;
+        flex-grow: wrap;
         flex-shrink: wrap-reverse;
-        flex-wrap: auto;
+        flex-basis: main-size;
       }
 
       .fonts {
@@ -179,15 +195,20 @@
         display: proportional-width;
       }
 
-      .gcpm {
-        bleed: target-counter(attr(href, url), page, decimal);
-        marks: target-text(attr(href), content());
-        bookmark-label: open;
-        bookmark-level: closed;
-        bookmark-state: target-text(attr(href), content());
-        bookmark-target: crop;
-        float-offset: cross;
-        string-set: auto;
+
+      .gcpm::footnote-call,
+      .gcpm::footnote-marker {
+        string-set: string(heading, first);
+        running: running(heading);
+        footnote-display: element(header);
+        footnote-policy: footnote;
+        bookmark-label: line;
+        bookmark-level: leader('.');
+        bookmark-state: target-counter(attr(href url), page);
+        display: target-counters(lack-of-example);
+        display: target-text(attr(href url));
+        display: open;
+        display: closed;
       }
 
       .grid-layout {
@@ -209,16 +230,6 @@
         grid-area: auto;
       }
 
-      .hyperlinks {
-        target: current;
-        target-name: new;
-        target-new: modal;
-        target-position: window;
-        display: tab;
-        display: front;
-        display: back;
-      }
-
       .images {
         object-fit: contain;
         object-position: cover;
@@ -236,6 +247,14 @@
         display: same;
       }
 
+      .line-grid {
+        line-grid: create;
+        line-snap: block-start;
+        box-snap: block-end;
+        display: first-baseline;
+        display: last-baseline;
+      }
+
       .linebox {
         alignment-adjust: central;
         alignment-baseline: mathematical;
@@ -262,40 +281,26 @@
         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 {
-        mask-image: alpha;
-        mask-source-type: luminance;
-        mask-repeat: no-clip;
-        mask-position: nonzero;
-        mask-clip: evenodd;
-        mask-origin: auto;
-        mask-size: auto;
-        mask: auto;
+        clip-path: fill-box;
+        clip-rule: stroke-box;
+        mask-image: view-box;
+        mask-mode: nonzero;
+        mask-repeat: evenodd;
+        mask-position: alpha;
+        mask-clip: luminance;
+        mask-origin: no-clip;
+        mask-size: add;
+        mask-composite: subtract;
+        mask: intersect;
+        mask-border-source: exclude;
+        mask-border-mode: auto;
+        mask-border-slice: auto;
+        mask-border-width: auto;
+        mask-border-outset: auto;
+        mask-border-repeat: auto;
+        mask-border: auto;
         mask-type: auto;
-        mask-box-image-source: auto;
-        mask-box-image-slice: auto;
-        mask-box-image-width: auto;
-        mask-box-image-outset: auto;
-        mask-box-image-repeat: auto;
-        mask-box-image: auto;
-        clip-path: auto;
-        clip-rule: auto;
-      }
-
-      @media screen and (min-width: 999px) {
-        .mediaqueries {
-          display: auto;
-        }
       }
 
       .multicol {
@@ -339,9 +344,25 @@
       }
 
       .ruby {
+        ruby-position: ruby-base-container;
         ruby-merge: ruby-text-container;
         ruby-align: inter-character;
-        ruby-position: ruby-base-container;
+      }
+
+      @scope .scoping {
+        div {
+          display: auto;
+        }
+      }
+
+      .scoping:scope-context div,
+      .scoping:host,
+      .scping:host(.foo),
+      .scoping:host-context,
+      .scoping::shadow,
+      .scoping::content,
+      .scoping /deep/ span {
+        display: auto;
       }
 
       .selectors3:target,
@@ -431,14 +452,6 @@
         display: reduced;
       }
 
-      @supports (display: auto) or
-        (display: auto) not
-        (display: auto) {
-        .supports {
-          display: auto;
-        }
-      }
-
       .text {
         hyphens: manual;
         line-break: loose;
@@ -535,6 +548,10 @@
         var-foo: var(foo);
       }
 
+      .will-change {
+        will-change: scroll-position;
+      }
+
       .writing-modes {
         text-orientation: before;
         text-combine-horizontal: after;
@@ -582,9 +599,6 @@
       output,
       progress,
       meter,
-      details,
-      summary,
-      dialog,
       template,
       canvas {
         display: auto;