| <!DOCTYPE html> |
| <style> |
| @import "resources/width-keyword-classes.css"; |
| |
| .container { |
| border: 5px solid grey; |
| width: 300px; |
| height: 120px; |
| margin-bottom: 5px; |
| position: relative; |
| } |
| |
| .container > div:last-child { |
| border: 5px solid salmon; |
| padding: 5px; |
| width: 0px; |
| display: -webkit-flex; |
| -webkit-flex-wrap: wrap; |
| position: absolute; |
| } |
| |
| .child { |
| display: inline-block; |
| width: 100px; |
| height: 50px; |
| background-color: pink; |
| } |
| |
| .float { |
| float: right; |
| width: 100px; |
| height: 50px; |
| border: 5px solid orange; |
| } |
| </style> |
| |
| Tests that intrinsic width values on absolute positioned elements don't shrink to avoid floats. |
| |
| <div class="container"> |
| <div class="float">Float</div> |
| <div class="min-width-min-content" data-expected-width=120> |
| <div class="child">Child 1</div> |
| <div class="child">Child 2</div> |
| </div> |
| </div> |
| |
| <div class="container"> |
| <div class="float">Float</div> |
| <div class="min-width-max-content" data-expected-width=220> |
| <div class="child">Child 1</div> |
| <div class="child">Child 2</div> |
| </div> |
| </div> |
| |
| <div class="container"> |
| <div class="float">Float</div> |
| <div class="min-width-fit-content" data-expected-width=220> |
| <div class="child">Child 1</div> |
| <div class="child">Child 2</div> |
| </div> |
| </div> |
| |
| <div class="container"> |
| <div class="float">Float</div> |
| <div class="min-width-fill-available" data-expected-width=300> |
| <div class="child">Child 1</div> |
| <div class="child">Child 2</div> |
| </div> |
| </div> |
| |
| <script src="../../resources/check-layout.js"></script> |
| <script> |
| checkLayout(".container"); |
| </script> |
