#665: review request, CSS Masking and Clipping

Visit on Github.

Opened Aug 5, 2021

Unseasonably warm greetings, TAG!

I'm requesting a TAG review of CSS Masking Module Level 1.

Masking describes how to use another graphical element or image as a luminance or alpha mask. Typically, rendering an element via CSS or SVG can conceptually be described as if the element, including its children, are drawn into a buffer and then that buffer is composited into the element’s parent. Luminance and alpha masks influence the transparency of this buffer before the compositing stage. Clipping describes the visible region of visual elements. The region can be described by using certain SVG graphics elements or basic shapes. Anything outside of this region is not rendered.

  • Explainer¹ (minimally containing user needs and example code): Intro has pretty pictures!
  • Specification URL: spec url
  • Tests: wpt / css / css-masking and test results
  • Security and Privacy self-review²: here
  • GitHub repo (if you prefer feedback filed there): fxtf
  • Primary contacts (and their relationship to the specification):
    • [Dirk Schulze] ([@dirkschulze]), [Adobe] Co-Editor
    • [Brian Birtles] ([@birtles]), [Mozilla Japan] Co-Editor
    • [Tab Atkins] ([@tabatkins ]), [Google] Co-Editor
    • [Chris Lilley] ([@svgeesus]), [W3C] Staff contact
    • [Alan Stearns] ([@astearns]), [Adobe] Co-chair
  • Organization(s)/project(s) driving the specification: [CSSWG, fx task force]
  • Key pieces of existing multi-stakeholder review or discussion of this specification:
  • External status/issue trackers for this specification (publicly visible, e.g. Chrome Status): CanIUse css mask | css clip

Further details:

  • [ x] I have reviewed the TAG's Web Platform Design Principles
  • Relevant time constraints or deadlines: [no rush, 3 months is fine, let us know]
  • The group where the work on this specification is currently being done: CSSWG
  • Major unresolved issues with or opposition to this specification: issues list
  • This work is being funded by: CSSWG member organizations

You should also know that...

  • We will write an explainer if you really, really don't like the spec intro, but please tell us what is missing
  • This functionality was in SVG for ages, but is now being extended and generalized to HTML/CSS as well

We'd prefer the TAG provide feedback as (please delete all but the desired option):

🐛 open issues in our GitHub repo for each point of feedback

Discussions

2021-09-Gethen

Minutes

Lea: that is a very advanced spec

Rossen: personally at a loss what to do. Sometime back one of th eideas we had was for such CSS requests to have the non-CSS people do them so you can get exposed to a whole feature area of css that is moving forward and is mature etc. Spot checking this work from someone who hasn't been jaded so much for so long.

Dan: if I were addressing this issue from the beginning I'd say it's not a link to the explainer, it's to the ED, and it doesn't start with user needs, and it doesn't explain the feature.. Is that useful in this context? Obviously a huge amount of work has gone into it.

Rossen: this has been shipping across all browser for 3-4 years maybe more

Lea: way more

Rossen: I remember doing this in IE9

Dan: in order to do this kind of review where people not immersed in the community can com einto the material and understand what it is without that archaeology we need a real explainer. Is there a halfway where we could .. another approach someone who is part of the community presents it to the people who are not.

Lea: who is the explainer for? if it's to help us review the design then do we need really need one? It's very mature, we're not going to say change stuff. We don't actually need an explainer. Do we need user needs to know this drawing primitive of being able to clip or mask parts of elements is important? This is a fundamental drawing primitive

Dan: yeah..

Lea: I'd be inclined to close it, ask for future design reviews to include an explainer.

Dan: also looking to see if there's already an explainer on MDN

Lea: I don't want someone to be tasked with writing an explainer for this if we don't need it

Rossen: I agree. The problem is the design review template assumes new design. This is a different template, this is simply rubberstamping something going into REC

Dan: still feel it is worth pointing out that yes the spec has nice pictures and people who are familiar with drawing will know that masking and clipping are important aspects. AT the end of the day the reason why some developers find parts of the web platform very opaqe to learn is because this kind of material never emerges, where someone says "when you want to draw things.. the concept of clipping and masking is important.. this is what this is for" MDN documentation is all the same sort of thing and assumes you know what a mask is.

Rossen: [makes a covid mask joke]

Lea: there is a lot of material on the web discussing these features

Lea: [writes closing comment]

Dan & Rossen: +1