css-tables.html | Explore in Territory

<!DOCTYPE html>
<style>
.table {
    display: table;
    border: 5px solid salmon;
    padding: 5px;
}
.td {
    display: table-cell;
    border: 5px solid orange;
}
.child {
    display: inline-block;
    width: 50px;
    height: 20px;
    background-color: pink;
}
.collapse {
    border-collapse: collapse;
}
</style>

<div class="table" data-expected-width=134>
    <div class="td" data-expected-width=114>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</div>

<div class="table" style="width: min-content" data-expected-width=80>
    <div class="td" data-expected-width=60>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</div>

<div class="table" style="width: max-content" data-expected-width=134>
    <div class="td" data-expected-width=114>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</div>

<div class="table" style="width: fit-content" data-expected-width=134>
    <div class="td" data-expected-width=114>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</div>

<div style="width: 134px">
    <div class="table" style="width: fit-content" data-expected-width=134>
        <div class="td" data-expected-width=114>
            <div class="child"></div>
            <div class="child"></div>
        </div>
    </div>
</div>

<div style="width: 133px">
    <div class="table" style="width: fit-content" data-expected-width=133>
        <div class="td" data-expected-width=113>
            <div class="child"></div>
            <div class="child"></div>
        </div>
    </div>
</div>

<div style="width: 400px">
    <div class="table" style="width: -webkit-fill-available"  data-expected-width=400>
        <div class="td" data-expected-width=380>
            <div class="child"></div>
            <div class="child"></div>
        </div>
    </div>
<div>

<div class="table collapse" data-expected-width=114>
    <div class="td" data-expected-width=109>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</div>

<div class="table collapse" style="width: min-content" data-expected-width=60>
    <div class="td" data-expected-width=55>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</div>

<div class="table collapse" style="width: max-content" data-expected-width=114>
    <div class="td" data-expected-width=109>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</div>

<div class="table collapse" style="width: fit-content" data-expected-width=114>
    <div class="td" data-expected-width=109>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</div>

<div style="width: 114px">
    <div class="table collapse" style="width: fit-content" data-expected-width=114>
        <div class="td" data-expected-width=109>
            <div class="child"></div>
            <div class="child"></div>
        </div>
    </div>
</div>

<div style="width: 113px">
    <div class="table collapse" style="width: fit-content" data-expected-width=113>
        <div class="td" data-expected-width=108>
            <div class="child"></div>
            <div class="child"></div>
        </div>
    </div>
</div>

<div style="width: 400px">
    <div class="table collapse" style="width: -webkit-fill-available"  data-expected-width=400>
        <div class="td" data-expected-width=395>
            <div class="child"></div>
            <div class="child"></div>
        </div>
    </div>
<div>

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