diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-grid/abspos/support/positioned-grid-descendants.js | |
parent | Initial commit. (diff) | |
download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-grid/abspos/support/positioned-grid-descendants.js')
-rw-r--r-- | testing/web-platform/tests/css/css-grid/abspos/support/positioned-grid-descendants.js | 73 |
1 files changed, 73 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/abspos/support/positioned-grid-descendants.js b/testing/web-platform/tests/css/css-grid/abspos/support/positioned-grid-descendants.js new file mode 100644 index 0000000000..d45df4bc22 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/support/positioned-grid-descendants.js @@ -0,0 +1,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"); + }); +} |