| <!DOCTYPE html> |
| <head> |
| <link href="resources/grid.css" rel="stylesheet"/> |
| <link href="resources/grid-alignment.css" rel="stylesheet"/> |
| <style> |
| .grid { font: 10px/1 Ahem; } |
| |
| .gridAutoAndMaxContent { |
| grid-template-columns: auto max-content; |
| } |
| .gridFixedMinContentAndFixedMaxContent { |
| grid-template-columns: minmax(10px, min-content) minmax(10px, max-content); |
| } |
| .gridMinContentAndMaxContent { |
| grid-template-columns: min-content max-content; |
| } |
| |
| .gridMinContentAndFixedAndMaxContent { |
| grid-template-columns: min-content 20px max-content; |
| } |
| |
| .gridMaxContentAndFixedAndAuto { |
| grid-template-columns: max-content 20px auto; |
| } |
| |
| .gridRepeatTwoMaxContentAndMinContent { |
| grid-template-columns: repeat(2, max-content min-content); |
| } |
| |
| .gridRepeatTwoAutoAndMaxContent { |
| grid-template-columns: repeat(2, auto max-content); |
| } |
| |
| .columns1And2 { grid-column: 1 / span 2; } |
| .columns2And3 { grid-column: 2 / span 2; } |
| .columns3And4 { grid-column: 3 / span 2; } |
| .columns1To3 { grid-column: 1 / span 3; } |
| .columns1To4 { grid-column: 1 / span 4; } |
| </style> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <body> |
| |
| <div class="constrainedContainer"> |
| <div class="grid gridAutoAndMaxContent" id="gridAutoAndMaxContent"> |
| <div class="columns1And2">XXXX XXXX</div> |
| <div class="columns1And2">XXXXX X</div> |
| </div> |
| </div> |
| |
| <div class="grid gridFixedMinContentAndFixedMaxContent" id="gridFixedMinContentAndFixedMaxContent"> |
| <div class="columns1And2">XXXX XXXX</div> |
| <div class="columns1And2">XXXXX XXXXX</div> |
| </div> |
| |
| <div class="grid gridMinContentAndMaxContent" id="gridMinContentAndMaxContent"> |
| <div class="columns1And2">XX XX</div> |
| <div class="columns1And2">XXX XX XXX</div> |
| </div> |
| |
| <div class="grid gridMinContentAndFixedAndMaxContent" id="gridMinContentAndFixedAndMaxContent"> |
| <div class="columns1To3">XXXX XXXX</div> |
| <div class="columns1To3">XXXXX XXX XXXX</div> |
| </div> |
| |
| <div class="grid gridMaxContentAndFixedAndAuto justifyContentStart" id="gridMaxContentAndFixedAndAuto"> |
| <div class="columns1To3">XXXX XXXX</div> |
| <div class="columns1To3">XXXXX XXX XXXX</div> |
| </div> |
| |
| <div class="grid gridRepeatTwoMaxContentAndMinContent" id="gridRepeatTwoMaxContentAndMinContentTwoOverlapping"> |
| <div class="columns1And2">XXXX XXXX</div> |
| <div class="columns3And4">XX XX</div> |
| <div class="columns1And2">XXXXX XXX XXXX</div> |
| <div class="columns3And4">XXX XX XXX</div> |
| </div> |
| |
| <div class="grid gridRepeatTwoMaxContentAndMinContent" id="gridRepeatTwoMaxContentAndMinContentThreeOverlapping"> |
| <div class="columns2And3">XXXXX XXX XXXX</div> |
| <div class="columns3And4">XXX XX XXX</div> |
| <div class="columns1And2">XXXX XXXX</div> |
| </div> |
| |
| <div class="grid gridRepeatTwoMaxContentAndMinContent" id="gridRepeatTwoMaxContentAndMinContentTwoAndFourOverlapping"> |
| <div class="columns1To4">XXXX XXXX</div> |
| <div class="columns3And4">XX XX</div> |
| <div class="columns1To4">XXXXX XXX XXXX</div> |
| <div class="columns1And2">XXX XX XXX</div> |
| <div class="columns3And4">X X X X X</div> |
| <div class="columns1And2">XXXXXX</div> |
| </div> |
| |
| <div class="grid gridRepeatTwoAutoAndMaxContent justifyContentStart" id="gridRepeatTwoAutoAndMaxContentTwoOverlapping"> |
| <div class="columns1And2">XXXX XXXX</div> |
| <div class="columns3And4">XX XX</div> |
| <div class="columns1And2">XXXXX XXX XXXX</div> |
| <div class="columns3And4">XXX XX XXX</div> |
| </div> |
| |
| <div class="grid gridRepeatTwoAutoAndMaxContent justifyContentStart" id="gridRepeatTwoAutoAndMaxContentThreeOverlapping"> |
| <div class="columns2And3">XXXXX XXX XXXX</div> |
| <div class="columns3And4">XXX XX XXX</div> |
| <div class="columns1And2">XXXX XXXX</div> |
| </div> |
| |
| <div class="grid gridRepeatTwoAutoAndMaxContent justifyContentStart" id="gridRepeatTwoAutoAndMaxContentTwoAndFourOverlapping"> |
| <div class="columns1To4">XXXX XXXX</div> |
| <div class="columns3And4">XX XX</div> |
| <div class="columns1To4">XXXXX XXX XXXX</div> |
| <div class="columns1And2">XXX XX XXX</div> |
| <div class="columns3And4">X X X X X</div> |
| <div class="columns1And2">XXXXXX</div> |
| </div> |
| |
| <script> |
| function testGridColumnsValues(id, computedColumnValue) |
| { |
| shouldBeEqualToString("window.getComputedStyle(" + id + ", '').getPropertyValue('grid-template-columns')", computedColumnValue); |
| } |
| |
| debug("Check that tracks are updated after distributing the extra space for all the items in the same group span."); |
| testGridColumnsValues("gridAutoAndMaxContent", "25px 65px"); |
| testGridColumnsValues("gridFixedMinContentAndFixedMaxContent", "25px 85px"); |
| testGridColumnsValues("gridMinContentAndMaxContent", "15px 85px"); |
| testGridColumnsValues("gridMinContentAndFixedAndMaxContent", "15px 20px 105px"); |
| testGridColumnsValues("gridMaxContentAndFixedAndAuto", "105px 20px 15px"); |
| testGridColumnsValues("gridRepeatTwoMaxContentAndMinContentTwoOverlapping", "115px 25px 85px 15px"); |
| testGridColumnsValues("gridRepeatTwoMaxContentAndMinContentThreeOverlapping", "65px 25px 115px 15px"); |
| testGridColumnsValues("gridRepeatTwoMaxContentAndMinContentTwoAndFourOverlapping", "70px 30px 80px 10px"); |
| testGridColumnsValues("gridRepeatTwoAutoAndMaxContentTwoOverlapping", "25px 115px 15px 85px"); |
| testGridColumnsValues("gridRepeatTwoAutoAndMaxContentThreeOverlapping", "20px 115px 25px 75px"); |
| testGridColumnsValues("gridRepeatTwoAutoAndMaxContentTwoAndFourOverlapping", "30px 70px 10px 80px"); |
| </script> |
| </body> |
