Gecko:Image Snapping and Rendering

Preamble: General Rendering Principles (dbaron)

1. Paints with different dirty rectangles draw the same values for the device pixels in the intersection of the dirty rects. Otherwise, visual glitches are inevitable.
2. All edges (e.g., of background color, background image, border, foreground image, etc.) at the same subpixel location must be snapped (or not snapped) to the same place. This includes multiple edges of the same element, edges of ancestor/descendant elements, and edges of elements without an ancestor/descendant relationship.
3. Any two edges separated by a width that maps to an exact number of device pixels must snap to locations separated by the same amount (and direction).

Image Snapping And Rendering

Input:

• Image (actual size in CSS pixels)
• Image initial rectangle (appunits)
• Logical fill rectangle (appunits)
• Ratio of appunits to device pixels
• Actual dirty rectangle (device units)

For CSS background drawing, the "image initial rectangle" is determined by background-size and the "anchor point" for the image (which is determined by background-position and background-attachment). The "logical fill rectangle" is the intersection of background-clip and the area covered by the image (determined by taking the image initial rectangle and tiling it as per background-repeat).

Requirements:

1. The basic plan is that the image is scaled to fill the initial rectangle, which is tiled over the plane and clipped to the logical fill rectangle. Pixels outside the dirty rectangle need not be drawn. We should approximate that as closely as possible given the limitations of device pixels.
2. Paints with different dirty rectangles draw the same values for the pixels they draw in common. (RATIONALE: Principle #1.)
3. The device pixels that are filled should be the logical fill rectangle rounded to device pixel edges, preserving device pixel centers. (RATIONALE: That's how we "pixel snap" solid rect fills and image drawing should be consistent with solid fills in the pixels that are touched. Satisfies Principles #2 and #3.)
4. Every image pixel sampled in actual rendering would also be sampled by an ideal rendering to an infinite-resolution device. (RATIONALE: Web authors should not be faced with fringes contributed by pixels they did not intend to be sampled.)
5. If the initial rectangle size in device pixels equals the image size in CSS pixels, then each filled device pixel should be set exactly to one image pixel. (RATIONALE: If the scale factor in the author's design is exactly the inverse of the scale required by the device, we must avoid scaling and subpixel translation or there will be unnecessary image blurring and performance penalty.)