Created
September 1, 2014 19:29
-
-
Save joews/de685d52af21264fad81 to your computer and use it in GitHub Desktop.
Demonstrate slow paint in Chrome 39.0.2141.0 canary vs 37.0.2062.94
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| svg { | |
| } | |
| rect { | |
| fill-opacity: 0.5; | |
| } | |
| .box { | |
| stroke: #fff; | |
| fill-opacity: .1; | |
| shape-rendering: crispEdges; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <svg id="svg"> | |
| <g id="g"></g> | |
| </svg> | |
| <script> | |
| // Demonstrate slow paint speed in Chrome 39.0.2141.0 canary c/w 37.0.2062.94 | |
| // Paint a numer of stacked rects with opacity < 1. Animate another rect with | |
| // opacity < 1 over the top (with JS). | |
| function randomInt(min, max) { | |
| return Math.floor(Math.random() * (max - min + 1)) + min; | |
| } | |
| var NS = 'http://www.w3.org/2000/svg'; | |
| function rect(width, height, x, y, color) { | |
| var rect = document.createElementNS(NS, 'rect'); | |
| rect.setAttribute('x', x); | |
| rect.setAttribute('y', y); | |
| rect.setAttribute('width', width); | |
| rect.setAttribute('height', height); | |
| rect.style.fill = color; | |
| return rect; | |
| } | |
| var svg = document.getElementById('svg'), | |
| g = document.getElementById('g'); | |
| // svg width, height | |
| var w = 800, h = 400; | |
| // small rect width/height | |
| var rectSize = 10; | |
| var colors = ["#1f77b4", "#aec7e8", "#ff7f0e", "#ffbb78", "#2ca02c", "#98df8a", "#d62728", "#ff9896", "#9467bd", "#c5b0d5", "#8c564b", "#c49c94", "#e377c2", "#f7b6d2", "#7f7f7f", "#c7c7c7", "#bcbd22", "#dbdb8d", "#17becf", "#9edae5"]; | |
| svg.style.width = w; | |
| svg.style.height = h; | |
| // number of overlapping layers of background rects | |
| // the more layers, the hotter the laptop | |
| var layers = 20; | |
| var i, j, x, y, n = 0; | |
| var rows = w / rectSize, | |
| cols = h / rectSize; | |
| for(var layer = 0; layer < layers; layer ++) { | |
| for(i = 0; i < rows; i ++) { | |
| x = i * rectSize; | |
| for(j = 0; j < cols; j ++) { | |
| y = j * rectSize; | |
| g.appendChild(rect(10, 10, x, y, colors[n ++ % 20])); | |
| } | |
| } | |
| } | |
| var box = rect(100, h, 0, 0, '#000000'); | |
| box.setAttribute('class', 'box'); | |
| g.appendChild(box) | |
| var delta = 5, lastX = 1; | |
| function move() { | |
| if(lastX <= 0 || lastX >= w - 100) { | |
| delta *= -1; | |
| } | |
| lastX += delta; | |
| box.setAttribute('x', lastX); | |
| requestAnimationFrame(move); | |
| } | |
| requestAnimationFrame(move); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Actually it turns out opacity is irrelevant. Chromium issue: https://code.google.com/p/chromium/issues/detail?id=409686