Skip to content

Commit 6c29664

Browse files
author
André Fiedler
committed
"added tests for radial gradients"
1 parent 155ad45 commit 6c29664

2 files changed

Lines changed: 200 additions & 5 deletions

File tree

‎tests/qunit/index.html‎

Lines changed: 50 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -106,8 +106,6 @@
106106
background: linear-gradient(left, #ff0000, #ffff00, #00ff00);
107107
}
108108
.linearGradientWithStops {
109-
/* IE9 SVG */
110-
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NlZGJlOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iI2FhYzVkZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzYxOTljNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzNhODRjMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjU5JSIgc3RvcC1jb2xvcj0iIzQxOWFkNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcxJSIgc3RvcC1jb2xvcj0iIzRiYjhmMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg0JSIgc3RvcC1jb2xvcj0iIzNhOGJjMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyNjU1OGIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
111109
/* FF 3.6+ */
112110
background: -moz-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
113111
/* Chrome, Safari 4+ */
@@ -116,14 +114,12 @@
116114
background: -webkit-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
117115
/* Opera 11.10+ */
118116
background: -o-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
119-
/* IE10+ */
117+
/* IE 10+ */
120118
background: -ms-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
121119
/* W3C */
122120
background: linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
123121
}
124122
.linearGradient3 {
125-
/* IE9 SVG */
126-
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjdhMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzhjMzMxMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzc1MjIwMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiZjZlNGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
127123
/* FF 3.6+ */
128124
background: -moz-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
129125
/* Chrome, Safari 4+ */
@@ -135,11 +131,60 @@
135131
/* W3C */
136132
background: linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
137133
}
134+
.radialGradient {
135+
background: -moz-radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
136+
background: -webkit-radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
137+
background: -o-radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
138+
background: -ms-radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
139+
background: radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
140+
}
141+
142+
.radialGradient2 {
143+
background: -moz-radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
144+
background: -webkit-radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
145+
background: -o-radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
146+
background: -ms-radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
147+
background: radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
148+
}
149+
.radialGradient3 {
150+
background: -moz-radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%);
151+
background: -webkit-radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%);
152+
background: -o-radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%);
153+
background: -ms-radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%);
154+
background: radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%)
155+
}
156+
.radialGradient4 {
157+
background: -moz-radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
158+
background: -webkit-radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
159+
background: -o-radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
160+
background: -ms-radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
161+
background: radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
162+
}
163+
.radialGradient5 {
164+
background: -moz-radial-gradient(75% 19%, ellipse contain, #ababab, #0000ff 33%,#991f1f 100%);
165+
background: -webkit-radial-gradient(75% 19%, ellipse contain, #ababab, #0000ff 33%,#991f1f 100%);
166+
background: -o-radial-gradient(75% 19%, ellipse contain, #ababab, #0000ff 33%,#991f1f 100%);
167+
background: -ms-radial-gradient(75% 19%, ellipse contain, #ababab, #0000ff 33%,#991f1f 100%);
168+
background: radial-gradient(75% 19%, ellipse contain, #ababab, #0000ff 33%,#991f1f 100%);
169+
}
170+
.radialGradient6 {
171+
background: -moz-radial-gradient(75% 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
172+
background: -webkit-radial-gradient(75% 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
173+
background: -o-radial-gradient(75% 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
174+
background: -ms-radial-gradient(75% 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
175+
background: radial-gradient(75% 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
176+
}
138177
</style>
139178
<div id="backgroundGradients">
140179
<div class="linearGradientSimple"></div>
141180
<div class="linearGradientWithStops"></div>
142181
<div class="linearGradient3"></div>
182+
<div class="radialGradient"></div>
183+
<div class="radialGradient2"></div>
184+
<div class="radialGradient3"></div>
185+
<div class="radialGradient4"></div>
186+
<div class="radialGradient5"></div>
187+
<div class="radialGradient6"></div>
143188
</div>
144189
</div>
145190
<!--

‎tests/qunit/unit/generate.js‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,156 @@ $(function() {
102102
stop: 1
103103
}
104104
]
105+
},
106+
{
107+
type: "radial",
108+
x0: 0,
109+
y0: 0,
110+
x1: 50,
111+
y1: 70,
112+
cx: 37.5,
113+
cy: 13.3,
114+
rx: 12.5,
115+
ry: 13.3,
116+
colorStops: [
117+
{
118+
color: "rgb(171, 171, 171)",
119+
stop: 0
120+
},
121+
{
122+
color: "rgb(0, 0, 255)",
123+
stop: 0.33
124+
},
125+
{
126+
color: "rgb(153, 31, 31)",
127+
stop: 1
128+
}
129+
]
130+
},
131+
{
132+
type: "radial",
133+
x0: 0,
134+
y0: 0,
135+
x1: 50,
136+
y1: 70,
137+
cx: 37.5,
138+
cy: 13.3,
139+
rx: 18.25212316416915,
140+
ry: 18.25212316416915,
141+
colorStops: [
142+
{
143+
color: "rgb(171, 171, 171)",
144+
stop: 0
145+
},
146+
{
147+
color: "rgb(0, 0, 255)",
148+
stop: 0.33
149+
},
150+
{
151+
color: "rgb(153, 31, 31)",
152+
stop: 1
153+
}
154+
]
155+
},
156+
{
157+
type: "radial",
158+
x0: 0,
159+
y0: 0,
160+
x1: 50,
161+
y1: 70,
162+
cx: 37.5,
163+
cy: 13.3,
164+
rx: 37.5,
165+
ry: 56.7,
166+
colorStops: [
167+
{
168+
color: "rgb(171, 171, 171)",
169+
stop: 0
170+
},
171+
{
172+
color: "rgb(0, 0, 255)",
173+
stop: 0.33
174+
},
175+
{
176+
color: "rgb(153, 31, 31)",
177+
stop: 1
178+
}
179+
]
180+
},
181+
{
182+
type: "radial",
183+
x0: 0,
184+
y0: 0,
185+
x1: 50,
186+
y1: 70,
187+
cx: 37.5,
188+
cy: 13.3,
189+
rx: 67.97896733549283,
190+
ry: 67.97896733549283,
191+
colorStops: [
192+
{
193+
color: "rgb(171, 171, 171)",
194+
stop: 0
195+
},
196+
{
197+
color: "rgb(0, 0, 255)",
198+
stop: 0.33
199+
},
200+
{
201+
color: "rgb(153, 31, 31)",
202+
stop: 1
203+
}
204+
]
205+
},
206+
{
207+
type: "radial",
208+
x0: 0,
209+
y0: 0,
210+
x1: 50,
211+
y1: 70,
212+
cx: 37.5,
213+
cy: 13.3,
214+
rx: 12.5,
215+
ry: 13.3,
216+
colorStops: [
217+
{
218+
color: "rgb(171, 171, 171)",
219+
stop: 0
220+
},
221+
{
222+
color: "rgb(0, 0, 255)",
223+
stop: 0.33
224+
},
225+
{
226+
color: "rgb(153, 31, 31)",
227+
stop: 1
228+
}
229+
]
230+
},
231+
{
232+
type: "radial",
233+
x0: 0,
234+
y0: 0,
235+
x1: 50,
236+
y1: 70,
237+
cx: 37.5,
238+
cy: 13.3,
239+
rx: 67.97896733549283,
240+
ry: 67.97896733549283,
241+
colorStops: [
242+
{
243+
color: "rgb(171, 171, 171)",
244+
stop: 0
245+
},
246+
{
247+
color: "rgb(0, 0, 255)",
248+
stop: 0.33
249+
},
250+
{
251+
color: "rgb(153, 31, 31)",
252+
stop: 1
253+
}
254+
]
105255
}
106256
];
107257

0 commit comments

Comments
 (0)