1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/doc/table_reflow_slides.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,888 @@
1.4 +<!-- This Source Code Form is subject to the terms of the Mozilla Public
1.5 + - License, v. 2.0. If a copy of the MPL was not distributed with this
1.6 + - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
1.7 +
1.8 +<!-- vim:sw=2:et:ts=2:tw=72:
1.9 +-->
1.10 +<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN"
1.11 + "http://www.w3.org/TR/html4/loose.dtd">
1.12 +<html lang="en-US">
1.13 +<head>
1.14 + <title>Table Reflow Tech Talk, 2002-08-05</title>
1.15 + <style type="text/css">
1.16 +
1.17 + html, body {
1.18 + height: 100%;
1.19 + overflow: visible;
1.20 + }
1.21 +
1.22 + body {
1.23 + font-size: 1.4em;
1.24 + font-family: Verdana, Arial, Helvetica, sans-serif;
1.25 + font-weight: bold;
1.26 + background: white;
1.27 + color: black;
1.28 + }
1.29 +
1.30 + h1, h2, p {
1.31 + margin: 0;
1.32 + }
1.33 +
1.34 + h1 {
1.35 + font: inherit;
1.36 + font-size: 1.5em;
1.37 + /* text-align: center; */
1.38 + margin-bottom: 0.8em;
1.39 + border-bottom: 0.1em solid #006;
1.40 + color: #006;
1.41 + }
1.42 +
1.43 + h2 {
1.44 + font: inherit;
1.45 + font-size: 1.2em;
1.46 + text-align: left;
1.47 + margin: 0.15em 0;
1.48 + }
1.49 +
1.50 + ul {
1.51 + padding: 0 0 0 1.4em;
1.52 + margin: 0;
1.53 + }
1.54 +
1.55 + li { margin: 0;
1.56 + margin-top: 0.5em;
1.57 + padding: 0;
1.58 + font-size: 1.0em;}
1.59 +
1.60 + div.slide {
1.61 + position: relative;
1.62 + min-height: 100%;
1.63 + }
1.64 +
1.65 + div.nav {
1.66 + /*
1.67 + position: absolute;
1.68 + top: 4px;
1.69 + right: 4px;
1.70 + */
1.71 + float: right;
1.72 + margin: 4px;
1.73 + }
1.74 +
1.75 + div.nav :link, div.nav :visited, div.nav span {
1.76 + text-decoration: none;
1.77 + background: #006;
1.78 + color: white;
1.79 + padding: 0 0.4em 0.2em 0.4em;
1.80 + line-height: 1.4em;
1.81 + }
1.82 +
1.83 + div.nav :link:hover, div.nav :visited:hover {
1.84 + background: #00f;
1.85 + }
1.86 +
1.87 + table {
1.88 + margin: auto;
1.89 + }
1.90 +
1.91 + table.box {
1.92 + border-collapse: collapse;
1.93 + border: 2px solid black;
1.94 + box-sizing: border-box;
1.95 + width:98%;
1.96 + height:96%;
1.97 + }
1.98 +
1.99 + row {
1.100 + border: 2px solid black;
1.101 + }
1.102 + row.title {
1.103 + border: hidden;
1.104 + }
1.105 +
1.106 + table td {
1.107 + /*text-align: center;*/
1.108 + empty-cells: hide;
1.109 + }
1.110 +
1.111 + table td.box {
1.112 + height:100%;
1.113 + border: 2px solid black;
1.114 + }
1.115 +
1.116 + table td.title {
1.117 + border-top: hidden;
1.118 + border-right: hidden;
1.119 + border-left: hidden;
1.120 + font-size: .5em;
1.121 + }
1.122 +
1.123 + table td.title2 {
1.124 + border-bottom: hidden;
1.125 + border-right: hidden;
1.126 + border-left: hidden;
1.127 + font-size: .5em;
1.128 + }
1.129 +
1.130 + table.tree tr:not(.arrows) td {
1.131 + font-family: monospace;
1.132 + border: 0.1em solid;
1.133 + font-size: .7em;
1.134 + text-align:center;
1.135 + }
1.136 +
1.137 + table td.left-arrow {
1.138 + text-align: right;
1.139 + }
1.140 +
1.141 + table td.right-arrow {
1.142 + text-align: left;
1.143 + }
1.144 +
1.145 + table td.center-arrow {
1.146 + text-align: center;
1.147 + }
1.148 +
1.149 + span.html {
1.150 + color:purple;
1.151 + }
1.152 +
1.153 + table td.space {
1.154 + width: 5%;
1.155 + }
1.156 +
1.157 + table td.frame {
1.158 + width: 22%;
1.159 + }
1.160 +
1.161 + span.comment {
1.162 + color: red;
1.163 + }
1.164 +
1.165 + </style>
1.166 +</head>
1.167 +<body>
1.168 +
1.169 +<div class="slide" id="s0">
1.170 + <div class="nav">
1.171 + <a href="#s28"><</a>
1.172 + <a href="#s1">></a>
1.173 + </div>
1.174 + <table style="margin: auto"><tr><td>
1.175 + <center>
1.176 + <h1>Table Reflow Internals<br>Tech Talk</h1>
1.177 + <p>Aug 5, 2002</p>
1.178 + <p style="margin-top: 0.5em">Chris Karnaze</a></p>
1.179 + </center>
1.180 + </td></tr></table>
1.181 +
1.182 +</div>
1.183 +
1.184 +<div class="slide" id="s1">
1.185 + <div class="nav">
1.186 + <a href="#s0"><</a>
1.187 + <a href="#s2">></a>
1.188 + </div>
1.189 + <h1>Overview</h1>
1.190 + <ul>
1.191 + <li>Review of reflow</li>
1.192 + <li>Table frames</li>
1.193 + <li>Table reflow</li>
1.194 + <li>Intro to paginated reflow</li>
1.195 + <li>Table paginated reflow</li>
1.196 + </ul>
1.197 +</div>
1.198 +
1.199 +<div class="slide" id="s2">
1.200 + <div class="nav">
1.201 + <a href="#s1"><</a>
1.202 + <a href="#s3">></a>
1.203 + </div>
1.204 + <h1>Review of Reflow</h1>
1.205 + <ul>
1.206 + <li>Reflow process starts when
1.207 + <ul>
1.208 + <li>An html document starts loading (the frame tree contains only viewport, scroll(s), canvas, html, body).</li>
1.209 + <li>The initial chunk of an xml doc is loaded.</li>
1.210 + <li>The initial chunk of an html doc (or a subsequent chunk of an xml doc) is loaded. The container posts a
1.211 + dirty reflow command with itself as the target. </li>
1.212 + <li>Content is inserted, appended, or deleted through the DOM. The container posts a dirty reflow command
1.213 + with itself as the target.</li>
1.214 + <li>Style changes through the DOM - javascript, browser change font (CTRL+/-), a preference changes, etc.</li>
1.215 + </ul>
1.216 + </li>
1.217 + </ul>
1.218 +</div>
1.219 +
1.220 +<div class="slide" id="s3">
1.221 + <div class="nav">
1.222 + <a href="#s2"><</a>
1.223 + <a href="#s4">></a>
1.224 + </div>
1.225 + <h1>Review of Reflow</h1>
1.226 + <ul>
1.227 + <li>Reflow starts with pres shell
1.228 + <ul>
1.229 + <li>Which reflows the reflow root (usually the view port frame),</li>
1.230 + <li>Which reflows it children, etc.</li>
1.231 + </ul>
1.232 + </li>
1.233 + <li>Ususally it starts when the pres shell processes its queue of reflow commands.</li>
1.234 + <li>The reflower
1.235 + <ul>
1.236 + <li>Positions reflowee (if it can) before actually reflowing in case views are involved
1.237 + (e.g. absolutely positioned elements) </li>
1.238 + <li>Reflows reflowee and passes a reflow state (in) and a reflow metrics (in/out)</li>
1.239 + </ul>
1.240 + </li>
1.241 + </ul>
1.242 +</div>
1.243 +
1.244 +<div class="slide" id="s4">
1.245 + <div class="nav">
1.246 + <a href="#s3"><</a>
1.247 + <a href="#s5">></a>
1.248 + </div>
1.249 + <h1>Review of Reflow</h1>
1.250 + <ul>
1.251 + <li>The reflow state:
1.252 + <ul>
1.253 + <li>Is a node in a tree structurally equivalent to the frame tree of reflow participants</li>
1.254 + <li>contains:
1.255 + <ul>
1.256 + <li>reflow type,</li>
1.257 + <li>avail size,</li>
1.258 + <li>various computed values,</li>
1.259 + <li>resolved style structs</li>
1.260 + <li>possible request for preferred size and more.</li>
1.261 + </ul>
1.262 + </li>
1.263 + </ul>
1.264 + </li>
1.265 + </ul>
1.266 +</div>
1.267 +
1.268 +<div class="slide" id="s5">
1.269 + <div class="nav">
1.270 + <a href="#s4"><</a>
1.271 + <a href="#s6">></a>
1.272 + </div>
1.273 + <h1>Review of Reflow</h1>
1.274 + <ul>
1.275 + </li>
1.276 + <li>the reflow metrics contains:
1.277 + <ul class=nested>
1.278 + <li>max element size (if requested) - the minimum size it can be</li>
1.279 + <li>preferred size (if requested) - the size it would like to be given no size constraints.</li>
1.280 + <li>desired size - the size it would like to be given the avail size. This
1.281 + is equivalent to preferred size if the avail size is not constrained.</li>
1.282 + </ul>
1.283 + </li>
1.284 + </ul>
1.285 +</div>
1.286 +
1.287 +<div class="slide" id="s6">
1.288 + <div class="nav">
1.289 + <a href="#s5"><</a>
1.290 + <a href="#s7">></a>
1.291 + </div>
1.292 + <h1>Review of Reflow</h1>
1.293 + <ul>
1.294 + <li>The reflowee sets various sizes in the reflow metrics after (possibly) reflowing some or all of its children
1.295 + which reflows it children, etc.</li>
1.296 + <li>The reflowee returns a reflow status which indicates
1.297 + <ul class=nested>
1.298 + <li>if it is complete, and thus not have to continue (split)</li>
1.299 + <li>breaking status (in the case of some inline frames)</li>
1.300 + <li>if there is truncation (it can't fit in the space and can't split). This is just a convience mechanism.</li>
1.301 + </ul>
1.302 + </li>
1.303 +
1.304 +</div>
1.305 +
1.306 +<div class="slide" id="s7">
1.307 + <div class="nav">
1.308 + <a href="#s6"><</a>
1.309 + <a href="#s8">></a>
1.310 + </div>
1.311 +
1.312 + <h1>Kinds of reflows</h1>
1.313 + <ul>
1.314 + <li>Initial - reflowee's first reflow must be of this type (reflower's responsibility).</li>
1.315 + <li>Resize - reflowee gets a change in available space only. Similar to initial, except it can reoccur.</li>
1.316 + <li>Incremental - has a reflow path (tree) where each node has a command with a target frame, <br>reflow command types are:</li>
1.317 + <ul class=nested>
1.318 + <li>dirty - something changed inside a target (e.g. it gains, loses children)</li>
1.319 + <li>style changed - a target changed stylisticly (recall, size is a style property)</li>
1.320 + <li>content changed - a target's content changed (e.g. a text run)</li>
1.321 + <li>user defined - currently only used for fixed positioned frames </li>
1.322 + </ul>
1.323 + </li>
1.324 + </ul>
1.325 +</div>
1.326 +
1.327 +<div class="slide" id="s8">
1.328 + <div class="nav">
1.329 + <a href="#s7"><</a>
1.330 + <a href="#s9">></a>
1.331 + </div>
1.332 + <h1>Kinds of reflows</h1>
1.333 + <ul>
1.334 + <li>Incremental reflow (continued)
1.335 + <ul class=nested>
1.336 + <li>reflower not allowed to change available size of reflowee</li>
1.337 + <li>reflow commands get coalesced to streamline processing</li>
1.338 + </ul>
1.339 + </li>
1.340 + <li>Style change
1.341 + <ul class=nested>
1.342 + <li>a target changed stylistic if there is a target, otherwise every frame may need to respond</li>
1.343 + <li>parent of target usually turns it into an incremental reflow with a style changed command type</li>
1.344 + </ul>
1.345 + </li>
1.346 + </ul>
1.347 +</div>
1.348 +
1.349 +<div class="slide" id="s9">
1.350 + <div class="nav">
1.351 + <a href="#s8"><</a>
1.352 + <a href="#s10">></a>
1.353 + </div>
1.354 + <h1>Table Frames</h1>
1.355 + <BR>
1.356 + <table class="tree" width=90%>
1.357 + <tr><td class=frame><td class=space style="width:2%"><td class=frame><td class=space style="width:2%">
1.358 + <td class=frame><td class=space><td class=frame></tr>
1.359 + <tr><td><td><td class=frame><td>
1.360 + <td>nsTableOuter Frame<td><td></tr>
1.361 + <tr class="arrows"><td><td><td><td class=left-arrow>↙<td><td class=right-arrow>↘</tr>
1.362 + <tr><td><td><td>nsTable<BR>Frame<td><td><td><td>nsTableCaption<BR>Frame</tr>
1.363 + <tr class="arrows"><td><td class=left-arrow>↙<td><td class=right-arrow>↘<td><td><td class=center-arrow>↓</tr>
1.364 + <tr><td>nsTableCol<BR>GroupFrame<td><td><TD><td>nsTableRow<BR>GroupFrame<td><td>nsBlockFrame</tr>
1.365 + <tr class="arrows"><td class=center-arrow>↓<td><td><td><td class=center-arrow>↓</tr>
1.366 + <tr><td>nsTableCol<BR>Frame<td><TD><TD><td>nsTableRow<BR>Frame</tr>
1.367 + <tr class="arrows"><td><td><td><td><td class=center-arrow>↓</tr>
1.368 + <tr><td><td><td><TD><td>nsTableCell<BR>Frame</tr>
1.369 + <tr class="arrows"><td><td><td><td><td class=center-arrow>↓</tr>
1.370 + <tr><td><td><td><TD><td>nsBlock<BR>Frame</tr>
1.371 + </table>
1.372 +</div>
1.373 +
1.374 +<div class="slide" id="s10">
1.375 + <div class="nav">
1.376 + <a href="#s9"><</a>
1.377 + <a href="#s11">></a>
1.378 + </div>
1.379 + <h1>Table Reflow</h1>
1.380 + <ul>
1.381 + <li>Outer table reflows table and caption (if present)</li>
1.382 + <li>Table reflows row groups in multiple passes</li>
1.383 + <ul class=nested>
1.384 + <li>Pass 1 - unconstrained width, height and requests max elem width.</li>
1.385 + <li>The table figures out the column widths (balances) given the style width constraints
1.386 + on the table, col groups, cols, cells the preferred and max element sizes of the cells
1.387 + (from the pass 1 reflow), and considers colspans</li>
1.388 + <li>Pass 2 - cell widths are constrained by the column widths (heights are only
1.389 + constrained in paginated mode).</li>
1.390 + </ul>
1.391 + </li>
1.392 + </ul>
1.393 +</div>
1.394 +
1.395 +<div class="slide" id="s11">
1.396 + <div class="nav">
1.397 + <a href="#s10"><</a>
1.398 + <a href="#s12">></a>
1.399 + </div>
1.400 + <h1>Table Reflow</h1>
1.401 + <ul>
1.402 + <li>Table reflows row groups (continued)</li>
1.403 + <ul class=nested>
1.404 + <li>The row group figures out the row heights given the its style height constraints
1.405 + its rows and cells and the actual heights of its rows and cells from the pass 2 reflow</li>
1.406 + <li>If the table has a style height, it allocates extra height to its row groups, rows and cells.</li>
1.407 + </ul>
1.408 + </li>
1.409 + <li>In each pass, row groups reflow rows which reflow cells which reflow cell blocks</li>
1.410 + </ul>
1.411 +</div>
1.412 +
1.413 +<div class="slide" id="s12">
1.414 + <div class="nav">
1.415 + <a href="#s11"><</a>
1.416 + <a href="#s13">></a>
1.417 + </div>
1.418 + <h1>Table Reflow Example</h1>
1.419 + <table width=100%>
1.420 + <tr>
1.421 + <td width=100%>
1.422 + <pre style="font-size:.6em;">
1.423 +tblO 030176CC r=0 a=8940,UC c=0,0 cnt=429
1.424 + tbl 030178C4 r=0 a=8940,UC c=4470,UC cnt=430
1.425 + rowG 03017A7C r=0 a=UC,UC c=UC,UC cnt=431
1.426 + row 03017C08 r=0 a=UC,UC c=UC,UC cnt=432
1.427 + cell 03017DA8 r=0 a=UC,UC c=UC,UC cnt=433
1.428 + block 03017E08 r=0 a=UC,UC c=UC,UC cnt=434
1.429 + block 03017E08 d=870,300 me=480
1.430 + cell 03017DA8 d=930,360 me=540
1.431 + cell 0301A8CC r=0 a=UC,UC c=UC,UC cnt=436
1.432 + block 0301A92C r=0 a=UC,UC c=UC,UC cnt=437
1.433 + block 0301A92C d=1335,300 me=465
1.434 + cell 0301A8CC d=1395,360 me=525
1.435 + row 03017C08 d=UC,360
1.436 + rowG 03017A7C d=UC,360
1.437 + rowG 03017A7C r=2 a=4470,UC c=4470,UC cnt=442
1.438 + row 03017C08 r=2 a=4470,UC c=4470,UC cnt=443
1.439 + cell 03017DA8 r=2 a=1755,UC c=1695,UC cnt=444
1.440 + block 03017E08 r=2 a=1695,UC c=1695,UC cnt=445
1.441 + block 03017E08 d=1695,300
1.442 + cell 03017DA8 d=1755,360
1.443 + cell 0301A8CC r=2 a=2625,UC c=2565,UC cnt=446
1.444 + block 0301A92C r=2 a=2565,UC c=2565,UC cnt=447
1.445 + block 0301A92C d=2565,300
1.446 + cell 0301A8CC d=2625,360
1.447 + row 03017C08 d=4470,360
1.448 + rowG 03017A7C d=4470,360
1.449 + tbl 030178C4 d=4500,450
1.450 + tblO 030176CC d=4500,450
1.451 +
1.452 + <a href="frame_reflow_debug.html">frame reflow debugging</a> gives instructions
1.453 + for turning this on.
1.454 + </pre>
1.455 + </td>
1.456 + <td>
1.457 + <pre style="font-size:.7em;">
1.458 +<<span class=html>table</span> width=300>
1.459 + <<span class=html>tr</span>>
1.460 + <<span class=html>td</span>>foo<<span class=html>/td</span>>
1.461 + <<span class=html>td</span>>bar zap<<span class=html>/td</span>>
1.462 + <<span class=html>/tr</span>>
1.463 +<<span class=html>/table</span>>
1.464 + </pre>
1.465 + <BR>
1.466 + <BR>
1.467 + <pre style="font-size:.7em;">
1.468 +Key:
1.469 +
1.470 + r = reflow reason,
1.471 + 0 (initial),
1.472 + 2 (resize)
1.473 + a = avail w, h
1.474 + c = computed w, h
1.475 + d = desired w, h
1.476 + me = max elem w
1.477 + <pre>
1.478 + </td>
1.479 + </tr>
1.480 + </table>
1.481 +</div>
1.482 +
1.483 +<div class="slide" id="s13">
1.484 + <div class="nav">
1.485 + <a href="#s12"><</a>
1.486 + <a href="#s14">></a>
1.487 + </div>
1.488 + <h1>Table reflow optimizations</h1>
1.489 + <ul>
1.490 + <li>If the table is already balanced, pass 1 constrains the width (like a normal pass 2) based on the current
1.491 + 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>
1.492 + <li>Nested table reflowed with an unconstrained width (i.e. an ancestor is doing a pass 1 reflow)
1.493 + will only do a pass 1 reflow on its children</li>
1.494 + <li>Outer table caches last avail width and avoids reflowing children if resize reflow is the same as previous</li>
1.495 + <li>Table caches max element, preferred widths in case they are requested and it isn't rebalanced</li>
1.496 + <li>Cell caches prior avail width. if this doesn't change, the row may not have to reflow the cell</li>
1.497 + </ul>
1.498 +
1.499 +</div>
1.500 +
1.501 +<div class="slide" id="s14">
1.502 + <div class="nav">
1.503 + <a href="#s13"><</a>
1.504 + <a href="#s15">></a>
1.505 + </div>
1.506 + <h1>Table incremental reflow</h1>
1.507 + <ul>
1.508 + <li>Outer table is a target when a caption is added or removed (dirty) or the table or caption margin
1.509 + changes (style changed).</li>
1.510 + <li>Caption is a target when it changes stylistically (style changed).</li>
1.511 + <li>Table, row group, row, col group, col is a target when a child is added or removed (dirty) or it changes
1.512 + stylistically (style changed). <!--<span class="comment">please show how the column style change is propagated
1.513 + into the cell reflows as the cells are reflowed by their parent rows and not cols</span>--></li>
1.514 + <li>In the dirty cases, a target posted the reflow command in AppendFrames, InsertFrames, or DeleteFrame.</li>
1.515 + </ul>
1.516 +</div>
1.517 +
1.518 +<div class="slide" id="s15">
1.519 + <div class="nav">
1.520 + <a href="#s14"><</a>
1.521 + <a href="#s16">></a>
1.522 + </div>
1.523 + <h1>Table incremental reflow</h1>
1.524 + <ul>
1.525 + <li>In the style change cases where a target is between the table and the cell, the table is told to rebalance.</li>
1.526 + <li>When a target is the cell or below and the cell changes size, the row tells the table so it can decide if
1.527 + it needs to rebalance</li>
1.528 + <li>When a target is inside the cell's block, the cell
1.529 + requests max element, preferred sizes of its block in case they change</li>
1.530 + <li>After the table reflows the row group(s) containing the targets, if it rebalances, it then does a pass 2 reflow.</li>
1.531 + </ul>
1.532 +</div>
1.533 +
1.534 +<div class="slide" id="s16">
1.535 + <div class="nav">
1.536 + <a href="#s15"><</a>
1.537 + <a href="#s17">></a>
1.538 + </div>
1.539 + <h1>Special height reflow</h1>
1.540 + <ul>
1.541 + <li>When there is a % height frame inside a cell without a computed height</li>
1.542 + <ul class=nested>
1.543 + <li>the frame will never get a chance to size based on the final cell height</li>
1.544 + <li>in paginated mode when there is a height on the table, the table doesn't allocate
1.545 + extra height to rows until after it does a pass 2 reflow and then it is too late</li>
1.546 + </ul>
1.547 + </li>
1.548 + <li>This can be fixed by doing a special 3rd pass reflow</li>
1.549 + </ul>
1.550 + </div>
1.551 +</div>
1.552 +
1.553 +<div class="slide" id="s17">
1.554 + <div class="nav">
1.555 + <a href="#s16"><</a>
1.556 + <a href="#s18">></a>
1.557 + </div>
1.558 + <h1>Special Reflow Example</h1>
1.559 + <table width=100% style="text-align:left;">
1.560 + <tr>
1.561 + <td>
1.562 + <pre style="font-size:.7em; text-align:left;">
1.563 +<<span class=html>table</span> border=2 width=300>
1.564 + <<span class=html>tr</span>>
1.565 + <<span class=html>td</span>>
1.566 + This cell's width is
1.567 + constrained by the
1.568 + table and image widths.
1.569 + Its exact height is
1.570 + hard to determine.
1.571 + <<span class=html>/td</span>>
1.572 + <<span class=html>td</span>>
1.573 + <<span class=html>img</span> src=raptor.jpg
1.574 + width=200 height=100%>
1.575 + <<span class=html>/td</span>>
1.576 + <<span class=html>/tr</span>>
1.577 +<<span class=html>/table</span>>
1.578 + </pre>
1.579 + </td>
1.580 + <td>
1.581 + <table border=2 width=300>
1.582 + <tr>
1.583 + <td style="font-size:.7em;">This cell's width is constrained
1.584 + by the table and image widths. <BR><BR>Its height
1.585 + is hard to determine.<BR><BR> The image needs to be as high as the cell.
1.586 + <td>
1.587 + <!-- need ?raw=1 for lxr to cough up the image data, not a pretty page -->
1.588 + <img src="raptor.jpg?raw=1"
1.589 + width=200 height=100%>
1.590 + </td>
1.591 + </tr>
1.592 + </table>
1.593 +
1.594 + </tr>
1.595 + </table>
1.596 +</div>
1.597 +
1.598 +
1.599 +<div class="slide" id="s18">
1.600 + <div class="nav">
1.601 + <a href="#s17"><</a>
1.602 + <a href="#s19">></a>
1.603 + </div>
1.604 + <h1>Special height reflow</h1>
1.605 + <ul>
1.606 + <li>The reflow state holds an observer and initiator</li>
1.607 + <li>Observer</li>
1.608 + <ul class=nested>
1.609 + <li>is the table cell used as the height basis</li>
1.610 + <li>set by frame without computed height in DidReflow</li>
1.611 + <li>gives its block a computed height during 3rd pass</li>
1.612 + <li>doesn't change height during 3rd pass</li>
1.613 + </ul>
1.614 + </li>
1.615 + <li>Initiator</li>
1.616 + <ul class=nested>
1.617 + <li>is the table containing the observer</li>
1.618 + <li>starts the 3rd pass reflow and sets a bit in the reflow state</li>
1.619 + <li>gives its block a computed height during 3rd pass</li>
1.620 + <li>could also be inside a cell which is an observer</li>
1.621 + </ul>
1.622 + </li>
1.623 +</div>
1.624 +
1.625 +<div class="slide" id="s19">
1.626 + <div class="nav">
1.627 + <a href="#s18"><</a>
1.628 + <a href="#s20">></a>
1.629 + </div>
1.630 + <h1>Special height reflow</h1>
1.631 + <ul>
1.632 + <li>Optimizations</li>
1.633 + <ul class=nested>
1.634 + <li>only frames needing 3rd pass actually get it</li>
1.635 + <li>frames gettting a 3rd pass only get it once</li>
1.636 + </ul>
1.637 + </li>
1.638 +</div>
1.639 +
1.640 +<div class="slide" id="s20">
1.641 + <div class="nav">
1.642 + <a href="#s19"><</a>
1.643 + <a href="#s21">></a>
1.644 + </div>
1.645 + <h1>Intro to paginated reflow</h1>
1.646 + <ul>
1.647 + <li>When a reflowee's available height is constrained, it may not fit and need to either
1.648 + split/continue on the next page, or start on the next page.</li>
1.649 + <ul class=nested>
1.650 + <li>If it can continue, it returns an incomplete status.</li>
1.651 + <li>If it can't continue it returns a complete status.</li>
1.652 + </ul>
1.653 + </li>
1.654 + <li>A continuation may also need to be continued</li>
1.655 + <li>Continuations are linked together by prevInFlow and nextInFlow pointers </li>
1.656 + </ul>
1.657 +</div>
1.658 +
1.659 +<div class="slide" id="s21">
1.660 + <div class="nav">
1.661 + <a href="#s20"><</a>
1.662 + <a href="#s22">></a>
1.663 + </div>
1.664 + <h1>Pagination Illustration</h1>
1.665 + <table class=box style="height:500px">
1.666 + <tr><td class="title">nsSimplePageSequence</td></tr>
1.667 + <tr>
1.668 + <td class=box>
1.669 + <table class=box style="height:40%;">
1.670 + <tr><td class=title>nsPageFrame</td></tr>
1.671 + <tr>
1.672 + <td class=box>
1.673 + <table class=box style="height:100%;">
1.674 + <tr><td class=title>nsPageContentFrame</td></tr>
1.675 + <tr>
1.676 + <td class=box style="border-bottom: hidden">
1.677 + <table class=box style="height:100%; border-bottom:hidden">
1.678 + <tr><td class=title>areaFrame (html)</td></tr>
1.679 + <tr>
1.680 + <td class=box>
1.681 + <table class=box style="height:100%; border-bottom:hidden">
1.682 + <tr><td class=title>blockFrame (body)</td></tr>
1.683 + <tr>
1.684 + <td class=box>
1.685 + <table class=box style="height:100%; border-bottom:hidden">
1.686 + <tr><td class=title>nsTableOuterFrame</td></tr>
1.687 + <tr>
1.688 + <td class=box></td>
1.689 + </tr>
1.690 + </table>
1.691 + </td>
1.692 + </tr>
1.693 + </table>
1.694 + </td>
1.695 + </tr>
1.696 + </table>
1.697 + </tr>
1.698 + </table>
1.699 + </td>
1.700 + </tr>
1.701 + </table>
1.702 + <BR>
1.703 + <table class=box style="height:40%;">
1.704 + <tr>
1.705 + <td class=box>
1.706 + <table class=box style="height:100%;">
1.707 + <tr>
1.708 + <td class=box style="border-top: hidden">
1.709 + <table class=box style="height:100%; border-top:hidden">
1.710 + <tr>
1.711 + <td class=box>
1.712 + <table class=box style="height:100%; border-top:hidden">
1.713 + <tr>
1.714 + <td class=box>
1.715 + <table class=box style="height:100%; border-top:hidden">
1.716 + <tr>
1.717 + <td class=box></td>
1.718 + </tr>
1.719 + <tr><td class=title2>nsTableOuterFrame</td></tr>
1.720 + </table>
1.721 + </td>
1.722 + </tr>
1.723 + <tr><td class=title2>blockFrame (body)</td></tr>
1.724 + </table>
1.725 + </td>
1.726 + </tr>
1.727 + <tr><td class=title2>areaFrame (html)</td></tr>
1.728 + </table>
1.729 + </tr>
1.730 + <tr><td class=title2>nsPageContentFrame continued</td></tr>
1.731 + </table>
1.732 + </td>
1.733 + </tr>
1.734 + <tr><td class=title2>nsPageFrame continued</td></tr>
1.735 + </table>
1.736 + </td>
1.737 + </tr>
1.738 + </table>
1.739 +</div>
1.740 +
1.741 +<div class="slide" id="s22">
1.742 + <div class="nav">
1.743 + <a href="#s21"><</a>
1.744 + <a href="#s23">></a>
1.745 + </div>
1.746 + <h1>Intro to paginated reflow</h1>
1.747 + <ul>
1.748 + <li>The page sequence starts with one page and reflows it. If the page is incomplete then the page sequence
1.749 + creates a continuation for the page and sets it as the page's next sibling (it is also the page's
1.750 + nextInFlow).</li>
1.751 + <li>The page was incomplete because the page content was incomplete because the doc root was incomplete</li>
1.752 + <li>The doc root was incomplete because it contained lines that didn't fit (or if it was mapped to a table,
1.753 + because the table didn't fit) becacause a line contained something that didn't fit, etc.</li>
1.754 + </ul>
1.755 +</div>
1.756 +
1.757 +<div class="slide" id="s23">
1.758 + <div class="nav">
1.759 + <a href="#s22"><</a>
1.760 + <a href="#s24">></a>
1.761 + </div>
1.762 + <h1>Intro to paginated reflow</h1>
1.763 + <ul>
1.764 + <li>If the reflowee is incomplete, the reflower has the responsiblity to:
1.765 + <ul>
1.766 + <li>Create a continuation for the reflowee</li>
1.767 + <li>Ensure that the continuation gets put in the frame hierarchy at the right place
1.768 + and gets reflowed at the right time.</li>
1.769 + <li>Typically, a reflower accomplishes this by putting the continuation (c) on an overflow
1.770 + list which the reflower owns. When the reflower's continuation gets reflowed, it takes c
1.771 + and its siblings as children and reflows them.</li>
1.772 + </ul>
1.773 + </li>
1.774 + <li>If the reflowee is complete, truncated (it didn't fit), not at the top of page,
1.775 + the reflower should put the reflowee on its overflow list and return an incomplete status.</li>
1.776 + </ul>
1.777 +</div>
1.778 +
1.779 +<div class="slide" id="s24">
1.780 + <div class="nav">
1.781 + <a href="#s23"><</a>
1.782 + <a href="#s25">></a>
1.783 + </div>
1.784 + <h1>Intro to paginated reflow</h1>
1.785 + <ul>
1.786 + <li>Special assumptions
1.787 + <ul>
1.788 + <li>There are only initial and (possibly) resize reflows. Incremental
1.789 + and style change reflows are not allowed.</li>
1.790 + <li>Multiple resize reflows may be necessary (e.g. a child is truncated and gets reflowed on a
1.791 + subsequent page) but they should not change the available width from the last time.</li>
1.792 + <li>Multiple resize reflows may require special handling if a frame split previously. It may need
1.793 + to "pull up" children from a continuation.</li>
1.794 + </ul>
1.795 + </li>
1.796 + </ul>
1.797 +</div>
1.798 +
1.799 +<div class="slide" id="s25">
1.800 + <div class="nav">
1.801 + <a href="#s24"><</a>
1.802 + <a href="#s26">></a>
1.803 + </div>
1.804 + <h1>Table paginated reflow</h1>
1.805 + <ul>
1.806 + <li>The block containing the outer table reflows it. If it is incomplete, the block will
1.807 + <ul>
1.808 + <li>create a continuation for the outer table (which also creates a continuation for the table).</li>
1.809 + <li>put the continuation on a new line and place that line on its overflow lines property.</li>
1.810 + </ul>
1.811 + </li>
1.812 + <li>The outer table reflows the table and just returns the status of the table.</li>
1.813 + <li>The table does a pass 1 reflow and balances. If it is incomplete,</li>
1.814 + <ul>
1.815 + <li>it will become the first-in-flow</li>
1.816 + <li>it will be the only frame among its continuations to ever balance or calc the cell map, and it only
1.817 + does this once</li>
1.818 + </ul>
1.819 + </li>
1.820 + </ul>
1.821 +</div>
1.822 +
1.823 +<div class="slide" id="s26">
1.824 + <div class="nav">
1.825 + <a href="#s25"><</a>
1.826 + <a href="#s27">></a>
1.827 + </div>
1.828 + <h1>Table paginated reflow</h1>
1.829 + <ul>
1.830 + <li>The table does a pass 2 reflow constraining both avail heights and widths. If a row group is incomplete, the table
1.831 + <ul>
1.832 + <li>creates a continuation for the row group</li>
1.833 + <li>puts the continuation in its overflow frames property</li>
1.834 + </ul>
1.835 + </li>
1.836 + <li>What follows only applies during the pass 2 reflow.</li>
1.837 + <li>The row group</li>
1.838 + <ul>
1.839 + <li>reflows all of its rows with unconstrained heights and calculates the row heights,</li>
1.840 + <li>figures out which row falls on a page boundary and reflows it with a constrained height. If there
1.841 + will be a pass 3 reflow then this should (bug) happen at that time instead.</li>
1.842 + </ul>
1.843 + </li>
1.844 + </ul>
1.845 +</div>
1.846 +
1.847 +<div class="slide" id="s27">
1.848 + <div class="nav">
1.849 + <a href="#s26"><</a>
1.850 + <a href="#s28">></a>
1.851 + </div>
1.852 + <h1>Table paginated reflow</h1>
1.853 + <ul>
1.854 + <li>The row group (continued)</li>
1.855 + <ul>
1.856 + <li>creates a continuation for the incomplete row (which also creates continuations for all of its cells
1.857 + and all of the cell blocks)</li>
1.858 + <li>puts the continuation in its overflow frames property. If the row was truncated and not top of page,
1.859 + the row is put in the overflow frames property.
1.860 + </ul>
1.861 + </li>
1.862 + </ul>
1.863 +</div>
1.864 +
1.865 +<div class="slide" id="s28">
1.866 + <div class="nav">
1.867 + <a href="#s27"><</a>
1.868 + <a href="#s0">></a>
1.869 + </div>
1.870 + <h1>Table paginated reflow</h1>
1.871 + <ul>
1.872 + <li>The row and cells (getting the constrained height reflow) just reflow their children with a constrained height.
1.873 + They don't need an overflow list for continued children because the continuations were created when the
1.874 + row group created the row's continutation.</li>
1.875 + <li>A cell is incomplete because its block is incomplete. The block uses the overflow lines mechanism
1.876 + (mentioned above) for its continued children</li>
1.877 + </li>
1.878 + <li>There are two splitting scenarios for a table
1.879 + <ul>
1.880 + <li>An incomplete cells block causes the cell, row, row group, table, outer table to
1.881 + be incomplete</li>
1.882 + <li>A truncated row or a row that started too far down the page causes the row group,
1.883 + table, outer table to be incomplete.</li>
1.884 + </ul>
1.885 + </li>
1.886 + </ul>
1.887 +</div>
1.888 +
1.889 +
1.890 +</body>
1.891 +</html>
