blob: 2fffe6396f1df73937b2b12bc175c202b6ac4c77 [file] [log] [blame]
<!DOCTYPE html>
<!--
| Calculation of the shrink-to-fit width is roughly this: calculate
| the preferred width by formatting the content without breaking lines other
| than where explicit line breaks occur, and also calculate the preferred
| minimum width, e.g., by trying all possible line breaks. Thirdly, find
| the available width: the width of the containing block minus the used values
| of "margin-left", "border-left-width", "padding-left", "padding-right",
| "border-right-width", "margin-right".
| https://www.w3.org/TR/CSS21/visudet.html#inlineblock-width
| https://www.w3.org/TR/CSS21/visudet.html#shrink-to-fit-float
-->
<html>
<head>
<style>
body {
font-family: Roboto;
font-size: 40px;
font-weight: bold;
}
.min-preferred-width {
/* TODO: Replace rulers with border: 5px solid #00b0ff; */
/* TODO: Replace spacers with margin: 10px; */
width: 100px;
}
.preferred-width {
width: 400px;
}
.available-width {
width: 200px;
}
.outer-inline-block {
display: inline-block;
}
.inline-block {
background-color: #0091ea;
color: #fff;
display: inline-block;
}
.ruler {
background-color: #00b0ff;
height: 5px;
}
.spacer {
height: 5px;
}
</style>
</head>
<body>
<div class="min-preferred-width">
<div class="inline-block">Hello, world!</div>
<div class="ruler"></div>
</div>
<div class="spacer"></div>
<div class="preferred-width">
<div class="inline-block">Hello, world!</div>
<div class="ruler"></div>
</div>
<div class="spacer"></div>
<div class="available-width">
<div class="inline-block">Hello, world!</div>
<div class="ruler"></div>
</div>
<div class="spacer"></div>
<div class="outer-inline-block">
<div class="inline-block">Hello, world!</div>
<div class="ruler"></div>
</div>
</body>
</html>