Commit graph

49 commits

Author SHA1 Message Date
Oriol Brufau
17f796dfc1
Let LengthPercentage::maybe_to_used_value() accept Option<Au> (#33450)
Bump Stylo to servo/stylo#75 and remove conversions that are no longer
necessary.

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
2024-09-16 08:08:54 +00:00
atbrakhi
f76692035b
uses app units in display_list (#33420)
Signed-off-by: atbrakhi <atbrakhi@igalia.com>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
2024-09-13 10:49:59 +00:00
Oriol Brufau
219a2f2038
Cleanup after #33396 (#33429)
Mostly formatting improvements, but also recovering a pair of parenthesis
that was accidentally removed, changing the logic.

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
2024-09-12 19:23:17 +00:00
Martin Robinson
027fc53e2f
layout: Right-to-left support for other layout modes (#33375)
This change removes the `effective_writing_mode` concept and tries to
properly implement right-to-left layout support for all non-inline
writing modes. In general, what needs to happen is that rectangles
need to be converted to physical rectangles using the containing block.
A right-to-left rectangle's inline start is on the right physical side
of the containing block. Likewise a positive inline offset in
right-to-left text is a negative physical one.

The implementation here is pretty good for most layout modes, but floats
are still a bit in process. Currently, floats are processed in the
logical layout of the block container, but there still might be issues
with float interaction with mixed RTL and LTR.

While this does move us closer to supporting vertical writing modes,
this is still unsupported.

New failures:
 - Vertical writing mode not supported:
   - `/css/CSS2/floats/floats-placement-vertical-001b.xht`
   - `/css/CSS2/floats/floats-placement-vertical-001c.xht`
 - Absolutes inlines should avoid floats (#33323)
   - `/css/css-position/position-absolute-dynamic-static-position-floats-004.html`
 - No support for grid
   - `/css/css-align/self-alignment/self-align-safe-unsafe-grid-003.html`
   - `/css/css-position/static-position/inline-level-absolute-in-block-level-context-009.html`
   - `/css/css-position/static-position/inline-level-absolute-in-block-level-context-010.html`
 - Cannot reproduce these locally on any platform. Very mysterious:
   - `/css/css-tables/row-group-margin-border-padding.html`
   - `/css/css-tables/row-margin-border-padding.html`
 - Exposes bugs we have related to hanging whitespace in preserved
   whitespace inlines:
   - `/css/css-text/white-space/trailing-space-and-text-alignment-rtl-003.html`
   - `/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-023.html`

Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Rakhi Sharma <atbrakhi@igalia.com>
2024-09-11 13:40:11 +00:00
atbrakhi
095590e224
layout: Use Au in ComputedValuesExt (#33396)
* Use app unit in `ComputedValuesExt`

Co-authored-by: Martin Robinson <mrobinson@igalia.com>
Signed-off-by: atbrakhi <atbrakhi@igalia.com>

* Some miscellaneous fixes

Signed-off-by: Martin Robinson <mrobinson@igalia.com>

* remove redundant defination of `containing_block_inline_size`

Signed-off-by: atbrakhi <atbrakhi@igalia.com>

---------

Signed-off-by: atbrakhi <atbrakhi@igalia.com>
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
2024-09-10 21:35:17 +00:00
Martin Robinson
d169a82d2e
layout: Implement proper absolute child position for flexbox (#33346)
This implements the requirements outlined in the [flexbox specification]
about how to position absolute children of flex containers. We must
establish a static position rectangle (to use if all insets are auto)
and also align the child into that rectangle.

[flebox specification]: https://drafts.csswg.org/css-flexbox/#abspos-items

Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
2024-09-09 14:44:16 +00:00
Oriol Brufau
93abdf7cb5
layout: Add an indefinite containing block for intrinsic sizing (#33204)
When computing the min-content or max-content size of an element we
need to ignore `inline-size`, `min-inline-size` and `max-inline-size`.

However, we should take the block-axis sizing properties into account.
That's because the contents could have percentages depending on them,
which can then affect their inline size via an aspect ratio.

Therefore, this patch adds `IndefiniteContainingBlock`, which is similar
to `ContainingBlock`, but it allows an indefinite inline-size. This
struct is then passed arround during intrinsic sizing.

More refinement will be needed in follow-up patches in order to fully
address the problem.

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
2024-08-29 14:10:46 +00:00
Martin Robinson
56280c6242
layout: Add initial support for bidirectional text (BiDi) (#33148)
This adds supports for right-to-left text assigning bidi levels to all
line items when necessary. This includes support for the `dir` attribute
as well as corresponding CSS properties like `unicode-bidi`. It only
implements right-to-left rendering for inline layout at the moment and
doesn't include support for `dir=auto`. Because of missing features,
this causes quite a few tests to start failing, as references become
incorrect due to right-to-left rendering being active in some cases,
but not others (before it didn't exist at all).

Analysis of most of the new failures:

```
- /css/css-flexbox/gap-001-rtl.html
  /css/css-flexbox/gap-004-rtl.html
 - Require implementing BiDi in Flexbox, because the start and
   end inline margins are opposite the order of items.

- /css/CSS2/bidi-text/direction-applies-to-*.xht
  /css/CSS2/bidi-text/direction-applies-to-002.xht
  /css/CSS2/bidi-text/direction-applies-to-003.xht
  /css/CSS2/bidi-text/direction-applies-to-004.xht
  - Broken due to a bug in tables, not allocating the
    right amount of width for a column.

- /css/css-lists/inline-list.html
  - This fails because we wrongly insert a soft wrap opportunity between the
    start of an inline box and its first content.

- /css/css-text/bidi/bidi-lines-001.html
  /css/css-text/bidi/bidi-lines-002.html
  /css/CSS2/text/bidi-flag-emoji.html
  - We do not fully support unicode-bidi: plaintext

- /css/css-text/text-align/text-align-end-010.html
  /css/css-text/text-align/text-align-justify-006.html
  /css/css-text/text-align/text-align-start-010.html
  /html/dom/elements/global-attributes/*
  - We do not support dir=auto yet.

- /css/css-text/white-space/tab-bidi-001.html
  - Servo doesn't support tab stops

- /css/CSS2/positioning/abspos-block-level-001.html
  /css/css-text/word-break/word-break-normal-ar-000.html
  - Do not yet support RTL layout in block

- /css/css-text/white-space/pre-wrap-018.html
  - Even in RTL contexts, spaces at the end of the line must hang and
    not be reordered

- /css/css-text/white-space/trailing-space-and-text-alignment-rtl-002.html
  - We are letting spaces hang with white-space: pre, but they shouldn't
    hang.
```

Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Rakhi Sharma <atbrakhi@igalia.com>
2024-08-21 14:28:54 +00:00
Martin Robinson
d941d2fd67
layout: Convert the FragmentTree to physical geometry (#33030)
This converts all geometry in the FragmentTree into physical geometry,
doing conversions ahead of time instead of when traversing the fragment
tree. This is necessary to properly implement BiDi in Servo as we need
to know what side borders are on in mixed RTL and LTR contexts.

In addition, fragments are laid out in a particular context and only
that context knows its writing mode. There were issues where were using
one writing mode to lay out and another to convert to phyisical
coordinates. This isn't an issue now since we only use the default
writing mode, but starts to be an issue with BiDi text.

Closes #25564.

Signed-off-by: Martin Robinson <mrobinson@igalia.com>
2024-08-14 12:22:06 +00:00
atbrakhi
c6443f74a4
Remove unused implementation (#32754)
Signed-off-by: atbrakhi <atbrakhi@igalia.com>
2024-07-10 10:57:49 +00:00
Martin Robinson
959ffad99a
layout: Add support for table captions (#32657)
This adds initial support for table captions. To do this, the idea of
the table wrapper becomes a bit more concrete. Even so, the wrapper is
still reponsible for allocating space for the grid's border and padding,
as those properties are specified on the wrapper and not grid in CSS.

In order to account for this weirdness of HTML/CSS captions and grid are
now laid out and placed with a negative offset in the table wrapper
content rect.

Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
2024-07-03 18:24:19 +00:00
Martin Robinson
adc0fc984d
layout: Make geom.rs logical geoemetry types more ergonomic (#32633)
Make using the logical geometry types more ergonomic by having them all
implement `Copy` (at most 4 64-bit numbers), similar to what `euclid`
does. In addition add an implementation of `Neg` for `LogicalVec` and
`LogicalSides` as it will be used in upcoming table implementation code.
2024-06-28 08:20:50 +00:00
Oriol Brufau
a972e5c200
Switch flex layout to app units (#32599) 2024-06-25 07:05:16 +00:00
atbrakhi
26c585a0c5
use app unit in box_fragement (#32349) 2024-06-21 14:54:21 +00:00
Martin Robinson
47a4ce467f
layout: Add basic support for getClientRects() queries (#31696)
This adds basic support for `getClientRects()` by sharing code with the
implementation of `getBoundingClientRect()`. In addition to sharing
code, it also shares all of the bugs. Primarily, scrolilng positions are
not taken into account when return boundary rectangles.
2024-03-15 17:20:47 +00:00
Martin Robinson
78fe461ff2
layout: Properly parent table-row and table-row-group (#31619)
Put table cell content fragments into a hieararchy of fragments that
include their table row and table row group fragments. This ensures that
things like relative positioning and transforms set on rows and row
groups properly affect cells and cell content.

Co-authored-by: Oriol Brufau <obrufau@igalia.com>
2024-03-14 10:33:42 +00:00
atbrakhi
0fda14263a
layout: make margin in pbm use app unit (#31621)
* make margin in pbm use app unit

* Simplification

* Consistently resolve inline margins as Au, like block margins

---------

Co-authored-by: Oriol Brufau <obrufau@igalia.com>
2024-03-13 03:15:20 +00:00
atbrakhi
304ab9b09c
layout: make AxisResult, Anchor & AbsoluteAxisSolver use Au (#31395)
* make AxisResult and Anchor use Au

* Avoid some .into()

* review fix

* review update

---------

Co-authored-by: Oriol Brufau <obrufau@igalia.com>
2024-02-26 18:11:33 +00:00
atbrakhi
74c07db56c
make ContainingBlock use Au for inline_size and block_size (#31370) 2024-02-20 09:14:44 +00:00
atbrakhi
8ba251c95f
layout: make padding and border use Au in pbm (#31289)
* use au for padding and border in pbm

* review fix
2024-02-12 22:49:50 +00:00
Martin Robinson
fc31e69f79
layout: Add *very* basic support for table layout (#31121)
* layout: Add *very* basic support for table layout

This is the first step to proper table layout. It implements a naive
layout algorithm, notably only taking into account the preferred widths
of the first table row. Still, it causes some float tests to start
passing, so turn on the `layout.tables.enabled` preference for those
directories.

Co-authored-by: Oriol Brufau <obrufau@igalia.com>

* Address review comments

* Fix a crash with rowspan=0

* Turn on pref and update results for `/css/css-tables` and `/css/CSS2/tables`

---------

Co-authored-by: Oriol Brufau <obrufau@igalia.com>
2024-01-19 13:20:20 +00:00
atbrakhi
3d520f2668
Use App units in flow layout (#30894)
* use app_unit in flow layout

* fmt

* Avoid crash

* Drop assert that doesn't hold anymore

* update expectation

---------

Co-authored-by: Oriol Brufau <obrufau@igalia.com>
2024-01-19 13:20:01 +00:00
atbrakhi
3c57f2cb44
Use Au instead of Length in flexbox code (#30704)
* convert border and padding to app units in flexbox

* convert margin to app units in flexbox

* cleanup, fmt

* add todo comment

* fmt

* add comment

* use Length instead of CSSPixelLength: they are same
2023-11-08 14:23:43 +00:00
Martin Robinson
8299868bd5
Layout 2020: Rename flow_relative types to Logical... (#30324)
This makes the names of flow relative geometry consistent with what is
used in the style crate and removes them from a module. With this change
it's more obvious what makes these types different from the ones in
`euclid`.
2023-09-12 07:31:30 +00:00
Samson
aad2dccc9c
Strict import formatting (grouping and granularity) (#30325)
* strict imports formatting

* Reformat all imports
2023-09-11 19:16:54 +00:00
Samson
711dbbd4af
remove extern crate (#30311)
* remove extern crate

* Update components/script_plugins/lib.rs

Co-authored-by: Martin Robinson <mrobinson@igalia.com>

---------

Co-authored-by: Martin Robinson <mrobinson@igalia.com>
2023-09-08 12:11:31 +00:00
Martin Robinson
96c51ba2e7
Flow inlines around floats (#30243)
This implements the rest of the bulk of float support. Now inline
element flow around floats and floats can be pushed down by inline
elements before them.

Co-authored-by: Oriol Brufau <obrufau@igalia.com>
2023-08-31 10:54:54 +00:00
Martin Robinson
59f5414ca8
Split line layout into two phases (#30089)
In the first phase, we gather LineItems and then when we have enough to
form a line we turn them into Fragments. This will make it possible to
more simply implement `vertical-align` and `text-align: justify` because
we need to measure the different aspects of the candidate line and then
produce a Fragments.

This is a general refactor of the way that inline layout works, so comes
with some progressions. In addition there are some new failures.

New failures:

Some tests are now failing because only the test or reference is getting
proper line height when it wasn't before. These should be fixed in a
followup change that properly calculate line-height in more cases:

 - /_mozilla/css/list_style_position_a.html
 - /css/CSS2/floats/float-no-content-beside-001.html
 - /css/css-content/pseudo-element-inline-box.html
 - /css/css-flexbox/flexbox_flex-none-wrappable-content.html

Some tests are now failing because floats are now placed properly, but
are no longer in their inline box stacking contexts. These will be fixed
by a followup change which properly parents them:

- /css/filter-effects/filtered-inline-applies-to-float.html.ini
- /css/css-color/inline-opacity-float-child.html.ini

One test is failing due to floating point precision errors:

- /css/CSS2/floats-clear/floats-141.xht.ini

Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Mukilan Thiyagarajan <mukilan@igalia.com>
2023-08-11 07:19:50 +00:00
Patrick Walton
cdec48328e Place floats in layout 2020, but don't flow text around the floats yet.
This commit puts floats behind the `layout.floats.enabled` pref, because of the
following issues and unimplemented features:

* Inline formatting contexts don't take floats into account, so text doesn't
  flow around the floats yet.

* Non-floated block formatting contexts don't take floats into account, so BFCs
  can overlap floats.

* Block formatting contexts that contain floats don't expand vertically to
  contain all the floats. That is, floats can stick out the bottom of BFCs,
  contra spec.
2023-06-03 06:09:21 +02:00
Patrick Walton
5b36d211b4 Add an implementation of the core float and clear placement logic in layout
2020, not yet wired to the rest of layout.

This commit implements an object that handles the 10 rules in CSS 2.1:

https://www.w3.org/TR/CSS2/visuren.html#float-position

The implementation strategy is that of a persistent balanced binary search tree
of float bands. Binary search trees are commonly used for implementing float
positioning; e.g. by WebKit.  Persistence enables each object that interacts
with floats to efficiently contain a snapshot of the float list at the time
that object was laid out. That way, incremental layout can invalidate and start
reflow at any point in a containing block.

This commit features extensive use of
[QuickCheck](https://github.com/BurntSushi/quickcheck) to ensure that the rules
of the CSS specification are followed.

Because this is not yet connected to layout, floats will not actually be laid
out in Web pages yet.

Note that unit tests as set up in Servo currently require types that they
access to be public. Therefore, some internal layout 2020 types that were
previously private have been made public. This is somewhat unfortunate.

Part of #25167.
2020-07-20 12:42:34 -07:00
Simon Sapin
01905923db First pass at implementing the Flex Layout Algorithm
https://drafts.csswg.org/css-flexbox/#layout-algorithm
2020-06-23 00:41:27 +02:00
Simon Sapin
08801d94cd Less cloning 2020-04-01 01:00:14 +02:00
Fernando Jiménez Moreno
5cbe05366b Add layout debugger support to layout_2020 2020-02-21 11:11:00 +01:00
Martin Robinson
d03560b0f1 Add layout_2020 support for filters and mix-blend-mode 2020-02-19 10:26:13 +01:00
Simon Sapin
ea4882a1c5 Fix combinations of border-radius and background-clip 2020-01-24 14:20:20 +01:00
Martin Robinson
02deb99a05 Use euclid data types for physical structs in layout_2020
This removes a bit of duplication and allows layout_2020 to benefit from
a much richer set of utilities.
2020-01-23 15:39:32 +01:00
Martin Robinson
8825d588c1 Add initial support for scrollable overflow in layout_2020
This still isn't totally correct and non-root scrolling is not handled
at all, but the root frame now scrolls.
2020-01-21 15:29:23 +01:00
Martin Robinson
ea8c635344 Allow dumping the fragment tree in layout_2020
This is done when the dump-flow-tree debug option is passed.
2020-01-13 13:12:52 +01:00
Emilio Cobos Álvarez
ef16c5844f Rustfmt recent changes. 2019-12-16 14:23:56 +01:00
Emilio Cobos Álvarez
e885ccb7ae layout-2020: build fixes. 2019-12-16 14:23:56 +01:00
Simon Sapin
ce7e84be72 Replace percent_resolved_* functions with methods 2019-12-10 12:36:43 +01:00
Simon Sapin
fa1adf2ad3 Containing blocks contains styles rather than just a writing mode 2019-12-07 14:25:16 +01:00
Simon Sapin
40ad9a722d Use the WritingMode bitflags from Stylo 2019-12-07 12:45:36 +01:00
Anthony Ramine
4ebdc39ecd Add some helpers to resolve percentages of box sizes 2019-12-04 17:24:45 +01:00
Simon Sapin
aa925a5984 Un-allow and fix warnings in components/layout_2020 2019-12-02 16:32:34 +01:00
Simon Sapin
13e494d74f More compact debug output for CSS values
```
Rect {
    start_corner: Vec2 { i: 0.0 px, b: 0.0 px },
    size: Vec2 { i: 1024.0 px, b: 20.0 px },
}
```

… instead of:

```
Rect {
    start_corner: Vec2 {
        inline: CSSPixelLength(
            0.0,
        ),
        block: CSSPixelLength(
            0.0,
        ),
    },
    size: Vec2 {
        inline: CSSPixelLength(
            1024.0,
        ),
        block: CSSPixelLength(
            0.0,
        ),
    },
}
```
2019-10-24 10:44:31 +02:00
Simon Sapin
cfc3ffcd54 2020: paint background-color 2019-10-24 10:44:31 +02:00
Anthony Ramine
4444c5a2ad Import victor's layout system 🍷 2019-09-11 10:36:30 +02:00
Simon Sapin
86904757e6 Import files from Victor
fdb11f3e87
2019-09-11 10:06:35 +02:00