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`.
This commit is contained in:
Kyo Nagashima
2017-04-22 12:04:57 +09:00
parent 4162325b6c
commit 9f1b8dbb3f
5 changed files with 23 additions and 10 deletions

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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;

View File

@@ -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;