Index: content/test/data/gpu/filter_effects.html |
diff --git a/content/test/data/gpu/filter_effects.html b/content/test/data/gpu/filter_effects.html |
index 9205bc09cd07e973314aebf697c81a4ee85578b2..8ae1559af2622eb8b091ed90c254edd07beefa51 100644 |
--- a/content/test/data/gpu/filter_effects.html |
+++ b/content/test/data/gpu/filter_effects.html |
@@ -67,6 +67,18 @@ body { |
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%)} |
+} |
.gradient { |
float: left; |
height: 50px; |
@@ -87,6 +99,8 @@ body { |
<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> |
</div> |
</body> |
@@ -98,7 +112,7 @@ for (i = 0; i < elements.length; i++) { |
var canvas = elements[i]; |
var ctx = canvas.getContext("2d"); |
- var grd=ctx.createLinearGradient(0,0,canvas.width,0); |
+ var grd=ctx.createLinearGradient(0,0,canvas.width,canvas.height); |
grd.addColorStop(0,"yellow"); |
grd.addColorStop(0.5,"blue"); |
grd.addColorStop(0.75,"red"); |