Intent to implement: CSS Mask Image properties

[Ku(顧思捷)CJ]

*Summary*:
Intend to implement CSS mask. By using this it, you can apply a mask to a
graphical object, so that the graphical object will be painted onto the
background through a mask, thus completely or partially masking out parts
of the graphical object.

*Bug*:
https://bugzilla.mozilla.org/show_bug.cgi?id=686281

*Link to standard*:
https://drafts.fxtf.org/css-masking-1/

*Platform coverage*:
everywhere

Estimated or target release:
Firefox 43

*DevTools bug*:
none

Supported by both Chrome and Safari.

[Jet Villegas]

> *Platform coverage*:
> everywhere
>
>
I'm so happy to see more Core Layout Engine features coming out of the
Taipei office. Nice work, CJ!

--Jet

[Panos Astithas]

On Tue, Nov 10, 2015 at 9:09 AM, Ku(顧思捷)CJ <c...@mozilla.com> wrote:

> *Summary*:
> Intend to implement CSS mask. By using this it, you can apply a mask to a
> graphical object, so that the graphical object will be painted onto the
> background through a mask, thus completely or partially masking out parts
> of the graphical object.
>

> *DevTools bug*:
> none
>

It would be good to at least make sure our node highlighter behaves
properly in these cases. It might even be worthwhile to use a special mask
inspector, like we do for transforms.

Panos

[Patrick Brosset]

Thanks Panos, I was about to reply with the same comment. Masking/clipping
is typically the type of visual effects authors could use devtools help
with.
I think having a tool that reveals the whole graphical object as well as
outlines the mask's shape could be a start.
Devtools support for this would not only help people debug issues, but help
with feature adoption and help people learn.

Filed bug 1223304 for this. Should it block or depend on 686281
<https://bugzilla.mozilla.org/show_bug.cgi?id=686281>?

> _______________________________________________
> dev-platform mailing list
> dev-pl...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-platform
>

[L. David Baron]

On Tuesday 2015-11-10 15:09 +0800, Ku(顧思捷)CJ wrote:
> *Summary*:
> Intend to implement CSS mask. By using this it, you can apply a mask to a
> graphical object, so that the graphical object will be painted onto the
> background through a mask, thus completely or partially masking out parts
> of the graphical object.
>

> *Bug*:
> https://bugzilla.mozilla.org/show_bug.cgi?id=686281

One comment that somebody on the list may have better ideas on than
I have so far: this patch produces a fun naming problem for which I
haven't yet been able to come up with a solution that I'm happy
with.

In particular, there will be a lot of shared code between
backgrounds and masks. For a given element, both backgrounds and
masks have a set of layers, each consisting of an image that can be
positioned, tiled, sized, etc. (think background-image,
background-position, background-repeat, background-size, etc.). We
used to have set of layers directly within
nsStyleBackground, which each of the layers in an
nsStyleBackground::Layer.

Now the set of layers needs to be its own class so we can have one
object for backgrounds and a separate one for masks. CJ's initial
patch had nsStyleLayers, which I find too unclear and also too
related to gfx::layers. I'm currently thinking nsStyleImageLayers
at least disambiguates a bit, and leaning towards that. Though my
initial preference (which I think heycam didn't like) was to retain
more background-ish names (e.g., nsStyleBackgroundLayers, and keep
the NS_STYLE_BACKGROUND_* naming of constants) even though they're
also used for masks, since their meaning would be more recognizable
even though the breadth of their use (for both backgrounds and
masks) would be less obvious.

If somebody has a better idea that's both clearer and not too long,
I'd like to hear it; I don't want to have a bikeshedding discussion,
though.

> *Link to standard*:
> https://drafts.fxtf.org/css-masking-1/
>
> *Platform coverage*:
> everywhere
>
> Estimated or target release:
> Firefox 43

I think this should be 45, since that's the current release on
nightly.

-David

--
𝄞 L. David Baron http://dbaron.org/ 𝄂
𝄢 Mozilla https://www.mozilla.org/ 𝄂
Before I built a wall I'd ask to know
What I was walling in or walling out,
And to whom I was like to give offense.
- Robert Frost, Mending Wall (1914)

[Frederik Braun]

This reads like it could pose similar problems than those we've had with
SVG Filters, i.e., repaint timing and history sniffing.

https://bugzilla.mozilla.org/show_bug.cgi?id=711043

Who would be a good person to verify / analyze this?

On 10.11.2015 08:09, Ku(顧思捷)CJ wrote:
> *Summary*:
> Intend to implement CSS mask. By using this it, you can apply a mask to a
> graphical object, so that the graphical object will be painted onto the
> background through a mask, thus completely or partially masking out parts
> of the graphical object.
>
> *Bug*:
> https://bugzilla.mozilla.org/show_bug.cgi?id=686281
>

> *Link to standard*:
> https://drafts.fxtf.org/css-masking-1/
>
> *Platform coverage*:
> everywhere
>
> Estimated or target release:
> Firefox 43
>

> *DevTools bug*:
> none
>
> Supported by both Chrome and Safari.