blob: f6ea1632acee53b0206b116dcb13450c51f69d38 [file] [log] [blame]
<!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 function.");
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, prototypeName, constructorName)
{
if (!prototypeName)
prototypeName = className + "Prototype";
if (!constructorName)
constructorName = className + "Constructor";
shouldBe("jsWrapperClass(" + expression + ")", "'" + className + "'");
shouldBe("jsWrapperClass(" + expression + ".__proto__)", "'" + prototypeName + "'");
shouldBe("jsWrapperClass(" + expression + ".constructor)", "'Function'");
}
// These have to be global for the test helpers to see them.
var imageSetRule, subRule;
function testImageSetRule(description, property, rule, expectedLength, expectedTexts)
{
debug("");
debug(description + " : " + rule);
var div = document.createElement("div");
div.setAttribute("style", property + ": image-set(" + rule + ")");
document.body.appendChild(div);
imageSetRule = div.style.getPropertyCSSValue(property);
shouldBeType("imageSetRule", "CSSValueList");
if (imageSetRule) {
if (jsWrapperClass(imageSetRule[0]) == "CSSValueList") {
// The content property returns a CSSValueList anyway, so to get to the
// imageSet CSS value list, we have to look at the first entry in the
// content value list.
imageSetRule = imageSetRule[0];
}
}
shouldBe("imageSetRule.length", function() { return expectedLength; });
if (imageSetRule) {
for (var i = 0; i < expectedLength; i++) {
string = imageSetRule[i];
if (i % 2 == 0 && string.cssText.includes('#')) {
subRule = string.cssText.split('#')[1].replace('"', "");
subRule = subRule.split(')')[0];
shouldBe("subRule", "'" + expectedTexts[i] + "'");
} else {
subRule = string;
shouldBe("subRule.cssText", "'" + expectedTexts[i] + "'");
}
}
}
document.body.removeChild(div);
}
testImageSetRule("Single value for background-image with gradient",
"background-image",
"linear-gradient(green, white) 1x", 2,
["linear-gradient(green, white)", "1dppx"]);
testImageSetRule("Single value for content with gradient",
"background-image",
"linear-gradient(green, white) 1x", 2,
["linear-gradient(green, white)", "1dppx"]);
testImageSetRule("Single value for background-image with gradients",
"background-image",
"linear-gradient(green, white) 1x, radial-gradient(blue, white) 2x", 4,
["linear-gradient(green, white)", "1dppx", "radial-gradient(blue, white)", "2dppx"]);
testImageSetRule("Combined gradient and URL",
"background-image",
"url('#a') 1x, linear-gradient(green, white) 2x", 4,
["a", "1dppx", "linear-gradient(green, white)", "2dppx"]);
testImageSetRule("Combined gradient and URL in content",
"content",
"url('#a') 1x, linear-gradient(green, white) 2x", 4,
["a", "1dppx", "linear-gradient(green, white)", "2dppx"]);
testImageSetRule("Combined gradient and cross-fade",
"background-image",
"-webkit-cross-fade(url('#a'), url('#b'), 70%) 1x, linear-gradient(green, white) 2x", 4,
["a", "1dppx", "linear-gradient(green, white)", "2dppx"]);
testImageSetRule("Single value for background-image with gradient and dpi",
"background-image",
"linear-gradient(green, white) 192dpi", 2,
["linear-gradient(green, white)", "192dpi"]);
successfullyParsed = true;
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>