positioned-grid-descendants.js (3053B)
1 // Track sizes, including preceding padding and following remaining space 2 const colSizes = [5, 200, 300, 65]; 3 const rowSizes = [20, 150, 100, 160]; 4 5 // Calculate track positions 6 const colOffsets = [0]; 7 const rowOffsets = [0]; 8 for (const size of colSizes) 9 colOffsets.push(size + colOffsets[colOffsets.length - 1]); 10 for (const size of rowSizes) 11 rowOffsets.push(size + rowOffsets[rowOffsets.length - 1]); 12 13 export function runTests({left, top, right, bottom, orthogonal = false}) { 14 // Iterate all pairs of grid lines, where 0 and 4 represent "auto". 15 for (let colStart = 0; colStart < 4; ++colStart) 16 for (let colEnd = colStart + 1; colEnd <= 4; ++colEnd) 17 for (let rowStart = 0; rowStart < 4; ++rowStart) 18 for (let rowEnd = rowStart + 1; rowEnd <= 4; ++rowEnd) 19 { 20 // Create a 2x2 grid with two grid items, each one containing an abspos. 21 const grid = document.createElement("div"); 22 grid.className = "grid"; 23 for (let i = 1; i <= 2; ++i) { 24 // Create a grid item with some content before the abspos, so that the static 25 // position is shifted 50px to the right and 25px to the bottom. 26 const gridItem = document.createElement("div"); 27 gridItem.style.gridArea = `${i} / ${i}`; 28 grid.appendChild(gridItem); 29 gridItem.innerHTML = "X<br />XX"; 30 31 // Create an abspos with content of 50px inline size, 25px block size. 32 const absPos = document.createElement("div"); 33 gridItem.appendChild(absPos); 34 absPos.className = "abspos"; 35 absPos.textContent = "XX"; 36 if (orthogonal) absPos.classList.add("orthogonal"); 37 38 // Let the containing block be the grid area, and set offsets. 39 Object.assign(absPos.style, { 40 gridColumnStart: colStart || "auto", 41 gridColumnEnd: colEnd % 4 || "auto", 42 gridRowStart: rowStart || "auto", 43 gridRowEnd: rowEnd % 4 || "auto", 44 left: left == "auto" ? left : left + "px", 45 top: top == "auto" ? top : top + "px", 46 right: right == "auto" ? right : right + "px", 47 bottom: bottom == "auto" ? bottom : bottom + "px", 48 }); 49 50 // Calculate expected position and size. 51 const expectedWidth = 52 left == "auto" || right == "auto" ? 25 * (orthogonal ? 1 : 2) : 53 Math.max(0, colOffsets[colEnd] - colOffsets[colStart] - left - right); 54 const expectedHeight = 55 top == "auto" || bottom == "auto" ? 25 * (orthogonal ? 2 : 1) : 56 Math.max(0, rowOffsets[rowEnd] - rowOffsets[rowStart] - top - bottom); 57 const offsetX = 58 left != "auto" ? colOffsets[colStart] + left : 59 right != "auto" ? colOffsets[colEnd] - right - expectedWidth : 60 colOffsets[i] + 25*2; 61 const offsetY = 62 top != "auto" ? rowOffsets[rowStart] + top : 63 bottom != "auto" ? rowOffsets[rowEnd] - bottom - expectedHeight : 64 rowOffsets[i] + 25; 65 Object.assign(absPos.dataset, {expectedWidth, expectedHeight, offsetX, offsetY}); 66 } 67 document.body.appendChild(grid); 68 } 69 70 document.fonts.ready.then(() => { 71 checkLayout(".grid"); 72 }); 73 }