blob: a4ac640ffbdf7cdf5c1f597be43699273ca92b96 [file] [log] [blame]
<!DOCTYPE html>
<html>
<style>
* { font-size: 16px; }
div { font-size: 8px; }
</style>
<body>
<script src="../../resources/js-test-pre.js"></script>
<script>
description('Test parsing and computation of CSS image filter() function.');
function computedStyle(property, value) {
var div = document.createElement("div");
document.body.appendChild(div);
div.style.setProperty(property, value);
var computedValue = getComputedStyle(div).getPropertyValue(property);
document.body.removeChild(div);
return computedValue;
}
function innerStyle(property, value) {
var div = document.createElement("div");
div.style.setProperty(property, value);
return div.style.getPropertyValue(property);
}
function testComputed(property, value, expected) {
shouldBeEqualToString('computedStyle("' + property + '", "' + value + '")', expected);
}
function testInner(property, value, expected) {
if (expected === null)
expected = "";
shouldBeEqualToString('innerStyle("' + property + '", "' + value + '")', expected);
}
function negativeTest(property, value) {
testInner(property, value, null);
// FIXME: Computed style not yet implemented.
testComputed(property, value, 'none');
}
// Test different filter combination.
testInner(
"background-image",
"filter(none, blur(3px))",
"filter(none, blur(3px))");
testInner(
"background-image",
"filter(none, url(#a))",
"filter(none, url(\"#a\"))");
testInner(
"background-image",
"filter(none, url(#a))",
"filter(none, url(\"#a\"))");
testInner(
"background-image",
"filter(none, url(#a) url(#b))",
"filter(none, url(\"#a\") url(\"#b\"))");
testInner(
"background-image",
"filter(none, grayscale(1) url(#a))",
"filter(none, grayscale(1) url(\"#a\"))");
testInner(
"background-image",
"filter(none, grayscale(1))",
"filter(none, grayscale(1))");
testInner(
"background-image",
"filter(none, grayscale(50%))",
"filter(none, grayscale(50%))");
testInner(
"background-image",
"filter(none, grayscale(1.0))",
"filter(none, grayscale(1))");
testInner(
"background-image",
"filter(none, grayscale(0))",
"filter(none, grayscale(0))");
testInner(
"background-image",
"filter(none, grayscale(0.5) grayscale(0.25))",
"filter(none, grayscale(0.5) grayscale(0.25))");
testInner(
"background-image",
"filter(none, sepia(1))",
"filter(none, sepia(1))");
testInner(
"background-image",
"filter(none, sepia(50%))",
"filter(none, sepia(50%))");
testInner(
"background-image",
"filter(none, sepia(1.0))",
"filter(none, sepia(1))");
testInner(
"background-image",
"filter(none, sepia(0))",
"filter(none, sepia(0))");
testInner(
"background-image",
"filter(none, sepia(0.5) sepia(0.25))",
"filter(none, sepia(0.5) sepia(0.25))");
testInner(
"background-image",
"filter(none, sepia(0.5) grayscale(0.25))",
"filter(none, sepia(0.5) grayscale(0.25))");
testInner(
"background-image",
"filter(none, saturate(1))",
"filter(none, saturate(1))");
testInner(
"background-image",
"filter(none, saturate(50%))",
"filter(none, saturate(50%))");
testInner(
"background-image",
"filter(none, saturate(250%))",
"filter(none, saturate(250%))");
testInner(
"background-image",
"filter(none, saturate(1.0))",
"filter(none, saturate(1))");
testInner(
"background-image",
"filter(none, saturate(5.5))",
"filter(none, saturate(5.5))");
testInner(
"background-image",
"filter(none, saturate(0))",
"filter(none, saturate(0))");
testInner(
"background-image",
"filter(none, saturate(0.5) saturate(0.25))",
"filter(none, saturate(0.5) saturate(0.25))");
testInner(
"background-image",
"filter(none, saturate(0.5) grayscale(0.25))",
"filter(none, saturate(0.5) grayscale(0.25))");
testInner(
"background-image",
"filter(none, hue-rotate(10deg))",
"filter(none, hue-rotate(10deg))");
testInner(
"background-image",
"filter(none, hue-rotate(10.0deg))",
"filter(none, hue-rotate(10deg))");
testInner(
"background-image",
"filter(none, hue-rotate(10rad))",
"filter(none, hue-rotate(10rad))");
testInner(
"background-image",
"filter(none, hue-rotate(10grad))",
"filter(none, hue-rotate(10grad))");
testInner(
"background-image",
"filter(none, hue-rotate(0.5turn))",
"filter(none, hue-rotate(0.5turn))");
testInner(
"background-image",
"filter(none, hue-rotate(0))",
"filter(none, hue-rotate(0deg))");
testInner(
"background-image",
"filter(none, hue-rotate(10deg) grayscale(0.25))",
"filter(none, hue-rotate(10deg) grayscale(0.25))");
testInner(
"background-image",
"filter(none, invert(1))",
"filter(none, invert(1))");
testInner(
"background-image",
"filter(none, invert(50%))",
"filter(none, invert(50%))");
testInner(
"background-image",
"filter(none, invert(1.0))",
"filter(none, invert(1))");
testInner(
"background-image",
"filter(none, invert(0))",
"filter(none, invert(0))");
testInner(
"background-image",
"filter(none, invert(0.5) invert(0.25))",
"filter(none, invert(0.5) invert(0.25))");
testInner(
"background-image",
"filter(none, invert(0.5) grayscale(0.25))",
"filter(none, invert(0.5) grayscale(0.25))");
testInner(
"background-image",
"filter(none, opacity(1))",
"filter(none, opacity(1))");
testInner(
"background-image",
"filter(none, opacity(50%))",
"filter(none, opacity(50%))");
testInner(
"background-image",
"filter(none, opacity(1.0))",
"filter(none, opacity(1))");
testInner(
"background-image",
"filter(none, opacity(0))",
"filter(none, opacity(0))");
testInner(
"background-image",
"filter(none, opacity(0.5) opacity(0.25))",
"filter(none, opacity(0.5) opacity(0.25))");
testInner(
"background-image",
"filter(none, opacity(0.5) grayscale(0.25))",
"filter(none, opacity(0.5) grayscale(0.25))");
testInner(
"background-image",
"filter(none, brightness(1))",
"filter(none, brightness(1))");
testInner(
"background-image",
"filter(none, brightness(50%))",
"filter(none, brightness(50%))");
testInner(
"background-image",
"filter(none, brightness(1.0))",
"filter(none, brightness(1))");
testInner(
"background-image",
"filter(none, brightness(0))",
"filter(none, brightness(0))");
testInner(
"background-image",
"filter(none, brightness(0.5) brightness(0.25))",
"filter(none, brightness(0.5) brightness(0.25))");
testInner(
"background-image",
"filter(none, brightness(0.5) grayscale(0.25))",
"filter(none, brightness(0.5) grayscale(0.25))");
testInner(
"background-image",
"filter(none, brightness(-1.1))",
"");
testInner(
"background-image",
"filter(none, brightness(101%))",
"filter(none, brightness(101%))");
testInner(
"background-image",
"filter(none, grayscale(0.25) brightness(0.5))",
"filter(none, grayscale(0.25) brightness(0.5))");
testInner(
"background-image",
"filter(none, contrast(1))",
"filter(none, contrast(1))");
testInner(
"background-image",
"filter(none, contrast(50%))",
"filter(none, contrast(50%))");
testInner(
"background-image",
"filter(none, contrast(250%))",
"filter(none, contrast(250%))");
testInner(
"background-image",
"filter(none, contrast(1.0))",
"filter(none, contrast(1))");
testInner(
"background-image",
"filter(none, contrast(0))",
"filter(none, contrast(0))");
testInner(
"background-image",
"filter(none, contrast(2))",
"filter(none, contrast(2))");
testInner(
"background-image",
"filter(none, contrast(0.5) contrast(0.25))",
"filter(none, contrast(0.5) contrast(0.25))");
testInner(
"background-image",
"filter(none, contrast(0.5) grayscale(0.25))",
"filter(none, contrast(0.5) grayscale(0.25))");
testInner(
"background-image",
"filter(none, grayscale(0.25) contrast(0.5))",
"filter(none, grayscale(0.25) contrast(0.5))");
testInner(
"background-image",
"filter(none, blur(0))",
"filter(none, blur(0px))");
testInner(
"background-image",
"filter(none, blur(10px))",
"filter(none, blur(10px))");
testInner(
"background-image",
"filter(none, drop-shadow(red 1px 2px 3px))",
"filter(none, drop-shadow(red 1px 2px 3px))");
testInner(
"background-image",
"filter(none, drop-shadow(1px 2px 3px red))",
"filter(none, drop-shadow(red 1px 2px 3px))");
testInner(
"background-image",
"filter(none, drop-shadow(#abc 0 0 0))",
"filter(none, drop-shadow(rgb(170, 187, 204) 0px 0px 0px))");
testInner(
"background-image",
"filter(none, drop-shadow(0 0 0))",
"filter(none, drop-shadow(0px 0px 0px))");
testInner(
"background-image",
"filter(none, drop-shadow(1px 2px))",
"filter(none, drop-shadow(1px 2px))");
testInner(
"background-image",
"filter(none, 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))",
"filter(none, 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))");
// Test different CSS Image values.
testInner(
"background-image",
"filter(radial-gradient(ellipse closest-corner, white, black), hue-rotate(90deg))",
"filter(radial-gradient(closest-corner, white, black), hue-rotate(90deg))");
testInner(
"background-image",
"filter(radial-gradient(circle closest-side at 50px 50%, white, black), hue-rotate(90deg))",
"filter(radial-gradient(circle closest-side at 50px 50%, white, black), hue-rotate(90deg))");
testInner(
"background-image",
"filter(radial-gradient(ellipse closest-corner at 20px 50px, white, black), hue-rotate(90deg))",
"filter(radial-gradient(closest-corner at 20px 50px, white, black), hue-rotate(90deg))");
testInner(
"background-image",
"filter(linear-gradient(white, black), hue-rotate(90deg))",
"filter(linear-gradient(white, black), hue-rotate(90deg))");
testInner(
"background-image",
"filter(linear-gradient(to top left, white, black), hue-rotate(90deg))",
"filter(linear-gradient(to left top, white, black), hue-rotate(90deg))");
testInner(
"background-image",
"filter(linear-gradient(0deg, white -20%, blue, black 120%), hue-rotate(90deg))",
"filter(linear-gradient(0deg, white -20%, blue, black 120%), hue-rotate(90deg))");
testInner(
"background-image",
"filter(-webkit-cross-fade(url(http://image1.png), url(http://image2.png), 50%), contrast(0.5))",
"filter(-webkit-cross-fade(url(\"http://image1.png/\"), url(\"http://image2.png/\"), 0.5), contrast(0.5))");
testInner(
"background-image",
"filter(url(http://image1.png), brightness(50%))",
"filter(url(\"http://image1.png/\"), brightness(50%))");
testInner(
"background-image",
"filter(url('http://image1.png'), brightness(50%))",
"filter(url(\"http://image1.png/\"), brightness(50%))");
// Test different properties, taking CSS Image values.
testInner(
"border-image-source",
"filter(url(http://image1.png), invert(50%))",
"filter(url(\"http://image1.png/\"), invert(50%))");
testInner(
"-webkit-mask-image",
"filter(url(http://image1.png), invert(50%))",
"filter(url(\"http://image1.png/\"), invert(50%))");
testInner(
"-webkit-mask-box-image-source",
"filter(url(http://image1.png), invert(50%))",
"filter(url(\"http://image1.png/\"), invert(50%))");
testInner(
"content",
"filter(url(http://image1.png), invert(50%))",
"filter(url(\"http://image1.png/\"), invert(50%))");
// negative tests
negativeTest("background-image", "filter()");
negativeTest("background-image", "filter(url(image1.png))");
negativeTest("background-image", "filter(url(image1.png), )");
negativeTest("background-image", "filter(url(image1.png) brightness(50%))");
negativeTest("background-image", "filter(brightness(50%) url(image1.png))");
negativeTest("background-image", "filter(brightness(50%), url(image1.png))");
negativeTest("background-image", "filter(url(image1.png) url(#filter))");
negativeTest("background-image", "filter(brightness(50%))");
negativeTest("background-image", "filter(brightness(50%), )");
negativeTest("background-image", "filter(url(image1.png), brightness(50%), brightness(50%))");
negativeTest("background-image", "filter(url(image1.png) url(image2.png), brightness(50%))");
negativeTest("background-image", "filter(url(image1.png), url(image2.png), brightness(50%))");
negativeTest("background-image", "filter(invalidToken.png, blur(3px))");
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>