Re: [css-masking] reference boxes

On Dec 11, 2013, at 6:55 PM, fantasai <fantasai.lists@inkedblade.net> wrote:

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

There is a difference. mask painting area is not necessarily a clipping area. It is a reference box for aligning mask-origin and mask-size. I agree that most of the time mask painting area is equivalent to border box unless there is no overflowing content and no fragmentation. 

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

That is correct. I do not disagree.

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

Let us differ here between the two masking operations: masking with CSS image and taking mask-size, mask-origin as well as the other longhands into account and masking with SVG element.
* The latter (called SVG masking from now on) uses the same reference box: bounding client rects.
* The former (called CSS masking from now on) makes use of the reference boxes defined by background and borders. The exception is “mask-clip: no-clip” where the reference box is bounding client rects - the same as SVG masking.


> Are you saying that
>   a) implementations treat mask and clip-path differently, and
>      we should copy them, or

Yes and no. SVG masking and SVG clip-path are handled exactly the same… using the bounding client rect. CSS masking makes use of the reference rects from background and borders.

>   b) implementations treat clip-path like mask already

For SVG masking this is the case, yes.

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

The idea of having a fourth reference box for mask-clip is to align a mask to the area of the whole content. ’no-clip’ just means that we do not have extra clipping beside the mask images… if a mask image can never be the size of the bounding client rects, then you everything automatically gets clipped to the border box… even if you have overflowing content that you would like to mask. This is extremely limiting and just makes sense for background and borders.

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

It is definitely no intended to say that all. Which part is confusing in the spec?

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

I can accept the suggested text and will do the change. It is still an editorial change since I do not see a different behavior.

Greetings,
Dirk

> 
> ~fantasai
>

Received on Thursday, 12 December 2013 13:58:36 UTC