I was doing some work in Gecko and realized various inconsistencies with how we treat calc(). I saw that other browsers have other (different) inconsistencies. I'm fixing some of those where it seems reasonable and we all agree. But I'm having trouble to find what the model is supposed to be.
I'll try to break this down to simpler questions...
Shouldcalc(%) always be treated the same as %
It looks to me like it should, but in Gecko right now this is not always the case. For example, in the containing-block-size quirk, Gecko will only apply it to non-calc percentages, intentionally:
<style>
body { margin: 0 }
div {
height: 100%;
float: left;
width: 50%;
background: green;
}
div + div {
height: calc(100%);
background: orange;
}
</style>
<div></div>
<div></div> Should calc(% + 0px) be equivalent to calc(%)?
I intuitively thought it should, but browsers differ here. For example, these two tables look different in blink / webkit:
<!doctype html>
<table border>
<tr>
<td style="width: calc(50%)">x</td>
<td style="width: 100px">y</td>
</table>
<table border>
<tr>
<td style="width: calc(50% + 0px)">x</td>
<td style="width: 100px">y</td>
</table>
I think they should render the same though (though I could be convinced otherwise).
Shouldcalc(<length> + 0%) be the same as calc(<length>)?
I tend to think it should not, since we special-case percentages in quite a few places, and 0% is not the same as 0px everywhere (I'm pretty sure it's not the same in grid track sizing for example). Also intrinsic sizing, and this is a test passing in all browsers:
I think the simplest model to get something consistent and simple implementation-wise is to keep track only whether percentages were specified, and make % + 0px always the same as %, or alternatively track both whether lengths and percentages were specified (though that's a bit more complex).
/cc @dbaron @Loirooriol @gtalbot
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3