width-shrinks-avoid-floats.html | Explore in Territory

<!DOCTYPE html>
<style>
    @import "resources/width-keyword-classes.css";

    .container {
        border: 5px solid grey;
        width: 300px;
        height: 120px;
        margin-bottom: 5px;
        position: relative;
    }

    .container > div:last-child {
        border: 5px solid salmon;
        padding: 5px;
        width: 0px;
        display: -webkit-flex;
        -webkit-flex-wrap: wrap;
        position: absolute;
    }

    .child {
        display: inline-block;
        width: 100px;
        height: 50px;
        background-color: pink;
    }

    .float {
        float: right;
        width: 100px;
        height: 50px;
        border: 5px solid orange;
    }
</style>

Tests that intrinsic width values on absolute positioned elements don't shrink to avoid floats.

<div class="container">
    <div class="float">Float</div>
    <div class="min-width-min-content" data-expected-width=120>
        <div class="child">Child 1</div>
        <div class="child">Child 2</div>
    </div>
</div>

<div class="container">
    <div class="float">Float</div>
    <div class="min-width-max-content" data-expected-width=220>
        <div class="child">Child 1</div>
        <div class="child">Child 2</div>
    </div>
</div>

<div class="container">
    <div class="float">Float</div>
    <div class="min-width-fit-content" data-expected-width=220>
        <div class="child">Child 1</div>
        <div class="child">Child 2</div>
    </div>
</div>

<div class="container">
    <div class="float">Float</div>
    <div class="min-width-fill-available" data-expected-width=300>
        <div class="child">Child 1</div>
        <div class="child">Child 2</div>
    </div>
</div>

<script src="../../resources/check-layout.js"></script>
<script>
checkLayout(".container");
</script>
chromium/third_party/blink/web_tests/fast/css-intrinsic-dimensions/width-shrinks-avoid-floats.html
