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

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

30
Tests/LibWeb/Layout/input/table/rows-height-distribution-1.html Normal file
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>

30
Tests/LibWeb/Layout/input/table/rows-height-distribution-2.html Normal file
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>

29
Tests/LibWeb/Layout/input/table/rows-height-distribution-3.html Normal file
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>

31
Tests/LibWeb/Layout/input/table/rows-height-distribution-4.html Normal file
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>