summaryrefslogtreecommitdiffstats
path: root/layout/doc/table_reflow_slides.html
diff options
context:
space:
mode:
authorMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
committerMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
commit5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree10027f336435511475e392454359edea8e25895d /layout/doc/table_reflow_slides.html
parent49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
downloadUXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
Add m-esr52 at 52.6.0
Diffstat (limited to 'layout/doc/table_reflow_slides.html')
-rw-r--r--layout/doc/table_reflow_slides.html888
1 files changed, 888 insertions, 0 deletions
diff --git a/layout/doc/table_reflow_slides.html b/layout/doc/table_reflow_slides.html
new file mode 100644
index 000000000..e76a10768
--- /dev/null
+++ b/layout/doc/table_reflow_slides.html
@@ -0,0 +1,888 @@
+<!-- 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">&lt;</a>
+ <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>
+ <li>Intro to paginated reflow</li>
+ <li>Table paginated reflow</li>
+ </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>
+ <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">&lt;</a>
+ <a href="#s5">&gt;</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">&lt;</a>
+ <a href="#s6">&gt;</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">&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
+ <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">&lt;</a>
+ <a href="#s8">&gt;</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">&lt;</a>
+ <a href="#s9">&gt;</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">&lt;</a>
+ <a href="#s10">&gt;</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>&#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>
+</div>
+
+<div class="slide" id="s10">
+ <div class="nav">
+ <a href="#s9">&lt;</a>
+ <a href="#s11">&gt;</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">&lt;</a>
+ <a href="#s12">&gt;</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">&lt;</a>
+ <a href="#s13">&gt;</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;">
+&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>
+</div>
+
+<div class="slide" id="s13">
+ <div class="nav">
+ <a href="#s12">&lt;</a>
+ <a href="#s14">&gt;</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">&lt;</a>
+ <a href="#s15">&gt;</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">&lt;</a>
+ <a href="#s16">&gt;</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">&lt;</a>
+ <a href="#s17">&gt;</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">&lt;</a>
+ <a href="#s18">&gt;</a>
+ </div>
+ <h1>Special Reflow Example</h1>
+ <table width=100% style="text-align:left;">
+ <tr>
+ <td>
+ <pre style="font-size:.7em; text-align:left;">
+&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
+ 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">&lt;</a>
+ <a href="#s19">&gt;</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">&lt;</a>
+ <a href="#s20">&gt;</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">&lt;</a>
+ <a href="#s21">&gt;</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">&lt;</a>
+ <a href="#s22">&gt;</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">&lt;</a>
+ <a href="#s23">&gt;</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">&lt;</a>
+ <a href="#s24">&gt;</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">&lt;</a>
+ <a href="#s25">&gt;</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">&lt;</a>
+ <a href="#s26">&gt;</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">&lt;</a>
+ <a href="#s27">&gt;</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">&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
+ 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">&lt;</a>
+ <a href="#s0">&gt;</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>