Google Git
Sign in
chromium / chromium / src / 660b3866aba5c7195935ba0987ee3af9ea5a0649 / . / third_party / WebKit / Source / core / layout / ng
tree: fedb1d6c1d8222db29487f9e8d1daee474ecf712 [path history] [tgz]
  1. layout_ng_block_flow.cc
  2. layout_ng_block_flow.h
  3. ng_absolute_utils.cc
  4. ng_absolute_utils.h
  5. ng_absolute_utils_test.cc
  6. ng_bidi_paragraph.cc
  7. ng_bidi_paragraph.h
  8. ng_block_break_token.h
  9. ng_block_layout_algorithm.cc
  10. ng_block_layout_algorithm.h
  11. ng_block_layout_algorithm_test.cc
  12. ng_block_node.cc
  13. ng_block_node.h
  14. ng_block_node_test.cc
  15. ng_box_fragment.cc
  16. ng_box_fragment.h
  17. ng_break_token.h
  18. ng_column_mapper.h
  19. ng_constraint_space.cc
  20. ng_constraint_space.h
  21. ng_constraint_space_builder.cc
  22. ng_constraint_space_builder.h
  23. ng_constraint_space_test.cc
  24. ng_floating_object.h
  25. ng_fragment.cc
  26. ng_fragment.h
  27. ng_fragment_builder.cc
  28. ng_fragment_builder.h
  29. ng_inline_layout_algorithm.cc
  30. ng_inline_layout_algorithm.h
  31. ng_inline_node.cc
  32. ng_inline_node.h
  33. ng_inline_node_test.cc
  34. ng_layout_algorithm.h
  35. ng_layout_inline_items_builder.cc
  36. ng_layout_inline_items_builder.h
  37. ng_layout_inline_items_builder_test.cc
  38. ng_layout_input_node.cc
  39. ng_layout_input_node.h
  40. ng_layout_opportunity_iterator.cc
  41. ng_layout_opportunity_iterator.h
  42. ng_layout_opportunity_tree_node.cc
  43. ng_layout_opportunity_tree_node.h
  44. ng_legacy_block_layout_algorithm.cc
  45. ng_legacy_block_layout_algorithm.h
  46. ng_length_utils.cc
  47. ng_length_utils.h
  48. ng_length_utils_test.cc
  49. ng_line_builder.cc
  50. ng_line_builder.h
  51. ng_macros.h
  52. ng_out_of_flow_layout_part.cc
  53. ng_out_of_flow_layout_part.h
  54. ng_physical_box_fragment.cc
  55. ng_physical_box_fragment.h
  56. ng_physical_fragment.cc
  57. ng_physical_fragment.h
  58. ng_physical_text_fragment.h
  59. ng_text_fragment.cc
  60. ng_text_fragment.h
  61. ng_text_layout_algorithm.cc
  62. ng_text_layout_algorithm.h
  63. ng_units.cc
  64. ng_units.h
  65. ng_units_test.cc
  66. ng_writing_mode.cc
  67. ng_writing_mode.h
  68. OWNERS
  69. PRESUBMIT.py
  70. README.md
third_party/WebKit/Source/core/layout/ng/README.md

LayoutNG

This directory contains the implementation of Blink's new layout engine “LayoutNG”.

This README can be viewed in formatted form here.

The original design document can be seen here.

High level overview

CSS has many different types of layout modes, controlled by the display property. (In addition to this specific HTML elements have custom layout modes as well). For each different type of layout, we have a NGLayoutAlgorithm.

The input to an NGLayoutAlgorithm is the same tuple for every kind of layout:

  • The NGBlockNode which we are currently performing layout for. The following information is accessed:

    • The ComputedStyle for the node which we are currently performing laying for.

    • The list of children NGBlockNodees to perform layout upon, and their respective style objects.

  • The NGConstraintSpace which represents the “space” in which the current layout should produce a NGPhysicalFragment.

  • TODO(layout-dev): BreakTokens should go here once implemented.

The current layout should not access any information outside this set, this will break invariants in the system. (As a concrete example we intend to cache NGPhysicalFragments based on this set, accessing additional information outside this set will break caching behaviour).

Box Tree

TODO(layout-dev): Document with lots of pretty pictures.

Inline Layout

For inline layout there is a pre-layout pass that prepares the internal data structures needed to perform line layout.

The pre-layout pass, triggered by calling NGInlineNode::PrepareLayout(), has three separate steps or stages that are executed in order:

  • CollectInlines: Performs a depth-first scan of the container collecting all non-atomic inlines and TextNodess. Atomic inlines are represented as a unicode object replacement character but are otherwise skipped. Each non-atomic inline and TextNodes is fed to a NGLayoutInlineItemsBuilder instance which collects the text content for all non-atomic inlines in the container.

    During this process white-space is collapsed and normalized according to CSS white-space processing rules.

  • SegmentText: Performs BiDi segmentation using NGBidiParagraph.

    TODO(kojii): Fill out

  • ShapeText: Shapes the resolved BiDi runs using HarfBuzz. TODO(eae): Fill out

Fragment Tree

TODO(layout-dev): Document with lots of pretty pictures.

Constraint Spaces

TODO(layout-dev): Document with lots of pretty pictures.

Block Flow Algorithm

This section contains details specific to the NGBlockLayoutAlgorithm.

Collapsing Margins

TODO(layout-dev): Document with lots of pretty pictures.

Float Positioning

TODO(layout-dev): Document with lots of pretty pictures.