min-width.html | Explore in Territory

<!doctype html>
<!--
    Tests the behavior of the intrinsic width keywords when applied to min-width
    by placing them inside a constrained container. This test passes if it looks
    identical to the width.html test since all min's should be larger than the
    #container and should overflow.
-->
<style>
    @import "resources/width-keyword-classes.css";

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

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

    #container {
        width: 150px;
    }
</style>

<div id="container">

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

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

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

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

</div>

chromium/third_party/blink/web_tests/fast/css-intrinsic-dimensions/min-width.html