[css-masking-2] Support element in clipping paths · Issue #17 · w3c/fxtf-drafts (original) (raw)

The WG had no intention to change the general behavior of <clipPath> or <mask> in this level of the spec. That said, I would need to look for the reason for the restrictions.

Example
https://codepen.io/anon/pen/bREePK (code at the end of the issue.)

Example 1: Rect with <clipPath> with circle and grouped smaller circle
Example 2: Rect with <clipPath> with circle and use reference to grouped circle
Example 3: Simple rect to confirm that the document is not in error.

Result
The test confirms @BigBadaboom observation:
Safari, Chrome and Edge simply ignore elements that are not part of the content model.
Firefox does not display the entire clipped element and treats the entire clipPath as "in error". The rect disappears.

Spec
The content model of <clipPath> disallows groups. Safari, Chrome and Edge do follow the spec here and ignore groups. Just as we do in similar situations on other elements. (Say nesting a circle as child of a rectangle.)

In addition to that the spec states:

A clipPath element can contain path elements, text elements, basic shapes (such as circle) or a use element. If a use element is a child of a clipPath element, it must directly reference path, text or basic shapes elements. Indirect references are an error and the clipPath element must be ignored.

Safari, Chrome and Edge handle use elements with indirect references as "not being part of the content model" and simply ignore those. This is not what the spec says which asks to ignore the <clipPath> element. Firefox lets the rect disappear in the example above which is not what the spec says either.

The behavior of Safari, Chrome and Edge are consistent with each other. And seem to follow the error handling sentiment of pathData errors in SVG 1.1: https://www.w3.org/TR/SVG/implnote.html#ErrorProcessing I personally like this but this needs to get discussed with the WGs.

Suggestion

  1. Explicitly state in the content model section of the element definition table that <use> element must directly reference path, text or basic shapes elements.
  2. Update prose and replace the last sentence with:

Indirect references are not allowed and <use> elements with indirect references must be ignored.

Or remove it entirely.

https://codepen.io/anon/pen/bREePK

 <svg>
<clipPath id="clip">
  <circle cx="50" cy="50" r="50"/>
  <g id="g">
    <circle cx="50" cy="50" r="10" id="c"/>
  </g>
</clipPath>
<clipPath id="clip2">
  <circle cx="50" cy="50" r="50" id="c"/>
  <use xlink:href="#g">
</clipPath>
<rect width="100" height="100" clip-path="url(#clip)"/>
<rect width="100" height="100" clip-path="url(#clip2)" transform="translate(120,0)"/>
<!-- confirm that the document is not in error-->
<rect width="100" height="100" transform="translate(240,0)"/>
</svg>