Re: [css-masking] reference boxes

On 12/11/2013 07:36 AM, Dirk Schulze wrote:
> Hi,
>
> I title this thread as “reference boxes”. It is the main part of this discussion.
>
> On Dec 11, 2013, at 11:46 AM, fantasai <fantasai.lists@inkedblade.net> wrote:
>
>>    3. In the definition of 'no-clip'...
>>         # The painted content is not restricted (not clipped).
>>         # The mask painting area is set to the bounding client rect.
>>       I don't think this is what we want. Various effects are drawn
>>       outside the bounding client rect, for example box-shadows,
>>       border-images with outset, and content that overflows the box.
>>       If the intent is that the painted content is not clipped, then
>>       this definition is wrong.
>
> We discussed this before. The “mask painting area” is the reference
> box for sizing and positioning mask images. It is correct that
> content can flow outside of the "border box”. This is exactly the
> reason why we chose "bounding client rect”. It allows the author
> to size the mask according to the size of the content (as done for
> Filter Effects and SVG filters for example). It also allows to
> position the mask on one of the edges measured on the size of the
> content.
>
> I do see a major advantage to use bounding client rect for origin
> and sizing on “no-clip”. It is not there by mistake.

The bounding client rect is fine to use for the mask positioning
area, which determines the mask's size and position. But it is
not appropriate to use for the mask painting area, because it
means 'no-clip' is exactly equivalent to 'border-box'.

  # bounding client rect
  #  The union of all border boxes for the element that has an
  #  associated CSS layout box.

Consider the case of an unfragmented box. The bounding client rect
is exactly the border box.

>>    4. The reference boxes for masking and clipping seem to be
>>       dramatically different. Afaict, masking uses the boxes as
>>       defined for backgrounds and borders. But clipping uses the
>>       "bounding client rect”.
>
> That is the current behavior on Firefox (implemented unprefixed!),
> WebKit and Blink (prefixed). For compatibility reasons and
> consistency with SVG masking and SVG filters I recommend to leave
> it that way.
>
>>       Consider a box that has been split across three columns of a
>>       multi-col element on one page and into the first column on a
>>       second page. If I use an elliptical mask stretched to 100%,
>>       then the clipped perimeter will be an ellipse stretched across
>>       the height of the reconstructed box, and split across the
>>       fragments. But if I use an elliptical clip-path stretched to
>>       100% this will not be the case. If the element stretched just
>>       across the first 3 columns, then the elliptical clip-path would
>>       stretch across the rectangle containing the 3 columns. Across
>>       pages, I don't even know what would result…
>
> The behavior of bounding client rect is clear. The result can be
> seen in browsers today and is mostly constant.
>
>>
>>       Using the same shape for a mask and for a clip-path should
>>       result in the same effect.
>
> It does for SVG masking and clip-path for instance. clip-path is
> implemented in Firefox unprefixed as well and has exactly this
> behavior. (Ditto for WebKit and Blink but prefixed there.)

The spec requires that mask and clip-path behave differently.
Are you saying that
   a) implementations treat mask and clip-path differently, and
      we should copy them, or
   b) implementations treat clip-path like mask already

In the case of a) I'd like to suggest we change the behavior
to make them consistent, as I doubt anyone is relying on a
particular behavior in the presence of fragmentation..

In the case of b), the spec needs to be fixed because it isn't
saying that at all atm.

>>    5. clip-path should not be defining the origin and percentage
>>       basis of <basic-shape>s directly, but define what the
>>       "reference box" is.
>>         http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/#reference-box
>
> The reference box is bounding client rect. That is what the
> spec says. CSS Shapes uses the reference boxes as defined
> for background and borders, which makes sense for CSS Shapes.

No, the spec does not say that the reference box is the bounding
client rect. The spec currently says

   http://dev.w3.org/fxtf/masking/#the-clip-path
   # A basic shape function as defined in the CSS Shapes module.
   # The origin of clipping shapes is on the top left of the
   # bounding client rect. Percentage values are resolved against
   # the bounding client rect width and height.

It should say
   | A basic shape function as defined in the CSS Shapes module.
   | The reference box of the shape is the bounding client rect.

~fantasai

Received on Wednesday, 11 December 2013 17:55:29 UTC