Intent to Ship: Blending of HTML and SVG elements

278 views
Skip to first unread message

Ion Rosca

unread,
Nov 17, 2014, 10:13:43 AM11/17/14
to blin...@chromium.org

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

unread,
Nov 18, 2014, 7:02:36 PM11/18/14
to Ion Rosca, blin...@chromium.org
LGTM

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

Adrienne Walker

unread,
Nov 18, 2014, 7:06:19 PM11/18/14
to Chris Harrelson, Ion Rosca, blin...@chromium.org
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

unread,
Nov 18, 2014, 7:06:42 PM11/18/14
to Chris Harrelson, Ion Rosca, blin...@chromium.org
LGTM2

Elliott Sprehn

unread,
Nov 18, 2014, 11:21:56 PM11/18/14
to Philip Rogers, Chris Harrelson, Ion Rosca, blin...@chromium.org
The named "isolation" seems awfully generic, are there plans to extend this CSS property to do other things like isolation: layout?

Rik Cabanier

unread,
Nov 18, 2014, 11:31:46 PM11/18/14
to Elliott Sprehn, Philip Rogers, Chris Harrelson, Ion Rosca, blin...@chromium.org
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

unread,
Nov 18, 2014, 11:34:33 PM11/18/14
to Rik Cabanier, Philip Rogers, Chris Harrelson, Ion Rosca, blin...@chromium.org
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

unread,
Nov 19, 2014, 12:14:16 AM11/19/14
to Elliott Sprehn, Philip Rogers, Chris Harrelson, Ion Rosca, blin...@chromium.org
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)

Elliott Sprehn

unread,
Nov 19, 2014, 1:16:28 AM11/19/14
to Rik Cabanier, Philip Rogers, Chris Harrelson, Ion Rosca, blin...@chromium.org
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

unread,
Nov 19, 2014, 1:34:12 AM11/19/14
to Elliott Sprehn, Philip Rogers, Chris Harrelson, Ion Rosca, blin...@chromium.org
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

unread,
Nov 26, 2014, 2:43:56 AM11/26/14
to Rik Cabanier, Elliott Sprehn, Chris Harrelson, Ion Rosca, blin...@chromium.org
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

unread,
Nov 26, 2014, 5:28:14 AM11/26/14
to Rik Cabanier, Philip Rogers, Elliott Sprehn, Chris Harrelson, Ion Rosca, blin...@chromium.org
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

unread,
Nov 26, 2014, 5:46:04 AM11/26/14
to Erik Dahlström, Rik Cabanier, Philip Rogers, Elliott Sprehn, Chris Harrelson, Ion Rosca, blin...@chromium.org
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:

 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

unread,
Nov 26, 2014, 7:27:39 AM11/26/14
to PhistucK, Rik Cabanier, Philip Rogers, Elliott Sprehn, Chris Harrelson, Ion Rosca, blin...@chromium.org
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

unread,
Dec 2, 2014, 4:43:57 AM12/2/14
to Philip Rogers, Chris Harrelson, Ion Rosca, blin...@chromium.org
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

unread,
Dec 2, 2014, 5:17:09 AM12/2/14
to Erik Dahlström, PhistucK, Rik Cabanier, Philip Rogers, Chris Harrelson, Ion Rosca, blin...@chromium.org
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
  To unsubscribe from this group and stop receiving emails from it,
To unsubscribe from this group and stop receiving emails from it, send an


--
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

Philip Rogers

unread,
Dec 2, 2014, 3:51:53 PM12/2/14
to Elliott Sprehn, Erik Dahlström, PhistucK, Rik Cabanier, Chris Harrelson, Ion Rosca, blin...@chromium.org
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.
Reply all
Reply to author
Forward
0 new messages