No longer store scroll offsets for elements in the DOM. Instead
consistently get and set these in layout's `ScrollTree`. This more
consistently requires layout to run when querying scroll offsets, which
ensures that they are up-to-date and properly bounded by scrollable
overflow area.
Testing: This causes several WPT tests to start passing, and one to
start
failing. In the case of
`/shadow-dom/scroll-to-the-fragment-in-shadow-tree.html`, I believe the
issue
is that we don't properly handle scrolling and shadow DOM elements.
Before, the
faulty scrolling was hiding this issue.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Even though we were continuing the parent BFC, we weren't updating the
SequentialLayoutState to have the correct containing block info. That
caused problem in the presence of floats.
This patch establishes an independent BFC, which avoids the problem.
This seems reasonable since outside markers are out-of-flow-ish, and it
matches Firefox. Blink implements them as inline-blocks, so they should
also establish a BFC.
Testing: Adding new tests. Some still fail because of a different issue.
Also, adding an expectation for several existing tests that were missing
it.
Fixes: #37222
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This change adds support for rendering static SVG images using the
`resvg` crate, allowing svg sources in the `img` tag and in CSS
`background` and `content` properties. There are some limitations in
using resvg:
1. There is no support for animations or interactivity as these would
require implementing the full DOM layer of SVG specification.
2. Only system fonts can be used for text rendering. There is some
mechanism to provide a custom font resolver to usvg, but that is not
explored in this change.
3. resvg's handling of certain edge cases involving lack of explicit
`width` and `height` on the root svg element deviates from what the
specification expects from browsers. For example, resvg uses the values
in `viewBox` to derive the missing width or height dimension, but
without scaling that dimension to preserve the aspect ratio. It also
doesn't allow overriding this behavior.
Demo screenshot:
<details>
<summary>Source</summary>
```
<style>
#svg1 {
border: 1px solid red;
}
#svg2 {
border: 1px solid red;
width: 300px;
}
#svg3 {
border: 1px solid red;
width: 300px;
height: 200px;
object-fit: contain;
}
#svg4 {
border: 1px solid red;
width: 300px;
height: 200px;
object-fit: cover;
}
#svg5 {
border: 1px solid red;
width: 300px;
height: 200px;
object-fit: fill;
}
#svg6 {
border: 1px solid red;
width: 300px;
height: 200px;
object-fit: none;
}
</style>
</head>
<body>
<div>
<img id="svg1" src="https://raw.githubusercontent.com/servo/servo/refs/heads/main/resources/servo.svg" alt="Servo logo">
</div>
<div>
<img id="svg2" src="https://raw.githubusercontent.com/servo/servo/refs/heads/main/resources/servo.svg" alt="Servo logo">
<img id="svg3" src="https://raw.githubusercontent.com/servo/servo/refs/heads/main/resources/servo.svg" alt="Servo logo">
<img id="svg4" src="https://raw.githubusercontent.com/servo/servo/refs/heads/main/resources/servo.svg" alt="Servo logo">
</div>
<div>
<img id="svg5" src="https://raw.githubusercontent.com/servo/servo/refs/heads/main/resources/servo.svg" alt="Servo logo">
<img id="svg6" src="https://raw.githubusercontent.com/servo/servo/refs/heads/main/resources/servo.svg" alt="Servo logo">
</div>
</body>
```
</details>
---------
Signed-off-by: Mukilan Thiyagarajan <mukilan@igalia.com>
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
This fixes the combination of `background-attachment: fixed` and
`no-repeat`. The positioning of the background should be relative to the
viewport, so using an infinite rectangle breaks things like `center`.
I'm not sure what the original motivation of using an infinite rectangle
here
and it doesn't seem to break any tests to stop using it.
Testing: This fixes `/css/CSS2/backgrounds/background-bg-pos-206.xht`.
Fixes#37082.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Text decorations have a special kind of propagation. Instead of
propating these during box tree construction, move propagation to
stacking context tree construction. This will allow for using a very
easy type of incremental layout when text decorations change. For
instance, when a link changes color during hovering over it, we can skip
all of box and fragment tree construction.
In addition, propagation works a bit better now and color and style
properly move down from their originating `Fragment`s.
This introduces three new failures, because now we are drawing the
text-decoration with the correct color in more places, which exposes an
issue we have with text-decorations not being drawn in relation to the
baseline (taking into account `vertical-align`).
Testing: There are tests for these changes.
Fixes#31736.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
The static position rect is calculated assuming that the containing
block would be established by the content box of some ancestor, but the
actual containing block is established by the padding box.
So we need to add the padding of that ancestor.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
Instead of keeping a per-FontGroup cache of the previously used fallback
font, cache this value in the caller of `FontGroup::find_by_codepoint`.
The problem with caching this value in the `FontGroup` is that it can
make one layout different from the next.
Still, it is important to cache the value somewhere so that, for
instance, Chinese character don't have to continuously walk through the
entire fallback list when laying out. The heuristic here is to try to
last used font first if the `Script`s match. At the very least this
should make one layout consistent with the next.
Fixes#35704.
Fixes#35697.
Fixes#35689.
Fixes#35679.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
* Squash and don't explicitly use noto-cjk in tests
Signed-off-by: Xiaocheng Hu <xiaochengh.work@gmail.com>
* Mark quotes-034.html.ini failure
Signed-off-by: Xiaocheng Hu <xiaochengh.work@gmail.com>
* Address review comments
Signed-off-by: Xiaocheng Hu <xiaochengh.work@gmail.com>
---------
Signed-off-by: Xiaocheng Hu <xiaochengh.work@gmail.com>
If a collapsed border has the `currentcolor` color, we were resolving it
using the color of the table. Now we resolve it using the color of the
box which owns the border that wins and becomes the collapsed border.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
If `width` is indefinite, treat the outer size as zero, instead of
treating the content size as zero and then adding padding and borders.
Also, we don't want a default minimum of zero to get added padding and
borders, and then defeat the point baove. So just ignore minimums and
maximums.
That seems to roughly match what other browsers do, but as usual, the
details are not interoperable, e.g. some browsers may obey min or max
sizing properties in some cases.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
Some of these tests were using `no_red_3x3_monospace_table-ref.xht` as
a reference. However, the reference has a single 3x3 table, while the
tests put each row on a different table. Thus text wasn't aligning well,
and the tests were failing on all browsers. Therefore this adds a new
reference for these tests.
Some other tests were instead adding a background on their columns.
These also get their own reference. But additionally, these tests
attempt to work as visual tests by overlapping two tables: one with
green text in front of another with red text. However, this feature
was broken since both tables had a background, so the underlying one
was not visible at all.
Therefore, I'm also removing the background of the table at the front.
Note that these tests come in pairs that just switch which one is in
front, so no functionality is lost.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This test was failing on all browsers because before the paragraph
"Test passes if there is a filled green square and *no red*" was getting
styled with some unnecessary CSS which is not present in the reference.
Removing this CSS which is irrelevant to the actual table being tested
fixes the problem.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
For a table wrapper in collapsed-borders mode we were just halving the
border widths from the computed style. However, it needs to actually
receive half of the resulting collapsed border, which can be bigger.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
We were previously splitting collapsed borders into two halves, and then
paint each one as part of the corresponding cell. This looked wrong when
the border style wasn't solid, or when a cell spanned multiple tracks
and the border wasn't the same for all of them.
Now the borders of a table wrapper, table grid or table cell aren't
painted in collapsed borders mode. Instead, the resulting collapsed
borders are painted on their own.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
We were previously using the same style and color for two collapsed
borders sharing a coordinate. Now such a line of collapsed borders can
be piecewise and have different colors and styles.
This still doesn't add support for piecewise border widths.
Also, since we are currently painting borders as part of the table and
cell boxes, and a box side can't have a piecewise border, this patch
only really works when:
- There aren't spanning cells
- The table has no assigned border (only the cells and tracks have it)
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This is still not the right approach, because we are not painting
collapsed borders as a single thing. Instead, we are splitting them
into two halves and paint each half on a different cell. This only
looks good for solid borders.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
Anonymous blocks have `height: auto`, so children with a percentage
`height` were considered to have an indefinite height.
However, anonymous blocks need to be skipped for percentage resolution,
so the percentages may actually be definite.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This change adds support for `position: relative` to table `<caption>`.
In addition to adjusting their position according to inset values, table
captions must also establish containing blocks for descendants that are
absolutely positioned.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
We were only collapsing the borders from adjacent cells. This patch also
handles the borders from rows, row groups, columns, and column groups.
Additionally, it takes the border style into account in order to decide
which border wins.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
A table cell with `width: auto` in fixed layout will now have an outer
min-content width of zero, even if it has borders or padding. In a way,
this is like allowing the content-box width to become negative.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
When computing the ascent and descent in an inline formatting context,
we weren't taking into account that app units have precision limitations.
Therefore, in some cases we were getting a line height that was slightly
taller than the value specified in `line-height`.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
More details might be needed to fully support the feature, but this
covers the basic functionality.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
We were only parsing the `width` attribute as a presentation hint for
`<table>`, `<td>` and `<th>`. This patch also handles `<colgroup>` and
`<col>`.
Also, we weren't parsing `height` at all, now we do it for `<table>`,
`<td>`, `<th>`, `<tr>`, `<tbody>`, `<thead>` and `<tfoot>`.
One test is now crashing, but this was an existing issue: #33423
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
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>
When inline atomics establish containing blocks for absolute
descendants, layout should happen with those atomics as the containing
block. This ensures that the absolute descendents have the correct
containing block and Fragment parent. This wasn't happening before and
this change fixes that.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
Consider a block container that establishes an inline formatting context
and has a definite `block-size` which is clamped by `min-block-size` or
`max-block-size`.
We were already sizing such container correctly, however, its contents
were resolving their percentages against the unclamped `block-size`
value.
This patch fixes the `ContainingBlock` that we pass to the contents so
that they resolve percentages correctly.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
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>
If a (min/max)-(height/width) property is set, we still need to respect
the intrinsic ratio of the element if it exists. The previous code was
simply clamping the element size after doing the sizing calculations
once, but this leads to an incorrect aspect ratio.
Signed-off-by: valadaptive <valadaptive@protonmail.com>
- Instead of treating captions as a `BlockFormattingContext`, treat it as
a `NonReplacedFormattingContext`, which allows reusing flow layout for
captions -- fixing some issues with sizing.
- Pass in the proper size of the containing block when laying out,
fixing margin calculation.
- Follow the unspecified rules about how various size properties on
captions affect their size.
- Improve linebreaking around atomics, which is tested by
caption-related tests. This fixes intrinsic size calculation regarding
soft wrap opportunities around atomic and also makes the code making
these actual soft wrap opportunities a bit better.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Mukilan Thiyagarajan <mukilan@igalia.com>
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>
Add a skeleton implementation of FontFaceSet interface with support
for resolving the `document.fonts.ready` Promise when the loading of
web fonts is completed.
This change exposes new failures in the web platform tests.
These were ERROR before the change because `document.fonts.ready` caused
a `ReferenceError` causing the tests to be aborted and they now FAIL:
- /css/CSS2/linebox/vertical-align-top-bottom-001.html
- /css/css-flexbox/flex-one-sets-flex-basis-to-zero-px.html
- /css/css-fonts/generic-family-keywords-001.html
- /css/css-fonts/math-script-level-and-math-style/math-script-level-004.tentative.html
- /css/css-fonts/math-script-level-and-math-style/math-script-level-002.tentative.html
- /css/css-text/text-autospace/text-autospace-ligature-001.html
- /css/css-values/calc-size/calc-size-width.tentative.html
These were TIMEOUT before the change because `document.fonts.ready` was
a ReferenceError and the tests were asynchronous (reftest-wait). These now
FAIL because the assertions are now executed after fonts are loaded:
- /css/css-fonts/matching/fixed-stretch-style-over-weight.html
- /css/css-fonts/matching/range-descriptor-reversed.html
- /css/css-fonts/matching/stretch-distance-over-weight-distance.html
- /css/css-fonts/matching/style-ranges-over-weight-direction.html
- /css/css-fonts/variations/variable-box-font.html
- /css/css-fonts/variations/variable-gpos-m2b.html
- /css/css-fonts/variations/variable-gsub.html
- /css/css-fonts/variations/variable-opsz-size-adjust.html
- /css/css-position/sticky/position-sticky-change-top.html
- /css/css-position/sticky/position-sticky-fixed-ancestor.html
- /css/css-position/sticky/position-sticky-flexbox.html
- /css/css-position/sticky/position-sticky-grid.html
- /css/css-position/sticky/position-sticky-inline.html
- /css/css-position/sticky/position-sticky-rendering.html
- /css/css-position/sticky/position-sticky-stacking-context.html
- /css/css-position/sticky/position-sticky-table-td-left.html
- /css/css-position/sticky/position-sticky-table-td-right.html
- /css/css-position/sticky/position-sticky-table-tfoot-bottom.html
- /css/css-position/sticky/position-sticky-table-th-right.html
- /css/css-position/sticky/position-sticky-table-thead-top.html
- /css/css-position/sticky/position-sticky-table-tr-bottom.html
- /css/css-position/sticky/position-sticky-table-tr-top.html
- /css/css-position/sticky/position-sticky-writing-modes.html
- /css/css-pseudo/marker-intrinsic-contribution-001.html
- /css/css-text/hyphens/hyphens-character.html
These tests now PASS due to this patch:
* FAIL -> PASS
- /html/canvas/element/text/2d.text.draw.fill.maxWidth.fontface.html
- /html/canvas/element/text/2d.text.measure.width.empty.html
* TIMEOUT -> PASS
- /css/css-fonts/variations/font-descriptor-range-reversed.html
- /css/css-fonts/variations/variable-opsz.html
- /css/css-position/sticky/position-sticky-table-th-left.html
* ERROR -> PASS
- /css/css-fonts/generic-family-keywords-002.html
- /css/css-fonts/generic-family-keywords-003.html
* These two tests only PASS in Layout 2020:
- /css/CSS2/positioning/inline-static-position-001.html
- /css/cssom-view/getBoundingClientRect-empty-inline.html
These two tests have subtests that PASS intermittenttly:
- /fetch/metadata/generated/css-font-face.sub.tentative.html
- /css/css-fonts/generic-family-keywords-001.html
These tests are new TIMEOUTS that used to FAIL because
`documents.fonts.ready` was undefined:
- /resource-timing/TAO-match.html
- /resource-timing/content-type.html
- /resource-timing/nextHopProtocol-is-tao-protected.https.html
The failure in `/resize-observer/change-layout-in-error.html` could be
due to an issue in the ResizeObserver implementation that is now exposed
with this change, but this needs more investigation.
Signed-off-by: Mukilan Thiyagarajan <mukilan@igalia.com>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
The attribute was only taken into account on columns that are immediate
children of tables, and on column groups. It was ignored on columns
within column groups.
This patch moves the logic into a helper function that is then called
from the three consumers.
For example:
```html
<table border="1">
<tr> <td></td> <td></td> </tr>
<tr> <td colspan="2"></td> </tr>
</table>
```
We should initially size the columns according to the cells in the first
row since they have a span of 1. Then we handle the cell in the second
row with a span of 2, this should be able to increase the size of the
columns, but never decrease them.
Previously, when deciding the font for a space, preference was given to
the previous used font. This could means that the font chosen was a
fallback font instead of the first font that supporting the space
character in the font preference list.
This caused an issue rendering emojis surrounded by spaces with "Noto
Color Emoji" which has a space character the same size as the emoji,
leading to too much spacing between them.
Co-authored-by: Rakhi Sharma <atbrakhi@igalia.com>
This change adds a very simple implementation of `border-collapse` for
tables. No harmonization or merging is done at all for borders. Instead,
the largest border for every continuous border sets the size. Instead of
merging different border styles, they are squashed to half size -- which
isn't great, but ensures appropriate positioning.
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
* feat: Support font-relative `ch` and `ic` units
After #31966, which made it possible for the first time to resolve
font-relative CSS units, this change adds support for the `ch` and
`ic` units.
One difference with the `ex` unit that was added in that PR is that
these units must reflect the advance width of a character (the zero
digit in the case of `ch`, and the CJK water radical for `ic`) as it
would be rendered by the current font group. This means that the size
of these units don't only depend on the first available font, in the
case where that font does not contain a glyph for that character.
This is implemented by adding the advance width for these two
characters as optional fields of `FontMetrics`, so the advance width
computation happens in advance. Then, when the font metrics are
queried as part of unit resolution, the font group is searched for the
first font containing that character.
This change only implements support for these units in upright
typesetting modes, since Servo does not yet have support for vertical
writing modes. This means that many of the WPT tests that test for the
behavior of these units with vertical writing modes do not pass.
This change also makes a number of WPT tests pass, which relied on the
`ch` and `ic` units. It, however, also makes the test
`/css/css-text/white-space/text-wrap-balance-overflow-002.html` fail,
since it tests `text-wrap: balance`, which Servo does not yet
implement, and it was only previously passing by chance due to the
previous behavior of these units.
* Revert Python 3.10-related changes to wss
* Fix formatting
* Remove test expectation
