<!DOCTYPE html>
<html>
<head>
    <title>test filter function variable substitution</title>

    <meta rel="author" title="Kevin Babbitt">
    <meta rel="author" title="Greg Whitworth">
    <link rel="author" title="Microsoft Corporation" href="http://microsoft.com" />
    <!-- This is testing filters functions with var() function -->
    <link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">

    <script src="/resources/testharness.js"></script>
    <script src="/resources/testharnessreport.js"></script>
    <style>
        .testArea {
            width: 250px;
            height: 167px;
            display: inline-block;
            background-image: url("../../../../images/a.jpg");
            background-size: contain;
        }
    </style>
</head>
<body>
    <div id="log"></div>
    <div class="testArea" id="blur" style="--blur: 15px; filter: blur(var(--blur));"></div>
    <div class="testArea" id="brightness" style="--foo: 0.5; filter: brightness(var(--foo));"></div>
    <div class="testArea" id="contrast" style="--foo: 2; filter: contrast(var(--foo));"></div>
    <div class="testArea" id="grayscale" style="--foo: 1; filter: grayscale(var(--foo));"></div>
    <div class="testArea" id="invert" style="--foo: 1; filter: invert(var(--foo));"></div>
    <div class="testArea" id="sepia" style="--foo: 1; filter: sepia(var(--foo));"></div>
    <div class="testArea" id="saturate" style="--foo: 8; filter: saturate(var(--foo));"></div>
    <script type="text/javascript">
        "use strict";

        let templates = [
            {
                testName:"blur",
                expectedValue:"blur(15px)",
            },
            {
                testName:"brightness",
                expectedValue:"brightness(0.5)",
            },
            {
                testName:"contrast",
                expectedValue:"contrast(2)",
            },
            {
                testName:"grayscale",
                expectedValue:"grayscale(1)",
            },
            {
                testName:"invert",
                expectedValue:"invert(1)",
            },
            {
                testName:"sepia",
                expectedValue:"sepia(1)",
            },
            {
                testName:"saturate",
                expectedValue:"saturate(8)",
            },
        ];

        templates.forEach(function (template) {
            test( function () {
                let target = document.getElementById(template.testName);
                let computedStyle = window.getComputedStyle(target);
                let value = computedStyle.getPropertyValue("filter");
                assert_equals(value, template.expectedValue, "Expected Value should match actual value");
            }, template.testName);
        });
    </script>
</body>
</html>