According to https://drafts.csswg.org/css2/#collapsing-margins, bottom
margins should only collapse with the last child if `height` is `auto`.
Also, the note mentions `min-height: 0`, but the normative text doesn't
have such requirement, so I'm dropping it, matching WebKit.
The previous logic is moved into the case of collapsing the top and
bottom margins of the same element, since this can happen either with
`height: auto` or `height: 0`, and requires `min-height: 0`.
Layout 2020: Move all Fragment code to the `fragment_tree` directory
This is a simple code organization change with no behavior change with the idea of making Layout 2020 easier to understand by new folks to the project. The idea is that we will have a cleaner separation between the different parts of layout ie one directory for the fragment tree and one (currently multiple) directory for the box tree.
<!-- Please describe your changes on the following line: -->
---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `___` with appropriate data: -->
- [x] `./mach build -d` does not report any errors
- [x] `./mach test-tidy` does not report any errors
- [x] These changes do not require tests because they do not change behavior.
<!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.-->
<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->
This is a simple code organization change with no behavior change with
the idea of making Layout 2020 easier to understand by new folks to the
project. The idea is that we will have a cleaner separation between the
different parts of layout ie one directory for the fragment tree and one
(currently multiple) directory for the box tree.
Instead of hoisting floated fragments to be siblings of the fragment
created by their containing block formatting context, keep them in
"normal" fragment tree position and adjust their positioning to be
relative to the containing block. This means that float fragments follow
the existing invariants of the fragment tree and properly handle hit
testing, painting order, and relative positioning.
The tradeoff here is more complexity tracking the containing block
offsets from the block formatting context (including handling collapsed
margins), but less complexity dealing with hoisting / shared ownership
in addition to the correctness benefits.
Some tests are failing now because this change revealed some additional
shortcomings with clearing block formatting context content size past
the end of their contained floats. This will be fixed in a followup
change.
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
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.
layout_2020: Only count for content size for height of non-replaced inline elements
<!-- Please describe your changes on the following line: -->
Accorinding to https://drafts.csswg.org/css2/#inline-non-replaced, The vertical padding, border and margin of an inline, non-replaced box start at the top and bottom of the content area, and has nothing to do with the line-height. But only the line-height is used when calculating the height of the line box.
---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `___` with appropriate data: -->
- [x] `./mach build -d` does not report any errors
- [x] `./mach test-tidy` does not report any errors
<!-- Either: -->
- [x] There are tests for these changes OR
<!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.-->
<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->
layout_2020: Specify the used cross size when replaced item is stretched
According to spec, if the flex item has [align-self: stretch](https://drafts.csswg.org/css-flexbox/#propdef-align-self), redo layout for its contents, treating this used size as its definite cross size so that percentage-sized children can be resolved.
<!-- Please describe your changes on the following line: -->
---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `___` with appropriate data: -->
- [x] `./mach build -d` does not report any errors
- [x] `./mach test-tidy` does not report any errors
- [x] These changes fix#29788 (GitHub issue number if applicable)
<!-- Either: -->
- [x] There are tests for these changes OR
<!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.-->
<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->
inline elements
Accorinding to https://drafts.csswg.org/css2/#inline-non-replaced, The
vertical padding, border and margin of an inline, non-replaced box
start at the top and bottom of the content area, and has nothing to do
with the line-height. But only the line-height is used when
calculating the height of the line box.
This change refactors how layout is done in Layout 2020 in preparation
for a compositor-side scroll tree:
1. Now the SpatialId and ClipId of each fragment is stored separately.
This will allow storing a scroll node id instead of only the handle
to the WebRender spatial node.
2. Separate out stacking context tree construction and display list
building. This change will make it possible to eventually build the
stacking context tree without the full display list if we find that
necessary. For instance, this might be useful to cache containing
block boundaries.
3. Add a `DisplayList` struct that stores both the WebRender display
list builder and the compositor info. This exposes the API to the
layout thread for display list building.
In addition, this change adds a lot of missing documentation. This
should not change behavior.
The specification dictates quite quite idiosyncratic return values when
querying insets of positioned elements via getComputedStyle(). These
depend on whether or not the elements size was overconstrained. This
change adds a better implementation of that in preparation for returning
proper values for position: sticky.
During layout it is often useful, for various specification reasons, to
know if an element is the `<body>` element of an `<html>` element root. There
are a couple places where a brittle heuristic is used to detect `<body>`
elements. This information is going to be even more important to
properly handle `<html>` elements that inherit their overflow property from
their `<body>` children.
Implementing this properly requires updating the DOM wrapper interface.
This check does reach up to the parent of thread-safe nodes, but this is
essentially the same kind of operation that `parent_style()` does, so is
ostensibly safe.
This change should not change any behavior and is just a preparation
step for properly handle `<body>` overflow.
Manage containing blocks and WebRender SpaceAndClip during stacking
context tree constuction using the ContainingBlockInfo data structure.
This will allow us to reuse this data structure whenever we traverse the
fragment tree. In addition, StackingContextBuilder is no longer
necessary at all. This change also fixes some bugs where fixed position
fragments were not placed in the correct spatial node. Unfortunately,
these fixes are difficult to test because of #29659.
It was only applied to the 1st inline formatting context of a block
container. Other IFCs were created with the Default trait, implying
TextDecorationLine::NONE.
Support text-indent in layout-2020
Existing WPT now passing:
- _mozilla/css/text_indent_a.html
- css/CSS2/css1/c71-fwd-parsing-002.xht
- css/CSS2/css1/c71-fwd-parsing-004.xht
- css/CSS2/floats-clear/floats-138.xht
- css/CSS2/text/text-indent-007.xht
- css/CSS2/text/text-indent-008.xht
- css/CSS2/text/text-indent-010.xht
- css/CSS2/text/text-indent-019.xht
- css/CSS2/text/text-indent-020.xht
- css/CSS2/text/text-indent-031.xht
- css/CSS2/text/text-indent-032.xht
- css/CSS2/text/text-indent-043.xht
- css/CSS2/text/text-indent-044.xht
- css/CSS2/text/text-indent-055.xht
- css/CSS2/text/text-indent-056.xht
- css/CSS2/text/text-indent-067.xht
- css/CSS2/text/text-indent-068.xht
- css/CSS2/text/text-indent-079.xht
- css/CSS2/text/text-indent-080.xht
- css/CSS2/text/text-indent-091.xht
- css/CSS2/text/text-indent-092.xht
- css/CSS2/text/text-indent-103.xht
- css/CSS2/text/text-indent-104.xht
- css/CSS2/text/text-indent-112.xht
- css/CSS2/text/text-indent-113.xht
- css/CSS2/text/text-indent-115.xht
- css/CSS2/text/text-indent-applies-to-002.xht
- css/CSS2/text/text-indent-applies-to-003.xht
- css/CSS2/text/text-indent-applies-to-005.xht
- css/CSS2/text/text-indent-applies-to-006.xht
- css/CSS2/text/text-indent-applies-to-007.xht
- css/CSS2/text/text-indent-applies-to-008.xht
- css/CSS2/text/text-indent-applies-to-009.xht
- css/CSS2/text/text-indent-applies-to-010.xht
- css/CSS2/text/text-indent-applies-to-011.xht
- css/CSS2/text/text-indent-applies-to-014.xht
- css/CSS2/text/text-indent-applies-to-015.xht
- css/CSS2/text/text-indent-inherited-001.xht
- css/CSS2/text/text-indent-overflow-001.xht
- css/CSS2/text/text-indent-overflow-002.xht
- css/CSS2/text/text-indent-overflow-003.xht
- css/CSS2/text/text-indent-overflow-004.xht
- css/CSS2/text/text-indent-wrap-001.xht
- css/css-text-decor/text-shadow/textindent.html
- css/css-text/text-indent/text-indent-percentage-001.xht
- css/css-text/text-indent/text-indent-percentage-002.html
- css/css-text/text-indent/text-indent-percentage-003.html
- css/css-text/text-indent/text-indent-percentage-004.html
- css/css-values/minmax-length-percent-serialize.html
- css/css-values/minmax-length-serialize.html
Also improvements in:
- _mozilla/mozilla/calc.html
- css/css-text/animations/text-indent-interpolation.html
- css/css-text/inheritance.html
- css/css-text/parsing/text-indent-computed.html
- css/css-text/parsing/text-indent-valid.html
- css/css-transitions/properties-value-implicit-001.html
- css/css-values/animations/calc-interpolation.html
- css/css-values/minmax-percentage-serialize.html
- css/css-values/viewport-units-css2-001.html
- css/css-variables/variable-substitution-basic.html
- css/cssom/serialize-values.html
Existing WPT now failing, due to lack of direction, outside list markers,
flex and grid:
- css/CSS2/text/text-indent-rtl-001.xht
- css/CSS2/text/text-indent-rtl-002.xht
- css/css-pseudo/marker-content-023.html
- css/css-text/text-indent/anonymous-flex-item-001.html
- css/css-text/text-indent/anonymous-grid-item-001.html
New WPT tests:
- css/css-text/text-indent/text-indent-length-001.html
- css/css-text/text-indent/text-indent-length-002.html
This one fails in layout-2013.
<!-- Please describe your changes on the following line: -->
---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `___` with appropriate data: -->
- [X] `./mach build -d` does not report any errors
- [X] `./mach test-tidy` does not report any errors
- [X] These changes fix#29649 (GitHub issue number if applicable)
<!-- Either: -->
- [X] There are tests for these changes OR
- [ ] These changes do not require tests because ___
<!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.-->
<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->
Script will only scroll if it detects that an element has a scrolling
box, so this change adds an implementation of the scroll area query to
Layout 2020. This allows some scrolling tests to start passing.
This change also updates all expected results in css-backgrounds and
cssom-view.
This change adds support for the <iframe> element to Layout 2020. In
addition, certain aspects of the implementation are made the same
between both layout systems.
context, to place floats in layout 2020.
The containing block for a float is not necessarily the same as the block
formatting context the float is in per CSS 2.1 [1]:
"For other elements, if the element’s position is relative or static, the
containing block is formed by the content edge of the nearest block container
ancestor box."
This shows up in the simplest case:
<html>
<body>
<div style="float: left">Hello</div>
</body>
</html>
In this case, the `<html>` element is the block formatting context with inline
size equal to the width of the window, but the `<body>` element with nonzero
inline margins is the containing block for the float. The float placement must
respect the content box of the `<body>` element (i.e. floats must not overlap
the `<body>` element's margins), not that of the `<html>` element.
Because a single block formatting context may contain floats with different
containing blocks, the left and right "walls" of that containing block become
properties of individual floats at the time of placement, not properties of the
float context itself.
Additionally, this commit generalizes the float placement logic a bit to allow
the placement of arbitrary objects, not just floats. This is intended to
support inline layout and block formatting context placement.
This commit updates the `FloatContext` and associated tests only and doesn't
actually wire the context up to the rest of layout, so floats in pages still
aren't actually laid out.
[1]: https://drafts.csswg.org/css2/#containing-block-details
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.
This change extends the DocumentAnimationSet to hold animations for
pseudo-elements. Since pseudo-elements in Servo are not in the DOM like
in Gecko, they need to be handled a bit carefully in stylo. When a
pseudo-element has an animation, recascade the style. Finally, this
change passes the pseudo-element string properly to animation events.
Fixes: #10316
Add DocumentAnimationSet and AnimationSetKey
This will be used in order to hold animations for pseudo elements in the
DocumentAnimationSet. Also no longer store the OpaqueNode in the
animation and transition data structures. This is already part of the
DocumentAnimationSet key.
---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `___` with appropriate data: -->
- [x] `./mach build -d` does not report any errors
- [x] `./mach test-tidy` does not report any errors
- [x] These changes do not require tests because they should not change behavior.
<!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.-->
<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->
This will be used in order to hold animations for pseudo elements in the
DocumentAnimationSet. Also no longer store the OpaqueNode in the
animation and transition data structures. This is already part of the
DocumentAnimationSet key.
… and converting them to flow-relative geometric values.
These values are almost always used to size and position a fragment within its containing block, so using the mode of the containing block seems more correct.
Note that the `writing-mode` and `direction` properties are disabled in Servo at the moment, so this PR by itself should have no effect: the writing mode of an element is always the same of that of its containing block since they’re both horizontal rtl.
We want to mutate them when lazily computing their content sizes, but they
are behind an Arc for the hoisting infra, so it also needs its own layer
of inner mutability.
