third_party/WebKit/LayoutTests/fast/css-intrinsic-dimensions/intrinsic-sized-blocks.html

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