width.html | Explore in Territory

<!doctype html>
<!--
    Tests the intrinsic width keywords defined in the writing mode spec by
    setting up a bunch of boxes with content and a wrapper that has a small
    fixed width.

    Visually there should be a min-content, fit-content, and float box that are
    identical widths, a fill-available box that's constrained by the #container,
    and a max-content box that has text all on one line. All boxes except 
    fill-available should overflow the #container.
-->
<style>
    @import "resources/width-keyword-classes.css";

    body * {
        border: 5px solid red;
        padding: 5px;
        clear: both;
    }

    span {
        display: inline-block;
        width: 200px;
        border-color: green;
    }

    .float {
        float: left;
    }

    #container {
        width: 150px;
        border-color: blue;
    }

    #container::after {
        content: ".";
        clear: both;
        height: 0;
        width: 0;
        display: block;
        visibility: hidden;
    }
</style>

<div id="container">

    <div class="min-content">
        <span>Min Content</span> on this box.
    </div>

    <div class="max-content">
        <span>Max Content</span> on this box.
    </div>

    <div class="float">
        <span>Float</span> on this box.
    </div>

    <div class="fill-available">
        <span>Fill Available</span> on this box.
    </div>

    <div class="fit-content">
        <span>Fit Content</span> on this box.
    </div>

</div>
chromium/third_party/blink/web_tests/fast/css-intrinsic-dimensions/width.html
