[css-sizing] Does an indefinite intrinsic block size transfer to inline axis when stretch would do so?
#11387
Labels
Comments
|
Similar testcase, not much conclusive since only Chrome supports <!DOCTYPE html>
<style>
.wrapper { position: relative; width: 50px; height: 50px; border: solid; margin: 5px }
canvas { position: absolute; top: 0; bottom: 0; align-self: stretch; background: cyan; }
</style>
<div class="wrapper">
<canvas width="25" height="25"></canvas>
</div>
<div class="wrapper">
<canvas width="25" height="25" style="height: -moz-available; height: -webkit-fill-available; height: stretch"></canvas>
</div>
<div class="wrapper">
<canvas width="25" height="25" style="height: min-content"></canvas>
</div>
<div class="wrapper">
<canvas width="25" height="25" style="height: max-content"></canvas>
</div>
|
|
Similar question: what about Browsers seem to do the latter. <!DOCTYPE html>
<style>
.wrapper { display: flex; flex-flow: column; width: 50px; height: 50px; border: solid; margin: 5px }
.item { flex-basis: 10px; align-self: center }
canvas { background: cyan; height: 100% }
</style>
<div class="wrapper">
<div class="item" style="min-height: 0">
<canvas width="25" height="25"></canvas>
</div>
</div>
<div class="wrapper">
<div class="item" style="min-height: auto">
<canvas width="25" height="25"></canvas>
</div>
</div>
<div class="wrapper">
<div class="item" style="min-height: min-content">
<canvas width="25" height="25"></canvas>
</div>
</div>
<div class="wrapper">
<div class="item" style="min-height: max-content">
<canvas width="25" height="25"></canvas>
</div>
</div>
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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?height: max-contentas indefinite. Then contents can't resolve their percentage. This is what Firefox and Chrome do.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.
The text was updated successfully, but these errors were encountered: