Bug 285104 – css text-box - styling button and anchor link elements.

• Status: NEW
• Component: Layout and Rendering

[Nilesh Prajapati]

I noticed a change with text-box when styling button or anchor link element, which doesn't trim the line height.

When I originally tested this feature in Safari technology preview back in February and a few months after, the property was able to trim the line when styling a button.

I have included a codepen example of both an anchor link element and button element using the same styling.

Codepen example:
https://codepen.io/nileshprajapati/pen/gbYRaep


Expected result box model: 1px border, 7px padding, inner box 16px = 32px.
Actual results: box model: 1px border, 7px padding, inner box 24px = 40px.


Please review this issue and let me know if it’s a known bug. If not, suggest widening the scope to include this case.

Many new users to text-box properties would expect the following outcome.

Other resources:
https://x.com/shadeed9/status/1624092817814429697
https://codepen.io/shadeed/pen/gOjNQJp/b270be014b7c5141fba29e519698d477

[Radar WebKit Bug Importer]

<rdar://problem/142180762>

[alan]

I might be missing something here but the codepen example has flex containers (both the button and <a> element) while text-box only applies to block containers and inline boxes.

[Nilesh Prajapati]

Hi Zalan,

I have adjusted the Codepen example to use a block container as you mentioned.

The anchor button is now working to trim the line-height; however, it’s currently trimming below the cap height when expecting the box model (under computed).

current box model: 1px border, 7px padding, inner box 11px = 27px.

Should the inner box be 16px instead of 11px?

Also, in my example, the button element has not applied the text-box.

Thanks,
Nilesh