RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-06-01 10:38:13 +00:00
Code Issues Activity Actions

LibWeb: Add support for align-items and align-self in CSS grid

Browse source
This commit is contained in:
Christophe Naud-Dulude 2023-07-27 13:18:32 -04:00 • committed by Andreas Kling
parent dfbc2839b4
commit 11b844ce20
6 changed files with 167 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

12
Tests/LibWeb/Layout/input/grid/align-items.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html><style>
* { border: 1px solid black; }
.grid { display: grid; grid-template-columns: auto auto; padding: 20px; }
.start { align-items: start; }
.center { align-items: center; }
.end { align-items: end; }
.item-padding { padding: 10px;}
</style>
<body>
<div class="grid start"><div>Start1</div><div class="item-padding">Start2</div></div>
<div class="grid center"><div>Center1</div><div class="item-padding">Center2</div></div>
<div class="grid end"><div>End1</div><div class="item-padding">End2</div></div>

12
Tests/LibWeb/Layout/input/grid/align-self.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html><style>
* { border: 1px solid black; }
.grid { display: grid; grid-template-columns: auto auto; padding: 20px; }
.start { align-self: start; }
.center { align-self: center; }
.end { align-self: end; }
.item-padding { padding: 10px;}
</style>
<body>
<div class="grid"><div class="start">Start1</div><div class="item-padding">Start2</div></div>
<div class="grid"><div class="center">Center1</div><div class="item-padding">Center2</div></div>
<div class="grid"><div class="end">End1</div><div class="item-padding">End2</div></div>