[csswg-drafts] [css-values] Differences between calc() handling for <length-percentage> values. (#3482)

emilio has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-values] Differences between calc() handling for <length-percentage> values. ==
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...

### Should `calc(%)` 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:

https://searchfox.org/mozilla-central/rev/ecf61f8f3904549f5d65a8a511dbd7ea4fd1a51d/layout/generic/ReflowInput.cpp#2162

```html
<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:

```html
<!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).

### Should `calc(<length> + 0%)` be the same as `calc(0%)`?

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:

  https://searchfox.org/mozilla-central/rev/ecf61f8f3904549f5d65a8a511dbd7ea4fd1a51d/testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-001.html#38

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

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3482 using your GitHub account

Received on Friday, 4 January 2019 13:02:32 UTC