trivial_blur_animation.html | Explore in Territory

<!doctype html>
<!--
Copyright 2016 The Chromium Authors
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<html style="height:100%">
<head>
  <style>
    html, body {
      margin: 0;
      padding: 0;
    }
    @-webkit-keyframes blur-anim {
      from { -webkit-filter: blur(0); }
      to   { -webkit-filter: blur(50px); }
    }
    canvas {
      -webkit-animation: blur-anim 1.5s linear;
      -webkit-animation-direction: alternate;
      -webkit-animation-iteration-count: infinite;
    }
  </style>
</head>
<body style="height:100%">
  <canvas id="canvas" width="200" height="100"></canvas>
</body>
<script>
  var canvas = document.querySelector('canvas');
  canvas.style.width ='100%';
  canvas.style.height='100%';
  canvas.width  = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
  var ctx = canvas.getContext("2d");

  var grd=ctx.createLinearGradient(0,0,canvas.width,0);
  grd.addColorStop(0,"red");
  grd.addColorStop(1,"green");
  ctx.fillStyle=grd;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
</script>
</html>
chromium/tools/perf/page_sets/trivial_sites/trivial_blur_animation.html
