OLD | NEW |
1 # LayoutNG # | 1 # LayoutNG # |
2 | 2 |
3 This directory contains the implementation of Blink's new layout engine | 3 This directory contains the implementation of Blink's new layout engine |
4 "LayoutNG". | 4 "LayoutNG". |
5 | 5 |
6 This README can be viewed in formatted form [here](https://chromium.googlesource
.com/chromium/src/+/master/third_party/WebKit/Source/core/layout/ng/README.md). | 6 This README can be viewed in formatted form [here](https://chromium.googlesource
.com/chromium/src/+/master/third_party/WebKit/Source/core/layout/ng/README.md). |
7 | 7 |
8 The original design document can be seen [here](https://docs.google.com/document
/d/1uxbDh4uONFQOiGuiumlJBLGgO4KDWB8ZEkp7Rd47fw4/edit). | 8 The original design document can be seen [here](https://docs.google.com/document
/d/1uxbDh4uONFQOiGuiumlJBLGgO4KDWB8ZEkp7Rd47fw4/edit). |
9 | 9 |
10 ## High level overview ## | 10 ## High level overview ## |
(...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
51 | 51 |
52 - `CollectInlines`: Performs a depth-first scan of the container collecting | 52 - `CollectInlines`: Performs a depth-first scan of the container collecting |
53 all non-atomic inlines and `TextNodes`s. Atomic inlines are represented as a | 53 all non-atomic inlines and `TextNodes`s. Atomic inlines are represented as a |
54 unicode object replacement character but are otherwise skipped. | 54 unicode object replacement character but are otherwise skipped. |
55 Each non-atomic inline and `TextNodes` is fed to a | 55 Each non-atomic inline and `TextNodes` is fed to a |
56 [NGLayoutInlineItemsBuilder](ng_layout_inline_items_builder.h) instance | 56 [NGLayoutInlineItemsBuilder](ng_layout_inline_items_builder.h) instance |
57 which collects the text content for all non-atomic inlines in the container. | 57 which collects the text content for all non-atomic inlines in the container. |
58 | 58 |
59 During this process white-space is collapsed and normalized according to CSS | 59 During this process white-space is collapsed and normalized according to CSS |
60 white-space processing rules. | 60 white-space processing rules. |
61 | 61 |
62 - `SegmentText`: Performs BiDi segmentation using | 62 - `SegmentText`: Performs BiDi segmentation using |
63 [NGBidiParagraph](ng_bidi_paragraph.h). | 63 [NGBidiParagraph](ng_bidi_paragraph.h). |
64 | 64 |
65 TODO(kojii): Fill out | 65 TODO(kojii): Fill out |
66 | 66 |
67 - `ShapeText`: Shapes the resolved BiDi runs using HarfBuzz. | 67 - `ShapeText`: Shapes the resolved BiDi runs using HarfBuzz. |
68 TODO(eae): Fill out | 68 TODO(eae): Fill out |
69 | 69 |
70 ### Fragment Tree ### | 70 ### Fragment Tree ### |
71 | 71 |
72 TODO(layout-dev): Document with lots of pretty pictures. | 72 TODO(layout-dev): Document with lots of pretty pictures. |
73 | 73 |
74 ### Constraint Spaces ### | 74 ### Constraint Spaces ### |
75 | 75 |
76 TODO(layout-dev): Document with lots of pretty pictures. | 76 TODO(layout-dev): Document with lots of pretty pictures. |
77 | 77 |
78 ## Block Flow Algorithm ## | 78 ## Block Flow Algorithm ## |
79 | 79 |
80 This section contains details specific to the | 80 This section contains details specific to the |
81 [NGBlockLayoutAlgorithm](ng_block_layout_algorithm.h). | 81 [NGBlockLayoutAlgorithm](ng_block_layout_algorithm.h). |
82 | 82 |
83 ### Collapsing Margins ### | 83 ### Collapsing Margins ### |
84 | 84 |
85 TODO(layout-dev): Document with lots of pretty pictures. | 85 TODO(layout-dev): Document with lots of pretty pictures. |
86 | 86 |
87 ### Float Positioning ### | 87 ### Float Positioning ### |
88 | 88 |
89 TODO(layout-dev): Document with lots of pretty pictures. | 89 TODO(layout-dev): Document with lots of pretty pictures. |
| 90 |
| 91 ### Code coverage ### |
| 92 |
| 93 The latest code coverage (from Feb 14 2017) can be found [here](https://glebl.us
ers.x20web.corp.google.com/www/layout_ng_code_coverage/index.html). |
| 94 Here is the instruction how to generate a new result. |
| 95 |
| 96 #### Environment setup #### |
| 97 1. Set up Chromium development environment for Windows |
| 98 2. Download DynamoRIO from [www.dynamorio.org](www.dynamorio.org) |
| 99 3. Extract downloaded DynamoRIO package into your chromium/src folder. |
| 100 4. Get dynamorio.git and extract it into your chromium/src folder `git clone ht
tps://github.com/DynamoRIO/dynamorio.git` |
| 101 5. Install Node js from https://nodejs.org/en/download/ |
| 102 6. Install lcov-merger dependencies: `npm install vinyl, npm install vinyl-fs` |
| 103 7. Install Perl from https://www.perl.org/get.html#win32 |
| 104 8. Get lcov-result-merger and extract into your chromium/src folder `git clone
https://github.com/mweibel/lcov-result-merger` |
| 105 |
| 106 #### Generating code coverage #### |
| 107 * Build the unit tets target with debug information |
| 108 `chromium\src> ninja -C out\Debug webkit_unit_tests` |
| 109 * Run DynamoRIO with drcov tool |
| 110 `chromium\src>DynamoRIO\bin64\drrun.exe -t drcov -- .\out\Debug\webkit_unit_test
s.exe --gtest_filter=NG*` |
| 111 * Convert the output information to lcov format |
| 112 `chromium\src>for %file in (*.log) do DynamoRIO\tools\bin64\drcov2lcov.exe -inpu
t %file -output %file.info -src_filter layout/ng -src_skip_filter _test` |
| 113 * Merge all lcov files into one file |
| 114 `chromium\src>node lcov-result-merger\bin\lcov-result-merger.js *.info output.in
fo` |
| 115 * Generate the coverage html from the master lcov file |
| 116 `chromium\src>C:\Perl64\bin\perl.exe dynamorio.git\third_party\lcov\genhtml outp
ut.info -o output` |
OLD | NEW |