Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/fast/css-intrinsic-dimensions/fit-content-container-with-replaced-child.html 

<!DOCTYPE html>
<style>
.container {
    border: 5px solid blue;
}
.child {
    background-color: lime;
}
body {
    width: 500px;
}
</style>

Tests that intrinsic width values on replaced element with fit-content container work.

<!-- The 300px expected values are the 300px intrinsic width of a canvas. -->

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

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

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

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

<!-- width tests with fill-available container -->
<div class="container" style="width: -webkit-fill-available;">
    <canvas class="child" style="width: max-content;" data-expected-width="300"></canvas>
</div>

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

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

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

<script src="../../resources/check-layout.js"></script>
<script>
checkLayout(".container");
</script>