tree: ddb46672d98d0626d364be6d6733ce3c311e6391 [path history] [tgz]
  1. DisplayTree/
  2. FormattingContext/
  3. FormattingState/
  4. LayoutReloaded.xcworkspace/
  5. LayoutTree/
  6. misc/
  7. test/
  8. Layout.js
  9. LayoutState.js
  11. TreeBuilder.js
  12. Utils.js

Visual formatting model implementation. See for more information.


  1. recursive layout
  2. layout logic lives in the renderers mixing block with inline etc.
  3. No clear separation of logic and state.


  1. Iterative layout within a formatting context, recursive across nested formatting contexts
  2. Formatting context is responsible for computing size/positions for all the boxes that live in the context including in/out-of-flow and floating boxes
  3. Layout state is stored in dedicated FormattingState objects.
  4. Initial containing block creates the top level (initial) block formatting context
  5. Floats are resitriced to their formatting contexts.
  6. Boxes, including inline tree are generated while laying out the content. LayoutTree -> BoxTree.


  1. apply ./misc/LayoutReloadedWebKit.patch
  2. compile WebKit
  3. load ./test/index.html

Partially done: Block formatting context:

  • static, relative and out of flow positioning
  • margin collapsing
  • floats


  • Inline formatting context
  • Everything else