mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-09-20 16:28:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Improve grid area calculation for abspos items in GFC

Browse source 
- Add support for placement of abspos items into track formed by last
  line and padding edge of grid container
- Correctly handle auto-positioned abspos items by placing them between
  padding edges of grid container

Fixes crashing on https://wpt.live/css/css-grid/abspos/positioned-grid-descendants-001.html
This commit is contained in:
Aliaksandr Kalenik 2024-10-10 23:35:44 +02:00 • committed by Andreas Kling
commit 0dec2dc21c
Notes: github-actions[bot] 2024-10-11 07:09:38 +00:00
10 changed files with 473 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

35
Tests/LibWeb/Layout/input/grid/abspos-placed-into-augmented-row-and-column.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<style>
.grid-container {
display: grid;
grid-template-columns: 50px 100px;
grid-template-rows: 50px 100px;
position: relative;
background-color: #ccc;
padding: 50px;
gap: 20px;
width: fit-content;
}
.grid-item {
background-color: #4caf50;
}
.abspos-box {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
width: 100%;
height: 100%;
background-color: red;
grid-row: 3;
grid-column: 3;
}
</style>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="abspos-box"></div>
</div>

34
Tests/LibWeb/Layout/input/grid/abspos-with-auto-column-placed-in-augmented-row.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<style>
.grid-container {
display: grid;
grid-template-columns: 50px 100px;
grid-template-rows: 50px 100px;
position: relative;
background-color: #ccc;
padding: 50px;
gap: 20px;
width: fit-content;
}
.grid-item {
background-color: #4caf50;
}
.abspos-box {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
width: 100%;
height: 100%;
background-color: red;
grid-row: 3;
}
</style>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="abspos-box"></div>
</div>

33
Tests/LibWeb/Layout/input/grid/abspos-with-auto-row-and-column-contained-by-grid.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<style>
.grid-container {
display: grid;
grid-template-columns: 50px 100px;
grid-template-rows: 50px 100px;
position: relative;
background-color: #ccc;
padding: 50px;
gap: 20px;
width: fit-content;
}
.grid-item {
background-color: #4caf50;
}
.abspos-box {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
width: 100%;
height: 100%;
background-color: red;
}
</style>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="abspos-box"></div>
</div>

34
Tests/LibWeb/Layout/input/grid/abspos-with-auto-row-placed-in-augmented-column.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<style>
.grid-container {
display: grid;
grid-template-columns: 50px 100px;
grid-template-rows: 50px 100px;
position: relative;
background-color: #ccc;
padding: 50px;
gap: 20px;
width: fit-content;
}
.grid-item {
background-color: #4caf50;
}
.abspos-box {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
width: 100%;
height: 100%;
background-color: red;
grid-column: 3;
}
</style>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="abspos-box"></div>
</div>