blob: f73c5821155f9f2155f7b280a690503a802d8734 [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 computed style of the filter property.");
// These have to be global for the test helpers to see them.
var stylesheet, filterStyle, subRule;
var styleElement = document.createElement("style");
document.head.appendChild(styleElement);
stylesheet = styleElement.sheet;
function testComputedFilterRule(description, rule, expectedLength, expectedTexts)
{
debug("");
debug(`${description} : ${rule}`);
stylesheet.insertRule(`body { filter: ${rule}; }`, 0);
filterStyle = window.getComputedStyle(document.body).getPropertyCSSValue("filter");
shouldBe("filterStyle.length", `${expectedLength}`);
for (var i = 0; i < expectedLength; i++) {
subRule = filterStyle[i];
shouldBeEqualToString("subRule.cssText", expectedTexts[i]);
}
stylesheet.deleteRule(0);
}
testComputedFilterRule("Basic reference",
"url('#a')", 1,
['url("#a")']);
testComputedFilterRule("Bare unquoted reference converting to quoted form",
"url(#a)", 1,
['url("#a")']);
testComputedFilterRule("Multiple references",
"url('#a') url('#b')", 2,
['url("#a")', 'url("#b")']);
testComputedFilterRule("Reference as 2nd value",
"grayscale(1) url('#a')", 2,
["grayscale(1)", 'url("#a")']);
testComputedFilterRule("Integer value",
"grayscale(1)", 1,
["grayscale(1)"]);
testComputedFilterRule("Float value converts to integer",
"grayscale(1.0)", 1,
["grayscale(1)"]);
testComputedFilterRule("Zero value",
"grayscale(0)", 1,
["grayscale(0)"]);
testComputedFilterRule("No values",
"grayscale()", 1,
["grayscale(1)"]);
testComputedFilterRule("Multiple values",
"grayscale(0.5) grayscale(0.25)", 2,
["grayscale(0.5)", "grayscale(0.25)"]);
testComputedFilterRule("Integer value",
"sepia(1)", 1,
["sepia(1)"]);
testComputedFilterRule("Float value converts to integer",
"sepia(1.0)", 1,
["sepia(1)"]);
testComputedFilterRule("Zero value",
"sepia(0)", 1,
["sepia(0)"]);
testComputedFilterRule("No values",
"sepia()", 1,
["sepia(1)"]);
testComputedFilterRule("Multiple values",
"sepia(0.5) sepia(0.25)", 2,
["sepia(0.5)", "sepia(0.25)"]);
testComputedFilterRule("Rule combinations",
"sepia(0.5) grayscale(0.25)", 2,
["sepia(0.5)", "grayscale(0.25)"]);
testComputedFilterRule("Integer value",
"saturate(1)", 1,
["saturate(1)"]);
testComputedFilterRule("Float value converts to integer",
"saturate(1.0)", 1,
["saturate(1)"]);
testComputedFilterRule("Zero value",
"saturate(0)", 1,
["saturate(0)"]);
testComputedFilterRule("No values",
"saturate()", 1,
["saturate(1)"]);
testComputedFilterRule("Multiple values",
"saturate(0.5) saturate(0.25)", 2,
["saturate(0.5)", "saturate(0.25)"]);
testComputedFilterRule("Rule combinations",
"saturate(0.5) grayscale(0.25)", 2,
["saturate(0.5)", "grayscale(0.25)"]);
testComputedFilterRule("Degrees value as integer",
"hue-rotate(10deg)", 1,
["hue-rotate(10deg)"]);
testComputedFilterRule("Degrees float value converts to integer",
"hue-rotate(10.0deg)", 1,
["hue-rotate(10deg)"]);
testComputedFilterRule("Radians value",
"hue-rotate(10rad)", 1,
["hue-rotate(572.9577951308232deg)"]);
testComputedFilterRule("Gradians value",
"hue-rotate(10grad)", 1,
["hue-rotate(9deg)"]);
testComputedFilterRule("Turns value",
"hue-rotate(0.5turn)", 1,
["hue-rotate(180deg)"]);
testComputedFilterRule("Zero value",
"hue-rotate(0)", 1,
["hue-rotate(0deg)"]);
testComputedFilterRule("No values",
"hue-rotate()", 1,
["hue-rotate(0deg)"]);
testComputedFilterRule("Rule combinations",
"hue-rotate(10deg) grayscale(0.25)", 2,
["hue-rotate(10deg)", "grayscale(0.25)"]);
testComputedFilterRule("Integer value",
"invert(1)", 1,
["invert(1)"]);
testComputedFilterRule("Float value converts to integer",
"invert(1.0)", 1,
["invert(1)"]);
testComputedFilterRule("Zero value",
"invert(0)", 1,
["invert(0)"]);
testComputedFilterRule("No values",
"invert()", 1,
["invert(1)"]);
testComputedFilterRule("Multiple values",
"invert(0.5) invert(0.25)", 2,
["invert(0.5)", "invert(0.25)"]);
testComputedFilterRule("Rule combinations",
"invert(0.5) grayscale(0.25)", 2,
["invert(0.5)", "grayscale(0.25)"]);
testComputedFilterRule("Integer value",
"opacity(1)", 1,
["opacity(1)"]);
testComputedFilterRule("Float value converts to integer",
"opacity(1.0)", 1,
["opacity(1)"]);
testComputedFilterRule("Zero value",
"opacity(0)", 1,
["opacity(0)"]);
testComputedFilterRule("No values",
"opacity()", 1,
["opacity(1)"]);
testComputedFilterRule("Multiple values",
"opacity(0.5) opacity(0.25)", 2,
["opacity(0.5)", "opacity(0.25)"]);
testComputedFilterRule("Rule combinations",
"opacity(0.5) grayscale(0.25)", 2,
["opacity(0.5)", "grayscale(0.25)"]);
testComputedFilterRule("Integer value",
"brightness(1)", 1,
["brightness(1)"]);
testComputedFilterRule("Float value converts to integer",
"brightness(1.0)", 1,
["brightness(1)"]);
testComputedFilterRule("Zero value",
"brightness(0)", 1,
["brightness(0)"]);
testComputedFilterRule("No values",
"brightness()", 1,
["brightness(1)"]);
testComputedFilterRule("Multiple values",
"brightness(0.5) brightness(0.25)", 2,
["brightness(0.5)", "brightness(0.25)"]);
testComputedFilterRule("Rule combinations",
"brightness(0.5) grayscale(0.25)", 2,
["brightness(0.5)", "grayscale(0.25)"]);
testComputedFilterRule("Integer value",
"contrast(1)", 1,
["contrast(1)"]);
testComputedFilterRule("Value greater than 1",
"contrast(2)", 1,
["contrast(2)"]);
testComputedFilterRule("Float value converts to integer",
"contrast(1.0)", 1,
["contrast(1)"]);
testComputedFilterRule("Zero value",
"contrast(0)", 1,
["contrast(0)"]);
testComputedFilterRule("No values",
"contrast()", 1,
["contrast(1)"]);
testComputedFilterRule("Multiple values",
"contrast(0.5) contrast(0.25)", 2,
["contrast(0.5)", "contrast(0.25)"]);
testComputedFilterRule("Rule combinations",
"contrast(0.5) grayscale(0.25)", 2,
["contrast(0.5)", "grayscale(0.25)"]);
testComputedFilterRule("One zero to px",
"blur(0)", 1,
["blur(0px)"]);
testComputedFilterRule("One length",
"blur(2em)", 1,
["blur(32px)"]);
testComputedFilterRule("One length",
"blur(5px)", 1,
["blur(5px)"]);
testComputedFilterRule("No values",
"blur()", 1,
["blur(0px)"]);
testComputedFilterRule("Color then three values",
"drop-shadow(red 1px 2px 3px)", 1,
["drop-shadow(rgb(255, 0, 0) 1px 2px 3px)"]);
testComputedFilterRule("Three values then color",
"drop-shadow(1px 2px 3px red)", 1,
["drop-shadow(rgb(255, 0, 0) 1px 2px 3px)"]);
testComputedFilterRule("Color then three values with zero length",
"drop-shadow(#abc 0 0 0)", 1,
["drop-shadow(rgb(170, 187, 204) 0px 0px 0px)"]);
testComputedFilterRule("Three values with zero length",
"drop-shadow(0 0 0)", 1,
["drop-shadow(rgba(0, 0, 0, 0) 0px 0px 0px)"]);
testComputedFilterRule("Two values no color",
"drop-shadow(1px 2px)", 1,
["drop-shadow(rgba(0, 0, 0, 0) 1px 2px 0px)"]);
testComputedFilterRule("Multiple operations",
"grayscale(0.5) sepia(0.25) saturate(0.75) hue-rotate(35deg) invert(0.2) opacity(0.9) blur(5px)", 7,
[
"grayscale(0.5)",
"sepia(0.25)",
"saturate(0.75)",
"hue-rotate(35deg)",
"invert(0.2)",
"opacity(0.9)",
"blur(5px)"]);
testComputedFilterRule("Percentage values",
"grayscale(50%) sepia(25%) saturate(75%) invert(20%) opacity(90%) brightness(60%) contrast(30%)", 7,
[
"grayscale(0.5)",
"sepia(0.25)",
"saturate(0.75)",
"invert(0.2)",
"opacity(0.9)",
"brightness(0.6)",
"contrast(0.3)"]);
successfullyParsed = true;
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>