Fix fixed position descendant

Signed-off-by: stevennovaryo <[email protected]>
web-platform-tests · Jan 20, 2025 · 74a5026 · 74a5026
1 parent 8183f0f
commit 74a5026
Show file tree

Hide file tree

Showing 4 changed files with 168 additions and 70 deletions.
diff --git a/css/css-grid/grid-items/grid-items-relative-positioned-absolute-child.html b/css/css-grid/grid-items/grid-items-relative-positioned-absolute-child.html
diff --git a/css/css-grid/grid-items/grid-items-relative-positioned-containing-block.html b/css/css-grid/grid-items/grid-items-relative-positioned-containing-block.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Relative Positioned Grid Items as a Containing Block of Absolute positioned descendant</title>
+<link rel="author" title="Jo Steven Novaryo" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.csswg.org/css-position-3/#absolute-cb">
+<link rel="help" href="https://drafts.csswg.org/css-position-3/#fixed-cb">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-items">
+<link rel="help" href="https://github.com/servo/servo/issues/34535">
+<link rel="match" href="../reference/grid-items-relative-positioned-containing-block-ref.html">
+<meta name="assert" content="Ensures that relative positioned grid item established as a containing block correctly.">
+<style>
+    .grid {
+        display: grid;
+        width: 100%;
+        height: 60px;
+        grid-template-columns: 50px;
+        grid-template-rows: 50px;
+    }
+    .container {
+        position: relative;
+        grid-area: 1 / 1;
+    }
+    .box1 {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        grid-area: 1 / 1;
+    }
+    .box-abspos {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+    }
+    .box-fixpos {
+        position: fixed;
+        width: 50px;
+        height: 50px;
+    }
+    .red {
+        background: red;
+    }
+    .green {
+        background: green;
+    }
+</style>
+<p>Test passes if there are several identical green squares and no red area.</p>
+
+<p>Relative positioned grid item with <strong>absolute</strong> positioned descendant.</p>
+
+<div class="grid">
+    <div class="container">
+        <div class="box-abspos red"></div>
+    </div>
+    <div class="box1 green"></div>
+</div>
+
+<div class="grid">
+    <div class="container">
+        <div>
+            <span>
+                <div class="box-abspos red"></div>
+            </span>
+        </div>
+    </div>
+    <div class="box1 green"></div>
+</div>
+
+
+<div class="grid">
+    <div class="box1 red"></div>
+    <div class="container">
+        <div class="box-abspos green"></div>
+    </div>
+</div>
+
+<p>Relative positioned grid item with <strong>fixed</strong> positioned descendant.</p>
+
+<div class="grid">
+    <div class="container">
+        <div class="box-fixpos red"></div>
+    </div>
+    <div class="box1 green"></div>
+</div>
+
+<div class="grid">
+    <div class="container">
+        <div>
+            <span>
+                <div class="box-fixpos red"></div>
+            </span>
+        </div>
+    </div>
+    <div class="box1 green"></div>
+</div>
+
+<p>Relative positioned grid item with <strong>absolute</strong> and <strong>fixed</strong> positioned descendant.</p>
+
+<div class="grid">
+    <div class="container">
+        <div class="box-fixpos red"></div>
+        <div class="box-abspos red"></div>
+    </div>
+    <div class="box1 green"></div>
+</div>
diff --git a/css/css-grid/reference/grid-items-relative-positioned-absolute-child-ref.html b/css/css-grid/reference/grid-items-relative-positioned-absolute-child-ref.html
diff --git a/css/css-grid/reference/grid-items-relative-positioned-containing-block-ref.html b/css/css-grid/reference/grid-items-relative-positioned-containing-block-ref.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Relative Positioned Grid Items as a Containing Block of Absolute positioned descendant</title>
+<link rel="author" title="Jo Steven Novaryo" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.csswg.org/css-position-3/#absolute-cb">
+<link rel="help" href="https://drafts.csswg.org/css-position-3/#fixed-cb">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-items">
+<link rel="help" href="https://github.com/servo/servo/issues/34535">
+<meta name="assert" content="Ensures that relative positioned grid item established as a containing block correctly.">
+<style>
+    .grid {
+        display: grid;
+        width: 100%;
+        height: 60px;
+        grid-template-columns: 50px;
+        grid-template-rows: 50px;
+    }
+    .container {
+        position: relative;
+    }
+    .box1 {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        grid-area: 1 / 1;
+    }
+    .red {
+        background: red;
+    }
+    .green {
+        background: green;
+    }
+</style>
+<p>Test passes if there are several identical green squares and no red area.</p>
+
+<p>Relative positioned grid item with <strong>absolute</strong> positioned descendant.</p>
+
+<div class="grid">
+    <div class="box1 green"></div>
+</div>
+
+<div class="grid">
+    <div class="box1 green"></div>
+</div>
+
+<div class="grid">
+    <div class="box1 green"></div>
+</div>
+
+<p>Relative positioned grid item with <strong>fixed</strong> positioned descendant.</p>
+
+<div class="grid">
+    <div class="box1 green"></div>
+</div>
+
+<div class="grid">
+    <div class="box1 green"></div>
+</div>
+
+<p>Relative positioned grid item with <strong>absolute</strong> and <strong>fixed</strong> positioned descendant.</p>
+
+<div class="grid">
+    <div class="box1 green"></div>
+</div>