composited-during-animation.html | Explore in Territory

<!DOCTYPE html>

<html>
<head>
  <style>
    img {
        margin: 10px;
    }

    img {
        animation-duration: 2s !important;
        animation-timing-function: linear !important;
    }

    #grayscale-box {
        filter: grayscale(1);
    }
    .animating #grayscale-box {
        animation-name: grayscale-anim;
    }

    #sepia-box {
        filter: sepia(1);
    }
    .animating #sepia-box {
        animation: sepia-anim;
    }

    #saturate-box {
        filter: saturate(1);
    }
    .animating #saturate-box {
        animation: saturate-anim;
    }

    #huerotate-box {
        filter: hue-rotate(90deg);
    }
    .animating #huerotate-box {
        animation: huerotate-anim;
    }

    #invert-box {
        filter: invert(1);
    }
    .animating #invert-box {
        animation: invert-anim;
    }

    #opacity-box {
        filter: opacity(0);
    }
    .animating #opacity-box {
        animation: opacity-anim;
    }

    #brightness-box {
        filter: brightness(0);
    }
    .animating #brightness-box {
        animation: brightness-anim;
    }

    #contrast-box {
        filter: contrast(0);
    }
    .animating #contrast-box {
        animation: contrast-anim;
    }

    #blur-box {
        filter: blur(10px);
    }
    .animating #blur-box {
        animation: blur-anim;
    }

    @keyframes grayscale-anim {
        from { filter: grayscale(0); }
        to   { filter: grayscale(1); }
    }

    @keyframes sepia-anim {
        from { filter: sepia(0); }
        to   { filter: sepia(1); }
    }

    @keyframes saturate-anim {
        from { filter: saturate(0); }
        to   { filter: saturate(1); }
    }

    @keyframes huerotate-anim {
        from { filter: hue-rotate(0); }
        to   { filter: hue-rotate(180deg); }
    }

    @keyframes invert-anim {
        from { filter: invert(0); }
        to   { filter: invert(1); }
    }

    @keyframes opacity-anim {
        from { filter: opacity(1); }
        to   { filter: opacity(0); }
    }

    @keyframes brightness-anim {
        from { filter: brightness(1); }
        to   { filter: brightness(0); }
    }

    @keyframes contrast-anim {
        from { filter: contrast(1); }
        to   { filter: contrast(0); }
    }

    @keyframes blur-anim {
        from { filter: blur(0); }
        to   { filter: blur(20px); }
    }

  </style>
  <script src="../../animations/resources/animation-test-helpers.js"></script>
  <script type="text/javascript">

    const preExpectedValues = [
        // [element-id, property, expected-value]
        ["grayscale-box", "filter", 'grayscale(1)'],
        ["sepia-box", "filter", 'sepia(1)'],
        ["saturate-box", "filter", 'saturate(1)'],
        ["huerotate-box", "filter", 'hue-rotate(90deg)'],
        ["invert-box", "filter", 'invert(1)'],
        ["opacity-box", "filter", 'opacity(0)'],
        ["brightness-box", "filter", 'brightness(0)'],
        ["contrast-box", "filter", 'contrast(0)'],
        ["blur-box", "filter", 'blur(10px)'],
    ];

    const expectedValues = [
        // [time, element-id, property, expected-value, tolerance]
        [1, "grayscale-box", "filter", 'grayscale(0.5)', 0.15],
        [1, "sepia-box", "filter", 'sepia(0.5)', 0.15],
        [1, "saturate-box", "filter", 'saturate(0.5)', 0.15],
        [1, "huerotate-box", "filter", 'hue-rotate(90deg)', 20],
        [1, "invert-box", "filter", 'invert(0.5)', 0.15],
        [1, "opacity-box", "filter", 'opacity(0.5)', 0.15],
        [1, "brightness-box", "filter", 'brightness(0.5)', 0.15],
        [1, "contrast-box", "filter", 'contrast(0.5)', 0.15],
        [1, "blur-box", "filter", 'blur(10px)', 4],
    ];

    function runPreTest() {
        for (var i=0; i < preExpectedValues.length; i++) {
            var id = preExpectedValues[i][0];
            var prop = preExpectedValues[i][1];
            var expected = preExpectedValues[i][2];
            var element = document.getElementById(id);
            var computedStyle = window.getComputedStyle(element)[prop];
            if (computedStyle == expected)
              result += "PASS: Element " + id + " had filter value " + expected + " before animation.<br>";
            else
              result += "FAIL: Element " + id + " had filter value " + computedStyle + " rather than " + expected + " before animation.<br>";
        }

        // Completed the pre-animation tests. Now start the animation.
        setTimeout(function () {
            document.body.className = "animating";
            runAnimationTest(expectedValues);
        }, 0);
    }

    if (window.testRunner) {
        testRunner.dumpAsText();
        testRunner.waitUntilDone();
    }

    window.addEventListener("load", runPreTest, false);
  </script>
</head>
<body>

<img src="resources/reference.png" id="grayscale-box">
<img src="resources/reference.png" id="sepia-box">
<img src="resources/reference.png" id="saturate-box">
<img src="resources/reference.png" id="huerotate-box">
<img src="resources/reference.png" id="invert-box">
<img src="resources/reference.png" id="opacity-box">
<img src="resources/reference.png" id="brightness-box">
<img src="resources/reference.png" id="contrast-box">
<img src="resources/reference.png" id="blur-box">

<!-- this result element is filled by the animation test system -->
<div id="result">
</div>
</body>
</html>
chromium/third_party/blink/web_tests/css3/filters/composited-during-animation.html
