| <!DOCTYPE html> |
| <style> |
| .container { |
| position:relative; |
| border: 5px solid blue; |
| width: 350px; |
| height: 350px; |
| } |
| .child { |
| position:absolute; |
| border: 5px solid pink; |
| } |
| </style> |
| |
| Tests that intrinsic width values on absolutely positioned element work. |
| |
| <!-- The 310px expected values are the 300px intrinsic width of an iframe plus 10px of border. |
| The 350px expected values are the iframe filling the 350px available width from the container. |
| --> |
| |
| <!-- width tests --> |
| <div class="container"> |
| <iframe class="child" style="width: max-content;" data-expected-width="310"></iframe> |
| </div> |
| |
| <div class="container"> |
| <iframe class="child" style="width: min-content;" data-expected-width="310"></iframe> |
| </div> |
| |
| <div class="container"> |
| <iframe class="child" style="width: fit-content;" data-expected-width="310"></iframe> |
| </div> |
| |
| <div class="container" style="width: 50px"> |
| <iframe class="child" style="width: fit-content;" data-expected-width="310"></iframe> |
| </div> |
| |
| <div class="container"> |
| <iframe class="child" style="width: -webkit-fill-available;" data-expected-width="350"></iframe> |
| </div> |
| |
| <!-- min-width tests --> |
| <div class="container"> |
| <iframe class="child" style="min-width: max-content; width: 10px;" data-expected-width="310"></iframe> |
| </div> |
| |
| <div class="container"> |
| <iframe class="child" style="min-width: min-content; width: 10px;" data-expected-width="310"></iframe> |
| </div> |
| |
| <div class="container"> |
| <iframe class="child" style="min-width: fit-content; width: 10px;" data-expected-width="310"></iframe> |
| </div> |
| |
| <div class="container" style="width: 50px"> |
| <iframe class="child" style="min-width: fit-content; width: 10px;" data-expected-width="310"></iframe> |
| </div> |
| |
| <div class="container"> |
| <iframe class="child" style="min-width: -webkit-fill-available; width: 10px;" data-expected-width="350"></iframe> |
| </div> |
| |
| <!-- max-width tests --> |
| <div class="container"> |
| <iframe class="child" style="max-width: max-content; width: 1000px;" data-expected-width="310"></iframe> |
| </div> |
| |
| <div class="container"> |
| <iframe class="child" style="max-width: min-content; width: 1000px;" data-expected-width="310"></iframe> |
| </div> |
| |
| <div class="container"> |
| <iframe class="child" style="max-width: fit-content; width: 1000px;" data-expected-width="310"></iframe> |
| </div> |
| |
| <div class="container" style="width: 50px"> |
| <iframe class="child" style="max-width: fit-content; width: 1000px;" data-expected-width="310"></iframe> |
| </div> |
| |
| <div class="container"> |
| <iframe class="child" style="max-width: -webkit-fill-available; width: 1000px;" data-expected-width="350"></iframe> |
| </div> |
| |
| <script src="../../resources/check-layout.js"></script> |
| <script> |
| checkLayout(".container"); |
| </script> |
