1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
use style::parser::Parse;
use style::values::specified::image::*;
use style_traits::ToCss;
#[test]
fn test_linear_gradient() {
// Parsing from the right
assert_roundtrip_with_context!(Image::parse, "linear-gradient(to left, red, green)");
// Parsing from the left
assert_roundtrip_with_context!(Image::parse, "linear-gradient(to right, red, green)");
// Parsing with two values for <side-or-corner>
assert_roundtrip_with_context!(Image::parse, "linear-gradient(to right top, red, green)");
// Parsing with <angle>
assert_roundtrip_with_context!(Image::parse, "linear-gradient(45deg, red, green)");
// Parsing with more than two entries in <color-stop-list>
assert_roundtrip_with_context!(Image::parse, "linear-gradient(red, yellow, green)");
// Parsing with percentage in the <color-stop-list>
assert_roundtrip_with_context!(Image::parse, "linear-gradient(red, green, yellow 50%)");
// Parsing without <angle> and <side-or-corner>
assert_roundtrip_with_context!(Image::parse, "linear-gradient(red, green)");
}
#[test]
fn test_radial_gradient() {
// Parsing with all values
assert_roundtrip_with_context!(
Image::parse,
"radial-gradient(circle closest-side at 20px 30px, red, green)"
);
assert_roundtrip_with_context!(
Image::parse,
"radial-gradient(ellipse closest-side at 20px 30px, red, green)",
"radial-gradient(closest-side at 20px 30px, red, green)"
);
assert_roundtrip_with_context!(
Image::parse,
"radial-gradient(closest-side circle at 20px 30px, red, green)",
"radial-gradient(circle closest-side at 20px 30px, red, green)"
);
assert_roundtrip_with_context!(
Image::parse,
"radial-gradient(closest-side ellipse at 20px 30px, red, green)",
"radial-gradient(closest-side at 20px 30px, red, green)"
);
// Parsing with <shape-keyword> and <size> reversed
assert_roundtrip_with_context!(
Image::parse,
"radial-gradient(closest-side circle at 20px 30px, red, green)",
"radial-gradient(circle closest-side at 20px 30px, red, green)"
);
assert_roundtrip_with_context!(
Image::parse,
"radial-gradient(closest-corner ellipse at 20px 30px, red, green)",
"radial-gradient(closest-corner at 20px 30px, red, green)"
);
assert_roundtrip_with_context!(
Image::parse,
"radial-gradient(30px circle, red, green)",
"radial-gradient(30px at center center, red, green)"
);
assert_roundtrip_with_context!(
Image::parse,
"radial-gradient(30px 40px ellipse, red, green)",
"radial-gradient(30px 40px at center center, red, green)"
);
// Parsing without <size>
assert_roundtrip_with_context!(
Image::parse,
"radial-gradient(circle, red, green)",
"radial-gradient(circle at center center, red, green)"
);
assert_roundtrip_with_context!(
Image::parse,
"radial-gradient(ellipse, red, green)",
"radial-gradient(at center center, red, green)"
);
assert_roundtrip_with_context!(
Image::parse,
"radial-gradient(circle at 20px 30px, red, green)"
);
assert_roundtrip_with_context!(
Image::parse,
"radial-gradient(ellipse at 20px 30px, red, green)",
"radial-gradient(at 20px 30px, red, green)"
);
// Parsing without <shape-keyword>
assert_roundtrip_with_context!(
Image::parse,
"radial-gradient(20px at 20px 30px, red, green)"
);
assert_roundtrip_with_context!(
Image::parse,
"radial-gradient(20px 30px at left center, red, green)"
);
assert_roundtrip_with_context!(
Image::parse,
"radial-gradient(closest-side at center, red, green)",
"radial-gradient(closest-side at center center, red, green)"
);
assert_roundtrip_with_context!(
Image::parse,
"radial-gradient(20px, red, green)",
"radial-gradient(20px at center center, red, green)"
);
assert_roundtrip_with_context!(
Image::parse,
"radial-gradient(20px 30px, red, green)",
"radial-gradient(20px 30px at center center, red, green)"
);
assert_roundtrip_with_context!(
Image::parse,
"radial-gradient(closest-side, red, green)",
"radial-gradient(closest-side at center center, red, green)"
);
// Parsing without <shape-keyword> and <size>
assert_roundtrip_with_context!(
Image::parse,
"radial-gradient(at center, red, green)",
"radial-gradient(at center center, red, green)"
);
assert_roundtrip_with_context!(
Image::parse,
"radial-gradient(at center bottom, red, green)"
);
assert_roundtrip_with_context!(Image::parse, "radial-gradient(at 40px 50px, red, green)");
// Parsing with just color stops
assert_roundtrip_with_context!(
Image::parse,
"radial-gradient(red, green)",
"radial-gradient(at center center, red, green)"
);
// Parsing repeating radial gradient
assert_roundtrip_with_context!(
Image::parse,
"repeating-radial-gradient(red, green)",
"repeating-radial-gradient(at center center, red, green)"
);
}
|
