VimPlug/vim-css3-syntax
1
0
Fork 0
mirror of https://github.com/hail2u/vim-css3-syntax.git synced 2025-12-07 03:04:26 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add css-images-4.vim

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

2
after/syntax/css/css-images-4.vim Normal file
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

5
after/syntax/css/css3-images.vim
View File

@@ -1,7 +1,6 @@
" TODO: create cssImagesProp group and cssImagesAttr group
syn match cssFontProp contained "\<object-\(fit\|position\)\>" 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 keyword cssFontAttr contained contain cover snap
syn match cssFontAttr contained "\<from-image\>" syn match cssFontAttr contained "\<from-image\>"
syn match cssFontAttr contained "\<scale-down\>" 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

1
after/syntax/html.vim
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-fonts-4.vim
syn include @htmlCss syntax/css/css-gcpm-3.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-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-inline-3.vim
syn include @htmlCss syntax/css/css-line-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-lists-3.vim

13
test/test.css
View File

@@ -363,19 +363,24 @@
grid-gap: auto; grid-gap: auto;
} }
.images { .images-3 {
object-fit: contain; object-fit: contain;
object-position: cover; object-position: cover;
image-resolution: snap; image-orientation: snap;
image-orientation: scale-down; display: scale-down;
display: from-image; display: from-image;
display: image("sprite.svg#xywh=40,0,20,20");
display: linear-gradient(to bottom, yellow, blue); display: linear-gradient(to bottom, yellow, blue);
display: radial-gradient(farthest-corner at 50% 50%, yellow, green); display: radial-gradient(farthest-corner at 50% 50%, yellow, green);
display: repeating-linear-gradient(to bottom, yellow, blue); display: repeating-linear-gradient(to bottom, yellow, blue);
display: repeating-radial-gradient(farthest-corner at 50% 50%, yellow, green); 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 { .inline-3 {
dominant-baseline: mathematical; dominant-baseline: mathematical;
alignment-baseline: ideographic; alignment-baseline: ideographic;

12
test/test.html
View File

@@ -404,10 +404,9 @@
.images { .images {
object-fit: contain; object-fit: contain;
object-position: cover; object-position: cover;
image-resolution: snap; image-orientation: snap;
image-orientation: scale-down; display: scale-down;
display: from-image; display: from-image;
display: image("sprite.svg#xywh=40,0,20,20");
display: linear-gradient(to bottom, yellow, blue); display: linear-gradient(to bottom, yellow, blue);
display: radial-gradient(farthest-corner at 50% 50%, yellow, green); display: radial-gradient(farthest-corner at 50% 50%, yellow, green);
display: repeating-linear-gradient(to bottom, yellow, blue); display: repeating-linear-gradient(to bottom, yellow, blue);
@@ -415,6 +414,13 @@
} }
</style> </style>
<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 { .inline-3 {
dominant-baseline: mathematical; dominant-baseline: mathematical;
alignment-baseline: ideographic; alignment-baseline: ideographic;