RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 13:27:35 +00:00
Code Issues Activity Actions

LibWeb: Support alignment of abspos grid items

Browse source 
Grid items should respect alignment properties if top/right/bottom/left
are not specified.

This change adds a separate implementation of
layout_absolutely_positioned_element that is extended with support for
alignment.
This commit is contained in:
Aliaksandr Kalenik 2023-10-21 07:38:52 +02:00 • committed by Andreas Kling
parent 2def1de4be
commit 719b12b19d
4 changed files with 120 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

11
Tests/LibWeb/Layout/expected/grid/abspos-item-aligned-center.txt Normal file
View file

@ -0,0 +1,11 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x220 [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 780x202 children: not-inline
Box <div.container> at (11,11) content-size 200x200 positioned [GFC] children: not-inline
BlockContainer <div.box> at (61,61) content-size 100x100 positioned [BFC] children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x222]
PaintableWithLines (BlockContainer<BODY>) [9,9 782x204]
PaintableBox (Box<DIV>.container) [10,10 202x202]
PaintableWithLines (BlockContainer<DIV>.box) [60,60 102x102]

19
Tests/LibWeb/Layout/input/grid/abspos-item-aligned-center.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html><style type="text/css">
* {
border: 1px solid black;
}
.container {
position: relative;
display: grid;
place-items: center;
height: 200px;
width: 200px;
}
.box {
position: absolute;
height: 100px;
width: 100px;
}
</style><div class="container"><div class="box"></div></div>