Paint is the rendering stage that fills memory with pixels after layout determines each element’s size and position. It draws text, images, borders, and shadows into painted layers. section 16.3.1
Paint interacts with browser rendering in practical ways:
- Changing a background color triggers repainting but does not require layout recalculation, because it does not change element size or position. section 16.3.1
- Under suitable conditions, browsers promote an element to its own layer, paint it separately, and may send that layer to the GPU. section 16.3.1
A background-color change
Changing an element’s background color repaints its pixels while avoiding the broader reflow caused by changing its width, height, or position. section 16.3.1
Figure 16.12 The three stages of the rendering pipeline
Use the rendering-pipeline diagram to place paint between layout and composite. section 16.3.1
