| <!DOCTYPE html> |
| <html> |
| <head> |
| <link href="resources/grid.css" rel=stylesheet> |
| <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel=stylesheet> |
| <style> |
| |
| .grid { |
| font: 10px/1 Ahem; |
| } |
| |
| .gridMinContentFixed { |
| grid-template-columns: minmax(min-content, 40px) minmax(min-content, 40px); |
| grid-template-rows: 10px; |
| } |
| |
| .gridFixedMinContent { |
| grid-template-columns: minmax(30px, min-content) minmax(30px, min-content); |
| grid-template-rows: 10px; |
| } |
| |
| .gridFixedMaxContent { |
| grid-template-columns: minmax(40px, max-content) minmax(40px, max-content); |
| grid-template-rows: 10px; |
| } |
| |
| .gridFixedFixed { |
| grid-template-columns: minmax(30px, 40px) minmax(30px, 40px); |
| grid-template-rows: 10px; |
| } |
| |
| .gridAutoContent { |
| grid-template-columns: auto auto; |
| grid-template-rows: 10px; |
| } |
| |
| .gridFixedFraction { |
| grid-template-columns: minmax(10px, 1fr) minmax(20px, 2fr); |
| grid-template-rows: 10px; |
| } |
| |
| .margins { |
| margin: 10px 20px 30px 40px; |
| } |
| |
| .minWidth70 { |
| min-width: 70px; |
| } |
| |
| .maxWidth20 { |
| max-width: 20px; |
| } |
| |
| </style> |
| </head> |
| <script src="../../resources/check-layout.js"></script> |
| <body onload="checkLayout('.grid')"> |
| <body> |
| <p>This test checks that the grid element's preferred logical widths are properly computed with different combinations of minmax().</p> |
| <div class="grid gridMinContentFixed min-content" data-expected-height="10" data-expected-width="40"> |
| <div class="firstRowFirstColumn">XX XX XX</div> |
| <div class="firstRowSecondColumn">XX XX XX</div> |
| </div> |
| |
| <div class="grid gridMinContentFixed max-content" data-expected-height="10" data-expected-width="80"> |
| <div class="firstRowFirstColumn">XX XX XX</div> |
| <div class="firstRowSecondColumn">XX XX XX</div> |
| </div> |
| |
| <div class="grid gridFixedMinContent min-content" data-expected-height="10" data-expected-width="60"> |
| <div class="firstRowFirstColumn">XXXXX XXXXX</div> |
| <div class="firstRowSecondColumn">XXXXX XXXXX</div> |
| </div> |
| |
| <div class="grid gridFixedMinContent max-content" data-expected-height="10" data-expected-width="100"> |
| <div class="firstRowFirstColumn">XXXXX XXXXX</div> |
| <div class="firstRowSecondColumn">XXXXX XXXXX</div> |
| </div> |
| |
| <div class="grid gridFixedMaxContent min-content" data-expected-height="10" data-expected-width="80"> |
| <div class="firstRowFirstColumn">XX XX XX</div> |
| <div class="firstRowSecondColumn">XX XX XX</div> |
| </div> |
| |
| <div class="grid gridFixedMaxContent max-content" data-expected-height="10" data-expected-width="160"> |
| <div class="firstRowFirstColumn">XX XX XX</div> |
| <div class="firstRowSecondColumn">XX XX XX</div> |
| </div> |
| |
| <div class="grid gridFixedFixed min-content" data-expected-height="10" data-expected-width="60"></div> |
| |
| <div class="grid gridFixedFixed max-content" data-expected-height="10" data-expected-width="80"></div> |
| |
| <div class="grid gridAutoContent min-content" data-expected-height="10" data-expected-width="40"> |
| <div class="firstRowFirstColumn">XX XX XX</div> |
| <div class="firstRowSecondColumn">XX XX XX</div> |
| </div> |
| |
| <div class="grid gridAutoContent max-content" data-expected-height="10" data-expected-width="160"> |
| <div class="firstRowFirstColumn">XX XX XX</div> |
| <div class="firstRowSecondColumn">XX XX XX</div> |
| </div> |
| |
| <div class="grid gridFixedFraction min-content" data-expected-height="10" data-expected-width="30"></div> |
| |
| <div class="grid gridFixedFraction max-content" data-expected-height="10" data-expected-width="30"></div> |
| <!-- Now with margin on one of the grid items. --> |
| <div class="grid gridMinContentFixed min-content" data-expected-height="10" data-expected-width="100"> |
| <div class="firstRowFirstColumn">XX XX XX</div> |
| <div class="firstRowSecondColumn margins">XX XX XX</div> |
| </div> |
| |
| <div class="grid gridMinContentFixed max-content" data-expected-height="10" data-expected-width="120"> |
| <div class="firstRowFirstColumn margins">XX XX XX</div> |
| <div class="firstRowSecondColumn">XX XX XX</div> |
| </div> |
| |
| <div class="grid gridFixedMinContent min-content" data-expected-height="10" data-expected-width="60"> |
| <div class="firstRowFirstColumn">XXXXX XXXXX</div> |
| <div class="firstRowSecondColumn margins">XXXXX XXXXX</div> |
| </div> |
| |
| <div class="grid gridFixedMinContent max-content" data-expected-height="10" data-expected-width="160"> |
| <div class="firstRowFirstColumn margins">XXXXX XXXXX</div> |
| <div class="firstRowSecondColumn">XXXXX XXXXX</div> |
| </div> |
| |
| <div class="grid gridFixedMaxContent min-content" data-expected-height="10" data-expected-width="80"> |
| <div class="firstRowFirstColumn">XX XX XX</div> |
| <div class="firstRowSecondColumn margins">XX XX XX</div> |
| </div> |
| |
| <div class="grid gridFixedMaxContent max-content" data-expected-height="10" data-expected-width="220"> |
| <div class="firstRowFirstColumn margins">XX XX XX</div> |
| <div class="firstRowSecondColumn">XX XX XX</div> |
| </div> |
| |
| <!-- Spanning cells --> |
| <div class="grid gridMinContentFixed min-content" data-expected-height="10" data-expected-width="20"> |
| <div class="firstRowBothColumn">XX XX XX</div> |
| </div> |
| |
| <div class="grid gridFixedMinContent max-content" data-expected-height="10" data-expected-width="80"> |
| <div class="firstRowBothColumn">XXXXX XXXXX</div> |
| <div class="firstRowSecondColumn">XXXXX XXXXX</div> |
| </div> |
| |
| <div class="grid gridFixedMaxContent max-content" data-expected-height="10" data-expected-width="80"> |
| <div class="firstRowBothColumn">XX XX XX</div> |
| <div class="firstRowBothColumn">XX XX XX</div> |
| </div> |
| |
| <div class="grid gridAutoContent min-content" data-expected-height="10" data-expected-width="20"> |
| <div class="firstRowFirstColumn">XX XX XX</div> |
| <div class="firstRowBothColumn">XX XX XX</div> |
| </div> |
| |
| <div class="grid gridAutoContent max-content" data-expected-height="10" data-expected-width="80"> |
| <div class="firstRowBothColumn">XX XX XX</div> |
| <div class="firstRowSecondColumn">XX XX XX</div> |
| </div> |
| |
| <!-- Grids under min-width / max-width constraints --> |
| <div class="min-content grid gridMinContentFixed minWidth70" data-expected-height="10" data-expected-width="70"> |
| <div class="firstRowFirstColumn">XX XX XX</div> |
| <div class="firstRowSecondColumn">XX XX XX</div> |
| </div> |
| |
| <div class="max-content grid gridMinContentFixed maxWidth20" data-expected-height="10" data-expected-width="20"> |
| <div class="firstRowFirstColumn">XX XX XX</div> |
| <div class="firstRowSecondColumn">XX XX XX</div> |
| </div> |
| |
| <div class="min-content grid gridFixedMinContent minWidth70" data-expected-height="10" data-expected-width="70"> |
| <div class="firstRowFirstColumn">XXXXX XXXXX</div> |
| <div class="firstRowSecondColumn">XXXXX XXXXX</div> |
| </div> |
| |
| <div class="max-content grid gridFixedMinContent maxWidth20" data-expected-height="10" data-expected-width="20"> |
| <div class="firstRowFirstColumn">XXXXX XXXXX</div> |
| <div class="firstRowSecondColumn">XXXXX XXXXX</div> |
| </div> |
| |
| <div class="min-content grid gridFixedMaxContent minWidth70" data-expected-height="10" data-expected-width="80"> |
| <div class="firstRowFirstColumn">XX XX XX</div> |
| <div class="firstRowSecondColumn">XX XX XX</div> |
| </div> |
| |
| <div class="max-content grid gridFixedMaxContent maxWidth20" data-expected-height="10" data-expected-width="20"> |
| <div class="firstRowFirstColumn">XX XX XX</div> |
| <div class="firstRowSecondColumn">XX XX XX</div> |
| </div> |
| |
| <div class="min-content grid gridFixedFixed minWidth70" data-expected-height="10" data-expected-width="70"></div> |
| |
| <div class="max-content grid gridFixedFixed maxWidth20" data-expected-height="10" data-expected-width="20"></div> |
| |
| <div class="min-content grid gridAutoContent minWidth70" data-expected-height="10" data-expected-width="70"> |
| <div class="firstRowFirstColumn">XX XX XX</div> |
| <div class="firstRowSecondColumn">XX XX XX</div> |
| </div> |
| |
| <div class="max-content grid gridAutoContent maxWidth20" data-expected-height="10" data-expected-width="20"> |
| <div class="firstRowFirstColumn">XX XX XX</div> |
| <div class="firstRowSecondColumn">XX XX XX</div> |
| </div> |
| |
| <div class="min-content grid gridFixedFraction minWidth70" data-expected-height="10" data-expected-width="70"></div> |
| |
| <div class="max-content grid gridFixedFraction maxWidth20" data-expected-height="10" data-expected-width="20"></div> |
| |
| </body> |
| </html> |
