| <!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> |
