1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
// 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<br />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");
});
}
|
