mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 20:47:45 +00:00
LibWeb: Position abspos items inside grid relative to their grid area
Since grid item's containing block is not grid container but corresponding grid area, it affect positioning of abspos items.
This commit is contained in:
parent
44001d2178
commit
141f56accc
3 changed files with 91 additions and 2 deletions
|
@ -0,0 +1,11 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (1,1) content-size 798x120 [BFC] children: not-inline
|
||||
BlockContainer <body> at (10,10) content-size 780x102 children: not-inline
|
||||
Box <div.grid> at (11,11) content-size 200x100 positioned [GFC] children: not-inline
|
||||
BlockContainer <div.abspos-item> at (112,12) content-size 50x50 positioned [BFC] children: not-inline
|
||||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x122]
|
||||
PaintableWithLines (BlockContainer<BODY>) [9,9 782x104]
|
||||
PaintableBox (Box<DIV>.grid) [10,10 202x102]
|
||||
PaintableWithLines (BlockContainer<DIV>.abspos-item) [111,11 52x52]
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html><style>
|
||||
* {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 100px 100px;
|
||||
grid-template-areas: "a b";
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.abspos-item {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
grid-area: b;
|
||||
}
|
||||
</style><div class="grid"><div class="abspos-item"></div></div>
|
Loading…
Add table
Add a link
Reference in a new issue