filter_effects.html | Explore in Territory

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="initial-scale=1">
<title>Basic CSS Filter Effects Test</title>
<!--
A static CSS filter effect is rastered as a display list item. This test is
concerned with the compositor implementation of CSS filter effects, so it uses
CSS keyframe animations to force the non-display list path. Note that the
animation has no effect, as the start and end keyframes are identical.
-->
<style type="text/css">
body {
  margin: 0px;
  padding: 0px;
  background-color: green;
}
#container {
  width: 300px;
  height: 300px;
  background-color: white;
}
@-webkit-keyframes blur-anim {
  from {-webkit-filter: blur(8px)}
  to {-webkit-filter: blur(8px)}
}
@-webkit-keyframes grayscale-anim {
  from {-webkit-filter: grayscale(90%)}
  to {-webkit-filter: grayscale(90%)}
}
@-webkit-keyframes drop-shadow-anim {
  from {-webkit-filter: drop-shadow(8px 8px 10px blue)}
  to {-webkit-filter: drop-shadow(8px 8px 10px blue)}
}
@-webkit-keyframes sepia-anim {
  from {-webkit-filter: sepia(70%)}
  to {-webkit-filter: sepia(70%)}
}
@-webkit-keyframes brightness-anim {
  from {-webkit-filter: brightness(20%)}
  to {-webkit-filter: brightness(20%)}
}
@-webkit-keyframes contrast-anim {
  from {-webkit-filter: contrast(20%)}
  to {-webkit-filter: contrast(20%)}
}
@-webkit-keyframes hue-rotate-anim {
  from {-webkit-filter: hue-rotate(50deg)}
  to {-webkit-filter: hue-rotate(50deg)}
}
@-webkit-keyframes invert-anim {
  from {-webkit-filter: invert(70%)}
  to {-webkit-filter: invert(70%)}
}
@-webkit-keyframes saturate-anim {
  from {-webkit-filter: saturate(40%)}
  to {-webkit-filter: saturate(40%)}
}
@-webkit-keyframes opacity-anim {
  from {-webkit-filter: opacity(70%)}
  to {-webkit-filter: opacity(70%)}
}
@-webkit-keyframes drop-shadow-invert-anim {
  from {-webkit-filter: drop-shadow(8px 8px 10px blue) invert(70%)}
  to {-webkit-filter: drop-shadow(8px 8px 10px blue) invert(70%)}
}
@-webkit-keyframes hue-rotate-invert-anim {
  from {-webkit-filter: hue-rotate(50deg) invert(70%)}
  to {-webkit-filter: hue-rotate(50deg) invert(70%)}
}
@-webkit-keyframes opacity-anim {
  from {-webkit-filter: opacity(70%)}
  to {-webkit-filter: opacity(70%)}
}
@-webkit-keyframes do-nothing-anim {
  from {-webkit-filter: hue-rotate(0deg)}
  to {-webkit-filter: hue-rotate(0deg)}
}
.gradient {
  float: left;
  height: 50px;
  width: 50px;
  margin: 10px;
}

</style>
<body>
<div id="container">
  <canvas class="gradient" style="-webkit-animation: blur-anim 150000s;"></canvas>
  <canvas class="gradient" style="-webkit-animation: grayscale-anim 150000s;"></canvas>
  <canvas class="gradient" style="-webkit-animation: drop-shadow-anim 150000s;"></canvas>
  <canvas class="gradient" style="-webkit-animation: sepia-anim 150000s;
      -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);"></canvas>
  <canvas class="gradient" style="-webkit-animation: brightness-anim 150000s;"></canvas>
  <canvas class="gradient" style="-webkit-animation: contrast-anim 150000s;"></canvas>
  <canvas class="gradient" style="-webkit-animation: hue-rotate-anim 150000s;"></canvas>
  <canvas class="gradient" style="-webkit-animation: invert-anim 150000s;"></canvas>
  <canvas class="gradient" style="-webkit-animation: saturate-anim 150000s;"></canvas>
  <canvas class="gradient" style="-webkit-animation: opacity-anim 150000s;"></canvas>
  <canvas class="gradient" style="-webkit-animation: drop-shadow-invert-anim 150000s;"></canvas>
  <canvas class="gradient" style="-webkit-animation: hue-rotate-invert-anim 150000s;"></canvas>
  <canvas class="gradient" style="-webkit-animation: opacity-anim 150000s;
      transform: scale(1.3, 0.8)"></canvas>
  <canvas class="gradient" style="-webkit-animation: drop-shadow-invert-anim
      150000s; transform: scale(1.3, 0.8) rotate(53deg) translate(-3px, 10px);
      -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);">
      </canvas>
  <canvas class="gradient" style="-webkit-animation: drop-shadow-anim 150000s;
      transform: scale(1.3, 0.8);"></canvas>
  <div style="opacity: 0.7;">
    <canvas class="gradient" style="-webkit-animation: do-nothing-anim 150000s;"></canvas>
  </div>
</div>
</body>

<script>
var elements = document.getElementsByClassName("gradient");
var i;
for (i = 0; i < elements.length; i++) {
  var canvas = elements[i];
  var ctx = canvas.getContext("2d");

  var grd=ctx.createLinearGradient(0,0,canvas.width,canvas.height);
  grd.addColorStop(0,"yellow");
  grd.addColorStop(0.5,"blue");
  grd.addColorStop(0.75,"red");
  grd.addColorStop(1,"black");
  ctx.fillStyle=grd;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

function finish()
{
  domAutomationController.send("SUCCESS");
}
window.requestAnimationFrame(finish);
</script>
</head>
</html>
chromium/content/test/data/gpu/filter_effects.html
