From 092f7c3c6788fdc246ef6646a134e9003af7117a Mon Sep 17 00:00:00 2001
From: Kyo Nagashima <hail2u@gmail.com>
Date: Fri, 19 May 2017 02:25:52 +0900
Subject: [PATCH] Add css-logical-1.vim

See also: http://www.w3.org/TR/2017/WD-css-logical-1-20170518/
---
 after/syntax/css/css-logical-1.vim |  5 +++
 after/syntax/html.vim              |  1 +
 test/test.css                      | 54 +++++++++++++++++++++++++++++
 test/test.html                     | 55 ++++++++++++++++++++++++++++++
 4 files changed, 115 insertions(+)
 create mode 100644 after/syntax/css/css-logical-1.vim

diff --git a/after/syntax/css/css-logical-1.vim b/after/syntax/css/css-logical-1.vim
new file mode 100644
index 0000000..e5ac1d9
--- /dev/null
+++ b/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
diff --git a/after/syntax/html.vim b/after/syntax/html.vim
index 4f0a479..87d5b78 100644
--- a/after/syntax/html.vim
+++ b/after/syntax/html.vim
@@ -20,6 +20,7 @@ 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-page-floats-3.vim
diff --git a/test/test.css b/test/test.css
index cab9f64..205117a 100644
--- a/test/test.css
+++ b/test/test.css
@@ -402,6 +402,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;
diff --git a/test/test.html b/test/test.html
index ddb4f2e..c58eb16 100644
--- a/test/test.html
+++ b/test/test.html
@@ -468,6 +468,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;