mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

doc changes, not affecting the build.

This commit is contained in:
karnaze%netscape.com 2002-08-05 00:26:59 +00:00
Родитель 6c210f5e48
Коммит 427dffcdd5
2 изменённых файлов: 198 добавлений и 105 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

Двоичные данные
layout/doc/raptor.jpg Normal file
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 48 KiB

297
layout/doc/table_reflow_slides.html
Просмотреть файл

@ -97,7 +97,7 @@
}
table td {
text-align: left;
/*text-align: center;*/
empty-cells: hide;
}
@ -123,19 +123,40 @@
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%;
}
</style>
</head>
<body>
<div class="slide" id="s0">
<div class="nav">
<a href="#s25">&lt;</a>
<a href="#s28">&lt;</a>
<a href="#s1">&gt;</a>
</div>
<table style="margin: auto"><tr><td>
@ -191,22 +212,19 @@
</div>
<h1>Review of Reflow</h1>
<ul>
<li>Reflow starts with pres shell which reflows the reflow root (usually the view port frame),
which reflows it children, etc.</li>
<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</li>
<li>Positions reflowee (if it can) before actually reflowing in case views are involved <span class="comment">could you specify when those are involved</span></li>
<li>Reflows reflowee and passes a reflow state (in) and a reflow metrics (in/out)</li>
</ul>
</li>
<li>the reflow state
<ul>
<li>Is a node in a tree structurally equavalent to the frame tree of reflow paticipants</li>
<li>contains reflow type, avail size, various computed values, resolved style structs</li>
<li>possible request for preferred size and more.</li>
</ul>
</li>
</ul>
</div>
@ -217,20 +235,18 @@
</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>
<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 equavalent to preferred size if the avail size is not constrained.</li>
<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>
<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>
</ul>
@ -241,16 +257,15 @@
<a href="#s4">&lt;</a>
<a href="#s6">&gt;</a>
</div>
<h1>Kinds of reflows</h1>
<h1>Review of Reflow</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, reflow command types are:</li>
</li>
<li>the reflow metrics contains:
<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>
<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>
@ -261,9 +276,49 @@
<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>incremental reflow
<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>
@ -278,18 +333,35 @@
</ul>
</div>
<div class="slide" id="s7">
<div class="slide" id="s9">
<div class="nav">
<a href="#s6">&lt;</a>
<a href="#s8">&gt;</a>
<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="s8">
<div class="slide" id="s10">
<div class="nav">
<a href="#s7">&lt;</a>
<a href="#s9">&gt;</a>
<a href="#s9">&lt;</a>
<a href="#s11">&gt;</a>
</div>
<h1>Table Reflow</h1>
<ul>
@ -298,10 +370,24 @@
<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, row groups, rows, cells the preferred and max element sizes of the cells
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>
@ -311,10 +397,10 @@
</ul>
</div>
<div class="slide" id="s9">
<div class="slide" id="s12">
<div class="nav">
<a href="#s8">&lt;</a>
<a href="#s10">&gt;</a>
<a href="#s11">&lt;</a>
<a href="#s13">&gt;</a>
</div>
<h1>Table Reflow Example</h1>
<table width=100%>
@ -377,15 +463,15 @@ Key:
</table>
</div>
<div class="slide" id="s10">
<div class="slide" id="s13">
<div class="nav">
<a href="#s9">&lt;</a>
<a href="#s11">&gt;</a>
<a href="#s12">&lt;</a>
<a href="#s14">&gt;</a>
</div>
<h1>Table reflow optimizations</h1>
<ul>
<li>If the table 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.</li>
<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>Outer table caches last avail width and avoids reflowing children if resize reflow is the same as previous</li>
@ -395,10 +481,10 @@ Key:
</div>
<div class="slide" id="s11">
<div class="slide" id="s14">
<div class="nav">
<a href="#s10">&lt;</a>
<a href="#s12">&gt;</a>
<a href="#s13">&lt;</a>
<a href="#s15">&gt;</a>
</div>
<h1>Table incremental reflow</h1>
<ul>
@ -406,15 +492,15 @@ Key:
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).</li>
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="s12">
<div class="slide" id="s15">
<div class="nav">
<a href="#s11">&lt;</a>
<a href="#s13">&gt;</a>
<a href="#s14">&lt;</a>
<a href="#s16">&gt;</a>
</div>
<h1>Table incremental reflow</h1>
<ul>
@ -427,10 +513,10 @@ Key:
</ul>
</div>
<div class="slide" id="s13">
<div class="slide" id="s16">
<div class="nav">
<a href="#s12">&lt;</a>
<a href="#s14">&gt;</a>
<a href="#s15">&lt;</a>
<a href="#s17">&gt;</a>
</div>
<h1>Special height reflow</h1>
<ul>
@ -446,16 +532,16 @@ Key:
</div>
</div>
<div class="slide" id="s14">
<div class="slide" id="s17">
<div class="nav">
<a href="#s13">&lt;</a>
<a href="#s15">&gt;</a>
<a href="#s16">&lt;</a>
<a href="#s18">&gt;</a>
</div>
<h1>Special Reflow Example</h1>
<table width=100%>
<table width=100% style="text-align:left;">
<tr>
<td>
<pre style="font-size:.7em;">
<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;
@ -477,8 +563,8 @@ Key:
<table border=2 width=300>
<tr>
<td style="font-size:.7em;">This cell's width is constrained
by the table and image widths. Its height
is hard to determine.
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>
<img src="raptor.jpg"
width=200 height=100%>
@ -490,18 +576,11 @@ Key:
</table>
</div>
<div class="slide" id="s15">
<div class="nav">
<a href="#s14">&lt;</a>
<a href="#s16">&gt;</a>
</div>
<h1>Special height reflow</h1>
</div>
<div class="slide" id="s16">
<div class="slide" id="s18">
<div class="nav">
<a href="#s15">&lt;</a>
<a href="#s17">&gt;</a>
<a href="#s17">&lt;</a>
<a href="#s19">&gt;</a>
</div>
<h1>Special height reflow</h1>
<ul>
@ -524,10 +603,10 @@ Key:
</li>
</div>
<div class="slide" id="s17">
<div class="slide" id="s19">
<div class="nav">
<a href="#s16">&lt;</a>
<a href="#s18">&gt;</a>
<a href="#s18">&lt;</a>
<a href="#s20">&gt;</a>
</div>
<h1>Special height reflow</h1>
<ul>
@ -539,10 +618,10 @@ Key:
</li>
</div>
<div class="slide" id="s18">
<div class="slide" id="s20">
<div class="nav">
<a href="#s17">&lt;</a>
<a href="#s19">&gt;</a>
<a href="#s19">&lt;</a>
<a href="#s21">&gt;</a>
</div>
<h1>Intro to paginated reflow</h1>
<ul>
@ -558,10 +637,10 @@ Key:
</ul>
</div>
<div class="slide" id="s19">
<div class="slide" id="s21">
<div class="nav">
<a href="#s18">&lt;</a>
<a href="#s20">&gt;</a>
<a href="#s20">&lt;</a>
<a href="#s22">&gt;</a>
</div>
<h1>Pagination Illustration</h1>
<table class=box style="height:500px">
@ -640,10 +719,10 @@ Key:
</table>
</div>
<div class="slide" id="s20">
<div class="slide" id="s22">
<div class="nav">
<a href="#s19">&lt;</a>
<a href="#s21">&gt;</a>
<a href="#s21">&lt;</a>
<a href="#s23">&gt;</a>
</div>
<h1>Intro to paginated reflow</h1>
<ul>
@ -656,10 +735,10 @@ Key:
</ul>
</div>
<div class="slide" id="s21">
<div class="slide" id="s23">
<div class="nav">
<a href="#s20">&lt;</a>
<a href="#s22">&gt;</a>
<a href="#s22">&lt;</a>
<a href="#s24">&gt;</a>
</div>
<h1>Intro to paginated reflow</h1>
<ul>
@ -678,10 +757,10 @@ Key:
</ul>
</div>
<div class="slide" id="s22">
<div class="slide" id="s24">
<div class="nav">
<a href="#s21">&lt;</a>
<a href="#s23">&gt;</a>
<a href="#s23">&lt;</a>
<a href="#s25">&gt;</a>
</div>
<h1>Intro to paginated reflow</h1>
<ul>
@ -698,10 +777,10 @@ Key:
</ul>
</div>
<div class="slide" id="s23">
<div class="slide" id="s25">
<div class="nav">
<a href="#s22">&lt;</a>
<a href="#s24">&gt;</a>
<a href="#s24">&lt;</a>
<a href="#s26">&gt;</a>
</div>
<h1>Table paginated reflow</h1>
<ul>
@ -722,10 +801,10 @@ Key:
</ul>
</div>
<div class="slide" id="s24">
<div class="slide" id="s26">
<div class="nav">
<a href="#s23">&lt;</a>
<a href="#s25">&gt;</a>
<a href="#s25">&lt;</a>
<a href="#s27">&gt;</a>
</div>
<h1>Table paginated reflow</h1>
<ul>
@ -741,7 +820,21 @@ Key:
<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>
<li>creates a continuation for incomplete the row (which also creates continuations for all of its cells
</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.
@ -750,9 +843,9 @@ Key:
</ul>
</div>
<div class="slide" id="s25">
<div class="slide" id="s28">
<div class="nav">
<a href="#s24">&lt;</a>
<a href="#s27">&lt;</a>
<a href="#s0">&gt;</a>
</div>
<h1>Table paginated reflow</h1>