| <!DOCTYPE html> |
| |
| <link href="resources/flexbox.css" rel="stylesheet"> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../../resources/check-layout-th.js"></script> |
| |
| <body onload="checkLayout('.flexbox')"> |
| <div id=log></div> |
| |
| <div class="flexbox" style="width: 10px;" data-expected-width="10"> |
| <!-- should use content width, clamped by converted max-height, as minimum width. --> |
| <img src="../../images/resources/green-100.png" style="max-height: 5px;" |
| data-expected-width="5" data-expected-height="5"> |
| </div> |
| |
| <div class="flexbox" style="width: 10px;" data-expected-width="10"> |
| <!-- should use min(specified, content width) = 10px as minimum width, |
| which the image will shrink to due to default flex-shrink. --> |
| <img src="../../images/resources/green-10.png" style="width: 100px;" data-expected-width="10"> |
| </div> |
| |
| |
| <div class="flexbox" style="width: 10px;" data-expected-width="10"> |
| <!-- should use content width, clamped by converted min-height, as minimum width. --> |
| <img src="../../images/resources/green-100.png" style="max-height: 5px;" |
| data-expected-width="5" data-expected-height="5"> |
| </div> |
| |
| <div class="flexbox" style="width: 10px;" data-expected-width="10"> |
| <!-- should use content width, clamped by converted min-height, as minimum width. --> |
| <img src="../../images/resources/green-100.png" style="max-height: 5px; min-height: 10px;" |
| data-expected-width="10" data-expected-height="10"> |
| </div> |
| |
| <div class="flexbox" style="width: 10px;" data-expected-width="10"> |
| <!-- should use min(transferred, content width) = 10px as minimum width, |
| which the image will shrink to due to default flex-shrink. --> |
| <img src="../../images/resources/green-10.png" style="height: 100px;" data-expected-width="10"> |
| </div> |
| |
| <div class="flexbox column" style="height: 10px;" data-expected-height="10"> |
| <!-- should use content height, clamped by converted max-width, as minimum height. --> |
| <img src="../../images/resources/green-100.png" style="max-width: 5px;" |
| data-expected-width="5" data-expected-height="5"> |
| </div> |
| |
| <div class="flexbox column" style="height: 10px;" data-expected-height="10"> |
| <!-- should use min(specified, content height) = 10px as minimum height, |
| which the image will shrink to due to default flex-shrink. --> |
| <img src="../../images/resources/green-10.png" style="height: 100px;" data-expected-height="10"> |
| </div> |
| |
| <div class="flexbox" style="height: 10px;" data-expected-height="10"> |
| <!-- should use content height, clamped by converted min-height, as minimum height. --> |
| <img src="../../images/resources/green-100.png" style="max-height: 5px;" |
| data-expected-height="5" data-expected-height="5"> |
| </div> |
| |
| <div class="flexbox" style="height: 10px;" data-expected-height="10"> |
| <!-- should use content height, clamped by converted min-width, as minimum height. --> |
| <img src="../../images/resources/green-100.png" style="max-width: 5px; min-width: 10px;" |
| data-expected-height="10" data-expected-width="10"> |
| </div> |
| |
| <div class="flexbox column" style="height: 10px;" data-expected-height="10"> |
| <!-- should use min(transferred, content height) = 10px as minimum height, |
| which the image will shrink to due to default flex-shrink. --> |
| <img src="../../images/resources/green-10.png" style="width: 100px;" data-expected-height="10"> |
| </div> |
