[csswg-drafts] [css-grid] Doubts regarding implied minimum size of images

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

== [css-grid] Doubts regarding implied minimum size of images ==

Section: [6.6. Implied Minimum Size of Grid Items](https://drafts.csswg.org/css-grid/#min-size-auto).

This comes from a [bug reported to Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=1349320) by @jensimmons, after taking a look I'm quite lost now and I'm not sure if I understand even the simpler cases. :disappointed:

So let's start with some examples and try to explain what's going on.
You can [check the examples live in a jsbin](http://jsbin.com/hudiwa/edit?html,output).

### 1) 50x50 image with `width: 200px`:

```html
<div style="display: grid;">
  <img style="width: 200px;" src="http://placehold.it/50x50">
  <div style="background: yellow;">Item (2nd row)</div>
</div>
```

My doubt here comes about how the size of the 1st row is calculated. In both Chrome and Firefox it's 200px.

![Output in Chrome and Firefox with the first row of 200px](https://cloud.githubusercontent.com/assets/11602/24202365/1be1061a-0f13-11e7-8e99-e185da222798.png)

The rows are `auto` and the image has `min-height: auto;`.
The image has a specified width of 200px, and as it has aspect ratio its transferred size is 200px too. But its content size is 50px.
According to the [spec](https://drafts.csswg.org/css-flexbox-1/#automatic-minimum-size):
>  if the box has an aspect ratio and no specified size, its automatic minimum size is the smaller of its content size and its transferred size

So I'm not sure if the height of the row should actually be 50px instead of 200px.
I should be missing something else, but I don't know why right now.

### 2) 50x50 image with `width: 200px` and grid container with `height: 10px`:

```html
<div style="display: grid; height: 10px;">
  <img style="width: 200px;" src="http://placehold.it/50x50">
  <div style="background: yellow;">Item (2nd row)</div>
</div>
```

In this case both Chrome and Firefox calculate the size of the 1st row as 50px.

![Output of Chrome and Firefox showing a first row of 50px](https://cloud.githubusercontent.com/assets/11602/24202406/367c5312-0f13-11e7-8857-223c7befae37.png)

Is that right, why is this different from 1)?

### 3) 50x50 image with `width: 100%` and grid container with `width: 200px`:

```html
<div style="display: grid; width: 200px;">
  <img style="width: 100%;" src="http://placehold.it/50x50">
  <div style="background: yellow;">Item (2nd row)</div>
</div>
```

I'd expect this to be equivalent to 1). As the 100% width on the image should be resolved to 200px.
However in Firefox it's like 2), the row has 50px (and in Chrome it seems there's a bug as the size of the first row is 100px, which doesn't make a lot of sense.

According to the spec, the content size is 50px and the transferred size is 200px, so the minimum is 50px. So it seems Firefox is right on this one.

Problem here is that the 2nd row will be overlapping the image which doesn't seem what the user will want.
[@jensimmons commented on the bug report that this won't be what authors want](https://bugzilla.mozilla.org/show_bug.cgi?id=1349320#c5).

### 4) 50x50 image with `width: 100%` and grid container with `width: 200px` and `height: 10px`:

```html
<div style="display: grid; width: 200px; height: 10px;">
  <img style="width: 100%;" src="http://placehold.it/50x50">
  <div style="background: yellow;">Item (2nd row)</div>
</div>
```

I'd expect this to be equivalent to 2). Again the 100% width would be resolved to 200px.

But here the results vary. In Chrome the first row has 50px, but in Firefox it has only 10px.

### 5) 500x500 image with `width: 200px`:

```html
<div style="display: grid; ">
  <img style="width: 200px;" src="http://placehold.it/500x500">
  <div style="background: yellow;">Item (2nd row)</div>
</div>
```

Here both browsers behave the same and have a height of 200px for the 1st row.

This makes sense according to the spec as the transferred size is 200px and the content size is 500px. So the minimum is 200px.

### 6) 500x500 image with `width: 200px` and grid container with `height: 10px`:

```html
<div style="display: grid; height: 10px;">
  <img style="width: 200px;" src="http://placehold.it/500x500">
  <div style="background: yellow;">Item (2nd row)</div>
</div>
```

Again both browsers have the same behavior and the result is the same than 5).

Again the transferred size 200px is smaller than the content size 500px.

### 7) 500x500 image with `width: 100%` and grid container with `width: 200px`:

```html
<div style="display: grid; width: 200px;">
  <img style="width: 100%;" src="http://placehold.it/500x500">
  <div style="background: yellow;">Item (2nd row)</div>
</div>
```

Here in Chrome the size of the 1st row is 200px.
In Firefox it's 500px, as it consider that the 100% width is indefinite, so it doesn't have transferred size.
Anyway it seems [@MatsPalmgren agrees that this should be considered definite in the bug report](https://bugzilla.mozilla.org/show_bug.cgi?id=1349320#c6). Which will lead to the same output than Chrome.

### 8) 500x500 image with `width: 100%` and grid container with `width: 200px` and `height: 10px`:

```html
<div style="display: grid; width: 200px; height: 10px;">
  <img style="width: 100%;" src="http://placehold.it/500x500">
  <div style="background: yellow;">Item (2nd row)</div>
</div>
```

Here Chrome has a size of 200px for the row. However Firefox has 10px.

I believe that 200px for the 1st row should be the expected behavior.


Could someone help to clarify this topic? I'm almost certain I'm missing something else from the specs, at least to explain case 1) but I cannot find it. :confused: 
Thank you very much.

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

Received on Wednesday, 22 March 2017 14:28:43 UTC