OLD | NEW |
1 # `Source/core/layout` | 1 # `Source/core/layout` |
2 | 2 |
3 This directory contains implementation of layout objects. It covers the | 3 This directory contains implementation of layout objects. It covers the |
4 following document lifecycle states: | 4 following document lifecycle states: |
5 | 5 |
6 * LayoutSubtreeChange (`InLayoutSubtreeChange` and `LayoutSubtreeChangeClean`) | 6 * LayoutSubtreeChange (`InLayoutSubtreeChange` and `LayoutSubtreeChangeClean`) |
7 * PreLayout (`InPreLayout`) | 7 * PreLayout (`InPreLayout`) |
8 * PerformLayout (`InPerformLayout`) | 8 * PerformLayout (`InPerformLayout`) |
9 * AfterPerformLayout (`AfterPerformLayout` and `LayoutClean`) | 9 * AfterPerformLayout (`AfterPerformLayout` and `LayoutClean`) |
10 | 10 |
11 Note that a new Blink layout system is under development. See the | 11 Note that a new Blink layout system is under development. See the |
12 [LayoutNG design document](https://docs.google.com/document/d/1uxbDh4uONFQOiGuiu
mlJBLGgO4KDWB8ZEkp7Rd47fw4/preview). | 12 [LayoutNG design document](https://docs.google.com/document/d/1uxbDh4uONFQOiGuiu
mlJBLGgO4KDWB8ZEkp7Rd47fw4/preview). |
13 | 13 |
14 ## Overflow rects and scroll offsets | 14 ## Overflow and scrolling |
15 | 15 |
16 PaintLayerScrollableArea uses a "scroll origin" to conceptually represent the di
stance between | 16 When a LayoutBox has scrollable overflow, it is associated with a PaintLayerScro
llableArea. |
17 the top-left corner of the box'es content rect and the top-left corner of its ov
erflow rect | 17 PaintLayerScrollableArea uses a "scroll origin" to represent the location of the
top/left |
18 when the box is scrolled to the logical beginning of its content (e.g. all the w
ay to the left for | 18 corner of the content rect (the visible part of the content) in the coordinate s
ystem |
19 LTR, all the way to the right for RTL). For left-to-right and top-to-bottom flo
ws, the scroll | 19 defined by the top/left corner of the overflow rect, when the box is scrolled al
l the way |
20 origin is zero, i.e., the top/left of the overflow rect is at the same position
as the top/left of | 20 to the beginning of its content. |
21 the box'es content rect when scrolled to the beginning of flow. For right-to-le
ft and bottom-to-top | |
22 flows, the overflow rect extends to the top/left of the client rect. | |
23 | 21 |
24 The default calculation for scroll origin is the distance between the top-left c
orner of the content | 22 For content which flows left-to-right and top-to-bottom, the scroll origin will
be (0, 0), |
25 rect and the top-left corner of the overflow rect. To illustrate, here is a box
with left overflow and | 23 i.e., the top/left of the content rect is coincident with the top/left of the ov
erflow rect |
26 no vertical scrollbar: | 24 when the box is scrolled all the way to the beginning of content. |
27 | 25 |
28 content | 26 For content which flows right-to-left (including direction:ltr, writing-mode:ver
tical-rl, |
29 rect | 27 and flex-direction:row-reverse), the x-coordinate of the scroll origin will be p
ositive; |
30 |<-------->| | 28 and for content which flows bottom-to-top (e.g., flex-direction:column-reverse a
nd |
31 scroll | 29 vertical writing-mode with direction:ltr), the y-coordinate of the scroll origin
will be |
32 origin | 30 positive. |
33 |<-------->| | |
34 _____________________ | |
35 | | | | |
36 | | | | |
37 | | | | |
38 direction:rtl | | box | | |
39 | | | | |
40 | | | | |
41 |__________|__________| | |
42 | 31 |
43 overflow rect | 32 In all cases, the term 'scrollOffset' (or just 'offset') is used to represent th
e distance |
44 |<--------------------->| | 33 of the scrolling viewport from its location when scrolled to the beginning of co
ntent, and |
| 34 it uses type ScrollOffset. The term 'scrollPosition' (or just 'position') repres
ents a |
| 35 point in the coordinate space defined by the overflow rect, and it uses type Flo
atPoint. |
45 | 36 |
| 37 For illustrations of these concepts, see these files: |
46 | 38 |
47 However, if the box has a scrollbar for the orthogonal direction (e.g., a vertic
al scrollbar | 39 doc/ltr-tb-scroll.png |
48 in a direction:rtl block), the size of the scrollbar must be added to the scroll
origin calculation. | 40 doc/rtl-bt-scroll.png |
49 Here are two examples -- note that it doesn't matter whether the vertical scroll
bar is placed on | 41 doc/rtl-tb-scroll.png |
50 the right or left of the box (the vertical scrollbar is the `|/|` part): | 42 |
| 43 When computing the scroll origin, if the box is laid out right-to-left and it ha
s a scrollbar |
| 44 for the orthogonal direction (e.g., a vertical scrollbar in a direction:rtl bloc
k), the size |
| 45 of the scrollbar must be added to the scroll origin calculation. Here are two ex
amples -- |
| 46 note that it doesn't matter whether the vertical scrollbar is placed on the righ
t or left of |
| 47 the box (the vertical scrollbar is the `|/|` part): |
| 48 |
51 | 49 |
52 content | 50 content |
53 rect | 51 rect |
54 |<-------->| | 52 |<-------->| |
55 scroll | 53 scroll |
56 origin | 54 origin |
57 |<---------->| | 55 |----------->| |
58 _______________________ | 56 _______________________ |
59 | |/| | | 57 | |/| | |
60 | |/| | | 58 | |/| | |
61 | |/| | | 59 | |/| | |
62 direction:rtl | |/| box | | 60 direction:rtl | |/| box | |
63 | |/| | | 61 | |/| | |
64 | |/| | | 62 | |/| | |
65 |__________|/|__________| | 63 |__________|/|__________| |
66 | 64 |
67 overflow rect | 65 overflow rect |
68 |<--------------------->| | 66 |<--------------------->| |
69 | 67 |
70 content | 68 content |
71 rect | 69 rect |
72 |<-------->| | 70 |<-------->| |
73 scroll | 71 scroll |
74 origin | 72 origin |
75 |<---------->| | 73 |----------->| |
76 _______________________ | 74 _________________________ |
77 | | |/| | 75 | | |/| |
78 | | |/| | 76 | | |/| |
79 | | |/| | 77 | | |/| |
80 writing-mode: | | |/| | 78 writing-mode: | | box |/| |
81 vertical-rl | | |/| | 79 vertical-rl | | |/| |
82 | | |/| | 80 | | |/| |
83 | | |/| | 81 |____________|__________|/| |
84 | | |/| | 82 |
85 |__________|__________|/| | 83 overflow rect |
| 84 |<--------------------->| |
86 | 85 |
87 overflow rect | |
88 |<--------------------->| | |
89 | 86 |
90 ## Coordinate Spaces | 87 ## Coordinate Spaces |
91 | 88 |
92 Layout and Paint work with and frequently refer to three main coordinate spaces | 89 Layout and Paint work with and frequently refer to three main coordinate spaces |
93 (really two, with one variant): | 90 (really two, with one variant): |
94 | 91 |
95 * Physical coordinates: Corresponds to physical direction of the output per the | 92 * Physical coordinates: Corresponds to physical direction of the output per the |
96 physical display (screen, printed page). Generally used for painting, thus | 93 physical display (screen, printed page). Generally used for painting, thus |
97 layout logic that feeds into paint may produce values in this space. CSS | 94 layout logic that feeds into paint may produce values in this space. CSS |
98 properties such as `top`, `right`, `bottom`, and `left` are in this space. See | 95 properties such as `top`, `right`, `bottom`, and `left` are in this space. See |
(...skipping 200 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
299 left-to-right or right-to-left block flow. Geometry is transposed for vertical | 296 left-to-right or right-to-left block flow. Geometry is transposed for vertical |
300 writing mode. See calls to `transposed{Rect,Point,Size}()`. | 297 writing mode. See calls to `transposed{Rect,Point,Size}()`. |
301 * `direction`/`dir`: "inline base direction" of a box. One of `ltr` or | 298 * `direction`/`dir`: "inline base direction" of a box. One of `ltr` or |
302 `rtl`. See calls to `isLeftToRightDirection()`. | 299 `rtl`. See calls to `isLeftToRightDirection()`. |
303 * `text-orientation`: orientation of text in a line. Only relevant for vertical | 300 * `text-orientation`: orientation of text in a line. Only relevant for vertical |
304 modes. | 301 modes. |
305 * orthogonal flow: when a box has a writing mode perpendicular to its containing | 302 * orthogonal flow: when a box has a writing mode perpendicular to its containing |
306 block. This can lead to complex cases. See | 303 block. This can lead to complex cases. See |
307 [specification](https://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows) | 304 [specification](https://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows) |
308 for more. | 305 for more. |
OLD | NEW |