| <!DOCTYPE html> |
| <html> |
| <head> |
| <link href="resources/grid.css" rel="stylesheet"> |
| <style> |
| .grid { |
| font: 10px/1 Ahem; |
| } |
| |
| .gridFixedAndMinContentAndFlex { |
| grid-template-columns: 20px min-content 1fr; |
| } |
| |
| .gridMinMaxFixedFlexAndMaxContentAndAuto { |
| grid-template-columns: minmax(20px, 1fr) max-content auto; |
| } |
| |
| .gridMinMaxAutoFixedAndMinContentAndFixed { |
| grid-template-columns: minmax(auto, 35px) min-content 25px; |
| } |
| |
| .gridMinContentAndMinMaxFixedMinContentAndFlex { |
| grid-template-columns: min-content minmax(20px, min-content) 2fr; |
| } |
| |
| .gridMaxContentAndMinMaxFixedMaxContentAndFlex { |
| grid-template-columns: max-content minmax(20px, max-content) 1fr; |
| } |
| |
| </style> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <body> |
| |
| <p>Test that resolving auto tracks on grid items works properly.</p> |
| |
| <div style="position: relative; width: 100px;"> |
| <div id="gridFixedAndMinContentAndFlex" class="grid gridFixedAndMinContentAndFlex"> |
| <div style="grid-column: 2 / span 2;">XXXXXXXX</div> |
| <div style="grid-column: 1 / span 2; grid-row: 2;">XXXXX</div> |
| </div> |
| </div> |
| |
| <div style="position: relative; width: 100px;"> |
| <div id="gridFixedAndMinContentAndFlexMultipleOverlap" class="grid gridFixedAndMinContentAndFlex"> |
| <div style="grid-column: 1 / span 2;">XXX XXX</div> |
| <div style="grid-column: 1 / -1; grid-row: 2;">XXXX</div> |
| </div> |
| </div> |
| |
| <div style="position: relative; width: 100px;"> |
| <div id="gridMinMaxFixedFlexAndMaxContentAndAuto" class="grid gridMinMaxFixedFlexAndMaxContentAndAuto"> |
| <div style="grid-column: 1 / span 2;">XXX XXX</div> |
| <div style="grid-column: 2 / span 2; grid-row: 2;">XXXX</div> |
| </div> |
| </div> |
| |
| <div style="position: relative; width: 100px;"> |
| <div id="gridMinMaxFixedFlexAndMaxContentAndAutoNoFlexSpanningItems" class="grid gridMinMaxFixedFlexAndMaxContentAndAuto"> |
| <div style="grid-column: 1 / -1;">XXX XXX</div> |
| <div style="grid-column: 1 / span 2; grid-row: 2;">XXXX XXXX</div> |
| </div> |
| </div> |
| |
| <div style="position: relative; width: 100px;"> |
| <div id="gridMinMaxAutoFixedAndMinContentAndFixed" class="grid gridMinMaxAutoFixedAndMinContentAndFixed"> |
| <div style="grid-column: 1 / span 2;">XXXX XXXX</div> |
| <div style="grid-column: 2 / span 2; grid-row: 2;">XXX XXX</div> |
| <div style="grid-column: 1 / -1; grid-row: 3;">XXXXX XXXXX</div> |
| <div style="grid-column: 2 / span 2; grid-row: 4;">XX XX XX XX</div> |
| </div> |
| </div> |
| |
| <div style="position: relative; width: 100px;"> |
| <div id="gridMinContentAndMinMaxFixedMinContentAndFlex" class="grid gridMinContentAndMinMaxFixedMinContentAndFlex"> |
| <div style="grid-column: 2 / span 2;">XXXXX</div> |
| <div style="grid-column: 1 / -1; grid-row: 2;">XXX XXX XXX</div> |
| <div style="grid-column: 1 / span 2; grid-row: 3;">XXXX XXXX</div> |
| </div> |
| </div> |
| |
| <div style="position: relative; width: 100px;"> |
| <div id="gridMaxContentAndMinMaxFixedMaxContentAndFlex" class="grid gridMaxContentAndMinMaxFixedMaxContentAndFlex"> |
| <div style="grid-column: 2 / span 2;">XXXXX</div> |
| <div style="grid-column: 1 / -1; grid-row: 2;">XXX XXX XXX</div> |
| <div style="grid-column: 1 / span 2; grid-row: 3;">XXXX XXXX</div> |
| </div> |
| </div> |
| |
| </body> |
| <script src="resources/grid-definitions-parsing-utils.js"></script> |
| <script> |
| function checkColumns(gridId, columnValue) |
| { |
| window.gridElement = document.getElementById(gridId); |
| shouldBeEqualToString("window.getComputedStyle(" + gridId + ", '').getPropertyValue('grid-template-columns')", columnValue); |
| } |
| |
| checkColumns("gridFixedAndMinContentAndFlex", "20px 30px 50px"); |
| checkColumns("gridFixedAndMinContentAndFlexMultipleOverlap", "20px 10px 70px"); |
| checkColumns("gridMinMaxFixedFlexAndMaxContentAndAuto", "60px 20px 20px"); |
| checkColumns("gridMinMaxFixedFlexAndMaxContentAndAutoNoFlexSpanningItems", "100px 0px 0px"); |
| checkColumns("gridMinMaxAutoFixedAndMinContentAndFixed", "35px 20px 25px"); |
| checkColumns("gridMinContentAndMinMaxFixedMinContentAndFlex", "20px 20px 60px"); |
| checkColumns("gridMaxContentAndMinMaxFixedMaxContentAndFlex", "70px 20px 10px"); |
| |
| </script> |
| </html> |
