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

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