• Skip to main content
  • Select language
  • Skip to search
MDN Web Docs
  • Technologies
    • HTML
    • CSS
    • JavaScript
    • Graphics
    • HTTP
    • APIs / DOM
    • WebExtensions
    • MathML
  • References & Guides
    • Learn web development
    • Tutorials
    • References
    • Developer Guides
    • Accessibility
    • Game development
    • ...more docs
Archive of obsolete content
  1. MDN
  2. Archive of obsolete content
  3. Table Reflow Internals

Table Reflow Internals

In This Article
    1. Overview
    2. Review of Reflow
    3. Review of Reflow
    4. Review of Reflow
    5. Review of Reflow
    6. Review of Reflow
    7. Kinds of reflows
    8. Kinds of reflows
    9. Table Frames
    10. Table Reflow
    11. Table Reflow
    12. Table Reflow Example
    13. Table reflow optimizations
    14. Table incremental reflow
    15. Table incremental reflow
    16. Special height reflow
    17. Special Reflow Example
    18. Special height reflow
    19. Special height reflow
    20. Intro to paginated reflow
    21. Pagination Illustration
    22. Intro to paginated reflow
    23. Intro to paginated reflow
    24. Intro to paginated reflow
    25. Table paginated reflow
    26. Table paginated reflow
    27. Table paginated reflow
    28. Table paginated reflow
  1. Original Document Information

Overview

  • Review of reflow
  • Table frames
  • Table reflow
  • Intro to paginated reflow
  • Table paginated reflow

Review of Reflow

  • Reflow process starts when
    • An html document starts loading (the frame tree contains only viewport, scroll(s), canvas, html, body).
    • The initial chunk of an xml doc is loaded.
    • 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.
    • Content is inserted, appended, or deleted through the DOM. The container posts a dirty reflow command with itself as the target.
    • Style changes through the DOM - javascript, browser change font (CTRL+/-), a preference changes, etc.

Review of Reflow

  • Reflow starts with pres shell
    • Which reflows the reflow root (usually the viewport frame),
    • Which reflows it children, etc.
  • Ususally it starts when the pres shell processes its queue of reflow commands.
  • The reflower
    • Positions reflowee (if it can) before actually reflowing in case views are involved (e.g. absolutely positioned elements)
    • Reflows reflowee and passes a reflow state (in) and a reflow metrics (in/out)

Review of Reflow

  • The reflow state:
    • Is a node in a tree structurally equivalent to the frame tree of reflow participants
    • contains:
      • reflow type,
      • avail size,
      • various computed values,
      • resolved style structs
      • possible request for preferred size and more.

Review of Reflow

  • the reflow metrics contains:
    • max element size (if requested) - the minimum size it can be
    • preferred size (if requested) - the size it would like to be given no size constraints.
    • 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.

Review of Reflow

  • The reflowee sets various sizes in the reflow metrics after (possibly) reflowing some or all of its children which reflows it children, etc.
  • The reflowee returns a reflow status which indicates
    • if it is complete, and thus not have to continue (split)
    • breaking status (in the case of some inline frames)
    • if there is truncation (it can't fit in the space and can't split). This is just a convience mechanism.

Kinds of reflows

  • Initial - reflowee's first reflow must be of this type (reflower's responsibility).
  • Resize - reflowee gets a change in available space only. Similar to initial, except it can reoccur.
  • Incremental - has a reflow path (tree) where each node has a command with a target frame, reflow command types are:
    • dirty - something changed inside a target (e.g. it gains, loses children)
    • style changed - a target changed stylisticly (recall, size is a style property)
    • content changed - a target's content changed (e.g. a text run)
    • user defined - currently only used for fixed positioned frames

Kinds of reflows

  • Incremental reflow (continued)
    • reflower not allowed to change available size of reflowee
    • reflow commands get coalesced to streamline processing
  • Style change
    • a target changed stylistic if there is a target, otherwise every frame may need to respond
    • parent of target usually turns it into an incremental reflow with a style changed command type

Table Frames

             
        nsTableOuter
Frame
   
      ↙   ↘
    nsTable
Frame
      nsTableCaption
Frame
  ↙   ↘     ↓
nsTableCol
GroupFrame
      nsTableRow
GroupFrame
  nsBlockFrame
↓       ↓
nsTableCol
Frame
      nsTableRow
Frame
        ↓
        nsTableCell
Frame
        ↓
        nsBlock
Frame

Table Reflow

  • Outer table reflows table and caption (if present)
  • Table reflows row groups in multiple passes
    • Pass 1 - unconstrained width, height and requests max elem width.
    • 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
    • Pass 2 - cell widths are constrained by the column widths (heights are only constrained in paginated mode).

Table Reflow

  • Table reflows row groups (continued)
    • The row group figures out the row heights given its style height constraints, its rows and cells, and the actual heights of its rows and cells from the pass 2 reflow.
    • If the table has a style height, it allocates extra height to its row groups, rows and cells.
  • In each pass, row groups reflow rows which reflow cells which reflow cell blocks.

Table Reflow Example

 <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

Debugging Frame Reflow gives instructions for turning this on:

 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

Table reflow optimizations

  • 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.
  • 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
  • Outer table caches last avail width and avoids reflowing children if resize reflow is the same as previous
  • Table caches max element, preferred widths in case they are requested and it isn't rebalanced
  • Cell caches prior avail width. if this doesn't change, the row may not have to reflow the cell

Table incremental reflow

  • Outer table is a target when a caption is added or removed (dirty) or the table or caption margin changes (style changed).
  • Caption is a target when it changes stylistically (style changed).
  • Table, row group, row, col group, col is a target when a child is added or removed (dirty) or it changes stylistically (style changed).
  • In the dirty cases, a target posted the reflow command in AppendFrames, InsertFrames, or DeleteFrame.

Table incremental reflow

  • In the style change cases where a target is between the table and the cell, the table is told to rebalance.
  • 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
  • When a target is inside the cell's block, the cell requests max element, preferred sizes of its block in case they change
  • After the table reflows the row group(s) containing the targets, if it rebalances, it then does a pass 2 reflow.

Special height reflow

  • When there is a % height frame inside a cell without a computed height
    • the frame will never get a chance to size based on the final cell height
    • 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
  • This can be fixed by doing a special 3rd pass 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.

Image:raptor.jpg

Special height reflow

  • The reflow state holds an observer and initiator
  • Observer
    • is the table cell used as the height basis
    • set by frame without computed height in DidReflow
    • gives its block a computed height during 3rd pass
    • doesn't change height during 3rd pass
  • Initiator
    • is the table containing the observer
    • starts the 3rd pass reflow and sets a bit in the reflow state
    • gives its block a computed height during 3rd pass
    • could also be inside a cell which is an observer

Special height reflow

  • Optimizations
    • only frames needing 3rd pass actually get it
    • frames gettting a 3rd pass only get it once

Intro to paginated reflow

  • 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.
    • If it can continue, it returns an incomplete status.
    • If it can't continue it returns a complete status.
  • A continuation may also need to be continued
  • Continuations are linked together by prevInFlow and nextInFlow pointers

Pagination Illustration

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

 

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

Intro to paginated reflow

  • 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).
  • The page was incomplete because the page content was incomplete because the doc root was incomplete
  • 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.

Intro to paginated reflow

  • If the reflowee is incomplete, the reflower has the responsiblity to:
    • Create a continuation for the reflowee
    • Ensure that the continuation gets put in the frame hierarchy at the right place and gets reflowed at the right time.
    • 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.
  • 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.

Intro to paginated reflow

  • Special assumptions
    • There are only initial and (possibly) resize reflows. Incremental and style change reflows are not allowed.
    • 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.
    • Multiple resize reflows may require special handling if a frame split previously. It may need to "pull up" children from a continuation.

Table paginated reflow

  • The block containing the outer table reflows it. If it is incomplete, the block will
    • create a continuation for the outer table (which also creates a continuation for the table).
    • put the continuation on a new line and place that line on its overflow lines property.
  • The outer table reflows the table and just returns the status of the table.
  • The table does a pass 1 reflow and balances. If it is incomplete,
    • it will become the first-in-flow
    • it will be the only frame among its continuations to ever balance or calc the cell map, and it only does this once

Table paginated reflow

  • The table does a pass 2 reflow constraining both avail heights and widths. If a row group is incomplete, the table
    • creates a continuation for the row group
    • puts the continuation in its overflow frames property
  • What follows only applies during the pass 2 reflow.
  • The row group
    • reflows all of its rows with unconstrained heights and calculates the row heights,
    • 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.

Table paginated reflow

  • The row group (continued)
    • creates a continuation for the incomplete row (which also creates continuations for all of its cells and all of the cell blocks)
    • 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.

Table paginated reflow

  • 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.
  • A cell is incomplete because its block is incomplete. The block uses the overflow lines mechanism (mentioned above) for its continued children
  • There are two splitting scenarios for a table
    • An incomplete cells block causes the cell, row, row group, table, outer table to be incomplete
    • A truncated row or a row that started too far down the page causes the row group, table, outer table to be incomplete.

Original Document Information

  • Author(s): Chris Karnaze
  • Last Updated Aug 7, 2002

Document Tags and Contributors

Tags: 
  • Gecko
 Contributors to this page: teoli, Dholbert, DBaron, Kohei
 Last updated by: Dholbert, Oct 20, 2008, 10:23:45 PM

  1. .htaccess ( hypertext access )
  2. <input> archive
  3. Add-ons
    1. Add-ons
    2. Firefox addons developer guide
    3. Interaction between privileged and non-privileged pages
    4. Tabbed browser
    5. bookmarks.export()
    6. bookmarks.import()
  4. Adding preferences to an extension
  5. An Interview With Douglas Bowman of Wired News
  6. Apps
    1. Apps
    2. App Development API Reference
    3. Designing Open Web Apps
    4. Graphics and UX
    5. Open web app architecture
    6. Tools and frameworks
    7. Validating web apps with the App Validator
  7. Archived Mozilla and build documentation
    1. Archived Mozilla and build documentation
    2. ActiveX Control for Hosting Netscape Plug-ins in IE
    3. Archived SpiderMonkey docs
    4. Autodial for Windows NT
    5. Automated testing tips and tricks
    6. Automatic Mozilla Configurator
    7. Automatically Handle Failed Asserts in Debug Builds
    8. BlackConnect
    9. Blackwood
    10. Bonsai
    11. Bookmark Keywords
    12. Building TransforMiiX standalone
    13. Chromeless
    14. Creating a Firefox sidebar extension
    15. Creating a Microsummary
    16. Creating a Mozilla Extension
    17. Creating a Release Tag
    18. Creating a Skin for Firefox/Getting Started
    19. Creating a Skin for Mozilla
    20. Creating a Skin for SeaMonkey 2.x
    21. Creating a hybrid CD
    22. Creating regular expressions for a microsummary generator
    23. DTrace
    24. Dehydra
    25. Developing New Mozilla Features
    26. Devmo 1.0 Launch Roadmap
    27. Download Manager improvements in Firefox 3
    28. Download Manager preferences
    29. Drag and Drop
    30. Embedding FAQ
    31. Embedding Mozilla in a Java Application using JavaXPCOM
    32. Error Console
    33. Exception logging in JavaScript
    34. Existing Content
    35. Extension Frequently Asked Questions
    36. Fighting Junk Mail with Netscape 7.1
    37. Firefox Sync
    38. Force RTL
    39. GRE
    40. Gecko Coding Help Wanted
    41. HTTP Class Overview
    42. Hacking wiki
    43. Help Viewer
    44. Helper Apps (and a bit of Save As)
    45. Hidden prefs
    46. How to Write and Land Nanojit Patches
    47. Introducing the Audio API extension
    48. Java in Firefox Extensions
    49. JavaScript crypto
    50. Jetpack
    51. Litmus tests
    52. Makefile.mozextension.2
    53. Microsummary topics
    54. Migrate apps from Internet Explorer to Mozilla
    55. Monitoring downloads
    56. Mozilla Application Framework
    57. Mozilla Crypto FAQ
    58. Mozilla Modules and Module Ownership
    59. Mozprocess
    60. Mozprofile
    61. Mozrunner
    62. Nanojit
    63. New Skin Notes
    64. Persona
    65. Plug-n-Hack
    66. Plugin Architecture
    67. Porting NSPR to Unix Platforms
    68. Priority Content
    69. Prism
    70. Proxy UI
    71. Remote XUL
    72. SXSW 2007 presentations
    73. Space Manager Detailed Design
    74. Space Manager High Level Design
    75. Standalone XPCOM
    76. Stress testing
    77. Structure of an installable bundle
    78. Supporting private browsing mode
    79. Table Cellmap
    80. Table Cellmap - Border Collapse
    81. Table Layout Regression Tests
    82. Table Layout Strategy
    83. Tamarin
    84. The Download Manager schema
    85. The life of an HTML HTTP request
    86. The new nsString class implementation (1999)
    87. TraceVis
    88. Treehydra
    89. URIScheme
    90. URIs and URLs
    91. Using Monotone With Mozilla CVS
    92. Using SVK With Mozilla CVS
    93. Using addresses of stack variables with NSPR threads on win16
    94. Venkman
    95. Video presentations
    96. Why Embed Gecko
    97. XML in Mozilla
    98. XPInstall
    99. XPJS Components Proposal
    100. XRE
    101. XTech 2005 Presentations
    102. XTech 2006 Presentations
    103. XUL Explorer
    104. XULRunner
    105. ant script to assemble an extension
    106. calICalendarView
    107. calICalendarViewController
    108. calIFileType
    109. xbDesignMode.js
  8. Archived open Web documentation
    1. Archived open Web documentation
    2. Browser Detection and Cross Browser Support
    3. Browser Feature Detection
    4. Displaying notifications (deprecated)
    5. E4X
    6. E4X Tutorial
    7. LiveConnect
    8. MSX Emulator (jsMSX)
    9. Old Proxy API
    10. Properly Using CSS and JavaScript in XHTML Documents
    11. Reference
    12. Scope Cheatsheet
    13. Server-Side JavaScript
    14. Sharp variables in JavaScript
    15. Standards-Compliant Authoring Tools
    16. Using JavaScript Generators in Firefox
    17. Window.importDialog()
    18. Writing JavaScript for XHTML
    19. XForms
    20. background-size
    21. forEach
  9. B2G OS
    1. B2G OS
    2. Automated Testing of B2G OS
    3. B2G OS APIs
    4. B2G OS add-ons
    5. B2G OS architecture
    6. B2G OS build prerequisites
    7. B2G OS phone guide
    8. Building B2G OS
    9. Building and installing B2G OS
    10. Building the B2G OS Simulator
    11. Choosing how to run Gaia or B2G
    12. Customization with the .userconfig file
    13. Debugging on Firefox OS
    14. Developer Mode
    15. Developing Firefox OS
    16. Firefox OS Simulator
    17. Firefox OS apps
    18. Firefox OS board guide
    19. Firefox OS developer release notes
    20. Firefox OS security
    21. Firefox OS usage tips
    22. Gaia
    23. Installing B2G OS on a mobile device
    24. Introduction to Firefox OS
    25. Mulet
    26. Open web apps quickstart
    27. Pandaboard
    28. PasscodeHelper Internals
    29. Porting B2G OS
    30. Preparing for your first B2G build
    31. Resources
    32. Running tests on Firefox OS: A guide for developers
    33. The B2G OS platform
    34. Troubleshooting B2G OS
    35. Using the App Manager
    36. Using the B2G emulators
    37. Web Bluetooth API (Firefox OS)
    38. Web Telephony API
    39. Web applications
  10. Beginner tutorials
    1. Beginner tutorials
    2. Creating reusable content with CSS and XBL
    3. Underscores in class and ID Names
    4. XML data
    5. XUL user interfaces
  11. Case Sensitivity in class and id Names
  12. Creating a dynamic status bar extension
  13. Creating a status bar extension
  14. Gecko Compatibility Handbook
  15. Getting the page URL in NPAPI plugin
  16. Index
  17. Inner-browsing extending the browser navigation paradigm
  18. Install.js
  19. JXON
  20. List of Former Mozilla-Based Applications
  21. List of Mozilla-Based Applications
  22. Localizing an extension
  23. MDN
    1. MDN
    2. Content kits
  24. MDN "meta-documentation" archive
    1. MDN "meta-documentation" archive
    2. Article page layout guide
    3. Blog posts to integrate into documentation
    4. Current events
    5. Custom CSS classes for MDN
    6. Design Document
    7. DevEdge
    8. Developer documentation process
    9. Disambiguation
    10. Documentation Wishlist
    11. Documentation planning and tracking
    12. Editing MDN pages
    13. Examples
    14. Existing Content/DOM in Mozilla
    15. External Redirects
    16. Finding the right place to document bugs
    17. Getting started as a new MDN contributor
    18. Landing page layout guide
    19. MDN content on WebPlatform.org
    20. MDN page layout guide
    21. MDN subproject list
    22. Needs Redirect
    23. Page types
    24. RecRoom documentation plan
    25. Remove in-content iframes
    26. Team status board
    27. Trello
    28. Using the Mozilla Developer Center
    29. Welcome to the Mozilla Developer Network
    30. Writing chrome code documentation plan
    31. Writing content
  25. MMgc
  26. Makefile - .mk files
  27. Marketplace
    1. Marketplace
    2. API
    3. Monetization
    4. Options
    5. Publishing
  28. Mozilla release FAQ
  29. Newsgroup summaries
    1. Newsgroup summaries
    2. Format
    3. Mozilla.dev.apps.firefox-2006-09-29
    4. Mozilla.dev.apps.firefox-2006-10-06
    5. mozilla-dev-accessibility
    6. mozilla-dev-apps-calendar
    7. mozilla-dev-apps-firefox
    8. mozilla-dev-apps-thunderbird
    9. mozilla-dev-builds
    10. mozilla-dev-embedding
    11. mozilla-dev-extensions
    12. mozilla-dev-i18n
    13. mozilla-dev-l10n
    14. mozilla-dev-planning
    15. mozilla-dev-platform
    16. mozilla-dev-quality
    17. mozilla-dev-security
    18. mozilla-dev-tech-js-engine
    19. mozilla-dev-tech-layout
    20. mozilla-dev-tech-xpcom
    21. mozilla-dev-tech-xul
    22. mozilla.dev.apps.calendar
    23. mozilla.dev.tech.js-engine
  30. Obsolete: XPCOM-based scripting for NPAPI plugins
  31. Plugins
    1. Plugins
    2. Adobe Flash
    3. External resources for plugin creation
    4. Logging Multi-Process Plugins
    5. Monitoring plugins
    6. Multi-process plugin architecture
    7. NPAPI plugin developer guide
    8. NPAPI plugin reference
    9. Samples and Test Cases
    10. Shipping a plugin as a Toolkit bundle
    11. Supporting private browsing in plugins
    12. The First Install Problem
    13. Writing a plugin for Mac OS X
    14. XEmbed Extension for Mozilla Plugins
  32. SAX
  33. Security
    1. Security
    2. Digital Signatures
    3. Encryption and Decryption
    4. Introduction to Public-Key Cryptography
    5. Introduction to SSL
    6. NSPR Release Engineering Guide
    7. SSL and TLS
  34. Solaris 10 Build Prerequisites
  35. Sunbird Theme Tutorial
  36. Table Reflow Internals
  37. Tamarin Tracing Build Documentation
  38. The Basics of Web Services
  39. Themes
    1. Themes
    2. Building a Theme
    3. Common Firefox theme issues and solutions
    4. Creating a Skin for Firefox
    5. Making sure your theme works with RTL locales
    6. Theme changes in Firefox 2
    7. Theme changes in Firefox 3
    8. Theme changes in Firefox 3.5
    9. Theme changes in Firefox 4
  40. Updating an extension to support multiple Mozilla applications
  41. Using IO Timeout And Interrupt On NT
  42. Using SSH to connect to CVS
  43. Using workers in extensions
  44. WebVR
    1. WebVR
    2. WebVR environment setup
  45. XQuery
  46. XUL Booster
  47. XUL Parser in Python