mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-07-16 05:51:55 +00:00
0243278587
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
52 lines
962 B
HTML
52 lines
962 B
HTML
<!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>
|