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

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