<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>
<p id="description"></p>
<div id="console"></div>
<script>
description("Test the parsing of the image-set and -webkit-image-set functions.");

function jsWrapperClass(node)
{
    if (!node)
        return "[null]";
    var string = Object.prototype.toString.apply(node);
    return string.substr(8, string.length - 9);
}

function shouldBeType(expression, className)
{
    shouldBe("jsWrapperClass(" + expression + ")", "'" + className + "'");
    shouldBe("jsWrapperClass(" + expression + ".__proto__)", "'" + className + "'");
    shouldBe("jsWrapperClass(" + expression + ".constructor)", "'Function'");
}

// These have to be global for the test helpers to see them.
var imageSetRule, serializedRule

function testImageSetRule(description, property, rule, expectedSerialization)
{
    ["image-set", "-webkit-image-set"].forEach((valueName) => {
        debug("");
        debug(`${description}: ${valueName}(${rule})`);

        var div = document.createElement("div");
        div.setAttribute("style", property + ": " + valueName + "(" + rule + ")");
        document.body.appendChild(div);

        imageSetRule = div.style.getPropertyCSSValue(property);
        shouldBeType("imageSetRule", "CSSValueList");

        serializedRule = div.style.getPropertyValue(property);
        expectTrue(serializedRule == `image-set(${expectedSerialization})`, "Image Set rule serializes as expected.");

        document.body.removeChild(div);
    });
}

testImageSetRule("Single value for -webkit-mask-box-image-source",
                "-webkit-mask-box-image-source",
                "url('#a')",
                "url(\"#a\") 1x");

testImageSetRule("Multiple values for -webkit-mask-box-image-source",
                "-webkit-mask-box-image-source",
                "url('#a'), url('#b') 2x",
                "url(\"#a\") 1x, url(\"#b\") 2x");

testImageSetRule("Single value for -webkit-mask-box-image-source with gradient.",
                "-webkit-mask-box-image-source",
                "linear-gradient(green, white)",
                "linear-gradient(green, white) 1x");

testImageSetRule("Multiple values for -webkit-mask-box-image-source with gradients",
                "-webkit-mask-box-image-source",
                "linear-gradient(green, white) 1x, radial-gradient(blue, white) 2x",
                "linear-gradient(green, white) 1x, radial-gradient(blue, white) 2x");

testImageSetRule("Combined gradient and URL for -webkit-mask-box-image-source",
                "-webkit-mask-box-image-source",
                "url(\"#a\"), linear-gradient(green, white) 2x",
                "url(\"#a\") 1x, linear-gradient(green, white) 2x");

testImageSetRule("Single -webkit-cross-fade for -webkit-mask-box-image-source",
                "-webkit-mask-box-image-source",
                "-webkit-cross-fade(url(\"#a\"), url(\"#b\"), 70%)",
                "-webkit-cross-fade(url(\"#a\"), url(\"#b\"), 0.7) 1x");

testImageSetRule("Combined gradient and cross-fade for -webkit-mask-box-image-source",
                "-webkit-mask-box-image-source",
                "-webkit-cross-fade(url(\"#a\"), url(\"#b\"), 70%), linear-gradient(green, white) 2x",
                "-webkit-cross-fade(url(\"#a\"), url(\"#b\"), 0.7) 1x, linear-gradient(green, white) 2x");

testImageSetRule("Single value for -webkit-mask-box-image-source with gradient and dpi",
                "-webkit-mask-box-image-source",
                "linear-gradient(green, white) 192dpi",
                "linear-gradient(green, white) 192dpi");

successfullyParsed = true;
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>
