| <!DOCTYPE html> |
| <head> |
| <link href="resources/grid.css" rel="stylesheet"/> |
| <link href="resources/grid-alignment.css" rel="stylesheet"/> |
| <style> |
| .grid { |
| font: 10px/1 Ahem; |
| } |
| .gridAutoAndAuto { |
| grid-template-columns: auto auto; |
| } |
| .gridFixedMinContentFixedMaxContent { |
| grid-template-columns: minmax(50px, min-content) minmax(40px, max-content); |
| } |
| .gridMaxContentAndAuto { |
| grid-template-columns: max-content auto; |
| } |
| .gridMinContentAndAuto { |
| grid-template-columns: min-content auto; |
| } |
| </style> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <div class="grid gridAutoAndAuto justifyContentStart" id="gridAutoAndAuto"> |
| <div class="firstRowFirstColumn">X</div> |
| <div class="firstRowBothColumn">XXX XX XXX</div> |
| </div> |
| |
| <div class="grid gridAutoAndAuto justifyContentStart" id="gridAutoAndAutoReversed"> |
| <div class="firstRowSecondColumn">X</div> |
| <div class="firstRowBothColumn">XXX XX XXX</div> |
| </div> |
| |
| <div class="grid gridFixedMinContentFixedMaxContent" id="gridFixedMinContentFixedMaxContent"> |
| <div class="sizedToGridArea firstRowFirstColumn"></div> |
| <div class="firstRowBothColumn">XXX XX XXX</div> |
| </div> |
| |
| <div class="grid gridFixedMinContentFixedMaxContent" id="gridFixedMinContentFixedMaxContentTwoEmptyChildren"> |
| <div class="sizedToGridArea firstRowFirstColumn"></div> |
| <div class="sizedToGridArea firstRowSecondColumn"></div> |
| <div class="firstRowBothColumn">XXX XX XXX</div> |
| </div> |
| |
| <div class="grid gridFixedMinContentFixedMaxContent" id="gridFixedMinContentFixedMaxContentFixedSizeChild"> |
| <div class="firstRowFirstColumn">XXXXXX</div> |
| <div class="firstRowBothColumn">XXX XX XXX</div> |
| </div> |
| |
| <div class="grid gridMaxContentAndAuto justifyContentStart" id="gridMaxContentAndAuto"> |
| <div class="firstRowFirstColumn">X</div> |
| <div class="firstRowBothColumn">XXX XX XXX</div> |
| </div> |
| |
| <div class="grid gridMaxContentAndAuto justifyContentStart" id="gridMaxContentAndAutoReversed"> |
| <div class="firstRowSecondColumn">X</div> |
| <div class="firstRowBothColumn">XXX XX XXX</div> |
| </div> |
| |
| <div class="grid gridMinContentAndAuto justifyContentStart" id="gridMinContentAndAuto"> |
| <div class="firstRowFirstColumn">X</div> |
| <div class="firstRowBothColumn">XXX XX XXX</div> |
| </div> |
| |
| <div class="grid gridMinContentAndAuto justifyContentStart" id="gridMinContentAndAutoReversed"> |
| <div class="firstRowSecondColumn">X</div> |
| <div class="firstRowBothColumn">XXX XX XXX</div> |
| </div> |
| |
| <script> |
| function testGridColumnsValues(id, computedColumnValue) |
| { |
| shouldBeEqualToString("window.getComputedStyle(" + id + ", '').getPropertyValue('grid-template-columns')", computedColumnValue); |
| } |
| |
| description('This test checks that content sized tracks are initialized using non-spanning grid items.'); |
| |
| testGridColumnsValues("gridAutoAndAuto", "10px 90px"); |
| testGridColumnsValues("gridAutoAndAutoReversed", "90px 10px"); |
| testGridColumnsValues("gridFixedMinContentFixedMaxContent", "50px 50px"); |
| testGridColumnsValues("gridFixedMinContentFixedMaxContentTwoEmptyChildren", "50px 50px"); |
| testGridColumnsValues("gridFixedMinContentFixedMaxContentFixedSizeChild", "60px 40px"); |
| testGridColumnsValues("gridMaxContentAndAuto", "80px 20px"); |
| testGridColumnsValues("gridMaxContentAndAutoReversed", "90px 10px"); |
| testGridColumnsValues("gridMinContentAndAuto", "10px 90px"); |
| testGridColumnsValues("gridMinContentAndAutoReversed", "20px 80px"); |
| </script> |
| </body> |
