<!doctype html>
<!--
    Tests intrinsic width keywords for float avoiding behavior. The way the
    spec is written only width: auto elements will allow a float to flow
    through them with overflow: auto, so all elements below should avoid the 
    float by shifting to the right except fill-available which should be forced 
    below the float since it can't become smaller than the available width.

    Note: This is weird behavior, not sure it was intended by the spec.
-->
<style>
    @import "resources/width-keyword-classes.css";

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

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

    .float {
        float: left;
        height: 300px;
    }

    .auto,
    .max-content,
    .min-content,
    .fill-available,
    .fit-content {
        overflow: auto;
    }
</style>

<body>

    <div class="float">Float</div>

    <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="fit-content">
        <span>Fit Content</span> on this box.
    </div>

    <div>
        <span>Auto</span> on this box.
    </div>

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

</body>