Index: tools/perf/page_sets/trivial_sites/trivial_blur_animation.html |
diff --git a/tools/perf/page_sets/trivial_sites/trivial_canvas.html b/tools/perf/page_sets/trivial_sites/trivial_blur_animation.html |
similarity index 57% |
copy from tools/perf/page_sets/trivial_sites/trivial_canvas.html |
copy to tools/perf/page_sets/trivial_sites/trivial_blur_animation.html |
index 567193796aeae1d75dea787512b589330a631fd3..9bb28819c556450f0da479c7b6e14c0f0e69ea6e 100644 |
--- a/tools/perf/page_sets/trivial_sites/trivial_canvas.html |
+++ b/tools/perf/page_sets/trivial_sites/trivial_blur_animation.html |
@@ -11,6 +11,15 @@ found in the LICENSE file. |
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%"> |
@@ -23,15 +32,11 @@ found in the LICENSE file. |
canvas.width = canvas.offsetWidth; |
canvas.height = canvas.offsetHeight; |
var ctx = canvas.getContext("2d"); |
- var rColor = 0; |
- function animate() { |
- rColor += 1; |
- rColor %= 255; |
- ctx.fillStyle = 'rgb(' + rColor + ',0,0)'; |
- ctx.fillRect(0, 0, canvas.width, canvas.height); |
- window.requestAnimationFrame(animate); |
- } |
- window.onload = animate; |
+ 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> |