Add css-will-change-1.vim and test

See Also: http://www.w3.org/TR/2014/WD-css-will-change-1-20140429/

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

@@ -0,0 +1,7 @@
+" TODO: create cssLineGridProp and cssLineGridAttr
+syn match cssFontProp contained "\<line-\(grid\|snap\|slack\)"
+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

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-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=cssMediaType,cssMediaKeyword nextgroup=cssMediaBlock

after/syntax/css/css3-lists.vim

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

after/syntax/html.vim

@@ -10,14 +10,12 @@ 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-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
@@ -34,12 +32,17 @@ 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-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-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

test/test.css

@@ -121,14 +121,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: auto;
 }
 
 .fonts {
@@ -226,6 +226,14 @@
   display: same;
 }
 
+.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;
@@ -249,7 +257,9 @@
 }
 
 .lists::marker {
-  display: auto;
+  marker-side: marker;
+  counter-set: list-container;
+  display: counters(list-item, '.');
 }
 
 .marquee {
@@ -334,6 +344,22 @@
   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,
 .selectors3:enabled,
 .selectors3:disabled,
@@ -525,6 +551,10 @@
   var-foo: var(foo);
 }
 
+.will-change {
+  will-change: scroll-position;
+}
+
 .writing-modes {
   text-orientation: before;
   text-combine-horizontal: after;

test/test.html

@@ -131,14 +131,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: auto;
       }
 
       .fonts {
@@ -236,6 +236,14 @@
         display: same;
       }
 
+      .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;
@@ -344,6 +352,22 @@
         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,
       .selectors3:enabled,
       .selectors3:disabled,
@@ -535,6 +559,10 @@
         var-foo: var(foo);
       }
 
+      .will-change {
+        will-change: scroll-position;
+      }
+
       .writing-modes {
         text-orientation: before;
         text-combine-horizontal: after;