395 lines
12 KiB
HTML
395 lines
12 KiB
HTML
<!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(image1.png), url(image2.png), 50%), contrast(0.5))",
|
|
"filter(-webkit-cross-fade(url(\"image1.png\"), url(\"image2.png\"), 0.5), contrast(0.5))");
|
|
testInner(
|
|
"background-image",
|
|
"filter(url(image1.png), brightness(50%))",
|
|
"filter(url(\"image1.png\"), brightness(50%))");
|
|
testInner(
|
|
"background-image",
|
|
"filter(url('image1.png'), brightness(50%))",
|
|
"filter(url(\"image1.png\"), brightness(50%))");
|
|
|
|
// Test different properties, taking CSS Image values.
|
|
testInner(
|
|
"border-image-source",
|
|
"filter(url(image1.png), invert(50%))",
|
|
"filter(url(\"image1.png\"), invert(50%))");
|
|
testInner(
|
|
"-webkit-mask-image",
|
|
"filter(url(image1.png), invert(50%))",
|
|
"filter(url(\"image1.png\"), invert(50%))");
|
|
testInner(
|
|
"-webkit-mask-box-image-source",
|
|
"filter(url(image1.png), invert(50%))",
|
|
"filter(url(\"image1.png\"), invert(50%))");
|
|
testInner(
|
|
"content",
|
|
"filter(url(image1.png), invert(50%))",
|
|
"filter(url(\"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>
|