mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 19:07:34 +00:00
LibWeb: Account for margin and padding of justified abspos flex items
This commit is contained in:
parent
3888a91c5b
commit
54d8e58a68
3 changed files with 49 additions and 2 deletions
16
Tests/LibWeb/Layout/expected/abspos-flex-margin-limits-2.txt
Normal file
16
Tests/LibWeb/Layout/expected/abspos-flex-margin-limits-2.txt
Normal file
|
@ -0,0 +1,16 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x16 [BFC] children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x0 children: inline
|
||||
Box <div.container> at (8,8) content-size 100x100 positioned flex-container(row) [FFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.top-right> at (48,18) content-size 50x50 positioned [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x16]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,8 784x0]
|
||||
PaintableBox (Box<DIV>.container) [8,8 100x100]
|
||||
PaintableWithLines (BlockContainer<DIV>.top-right) [38,8 70x70]
|
23
Tests/LibWeb/Layout/input/abspos-flex-margin-limits-2.html
Normal file
23
Tests/LibWeb/Layout/input/abspos-flex-margin-limits-2.html
Normal file
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
}
|
||||
.top-right {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-left: 500px;
|
||||
background: green;
|
||||
border: 5px solid black;
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="top-right"></div>
|
||||
</div>
|
Loading…
Add table
Add a link
Reference in a new issue