blob: 8127290ba4f8f4a8a76c42b8b75096ae98137fa6 [file] [log] [blame]
<!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>