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
Andreas Kling
parent
9fd51a59ff
commit
d9f0c2a806
10 changed files with 320 additions and 12 deletions
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue