pjs/layout/doc/table_reflow_slides.html

884 строки
26 KiB
HTML
Исходник Обычный вид История

2002-08-04 05:37:25 +04:00
<!-- 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;
}
2002-08-04 10:05:25 +04:00
table {
2002-08-04 05:37:25 +04:00
margin: auto;
}
2002-08-04 10:05:25 +04:00
table.box {
border-collapse: collapse;
border: 2px solid black;
-moz-box-sizing: border-box;
width:98%;
height:96%;
}
row {
border: 2px solid black;
}
row.title {
border: hidden;
}
table td {
2002-08-05 04:26:59 +04:00
/*text-align: center;*/
2002-08-04 05:37:25 +04:00
empty-cells: hide;
}
2002-08-04 10:05:25 +04:00
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;
}
2002-08-04 05:37:25 +04:00
table.tree tr:not(.arrows) td {
font-family: monospace;
border: 0.1em solid;
2002-08-05 04:26:59 +04:00
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;
2002-08-04 05:37:25 +04:00
}
2002-08-04 10:05:25 +04:00
span.html {
color:purple;
}
2002-08-05 04:26:59 +04:00
table td.space {
width: 5%;
}
table td.frame {
width: 22%;
}
2002-08-05 21:37:49 +04:00
span.comment {
color: red;
}
2002-08-04 05:37:25 +04:00
</style>
</head>
<body>
<div class="slide" id="s0">
<div class="nav">
2002-08-05 04:26:59 +04:00
<a href="#s28">&lt;</a>
2002-08-04 05:37:25 +04:00
<a href="#s1">&gt;</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">&lt;</a>
<a href="#s2">&gt;</a>
</div>
<h1>Overview</h1>
<ul>
<li>Review of reflow</li>
<li>Table frames</li>
<li>Table reflow</li>
2002-08-04 10:05:25 +04:00
<li>Intro to paginated reflow</li>
<li>Table paginated reflow</li>
2002-08-04 05:37:25 +04:00
</ul>
</div>
<div class="slide" id="s2">
<div class="nav">
<a href="#s1">&lt;</a>
<a href="#s3">&gt;</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">&lt;</a>
<a href="#s4">&gt;</a>
</div>
<h1>Review of Reflow</h1>
<ul>
2002-08-05 21:37:49 +04:00
<li>Reflow starts with pres shell
2002-08-05 04:26:59 +04:00
<ul>
2002-08-05 21:37:49 +04:00
<li>Which reflows the reflow root (usually the view port frame),</li>
<li>Which reflows it children, etc.</li>
2002-08-05 04:26:59 +04:00
</ul>
</li>
2002-08-04 05:37:25 +04:00
<li>Ususally it starts when the pres shell processes its queue of reflow commands.</li>
<li>The reflower
<ul>
2002-08-05 21:37:49 +04:00
<li>Positions reflowee (if it can) before actually reflowing in case views are involved
(e.g. absolutely positioned elements) </li>
2002-08-05 04:26:59 +04:00
<li>Reflows reflowee and passes a reflow state (in) and a reflow metrics (in/out)</li>
2002-08-04 05:37:25 +04:00
</ul>
2002-08-05 04:26:59 +04:00
</li>
2002-08-04 05:37:25 +04:00
</ul>
</div>
<div class="slide" id="s4">
<div class="nav">
<a href="#s3">&lt;</a>
<a href="#s5">&gt;</a>
</div>
<h1>Review of Reflow</h1>
<ul>
2002-08-05 21:37:49 +04:00
<li>The reflow state:
2002-08-05 04:26:59 +04:00
<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>
2002-08-05 21:37:49 +04:00
<li>avail size,</li>
2002-08-05 04:26:59 +04:00
<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">&lt;</a>
<a href="#s6">&gt;</a>
</div>
<h1>Review of Reflow</h1>
<ul>
</li>
<li>the reflow metrics contains:
<ul class=nested>
2002-08-04 05:37:25 +04:00
<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
2002-08-05 04:26:59 +04:00
is equivalent to preferred size if the avail size is not constrained.</li>
2002-08-04 05:37:25 +04:00
</ul>
</li>
2002-08-05 04:26:59 +04:00
</ul>
</div>
<div class="slide" id="s6">
<div class="nav">
<a href="#s5">&lt;</a>
<a href="#s7">&gt;</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
2002-08-04 05:37:25 +04:00
<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>
2002-08-05 04:26:59 +04:00
2002-08-04 05:37:25 +04:00
</div>
2002-08-05 04:26:59 +04:00
<div class="slide" id="s7">
2002-08-04 05:37:25 +04:00
<div class="nav">
2002-08-05 04:26:59 +04:00
<a href="#s6">&lt;</a>
<a href="#s8">&gt;</a>
2002-08-04 05:37:25 +04:00
</div>
2002-08-05 04:26:59 +04:00
2002-08-04 05:37:25 +04:00
<h1>Kinds of reflows</h1>
<ul>
2002-08-05 21:37:49 +04:00
<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>
2002-08-04 05:37:25 +04:00
<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>
2002-08-05 04:26:59 +04:00
<div class="slide" id="s8">
2002-08-04 05:37:25 +04:00
<div class="nav">
2002-08-05 04:26:59 +04:00
<a href="#s7">&lt;</a>
<a href="#s9">&gt;</a>
2002-08-04 05:37:25 +04:00
</div>
<h1>Kinds of reflows</h1>
<ul>
2002-08-05 21:37:49 +04:00
<li>Incremental reflow (continued)
2002-08-04 05:37:25 +04:00
<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>
2002-08-05 21:37:49 +04:00
<li>Style change
2002-08-04 05:37:25 +04:00
<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>
2002-08-05 04:26:59 +04:00
<div class="slide" id="s9">
2002-08-04 05:37:25 +04:00
<div class="nav">
2002-08-05 04:26:59 +04:00
<a href="#s8">&lt;</a>
<a href="#s10">&gt;</a>
2002-08-04 05:37:25 +04:00
</div>
<h1>Table Frames</h1>
2002-08-05 04:26:59 +04:00
<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>&#x2199;<td><td class=right-arrow>&#x2198;</tr>
<tr><td><td><td>nsTable<BR>Frame<td><td><td><td>nsTableCaption<BR>Frame</tr>
<tr class="arrows"><td><td class=left-arrow>&#x2199;<td><td class=right-arrow>&#x2198;<td><td><td class=center-arrow>&darr;</tr>
<tr><td>nsTableCol<BR>GroupFrame<td><td><TD><td>nsTableRow<BR>GroupFrame<td><td>nsBlockFrame</tr>
<tr class="arrows"><td class=center-arrow>&darr;<td><td><td><td class=center-arrow>&darr;</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>&darr;</tr>
<tr><td><td><td><TD><td>nsTableCell<BR>Frame</tr>
<tr class="arrows"><td><td><td><td><td class=center-arrow>&darr;</tr>
<tr><td><td><td><TD><td>nsBlock<BR>Frame</tr>
</table>
2002-08-04 05:37:25 +04:00
</div>
2002-08-05 04:26:59 +04:00
<div class="slide" id="s10">
2002-08-04 05:37:25 +04:00
<div class="nav">
2002-08-05 04:26:59 +04:00
<a href="#s9">&lt;</a>
<a href="#s11">&gt;</a>
2002-08-04 05:37:25 +04:00
</div>
<h1>Table Reflow</h1>
<ul>
2002-08-05 21:37:49 +04:00
<li>Outer table reflows table and caption (if present)</li>
<li>Table reflows row groups in multiple passes</li>
2002-08-04 05:37:25 +04:00
<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
2002-08-05 04:26:59 +04:00
on the table, col groups, cols, cells the preferred and max element sizes of the cells
2002-08-04 05:37:25 +04:00
(from the pass 1 reflow), and considers colspans</li>
<li>Pass 2 - cell widths are constrained by the column widths (heights are only
2002-08-04 10:05:25 +04:00
constrained in paginated mode).</li>
2002-08-05 04:26:59 +04:00
</ul>
</li>
</ul>
</div>
<div class="slide" id="s11">
<div class="nav">
<a href="#s10">&lt;</a>
<a href="#s12">&gt;</a>
</div>
<h1>Table Reflow</h1>
<ul>
2002-08-05 21:37:49 +04:00
<li>Table reflows row groups (continued)</li>
2002-08-05 04:26:59 +04:00
<ul class=nested>
2002-08-04 05:37:25 +04:00
<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>
2002-08-05 21:37:49 +04:00
<li>In each pass, row groups reflow rows which reflow cells which reflow cell blocks</li>
2002-08-04 05:37:25 +04:00
</ul>
</div>
2002-08-05 04:26:59 +04:00
<div class="slide" id="s12">
2002-08-04 05:37:25 +04:00
<div class="nav">
2002-08-05 04:26:59 +04:00
<a href="#s11">&lt;</a>
<a href="#s13">&gt;</a>
2002-08-04 05:37:25 +04:00
</div>
2002-08-04 10:05:25 +04:00
<h1>Table Reflow Example</h1>
<table width=100%>
<tr>
<td width=100%>
<pre style="font-size:.6em;">
tblO 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
tblO 030176CC d=4500,450
2002-08-05 21:37:49 +04:00
<a href="frame_reflow_debug.html">frame reflow debugging</a> gives instructions
for turning this on.
</pre>
2002-08-04 10:05:25 +04:00
</td>
<td>
<pre style="font-size:.7em;">
&lt;<span class=html>table</span> width=300&gt;
&lt;<span class=html>tr</span>&gt;
&lt;<span class=html>td</span>&gt;foo&lt;<span class=html>/td</span>&gt;
&lt;<span class=html>td</span>&gt;bar zap&lt;<span class=html>/td</span>&gt;
&lt;<span class=html>/tr</span>&gt;
&lt;<span class=html>/table</span>&gt;
</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>
2002-08-04 05:37:25 +04:00
</div>
2002-08-05 04:26:59 +04:00
<div class="slide" id="s13">
2002-08-04 05:37:25 +04:00
<div class="nav">
2002-08-05 04:26:59 +04:00
<a href="#s12">&lt;</a>
<a href="#s14">&gt;</a>
2002-08-04 05:37:25 +04:00
</div>
<h1>Table reflow optimizations</h1>
<ul>
2002-08-05 04:26:59 +04:00
<li>If the table is already balanced, pass 1 constrains the width (like a normal pass 2) based on the current
2002-08-05 21:37:49 +04:00
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>
2002-08-04 05:37:25 +04:00
<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>Outer table 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>
2002-08-05 04:26:59 +04:00
<div class="slide" id="s14">
2002-08-04 05:37:25 +04:00
<div class="nav">
2002-08-05 04:26:59 +04:00
<a href="#s13">&lt;</a>
<a href="#s15">&gt;</a>
2002-08-04 05:37:25 +04:00
</div>
<h1>Table incremental reflow</h1>
<ul>
<li>Outer table 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
2002-08-05 21:37:49 +04:00
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>
2002-08-04 05:37:25 +04:00
<li>In the dirty cases, a target posted the reflow command in AppendFrames, InsertFrames, or DeleteFrame.</li>
</ul>
</div>
2002-08-05 04:26:59 +04:00
<div class="slide" id="s15">
2002-08-04 05:37:25 +04:00
<div class="nav">
2002-08-05 04:26:59 +04:00
<a href="#s14">&lt;</a>
<a href="#s16">&gt;</a>
2002-08-04 05:37:25 +04:00
</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>
2002-08-05 04:26:59 +04:00
<div class="slide" id="s16">
2002-08-04 05:37:25 +04:00
<div class="nav">
2002-08-05 04:26:59 +04:00
<a href="#s15">&lt;</a>
<a href="#s17">&gt;</a>
2002-08-04 05:37:25 +04:00
</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>
2002-08-04 10:05:25 +04:00
<li>in paginated mode when there is a height on the table, the table doesn't allocate
2002-08-04 05:37:25 +04:00
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>
2002-08-05 04:26:59 +04:00
<div class="slide" id="s17">
2002-08-04 05:37:25 +04:00
<div class="nav">
2002-08-05 04:26:59 +04:00
<a href="#s16">&lt;</a>
<a href="#s18">&gt;</a>
2002-08-04 05:37:25 +04:00
</div>
2002-08-04 10:05:25 +04:00
<h1>Special Reflow Example</h1>
2002-08-05 04:26:59 +04:00
<table width=100% style="text-align:left;">
2002-08-04 10:05:25 +04:00
<tr>
<td>
2002-08-05 04:26:59 +04:00
<pre style="font-size:.7em; text-align:left;">
2002-08-04 10:05:25 +04:00
&lt;<span class=html>table</span> border=2 width=300&gt;
&lt;<span class=html>tr</span>&gt;
&lt;<span class=html>td</span>&gt;
This cell's width is
constrained by the
table and image widths.
Its exact height is
hard to determine.
&lt;<span class=html>/td</span>&gt;
&lt;<span class=html>td</span>&gt;
&lt;<span class=html>img</span> src=raptor.jpg
width=200 height=100%>
&lt;<span class=html>/td</span>&gt;
&lt;<span class=html>/tr</span>&gt;
&lt;<span class=html>/table</span>&gt;
</pre>
</td>
<td>
<table border=2 width=300>
<tr>
<td style="font-size:.7em;">This cell's width is constrained
2002-08-05 04:26:59 +04:00
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.
2002-08-04 10:05:25 +04:00
<td>
<img src="raptor.jpg"
width=200 height=100%>
</td>
</tr>
</table>
</tr>
</table>
2002-08-04 05:37:25 +04:00
</div>
2002-08-05 04:26:59 +04:00
<div class="slide" id="s18">
2002-08-04 05:37:25 +04:00
<div class="nav">
2002-08-05 04:26:59 +04:00
<a href="#s17">&lt;</a>
<a href="#s19">&gt;</a>
2002-08-04 05:37:25 +04:00
</div>
<h1>Special height reflow</h1>
<ul>
<li>The reflow state holds an observer and initiator</li>
2002-08-05 21:37:49 +04:00
<li>Observer</li>
2002-08-04 05:37:25 +04:00
<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>
2002-08-05 21:37:49 +04:00
<li>Initiator</li>
2002-08-04 05:37:25 +04:00
<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>
2002-08-05 04:26:59 +04:00
<div class="slide" id="s19">
2002-08-04 05:37:25 +04:00
<div class="nav">
2002-08-05 04:26:59 +04:00
<a href="#s18">&lt;</a>
<a href="#s20">&gt;</a>
2002-08-04 05:37:25 +04:00
</div>
<h1>Special height reflow</h1>
<ul>
2002-08-05 21:37:49 +04:00
<li>Optimizations</li>
2002-08-04 05:37:25 +04:00
<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>
2002-08-05 04:26:59 +04:00
<div class="slide" id="s20">
2002-08-04 05:37:25 +04:00
<div class="nav">
2002-08-05 04:26:59 +04:00
<a href="#s19">&lt;</a>
<a href="#s21">&gt;</a>
2002-08-04 05:37:25 +04:00
</div>
2002-08-04 10:05:25 +04:00
<h1>Intro to paginated reflow</h1>
2002-08-04 05:37:25 +04:00
<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>
2002-08-05 04:26:59 +04:00
<div class="slide" id="s21">
2002-08-04 05:37:25 +04:00
<div class="nav">
2002-08-05 04:26:59 +04:00
<a href="#s20">&lt;</a>
<a href="#s22">&gt;</a>
2002-08-04 05:37:25 +04:00
</div>
2002-08-04 10:05:25 +04:00
<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>nsTableOuterFrame</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>nsTableOuterFrame</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>
2002-08-04 05:37:25 +04:00
</div>
2002-08-05 04:26:59 +04:00
<div class="slide" id="s22">
2002-08-04 05:37:25 +04:00
<div class="nav">
2002-08-05 04:26:59 +04:00
<a href="#s21">&lt;</a>
<a href="#s23">&gt;</a>
2002-08-04 05:37:25 +04:00
</div>
2002-08-04 10:05:25 +04:00
<h1>Intro to paginated reflow</h1>
2002-08-04 05:37:25 +04:00
<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>
2002-08-05 04:26:59 +04:00
<div class="slide" id="s23">
2002-08-04 05:37:25 +04:00
<div class="nav">
2002-08-05 04:26:59 +04:00
<a href="#s22">&lt;</a>
<a href="#s24">&gt;</a>
2002-08-04 05:37:25 +04:00
</div>
2002-08-04 10:05:25 +04:00
<h1>Intro to paginated reflow</h1>
2002-08-04 05:37:25 +04:00
<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>
2002-08-05 04:26:59 +04:00
<div class="slide" id="s24">
2002-08-04 05:37:25 +04:00
<div class="nav">
2002-08-05 04:26:59 +04:00
<a href="#s23">&lt;</a>
<a href="#s25">&gt;</a>
2002-08-04 05:37:25 +04:00
</div>
2002-08-04 10:05:25 +04:00
<h1>Intro to paginated reflow</h1>
2002-08-04 05:37:25 +04:00
<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>
2002-08-05 04:26:59 +04:00
<div class="slide" id="s25">
2002-08-04 05:37:25 +04:00
<div class="nav">
2002-08-05 04:26:59 +04:00
<a href="#s24">&lt;</a>
<a href="#s26">&gt;</a>
2002-08-04 05:37:25 +04:00
</div>
<h1>Table paginated reflow</h1>
<ul>
<li>The block containing the outer table reflows it. If it is incomplete, the block will
<ul>
<li>create a continuation for the outer table (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 outer table 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>
2002-08-05 04:26:59 +04:00
<div class="slide" id="s26">
2002-08-04 05:37:25 +04:00
<div class="nav">
2002-08-05 04:26:59 +04:00
<a href="#s25">&lt;</a>
<a href="#s27">&gt;</a>
2002-08-04 05:37:25 +04:00
</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>
2002-08-05 04:26:59 +04:00
</ul>
</li>
</ul>
</div>
<div class="slide" id="s27">
<div class="nav">
<a href="#s26">&lt;</a>
<a href="#s28">&gt;</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
2002-08-04 05:37:25 +04:00
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>
2002-08-05 04:26:59 +04:00
<div class="slide" id="s28">
2002-08-04 05:37:25 +04:00
<div class="nav">
2002-08-05 04:26:59 +04:00
<a href="#s27">&lt;</a>
2002-08-04 10:05:25 +04:00
<a href="#s0">&gt;</a>
2002-08-04 05:37:25 +04:00
</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, outer table to
be incomplete</li>
<li>A truncated row or a row that started too far down the page causes the row group,
table, outer table to be incomplete.</li>
</ul>
</li>
</ul>
</div>
</body>
</html>