<!doctype html>
<!--
    Tests the behavior of the intrinsic width keywords when applied to max-width
    by placing them in an uncontrained container (the body). This test passes if
    min-content is the smallest, max-content and fit-content are shrink wrapped
    like floats and fill-avaialble is the full width of the body.
-->
<style>
    @import "resources/width-keyword-classes.css";

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

    span {
        display: inline-block;
        width: 200px;
        border-color: green;
    }
</style>

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

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

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

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