Intent to Ship: Blending of HTML and SVG elements

[Ion Rosca]

Contact emails

ro...@adobe.com, caba...@adobe.com, e...@opera.com

 

Spec

The CSS Blending and Compositing spec: http://www.w3.org/TR/compositing-1/

The spec will be moved to PR following the discussions at TPAC 2014 [1].

 

Summary

Blending of HTML and SVG elements adds two new CSS properties: ‘mix-blend-mode’ [2] and ‘isolation’ [3].

·         ‘mix-blend-mode’ allows you to specify how an element should blend its content with the colors in the backdrop. The element’s backdrop is the content behind the element, inside the current stacking context.

·         The ‘isolation’ property set to ‘isolate’ on an element creates a stacking context on that element, thus preventing its descendants to blend with the element’s ancestors.

 

This feature is unprefixed and enabled by default in Safari and Firefox starting with version 7.1 and 32 respectively. In Chrome, this feature is behind the 'experimental web platform features' flag starting with version 31.

 

Link to “Intent to Implement” blink-dev discussion

https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/zNt4IYwXC04/BNTiP0mKYiEJ

 

Is this feature supported on all five Blink platforms (Windows, Mac, Linux, Chrome OS and Android)?

Yes.

 

Demo link

http://codepen.io/adobe/full/fGjsr

 

OWP launch tracking bug?

http://crbug.com/154769

 

Link to entry on the feature dashboard

https://www.chromestatus.com/features/6362616360337408

 

[1] http://lists.w3.org/Archives/Public/public-fx/2014OctDec/0065.html

[2] http://www.w3.org/TR/compositing-1/#mix-blend-mode

[3] http://www.w3.org/TR/compositing-1/#isolation

 

[Chris Harrelson]

LGTM

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

[Adrienne Walker]

This also looks fine from the compositor end.

It's a net neutral on complexity; it made our shaders more
complicated, but cleaned up some complicated background filter code.
Even if blend modes weren't exposed to the web, we'd probably keep a
good bit of the code.

[Philip Rogers]

LGTM2

[Elliott Sprehn]

The named "isolation" seems awfully generic, are there plans to extend this CSS property to do other things like isolation: layout?

[Rik Cabanier]

On Tue, Nov 18, 2014 at 8:21 PM, Elliott Sprehn <esp...@chromium.org> wrote:

The named "isolation" seems awfully generic, are there plans to extend this CSS property to do other things like isolation: layout?

We hope to eventually support non-isolated groups with this property. The name of that option is TBD as non-isolate sounds a bit silly.

What would 'isolation: layout' do?

[Elliott Sprehn]

On Tue, Nov 18, 2014 at 8:31 PM, Rik Cabanier <caba...@gmail.com> wrote:

On Tue, Nov 18, 2014 at 8:21 PM, Elliott Sprehn <esp...@chromium.org> wrote:

The named "isolation" seems awfully generic, are there plans to extend this CSS property to do other things like isolation: layout?

We hope to eventually support non-isolated groups with this property. The name of that option is TBD as non-isolate sounds a bit silly.

What would 'isolation: layout' do?

Create a layout boundary? I'm not sure we should be using the word "isolation" in such a general sense like this if it's specific to CSS blending and compositing.

There's layout, style, shadow dom and compositing isolation.

[Rik Cabanier]

On Tue, Nov 18, 2014 at 8:33 PM, Elliott Sprehn <esp...@chromium.org> wrote:

On Tue, Nov 18, 2014 at 8:31 PM, Rik Cabanier <caba...@gmail.com> wrote:

On Tue, Nov 18, 2014 at 8:21 PM, Elliott Sprehn <esp...@chromium.org> wrote:

The named "isolation" seems awfully generic, are there plans to extend this CSS property to do other things like isolation: layout?

We hope to eventually support non-isolated groups with this property. The name of that option is TBD as non-isolate sounds a bit silly.

What would 'isolation: layout' do?

Create a layout boundary? I'm not sure we should be using the word "isolation" in such a general sense like this if it's specific to CSS blending and compositing.

There's layout, style, shadow dom and compositing isolation.

Maybe we can extend it to do some of those?

Specifying 'isolation: isolate' just creates a new stacking context for that element; it is not defined as something that just applies to compositing.  [1]

Because of the stacking context a child of this element will not blend with the backdrop of that element. (This will also apply to the background-image filter property in the future)

1: http://dev.w3.org/fxtf/compositing-1/#isolation

[Elliott Sprehn]

Why not call it stacking-context: true? If that's all this property does it seems like we should name it for that. The web has enough confusingly named properties. :)

[Rik Cabanier]

On Tue, Nov 18, 2014 at 10:14 PM, Elliott Sprehn <esp...@chromium.org> wrote:

Why not call it stacking-context: true? If that's all this property does it seems like we should name it for that.

Because we want to use it for other things such as specifying non-isolated groups.

These would still generate stacking context but maintain their backdrop. This is expensive so we want the author to opt in to this.

 

The web has enough confusingly named properties. :)

We went over several proposals but always ended up circling back to isolation. (It used to be called 'enable-background' which was very confusing)

[Philip Rogers]

There were only 2 LGTMs on this thread so we're missing one to ship. Are there any additional concerns with this set of features?

@esprehn, I agree with you that "isolation" is not ideal but I have doubts that a better name could ever get consensus on public-fx. Do you think isolation is sufficiently confusing to stop ship?

[Erik Dahlström]

The spec says that inside svg content isolation should not be interpreted
as creating a stacking context, rather it should be interpreted as
isolation for the blending ops, see [3].

So, I'm not convinced that renaming 'isolation: isolate' to
'stacking-context: true' makes it any less confusing in that case.

>>>>>>>>>> *Contact emails*
>>>>>>>>>>
>>>>>>>>>> ro...@adobe.com, caba...@adobe.com, e...@opera.com
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> *Spec*

>>>>>>>>>>
>>>>>>>>>> The CSS Blending and Compositing spec:
>>>>>>>>>> http://www.w3.org/TR/compositing-1/
>>>>>>>>>>
>>>>>>>>>> The spec will be moved to PR following the discussions at TPAC
>>>>>>>>>> 2014 [1].
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>

>>>>>>>>>> *Summary*

>>>>>>>>>>
>>>>>>>>>> Blending of HTML and SVG elements adds two new CSS properties:
>>>>>>>>>> ‘mix-blend-mode’ [2] and ‘isolation’ [3].
>>>>>>>>>>
>>>>>>>>>> · ‘mix-blend-mode’ allows you to specify how an element
>>>>>>>>>> should blend its content with the colors in the backdrop. The
>>>>>>>>>> element’s
>>>>>>>>>> backdrop is the content behind the element, inside the current
>>>>>>>>>> stacking
>>>>>>>>>> context.
>>>>>>>>>>
>>>>>>>>>> · The ‘isolation’ property set to ‘isolate’ on an
>>>>>>>>>> element
>>>>>>>>>> creates a stacking context on that element, thus preventing its
>>>>>>>>>> descendants
>>>>>>>>>> to blend with the element’s ancestors.
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> This feature is unprefixed and enabled by default in Safari and
>>>>>>>>>> Firefox starting with version 7.1 and 32 respectively. In
>>>>>>>>>> Chrome, this
>>>>>>>>>> feature is behind the 'experimental web platform features' flag
>>>>>>>>>> starting
>>>>>>>>>> with version 31.
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>

>>>>>>>>>> *Link to “Intent to Implement” blink-dev discussion*
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/zNt4IYwXC04/BNTiP0mKYiEJ
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> *Is this feature supported on all five Blink platforms (Windows,
>>>>>>>>>> Mac, Linux, Chrome OS and Android)?*
>>>>>>>>>>
>>>>>>>>>> Yes.
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> *Demo link*
>>>>>>>>>>
>>>>>>>>>> http://codepen.io/adobe/full/fGjsr
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> *OWP launch tracking bug?*
>>>>>>>>>>
>>>>>>>>>> http://crbug.com/154769
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> *Link to entry on the **feature dashboard*
>>>>>>>>>> <http://www.chromestatus.com/>

>>>>>>>>>>
>>>>>>>>>> https://www.chromestatus.com/features/6362616360337408
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> [1]
>>>>>>>>>> http://lists.w3.org/Archives/Public/public-fx/2014OctDec/0065.html
>>>>>>>>>>
>>>>>>>>>> [2] http://www.w3.org/TR/compositing-1/#mix-blend-mode
>>>>>>>>>>
>>>>>>>>>> [3] http://www.w3.org/TR/compositing-1/#isolation
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> To unsubscribe from this group and stop receiving emails from
>>>>>>>>>> it,
>>>>>>>>>> send an email to blink-dev+...@chromium.org.
>>>>>>>>>>
>>>>>>>>>
>>>>>>>>>
>>>>>>>>
>>>>>>> To unsubscribe from this group and stop receiving emails from it,
>>>>>>> send an email to blink-dev+...@chromium.org.
>>>>>>>
>>>>>>
>>>>>>
>>>>>
>>>>
>>
>
> To unsubscribe from this group and stop receiving emails from it, send
> an email to blink-dev+...@chromium.org.

--
Erik Dahlstrom, Web Technology Developer, Opera Software
Co-Chair, W3C SVG Working Group

[PhistucK]

Well, that is just another point for "this is not a good name" and I would suggest adding two properties (one per purpose - stacking context and blending operations).

☆PhistucK

wrote:

send an email to blink-dev+unsubscribe@chromium.org.

 To unsubscribe from this group and stop receiving emails from it,

send an email to blink-dev+unsubscribe@chromium.org.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

--
Erik Dahlstrom, Web Technology Developer, Opera Software
Co-Chair, W3C SVG Working Group

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

[Erik Dahlström]

Well, not really. I object to changing the name to 'stacking-context', is
all.

And I don't agree with your suggestion of splitting the property in two,
the way I see it 'isolation' is meant for affecting how blending is
performed, not for making stacking-contexts. In any case, things of this
nature [should be / should have been] brought up on the relevant w3c
mailinglist(s).

On Wed, 26 Nov 2014 11:45:20 +0100, PhistucK <phis...@gmail.com> wrote:

> Well, that is just another point for "this is not a good name" and I
> would
> suggest adding two properties (one per purpose - stacking context and
> blending operations).
>
>

> ☆*PhistucK*

>>>>>>>>>>>> send an email to blink-dev+...@chromium.org.

>>>>>>>>>>>>
>>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>> To unsubscribe from this group and stop receiving emails from
>>>>>>>>>> it,

>>>>>>>>> send an email to blink-dev+...@chromium.org.

>>>>>>>>>
>>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>
>>>>>>
>>>>
>>> To unsubscribe from this group and stop receiving emails from it, send
>>> an

>>> email to blink-dev+...@chromium.org.

>>>
>>
>>
>> --
>> Erik Dahlstrom, Web Technology Developer, Opera Software
>> Co-Chair, W3C SVG Working Group
>>
>>
>> To unsubscribe from this group and stop receiving emails from it, send
>> an

>> email to blink-dev+...@chromium.org.

[TAMURA, Kent]

LGTM3.

> The spec will be moved to PR following the discussions at TPAC 2014 [1].

It's very good signal.

--

TAMURA Kent
Software Engineer, Google

[Elliott Sprehn]

On Wed, Nov 26, 2014 at 7:27 AM, Erik Dahlström <e...@opera.com> wrote:

Well, not really. I object to changing the name to 'stacking-context', is all.

And I don't agree with your suggestion of splitting the property in two, the way I see it 'isolation' is meant for affecting how blending is performed, not for making stacking-contexts. In any case, things of this nature [should be / should have been] brought up on the relevant w3c mailinglist(s).

The spec says all it does is create a stacking context though, which means that this is how it's going to get used on the web. There's going to be blog posts that say "When you need a stacking context, use isolation: isolate;"

 

If isolation is meant to be specifically for blending the property should probably do nothing unless you have a blend mode, and it should be called blend-isolation. Why use such a generic name?

Anyway, I'll send my feedback to the relevant standards list.

wrote:

 LGTM2

send an email to blink-dev+unsubscribe@chromium.org.

  To unsubscribe from this group and stop receiving emails from it,

send an email to blink-dev+unsubscribe@chromium.org.

To unsubscribe from this group and stop receiving emails from it, send an

email to blink-dev+unsubscribe@chromium.org.

--
Erik Dahlstrom, Web Technology Developer, Opera Software
Co-Chair, W3C SVG Working Group


To unsubscribe from this group and stop receiving emails from it, send an

email to blink-dev+unsubscribe@chromium.org.

[Philip Rogers]

Thanks Esprehn! I'm hopeful because there's already some light support. For posterity: http://lists.w3.org/Archives/Public/public-fx/2014OctDec/0106.html

I don't think we should delay shipping this for the name change. This means agreeing to break early adopters if it changes which is unfortunate but I think it's the best balance between forward progress and a perfect api.