Bug 112304 – Size of box which have css column and text-shadow set is not calculated properly

• Status: NEW
• Component: Layout and Rendering

[Alice Lieutier]

Created attachment 193030 [details]
reduced test-case

If a div has css columns with column-fill set to balance and this div has a text-shadow, then the size of the div is not calculated properly. The text-shadow should not change the size of the div. e.g:
div {
	-webkit-column-count: 2;
	-webkit-column-fill: balance;
        text-shadow: 0 0 20px blue;
}


Attached is a testcase where a text-shadow is applied on the divs on hover. 

For the third div, the problem is even worse, as when the div is not hovered anymore, the size without text-shadow is not properly calculated either.

I have this problem on mac OS and linux.

[Ahmad Saleem]

All browsers differ:

*** Safari Technology Preview 153 ***

Second and third <div> makes layout shift and push the container on the bottom and also malformed text distribution

*** Chrome Canary 107 ***

Not layout shift but third <div> does not have text shadow

*** Firefox Nightly 106 ***

No layout shift and no weird quirks like on third <div> - It just works!

_____

I updated test case to JSFiddle to remove any -webkit- prefix and make it streamline.

Link - https://jsfiddle.net/6abn9hrq/show

Changing Status to "New" to track weird "layout shift".

[Radar WebKit Bug Importer]

<rdar://problem/100126421>

[Chase Knowlden]

Pull request: https://github.com/WebKit/WebKit/pull/7124