[fragmentation] Create one border box for each fragment instead of one per fragmented element

• Component: CSS
• Status: NEW ---

[Dirk Schulze]

Firefox and Internet Explorer create a new border box for each fragment of an element. This has rather big consequences on layout and CSSOM View.

CSS Transforms does use border box for calculating the transform origin. For a multi-column layout each fragment is transformed individually "after" layout was done (each fragment has its own user space). Therefore, the origin changes for each fragment.

Clipping paths can be sized per fragment width instead of calculating a global dimension for a clipping path.

On the other hand, it is unclear how the width of a background tile is determined (another discussion on www-style).

[Dirk Schulze]

Created attachment 220183 [details]
Example

[Simon Fraser (smfr)]

It's not clear from the title of this bug what actual issue you are reporting.

[Dirk Schulze]

(In reply to comment #2)
> It's not clear from the title of this bug what actual issue you are reporting.

I hope that makes it a bit more understandable. I recommend to read the post from roc on wwww-style. See link above.

[Sam Weinig]

(In reply to comment #3)
> (In reply to comment #2)
> > It's not clear from the title of this bug what actual issue you are reporting.
> 
> I hope that makes it a bit more understandable. I recommend to read the post from roc on wwww-style. See link above.

One thing that might make it a bit easier to understand would be if the example test case had actual and expected values presented (or green and red boxes if you are into that kind of thing).

[Dirk Schulze]

(In reply to comment #4)
> (In reply to comment #3)
> > (In reply to comment #2)
> > > It's not clear from the title of this bug what actual issue you are reporting.
> > 
> > I hope that makes it a bit more understandable. I recommend to read the post from roc on wwww-style. See link above.
> 
> One thing that might make it a bit easier to understand would be if the example test case had actual and expected values presented (or green and red boxes if you are into that kind of thing).

The test case adds a line for each client rect created per element. In WebKit, there is just one client rect created. In Firefox you get two. I will upload a second test case which demonstrates the difference of multiple border boxes on transform.

[Dirk Schulze]

Created attachment 220206 [details]
2nd example with explanations

[Ahmad Saleem]

I am still able to reproduce this bug in Safari 15.6 on macOS 12.5 using attached test case, Safari renders the box different from other browsers (Chrome Canary 106 and Firefox Nightly 104). Thanks!

[Radar WebKit Bug Importer]

<rdar://problem/97760056>