889 lines
26 KiB
HTML
889 lines
26 KiB
HTML
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
|
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
|
|
|
<!-- vim:sw=2:et:ts=2:tw=72:
|
|
-->
|
|
<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN"
|
|
"http://www.w3.org/TR/html4/loose.dtd">
|
|
<html lang="en-US">
|
|
<head>
|
|
<title>Table Reflow Tech Talk, 2002-08-05</title>
|
|
<style type="text/css">
|
|
|
|
html, body {
|
|
height: 100%;
|
|
overflow: visible;
|
|
}
|
|
|
|
body {
|
|
font-size: 1.4em;
|
|
font-family: Verdana, Arial, Helvetica, sans-serif;
|
|
font-weight: bold;
|
|
background: white;
|
|
color: black;
|
|
}
|
|
|
|
h1, h2, p {
|
|
margin: 0;
|
|
}
|
|
|
|
h1 {
|
|
font: inherit;
|
|
font-size: 1.5em;
|
|
/* text-align: center; */
|
|
margin-bottom: 0.8em;
|
|
border-bottom: 0.1em solid #006;
|
|
color: #006;
|
|
}
|
|
|
|
h2 {
|
|
font: inherit;
|
|
font-size: 1.2em;
|
|
text-align: left;
|
|
margin: 0.15em 0;
|
|
}
|
|
|
|
ul {
|
|
padding: 0 0 0 1.4em;
|
|
margin: 0;
|
|
}
|
|
|
|
li { margin: 0;
|
|
margin-top: 0.5em;
|
|
padding: 0;
|
|
font-size: 1.0em;}
|
|
|
|
div.slide {
|
|
position: relative;
|
|
min-height: 100%;
|
|
}
|
|
|
|
div.nav {
|
|
/*
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 4px;
|
|
*/
|
|
float: right;
|
|
margin: 4px;
|
|
}
|
|
|
|
div.nav :link, div.nav :visited, div.nav span {
|
|
text-decoration: none;
|
|
background: #006;
|
|
color: white;
|
|
padding: 0 0.4em 0.2em 0.4em;
|
|
line-height: 1.4em;
|
|
}
|
|
|
|
div.nav :link:hover, div.nav :visited:hover {
|
|
background: #00f;
|
|
}
|
|
|
|
table {
|
|
margin: auto;
|
|
}
|
|
|
|
table.box {
|
|
border-collapse: collapse;
|
|
border: 2px solid black;
|
|
box-sizing: border-box;
|
|
width:98%;
|
|
height:96%;
|
|
}
|
|
|
|
row {
|
|
border: 2px solid black;
|
|
}
|
|
row.title {
|
|
border: hidden;
|
|
}
|
|
|
|
table td {
|
|
/*text-align: center;*/
|
|
empty-cells: hide;
|
|
}
|
|
|
|
table td.box {
|
|
height:100%;
|
|
border: 2px solid black;
|
|
}
|
|
|
|
table td.title {
|
|
border-top: hidden;
|
|
border-right: hidden;
|
|
border-left: hidden;
|
|
font-size: .5em;
|
|
}
|
|
|
|
table td.title2 {
|
|
border-bottom: hidden;
|
|
border-right: hidden;
|
|
border-left: hidden;
|
|
font-size: .5em;
|
|
}
|
|
|
|
table.tree tr:not(.arrows) td {
|
|
font-family: monospace;
|
|
border: 0.1em solid;
|
|
font-size: .7em;
|
|
text-align:center;
|
|
}
|
|
|
|
table td.left-arrow {
|
|
text-align: right;
|
|
}
|
|
|
|
table td.right-arrow {
|
|
text-align: left;
|
|
}
|
|
|
|
table td.center-arrow {
|
|
text-align: center;
|
|
}
|
|
|
|
span.html {
|
|
color:purple;
|
|
}
|
|
|
|
table td.space {
|
|
width: 5%;
|
|
}
|
|
|
|
table td.frame {
|
|
width: 22%;
|
|
}
|
|
|
|
span.comment {
|
|
color: red;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="slide" id="s0">
|
|
<div class="nav">
|
|
<a href="#s28"><</a>
|
|
<a href="#s1">></a>
|
|
</div>
|
|
<table style="margin: auto"><tr><td>
|
|
<center>
|
|
<h1>Table Reflow Internals<br>Tech Talk</h1>
|
|
<p>Aug 5, 2002</p>
|
|
<p style="margin-top: 0.5em">Chris Karnaze</a></p>
|
|
</center>
|
|
</td></tr></table>
|
|
|
|
</div>
|
|
|
|
<div class="slide" id="s1">
|
|
<div class="nav">
|
|
<a href="#s0"><</a>
|
|
<a href="#s2">></a>
|
|
</div>
|
|
<h1>Overview</h1>
|
|
<ul>
|
|
<li>Review of reflow</li>
|
|
<li>Table frames</li>
|
|
<li>Table reflow</li>
|
|
<li>Intro to paginated reflow</li>
|
|
<li>Table paginated reflow</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="slide" id="s2">
|
|
<div class="nav">
|
|
<a href="#s1"><</a>
|
|
<a href="#s3">></a>
|
|
</div>
|
|
<h1>Review of Reflow</h1>
|
|
<ul>
|
|
<li>Reflow process starts when
|
|
<ul>
|
|
<li>An html document starts loading (the frame tree contains only viewport, scroll(s), canvas, html, body).</li>
|
|
<li>The initial chunk of an xml doc is loaded.</li>
|
|
<li>The initial chunk of an html doc (or a subsequent chunk of an xml doc) is loaded. The container posts a
|
|
dirty reflow command with itself as the target. </li>
|
|
<li>Content is inserted, appended, or deleted through the DOM. The container posts a dirty reflow command
|
|
with itself as the target.</li>
|
|
<li>Style changes through the DOM - javascript, browser change font (CTRL+/-), a preference changes, etc.</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="slide" id="s3">
|
|
<div class="nav">
|
|
<a href="#s2"><</a>
|
|
<a href="#s4">></a>
|
|
</div>
|
|
<h1>Review of Reflow</h1>
|
|
<ul>
|
|
<li>Reflow starts with pres shell
|
|
<ul>
|
|
<li>Which reflows the reflow root (usually the view port frame),</li>
|
|
<li>Which reflows it children, etc.</li>
|
|
</ul>
|
|
</li>
|
|
<li>Ususally it starts when the pres shell processes its queue of reflow commands.</li>
|
|
<li>The reflower
|
|
<ul>
|
|
<li>Positions reflowee (if it can) before actually reflowing in case views are involved
|
|
(e.g. absolutely positioned elements) </li>
|
|
<li>Reflows reflowee and passes a reflow state (in) and a reflow metrics (in/out)</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="slide" id="s4">
|
|
<div class="nav">
|
|
<a href="#s3"><</a>
|
|
<a href="#s5">></a>
|
|
</div>
|
|
<h1>Review of Reflow</h1>
|
|
<ul>
|
|
<li>The reflow state:
|
|
<ul>
|
|
<li>Is a node in a tree structurally equivalent to the frame tree of reflow participants</li>
|
|
<li>contains:
|
|
<ul>
|
|
<li>reflow type,</li>
|
|
<li>avail size,</li>
|
|
<li>various computed values,</li>
|
|
<li>resolved style structs</li>
|
|
<li>possible request for preferred size and more.</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="slide" id="s5">
|
|
<div class="nav">
|
|
<a href="#s4"><</a>
|
|
<a href="#s6">></a>
|
|
</div>
|
|
<h1>Review of Reflow</h1>
|
|
<ul>
|
|
</li>
|
|
<li>the reflow metrics contains:
|
|
<ul class=nested>
|
|
<li>max element size (if requested) - the minimum size it can be</li>
|
|
<li>preferred size (if requested) - the size it would like to be given no size constraints.</li>
|
|
<li>desired size - the size it would like to be given the avail size. This
|
|
is equivalent to preferred size if the avail size is not constrained.</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="slide" id="s6">
|
|
<div class="nav">
|
|
<a href="#s5"><</a>
|
|
<a href="#s7">></a>
|
|
</div>
|
|
<h1>Review of Reflow</h1>
|
|
<ul>
|
|
<li>The reflowee sets various sizes in the reflow metrics after (possibly) reflowing some or all of its children
|
|
which reflows it children, etc.</li>
|
|
<li>The reflowee returns a reflow status which indicates
|
|
<ul class=nested>
|
|
<li>if it is complete, and thus not have to continue (split)</li>
|
|
<li>breaking status (in the case of some inline frames)</li>
|
|
<li>if there is truncation (it can't fit in the space and can't split). This is just a convience mechanism.</li>
|
|
</ul>
|
|
</li>
|
|
|
|
</div>
|
|
|
|
<div class="slide" id="s7">
|
|
<div class="nav">
|
|
<a href="#s6"><</a>
|
|
<a href="#s8">></a>
|
|
</div>
|
|
|
|
<h1>Kinds of reflows</h1>
|
|
<ul>
|
|
<li>Initial - reflowee's first reflow must be of this type (reflower's responsibility).</li>
|
|
<li>Resize - reflowee gets a change in available space only. Similar to initial, except it can reoccur.</li>
|
|
<li>Incremental - has a reflow path (tree) where each node has a command with a target frame, <br>reflow command types are:</li>
|
|
<ul class=nested>
|
|
<li>dirty - something changed inside a target (e.g. it gains, loses children)</li>
|
|
<li>style changed - a target changed stylisticly (recall, size is a style property)</li>
|
|
<li>content changed - a target's content changed (e.g. a text run)</li>
|
|
<li>user defined - currently only used for fixed positioned frames </li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="slide" id="s8">
|
|
<div class="nav">
|
|
<a href="#s7"><</a>
|
|
<a href="#s9">></a>
|
|
</div>
|
|
<h1>Kinds of reflows</h1>
|
|
<ul>
|
|
<li>Incremental reflow (continued)
|
|
<ul class=nested>
|
|
<li>reflower not allowed to change available size of reflowee</li>
|
|
<li>reflow commands get coalesced to streamline processing</li>
|
|
</ul>
|
|
</li>
|
|
<li>Style change
|
|
<ul class=nested>
|
|
<li>a target changed stylistic if there is a target, otherwise every frame may need to respond</li>
|
|
<li>parent of target usually turns it into an incremental reflow with a style changed command type</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="slide" id="s9">
|
|
<div class="nav">
|
|
<a href="#s8"><</a>
|
|
<a href="#s10">></a>
|
|
</div>
|
|
<h1>Table Frames</h1>
|
|
<BR>
|
|
<table class="tree" width=90%>
|
|
<tr><td class=frame><td class=space style="width:2%"><td class=frame><td class=space style="width:2%">
|
|
<td class=frame><td class=space><td class=frame></tr>
|
|
<tr><td><td><td class=frame><td>
|
|
<td>nsTableOuter Frame<td><td></tr>
|
|
<tr class="arrows"><td><td><td><td class=left-arrow>↙<td><td class=right-arrow>↘</tr>
|
|
<tr><td><td><td>nsTable<BR>Frame<td><td><td><td>nsTableCaption<BR>Frame</tr>
|
|
<tr class="arrows"><td><td class=left-arrow>↙<td><td class=right-arrow>↘<td><td><td class=center-arrow>↓</tr>
|
|
<tr><td>nsTableCol<BR>GroupFrame<td><td><TD><td>nsTableRow<BR>GroupFrame<td><td>nsBlockFrame</tr>
|
|
<tr class="arrows"><td class=center-arrow>↓<td><td><td><td class=center-arrow>↓</tr>
|
|
<tr><td>nsTableCol<BR>Frame<td><TD><TD><td>nsTableRow<BR>Frame</tr>
|
|
<tr class="arrows"><td><td><td><td><td class=center-arrow>↓</tr>
|
|
<tr><td><td><td><TD><td>nsTableCell<BR>Frame</tr>
|
|
<tr class="arrows"><td><td><td><td><td class=center-arrow>↓</tr>
|
|
<tr><td><td><td><TD><td>nsBlock<BR>Frame</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="slide" id="s10">
|
|
<div class="nav">
|
|
<a href="#s9"><</a>
|
|
<a href="#s11">></a>
|
|
</div>
|
|
<h1>Table Reflow</h1>
|
|
<ul>
|
|
<li>table wrapper reflows table and caption (if present)</li>
|
|
<li>Table reflows row groups in multiple passes</li>
|
|
<ul class=nested>
|
|
<li>Pass 1 - unconstrained width, height and requests max elem width.</li>
|
|
<li>The table figures out the column widths (balances) given the style width constraints
|
|
on the table, col groups, cols, cells the preferred and max element sizes of the cells
|
|
(from the pass 1 reflow), and considers colspans</li>
|
|
<li>Pass 2 - cell widths are constrained by the column widths (heights are only
|
|
constrained in paginated mode).</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="slide" id="s11">
|
|
<div class="nav">
|
|
<a href="#s10"><</a>
|
|
<a href="#s12">></a>
|
|
</div>
|
|
<h1>Table Reflow</h1>
|
|
<ul>
|
|
<li>Table reflows row groups (continued)</li>
|
|
<ul class=nested>
|
|
<li>The row group figures out the row heights given the its style height constraints
|
|
its rows and cells and the actual heights of its rows and cells from the pass 2 reflow</li>
|
|
<li>If the table has a style height, it allocates extra height to its row groups, rows and cells.</li>
|
|
</ul>
|
|
</li>
|
|
<li>In each pass, row groups reflow rows which reflow cells which reflow cell blocks</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="slide" id="s12">
|
|
<div class="nav">
|
|
<a href="#s11"><</a>
|
|
<a href="#s13">></a>
|
|
</div>
|
|
<h1>Table Reflow Example</h1>
|
|
<table width=100%>
|
|
<tr>
|
|
<td width=100%>
|
|
<pre style="font-size:.6em;">
|
|
tblW 030176CC r=0 a=8940,UC c=0,0 cnt=429
|
|
tbl 030178C4 r=0 a=8940,UC c=4470,UC cnt=430
|
|
rowG 03017A7C r=0 a=UC,UC c=UC,UC cnt=431
|
|
row 03017C08 r=0 a=UC,UC c=UC,UC cnt=432
|
|
cell 03017DA8 r=0 a=UC,UC c=UC,UC cnt=433
|
|
block 03017E08 r=0 a=UC,UC c=UC,UC cnt=434
|
|
block 03017E08 d=870,300 me=480
|
|
cell 03017DA8 d=930,360 me=540
|
|
cell 0301A8CC r=0 a=UC,UC c=UC,UC cnt=436
|
|
block 0301A92C r=0 a=UC,UC c=UC,UC cnt=437
|
|
block 0301A92C d=1335,300 me=465
|
|
cell 0301A8CC d=1395,360 me=525
|
|
row 03017C08 d=UC,360
|
|
rowG 03017A7C d=UC,360
|
|
rowG 03017A7C r=2 a=4470,UC c=4470,UC cnt=442
|
|
row 03017C08 r=2 a=4470,UC c=4470,UC cnt=443
|
|
cell 03017DA8 r=2 a=1755,UC c=1695,UC cnt=444
|
|
block 03017E08 r=2 a=1695,UC c=1695,UC cnt=445
|
|
block 03017E08 d=1695,300
|
|
cell 03017DA8 d=1755,360
|
|
cell 0301A8CC r=2 a=2625,UC c=2565,UC cnt=446
|
|
block 0301A92C r=2 a=2565,UC c=2565,UC cnt=447
|
|
block 0301A92C d=2565,300
|
|
cell 0301A8CC d=2625,360
|
|
row 03017C08 d=4470,360
|
|
rowG 03017A7C d=4470,360
|
|
tbl 030178C4 d=4500,450
|
|
tblW 030176CC d=4500,450
|
|
|
|
<a href="frame_reflow_debug.html">frame reflow debugging</a> gives instructions
|
|
for turning this on.
|
|
</pre>
|
|
</td>
|
|
<td>
|
|
<pre style="font-size:.7em;">
|
|
<<span class=html>table</span> width=300>
|
|
<<span class=html>tr</span>>
|
|
<<span class=html>td</span>>foo<<span class=html>/td</span>>
|
|
<<span class=html>td</span>>bar zap<<span class=html>/td</span>>
|
|
<<span class=html>/tr</span>>
|
|
<<span class=html>/table</span>>
|
|
</pre>
|
|
<BR>
|
|
<BR>
|
|
<pre style="font-size:.7em;">
|
|
Key:
|
|
|
|
r = reflow reason,
|
|
0 (initial),
|
|
2 (resize)
|
|
a = avail w, h
|
|
c = computed w, h
|
|
d = desired w, h
|
|
me = max elem w
|
|
<pre>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="slide" id="s13">
|
|
<div class="nav">
|
|
<a href="#s12"><</a>
|
|
<a href="#s14">></a>
|
|
</div>
|
|
<h1>Table reflow optimizations</h1>
|
|
<ul>
|
|
<li>If the table is already balanced, pass 1 constrains the width (like a normal pass 2) based on the current
|
|
column widths. The pass 2 will get skipped if the table doesn't need to rebalance. <!--<span class="comment">please clarify when can this happen</span>--></li>
|
|
<li>Nested table reflowed with an unconstrained width (i.e. an ancestor is doing a pass 1 reflow)
|
|
will only do a pass 1 reflow on its children</li>
|
|
<li>table wrapper caches last avail width and avoids reflowing children if resize reflow is the same as previous</li>
|
|
<li>Table caches max element, preferred widths in case they are requested and it isn't rebalanced</li>
|
|
<li>Cell caches prior avail width. if this doesn't change, the row may not have to reflow the cell</li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<div class="slide" id="s14">
|
|
<div class="nav">
|
|
<a href="#s13"><</a>
|
|
<a href="#s15">></a>
|
|
</div>
|
|
<h1>Table incremental reflow</h1>
|
|
<ul>
|
|
<li>table wrapper is a target when a caption is added or removed (dirty) or the table or caption margin
|
|
changes (style changed).</li>
|
|
<li>Caption is a target when it changes stylistically (style changed).</li>
|
|
<li>Table, row group, row, col group, col is a target when a child is added or removed (dirty) or it changes
|
|
stylistically (style changed). <!--<span class="comment">please show how the column style change is propagated
|
|
into the cell reflows as the cells are reflowed by their parent rows and not cols</span>--></li>
|
|
<li>In the dirty cases, a target posted the reflow command in AppendFrames, InsertFrames, or DeleteFrame.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="slide" id="s15">
|
|
<div class="nav">
|
|
<a href="#s14"><</a>
|
|
<a href="#s16">></a>
|
|
</div>
|
|
<h1>Table incremental reflow</h1>
|
|
<ul>
|
|
<li>In the style change cases where a target is between the table and the cell, the table is told to rebalance.</li>
|
|
<li>When a target is the cell or below and the cell changes size, the row tells the table so it can decide if
|
|
it needs to rebalance</li>
|
|
<li>When a target is inside the cell's block, the cell
|
|
requests max element, preferred sizes of its block in case they change</li>
|
|
<li>After the table reflows the row group(s) containing the targets, if it rebalances, it then does a pass 2 reflow.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="slide" id="s16">
|
|
<div class="nav">
|
|
<a href="#s15"><</a>
|
|
<a href="#s17">></a>
|
|
</div>
|
|
<h1>Special height reflow</h1>
|
|
<ul>
|
|
<li>When there is a % height frame inside a cell without a computed height</li>
|
|
<ul class=nested>
|
|
<li>the frame will never get a chance to size based on the final cell height</li>
|
|
<li>in paginated mode when there is a height on the table, the table doesn't allocate
|
|
extra height to rows until after it does a pass 2 reflow and then it is too late</li>
|
|
</ul>
|
|
</li>
|
|
<li>This can be fixed by doing a special 3rd pass reflow</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slide" id="s17">
|
|
<div class="nav">
|
|
<a href="#s16"><</a>
|
|
<a href="#s18">></a>
|
|
</div>
|
|
<h1>Special Reflow Example</h1>
|
|
<table width=100% style="text-align:left;">
|
|
<tr>
|
|
<td>
|
|
<pre style="font-size:.7em; text-align:left;">
|
|
<<span class=html>table</span> border=2 width=300>
|
|
<<span class=html>tr</span>>
|
|
<<span class=html>td</span>>
|
|
This cell's width is
|
|
constrained by the
|
|
table and image widths.
|
|
Its exact height is
|
|
hard to determine.
|
|
<<span class=html>/td</span>>
|
|
<<span class=html>td</span>>
|
|
<<span class=html>img</span> src=raptor.jpg
|
|
width=200 height=100%>
|
|
<<span class=html>/td</span>>
|
|
<<span class=html>/tr</span>>
|
|
<<span class=html>/table</span>>
|
|
</pre>
|
|
</td>
|
|
<td>
|
|
<table border=2 width=300>
|
|
<tr>
|
|
<td style="font-size:.7em;">This cell's width is constrained
|
|
by the table and image widths. <BR><BR>Its height
|
|
is hard to determine.<BR><BR> The image needs to be as high as the cell.
|
|
<td>
|
|
<!-- need ?raw=1 for lxr to cough up the image data, not a pretty page -->
|
|
<img src="raptor.jpg?raw=1"
|
|
width=200 height=100%>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
|
|
<div class="slide" id="s18">
|
|
<div class="nav">
|
|
<a href="#s17"><</a>
|
|
<a href="#s19">></a>
|
|
</div>
|
|
<h1>Special height reflow</h1>
|
|
<ul>
|
|
<li>The reflow state holds an observer and initiator</li>
|
|
<li>Observer</li>
|
|
<ul class=nested>
|
|
<li>is the table cell used as the height basis</li>
|
|
<li>set by frame without computed height in DidReflow</li>
|
|
<li>gives its block a computed height during 3rd pass</li>
|
|
<li>doesn't change height during 3rd pass</li>
|
|
</ul>
|
|
</li>
|
|
<li>Initiator</li>
|
|
<ul class=nested>
|
|
<li>is the table containing the observer</li>
|
|
<li>starts the 3rd pass reflow and sets a bit in the reflow state</li>
|
|
<li>gives its block a computed height during 3rd pass</li>
|
|
<li>could also be inside a cell which is an observer</li>
|
|
</ul>
|
|
</li>
|
|
</div>
|
|
|
|
<div class="slide" id="s19">
|
|
<div class="nav">
|
|
<a href="#s18"><</a>
|
|
<a href="#s20">></a>
|
|
</div>
|
|
<h1>Special height reflow</h1>
|
|
<ul>
|
|
<li>Optimizations</li>
|
|
<ul class=nested>
|
|
<li>only frames needing 3rd pass actually get it</li>
|
|
<li>frames gettting a 3rd pass only get it once</li>
|
|
</ul>
|
|
</li>
|
|
</div>
|
|
|
|
<div class="slide" id="s20">
|
|
<div class="nav">
|
|
<a href="#s19"><</a>
|
|
<a href="#s21">></a>
|
|
</div>
|
|
<h1>Intro to paginated reflow</h1>
|
|
<ul>
|
|
<li>When a reflowee's available height is constrained, it may not fit and need to either
|
|
split/continue on the next page, or start on the next page.</li>
|
|
<ul class=nested>
|
|
<li>If it can continue, it returns an incomplete status.</li>
|
|
<li>If it can't continue it returns a complete status.</li>
|
|
</ul>
|
|
</li>
|
|
<li>A continuation may also need to be continued</li>
|
|
<li>Continuations are linked together by prevInFlow and nextInFlow pointers </li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="slide" id="s21">
|
|
<div class="nav">
|
|
<a href="#s20"><</a>
|
|
<a href="#s22">></a>
|
|
</div>
|
|
<h1>Pagination Illustration</h1>
|
|
<table class=box style="height:500px">
|
|
<tr><td class="title">nsSimplePageSequence</td></tr>
|
|
<tr>
|
|
<td class=box>
|
|
<table class=box style="height:40%;">
|
|
<tr><td class=title>nsPageFrame</td></tr>
|
|
<tr>
|
|
<td class=box>
|
|
<table class=box style="height:100%;">
|
|
<tr><td class=title>nsPageContentFrame</td></tr>
|
|
<tr>
|
|
<td class=box style="border-bottom: hidden">
|
|
<table class=box style="height:100%; border-bottom:hidden">
|
|
<tr><td class=title>areaFrame (html)</td></tr>
|
|
<tr>
|
|
<td class=box>
|
|
<table class=box style="height:100%; border-bottom:hidden">
|
|
<tr><td class=title>blockFrame (body)</td></tr>
|
|
<tr>
|
|
<td class=box>
|
|
<table class=box style="height:100%; border-bottom:hidden">
|
|
<tr><td class=title>nsTableWrapperFrame</td></tr>
|
|
<tr>
|
|
<td class=box></td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<BR>
|
|
<table class=box style="height:40%;">
|
|
<tr>
|
|
<td class=box>
|
|
<table class=box style="height:100%;">
|
|
<tr>
|
|
<td class=box style="border-top: hidden">
|
|
<table class=box style="height:100%; border-top:hidden">
|
|
<tr>
|
|
<td class=box>
|
|
<table class=box style="height:100%; border-top:hidden">
|
|
<tr>
|
|
<td class=box>
|
|
<table class=box style="height:100%; border-top:hidden">
|
|
<tr>
|
|
<td class=box></td>
|
|
</tr>
|
|
<tr><td class=title2>nsTableWrapperFrame</td></tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr><td class=title2>blockFrame (body)</td></tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr><td class=title2>areaFrame (html)</td></tr>
|
|
</table>
|
|
</tr>
|
|
<tr><td class=title2>nsPageContentFrame continued</td></tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr><td class=title2>nsPageFrame continued</td></tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="slide" id="s22">
|
|
<div class="nav">
|
|
<a href="#s21"><</a>
|
|
<a href="#s23">></a>
|
|
</div>
|
|
<h1>Intro to paginated reflow</h1>
|
|
<ul>
|
|
<li>The page sequence starts with one page and reflows it. If the page is incomplete then the page sequence
|
|
creates a continuation for the page and sets it as the page's next sibling (it is also the page's
|
|
nextInFlow).</li>
|
|
<li>The page was incomplete because the page content was incomplete because the doc root was incomplete</li>
|
|
<li>The doc root was incomplete because it contained lines that didn't fit (or if it was mapped to a table,
|
|
because the table didn't fit) becacause a line contained something that didn't fit, etc.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="slide" id="s23">
|
|
<div class="nav">
|
|
<a href="#s22"><</a>
|
|
<a href="#s24">></a>
|
|
</div>
|
|
<h1>Intro to paginated reflow</h1>
|
|
<ul>
|
|
<li>If the reflowee is incomplete, the reflower has the responsiblity to:
|
|
<ul>
|
|
<li>Create a continuation for the reflowee</li>
|
|
<li>Ensure that the continuation gets put in the frame hierarchy at the right place
|
|
and gets reflowed at the right time.</li>
|
|
<li>Typically, a reflower accomplishes this by putting the continuation (c) on an overflow
|
|
list which the reflower owns. When the reflower's continuation gets reflowed, it takes c
|
|
and its siblings as children and reflows them.</li>
|
|
</ul>
|
|
</li>
|
|
<li>If the reflowee is complete, truncated (it didn't fit), not at the top of page,
|
|
the reflower should put the reflowee on its overflow list and return an incomplete status.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="slide" id="s24">
|
|
<div class="nav">
|
|
<a href="#s23"><</a>
|
|
<a href="#s25">></a>
|
|
</div>
|
|
<h1>Intro to paginated reflow</h1>
|
|
<ul>
|
|
<li>Special assumptions
|
|
<ul>
|
|
<li>There are only initial and (possibly) resize reflows. Incremental
|
|
and style change reflows are not allowed.</li>
|
|
<li>Multiple resize reflows may be necessary (e.g. a child is truncated and gets reflowed on a
|
|
subsequent page) but they should not change the available width from the last time.</li>
|
|
<li>Multiple resize reflows may require special handling if a frame split previously. It may need
|
|
to "pull up" children from a continuation.</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="slide" id="s25">
|
|
<div class="nav">
|
|
<a href="#s24"><</a>
|
|
<a href="#s26">></a>
|
|
</div>
|
|
<h1>Table paginated reflow</h1>
|
|
<ul>
|
|
<li>The block containing the table wrapper reflows it. If it is incomplete, the block will
|
|
<ul>
|
|
<li>create a continuation for the table wrapper (which also creates a continuation for the table).</li>
|
|
<li>put the continuation on a new line and place that line on its overflow lines property.</li>
|
|
</ul>
|
|
</li>
|
|
<li>The table wrapper reflows the table and just returns the status of the table.</li>
|
|
<li>The table does a pass 1 reflow and balances. If it is incomplete,</li>
|
|
<ul>
|
|
<li>it will become the first-in-flow</li>
|
|
<li>it will be the only frame among its continuations to ever balance or calc the cell map, and it only
|
|
does this once</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="slide" id="s26">
|
|
<div class="nav">
|
|
<a href="#s25"><</a>
|
|
<a href="#s27">></a>
|
|
</div>
|
|
<h1>Table paginated reflow</h1>
|
|
<ul>
|
|
<li>The table does a pass 2 reflow constraining both avail heights and widths. If a row group is incomplete, the table
|
|
<ul>
|
|
<li>creates a continuation for the row group</li>
|
|
<li>puts the continuation in its overflow frames property</li>
|
|
</ul>
|
|
</li>
|
|
<li>What follows only applies during the pass 2 reflow.</li>
|
|
<li>The row group</li>
|
|
<ul>
|
|
<li>reflows all of its rows with unconstrained heights and calculates the row heights,</li>
|
|
<li>figures out which row falls on a page boundary and reflows it with a constrained height. If there
|
|
will be a pass 3 reflow then this should (bug) happen at that time instead.</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="slide" id="s27">
|
|
<div class="nav">
|
|
<a href="#s26"><</a>
|
|
<a href="#s28">></a>
|
|
</div>
|
|
<h1>Table paginated reflow</h1>
|
|
<ul>
|
|
<li>The row group (continued)</li>
|
|
<ul>
|
|
<li>creates a continuation for the incomplete row (which also creates continuations for all of its cells
|
|
and all of the cell blocks)</li>
|
|
<li>puts the continuation in its overflow frames property. If the row was truncated and not top of page,
|
|
the row is put in the overflow frames property.
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="slide" id="s28">
|
|
<div class="nav">
|
|
<a href="#s27"><</a>
|
|
<a href="#s0">></a>
|
|
</div>
|
|
<h1>Table paginated reflow</h1>
|
|
<ul>
|
|
<li>The row and cells (getting the constrained height reflow) just reflow their children with a constrained height.
|
|
They don't need an overflow list for continued children because the continuations were created when the
|
|
row group created the row's continutation.</li>
|
|
<li>A cell is incomplete because its block is incomplete. The block uses the overflow lines mechanism
|
|
(mentioned above) for its continued children</li>
|
|
</li>
|
|
<li>There are two splitting scenarios for a table
|
|
<ul>
|
|
<li>An incomplete cells block causes the cell, row, row group, table, table wrapper to
|
|
be incomplete</li>
|
|
<li>A truncated row or a row that started too far down the page causes the row group,
|
|
table, table wrapper to be incomplete.</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html>
|