Gradient patterns that tile, animations that keep up, and a much faster canvas
A canvas, gradient and animation release: canvas drawing is up to 14 times faster, gradient patterns (dots, grids, stripes, checkerboards, progress bars) now tile the way pages ask, shimmer and pulse animations play, and animations the engine draws run at the display's rate. 14 changes, each checked against the reference browser or the software renderer.
Gradient patterns that tile
Web designers draw a lot of patterns with gradients instead of images: dot grids, graph paper, checkerboards, stripes, progress bars, the thin line under a link. All of them work the same way: a gradient, a size, a position, and a repeat. Floati ignored those last three and stretched the gradient across the whole box, so each of these patterns came out as one big smear or one flat colour. A gradient is now sized, placed and repeated the way an image is, with stops in pixels, two-position conic stops, the four-value background-position, and hard edges that land the same in every tile. Gradient text also became one gradient across the whole block instead of one per word.
Shimmers, pulses and animations that keep up
The grey shimmer on a page that is still loading, a striped progress bar, a pulsing dot: each of these animates a list of values, and Floati treated a list as one thing it could not blend, so it jumped half way through and sat still. Lists of the same shape now blend item by item. The second half of this is the clock. Animations of colours, sizes, backgrounds and shadows have to be drawn by the engine, and they only updated with the page's half-second pump. The engine now wakes for them itself, once per display refresh, and backs off to three times the cost of the last frame so an expensive page cannot eat the processor. When an animation changes only how things look, a frame keeps the layout and redraws only what moved, and it is still byte for byte what a full rebuild draws.
A canvas up to 14 times faster
Charts, games and drawing tools paint on a canvas, and last release we measured how far ours was behind: the reference browser's software canvas beat ours 3 to 24 times over. So this release rebuilt the pixel work: loops visit only the pixels a shape reaches, whole rows blend at once, repeated rows are reused, and circles, lines and rotated shapes get exact area coverage in whole-number arithmetic, as accurate as before and far cheaper. The reference is still ahead on most rows, and lines are still 1.7 times behind. The whole-number design has a second purpose: a GPU can reach exactly the same bytes. A compute shader now replays canvas drawing byte for byte on Metal and DirectX 12 in the test bench, 3.2 ms against 19 ms on full-screen alpha fills. It is not switched on for pages yet, and it will be when a real page measures faster with it.