[css-grid] Properly handle static positions of abspos inside grid items
Currently they are aligned to zero instead of to their static position
if an explicit offset is provided for the opposite axis.
Various orthogonal tests fail without LayoutNG because of
http://crbug.com/883574
Spec: https://drafts.csswg.org/css-grid/#abspos
BUG=828628
TEST=external/wpt/css/css-grid/abspos/positioned-grid-descendants-001.html
TEST=external/wpt/css/css-grid/abspos/positioned-grid-descendants-002.html
TEST=external/wpt/css/css-grid/abspos/positioned-grid-descendants-003.html
TEST=external/wpt/css/css-grid/abspos/positioned-grid-descendants-004.html
TEST=external/wpt/css/css-grid/abspos/positioned-grid-descendants-005.html
TEST=external/wpt/css/css-grid/abspos/positioned-grid-descendants-006.html
TEST=external/wpt/css/css-grid/abspos/positioned-grid-descendants-007.html
TEST=external/wpt/css/css-grid/abspos/positioned-grid-descendants-008.html
TEST=external/wpt/css/css-grid/abspos/positioned-grid-descendants-009.html
TEST=external/wpt/css/css-grid/abspos/positioned-grid-descendants-010.html
TEST=external/wpt/css/css-grid/abspos/positioned-grid-descendants-011.html
TEST=external/wpt/css/css-grid/abspos/positioned-grid-descendants-012.html
TEST=external/wpt/css/css-grid/abspos/positioned-grid-descendants-013.html
TEST=external/wpt/css/css-grid/abspos/positioned-grid-descendants-014.html
TEST=external/wpt/css/css-grid/abspos/positioned-grid-descendants-015.html
TEST=external/wpt/css/css-grid/abspos/positioned-grid-descendants-016.html
TEST=external/wpt/css/css-grid/abspos/orthogonal-positioned-grid-descendants-001.html
TEST=external/wpt/css/css-grid/abspos/orthogonal-positioned-grid-descendants-002.html
TEST=external/wpt/css/css-grid/abspos/orthogonal-positioned-grid-descendants-003.html
TEST=external/wpt/css/css-grid/abspos/orthogonal-positioned-grid-descendants-004.html
TEST=external/wpt/css/css-grid/abspos/orthogonal-positioned-grid-descendants-005.html
TEST=external/wpt/css/css-grid/abspos/orthogonal-positioned-grid-descendants-006.html
TEST=external/wpt/css/css-grid/abspos/orthogonal-positioned-grid-descendants-007.html
TEST=external/wpt/css/css-grid/abspos/orthogonal-positioned-grid-descendants-008.html
TEST=external/wpt/css/css-grid/abspos/orthogonal-positioned-grid-descendants-009.html
TEST=external/wpt/css/css-grid/abspos/orthogonal-positioned-grid-descendants-010.html
TEST=external/wpt/css/css-grid/abspos/orthogonal-positioned-grid-descendants-011.html
TEST=external/wpt/css/css-grid/abspos/orthogonal-positioned-grid-descendants-012.html
TEST=external/wpt/css/css-grid/abspos/orthogonal-positioned-grid-descendants-013.html
TEST=external/wpt/css/css-grid/abspos/orthogonal-positioned-grid-descendants-014.html
TEST=external/wpt/css/css-grid/abspos/orthogonal-positioned-grid-descendants-015.html
TEST=external/wpt/css/css-grid/abspos/orthogonal-positioned-grid-descendants-016.html
Change-Id: If52ee6148862587c7f2fe3453e6b863b859324ee
Reviewed-on: https://chromium-review.googlesource.com/c/1415294
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Reviewed-by: Javier Fernandez <jfernandez@igalia.com>
Cr-Commit-Position: refs/heads/master@{#624586}
diff --git a/css/css-grid/abspos/orthogonal-positioned-grid-descendants-001.html b/css/css-grid/abspos/orthogonal-positioned-grid-descendants-001.html
new file mode 100644
index 0000000..856b801
--- /dev/null
+++ b/css/css-grid/abspos/orthogonal-positioned-grid-descendants-001.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have a static position (left/rigth and top/bottom are 'auto').">
+
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+ left: "auto",
+ top: "auto",
+ right: "auto",
+ bottom: "auto",
+ orthogonal: true,
+});
+</script>
+</body>
diff --git a/css/css-grid/abspos/orthogonal-positioned-grid-descendants-002.html b/css/css-grid/abspos/orthogonal-positioned-grid-descendants-002.html
new file mode 100644
index 0000000..4a039c9
--- /dev/null
+++ b/css/css-grid/abspos/orthogonal-positioned-grid-descendants-002.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have a specific 'left' offset and a static block position (top/bottom are 'auto').">
+
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+ left: 25,
+ top: "auto",
+ right: "auto",
+ bottom: "auto",
+ orthogonal: true,
+});
+</script>
+</body>
diff --git a/css/css-grid/abspos/orthogonal-positioned-grid-descendants-003.html b/css/css-grid/abspos/orthogonal-positioned-grid-descendants-003.html
new file mode 100644
index 0000000..6482248
--- /dev/null
+++ b/css/css-grid/abspos/orthogonal-positioned-grid-descendants-003.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have a specific 'top' offset and a static inline position (left/right are 'auto').">
+
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+ left: "auto",
+ top: 30,
+ right: "auto",
+ bottom: "auto",
+ orthogonal: true,
+});
+</script>
+</body>
diff --git a/css/css-grid/abspos/orthogonal-positioned-grid-descendants-004.html b/css/css-grid/abspos/orthogonal-positioned-grid-descendants-004.html
new file mode 100644
index 0000000..054892b
--- /dev/null
+++ b/css/css-grid/abspos/orthogonal-positioned-grid-descendants-004.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'right' offset and a static block position (top/bottom are 'auto').">
+
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+ left: "auto",
+ top: "auto",
+ right: 35,
+ bottom: "auto",
+ orthogonal: true,
+});
+</script>
+</body>
diff --git a/css/css-grid/abspos/orthogonal-positioned-grid-descendants-005.html b/css/css-grid/abspos/orthogonal-positioned-grid-descendants-005.html
new file mode 100644
index 0000000..41ff194
--- /dev/null
+++ b/css/css-grid/abspos/orthogonal-positioned-grid-descendants-005.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'bottom' offset and a static inline position (left/right are 'auto').">
+
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+ left: "auto",
+ right: "auto",
+ top: "auto",
+ bottom: 40,
+ orthogonal: true,
+});
+</script>
+</body>
diff --git a/css/css-grid/abspos/orthogonal-positioned-grid-descendants-006.html b/css/css-grid/abspos/orthogonal-positioned-grid-descendants-006.html
new file mode 100644
index 0000000..c6772bef2
--- /dev/null
+++ b/css/css-grid/abspos/orthogonal-positioned-grid-descendants-006.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'left' and 'top' offsets.">
+
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+ left: 25,
+ top: 30,
+ right: "auto",
+ bottom: "auto",
+ orthogonal: true,
+});
+</script>
+</body>
diff --git a/css/css-grid/abspos/orthogonal-positioned-grid-descendants-007.html b/css/css-grid/abspos/orthogonal-positioned-grid-descendants-007.html
new file mode 100644
index 0000000..9785187
--- /dev/null
+++ b/css/css-grid/abspos/orthogonal-positioned-grid-descendants-007.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'left' and 'right' offsets and a static block position (top/bottom are 'auto').">
+
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+ left: 25,
+ top: "auto",
+ right: 35,
+ bottom: "auto",
+ orthogonal: true,
+});
+</script>
+</body>
diff --git a/css/css-grid/abspos/orthogonal-positioned-grid-descendants-008.html b/css/css-grid/abspos/orthogonal-positioned-grid-descendants-008.html
new file mode 100644
index 0000000..965e87d
--- /dev/null
+++ b/css/css-grid/abspos/orthogonal-positioned-grid-descendants-008.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'left' and 'bottom' offsets.">
+
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+ left: 25,
+ top: "auto",
+ right: "auto",
+ bottom: 40,
+ orthogonal: true,
+});
+</script>
+</body>
diff --git a/css/css-grid/abspos/orthogonal-positioned-grid-descendants-009.html b/css/css-grid/abspos/orthogonal-positioned-grid-descendants-009.html
new file mode 100644
index 0000000..beb259a
--- /dev/null
+++ b/css/css-grid/abspos/orthogonal-positioned-grid-descendants-009.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'top' and 'right' offsets.">
+
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+ left: "auto",
+ top: 30,
+ right: 35,
+ bottom: "auto",
+ orthogonal: true,
+});
+</script>
+</body>
diff --git a/css/css-grid/abspos/orthogonal-positioned-grid-descendants-010.html b/css/css-grid/abspos/orthogonal-positioned-grid-descendants-010.html
new file mode 100644
index 0000000..f94bcca
--- /dev/null
+++ b/css/css-grid/abspos/orthogonal-positioned-grid-descendants-010.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'top' and 'bottom' offsets and a static inline position (left/right are 'auto').">
+
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+ left: "auto",
+ top: 30,
+ right: "auto",
+ bottom: 40,
+ orthogonal: true,
+});
+</script>
+</body>
diff --git a/css/css-grid/abspos/orthogonal-positioned-grid-descendants-011.html b/css/css-grid/abspos/orthogonal-positioned-grid-descendants-011.html
new file mode 100644
index 0000000..bcab0b9
--- /dev/null
+++ b/css/css-grid/abspos/orthogonal-positioned-grid-descendants-011.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'right' and 'bottom' offsets.">
+
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+ left: "auto",
+ top: "auto",
+ right: 35,
+ bottom: 40,
+ orthogonal: true,
+});
+</script>
+</body>
diff --git a/css/css-grid/abspos/orthogonal-positioned-grid-descendants-012.html b/css/css-grid/abspos/orthogonal-positioned-grid-descendants-012.html
new file mode 100644
index 0000000..1ac153a
--- /dev/null
+++ b/css/css-grid/abspos/orthogonal-positioned-grid-descendants-012.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'left', 'top' and 'right' offsets.">
+
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+ left: 25,
+ top: 30,
+ right: 35,
+ bottom: "auto",
+ orthogonal: true,
+});
+</script>
+</body>
diff --git a/css/css-grid/abspos/orthogonal-positioned-grid-descendants-013.html b/css/css-grid/abspos/orthogonal-positioned-grid-descendants-013.html
new file mode 100644
index 0000000..99400e6
--- /dev/null
+++ b/css/css-grid/abspos/orthogonal-positioned-grid-descendants-013.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'left', 'top' and 'bottom' offsets.">
+
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+ left: 25,
+ top: 30,
+ right: "auto",
+ bottom: 40,
+ orthogonal: true,
+});
+</script>
+</body>
diff --git a/css/css-grid/abspos/orthogonal-positioned-grid-descendants-014.html b/css/css-grid/abspos/orthogonal-positioned-grid-descendants-014.html
new file mode 100644
index 0000000..a9c5408
--- /dev/null
+++ b/css/css-grid/abspos/orthogonal-positioned-grid-descendants-014.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'left', 'right' and 'bottom' offsets.">
+
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+ left: 25,
+ top: "auto",
+ right: 35,
+ bottom: 40,
+ orthogonal: true,
+});
+</script>
+</body>
diff --git a/css/css-grid/abspos/orthogonal-positioned-grid-descendants-015.html b/css/css-grid/abspos/orthogonal-positioned-grid-descendants-015.html
new file mode 100644
index 0000000..d75664d
--- /dev/null
+++ b/css/css-grid/abspos/orthogonal-positioned-grid-descendants-015.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'top', 'right' and 'bottom' offsets.">
+
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+ left: "auto",
+ top: 30,
+ right: 35,
+ bottom: 40,
+ orthogonal: true,
+});
+</script>
+</body>
diff --git a/css/css-grid/abspos/orthogonal-positioned-grid-descendants-016.html b/css/css-grid/abspos/orthogonal-positioned-grid-descendants-016.html
new file mode 100644
index 0000000..a2ce6b9
--- /dev/null
+++ b/css/css-grid/abspos/orthogonal-positioned-grid-descendants-016.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'left, 'top', 'right' and 'bottom' offsets.">
+
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+ left: 25,
+ top: 30,
+ right: 35,
+ bottom: 40,
+ orthogonal: true,
+});
+</script>
+</body>
diff --git a/css/css-grid/abspos/positioned-grid-descendants-001.html b/css/css-grid/abspos/positioned-grid-descendants-001.html
new file mode 100644
index 0000000..fddb5d8
--- /dev/null
+++ b/css/css-grid/abspos/positioned-grid-descendants-001.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have a static position (left/rigth and top/bottom are 'auto').">
+
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+ left: "auto",
+ top: "auto",
+ right: "auto",
+ bottom: "auto",
+});
+</script>
+</body>
diff --git a/css/css-grid/abspos/positioned-grid-descendants-002.html b/css/css-grid/abspos/positioned-grid-descendants-002.html
new file mode 100644
index 0000000..987bd46
--- /dev/null
+++ b/css/css-grid/abspos/positioned-grid-descendants-002.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have a specific 'left' offset and a static block position (top/bottom are 'auto').">
+
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+ left: 25,
+ top: "auto",
+ right: "auto",
+ bottom: "auto",
+});
+</script>
+</body>
diff --git a/css/css-grid/abspos/positioned-grid-descendants-003.html b/css/css-grid/abspos/positioned-grid-descendants-003.html
new file mode 100644
index 0000000..ca36539
--- /dev/null
+++ b/css/css-grid/abspos/positioned-grid-descendants-003.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have a specific 'top' offset and a static inline position (left/right are 'auto').">
+
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+ left: "auto",
+ top: 30,
+ right: "auto",
+ bottom: "auto",
+});
+</script>
+</body>
diff --git a/css/css-grid/abspos/positioned-grid-descendants-004.html b/css/css-grid/abspos/positioned-grid-descendants-004.html
new file mode 100644
index 0000000..1710781
--- /dev/null
+++ b/css/css-grid/abspos/positioned-grid-descendants-004.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'right' offset and a static block position (top/bottom are 'auto').">
+
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+ left: "auto",
+ top: "auto",
+ right: 35,
+ bottom: "auto",
+});
+</script>
+</body>
diff --git a/css/css-grid/abspos/positioned-grid-descendants-005.html b/css/css-grid/abspos/positioned-grid-descendants-005.html
new file mode 100644
index 0000000..00d1299
--- /dev/null
+++ b/css/css-grid/abspos/positioned-grid-descendants-005.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'bottom' offset and a static inline position (left/right are 'auto').">
+
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+ left: "auto",
+ right: "auto",
+ top: "auto",
+ bottom: 40,
+});
+</script>
+</body>
diff --git a/css/css-grid/abspos/positioned-grid-descendants-006.html b/css/css-grid/abspos/positioned-grid-descendants-006.html
new file mode 100644
index 0000000..6c856cc
--- /dev/null
+++ b/css/css-grid/abspos/positioned-grid-descendants-006.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'left' and 'top' offsets.">
+
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+ left: 25,
+ top: 30,
+ right: "auto",
+ bottom: "auto",
+});
+</script>
+</body>
diff --git a/css/css-grid/abspos/positioned-grid-descendants-007.html b/css/css-grid/abspos/positioned-grid-descendants-007.html
new file mode 100644
index 0000000..97c489c
--- /dev/null
+++ b/css/css-grid/abspos/positioned-grid-descendants-007.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'left' and 'right' offsets and a static block position (top/bottom are 'auto').">
+
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+ left: 25,
+ top: "auto",
+ right: 35,
+ bottom: "auto",
+});
+</script>
+</body>
diff --git a/css/css-grid/abspos/positioned-grid-descendants-008.html b/css/css-grid/abspos/positioned-grid-descendants-008.html
new file mode 100644
index 0000000..3abcd7b
--- /dev/null
+++ b/css/css-grid/abspos/positioned-grid-descendants-008.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'left' and 'bottom' offsets.">
+
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+ left: 25,
+ top: "auto",
+ right: "auto",
+ bottom: 40,
+});
+</script>
+</body>
diff --git a/css/css-grid/abspos/positioned-grid-descendants-009.html b/css/css-grid/abspos/positioned-grid-descendants-009.html
new file mode 100644
index 0000000..09fb58e
--- /dev/null
+++ b/css/css-grid/abspos/positioned-grid-descendants-009.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'top' and 'right' offsets.">
+
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+ left: "auto",
+ top: 30,
+ right: 35,
+ bottom: "auto",
+});
+</script>
+</body>
diff --git a/css/css-grid/abspos/positioned-grid-descendants-010.html b/css/css-grid/abspos/positioned-grid-descendants-010.html
new file mode 100644
index 0000000..04cd3e9
--- /dev/null
+++ b/css/css-grid/abspos/positioned-grid-descendants-010.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'top' and 'bottom' offsets and a static inline position (left/right are 'auto').">
+
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+ left: "auto",
+ top: 30,
+ right: "auto",
+ bottom: 40,
+});
+</script>
+</body>
diff --git a/css/css-grid/abspos/positioned-grid-descendants-011.html b/css/css-grid/abspos/positioned-grid-descendants-011.html
new file mode 100644
index 0000000..e7274e5
--- /dev/null
+++ b/css/css-grid/abspos/positioned-grid-descendants-011.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'right' and 'bottom' offsets.">
+
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+ left: "auto",
+ top: "auto",
+ right: 35,
+ bottom: 40,
+});
+</script>
+</body>
diff --git a/css/css-grid/abspos/positioned-grid-descendants-012.html b/css/css-grid/abspos/positioned-grid-descendants-012.html
new file mode 100644
index 0000000..45e6a12
--- /dev/null
+++ b/css/css-grid/abspos/positioned-grid-descendants-012.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'left', 'top' and 'right' offsets.">
+
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+ left: 25,
+ top: 30,
+ right: 35,
+ bottom: "auto",
+});
+</script>
+</body>
diff --git a/css/css-grid/abspos/positioned-grid-descendants-013.html b/css/css-grid/abspos/positioned-grid-descendants-013.html
new file mode 100644
index 0000000..29e83c3
--- /dev/null
+++ b/css/css-grid/abspos/positioned-grid-descendants-013.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'left', 'top' and 'bottom' offsets.">
+
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+ left: 25,
+ top: 30,
+ right: "auto",
+ bottom: 40,
+});
+</script>
+</body>
diff --git a/css/css-grid/abspos/positioned-grid-descendants-014.html b/css/css-grid/abspos/positioned-grid-descendants-014.html
new file mode 100644
index 0000000..567b309
--- /dev/null
+++ b/css/css-grid/abspos/positioned-grid-descendants-014.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'left', 'right' and 'bottom' offsets.">
+
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+ left: 25,
+ top: "auto",
+ right: 35,
+ bottom: 40,
+});
+</script>
+</body>
diff --git a/css/css-grid/abspos/positioned-grid-descendants-015.html b/css/css-grid/abspos/positioned-grid-descendants-015.html
new file mode 100644
index 0000000..c3c5d41
--- /dev/null
+++ b/css/css-grid/abspos/positioned-grid-descendants-015.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'top', 'right' and 'bottom' offsets.">
+
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+ left: "auto",
+ top: 30,
+ right: 35,
+ bottom: 40,
+});
+</script>
+</body>
diff --git a/css/css-grid/abspos/positioned-grid-descendants-016.html b/css/css-grid/abspos/positioned-grid-descendants-016.html
new file mode 100644
index 0000000..dfa34eb
--- /dev/null
+++ b/css/css-grid/abspos/positioned-grid-descendants-016.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'left, 'top', 'right' and 'bottom' offsets.">
+
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+ left: 25,
+ top: 30,
+ right: 35,
+ bottom: 40,
+});
+</script>
+</body>
diff --git a/css/css-grid/abspos/support/positioned-grid-descendants.css b/css/css-grid/abspos/support/positioned-grid-descendants.css
new file mode 100644
index 0000000..9fa29a2
--- /dev/null
+++ b/css/css-grid/abspos/support/positioned-grid-descendants.css
@@ -0,0 +1,25 @@
+.grid {
+ display: grid;
+ grid: 150px 100px / 200px 300px;
+ margin: 1px 2px 3px 4px;
+ padding: 20px 15px 10px 5px;
+ border-width: 9px 3px 12px 6px;
+ border-style: solid;
+ width: 550px;
+ height: 400px;
+ position: relative;
+ font: 25px/1 Ahem;
+}
+.abspos {
+ position: absolute;
+ display: inline;
+}
+.orthogonal {
+ writing-mode: vertical-lr;
+}
+.grid > :nth-child(1) > .abspos {
+ color: cyan;
+}
+.grid > :nth-child(2) > .abspos {
+ color: yellow;
+}
diff --git a/css/css-grid/abspos/support/positioned-grid-descendants.js b/css/css-grid/abspos/support/positioned-grid-descendants.js
new file mode 100644
index 0000000..d8fc60b
--- /dev/null
+++ b/css/css-grid/abspos/support/positioned-grid-descendants.js
@@ -0,0 +1,70 @@
+// 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);
+ }
+ checkLayout(".grid");
+}
