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

[sandgraham]

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]

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

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

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

[ljharb]

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]

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 element^1 presentation attributes list?