1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 02:17:35 +00:00

LibWeb: Implement "distribute height to rows" step in TFC

This commit implements following missing steps in table layout:
- Calculate final table height
- Resolve percentage height of cells and rows using final table height
- Distribute avilable height to table rows
This commit is contained in:
Aliaksandr Kalenik 2023-04-29 00:43:05 +03:00 committed by Andreas Kling
parent 9fd51a59ff
commit d9f0c2a806
10 changed files with 320 additions and 12 deletions

View file

@ -0,0 +1,30 @@
<style>
* {
font-family: 'SerenitySans';
}
.table {
display: table;
width: 200px;
background-color: darkgoldenrod;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
.a {
height: 50px;
background-color: darkcyan;
}
.b {
height: 100px;
background-color: orangered;
}
</style>
<div class="table"><div class="row a"><div class="cell"></div></div><div class="row b"><div class="cell"></div></div></div>

View file

@ -0,0 +1,30 @@
<style>
* {
font-family: 'SerenitySans';
}
.table {
display: table;
width: 200px;
height: 300px;
background-color: darkgoldenrod;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
.a {
height: 50%;
background-color: darkcyan;
}
.b {
background-color: orangered;
}
</style>
<div class="table"><div class="row a"><div class="cell"></div></div><div class="row b"><div class="cell"></div></div></div>

View file

@ -0,0 +1,29 @@
<style>
* {
font-family: 'SerenitySans';
}
.table {
display: table;
width: 200px;
height: 300px;
background-color: darkgoldenrod;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
.a {
background-color: darkcyan;
}
.b {
background-color: orangered;
}
</style>
<div class="table"><div class="row a"><div class="cell">a</div></div><div class="row b"><div class="cell">b</div></div></div>

View file

@ -0,0 +1,31 @@
<style>
* {
font-family: 'SerenitySans';
}
.table {
display: table;
width: 200px;
height: 300px;
background-color: darkgoldenrod;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
.a {
background-color: darkcyan;
height: 50px;
}
.b {
background-color: orangered;
height: 50%;
}
</style>
<div class="table"><div class="row a"><div class="cell">a</div></div><div class="row b"><div class="cell">b</div></div></div>