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

   1 <!DOCTYPE html>
   2 <style>
   3 .container {
   4     position:relative;
   5     border: 5px solid blue;
   6     width: 350px;
   7     height: 350px;
   8 }
   9 .child {
  10     position:absolute;
  11     border: 5px solid pink;
  12 }
  13 </style>
  14
  15 Tests that intrinsic width values on absolutely positioned element work.
  16
  17 <!-- The 310px expected values are the 300px intrinsic width of an iframe plus 10px of border.
  18     The 350px expected values are the iframe filling the 350px available width from the container.
  19 -->
  20
  21 <!-- width tests -->
  22 <div class="container">
  23     <iframe class="child" style="width: max-content;" data-expected-width="310"></iframe>
  24 </div>
  25
  26 <div class="container">
  27     <iframe class="child" style="width: min-content;" data-expected-width="310"></iframe>
  28 </div>
  29
  30 <div class="container">
  31     <iframe class="child" style="width: fit-content;" data-expected-width="310"></iframe>
  32 </div>
  33
  34 <div class="container" style="width: 50px">
  35     <iframe class="child" style="width: fit-content;" data-expected-width="310"></iframe>
  36 </div>
  37
  38 <div class="container">
  39     <iframe class="child" style="width: -webkit-fill-available;" data-expected-width="350"></iframe>
  40 </div>
  41
  42 <!-- min-width tests -->
  43 <div class="container">
  44     <iframe class="child" style="min-width: max-content; width: 10px;" data-expected-width="310"></iframe>
  45 </div>
  46
  47 <div class="container">
  48     <iframe class="child" style="min-width: min-content; width: 10px;" data-expected-width="310"></iframe>
  49 </div>
  50
  51 <div class="container">
  52     <iframe class="child" style="min-width: fit-content; width: 10px;" data-expected-width="310"></iframe>
  53 </div>
  54
  55 <div class="container" style="width: 50px">
  56     <iframe class="child" style="min-width: fit-content; width: 10px;" data-expected-width="310"></iframe>
  57 </div>
  58
  59 <div class="container">
  60     <iframe class="child" style="min-width: -webkit-fill-available; width: 10px;" data-expected-width="350"></iframe>
  61 </div>
  62
  63 <!-- max-width tests -->
  64 <div class="container">
  65     <iframe class="child" style="max-width: max-content; width: 1000px;" data-expected-width="310"></iframe>
  66 </div>
  67
  68 <div class="container">
  69     <iframe class="child" style="max-width: min-content; width: 1000px;" data-expected-width="310"></iframe>
  70 </div>
  71
  72 <div class="container">
  73     <iframe class="child" style="max-width: fit-content; width: 1000px;" data-expected-width="310"></iframe>
  74 </div>
  75
  76 <div class="container" style="width: 50px">
  77     <iframe class="child" style="max-width: fit-content; width: 1000px;" data-expected-width="310"></iframe>
  78 </div>
  79
  80 <div class="container">
  81     <iframe class="child" style="max-width: -webkit-fill-available; width: 1000px;" data-expected-width="350"></iframe>
  82 </div>
  83
  84 <script src="../../resources/check-layout.js"></script>
  85 <script>
  86 checkLayout(".container");
  87 </script>