From 9f1b8dbb3fe07e765eb1c20d2738896342475ea4 Mon Sep 17 00:00:00 2001
From: Kyo Nagashima <hail2u@gmail.com>
Date: Sat, 22 Apr 2017 12:04:57 +0900
Subject: [PATCH] Add css-images-4.vim

See also: http://www.w3.org/TR/2017/WD-css-images-4-20170413/

This commit also moves some properties and functions from
`css3-images.vim`.
---
 after/syntax/css/css-images-4.vim |  2 ++
 after/syntax/css/css3-images.vim  |  5 ++---
 after/syntax/html.vim             |  1 +
 test/test.css                     | 13 +++++++++----
 test/test.html                    | 12 +++++++++---
 5 files changed, 23 insertions(+), 10 deletions(-)
 create mode 100644 after/syntax/css/css-images-4.vim

diff --git a/after/syntax/css/css-images-4.vim b/after/syntax/css/css-images-4.vim
new file mode 100644
index 0000000..8c3e7b5
--- /dev/null
+++ b/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
diff --git a/after/syntax/css/css3-images.vim b/after/syntax/css/css3-images.vim
index cc1ffd4..de283f4 100644
--- a/after/syntax/css/css3-images.vim
+++ b/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
diff --git a/after/syntax/html.vim b/after/syntax/html.vim
index 5bdebd6..4f0a479 100644
--- a/after/syntax/html.vim
+++ b/after/syntax/html.vim
@@ -16,6 +16,7 @@ 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
diff --git a/test/test.css b/test/test.css
index a16db24..6b72458 100644
--- a/test/test.css
+++ b/test/test.css
@@ -363,19 +363,24 @@
   grid-gap: auto;
 }
 
-.images {
+.images-3 {
   object-fit: contain;
   object-position: cover;
-  image-resolution: snap;
-  image-orientation: scale-down;
+  image-orientation: snap;
+  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;
diff --git a/test/test.html b/test/test.html
index 269533e..a9fae40 100644
--- a/test/test.html
+++ b/test/test.html
@@ -404,10 +404,9 @@
 .images {
   object-fit: contain;
   object-position: cover;
-  image-resolution: snap;
-  image-orientation: scale-down;
+  image-orientation: snap;
+  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);
@@ -415,6 +414,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;