1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 17:57: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,9 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x166 children: not-inline
BlockContainer <body> at (8,8) content-size 784x150 children: not-inline
TableWrapper <(anonymous)> at (8,8) content-size 200x150 children: not-inline
TableBox <div.table> at (8,8) content-size 200x150 children: not-inline
TableRowBox <div.row.a> at (8,8) content-size 200x50 children: not-inline
TableCellBox <div.cell> at (8,8) content-size 200x0 children: not-inline
TableRowBox <div.row.b> at (8,58) content-size 200x100 children: not-inline
TableCellBox <div.cell> at (8,58) content-size 200x0 children: not-inline

View file

@ -0,0 +1,9 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x316 children: not-inline
BlockContainer <body> at (8,8) content-size 784x300 children: not-inline
TableWrapper <(anonymous)> at (8,8) content-size 200x300 children: not-inline
TableBox <div.table> at (8,8) content-size 200x300 children: not-inline
TableRowBox <div.row.a> at (8,8) content-size 200x150 children: not-inline
TableCellBox <div.cell> at (8,8) content-size 200x0 children: not-inline
TableRowBox <div.row.b> at (8,158) content-size 200x150 children: not-inline
TableCellBox <div.cell> at (8,158) content-size 200x0 children: not-inline

View file

@ -0,0 +1,17 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x316 children: not-inline
BlockContainer <body> at (8,8) content-size 784x300 children: not-inline
TableWrapper <(anonymous)> at (8,8) content-size 200x300 children: not-inline
TableBox <div.table> at (8,8) content-size 200x300 children: not-inline
TableRowBox <div.row.a> at (8,8) content-size 200x150 children: not-inline
TableCellBox <div.cell> at (8,8) content-size 200x17.46875 children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [8,8 9.34375x17.46875]
"a"
TextNode <#text>
TableRowBox <div.row.b> at (8,158) content-size 200x150 children: not-inline
TableCellBox <div.cell> at (8,158) content-size 200x17.46875 children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [8,158 9.46875x17.46875]
"b"
TextNode <#text>

View file

@ -0,0 +1,17 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x316 children: not-inline
BlockContainer <body> at (8,8) content-size 784x300 children: not-inline
TableWrapper <(anonymous)> at (8,8) content-size 200x300 children: not-inline
TableBox <div.table> at (8,8) content-size 200x300 children: not-inline
TableRowBox <div.row.a> at (8,8) content-size 200x100 children: not-inline
TableCellBox <div.cell> at (8,8) content-size 200x17.46875 children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [8,8 9.34375x17.46875]
"a"
TextNode <#text>
TableRowBox <div.row.b> at (8,108) content-size 200x200 children: not-inline
TableCellBox <div.cell> at (8,108) content-size 200x17.46875 children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [8,108 9.46875x17.46875]
"b"
TextNode <#text>

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>