Add css-round-display-1.vim

See also: http://www.w3.org/TR/2015/WD-css-round-display-1-20150922/

Author: hail2u

after/syntax/css/css-round-display-1.vim

@@ -0,0 +1,7 @@
+syn match cssFontProp contained "\<shape-inside\>"
+syn match cssFontProp contained "\<border-boundary\>"
+syn match cssFontProp contained "\<polar-\(angle\|distance\)\>"
+syn keyword cssFontAttr contained parent polar
+syn match cssFontAttr contained "\<outside-shape\>"
+syn match cssFontAttr contained "\<shape-box\>"
+syn match cssMediaProp contained /device-radius/

after/syntax/html.vim

@@ -34,6 +34,7 @@ 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

test/test.css

@@ -377,6 +377,15 @@
   display: avoid-region;
 }
 
+@media (device-radius: 50%) {
+  .round-display-1 {
+    shape-inside: outside-shape;
+    border-boundary: shape-box;
+    polar-angle: parent;
+    polar-distance: polar;
+  }
+}
+
 .ruby {
   ruby-position: ruby-base-container;
   ruby-merge: ruby-text-container;

test/test.html

@@ -416,6 +416,16 @@
 }
 </style>
 <style>
+@media (device-radius: 50%) {
+  .round-display-1 {
+    shape-inside: outside-shape;
+    border-boundary: shape-box;
+    polar-angle: parent;
+    polar-distance: polar;
+  }
+}
+</style>
+<style>
 .ruby {
   ruby-position: ruby-base-container;
   ruby-merge: ruby-text-container;