136 lines
3.6 KiB
HTML
136 lines
3.6 KiB
HTML
<!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> |