[css-images-4] Proposal to allow replaced elements to paint outside of their bounds · Issue #7058 · w3c/csswg-drafts (original) (raw)
Context: WICG/view-transitions#120, where we want to snapshot an element as an image, paint it into a box of the right size, but also get the "decorations" (borders, outlines, shadows) painted outside of that box.
This seems like a useful functionality more generally, as well; in some cases you can use border-image to make an image paint "outside of" an element, but the painting area still takes up layout space (you inset from the edge of the border area, but can't go outside of it). This can allow an author to, for example, create an image with a custom glow or shadow applied, with proper ink-overflow behavior like a CSS shadow would have.
I propose we do this with two new object-* properties:
Name: object-view-box
Values: none | <length-percentage>{4}
Initial: none
Percentages: For the first and third values, relative to the object's original natural width. For the 2nd and 4th, relative to the object's original natural height.
object-view-box takes an x/y/width/height quartet of lengths, and has two effects:
- The object's "natural size" is changed to the specified width and height. (This happens before the other object-* properties take effect; they work on the new natural size.)
- The replaced content is shifted such that the point (x,y) of its paint rectangle is in the top-left of its natural size rectangle, and the point (x+width, y+height) is in the bottom-right of its natural-size rectangle.
- If this puts any pixels outside of the natural size rectangle, and object-fit/position/overflow allow for it, these pixels will be visible. (By default, the natural size rectangle exactly fills the element and is clipped to it, so any pixels outside the natural size rectangle won't be visible.)
- If the replaced content itself has its own notion of "view box" (such as SVG), this has no special interaction with it - it applies on top with the listed effects.
Name: object-overflow
Values: hidden | visible
Initial: hidden
- If
hidden, the replaced content is clipped to the element's content box. - If
visible, the replaced content can overflow the element's content-box. This overflowing content is counted as ink overflow. (To overflow, at least one of the otherobject-*properties must be in use.)
So for the use-case in the linked issue, we'd set the w/h part of object-view-box to the size of the snapshotted element, and x/y according to the amount of snapshot margin captured around it (to get shadows/etc), and set object-overflow: visible to let those shadow ink-overflow properly. If we then let the element size per its natural size, it will correctly take on the size of the snappshotted border box exactly, which is precisely what we want.
Thoughts? Concerns? Other possible directions?