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

LibWeb: Account for absolutely positioned table wrappers

Browse source 
Table wrappers don't quite behave the same as most elements, in that
their computed height and width are not meant to be used for layout.
Instead, we now calculate suitable widths and heights based on the
contents of the table wrapper when performing absolute layout.

Fixes the layout of
http://wpt.live/css/css-position/position-absolute-center-007.html
This commit is contained in:
implicitfield 2024-03-04 22:11:04 +04:00 • committed by Andreas Kling
parent 096ddb0021
commit 0243278587
6 changed files with 333 additions and 188 deletions
Download patch file Download diff file Expand all files Collapse all files

52
Tests/LibWeb/Layout/input/table/absolute-positioning-alignment.html Normal file
View file

@ -0,0 +1,52 @@
<!DOCTYPE html>
<style>
* {
margin: 5px;
padding: 0;
border: 3px solid black;
}
.container {
display: flex;
position: relative;
width: 500px;
height: 500px;
}
.table {
display: table;
position: absolute;
background: green;
margin: auto;
}
.right {
top: 0;
bottom: 0;
right: 0;
width: 100px;
height: 150px;
}
.left {
top: 0;
bottom: 0;
width: 100px;
height: 150px;
}
.top {
left: 0;
right: 0;
width: 150px;
height: 100px;
}
.bottom {
bottom: 0;
left: 0;
right: 0;
width: 150px;
height: 100px;
}
</style>
<div class=container>
<div class="table left"></div>
<div class="table right"></div>
<div class="table top"></div>
<div class="table bottom"></div>
</div>