third_party/WebKit/LayoutTests/fast/css-intrinsic-dimensions/width-shrinks-avoid-floats.html

   1 <!DOCTYPE html>
   2 <style>
   3     @import "resources/width-keyword-classes.css";
   4
   5     .container {
   6         border: 5px solid grey;
   7         width: 300px;
   8         height: 120px;
   9         margin-bottom: 5px;
  10         position: relative;
  11     }
  12
  13     .container > div:last-child {
  14         border: 5px solid salmon;
  15         padding: 5px;
  16         width: 0px;
  17         display: -webkit-flex;
  18         -webkit-flex-wrap: wrap;
  19         position: absolute;
  20     }
  21
  22     .child {
  23         display: inline-block;
  24         width: 100px;
  25         height: 50px;
  26         background-color: pink;
  27     }
  28
  29     .float {
  30         float: right;
  31         width: 100px;
  32         height: 50px;
  33         border: 5px solid orange;
  34     }
  35 </style>
  36
  37 Tests that intrinsic width values on absolute positioned elements don't shrink to avoid floats.
  38
  39 <div class="container">
  40     <div class="float">Float</div>
  41     <div class="min-width-min-content" data-expected-width=120>
  42         <div class="child">Child 1</div>
  43         <div class="child">Child 2</div>
  44     </div>
  45 </div>
  46
  47 <div class="container">
  48     <div class="float">Float</div>
  49     <div class="min-width-max-content" data-expected-width=220>
  50         <div class="child">Child 1</div>
  51         <div class="child">Child 2</div>
  52     </div>
  53 </div>
  54
  55 <div class="container">
  56     <div class="float">Float</div>
  57     <div class="min-width-fit-content" data-expected-width=220>
  58         <div class="child">Child 1</div>
  59         <div class="child">Child 2</div>
  60     </div>
  61 </div>
  62
  63 <div class="container">
  64     <div class="float">Float</div>
  65     <div class="min-width-fill-available" data-expected-width=300>
  66         <div class="child">Child 1</div>
  67         <div class="child">Child 2</div>
  68     </div>
  69 </div>
  70
  71 <script src="../../resources/check-layout.js"></script>
  72 <script>
  73 checkLayout(".container");
  74 </script>