[css-paint-api] Support for using paint() in element overlays

[jimkyndemeyer]

In https://drafts.css-houdini.org/css-paint-api/#intro there is mention of using paint() as filters, although that is not yet supported.

If I understand the current spec, paint is limited to being used on background-image and border-image. I'd like to propose an additional "layer" of painting, namely the types of overlays that browser-based devtools show, e.g. how the box model appears in Chrome devtools:

A few key points:

• The painted overlays need to be the last layer of paint such that the same effect as the devtools can achieved using alpha blending
• Registering painting in the overlay needs to be non-destructive, that is it can't override existing css properties such as background image or border image as this will change the appearance of the element being highlighted using an overlay paint. Open question: Potentially a new CSS property is needed?
• Multiple overlay paints should be allowed, e.g. registered using unique ids -- again to be non-destructive if multiple overlays need to be shown at once. Open question: how to register paint by multiple ids?

A few example use cases:

• In a browser based visual design tool or devtools, easily overlay a highlight on top of hovered/selected elements
• In browser extensions, easily highlight elements without having to modify the DOM

Adding this would remove a whole class of problems with doing overlays, e.g. calculating their position effectively, keeping them in sync with layout changes, and not having to insert additional DOM elements.

[SebastianZ]

I like the idea, especially in regard of avoiding additional DOM just used for creating those overlays.

The main point here doesn't seem to be the paint() function itself but actually a property for a foreground layer that is painted as top layer above all others. That property would take a <image> value (or even a list of them like the background-image property). With that, support for paint() comes for free.

Such a property would also cover other use cases like e.g. gradient overlays fading the contents of an element out (as seen in browser tabs, for example), or overlaying contents by images.

Sebastian

[tabatkins]

Yes, this is basically just a request for foreground-image or overlay-image, which has been discussed in the past but never made it into a draft (and, if my email search can be believed, was last mentioned in 2013, before we moved to GH). Once that exists, paint() will work naturally with it, as it's just an <image> type.

I'll close this issue, then, but @jimkyndemeyer, would you mind reopening this issue over on https://github.com/w3c/csswg-drafts/issues, asking for an "overlay image"?