Open
Description
See the testcase below.
There is an abspos with top: 0; bottom: 0. By default it stretches to fill the containing block, and this block size is used to compute its inline min/max-content sizes thru the aspect ratio of its contents.
However, what happens if the abspos gets height: max-content? At this point the block min/max-content sizes are undefined, since they depend on the inline size. So what to do?
- Treat
height: max-contentas indefinite. Then contents can't resolve their percentage. This is what Firefox and Chrome do. - Treat
height: max-contentasheight: auto. Then it stretches, and since the stretch size is definite, contents can resolve their percentage. This is what WebKit does.
Servo is currently like WebKit, but I think I prefer Blink's behavior.
<!DOCTYPE html>
<style>
.wrapper { position: relative; width: 50px; height: 50px; border: solid; margin: 5px }
.abspos { position: absolute; top: 0; bottom: 0; }
canvas { background: cyan; height: 100% }
</style>
<div class="wrapper">
<div class="abspos">
<canvas width="25" height="25"></canvas>
</div>
</div>
<div class="wrapper">
<div class="abspos" style="height: -moz-available; height: -webkit-fill-available; height: stretch">
<canvas width="25" height="25"></canvas>
</div>
</div>
<div class="wrapper">
<div class="abspos" style="height: min-content">
<canvas width="25" height="25"></canvas>
</div>
</div>
<div class="wrapper">
<div class="abspos" style="height: max-content">
<canvas width="25" height="25"></canvas>
</div>
</div>| Firefox | Chrome | WebKit |
|---|---|---|
 |
 |
 |