2014-10-15 21:28:26 +04:00
|
|
|
describe("Gradients", function() {
|
|
|
|
var expected = [
|
2012-03-06 01:04:25 +04:00
|
|
|
{
|
2014-02-15 02:30:28 +04:00
|
|
|
method: "linear-gradient",
|
|
|
|
args: [
|
|
|
|
"left",
|
|
|
|
" rgb(255, 0, 0)",
|
|
|
|
" rgb(255, 255, 0)",
|
|
|
|
" rgb(0, 255, 0)"
|
2012-03-06 01:04:25 +04:00
|
|
|
]
|
|
|
|
},
|
|
|
|
{
|
2014-02-15 02:30:28 +04:00
|
|
|
method: 'linear-gradient',
|
|
|
|
args: [
|
|
|
|
"left",
|
|
|
|
" rgb(206, 219, 233) 0%",
|
|
|
|
" rgb(170, 197, 222) 17%",
|
|
|
|
" rgb(97, 153, 199) 50%",
|
|
|
|
" rgb(58, 132, 195) 51%",
|
|
|
|
" rgb(65, 154, 214) 59%",
|
|
|
|
" rgb(75, 184, 240) 71%",
|
|
|
|
" rgb(58, 139, 194) 84%",
|
|
|
|
" rgb(38, 85, 139) 100%"
|
2012-03-06 01:04:25 +04:00
|
|
|
]
|
2012-03-06 03:03:36 +04:00
|
|
|
},
|
|
|
|
{
|
2014-02-15 02:30:28 +04:00
|
|
|
method: "gradient",
|
|
|
|
args: [
|
|
|
|
"linear",
|
|
|
|
" 50% 0%",
|
|
|
|
" 50% 100%",
|
|
|
|
" from(rgb(240, 183, 161))",
|
|
|
|
" color-stop(0.5, rgb(140, 51, 16))",
|
|
|
|
" color-stop(0.51, rgb(117, 34, 1))",
|
|
|
|
" to(rgb(191, 110, 78))"
|
2012-03-06 03:03:36 +04:00
|
|
|
]
|
2012-03-10 02:37:45 +04:00
|
|
|
},
|
|
|
|
{
|
2014-02-15 02:30:28 +04:00
|
|
|
method: "radial-gradient",
|
|
|
|
args: [
|
|
|
|
"75% 19%",
|
|
|
|
" ellipse closest-side",
|
|
|
|
" rgb(171, 171, 171)",
|
|
|
|
" rgb(0, 0, 255) 33%",
|
|
|
|
" rgb(153, 31, 31) 100%"
|
2012-03-10 02:37:45 +04:00
|
|
|
]
|
|
|
|
},
|
|
|
|
{
|
2014-02-15 02:30:28 +04:00
|
|
|
method: "radial-gradient",
|
|
|
|
args: [
|
|
|
|
"75% 19%",
|
|
|
|
" ellipse closest-corner",
|
|
|
|
" rgb(171, 171, 171)",
|
|
|
|
" rgb(0, 0, 255) 33%",
|
|
|
|
" rgb(153, 31, 31) 100%"
|
2012-03-10 02:37:45 +04:00
|
|
|
]
|
|
|
|
},
|
|
|
|
{
|
2014-02-15 02:30:28 +04:00
|
|
|
method: "radial-gradient",
|
|
|
|
args: [
|
|
|
|
"75% 19%",
|
|
|
|
" ellipse farthest-side",
|
|
|
|
" rgb(171, 171, 171)",
|
|
|
|
" rgb(0, 0, 255) 33%",
|
|
|
|
" rgb(153, 31, 31) 100%"
|
2012-03-10 02:37:45 +04:00
|
|
|
]
|
|
|
|
},
|
|
|
|
{
|
2014-02-15 02:30:28 +04:00
|
|
|
method: "radial-gradient",
|
|
|
|
args: [
|
|
|
|
"75% 19%",
|
|
|
|
" ellipse farthest-corner",
|
|
|
|
" rgb(171, 171, 171)",
|
|
|
|
" rgb(0, 0, 255) 33%",
|
|
|
|
" rgb(153, 31, 31) 100%"
|
2012-03-10 02:37:45 +04:00
|
|
|
]
|
|
|
|
},
|
|
|
|
{
|
2014-02-15 02:30:28 +04:00
|
|
|
method: "radial-gradient",
|
|
|
|
args: [
|
|
|
|
"75% 19%",
|
|
|
|
" ellipse contain",
|
|
|
|
" rgb(171, 171, 171)",
|
|
|
|
" rgb(0, 0, 255) 33%",
|
|
|
|
" rgb(153, 31, 31) 100%"
|
2012-03-10 02:37:45 +04:00
|
|
|
]
|
|
|
|
},
|
|
|
|
{
|
2014-02-15 02:30:28 +04:00
|
|
|
method: "radial-gradient",
|
|
|
|
args: [
|
|
|
|
"75% 19%",
|
|
|
|
" ellipse cover",
|
|
|
|
" rgb(171, 171, 171)",
|
|
|
|
" rgb(0, 0, 255) 33%",
|
|
|
|
" rgb(153, 31, 31) 100%"
|
2012-03-10 02:37:45 +04:00
|
|
|
]
|
2012-03-06 01:04:25 +04:00
|
|
|
}
|
|
|
|
];
|
2012-03-04 23:06:25 +04:00
|
|
|
|
2014-10-15 21:28:26 +04:00
|
|
|
$('#backgroundGradients div').each(function(i, node) {
|
|
|
|
var container = new NodeContainer(node, null);
|
|
|
|
var value = container.css("backgroundImage");
|
|
|
|
it(value, function() {
|
|
|
|
var parsedBackground = parseBackgrounds(value);
|
|
|
|
expect(parsedBackground[0].args).to.eql(expected[i].args);
|
|
|
|
expect(parsedBackground[0].method).to.eql(expected[i].method);
|
2012-03-04 23:06:25 +04:00
|
|
|
});
|
2012-03-06 01:04:25 +04:00
|
|
|
});
|
2014-02-15 02:30:28 +04:00
|
|
|
});
|