intrinsic-sized-absolutes.html | Explore in Territory

<!DOCTYPE html>
<style>
.container {
    position:relative;
    border: 5px solid blue;
    width: 250px;
    height: 250px;
}
.child {
    position:absolute;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    border: 5px solid pink;
}
.content {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: salmon;
}
</style>

Tests that intrinsic width values on absolutely positioned element work.

<!-- width tests -->
<div class="container">
    <div class="child" style="width: max-content;" data-expected-width="210">
        <div class="content"></div>
        <div class="content"></div>
    </div>
</div>

<div class="container">
    <div class="child" style="width: min-content;" data-expected-width="110">
        <div class="content"></div>
        <div class="content"></div>
    </div>
</div>

<div class="container">
    <div class="child" style="width: fit-content;" data-expected-width="210">
        <div class="content"></div>
        <div class="content"></div>
    </div>
</div>

<div class="container" style="width: 50px">
    <div class="child" style="width: fit-content;" data-expected-width="110">
        <div class="content"></div>
        <div class="content"></div>
    </div>
</div>

<div class="container">
    <div class="child" style="width: -webkit-fill-available;" data-expected-width="250">
        <div class="content"></div>
        <div class="content"></div>
    </div>
</div>

<!-- min-width tests -->
<div class="container">
    <div class="child" style="min-width: max-content; width: 10px;" data-expected-width="210">
        <div class="content"></div>
        <div class="content"></div>
    </div>
</div>

<div class="container">
    <div class="child" style="min-width: min-content; width: 10px;" data-expected-width="110">
        <div class="content"></div>
        <div class="content"></div>
    </div>
</div>

<div class="container">
    <div class="child" style="min-width: fit-content; width: 10px;" data-expected-width="210">
        <div class="content"></div>
        <div class="content"></div>
    </div>
</div>

<div class="container" style="width: 50px">
    <div class="child" style="min-width: fit-content; width: 10px;" data-expected-width="110">
        <div class="content"></div>
        <div class="content"></div>
    </div>
</div>

<div class="container">
    <div class="child" style="min-width: -webkit-fill-available; width: 10px;" data-expected-width="250">
        <div class="content"></div>
        <div class="content"></div>
    </div>
</div>

<!-- max-width tests -->
<div class="container">
    <div class="child" style="max-width: max-content; width: 1000px;" data-expected-width="210">
        <div class="content"></div>
        <div class="content"></div>
    </div>
</div>

<div class="container">
    <div class="child" style="max-width: min-content; width: 1000px;" data-expected-width="110">
        <div class="content"></div>
        <div class="content"></div>
    </div>
</div>

<div class="container">
    <div class="child" style="max-width: fit-content; width: 1000px;" data-expected-width="210">
        <div class="content"></div>
        <div class="content"></div>
    </div>
</div>

<div class="container" style="width: 50px">
    <div class="child" style="max-width: fit-content; width: 1000px;" data-expected-width="110">
        <div class="content"></div>
        <div class="content"></div>
    </div>
</div>

<div class="container">
    <div class="child" style="max-width: -webkit-fill-available; width: 1000px;" data-expected-width="250">
        <div class="content"></div>
        <div class="content"></div>
    </div>
</div>



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