Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

layout: Fix relative positioned grid item #50117

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

layout: Fix relative positioned grid item #50117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3508d8f
Add WPT tests
stevennovaryo Jan 20, 2025
3bd8256
Add WPT tests
stevennovaryo Jan 20, 2025
bb20d7d
Fix fixed position descendant
stevennovaryo Jan 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 104 additions & 0 deletions css/css-grid/grid-items/grid-items-relative-positioned-containing-block.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
64 changes: 64 additions & 0 deletions css/css-grid/reference/grid-items-relative-positioned-containing-block-ref.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Loading