// Track sizes, including preceding padding and following remaining space const colSizes = [5, 200, 300, 65]; const rowSizes = [20, 150, 100, 160]; // Calculate track positions const colOffsets = [0]; const rowOffsets = [0]; for (const size of colSizes) colOffsets.push(size + colOffsets[colOffsets.length - 1]); for (const size of rowSizes) rowOffsets.push(size + rowOffsets[rowOffsets.length - 1]); export function runTests({left, top, right, bottom, orthogonal = false}) { // Iterate all pairs of grid lines, where 0 and 4 represent "auto". for (let colStart = 0; colStart < 4; ++colStart) for (let colEnd = colStart + 1; colEnd <= 4; ++colEnd) for (let rowStart = 0; rowStart < 4; ++rowStart) for (let rowEnd = rowStart + 1; rowEnd <= 4; ++rowEnd) { // Create a 2x2 grid with two grid items, each one containing an abspos. const grid = document.createElement("div"); grid.className = "grid"; for (let i = 1; i <= 2; ++i) { // Create a grid item with some content before the abspos, so that the static // position is shifted 50px to the right and 25px to the bottom. const gridItem = document.createElement("div"); gridItem.style.gridArea = `${i} / ${i}`; grid.appendChild(gridItem); gridItem.innerHTML = "X
XX"; // Create an abspos with content of 50px inline size, 25px block size. const absPos = document.createElement("div"); gridItem.appendChild(absPos); absPos.className = "abspos"; absPos.textContent = "XX"; if (orthogonal) absPos.classList.add("orthogonal"); // Let the containing block be the grid area, and set offsets. Object.assign(absPos.style, { gridColumnStart: colStart || "auto", gridColumnEnd: colEnd % 4 || "auto", gridRowStart: rowStart || "auto", gridRowEnd: rowEnd % 4 || "auto", left: left == "auto" ? left : left + "px", top: top == "auto" ? top : top + "px", right: right == "auto" ? right : right + "px", bottom: bottom == "auto" ? bottom : bottom + "px", }); // Calculate expected position and size. const expectedWidth = left == "auto" || right == "auto" ? 25 * (orthogonal ? 1 : 2) : Math.max(0, colOffsets[colEnd] - colOffsets[colStart] - left - right); const expectedHeight = top == "auto" || bottom == "auto" ? 25 * (orthogonal ? 2 : 1) : Math.max(0, rowOffsets[rowEnd] - rowOffsets[rowStart] - top - bottom); const offsetX = left != "auto" ? colOffsets[colStart] + left : right != "auto" ? colOffsets[colEnd] - right - expectedWidth : colOffsets[i] + 25*2; const offsetY = top != "auto" ? rowOffsets[rowStart] + top : bottom != "auto" ? rowOffsets[rowEnd] - bottom - expectedHeight : rowOffsets[i] + 25; Object.assign(absPos.dataset, {expectedWidth, expectedHeight, offsetX, offsetY}); } document.body.appendChild(grid); } document.fonts.ready.then(() => { checkLayout(".grid"); }); }