Is it okay to just alias -webkit-mask-composite to mask-composite? #153

saschanaz · 2021-08-01T14:20:26Z

d1ac0cf just added all the mask things as aliases, but per MDN the syntax of this specific one is quite different. Why is it safe to just alias it?

The text was updated successfully, but these errors were encountered:

miketaylr · 2021-08-02T16:51:08Z

It could just be a bug due to me not understanding it well.

miketaylr · 2021-08-02T16:53:16Z

See also:

https://searchfox.org/mozilla-central/rev/4b88e0b8cca115009e82fdd65e5bf5812ff99128/devtools/shared/css/generated/properties-db.js#2110-2126

  "-webkit-mask-composite": {
    "isInherited": false,
    "subproperties": [
      "mask-composite"
    ],
    "supports": [],
    "values": [
      "add",
      "exclude",
      "inherit",
      "initial",
      "intersect",
      "revert",
      "subtract",
      "unset"
    ]
  },

miketaylr · 2021-08-02T16:57:14Z

Looking at https://www.w3.org/TR/css-masking-1/#the-mask-composite

<compositing-operator> = add | subtract | intersect | exclude

That seems to match what is in properties-db.js. So yeah, this isn't a "simple alias", but an alias that only supports the subset of values that match the unprefixed values.

saschanaz · 2021-08-02T17:05:51Z

It seems that list conflicts with webkit and blink implementations, it seems they don't overlap and MDN is right about it?

  '-webkit-mask-composite': {
    values: [
      'clear',
      'copy',
      'source-over',
      'source-in',
      'source-out',
      'source-atop',
      'destination-over',
      'destination-in',
      'destination-out',
      'destination-atop',
      'xor',
      'plus-lighter',
    ],
  },

miketaylr · 2021-08-02T17:38:26Z

We could do one of two things: document what Gecko does, or keep this as a simple alias. I suspect it's not worth the effort for Gecko to implement all the values, without any evidence that this breaks sites. What do you think @saschanaz?

saschanaz · 2021-08-02T17:44:46Z

document what Gecko does, or keep this as a simple alias

I think those two options are same given that Gecko implements it as a simple alias. There at least should be a note that the aliased -webkit-mask-composite is incompatible with webkit/blink implementation (although then I'm not sure why the alias should even exist).

miketaylr · 2021-08-02T17:56:19Z

I just noticed simple alias isn't even defined, and we should fix that.

There at least should be a note that the aliased -webkit-mask-composite is incompatible with webkit/blink implementation (although then I'm not sure why the alias should even exist).

I think this largely depends on what values are important for web compatibility. If no important sites use destination-atop, but they all use add, then it seems useful to have. But if Gecko wants to unship it, we can remove it from the spec.

saschanaz · 2021-08-02T18:09:14Z

My comments are largely based on the MDN data and spec, for actual implementation I guess @emilio might have an opinion.

domenic · 2021-08-02T19:03:47Z

We could do one of two things: document what Gecko does, or keep this as a simple alias

Shouldn't we try to get all three browsers to converge on a single interoperable behavior, and have the spec reflect whatever that is?

miketaylr · 2021-08-02T19:34:56Z

Shouldn't we try to get all three browsers to converge on a single interoperable behavior, and have the spec reflect whatever that is?

Yeah, that's ideal. Unfortunately I don't recall the circumstances surrounding the addition of -webkit-mask-composite - if Gecko had bugs requiring it, or it was initially added by EdgeHTML and Gecko followed. (note: there is some history at #14).

We could do the research to determine which values are important for compat, beyond add, substract, intersect, exclude. As of right now, those are the interoperable values between webkit, gecko, and blink. In theory if the others aren't used, or usage is low-enough to justify removal from the other engines, that would be a nice outcome.

(I guess that's the entire point of this issue being opened and I was too quick to reply. 🙈 )

saschanaz · 2021-08-02T20:24:48Z

We could do the research to determine which values are important for compat, beyond add, substract, intersect, exclude. As of right now, those are the interoperable values between webkit, gecko, and blink.

Really? CSS.supports("-webkit-mask-composite: add") returns false on Chrome but true on Firefox. I think the implementations of Firefox and Chrome are totally incompatible with each other.

emilio · 2021-08-02T20:54:57Z

Yeah, so what we implement is just an alias for mask-composite: https://searchfox.org/mozilla-central/rev/7b1de5e29d878cc163dec7beaf9b57a2f0f41aaa/servo/components/style/properties/longhands/svg.mako.rs#169

Blaming it, it goes back to the original implementation of the property in https://bugzilla.mozilla.org/show_bug.cgi?id=686281: https://hg.mozilla.org/mozilla-central/rev/f6eba571ce59.

So this is a bit messy. It was probably just added for consistency with other mask aliases which do share syntax per https://bugzilla.mozilla.org/show_bug.cgi?id=686281#c167.

cc @dbaron in case he remembers more context.

dbaron · 2021-08-02T23:37:29Z

I don't remember, other than that that bug went through quite a few cycles of review and it was hard to keep track of at the time. I don't think I was aware there was a syntax difference.

gsnedders · 2021-08-03T01:10:14Z

It seems that list conflicts with webkit and blink implementations, it seems they don't overlap and MDN is right about it?

Indeed. If I'm understanding correctly:

-webkit-mask-composite	mask-composite
clear
copy
source-over	add
source-in	intersect
source-out	subtract
source-atop
destination-over
destination-in
destination-out
destination-atop
xor	exclude
plus-lighter

w3c/fxtf-drafts@bb5f277 seems to be the spec change which changed away from what Blink/WebKit implement, though it doesn't link to any resolution or issues, hence I don't know how broad support for the simplification was at the time.

Note that Blink & WebKit only support the prefixed property, so even if the totally different Gecko implementation is some level of evidence that sites don't rely on the prefixed property, it may only be because they additionally support the unprefixed property.

On the face of it, the options are:

Define -webkit-mask-composite as <composite-mode>, per WebKit and Blink today, potentially ensuring something is defined as to how this is combined with the mask-composite property in the cascade.
Drop -webkit-mask-composite entirely (though for both WebKit and Blink this is presumably blocked on supporting mask-composite), given Gecko's implementation is okay for web compat seemingly.
Define -webkit-mask-composite as a legacy shorthand with only four values (which depends on WebKit and Blink being okay with dropping the rest).

karlcow · 2021-08-03T01:25:29Z

Diving in my mail archives.

Log

September 2011

Implement CSS Mask Image properties (mask, mask-image, etc.)
It's when mask-composite was added to Firefox, 10 years ago.

January 2016

Compat. Spec -webkit-mask-*
Mozilla. Add webkit-prefixed aliases for CSS Mask Image properties ("-webkit-mask-image" and associated properties)
Mozilla. Add -webkit- prefixed aliases for mask-border-* properties Still open.

February 2016

Mozilla. Update WebKit aliases for CSS mask properties
Here @miketaylr (moz) dropped some of the values, but composite was kept as-is

October 2016

Mozilla. Content with -webkit-mask-size but not -webkit-mask-repeat is clipped in Firefox, not Safari
The comments have their share of information
Mozilla Handle -webkit-mask-repeat default value compatibility issue
CSS Spec. [css-masking] initial value of mask-repeat and mask-position

Blink implemented the no-repeat (-webkit-)mask-repeat default value in https://bugs.chromium.org/p/chromium/issues/detail?id=628968, but it was reverted according to comment 11 of that bug due to https://bugs.chromium.org/p/chromium/issues/detail?id=645000. in https://bugzilla.mozilla.org/show_bug.cgi?id=1305697#c5

Unrelated

mask-image and SVG on input element fails in Firefox, Safari, and Edge, works in Chrome

🚨 The important thing probably is that most of the webcompat issues I could browse, find about mask were NOT about mask-composite.

karlcow · 2021-08-03T01:51:33Z

Current usage as defined by chrome is 0.186841%
https://www.chromestatus.com/metrics/css/popularity#webkit-mask-composite

it would be interesting to have the stats for the values in fact.
https://github.com/search?l=CSS&q=%22-webkit-mask-composite%22&type=Code

not a lot of matches but some patterns (⭐ most common)

⭐ destination-in
⭐ destination-out
exclude
intersect
source-in
source-out
source-over
unset
⭐ xor

Examples:

miketaylr · 2021-08-03T15:07:10Z

Thanks for the digging, @karlcow!

miketaylr mentioned this issue Aug 2, 2021

Add a dfn for simple alias #154

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Is it okay to just alias -webkit-mask-composite to mask-composite? #153

Is it okay to just alias -webkit-mask-composite to mask-composite? #153

saschanaz commented Aug 1, 2021 •

edited

Loading

miketaylr commented Aug 2, 2021

miketaylr commented Aug 2, 2021

miketaylr commented Aug 2, 2021

saschanaz commented Aug 2, 2021 •

edited

Loading

miketaylr commented Aug 2, 2021

saschanaz commented Aug 2, 2021

miketaylr commented Aug 2, 2021

saschanaz commented Aug 2, 2021 •

edited

Loading

domenic commented Aug 2, 2021

miketaylr commented Aug 2, 2021

saschanaz commented Aug 2, 2021

emilio commented Aug 2, 2021

dbaron commented Aug 2, 2021

gsnedders commented Aug 3, 2021

karlcow commented Aug 3, 2021

karlcow commented Aug 3, 2021

miketaylr commented Aug 3, 2021

Is it okay to just alias -webkit-mask-composite to mask-composite? #153

Is it okay to just alias -webkit-mask-composite to mask-composite? #153

Comments

saschanaz commented Aug 1, 2021 • edited Loading

miketaylr commented Aug 2, 2021

miketaylr commented Aug 2, 2021

miketaylr commented Aug 2, 2021

saschanaz commented Aug 2, 2021 • edited Loading

miketaylr commented Aug 2, 2021

saschanaz commented Aug 2, 2021

miketaylr commented Aug 2, 2021

saschanaz commented Aug 2, 2021 • edited Loading

domenic commented Aug 2, 2021

miketaylr commented Aug 2, 2021

saschanaz commented Aug 2, 2021

emilio commented Aug 2, 2021

dbaron commented Aug 2, 2021

gsnedders commented Aug 3, 2021

karlcow commented Aug 3, 2021

Log

September 2011

January 2016

February 2016

October 2016

Unrelated

karlcow commented Aug 3, 2021

Examples:

exclude as a fallback for unset

exclude as a fallback for source-out

exclude as a fallback for destination-out

intersect as a fallback for destination-in

intersect as a fallback for source-in

add as a fallback for add

Weird

no fallback

miketaylr commented Aug 3, 2021

saschanaz commented Aug 1, 2021 •

edited

Loading

saschanaz commented Aug 2, 2021 •

edited

Loading

saschanaz commented Aug 2, 2021 •

edited

Loading

`exclude` as a fallback for `unset`

`exclude` as a fallback for `source-out`

`exclude` as a fallback for `destination-out`

`intersect` as a fallback for `destination-in`

`intersect` as a fallback for `source-in`

`add` as a fallback for `add`