Table Reflow Internals
Tech Talk

Aug 5, 2002

Chris Karnaze

Overview

Review of Reflow

Review of Reflow

Review of Reflow

Review of Reflow

Review of Reflow

Kinds of reflows

Kinds of reflows

Table Frames


nsTableOuter Frame
nsTable
Frame
nsTableCaption
Frame
nsTableCol
GroupFrame
nsTableRow
GroupFrame
nsBlockFrame
nsTableCol
Frame
nsTableRow
Frame
nsTableCell
Frame
nsBlock
Frame

Table Reflow

Table Reflow

Table Reflow Example

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

 frame reflow debugging gives instructions 
 for turning this on.
 
<table width=300>
  <tr>
    <td>foo</td>
    <td>bar zap</td>
  </tr>
</table>
     


Key:

  r  = reflow reason, 
       0 (initial),
       2 (resize) 
  a  = avail w, h
  c  = computed w, h
  d  = desired w, h
  me = max elem w
     
	

Table reflow optimizations

Table incremental reflow

Table incremental reflow

Special height reflow

Special Reflow Example

<table border=2 width=300>
  <tr>
    <td>
      This cell's width is 
      constrained by the 
      table and image widths. 
      Its exact height is 
      hard to determine.
    </td>
    <td>
      <img src=raptor.jpg
       width=200 height=100%>
    </td>
  </tr>
</table>
     
This cell's width is constrained by the table and image widths.

Its height is hard to determine.

The image needs to be as high as the cell.

Special height reflow

Special height reflow

Intro to paginated reflow

Pagination Illustration

nsSimplePageSequence
nsPageFrame
nsPageContentFrame
areaFrame (html)
blockFrame (body)
nsTableWrapperFrame

nsTableWrapperFrame
blockFrame (body)
areaFrame (html)
nsPageContentFrame continued
nsPageFrame continued

Intro to paginated reflow

Intro to paginated reflow

Intro to paginated reflow

Table paginated reflow

Table paginated reflow

Table paginated reflow

Table paginated reflow