blob: 24827bf2809294d4bbe45706ed595204e1afecf6 [file] [log] [blame]
<!DOCTYPE html>
<title>Test for auto-fit and auto-fill with huge grids (lots of tracks)</title>
<meta name="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com">
<link href="resources/grid.css" rel="stylesheet">
<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
<link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" rel="stylesheet">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/grid-definitions-parsing-utils.js"></script>
<style>
.wideGrid { width: 1000000000px; }
.tallGrid { height: 1000000000px; }
.width25k { width: 25000px; }
.height25k { height: 25000px; }
.lastColumn { grid-column: -2 / -1; }
.lastRow { grid-row: -2 / -1; }
.minSizeWideGrid { min-width: 1000000000px; }
.minSizeTallGrid { min-height: 1000000000px; }
.lotsOfFixedRepeatWithAutoFitCols { grid-template-columns: repeat(auto-fit, 10px 2px 8px) repeat(992, 1px); }
.lotsOfFixedRepeatWithAutoFillCols { grid-template-columns: repeat(auto-fill, 10px 2px 8px 7px 20px) repeat(995, 1px); }
.lotsOfAutoRepeatWithAutoFitCols { grid-template-columns: repeat(auto-fit, 10px 2px 8px) repeat(10, 1px); }
.lotsOfAutoRepeatWithAutoFillCols { grid-template-columns: repeat(auto-fill, 10px 2px 8px 7px 20px) repeat(10, 1px); }
.lotsOfFixedRepeatWithAutoFitColsReversed { grid-template-columns: repeat(992, 1px) repeat(auto-fit, 10px 2px 8px); }
.lotsOfFixedRepeatWithAutoFillColsReversed { grid-template-columns: repeat(995, 1px) repeat(auto-fill, 10px 2px 8px 7px 20px); }
.lotsOfFixedRepeatWithAutoFitRows { grid-template-rows: repeat(auto-fit, 10px 2px 8px) repeat(992, 1px); }
.lotsOfFixedRepeatWithAutoFillRows { grid-template-rows: repeat(auto-fill, 10px 2px 8px 7px 20px) repeat(995, 1px); }
.lotsOfAutoRepeatWithAutoFitRows { grid-template-rows: repeat(auto-fit, 10px 2px 8px) repeat(10, 1px); }
.lotsOfAutoRepeatWithAutoFillRows { grid-template-rows: repeat(auto-fill, 10px 2px 8px 7px 20px) repeat(10, 1px); }
.lotsOfFixedRepeatWithAutoFitRowsReversed { grid-template-rows: repeat(992, 1px) repeat(auto-fit, 10px 2px 8px); }
.lotsOfFixedRepeatWithAutoFillRowsReversed { grid-template-rows: repeat(995, 1px) repeat(auto-fill, 10px 2px 8px 7px 20px); }
.autoFitRows25px { grid-template-rows: repeat(auto-fit, 10px 2px 8px 5px); }
.autoFitCols25px { grid-template-columns: repeat(auto-fit, 10px 2px 8px 5px); }
.autoFillRows25px { grid-template-rows: repeat(auto-fill, 17px 8px); }
.autoFillCols25px { grid-template-columns: repeat(auto-fill, 2px 23px); }
.autoFitRows205pxFixed5px { grid-template-rows: repeat(900, 5px) repeat(auto-fit, 20px 50px 13px 50px 72px); }
.autoFitCols205pxFixed5px { grid-template-columns: repeat(900, 5px) repeat(auto-fit, 20px 50px 13px 50px 72px); }
.autoFillRows205pxFixed5px { grid-template-rows: repeat(900, 5px) repeat(auto-fill, 200px 5px); }
.autoFillCols205pxFixed5px { grid-template-columns: repeat(900, 5px) repeat(auto-fill, 200px 5px); }
.autoFitAndAThousandFixedRows { grid-template-rows: repeat(auto-fit, 20px 50px 72px) repeat(1000, 37px); }
.autoFitAndAThousandFixedCols { grid-template-columns: repeat(auto-fit, 20px 50px 72px) repeat(1000, 37px); }
.autoFillAndAThousandFixedRows { grid-template-rows: repeat(auto-fill, 2px) repeat(1000, 37px); }
.autoFillAndAThousandFixedCols { grid-template-columns: repeat(auto-fill, 2px) repeat(1000, 37px); }
.autoFitAndMoreThanThousandFixedRows { grid-template-rows: repeat(700, 7px) repeat(auto-fit, 11px 13px 125px) repeat(600, 6px); }
.autoFitAndMoreThanThousandFixedCols { grid-template-columns: repeat(700, 7px) repeat(auto-fit, 11px 13px 125px) repeat(600, 6px); }
.autoFillAndMoreThanThousandFixedRows { grid-template-rows: repeat(700, 7px) repeat(auto-fill, 20px 50px 72px) repeat(600, 6px); }
.autoFillAndMoreThanThousandFixedCols { grid-template-columns: repeat(700, 7px) repeat(auto-fill, 20px 50px 72px) repeat(600, 6px); }
</style>
<p>This test checks that we properly enforce the maximum number of grid tracks in different situations.</p>
<div id="autoFillGridCols" class="grid"></div>
<div id="autoFitGridCols" class="grid">
<div style="grid-column: 1;"></div>
<div style="grid-column: 2;"></div>
<div class="lastColumn"></div>
</div>
<div id="autoFillGridRows" class="grid"></div>
<div id="autoFitGridRows" class="grid">
<div style="grid-row: 1;"></div>
<div style="grid-row: 2;"></div>
<div class="lastRow"></div>
</div>
<script>
var maxTracksForTesting = 1000; // Keep this value in sync with the ones used in CSS definitions.
var autoFillGridElementCols = document.getElementById("autoFillGridCols");
var autoFitGridElementCols = document.getElementById("autoFitGridCols");
var autoFillGridElementRows = document.getElementById("autoFillGridRows");
var autoFitGridElementRows = document.getElementById("autoFitGridRows");
if (window.internals)
window.internals.setGridMaxTracksLimit(maxTracksForTesting);
function getTracksCheckingLength(gridElement, property, length, classNames) {
for (let className of classNames)
gridElement.classList.add(className);
var propertyValue = getComputedStyle(gridElement, '').getPropertyValue(property);
for (let className of classNames)
gridElement.classList.remove(className);
if (propertyValue == "") {
assert_equals(length, 0);
return [];
}
var tracks = propertyValue.split(' ');
assert_equals(tracks.length, length);
return tracks;
}
test(function() {
var autoFillGrid = getTracksCheckingLength(autoFillGridElementCols, "grid-template-columns", maxTracksForTesting, ["wideGrid", "lotsOfFixedRepeatWithAutoFillCols"]);
var autoFitGrid = getTracksCheckingLength(autoFitGridElementCols, "grid-template-columns", maxTracksForTesting, ["wideGrid", "lotsOfFixedRepeatWithAutoFitCols"]);
assert_equals(autoFitGrid[maxTracksForTesting - 1], "10px");
assert_equals(autoFitGrid[maxTracksForTesting - 2], "0px");
assert_equals(autoFitGrid[0], "10px");
assert_equals(autoFitGrid[1], "2px");
assert_equals(autoFillGrid[maxTracksForTesting - 1], "20px");
assert_equals(autoFillGrid[maxTracksForTesting - 2], "7px");
assert_equals(autoFillGrid[0], "10px");
assert_equals(autoFillGrid[1], "2px");
}, "Test that we don't get more than kGridMaxTracks repetitions even on very wide grids (normal tracks clamped).");
test(function() {
var autoFillGrid = getTracksCheckingLength(autoFillGridElementRows, "grid-template-rows", maxTracksForTesting, ["tallGrid", "lotsOfFixedRepeatWithAutoFillRows"]);
var autoFitGrid = getTracksCheckingLength(autoFitGridElementRows, "grid-template-rows", maxTracksForTesting, ["tallGrid", "lotsOfFixedRepeatWithAutoFitRows"]);
assert_equals(autoFitGrid[maxTracksForTesting - 1], "10px");
assert_equals(autoFitGrid[maxTracksForTesting - 2], "0px");
assert_equals(autoFitGrid[0], "10px");
assert_equals(autoFitGrid[1], "2px");
assert_equals(autoFillGrid[maxTracksForTesting - 1], "20px");
assert_equals(autoFillGrid[maxTracksForTesting - 2], "7px");
assert_equals(autoFillGrid[0], "10px");
assert_equals(autoFillGrid[1], "2px");
}, "Test that we don't get more than kGridMaxTracks repetitions even on very tall grids (normal tracks clamped).");
test(function() {
var autoFillGrid = getTracksCheckingLength(autoFillGridElementCols, "grid-template-columns", maxTracksForTesting, ["wideGrid", "lotsOfFixedRepeatWithAutoFillColsReversed"]);
var autoFitGrid = getTracksCheckingLength(autoFitGridElementCols, "grid-template-columns", maxTracksForTesting, ["wideGrid", "lotsOfFixedRepeatWithAutoFitColsReversed"]);
assert_equals(autoFitGrid[maxTracksForTesting - 1], "2px");
assert_equals(autoFitGrid[maxTracksForTesting - 2], "0px");
assert_equals(autoFitGrid[0], "1px");
assert_equals(autoFitGrid[1], "1px");
assert_equals(autoFillGrid[maxTracksForTesting - 1], "20px");
assert_equals(autoFillGrid[maxTracksForTesting - 2], "7px");
assert_equals(autoFillGrid[0], "1px");
assert_equals(autoFillGrid[1], "1px");
}, "Test that we don't get more than kGridMaxTracks repetitions even on very wide grids (auto repeat tracks clamped).");
test(function() {
var autoFillGrid = getTracksCheckingLength(autoFillGridElementRows, "grid-template-rows", maxTracksForTesting, ["tallGrid", "lotsOfFixedRepeatWithAutoFillRowsReversed"]);
var autoFitGrid = getTracksCheckingLength(autoFitGridElementRows, "grid-template-rows", maxTracksForTesting, ["tallGrid", "lotsOfFixedRepeatWithAutoFitRowsReversed"]);
assert_equals(autoFitGrid[maxTracksForTesting - 1], "2px");
assert_equals(autoFitGrid[maxTracksForTesting - 2], "0px");
assert_equals(autoFitGrid[0], "1px");
assert_equals(autoFitGrid[1], "1px");
assert_equals(autoFillGrid[maxTracksForTesting - 1], "20px");
assert_equals(autoFillGrid[maxTracksForTesting - 2], "7px");
assert_equals(autoFillGrid[0], "1px");
assert_equals(autoFillGrid[1], "1px");
}, "Test that we don't get more than kGridMaxTracks repetitions even on very tall grids (auto repeat tracks clamped).");
test(function() {
autoFillGridElementCols.style.gridGap = "100px";
autoFitGridElementCols.style.gridGap = "100px";
var autoFillGrid = getTracksCheckingLength(autoFillGridElementCols, "grid-template-columns", maxTracksForTesting, ["wideGrid", "lotsOfAutoRepeatWithAutoFillCols"]);
var autoFitGrid = getTracksCheckingLength(autoFitGridElementCols, "grid-template-columns", maxTracksForTesting, ["wideGrid", "lotsOfAutoRepeatWithAutoFitCols"]);
assert_equals(autoFitGrid[maxTracksForTesting - 1], "10px");
assert_equals(autoFitGrid[maxTracksForTesting - 2], "0px");
assert_equals(autoFillGrid[maxTracksForTesting - 1], "20px");
assert_equals(autoFillGrid[maxTracksForTesting - 2], "7px");
autoFillGridElementCols.style.gridGap = "1000000px";
autoFitGridElementCols.style.gridGap = "1000000px";
getTracksCheckingLength(autoFillGridElementCols, "grid-template-columns", 30, ["wideGrid", "lotsOfAutoRepeatWithAutoFillCols"]);
getTracksCheckingLength(autoFitGridElementCols, "grid-template-columns", 34, ["wideGrid", "lotsOfAutoRepeatWithAutoFitCols"]);
autoFillGridElementCols.style.gridGap = "0px";
autoFitGridElementCols.style.gridGap = "0px";
}, "Test that we don't get more than kGridMaxTracks repetitions even on very wide grids with gaps.");
test(function() {
autoFillGridElementRows.style.gridGap = "100px";
autoFitGridElementRows.style.gridGap = "100px";
var autoFillGrid = getTracksCheckingLength(autoFillGridElementRows, "grid-template-rows", maxTracksForTesting, ["tallGrid", "lotsOfAutoRepeatWithAutoFillRows"]);
var autoFitGrid = getTracksCheckingLength(autoFitGridElementRows, "grid-template-rows", maxTracksForTesting, ["tallGrid", "lotsOfAutoRepeatWithAutoFitRows"]);
assert_equals(autoFitGrid[maxTracksForTesting - 1], "10px");
assert_equals(autoFitGrid[maxTracksForTesting - 2], "0px");
assert_equals(autoFillGrid[maxTracksForTesting - 1], "20px");
assert_equals(autoFillGrid[maxTracksForTesting - 2], "7px");
autoFillGridElementRows.style.gridGap = "1000000px";
autoFitGridElementRows.style.gridGap = "1000000px";
getTracksCheckingLength(autoFillGridElementRows, "grid-template-rows", 30, ["tallGrid", "lotsOfAutoRepeatWithAutoFillRows"]);
getTracksCheckingLength(autoFitGridElementRows, "grid-template-rows", 34, ["tallGrid", "lotsOfAutoRepeatWithAutoFitRows"]);
autoFillGridElementRows.style.gridGap = "0px";
autoFitGridElementRows.style.gridGap = "0px";
}, "Test that we don't get more than kGridMaxTracks repetitions even on very tall grids with gaps.");
test(function() {
var autoFillCols = getTracksCheckingLength(autoFillGridElementCols, "grid-template-columns", maxTracksForTesting, ["lotsOfAutoRepeatWithAutoFillCols", "minSizeWideGrid", "min-content"]);
var autoFitCols = getTracksCheckingLength(autoFitGridElementCols, "grid-template-columns", maxTracksForTesting, ["lotsOfAutoRepeatWithAutoFitCols", "minSizeWideGrid", "min-content"]);
// Check that clamping auto repetitions does not reduce the amount of the other tracks.
assert_equals(autoFillCols[maxTracksForTesting - 1], "20px");
assert_equals(autoFillCols[maxTracksForTesting - 2], "7px");
assert_equals(autoFitCols[maxTracksForTesting - 1], "10px");
assert_equals(autoFitCols[maxTracksForTesting - 2], "0px");
}, "Test that we don't get more than kGridMaxTracks repetitions even on very wide grids with gaps and min-width.");
test(function() {
var autoFillRows = getTracksCheckingLength(autoFillGridElementRows, "grid-template-rows", maxTracksForTesting, ["lotsOfAutoRepeatWithAutoFillRows", "minSizeTallGrid", "min-content"]);
var autoFitRows = getTracksCheckingLength(autoFitGridElementRows, "grid-template-rows", maxTracksForTesting, ["lotsOfAutoRepeatWithAutoFitRows", "minSizeTallGrid", "min-content"]);
assert_equals(autoFillRows[maxTracksForTesting - 1], "20px");
assert_equals(autoFillRows[maxTracksForTesting - 2], "7px");
assert_equals(autoFitRows[maxTracksForTesting - 1], "10px");
assert_equals(autoFitRows[maxTracksForTesting - 2], "0px");
}, "Test that we don't get more than kGridMaxTracks repetitions even on very tall grids with gaps and min-height.");
test(function() {
var autoFillRows = getTracksCheckingLength(autoFillGridElementRows, "grid-template-rows", maxTracksForTesting, ["height25k", "autoFillRows25px"]);
var autoFitRows = getTracksCheckingLength(autoFitGridElementRows, "grid-template-rows", maxTracksForTesting, ["height25k", "autoFitRows25px"]);
assert_equals(autoFillRows[maxTracksForTesting - 1], "8px");
assert_equals(autoFillRows[maxTracksForTesting - 2], "17px");
assert_equals(autoFitRows[maxTracksForTesting - 1], "5px");
assert_equals(autoFitRows[maxTracksForTesting - 2], "0px");
}, "Test that we don't crash when there are exactly kGridMaxTracks auto repeat rows on very tall grids.");
test(function() {
var autoFillCols = getTracksCheckingLength(autoFillGridElementCols, "grid-template-columns", maxTracksForTesting, ["width25k", "autoFillCols25px"]);
var autoFitCols = getTracksCheckingLength(autoFitGridElementCols, "grid-template-columns", maxTracksForTesting, ["width25k", "autoFitCols25px"]);
assert_equals(autoFillCols[maxTracksForTesting - 1], "23px");
assert_equals(autoFillCols[maxTracksForTesting - 2], "2px");
assert_equals(autoFitCols[maxTracksForTesting - 1], "5px");
assert_equals(autoFitCols[maxTracksForTesting - 2], "0px");
}, "Test that we don't crash when there are exactly kGridMaxTracks auto repeat columns on very wide grids.");
test(function() {
var autoFillRows = getTracksCheckingLength(autoFillGridElementRows, "grid-template-rows", maxTracksForTesting, ["height25k", "autoFillRows205pxFixed5px"]);
var autoFitRows = getTracksCheckingLength(autoFitGridElementRows, "grid-template-rows", maxTracksForTesting, ["height25k", "autoFitRows205pxFixed5px"]);
assert_equals(autoFillRows[maxTracksForTesting - 1], "5px");
assert_equals(autoFillRows[maxTracksForTesting - 2], "200px");
assert_equals(autoFitRows[maxTracksForTesting - 1], "72px");
assert_equals(autoFitRows[maxTracksForTesting - 2], "0px");
}, "Test that we don't crash when there are exactly kGridMaxTracks (normal and auto-repeat) rows on very tall grids.");
test(function() {
var autoFillCols = getTracksCheckingLength(autoFillGridElementCols, "grid-template-columns", maxTracksForTesting, ["width25k", "autoFillCols205pxFixed5px"]);
var autoFitCols = getTracksCheckingLength(autoFitGridElementCols, "grid-template-columns", maxTracksForTesting, ["width25k", "autoFitCols205pxFixed5px"]);
assert_equals(autoFillCols[maxTracksForTesting - 1], "5px");
assert_equals(autoFillCols[maxTracksForTesting - 2], "200px");
assert_equals(autoFitCols[maxTracksForTesting - 1], "72px");
assert_equals(autoFitCols[maxTracksForTesting - 2], "0px");
}, "Test that we don't crash when there are exactly kGridMaxTracks (normal and auto-repeat) columns on very wide grids.");
test(function() {
var autoFillGrid = getTracksCheckingLength(autoFillGridElementRows, "grid-template-rows", maxTracksForTesting, ["height25k", "autoFillAndAThousandFixedRows"]);
var autoFitGrid = getTracksCheckingLength(autoFitGridElementRows, "grid-template-rows", maxTracksForTesting, ["height25k", "autoFitAndAThousandFixedRows"]);
assert_equals(autoFillGrid[maxTracksForTesting - 1], "37px");
assert_equals(autoFillGrid[0], "2px");
assert_equals(autoFitGrid[maxTracksForTesting - 1], "37px");
assert_equals(autoFitGrid[0], "20px");
}, "Test that we don't crash when there are exactly kGridMaxTracks non auto-repeat rows on very tall grids.");
test(function() {
var autoFillGrid = getTracksCheckingLength(autoFillGridElementCols, "grid-template-columns", maxTracksForTesting, ["width25k", "autoFillAndAThousandFixedCols"]);
var autoFitGrid = getTracksCheckingLength(autoFitGridElementCols, "grid-template-columns", maxTracksForTesting, ["width25k", "autoFitAndAThousandFixedCols"]);
assert_equals(autoFillGrid[maxTracksForTesting - 1], "37px");
assert_equals(autoFillGrid[0], "2px");
assert_equals(autoFitGrid[maxTracksForTesting - 1], "37px");
assert_equals(autoFitGrid[0], "20px");
}, "Test that we don't crash when there are exactly kGridMaxTracks non auto-repeat columns on very wide grids.");
test(function() {
var autoFillGrid = getTracksCheckingLength(autoFillGridElementRows, "grid-template-rows", maxTracksForTesting, ["tallGrid", "autoFillAndAThousandFixedRows"]);
var autoFitGrid = getTracksCheckingLength(autoFitGridElementRows, "grid-template-rows", maxTracksForTesting, ["tallGrid", "autoFitAndAThousandFixedRows"]);
assert_equals(autoFillGrid[maxTracksForTesting - 1], "2px");
assert_equals(autoFillGrid[0], "2px");
assert_equals(autoFitGrid[maxTracksForTesting - 1], "20px");
assert_equals(autoFitGrid[0], "20px");
}, "Test that we don't crash when there are exactly kGridMaxTracks non auto-repeat rows on very tall grids with enough room for auto repetitions.");
test(function() {
var autoFillGrid = getTracksCheckingLength(autoFillGridElementCols, "grid-template-columns", maxTracksForTesting, ["wideGrid", "autoFillAndAThousandFixedCols"]);
var autoFitGrid = getTracksCheckingLength(autoFitGridElementCols, "grid-template-columns", maxTracksForTesting, ["wideGrid", "autoFitAndAThousandFixedCols"]);
assert_equals(autoFillGrid[maxTracksForTesting - 1], "2px");
assert_equals(autoFillGrid[0], "2px");
assert_equals(autoFitGrid[maxTracksForTesting - 1], "20px");
assert_equals(autoFitGrid[0], "20px");
}, "Test that we don't crash when there are exactly kGridMaxTracks non auto-repeat columns on very wide grids with enough room for auto repetitions.");
test(function() {
var autoFillGrid = getTracksCheckingLength(autoFillGridElementRows, "grid-template-rows", maxTracksForTesting, ["height25k", "autoFillAndMoreThanThousandFixedRows"]);
var autoFitGrid = getTracksCheckingLength(autoFitGridElementRows, "grid-template-rows", maxTracksForTesting, ["height25k", "autoFitAndMoreThanThousandFixedRows"]);
assert_equals(autoFillGrid[maxTracksForTesting - 1], "72px");
assert_equals(autoFillGrid[0], "7px");
assert_equals(autoFitGrid[maxTracksForTesting - 1], "125px");
assert_equals(autoFitGrid[0], "7px");
}, "Test that we don't crash when there are more than kGridMaxTracks non auto-repeat rows on very tall grids.");
test(function() {
var autoFillGrid = getTracksCheckingLength(autoFillGridElementCols, "grid-template-columns", maxTracksForTesting, ["width25k", "autoFillAndMoreThanThousandFixedCols"]);
var autoFitGrid = getTracksCheckingLength(autoFitGridElementCols, "grid-template-columns", maxTracksForTesting, ["width25k", "autoFitAndMoreThanThousandFixedCols"]);
assert_equals(autoFillGrid[maxTracksForTesting - 1], "72px");
assert_equals(autoFillGrid[0], "7px");
assert_equals(autoFitGrid[maxTracksForTesting - 1], "125px");
assert_equals(autoFitGrid[0], "7px");
}, "Test that we don't crash when there are more than kGridMaxTracks non auto-repeat columns on very wide grids.");
</script>