| <!DOCTYPE html> |
| <style type="text/css"> |
| |
| .grid { |
| display: grid; |
| position: relative; |
| width: 100px; /* Just to ensure a small number of repetitions. */ |
| } |
| |
| .emptyCols { grid-template-rows: 20px; } |
| .emptyRows { grid-template-columns: 10px; } |
| .emptyColsDueToAutoFit { grid-template-columns: repeat(auto-fit, [a] 20px [b]); } |
| .emptyRowsDueToAutoFit { grid-template-rows: repeat(auto-fit, [a] 20px [b]); } |
| .noRepetitionsCols { grid-template-columns: repeat(auto-fit, [a] 20px [b]) 10px 30px; } |
| .noRepetitionsRows { grid-template-rows: repeat(auto-fit, [a] 20px [b]) 10px 30px; } |
| |
| |
| .absposChild { |
| position: absolute; |
| } |
| |
| </style> |
| |
| |
| <script> |
| function runTest() { |
| description("This test checks that, getting the computed style of a grid with only absolutelly positioned children and no tracks in some axis, does not CRASH on DEBUG builds."); |
| testGridDefinitionsValues(document.getElementById("grid1"), "none", "20px"); |
| testGridDefinitionsValues(document.getElementById("grid2"), "10px", "none"); |
| testGridDefinitionsValues(document.getElementById("grid3"), "none", "none"); |
| testGridDefinitionsValues(document.getElementById("grid4"), "[a] 0px [b a] 0px [b a] 0px [b a] 0px [b a] 0px [b]", "none"); |
| testGridDefinitionsValues(document.getElementById("grid5"), "none", "[a] 0px [b]"); |
| testGridDefinitionsValues(document.getElementById("grid6"), "[a] 0px [b a] 0px [b a] 0px [b] 10px 30px", "none"); |
| testGridDefinitionsValues(document.getElementById("grid7"), "none", "[a] 0px [b] 10px 30px"); |
| } |
| </script> |
| <script src="../../resources/js-test.js"></script> |
| <script src="resources/grid-definitions-parsing-utils.js"></script> |
| |
| <body onload="runTest()"> |
| |
| <div id="grid1" class="grid emptyCols"><div class="absposChild"></div></div> |
| |
| <div id="grid2" class="grid emptyRows"><div class="absposChild"></div></div> |
| |
| <div id="grid3" class="grid"><div class="absposChild"></div></div> |
| |
| <div id="grid4" class="grid emptyColsDueToAutoFit"><div class="absposChild"></div></div> |
| <div id="grid5" class="grid emptyRowsDueToAutoFit"><div class="absposChild"></div></div> |
| |
| <div id="grid6" class="grid noRepetitionsCols"><div class="absposChild"></div></div> |
| <div id="grid7" class="grid noRepetitionsRows"><div class="absposChild"></div></div> |
| |
| </body> |
