[css-shapes][css-masking] shape-outside:auto

[bradkemper]

I’d like to propose a new auto value for shape-outside. How it would work, when you have shape-outside:auto:

• if clip path has a valid value that is not none, then that clipping path is used to define the float area shape, as if it was a polygon that exactly coincided with the path shape and position of the clipping path.
• if mask-image and/or mask-border-source has a valid value that is not none, then the resulting alpha channel representing the, after all compositing done, is used as if it was the alpha channel of an <image> value for shape-inside.
• If there is both a clip path AND mask, as above, then the intersection of the clipping region and the masked area alpha channel (as above) is used as the alpha channel of an <image> for shape-inside.

In this way, paths and/or images used for clipping and/or masking do not need to be repeated in the CSS in order to also be used for the float area shape. There is also less chance for error if the path or image values need to be edited. A background or internal content makes a clipped/masked shape visible, and shape-outside:auto lets in-line content flow around it. shape-image-threshold and shape-margin would work as normal to refine how that happens.

[bradkemper]

Anyone?

[AmeliaBR]

I definitely like the idea of having ways to avoid repeating values in shape-outside. However, there are a number of possibilities, so I think the keywords could be more precise than auto:

shape-outside: clip-path; /* use this element's clip-path shape */
shape-outside: mask; /* use the composited mask-image layers as an image value */
shape-outside: content; /* use the rendered content of this element as an image value */

That last one is something I've often wanted, for shape-outside around an <img> element, without having to load the image URL in both the markup and the CSS. (There's an example in the spec that uses attr(src, url) but no one seems interested in implementing that & it wouldn't work with or with inline SVG, anyway.)

Of course, defining layout based on the content image would require the image or other element content to be CORS-friendly, just like with image values passed directly to shape-outside. That's easy enough to do with an attribute on <img>, but for re-using mask-image, it would depend on the ability to upgrade the mask-image request with a crossorigin URL option (see #1603). Currently, image values for mask-image (as opposed to SVG mask references) don't need to have CORS permissions.

The clip-path and mask-image values could also be used for shape-inside. (FYI, shape-outside defines how other content wraps around this element, shape-inside defines an outer wrapping boundary for the flow content inside this element. So a content option doesn't work there.)

[bradkemper]

Thanks for the reply. I would be happy with your values instead of ‘auto’, too. Note that I was imagining auto as being the intersection of the clip-path and mask, but perhaps that could be achieved with yet another value, or with shape-outside: clip-path mask.