Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-masking-1] Clarification on mask-type presentation attribute #480

Open
sandgraham opened this issue Nov 17, 2022 · 5 comments
Open

Comments

@sandgraham
Copy link

sandgraham commented Nov 17, 2022

I was hoping to clarify if mask-type should be assignable as a DOM attribute.

From the spec:

The mask-type property is a presentation attribute for SVG elements.

The definition of a presentation attribute from the SVG 1.1 Spec:

An XML attribute on an SVG element which specifies a value for a given property for that element.

From the styling section of the same spec, 6.4 Specifying properties using the presentation attributes, this is perhaps also relevant:

For each styling property defined in this specification (see Property Index), there is a corresponding XML attribute (the presentation attribute) with the same name that is available on all relevant SVG elements.

This leads me to believe that all presentation attributes should be available as an attribute on applicable DOM elements- meaning the following is valid:

<mask id="mask" mask-type="alpha">
  <path d="..." />
</mask>

Looking at this codepen example, it seems Chrome, Firefox, and Safari accept the attribute.

However, the examples shown in the draft masking spec seem to make a point of using inline style attributes:

<mask id="mask" style="mask-type: alpha;">
  <path d="..." />
</mask>

And indeed, MDN does the same.

I also noticed that mask-type is not listed under the presentation attributes for the mask element (which seems contradictory), nor is it included in the SVGMaskElement interface.

This leads me to believe that mask-type might not be intended as a DOM attribute. I'd appreciate any guidance available on this topic.

Thanks!

@fsoder
Copy link
Collaborator

fsoder commented Nov 17, 2022

...snip...

This leads me to believe that all presentation attributes should be available as an attribute on applicable DOM elements- meaning the following is valid:

<mask id="mask" mask-type="alpha">
  <path d="..." />
</mask>

Correct.

Looking at this codepen example, it seems Chrome, Firefox, and Safari accept the attribute.

However, the examples shown in the draft masking spec seem to make a point of using inline style attributes:

<mask id="mask" style="mask-type: alpha;">
  <path d="..." />
</mask>

And indeed, MDN does the same.

What mechanism examples use does not really carry any relevance. I.e they are not normative.

I also noticed that mask-type is not listed under the presentation attributes for the mask element (which seems contradictory),

This looks like an oversight/bug.

nor is it included in the SVGMaskElement interface.

It's not uncommon for a presentation attribute to not have a corresponding IDL attribute (most on SVG elements don't).

This leads me to believe that mask-type might not be intended as a DOM attribute. I'd appreciate any guidance available on this topic.

The term "DOM attribute" may be a bit ambiguous, so I'd suggest using the terminology from [1]. Using that terminology I'd say that there is a content attribute mask-type, but it has no corresponding IDL attribute (which would likely have been named maskType or masktype if it existed). Does that make sense?

[1] https://html.spec.whatwg.org/multipage/infrastructure.html#terminology

@ljharb
Copy link
Member

ljharb commented Nov 17, 2022

@fsoder so that means HTML like <mask mask-type="…"> would work, but the resulting DOM element wouldn't have any JS property that corresponded? (although perhaps el.getAttribute('mask-type') would work)

@fsoder
Copy link
Collaborator

fsoder commented Nov 17, 2022

Yes (assuming the <mask ...> is defined such that it is in the SVG namespace of course). Reading using getAttribute() would work, yes.

@ljharb
Copy link
Member

ljharb commented Nov 17, 2022

Thanks!

for some feedback: from a reader's perspective, this style of specification (where HTML attributes and/or DOM element properties are not explicitly listed, but must be inferred) is very confusing and hard to understand (and thus, likely easier to implement incorrectly).

@sandgraham
Copy link
Author

sandgraham commented Nov 18, 2022

Thanks @fsoder for the detailed explanation! And thanks @ljharb for helping clarify further.

Perhaps the only action item here would be adding mask-type to the mask element1 presentation attributes list?

Footnotes

  1. https://drafts.fxtf.org/css-masking/#MaskElement

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants