2015-08-19 20:22:50 +00:00
|
|
|
<!DOCTYPE HTML>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<p id="description"></p>
|
|
|
|
|
<div id="console"></div>
|
2016-11-01 22:31:52 +00:00
|
|
|
<script>
|
|
|
|
|
description("Test that -webkit-filter matches filter.");
|
|
|
|
|
|
|
|
|
|
// 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 { -webkit-filter: ${rule}; }`, 0);
|
|
|
|
|
|
|
|
|
|
filterStyle = window.getComputedStyle(document.body).getPropertyCSSValue("filter");
|
|
|
|
|
shouldBe("filterStyle.length", "" + expectedLength);
|
|
|
|
|
for (var i = 0; i < expectedLength; i++) {
|
|
|
|
|
subRule = filterStyle[i];
|
2018-05-04 17:32:48 +00:00
|
|
|
shouldBeEqualToString("subRule.cssText", expectedTexts[i]);
|
2016-11-01 22:31:52 +00:00
|
|
|
}
|
|
|
|
|
stylesheet.deleteRule(0);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
testComputedFilterRule("Basic reference",
|
|
|
|
|
"url('#a')", 1,
|
2018-05-04 17:32:48 +00:00
|
|
|
['url("#a")']);
|
2016-11-01 22:31:52 +00:00
|
|
|
|
|
|
|
|
testComputedFilterRule("Bare unquoted reference converting to quoted form",
|
|
|
|
|
"url(#a)", 1,
|
2018-05-04 17:32:48 +00:00
|
|
|
['url("#a")']);
|
2016-11-01 22:31:52 +00:00
|
|
|
|
|
|
|
|
testComputedFilterRule("Multiple references",
|
|
|
|
|
"url('#a') url('#b')", 2,
|
2018-05-04 17:32:48 +00:00
|
|
|
['url("#a")', 'url("#b")']);
|
2016-11-01 22:31:52 +00:00
|
|
|
|
|
|
|
|
testComputedFilterRule("Reference as 2nd value",
|
|
|
|
|
"grayscale(1) url('#a')", 2,
|
2018-05-04 17:32:48 +00:00
|
|
|
["grayscale(1)", 'url("#a")']);
|
2016-11-01 22:31:52 +00:00
|
|
|
|
|
|
|
|
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,
|
2018-04-25 23:24:47 +00:00
|
|
|
["brightness(1)"]);
|
2016-11-01 22:31:52 +00:00
|
|
|
|
|
|
|
|
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>
|
2015-08-19 20:22:50 +00:00
|
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
