| <!DOCTYPE html> |
| <html> |
| <head> |
| <link href="resources/grid.css" rel="stylesheet"/> |
| <link href="resources/grid-alignment.css" rel="stylesheet"/> |
| <style> |
| .grid { |
| font: 10px/1 Ahem; |
| } |
| .gridFixedMinContentAndFixedMaxContent { |
| grid-template-columns: minmax(20px, min-content) minmax(20px, max-content); |
| } |
| .gridMaxContentFixedAndMinContentFixed { |
| grid-template-columns: minmax(max-content, 50px) minmax(min-content, 50px); |
| } |
| .gridFixedMinContentAndAuto { |
| grid-template-columns: minmax(20px, min-content) auto; |
| } |
| .gridFixedMaxContentAndAuto { |
| grid-template-columns: minmax(20px, max-content) auto; |
| } |
| .gridMaxContentAndAuto { |
| grid-template-columns: max-content auto; |
| } |
| .gridAutoAndMaxContent { |
| grid-template-columns: auto max-content; |
| } |
| .gridMinContentAndAuto { |
| grid-template-columns: min-content auto; |
| } |
| .gridAutoAndMinContent { |
| grid-template-columns: min-content auto; |
| } |
| .spanTwo { |
| grid-column: 1 / 3; |
| } |
| </style> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <div style="position: relative"> |
| <div id="gridFixedMinContentAndFixedMaxContent" class="grid gridFixedMinContentAndFixedMaxContent"> |
| <div class="firstRowFirstColumn">XXXXX</div> |
| <div class="spanTwo secondRowFirstColumn">XXX XXX</div> |
| </div> |
| </div> |
| |
| <div style="position: relative"> |
| <div id="gridMaxContentFixedAndMinContentFixed" class="grid gridMaxContentFixedAndMinContentFixed"> |
| <div class="firstRowFirstColumn">XXXXX</div> |
| <div class="spanTwo secondRowFirstColumn">XXX XXX</div> |
| </div> |
| </div> |
| |
| <div style="position: relative"> |
| <div id="gridFixedMinContentAndAuto" class="grid contentStart gridFixedMinContentAndAuto"> |
| <div class="firstRowFirstColumn">XXXXX</div> |
| <div class="spanTwo secondRowFirstColumn">XXX XXX</div> |
| </div> |
| </div> |
| |
| <div style="position: relative"> |
| <div id="gridFixedMaxContentAndAuto" class="grid contentStart gridFixedMaxContentAndAuto"> |
| <div class="firstRowFirstColumn">XXXXX</div> |
| <div class="spanTwo secondRowFirstColumn">XXX XXX</div> |
| </div> |
| </div> |
| |
| <div style="position: relative"> |
| <div id="gridMaxContentAndAuto" class="grid contentStart gridMaxContentAndAuto"> |
| <div class="firstRowFirstColumn">XXXXX</div> |
| <div class="spanTwo secondRowFirstColumn">XXX XXX</div> |
| </div> |
| </div> |
| |
| <div style="position: relative"> |
| <div id="gridAutoAndMaxContent" class="grid contentStart gridAutoAndMaxContent"> |
| <div class="firstRowFirstColumn">XXXXX</div> |
| <div class="spanTwo secondRowFirstColumn">XXX XXX</div> |
| </div> |
| </div> |
| |
| <div style="position: relative"> |
| <div id="gridMinContentAndAuto" class="grid contentStart gridMinContentAndAuto"> |
| <div class="firstRowFirstColumn">XXXXX</div> |
| <div class="spanTwo secondRowFirstColumn">XXX XXX</div> |
| </div> |
| </div> |
| |
| <div style="position: relative"> |
| <div id="gridAutoAndMinContent" class="grid contentStart gridAutoAndMinContent"> |
| <div class="firstRowFirstColumn">XXXXX</div> |
| <div class="spanTwo secondRowFirstColumn">XXX XXX</div> |
| </div> |
| </div> |
| |
| </body> |
| <script src="resources/grid-definitions-parsing-utils.js"></script> |
| <script> |
| |
| function checkTrackBreadthAfterItemRowSwap(gridId) |
| { |
| window.gridElement = document.getElementById(gridId); |
| var oldValue = getComputedStyle(gridElement, '').getPropertyValue('grid-template-columns'); |
| var firstChildRow = getComputedStyle(gridElement.children[0],'').getPropertyValue('grid-row'); |
| gridElement.children[0].style.gridRow = getComputedStyle(gridElement.children[1],'').getPropertyValue('grid-row'); |
| gridElement.children[1].style.gridRow = firstChildRow; |
| var newValue = getComputedStyle(gridElement, '').getPropertyValue('grid-template-columns'); |
| |
| if (newValue == oldValue) |
| testPassed("grid-template-columns is " + newValue + " after grid row swap."); |
| else |
| testFailed("grid-template-columns should be " + oldValue + ". Was " + newValue + "."); |
| } |
| |
| checkTrackBreadthAfterItemRowSwap("gridFixedMinContentAndFixedMaxContent"); |
| checkTrackBreadthAfterItemRowSwap("gridMaxContentFixedAndMinContentFixed"); |
| checkTrackBreadthAfterItemRowSwap("gridFixedMinContentAndAuto"); |
| checkTrackBreadthAfterItemRowSwap("gridFixedMaxContentAndAuto"); |
| checkTrackBreadthAfterItemRowSwap("gridMaxContentAndAuto"); |
| checkTrackBreadthAfterItemRowSwap("gridAutoAndMaxContent"); |
| checkTrackBreadthAfterItemRowSwap("gridMinContentAndAuto"); |
| checkTrackBreadthAfterItemRowSwap("gridAutoAndMinContent"); |
| |
| </script> |
| </html> |
