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..8150397192da8eed2de5a75b86a8bc75e0de6e5f 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; |
@@ -80,14 +92,24 @@ body { |
<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;"></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: opacity-anim 150000s; transform: scale(1.3, 0.8)"></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> |
</body> |
@@ -98,7 +120,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"); |