1,295
edits
Gecko:Image Snapping and Rendering: Difference between revisions
Jump to navigation
Jump to search
Gecko:Image Snapping and Rendering (view source)
Revision as of 04:55, 4 October 2008
, 4 October 2008→Image Snapping And Rendering Requirements
| Line 10: | Line 10: | ||
* Image (actual size in CSS pixels) | * Image (actual size in CSS pixels) | ||
* Image initial rectangle (appunits) | * Image initial rectangle (appunits) | ||
* Anchor point within initial rectangle (appunits) | |||
* Logical fill rectangle (appunits) | * Logical fill rectangle (appunits) | ||
* Ratio of appunits to device pixels | * Ratio of appunits to device pixels | ||
* Actual dirty rectangle (device units) | * Actual dirty rectangle (device units) | ||
Output: | |||
* An image-space to device-space transform (translation and scale) | |||
* A device-space, pixel-aligned rectangle to fill | |||
* An image-space pixel rectangle outside of which gfx should not sample (using EXTEND_PAD as necessary) | |||
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). | 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). | ||
| Line 21: | Line 27: | ||
# 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.) | # 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.) | ||
# 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.) | # 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.) | ||
# The ratio of initial rectangle size in device pixels to image size in CSS pixels, along both axes, must be used as the scale factors for the image space to device space transform. (RATIONALE: Otherwise scaled image tiling will become grossly incorrect at large distances.) | # The ratio of initial rectangle size in device pixels to image size in CSS pixels, along both axes, must be used as the scale factors for the image space to device space transform. (RATIONALE: Otherwise scaled image tiling will become grossly incorrect at large distances.) | ||
# The anchor point, mapped back to image space via the initial rect and then mapped to device space via the algorithm's image space to device space transform, should end up at the original anchor point rounded to the nearest pixel boundaries. (RATIONALE: A CSS background-position:right/bottom image should actually be drawn with the rightmost/bottommost set of pixels at the appropriate edge of the element, no matter what scaling is in effect, so we need to be told which edges should line up and make sure they do.) | |||
Requirements 5 and 6 imply the following additional requirement: | |||
* If the initial rectangle size in device pixels equals the image size in CSS pixels, then the filled area is rendered as a simple copy of the ideal rendering translated by less than or equal to half a pixel in the horizontal and vertical directions (except where image pixels in the ideal rendering do not contain the center of any device pixel --- i.e. partial pixels). (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; in fact, all we're allowed to do is translate the rendering by a minimal amount to pixel-align the image.) | |||
Requirements 3, 5 and 6 imply the following additional requirement: | |||
* A whole image pixel in the ideal rendering will be present in the actual rendering, translated by at most half a pixel in each direction. | |||
== Algorithm == | == Algorithm == | ||