You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.
Dismiss alert
content="stretch keyword works as a block-size for replaced elements with intrinsic-size keyword for inline-size (which in turn depends on the stretched block-size)">
<style>
.container {
width: 20px;
height: 20px;
margin: 5px;
border: 1px solid black;
}
canvas {
height: -webkit-fill-available;
height: stretch;
background: purple;
}
.withBorder {
border: 2px solid cyan;
border-width: 2px 3px 4px 5px;
}
.withPadding {
padding: 2px 3px 4px 5px;
}
.withPxMargin {
margin: 1px 2px 3px 4px;
}
.withPctMargin {
/* This works out to 1px 2px 3px 4px */
margin: 5% 10% 15% 20%;
}
</style>
<body onload="checkLayout('canvas')">
<!-- Simplest cases - replaced element with stretched block-size and
intrinsic inline-size: -->
<div class="container">
<canvas width="30" height="60"
data-expected-width="10"
data-expected-height="20"></canvas>
</div>
<div class="container">
<canvas width="30" height="60"
style="width: 1px; min-width: fit-content"
data-expected-width="10"
data-expected-height="20"></canvas>
</div>
<div class="container">
<canvas width="30" height="60"
style="width: 100px; max-width: fit-content"
data-expected-width="10"
data-expected-height="20"></canvas>
</div>
<!-- Now without any block-size on the containing block (this makes
the canvas's bsize be treated as "auto", so it just takes on its