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