third_party/WebKit/LayoutTests/fast/css-intrinsic-dimensions/tables.html

   1 <!DOCTYPE html>
   2 <style>
   3 table {
   4     border: 5px solid salmon;
   5     padding: 5px;
   6 }
   7 td {
   8     border: 5px solid orange;
   9 }
  10 .child {
  11     display: inline-block;
  12     width: 50px;
  13     height: 20px;
  14     background-color: pink;
  15 }
  16 .collapse {
  17     border-collapse: collapse;
  18 }
  19 </style>
  20
  21 <table data-expected-width=140>
  22     <td data-expected-width=116>
  23         <div class="child"></div>
  24         <div class="child"></div>
  25     </td>
  26 </table>
  27
  28 <table style="width: min-content" data-expected-width=86>
  29     <td data-expected-width=62>
  30         <div class="child"></div>
  31         <div class="child"></div>
  32     </td>
  33 </table>
  34
  35 <table style="width: max-content" data-expected-width=140>
  36     <td data-expected-width=116>
  37         <div class="child"></div>
  38         <div class="child"></div>
  39     </td>
  40 </table>
  41
  42 <table style="width: fit-content" data-expected-width=140>
  43     <td data-expected-width=116>
  44         <div class="child"></div>
  45         <div class="child"></div>
  46     </td>
  47 </table>
  48
  49 <div style="width: 140px">
  50     <table style="width: fit-content" data-expected-width=140>
  51         <td data-expected-width=116>
  52             <div class="child"></div>
  53             <div class="child"></div>
  54         </td>
  55     </table>
  56 </div>
  57
  58 <div style="width: 139px">
  59     <table style="width: fit-content" data-expected-width=139>
  60         <td data-expected-width=115>
  61             <div class="child"></div>
  62             <div class="child"></div>
  63         </td>
  64     </table>
  65 </div>
  66
  67 <div style="width: 400px">
  68     <table style="width: -webkit-fill-available"  data-expected-width=400>
  69         <td data-expected-width=376>
  70             <div class="child"></div>
  71             <div class="child"></div>
  72         </td>
  73     </table>
  74 <div>
  75
  76 <table class="collapse" data-expected-width=116>
  77     <td data-expected-width=111>
  78         <div class="child"></div>
  79         <div class="child"></div>
  80     </td>
  81 </table>
  82
  83 <table class="collapse" style="width: min-content" data-expected-width=62>
  84     <td data-expected-width=57>
  85         <div class="child"></div>
  86         <div class="child"></div>
  87     </td>
  88 </table>
  89
  90 <table class="collapse" style="width: max-content" data-expected-width=116>
  91     <td data-expected-width=111>
  92         <div class="child"></div>
  93         <div class="child"></div>
  94     </td>
  95 </table>
  96
  97 <table class="collapse" style="width: fit-content" data-expected-width=116>
  98     <td data-expected-width=111>
  99         <div class="child"></div>
 100         <div class="child"></div>
 101     </td>
 102 </table>
 103
 104 <div style="width: 116px">
 105     <table class="collapse" style="width: fit-content" data-expected-width=116>
 106         <td data-expected-width=111>
 107             <div class="child"></div>
 108             <div class="child"></div>
 109         </td>
 110     </table>
 111 </div>
 112
 113 <div style="width: 115px">
 114     <table class="collapse" style="width: fit-content" data-expected-width=115>
 115         <td data-expected-width=110>
 116             <div class="child"></div>
 117             <div class="child"></div>
 118         </td>
 119     </table>
 120 </div>
 121
 122 <div style="width: 400px">
 123     <table class="collapse" style="width: -webkit-fill-available"  data-expected-width=400>
 124         <td data-expected-width=395>
 125             <div class="child"></div>
 126             <div class="child"></div>
 127         </td>
 128     </table>
 129 <div>
 130
 131 <script src="../../resources/check-layout.js"></script>
 132 <script>
 133 checkLayout('table');
 134 </script>