Analysis of the Skia 2D graphics engine, pixel color formats, paint-invalidating CSS properties, and fragment shader fillrate scaling.
Chromium delegates rasterization to the Skia 2D Graphics Library (//third_party/skia).
- Color Allocation: Textures are allocated in 32-bit depth using
kRGBA_8888_SkColorType.
- Byte Depth: Each pixel represents 4 channels: Red (8-bit)+Green (8-bit)+Blue (8-bit)+Alpha (8-bit)=32 bits=4 bytes
- Every rasterized layer uploaded to the GPU as an OpenGL/Vulkan texture consumes: Bytes=PixelWidth×PixelHeight×4
According to Paul Lewis and Paul Irish's CSS Triggers:
- Properties that affect visual styling without changing geometric boundaries bypass the Layout stage, but trigger immediate Paint (Rasterization) and Compositing:
- Surface styling:
background-color, background-image, box-shadow, border-color, border-radius, outline.
- Text decorations:
color, text-decoration, text-shadow.
- Dynamic variables: CSS Custom Properties (
--*), because their mutation necessitates computed style recalculation and broad subtree repaint.
In computer graphics and GPU architecture, Fillrate is the rate at which a GPU can render pixels to the frame buffer:
Raster Cost∝Areapaint=Welement×Helement×DPR2
- Small surface area: A 32×32px toggle switch animating
background-color invalidates roughly 1KB of pixel data. The GPU handles this in sub-millisecond raster passes.
- Large surface area: A full-screen dialog (1920×1080px, DPR 2) animating
box-shadow invalidates ≈8.3 million physical pixels per frame (≈33MB of raw raster throughput per tick).
- Conclusion for Scoring: A linear or clamped scaling multiplier based on PaintArea/ViewportArea is mathematically essential to prevent disproportionate penalties on small UI widgets while aggressively flagging large viewport repaints.