| <!DOCTYPE html> |
| <style> |
| .container { |
| border: 5px solid blue; |
| } |
| .child { |
| background-color: lime; |
| } |
| body { |
| width: 500px; |
| } |
| </style> |
| |
| Tests that intrinsic width values on replaced element with fit-content container work. |
| |
| <!-- The 300px expected values are the 300px intrinsic width of a canvas. --> |
| |
| <!-- width tests with fit-content container --> |
| <div class="container" style="width: fit-content;"> |
| <canvas class="child" style="width: max-content;" data-expected-width="300"></canvas> |
| </div> |
| |
| <div class="container" style="width: fit-content;"> |
| <canvas class="child" style="width: min-content;" data-expected-width="300"></canvas> |
| </div> |
| |
| <div class="container" style="width: fit-content;"> |
| <canvas class="child" style="width: fit-content;" data-expected-width="300"></canvas> |
| </div> |
| |
| <div class="container" style="width: fit-content;"> |
| <canvas class="child" style="width: -webkit-fill-available;" data-expected-width="300"></canvas> |
| </div> |
| |
| <!-- width tests with fill-available container --> |
| <div class="container" style="width: -webkit-fill-available;"> |
| <canvas class="child" style="width: max-content;" data-expected-width="300"></canvas> |
| </div> |
| |
| <div class="container" style="width: -webkit-fill-available;"> |
| <canvas class="child" style="width: min-content;" data-expected-width="300"></canvas> |
| </div> |
| |
| <div class="container" style="width: -webkit-fill-available;"> |
| <canvas class="child" style="width: fit-content;" data-expected-width="300"></canvas> |
| </div> |
| |
| <div class="container" style="width: -webkit-fill-available;"> |
| <canvas class="child" style="width: -webkit-fill-available;" data-expected-width="490"></canvas> |
| </div> |
| |
| <script src="../../resources/check-layout.js"></script> |
| <script> |
| checkLayout(".container"); |
| </script> |
