<!DOCTYPE html><!-- webkit-test-runner [ experimental:WebAnimationsCSSIntegrationEnabled=false ] -->
<html>
<head>
  <style>
    img {
        margin: 10px;
        -webkit-animation-duration: 5s !important;
        -webkit-animation-iteration-count: infinite !important;
        -webkit-animation-direction: alternate !important;
    }

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

    #sepia-box {
        -webkit-filter: sepia(1);
    }

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

    #huerotate-box {
        -webkit-filter: hue-rotate(90deg);
    }

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

    #opacity-box {
        -webkit-filter: opacity(0);
    }

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

    #contrast-box {
        -webkit-filter: contrast(0);
    }


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

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

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

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

  </style>
  <script>
      if (window.testRunner) {
          testRunner.waitUntilDone();
          testRunner.dumpAsText();
      }

      function doTest() {
          if (window.testRunner) {
              document.getElementById('layer-tree').innerText = window.internals.layerTreeAsText(document)
              testRunner.notifyDone();
          }
      }

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

<!-- Every third image below is animating, and thus might
     get a compositing layer. Every 3n+1 element is not animating but
     has a static filter, and shouldn't need a compositing layer.
     Every 3n+2 element is a purely static image, and shouldn't
     even be a layer -->
<img src="resources/reference.png" id="grayscale-box">
<img src="resources/reference.png" id="sepia-box">
<img src="resources/reference.png">
<br>
<img src="resources/reference.png" id="saturate-box">
<img src="resources/reference.png" id="huerotate-box">
<img src="resources/reference.png">
<br>
<img src="resources/reference.png" id="invert-box">
<img src="resources/reference.png" id="opacity-box">
<img src="resources/reference.png">
<br>
<img src="resources/reference.png" id="brightness-box">
<img src="resources/reference.png" id="contrast-box">
<img src="resources/reference.png">

<pre id="layer-tree">Layer tree goes here in DRT</pre>

</body>
</html>