Spec -webkit-mask-*

[karlcow]

Again just here for getting a better understanding of how widespread is it.

Currently the tier1 version of google search is using -webkit-mask-image and -webkit-mask-size. See https://bugzilla.mozilla.org/show_bug.cgi?id=921532 To note that Google is serving an inferior version to Firefox and IE where they get links at the bottom instead of infinite loading and CSS sprites instead of the mask.

About CSS Masks usage http://caniuse.com/#feat=css-masks
The support is not overlapping. aka Webkit/Blink family supports only -webkit-mask-image, etc.
And Gecko supports only SVG masks.
And Trident/Edge doesn't support anything.

We have a case of non overlapping feature.

@foolip I wonder if there are data on how widespread the usage is on the Web for Chrome?

[foolip]

You can find this data at https://www.chromestatus.com/metrics/css/popularity

However, if these are being used by Google search, then that'll dominate the usage so we'll have no idea how risky it would be to remove until Google search stops using it.

Not sure who the best contact for this in Blink would be. I guess it's style+paint? @dirkschulze @RByers, do you know?

[karlcow]

Thanks @foolip
ah. indeed. I wish there was a popularity by unique domains (aka this property is used on n domains).

[karlcow]

As of today

• ~ 7.5% webkit-mask-image: https://www.chromestatus.com/metrics/css/timeline/popularity/289
• ~ 4.9% webkit-mask-size: https://www.chromestatus.com/metrics/css/timeline/popularity/297
• ~0.15% mask: https://www.chromestatus.com/metrics/css/timeline/popularity/357

[karlcow]

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

[miketaylr]

We aliased a handful (all?) of the CSS mask props to -webkit-mask props here:

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

See http://hg.mozilla.org/mozilla-central/rev/f6eba571ce59 for actual mappings.

TODO:

• Make sure this actually works the way we think it should
• Spec it

@karlcow do you know offhand of any sites that use these props we can test against? (I can probably find some easily if you don't)

[miketaylr]

Gonna pile some demos from quick googling here. To investigate failures.

• https://jedidiah.eu/code/css/masks/, the second animated demo works as expected. The first heart mask doesn't -- but it doesn't in Chrome or Safari either.
• https://css-tricks.com/examples/ImageWipes/ doesn't work in Fx Nightly.
• http://tympanus.net/codrops/css_reference/mask-image/ half works in Fx Nightly (possibly we don't support gradient masks yet?)
• http://vanseodesign.com/css/clipping-and-masking-examples/ lots of examples and links to look at here.

https://github.com/WebKit/webkit/tree/master/LayoutTests/fast/masking

[miketaylr]

Going to update the title, because this is something we feel important enough to support in Gecko.

[miketaylr]

Here's a naive guess at how mapping should happen (I think a few things were left out of the commit at http://hg.mozilla.org/mozilla-central/rev/f6eba571ce59):

Chrome usage stats	WebKit Mask Property	Standard Equivalent (if any)
1.3352%	-webkit-mask	mask
0.5929%	-webkit-mask-box-image	mask-border ❓
none	none	mask-border-mode
0.0094%	-webkit-mask-box-image-outset	mask-border-outset ❓
0.0097%	-webkit-mask-box-image-repeat	mask-border-repeat ❓
0.0097%	-webkit-mask-box-image-slice	mask-border-slice ❓
0.0098%	-webkit-mask-box-image-source	mask-border-source ❓
0.0093%	-webkit-mask-box-image-width	mask-border-width ❓
0.0161%	-webkit-mask-clip	mask-clip
0.0142%	-webkit-mask-composite	mask-composite
4.9836%	-webkit-mask-image	mask-image
none	none	mask-mode
0.0093%	-webkit-mask-origin	mask-origin
1.6921%	-webkit-mask-position	mask-position
0.0058%	-webkit-mask-position-x	none
0.0034%	-webkit-mask-position-y	none
2.0105%	-webkit-mask-repeat	mask-repeat
<=0.0001%	-webkit-mask-repeat-x	none
<=0.0001%	-webkit-mask-repeat-y	none
2.6887%	-webkit-mask-size	mask-size
none	-webkit-mask-source-type	mask-type

Stuff with ❓ is just a guess, based on naming similarities and descriptions. Need to look more closely.

TODO: Look at props that take keywords and see if values between the two are the same.

[karlcow]

@miketaylr Well I was about to suggest images.google.com as the biggest offender… but testing it this morning I was… in shock!

They fixed it: https://bugzilla.mozilla.org/show_bug.cgi?id=921532#c17 for Chrome and use SVG.
From a quick test it seems, we could ask them to send us this version. I need to further test it.

[miketaylr]

@miketaylr Well I was about to suggest images.google.com as the biggest offender… but testing it this morning I was… in shock!

Cool! OK, I'll keep testing demos then and find other sites in my bugmail.

[miketaylr]

A few notes from research.

Safari originally shipped a -webkit-mask-attachment (it's listed in the original blog post), but that was removed. See http://mac-os-forge.2317878.n4.nabble.com/CSS-Masking-in-WebKit-td191605.html and https://bugs.webkit.org/show_bug.cgi?id=67137. Apparently it was never actually implemented for content (apart from appearing in CSSOM) so there shouldn't be any compat concerns here.

-webkit-mask-repeat-x and -webkit-mask-repeat-y are at 0 usage, according to Chrome usage.

Will have to keep an eye on -webkit-mask-position-x and -webkit-mask-position-y -- it looks like a recent-ish uptick in usage (possibly some popular lib or framework started using them?).

[miketaylr]

I'll double check the -box-image- -> -border- aliases before adding those to the spec.

[miketaylr]

I should probably remove -webkit-mask-source-type -- Chrome doesn't support this (WebKit added support shortly after the Blink split). And hopefully when Chrome does add support, they'll just add support for mask-type without a prefix.

(Let's keep an eye out for web content that depends on this, but I suspect it would be very, very low).

[karlcow]

158 code results.
I github standards almost none
https://github.com/search?langOverride=&q=-webkit-mask-source-type&repo=&start_value=1&type=Code

[miketaylr]

Yep, most of those just forks of WebKit tests.

[miketaylr]

Based on https://developer.apple.com/library/safari/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Masks/Masks.html, https://github.com/WebKit/webkit/blob/master/Source/WebCore/css/CSSPropertyNames.in#L548, and stuff like http://www.html5rocks.com/en/tutorials/masking/adobe/#toc-the-mask-border-property I'm fairly confident the main difference between -webkit-mask-box-image and mask-border properties is just the name.

Comparing between https://www.w3.org/TR/2013/WD-css-masking-20130620/#box-image-masks and
https://drafts.fxtf.org/css-masking-1/#mask-borders, the only difference I see is the equivalent of a mask-border-mode from -webkit-mask-box-image shorthand, but it should just be set to its initial value (alpha).

[karlcow]

6 years later no browsers are implementing mask-border and variants. We should probably remove -webkit-mask-box from the legacy alias name, and move them to a section where we say that they need to be supported on their own.