<!DOCTYPE html>

<html>
<head>
  <style>
    .box {
        height: 100px;
        width: 100px;
        margin: 10px;
        background-color: blue;
        display: inline-block;
    }

    #brightness {
      -webkit-animation: brightness-anim 2s linear;
    }

    #blur {
      -webkit-animation: blur-anim 2s linear;
    }

    #grayscale {
      -webkit-animation: grayscale-anim 2s linear;
    }

    #sepia {
      -webkit-animation: sepia-anim 2s linear;
    }

    #no {
      -webkit-animation: no-anim 2s linear;
    }

    #multiple1 {
      -webkit-animation: multiple-anim1 2s linear;
    }

    #multiple2 {
      -webkit-animation: multiple-anim2 2s linear;
    }

    #urlfilter {
      -webkit-animation: url-to-filter-anim 2s linear;
    }

    #filterurl {
      -webkit-animation: filter-to-url-anim 2s linear;
    }

    #filterdiffurl {
      -webkit-animation: filter-diff-url-anim 2s linear;
    }

    #generated1 {
      -webkit-animation: generated-anim1 2s linear;
    }

    #generated2 {
      -webkit-animation: generated-anim2 2s linear;
    }

    @-webkit-keyframes brightness-anim {
        from { background-image: filter(url(resources/image.svg), brightness(1)); }
        to   { background-image: filter(url(resources/image.svg), brightness(0)); }
    }

    @-webkit-keyframes blur-anim {
        from { background-image: filter(url(resources/image.svg), blur(0)); }
        to   { background-image: filter(url(resources/image.svg), blur(10px)); }
    }

    @-webkit-keyframes grayscale-anim {
        from { background-image: filter(url(resources/image.svg), grayscale(1)); }
        to   { background-image: filter(url(resources/image.svg), grayscale(0)); }
    }

    @-webkit-keyframes sepia-anim {
        from { background-image: filter(url(resources/image.svg), sepia(1)); }
        to   { background-image: filter(url(resources/image.svg), sepia(0)); }
    }

    @-webkit-keyframes no-anim {
        from { background-image: filter(url(resources/image.svg), sepia(1)); }
        to   { background-image: filter(url(resources/blue.svg), sepia(0)); }
    }

    @-webkit-keyframes multiple-anim1 {
        from { background-image: filter(url(resources/image.svg), sepia(0.25) blur(3px) hue-rotate(45deg)); }
        to   { background-image: filter(url(resources/image.svg), sepia(0.75)); }
    }

    @-webkit-keyframes multiple-anim2 {
        from { background-image: filter(url(resources/image.svg), contrast(0.25)); }
        to   { background-image: filter(url(resources/image.svg), contrast(0.75) blur(3px) hue-rotate(45deg)); }
    }

    @-webkit-keyframes url-to-filter-anim {
        from { background-image: url(resources/image.svg); }
        to   { background-image: filter(url(resources/image.svg), sepia(0.5)); }
    }

    @-webkit-keyframes filter-to-url-anim {
        from { background-image: filter(url(resources/image.svg), sepia(0.5)); }
        to   { background-image: url(resources/image.svg); }
    }

    @-webkit-keyframes filter-diff-url-anim {
        from { background-image: url(resources/image.svg); }
        to   { background-image: filter(url(resources/blue.svg), sepia(0.5)); }
    }

    @-webkit-keyframes generated-anim1 {
        from { background-image: filter(filter(url(resources/image.svg), blur(3px)), sepia(1)); }
        to   { background-image: filter(filter(url(resources/image.svg), blur(3px)), sepia(0)); }
    }

    @-webkit-keyframes generated-anim2 {
        from { background-image: filter(-webkit-cross-fade(url(resources/image.svg), url(resources/image.svg), 50%), sepia(1)); }
        to   { background-image: filter(-webkit-cross-fade(url(resources/image.svg), url(resources/image.svg), 50%), sepia(0)); }
    }
  </style>
  <script src="../../animations/resources/animation-test-helpers.js"></script>
  <script type="text/javascript">
    const expectedValues = [
      // [animation-name, time, element-id, property, expected-value, tolerance]
      ["brightness-anim",  1, "brightness", "backgroundImage", "filter(url(image.svg), brightness(0.5))", 0.05],
      ["blur-anim",  1, "blur", "backgroundImage", "filter(url(image.svg), blur(5px))", 0.05],
      ["grayscale-anim",  1, "grayscale", "backgroundImage", "filter(url(image.svg), grayscale(0.5))", 0.05],
      ["sepia-anim",  1, "sepia", "backgroundImage", "filter(url(image.svg), sepia(0.5))", 0.05],
      ["no-anim",  1, "no", "backgroundImage", "filter(url(blue.svg), sepia(0))", 0],
      ["multiple-anim1",  1, "multiple1", "backgroundImage", "filter(url(image.svg), sepia(0.5) blur(1.5px) hue-rotate(22.5deg))", 0.05],
      ["multiple-anim2",  1, "multiple2", "backgroundImage", "filter(url(image.svg), contrast(0.5) blur(1.5px) hue-rotate(22.5deg))", 0.05],
      ["url-to-filter-anim",  1, "urlfilter", "backgroundImage", " filter(url(image.svg), sepia(0.25))", 0.05],
      ["filter-to-url-anim",  1, "filterurl", "backgroundImage", " filter(url(image.svg), sepia(0.25))", 0.05],
      ["filter-diff-url-anim",  1, "filterdiffurl", "backgroundImage", " filter(url(blue.svg), sepia(0.5))", 0],
      // FIXME: We need to support generated images as input to other generated images for animations first.
      ["generated-anim1",  1, "generated1", "backgroundImage", "filter(filter(url(image.svg), blur(3px)), sepia(0))", 0],
      ["generated-anim2",  1, "generated2", "backgroundImage", "filter(-webkit-cross-fade(url(image.svg), url(image.svg), 50%), sepia(0))", 0],
    ];
    
    runAnimationTest(expectedValues);
  </script>
</head>
<body>

<div class="box" id="brightness"></div>
<div class="box" id="blur"></div>
<div class="box" id="grayscale"></div>
<div class="box" id="sepia"></div>
<div class="box" id="no"></div>
<div class="box" id="multiple1"></div>
<div class="box" id="multiple2"></div>
<div class="box" id="urlfilter"></div>
<div class="box" id="filterurl"></div>
<div class="box" id="filterdiffurl"></div>
<div class="box" id="generated1"></div>
<div class="box" id="generated2"></div>

<div id="result">
</div>
</body>
</html>