<!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>