Re: Utility of background-composite and background-blend-mode?

On Mon, Mar 4, 2013 at 8:44 PM, Robert O'Callahan <robert@ocallahan.org>wrote:

> On Fri, Feb 1, 2013 at 10:52 AM, Rik Cabanier <cabanier@gmail.com> wrote:
>
>> On Thu, Jan 31, 2013 at 1:41 PM, Robert O'Callahan <robert@ocallahan.org>wrote:
>>
>>> What is the difference between background-blend-mode:<MODE> and
>>> mix-blend-mode: background <MODE>?
>>>
>>
>> 'background-blend-mode' specifies how the background images blend with
>> each other. Conceptually, the background blend and composite with each
>> other and the resulting bitmap is then used as the element's background.
>> 'mix-blend-mode: background <MODE>' allows you to specify the blend mode
>> on that background image.
>>
>
> Was this answer correct? It looks to me like "background-composite"
> specifies "how the background images blend with each other".
>
> In fact, I am completely confused. background-blend-mode says "Each
> background image will blend with the element's background and the
> background images at a lower z-index." So if there's just one background
> image, which of mix-blend-mode:background <mode>" and
> "background-blend-mode" controls how that image blends with the element's
> background (which I assume means "backdrop"?)?
>
> A description of the processing model --- a pseudo-algorithm for drawing
> --- would be really helpful.
>

Sorry about the confusion.
After implementing this in WK and Firefox, I realized that the processing
model is different for 'background-blend-mode' and adjusted the spec text.

If you follow the spec [1], each background image is drawn during the step
'2. background image of element'. The background that is available for the
blend operation at that time is everything up to an ancestor that created a
stacking context.

The original text assumed that the background images were composited with
each other first and then this result was used. I think this detail is not
described in any specs but it should be added.

'mix-blend-mode: background <MODE>'  is still the same definition. To
implement this, you'd have to composite all the background images (and
color) into an offscreen buffer and then apply the blend mode when you draw
that buffer. That buffer will then composite/blend with the backdrop.
(Note that this will force the background images to be isolated = if
blending is also applied to them, they will only blend amongst themselves
and not the backdrop of the element. The spec should call this out.)

1: http://www.w3.org/TR/CSS21/zindex.html

Received on Tuesday, 5 March 2013 06:45:40 UTC