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