| <!doctype html> |
| <html> |
| <head> |
| <style> |
| .content { |
| display: inline-block; |
| width: 100px; |
| height: 100px; |
| background-color: salmon; |
| } |
| |
| .regionContainer { width: 250px; height: 250px; border: 5px solid blue; } |
| .region { border: 5px solid pink; } |
| </style> |
| </head> |
| <body> |
| <p>Tests that intrinsic values on regions work as expected. On success, you will see a series of PASS below.</p> |
| |
| <!-- width tests --> |
| <div class="regionContainer"> |
| <div class="content" style="-webkit-flow-into: flow1;"></div> |
| <div class="content" style="-webkit-flow-into: flow1;"></div> |
| <div class="region" style="-webkit-flow-from: flow1; width: -webkit-min-content;" data-expected-width="110"></div> |
| </div> |
| |
| <div class="regionContainer"> |
| <div class="content" style="-webkit-flow-into: flow2;"></div> |
| <div class="content" style="-webkit-flow-into: flow2;"></div> |
| <div class="region" style="-webkit-flow-from: flow2; width: -webkit-max-content;" data-expected-width="210"></div> |
| </div> |
| |
| <div class="regionContainer"> |
| <div class="content" style="-webkit-flow-into: flow3;"></div> |
| <div class="content" style="-webkit-flow-into: flow3;"></div> |
| <div class="region" style="-webkit-flow-from: flow3; width: -webkit-fit-content;" data-expected-width="210"></div> |
| </div> |
| |
| <div class="regionContainer"> |
| <div class="content" style="-webkit-flow-into: flow4;"></div> |
| <div class="content" style="-webkit-flow-into: flow4;"></div> |
| <div class="region" style="-webkit-flow-from: flow4; width: -webkit-fill-available;" data-expected-width="250"></div> |
| </div> |
| |
| <div class="regionContainer" style="width: 50px;"> |
| <div class="content" style="-webkit-flow-into: flow5;"></div> |
| <div class="content" style="-webkit-flow-into: flow5;"></div> |
| <div class="region" style="-webkit-flow-from: flow5; width: -webkit-fit-content;" data-expected-width="110"></div> |
| </div> |
| |
| <!-- min-width tests --> |
| <div class="regionContainer"> |
| <div class="content" style="-webkit-flow-into: flow6;"></div> |
| <div class="content" style="-webkit-flow-into: flow6;"></div> |
| <div class="region" style="-webkit-flow-from: flow6; width: 20px; min-width: -webkit-min-content;" data-expected-width="110"></div> |
| </div> |
| |
| <div class="regionContainer"> |
| <div class="content" style="-webkit-flow-into: flow7;"></div> |
| <div class="content" style="-webkit-flow-into: flow7;"></div> |
| <div class="region" style="-webkit-flow-from: flow7; width: 20px; min-width: -webkit-max-content;" data-expected-width="210"></div> |
| </div> |
| |
| <div class="regionContainer"> |
| <div class="content" style="-webkit-flow-into: flow8;"></div> |
| <div class="content" style="-webkit-flow-into: flow8;"></div> |
| <div class="region" style="-webkit-flow-from: flow8; width: 20px; min-width: -webkit-fit-content;" data-expected-width="210"></div> |
| </div> |
| |
| <div class="regionContainer"> |
| <div class="content" style="-webkit-flow-into: flow9;"></div> |
| <div class="content" style="-webkit-flow-into: flow9;"></div> |
| <div class="region" style="-webkit-flow-from: flow9; width: 20px; min-width: -webkit-fill-available;" data-expected-width="250"></div> |
| </div> |
| |
| <div class="regionContainer" style="width: 50px;"> |
| <div class="content" style="-webkit-flow-into: flow10;"></div> |
| <div class="content" style="-webkit-flow-into: flow10;"></div> |
| <div class="region" style="-webkit-flow-from: flow10; width: 20px; min-width: -webkit-fit-content;" data-expected-width="110"></div> |
| </div> |
| |
| <!-- max-width tests --> |
| <div class="regionContainer"> |
| <div class="content" style="-webkit-flow-into: flow11;"></div> |
| <div class="content" style="-webkit-flow-into: flow11;"></div> |
| <div class="region" style="-webkit-flow-from: flow11; width: 1000px; max-width: -webkit-min-content;" data-expected-width="110"></div> |
| </div> |
| |
| <div class="regionContainer"> |
| <div class="content" style="-webkit-flow-into: flow12;"></div> |
| <div class="content" style="-webkit-flow-into: flow12;"></div> |
| <div class="region" style="-webkit-flow-from: flow12; width: 1000px; max-width: -webkit-max-content;" data-expected-width="210"></div> |
| </div> |
| |
| <div class="regionContainer"> |
| <div class="content" style="-webkit-flow-into: flow13;"></div> |
| <div class="content" style="-webkit-flow-into: flow13;"></div> |
| <div class="region" style="-webkit-flow-from: flow13; width: 1000px; max-width: -webkit-fit-content;" data-expected-width="210"></div> |
| </div> |
| |
| <div class="regionContainer"> |
| <div class="content" style="-webkit-flow-into: flow14;"></div> |
| <div class="content" style="-webkit-flow-into: flow14;"></div> |
| <div class="region" style="-webkit-flow-from: flow14; width: 1000px; max-width: -webkit-fill-available;" data-expected-width="250"></div> |
| </div> |
| |
| <div class="regionContainer" style="width: 50px;"> |
| <div class="content" style="-webkit-flow-into: flow15;"></div> |
| <div class="content" style="-webkit-flow-into: flow15;"></div> |
| <div class="region" style="-webkit-flow-from: flow15; width: 1000px; max-width: -webkit-fit-content;" data-expected-width="110"></div> |
| </div> |
| |
| <script src="../../resources/check-layout.js"></script> |
| <script>checkLayout(".region");</script> |
| </body> |
| </html> |
