1
    2
    3
    4
    5
    6
    7
    8
    9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
  100
  101
  102
  103
  104
  105
  106
  107
  108
  109
  110
  111
  112
  113
  114
  115
  116
  117
  118
  119
  120
  121
  122
  123
  124
  125
  126
  127
  128
  129
  130
  131
  132
  133
  134
  135
  136
  137
  138
  139


content / test / data / gpu / filter_effects.html [blame]

<!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>