taffy icon indicating copy to clipboard operation
taffy copied to clipboard

Support `box-sizing: content-box`

Open adjabaev opened this issue 3 years ago • 5 comments

What problem does this solve or what need does it fill?

Could help in order to reproduce web default behaviour easily

What solution would you like?

Probably something as simple as passing an "BoxSizing" enum value to Style

What alternative(s) have you considered?

Made some tests but these were unfortunately inconclusive.

Additional context

If there is already a siimilar feature supported, then I am sorry, but I feel like I've done the research work through issues/ code

adjabaev avatar Dec 23 '22 02:12 adjabaev

This appears to be the requested feature: https://www.w3schools.com/css/css3_box-sizing.asp

Is that correct? :)

alice-i-cecile avatar Dec 23 '22 02:12 alice-i-cecile

It definitely is! Taffy is using the "border-box" value of that property, meanwhile the default is "content-box" (the one that inflates elements based on padding/ border)

adjabaev avatar Dec 23 '22 03:12 adjabaev

Got it! IMO we should implement this choice and change our default behavior then. Are you up for a PR?

alice-i-cecile avatar Dec 23 '22 06:12 alice-i-cecile

This is a worthwhile feature, but I don't think it will be a small change. This will involve updating everywhere that a size, max_size, or min_size style is used. And will also affect MeasureFuncs.

Taffy is using the "border-box" value of that property

It mostly is (indeed I believe this is set in our gentests), and I based my CSS Grid implementation on this assumption. But there are issues on the Yoga repo suggesting that it doesn't entirely follow either content-box or border-box, and I wouldn't be at all surprised if that is true of Taffy's Flexbox implementation too.

change our default behavior

Perhaps, but that would be up for debate I think. "content-box" is the default for browsers. But most of the web is using a "CSS reset" (e.g. normalize.css) that sets this back to "border-box". A small historical note: "border-box" was how Internet Explorer worked. "content-box" was how Netscape worked. And while "content-box" was standardised, I think most people think that "border-box" is generally better and more intuitive way of styling things (because otherwise if you add padding or border to a box that is 100px wide, then it's no longer 100px wide).

nicoburns avatar Dec 23 '22 12:12 nicoburns

Just wanted to link this issue with #223 as both are related to some extent

adjabaev avatar Jan 05 '23 02:01 adjabaev