blob: fbd8bff9e1787aae26de8c6f51a1f74ac8ced793 [file] [log] [blame]
<!DOCTYPE>
<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 filter property.");
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 stylesheet, cssRule, declaration, filterRule, subRule;
var styleElement = document.createElement("style");
document.head.appendChild(styleElement);
stylesheet = styleElement.sheet;
function testFilterRule(description, rule, expectedLength, expectedValue, expectedTexts)
{
debug("");
debug(`${description} : ${rule}`);
stylesheet.insertRule(`body { filter: ${rule}; }`, 0);
cssRule = stylesheet.cssRules.item(0);
shouldBe("cssRule.type", "1");
declaration = cssRule.style;
shouldBe("declaration.length", "1");
shouldBeEqualToString("declaration.getPropertyValue('filter')", expectedValue);
filterRule = declaration.getPropertyCSSValue("filter");
shouldBeType("filterRule", "CSSValueList");
shouldBe("filterRule.length", `${expectedLength}`);
if (filterRule) {
for (var i = 0; i < expectedLength; i++) {
subRule = filterRule[i];
shouldBeEqualToString("subRule.cssText", expectedTexts[i]);
}
}
stylesheet.deleteRule(0);
}
function testInvalidFilterRule(description, rule)
{
debug("");
debug(`${description} : ${rule}`);
stylesheet.insertRule(`body { filter: ${rule}; }`, 0);
cssRule = stylesheet.cssRules.item(0);
shouldBe("cssRule.type", "1");
declaration = cssRule.style;
shouldBe("declaration.length", "0");
shouldBe("declaration.getPropertyValue('filter')", "''");
stylesheet.deleteRule(0);
}
testFilterRule("Basic reference",
"url('#a')", 1, 'url("#a")',
['url("#a")']);
testFilterRule("Bare unquoted reference converting to quoted form",
"url(#a)", 1, 'url("#a")',
['url("#a")']);
testFilterRule("Multiple references",
"url('#a') url('#b')", 2, 'url("#a") url("#b")',
['url("#a")', 'url("#b")']);
testFilterRule("Reference as 2nd value",
"grayscale(1) url('#a')", 2, 'grayscale(1) url("#a")',
["grayscale(1)", 'url("#a")']);
testFilterRule("Integer value",
"grayscale(1)", 1, "grayscale(1)",
["grayscale(1)"]);
testFilterRule("Percentage value",
"grayscale(50%)", 1, "grayscale(50%)",
["grayscale(50%)"]);
testFilterRule("Float value converts to integer",
"grayscale(1.0)", 1, "grayscale(1)",
["grayscale(1)"]);
testFilterRule("Values over 1 are clamped",
"grayscale(1.5)", 1, "grayscale(1)",
["grayscale(1)"]);
testFilterRule("Percentages over 100 are clamped",
"grayscale(320%)", 1, "grayscale(100%)",
["grayscale(100%)"]);
testFilterRule("Zero value",
"grayscale(0)", 1, "grayscale(0)",
["grayscale(0)"]);
testFilterRule("No values",
"grayscale()", 1, "grayscale()",
["grayscale()"]);
testFilterRule("Multiple values",
"grayscale(0.5) grayscale(0.25)", 2, "grayscale(0.5) grayscale(0.25)",
["grayscale(0.5)", "grayscale(0.25)"]);
testFilterRule("Integer value",
"sepia(1)", 1, "sepia(1)",
["sepia(1)"]);
testFilterRule("Percentage value",
"sepia(50%)", 1, "sepia(50%)",
["sepia(50%)"]);
testFilterRule("Float value converts to integer",
"sepia(1.0)", 1, "sepia(1)",
["sepia(1)"]);
testFilterRule("Values over 1 are clamped",
"sepia(8)", 1, "sepia(1)",
["sepia(1)"]);
testFilterRule("Percentages over 100 are clamped",
"sepia(101%)", 1, "sepia(100%)",
["sepia(100%)"]);
testInvalidFilterRule("Negative value", "sepia(-0.5)");
testFilterRule("Zero value",
"sepia(0)", 1, "sepia(0)",
["sepia(0)"]);
testFilterRule("No values",
"sepia()", 1, "sepia()",
["sepia()"]);
testInvalidFilterRule("Negative value", "grayscale(-0.2)");
testFilterRule("Multiple values",
"sepia(0.5) sepia(0.25)", 2, "sepia(0.5) sepia(0.25)",
["sepia(0.5)", "sepia(0.25)"]);
testFilterRule("Rule combinations",
"sepia(0.5) grayscale(0.25)", 2, "sepia(0.5) grayscale(0.25)",
["sepia(0.5)", "grayscale(0.25)"]);
testFilterRule("Integer value",
"saturate(1)", 1, "saturate(1)",
["saturate(1)"]);
testFilterRule("Percentage value",
"saturate(50%)", 1, "saturate(50%)",
["saturate(50%)"]);
testFilterRule("Percentage value > 1",
"saturate(250%)", 1, "saturate(250%)",
["saturate(250%)"]);
testFilterRule("Float value converts to integer",
"saturate(1.0)", 1, "saturate(1)",
["saturate(1)"]);
testFilterRule("Input value > 1",
"saturate(5.5)", 1, "saturate(5.5)",
["saturate(5.5)"]);
testInvalidFilterRule("Negative value", "saturate(-0.5)");
testFilterRule("Zero value",
"saturate(0)", 1, "saturate(0)",
["saturate(0)"]);
testFilterRule("No values",
"saturate()", 1, "saturate()",
["saturate()"]);
testFilterRule("Multiple values",
"saturate(0.5) saturate(0.25)", 2, "saturate(0.5) saturate(0.25)",
["saturate(0.5)", "saturate(0.25)"]);
testFilterRule("Rule combinations",
"saturate(0.5) grayscale(0.25)", 2, "saturate(0.5) grayscale(0.25)",
["saturate(0.5)", "grayscale(0.25)"]);
testFilterRule("Degrees value as integer",
"hue-rotate(10deg)", 1, "hue-rotate(10deg)",
["hue-rotate(10deg)"]);
testFilterRule("Degrees float value converts to integer",
"hue-rotate(10.0deg)", 1, "hue-rotate(10deg)",
["hue-rotate(10deg)"]);
testFilterRule("Radians value",
"hue-rotate(10rad)", 1, "hue-rotate(10rad)",
["hue-rotate(10rad)"]);
testFilterRule("Gradians value",
"hue-rotate(10grad)", 1, "hue-rotate(10grad)",
["hue-rotate(10grad)"]);
testFilterRule("Turns value",
"hue-rotate(0.5turn)", 1, "hue-rotate(0.5turn)",
["hue-rotate(0.5turn)"]);
testFilterRule("Negative value",
"hue-rotate(-370.2deg)", 1, "hue-rotate(-370.2deg)",
["hue-rotate(-370.2deg)"]);
testFilterRule("Zero value",
"hue-rotate(0)", 1, "hue-rotate(0deg)",
["hue-rotate(0deg)"]);
testFilterRule("No values",
"hue-rotate()", 1, "hue-rotate()",
["hue-rotate()"]);
testFilterRule("Rule combinations",
"hue-rotate(10deg) grayscale(0.25)", 2, "hue-rotate(10deg) grayscale(0.25)",
["hue-rotate(10deg)", "grayscale(0.25)"]);
testFilterRule("Integer value",
"invert(1)", 1, "invert(1)",
["invert(1)"]);
testFilterRule("Percentage value",
"invert(50%)", 1, "invert(50%)",
["invert(50%)"]);
testFilterRule("Float value converts to integer",
"invert(1.0)", 1, "invert(1)",
["invert(1)"]);
testFilterRule("Values over 1 are clamped",
"invert(1.01)", 1, "invert(1)",
["invert(1)"]);
testFilterRule("Percentages over 100 are clamped",
"invert(500000%)", 1, "invert(100%)",
["invert(100%)"]);
testFilterRule("Zero value",
"invert(0)", 1, "invert(0)",
["invert(0)"]);
testInvalidFilterRule("Negative value", "invert(-0.5)");
testFilterRule("No values",
"invert()", 1, "invert()",
["invert()"]);
testFilterRule("Multiple values",
"invert(0.5) invert(0.25)", 2, "invert(0.5) invert(0.25)",
["invert(0.5)", "invert(0.25)"]);
testFilterRule("Rule combinations",
"invert(0.5) grayscale(0.25)", 2, "invert(0.5) grayscale(0.25)",
["invert(0.5)", "grayscale(0.25)"]);
testFilterRule("Integer value",
"opacity(1)", 1, "opacity(1)",
["opacity(1)"]);
testFilterRule("Percentage value",
"opacity(50%)", 1, "opacity(50%)",
["opacity(50%)"]);
testFilterRule("Float value converts to integer",
"opacity(1.0)", 1, "opacity(1)",
["opacity(1)"]);
testFilterRule("Values over 1 are clamped",
"opacity(2134687326)", 1, "opacity(1)",
["opacity(1)"]);
testFilterRule("Percentages over 100 are clamped",
"opacity(500%)", 1, "opacity(100%)",
["opacity(100%)"]);
testInvalidFilterRule("Negative value", "opacity(-0.5)");
testFilterRule("Zero value",
"opacity(0)", 1, "opacity(0)",
["opacity(0)"]);
testFilterRule("No values",
"opacity()", 1, "opacity()",
["opacity()"]);
testFilterRule("Multiple values",
"opacity(0.5) opacity(0.25)", 2, "opacity(0.5) opacity(0.25)",
["opacity(0.5)", "opacity(0.25)"]);
testFilterRule("Rule combinations",
"opacity(0.5) grayscale(0.25)", 2, "opacity(0.5) grayscale(0.25)",
["opacity(0.5)", "grayscale(0.25)"]);
testFilterRule("Integer value",
"brightness(1)", 1, "brightness(1)",
["brightness(1)"]);
testFilterRule("Percentage value",
"brightness(50%)", 1, "brightness(50%)",
["brightness(50%)"]);
testFilterRule("Float value converts to integer",
"brightness(1.0)", 1, "brightness(1)",
["brightness(1)"]);
testFilterRule("Zero value",
"brightness(0)", 1, "brightness(0)",
["brightness(0)"]);
testInvalidFilterRule("Negative value", "brightness(-2)");
testFilterRule("No values",
"brightness()", 1, "brightness()",
["brightness()"]);
testFilterRule("Multiple values",
"brightness(0.5) brightness(0.25)", 2, "brightness(0.5) brightness(0.25)",
["brightness(0.5)", "brightness(0.25)"]);
testFilterRule("Rule combinations",
"brightness(0.5) grayscale(0.25)", 2, "brightness(0.5) grayscale(0.25)",
["brightness(0.5)", "grayscale(0.25)"]);
testInvalidFilterRule("Value less than -100%", "brightness(-1.1)");
testInvalidFilterRule("Negative value", "brightness(-0.6)");
testFilterRule("Parameter more than 100%",
"brightness(101%)", 1, "brightness(101%)",
["brightness(101%)"]);
testFilterRule("Rule combinations",
"grayscale(0.25) brightness(0.5)", 2, "grayscale(0.25) brightness(0.5)",
["grayscale(0.25)", "brightness(0.5)"]);
testFilterRule("Integer value",
"contrast(1)", 1, "contrast(1)",
["contrast(1)"]);
testFilterRule("Percentage value",
"contrast(50%)", 1, "contrast(50%)",
["contrast(50%)"]);
testFilterRule("Percentage value > 1",
"contrast(250%)", 1, "contrast(250%)",
["contrast(250%)"]);
testFilterRule("Float value converts to integer",
"contrast(1.0)", 1, "contrast(1)",
["contrast(1)"]);
testFilterRule("Zero value",
"contrast(0)", 1, "contrast(0)",
["contrast(0)"]);
testInvalidFilterRule("Negative value", "contrast(-0.2)");
testFilterRule("No values",
"contrast()", 1, "contrast()",
["contrast()"]);
testFilterRule("Value greater than one",
"contrast(2)", 1, "contrast(2)",
["contrast(2)"]);
testInvalidFilterRule("Negative value", "contrast(-0.8)");
testFilterRule("Multiple values",
"contrast(0.5) contrast(0.25)", 2, "contrast(0.5) contrast(0.25)",
["contrast(0.5)", "contrast(0.25)"]);
testFilterRule("Rule combinations",
"contrast(0.5) grayscale(0.25)", 2, "contrast(0.5) grayscale(0.25)",
["contrast(0.5)", "grayscale(0.25)"]);
testFilterRule("Rule combinations",
"grayscale(0.25) contrast(0.5)", 2, "grayscale(0.25) contrast(0.5)",
["grayscale(0.25)", "contrast(0.5)"]);
testFilterRule("One zero to px",
"blur(0)", 1, "blur(0px)",
["blur(0px)"]);
testFilterRule("One length",
"blur(10px)", 1, "blur(10px)",
["blur(10px)"]);
testFilterRule("No values",
"blur()", 1, "blur()",
["blur()"]);
testInvalidFilterRule("Negative value", "blur(-2px)");
testFilterRule("Color then three values",
"drop-shadow(red 1px 2px 3px)", 1, "drop-shadow(red 1px 2px 3px)",
["drop-shadow(red 1px 2px 3px)"]);
testFilterRule("Three values then color",
"drop-shadow(1px 2px 3px red)", 1, "drop-shadow(red 1px 2px 3px)",
["drop-shadow(red 1px 2px 3px)"]);
testFilterRule("Color then three values with zero length",
"drop-shadow(#abc 0 0 0)", 1, "drop-shadow(rgb(170, 187, 204) 0px 0px 0px)",
["drop-shadow(rgb(170, 187, 204) 0px 0px 0px)"]);
testFilterRule("Three values with zero length",
"drop-shadow(0 0 0)", 1, "drop-shadow(0px 0px 0px)",
["drop-shadow(0px 0px 0px)"]);
testFilterRule("Two values no color",
"drop-shadow(1px 2px)", 1, "drop-shadow(1px 2px)",
["drop-shadow(1px 2px)"]);
testFilterRule("Multiple operations",
"grayscale(0.5) sepia(0.25) saturate(0.75) hue-rotate(35deg) invert(0.2) opacity(0.9) blur(5px) drop-shadow(green 1px 2px 3px)", 8,
"grayscale(0.5) sepia(0.25) saturate(0.75) hue-rotate(35deg) invert(0.2) opacity(0.9) blur(5px) drop-shadow(green 1px 2px 3px)",
[
"grayscale(0.5)",
"sepia(0.25)",
"saturate(0.75)",
"hue-rotate(35deg)",
"invert(0.2)",
"opacity(0.9)",
"blur(5px)",
"drop-shadow(green 1px 2px 3px)"
]);
successfullyParsed = true;
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>