Re: [csswg-drafts] [css-sizing-3] compressible elements with aspect ratio (#6341)

|   Type          |  length       |  percentage   | everythingelse |  
|---------------|--------------|-------------|----------|
|min-inline-size | length     | zero   | zero |
|min-block-size | length     | resolves if definite | zero |


Example 1:
```
<!DOCTYPE html>
<div style="width: 0; line-height: 0;">
  <div style="float: left; background: green;">
    <canvas width=1 height=1 style="min-width: 50px; min-height: 100px; width: 100%;"></canvas>
  </div>
</div>
```

In the above case would result in 100x100 green square. The `min-height` transfers through the 1:1 aspect-ratio to be a transferred min-width of 100.

Example 2:
```
<!DOCTYPE html>
<div style="width: 0;">
  <div style="float: left; background: green; height: 100px">
    <canvas width=1 height=1 style="min-width: 50px; min-height: 100%; width: 100%;"></canvas>
  </div>
</div>
```

In the above case would result in a 100x100 green square. The `min-height` can resolve and transfers through the aspect-ratio. (The height here resolves *if possible* similar to a "height: 100%;" [1]).

Example 3:
```
<!DOCTYPE html>
<div style="width: 0;">
  <div style="float: left; background: green; height: auto;">
    <canvas width=1 height=1 style="min-width: 50px; min-height: 100%; width: 100%;"></canvas>
  </div>
</div>
```

The above example cannot resolve the %-min-block-size. Resulting in 50x50.

Example 4:
```
<!DOCTYPE html>
<div style="width: 0;">
  <div style="float: left; background: green; height: auto;">
    <canvas width=1 height=1 style="min-width: min-content; width: 100%;"></canvas>
  </div>
</div>
```

Similar to today `min-content`, `max-content` etc will resolve to "zero".

[1]
```
<!DOCTYPE html>
<div style="width: 0;">
  <div style="float: left; background: green; height: 100px">
    <canvas width=1 height=1 style="min-width: 50px; height: 100%;"></canvas>
  </div>
</div>
```

-- 
GitHub Notification of comment by bfgeek
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6341#issuecomment-862501623 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 16 June 2021 15:58:02 UTC