mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-07-24 09:52:31 +00:00
0dec2dc21c
- 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
34 lines
700 B
HTML
34 lines
700 B
HTML
<!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>
|