html2canvas/tests/mocha/gradients.js

describe("Gradients", function() {
    var expected = [
        {
            method: "linear-gradient",
            args: [
                "left",
                " rgb(255, 0, 0)",
                " rgb(255, 255, 0)",
                " rgb(0, 255, 0)"
            ]
        },
        {
            method: "linear-gradient",
            args: [
                "left",
                " red",
                " rgb(255, 255, 0)",
                " rgb(0, 255, 0)"
            ]
        },
        {
            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%"
            ]
        },
        {
            method: 'linear-gradient',
            args: [
                "left",
                " rgb(206, 219, 233) 0%",
                " rgb(170, 197, 222) 17px",
                " rgb(97, 153, 199) 50%",
                " rgb(58, 132, 195) 51px",
                " rgb(65, 154, 214) 59%",
                " rgb(75, 184, 240) 71px",
                " rgb(58, 139, 194) 84%",
                " rgb(38, 85, 139) 100px"
            ]
        },
        {
            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))"
            ]
        },
        {
            method: "gradient",
            args: [
                "linear",
                " 50% 0%",
                " 50% 100%",
                " from(rgb(255, 0, 0))",
                " color-stop(0.314159, green)",
                " color-stop(0.51, rgb(0, 0, 255))",
                // temporary workaround for Blink/WebKit bug: crbug.com/453414
                //" to(rgba(0, 0, 0, 0.5))"
                " to(rgba(0, 0, 0, 0))"
            ]
        },
        {
            method: 'linear-gradient',
            args: [
                "0deg",
                " rgb(221, 221, 221)",
                " rgb(221, 221, 221) 50%",
                " transparent 50%"
            ]
        },
        {
            method: "radial-gradient",
            args: [
                "75% 19%",
                " ellipse closest-side",
                " rgb(171, 171, 171)",
                " rgb(0, 0, 255) 33%",
                " rgb(153, 31, 31) 100%"
            ]
        },
        {
            method: "radial-gradient",
            args: [
                "75% 19%",
                " ellipse closest-corner",
                " rgb(171, 171, 171)",
                " rgb(0, 0, 255) 33%",
                " rgb(153, 31, 31) 100%"
            ]
        },
        {
            method: "radial-gradient",
            args: [
                "75% 19%",
                " ellipse farthest-side",
                " rgb(171, 171, 171)",
                " rgb(0, 0, 255) 33%",
                " rgb(153, 31, 31) 100%"
            ]
        },
        {
            method: "radial-gradient",
            args: [
                "75% 19%",
                " ellipse farthest-corner",
                " rgb(171, 171, 171)",
                " rgb(0, 0, 255) 33%",
                " rgb(153, 31, 31) 100%"
            ]
        },
        {
            method: "radial-gradient",
            args: [
                "75% 19%",
                " ellipse contain",
                " rgb(171, 171, 171)",
                " rgb(0, 0, 255) 33%",
                " rgb(153, 31, 31) 100%"
            ]
        },
        {
            method: "radial-gradient",
            args: [
                "75% 19%",
                " ellipse cover",
                " rgb(171, 171, 171)",
                " rgb(0, 0, 255) 33%",
                " rgb(153, 31, 31) 100%"
            ]
        }
    ];

    [].slice.call(document.querySelectorAll('#backgroundGradients div'), 0).forEach(function(node, i) {
        var container = new html2canvas.NodeContainer(node, null);
        var value = container.css("backgroundImage");
        it(value, function() {
            var parsedBackground = html2canvas.utils.parseBackgrounds(value);
            if (parsedBackground[0].args[0] === "0% 50%") {
                parsedBackground[0].args[0] = 'left';
            }
            expect(parsedBackground[0].args).to.eql(expected[i].args);
            expect(parsedBackground[0].method).to.eql(expected[i].method);
        });
    });
});