tables.html | Explore in Territory

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

<table data-expected-width=140>
    <td data-expected-width=116>
        <div class="child"></div>
        <div class="child"></div>
    </td>
</table>

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

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

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

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

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

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

<table class="collapse" data-expected-width=116>
    <td data-expected-width=111>
        <div class="child"></div>
        <div class="child"></div>
    </td>
</table>

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

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

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

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

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

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

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