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
|
// Borrowed from Compass's actual test suite, but cut down to just the gradient
// calls, and with some editing to e.g. preserve color formatting:
// https://github.com/chriseppstein/compass/blob/stable/test/fixtures/stylesheets/compass/sass/gradients.sass
// Similarly, the expected results have been trimmed to just the standard
// syntax, since this file doesn't use any of Compass's background() calls etc.
// TODO maybe it should, since we try to support all that
.bg-shortcut-linear-gradient {
background: #fff linear-gradient(top left, #ddd, #aaa);
}
.bg-shortcut-radial-gradient {
background: #fff radial-gradient(center center, #ddd, #aaa 100px);
}
.bg-linear-gradient-angle-svg {
background-image: linear-gradient(-45deg, blue, black);
}
.bg-linear-gradient-angle2-svg {
background-image: linear-gradient(top left, blue, black);
}
.bg-linear-gradient {
background-image: linear-gradient(top left, #ddd, #aaa);
}
.bg-linear-gradient-pixel-stop-from-top {
background-image: linear-gradient(top, #ddd 10px, #aaa 40px);
}
.bg-linear-gradient-pixel-stop-from-left {
background-image: linear-gradient(left, #ddd 10px, #aaa 40px);
}
.transparent-in-linear-gradient {
background-image: #fff linear-gradient(top left, transparent, #aaa);
}
.bg-radial-gradient {
background-image: radial-gradient(center center, #ddd, transparent 100px);
}
.bg-linear-gradient-with-angle {
background-image: linear-gradient(-45deg, #ddd, #aaa);
}
.bg-radial-gradient-with-angle-and-shape {
background-image: radial-gradient(ellipse cover, #ddd, #aaa 100px);
}
.bg-all-gradient-types {
background-image: linear-gradient(top left, #ddd, #aaa);
background-image: radial-gradient(center center, #ddd, #aaa 100px);
}
.border-image-gradient {
border-image: radial-gradient(#0f0,#f00 100px) 100 stretch;
}
.direct-list-image-with-gradient {
list-style-image: radial-gradient(lime, red 10px);
}
.shorthand-list-image-with-gradient {
list-style: outside radial-gradient(lime, red 10px);
}
.content-with-gradient {
content: radial-gradient(lime, red 10px);
}
.bg-linear-gradient-no-position {
background-image: linear-gradient(#ddd, #aaa);
}
.bg-radial-gradient-no-position {
background-image: radial-gradient(#ddd, #aaa 100px);
}
.cross-fade {
background-image: cross-fade(radial-gradient(#ddd, #aaa 100px), url("4x6.png"));
}
/* New tests of our own */
// Valid CSS3, used to come out with the first argument doubled
.bg-radial-gradient-at {
background: radial-gradient(circle at center, red 0%, green 100%);
}
.bg-linear-gradient-to {
background: linear-gradient(to right, red 0%, green 100%);
}
|
