This change removes restrictions on using the column layout mode of
flexbox and adds an initial implementation of sizing for that flex
direction. There's a lot of missing pieces still, but in some cases this
does render column flexbox.
In particular, there are now two code paths for preferred widths
(intrinsic size) calcuation: one in the main axis (row) and one in
the cross axis (column) corresponding to the flex direciton with
horizontal writing modes.
In addition, `FlexItemBox::inline_content_sizes` is removed in favor of
making `sizing::outer_inline` /
`IndependentFormattingContext::outer_inline_content_sizes` generic
enough to handle using a different value for auto minimum sizes, which
flexbox needs.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This adds support for `align-content: stretch` by splitting flex line
layout into two phases. The first phase takes place before determing how
much extra space to allocate for stretching items. Then line layout
finishes, which might cause two layouts for items with `align-self:
stretch`.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
Some css-align features like gaps or alignment properties need to have
some effect on flex layout.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
Previously `<textarea>` was just displaying node contents, which is the
original text content, not the one updated by later typing. This change
fixes that issue.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Some tests are still broken due to missing preferred widths calculation
for flexbox and also for missing column layout.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Mukilan Thiyagarajan <mukilan@igalia.com>
Co-authored-by: Delan Azabani <dazabani@igalia.com>
* Upgrade stylo to 2024-07-16
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
* Use the new `dom` crate from stylo
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
---------
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
* Add WPT tests for box-sizing with aspect-ratio
Signed-off-by: valadaptive <valadaptive@protonmail.com>
* Implement `aspect-ratio` for replaced elements
There are two regressions because we don't implement `object-fit`, and
one because we don't properly represent non-available <img>s with `alt`
attributes.
Signed-off-by: valadaptive <valadaptive@protonmail.com>
---------
Signed-off-by: valadaptive <valadaptive@protonmail.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>
* Do not change media element ready state when network response is complete.
* Do not fire multiple error events for the same media content.
* Inform media backend when media response is complete.
* Continue delaying the load event when a complete media response is received.
* Only mark a media response as complete when the response is the active one.
* Update expectations for imagebitmap tests using video element.
* Update fetch ORB video test expectations.
* Update media CSS selector test expectation for non-implemented feature.
* Update expectations for media element tests that now work.
* Updat expected result for failing reftest.
* Update expected failure for test that loads an audio file in a video element.
* Update media test expectation for unimplemented track feature.
* Do not process media element ready state changes that are unchanged.
* Reset media element ready state to Current when playback finishes.
* Set media element ready state to Enough when appropriate player event is received.
* Update test expectations.
This adds support for generic font families in Servo and allows for
configuration of them as well as their default font sizes. One
interesting fix here is that now monospace default to 13px, like it does
in other browsers.
In addition to that, this exposes a new interface in Stylo which allows
setting a default style. This is quite useful for fonts, but also for
other kinds of default style settings -- like text zoom.
Fixes#8371.
Fixes#14773.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Mukilan Thiyagarajan <mukilan@igalia.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>
This only paints text in input fields. Selection and cursor are still
not painted.
In addition to adding this feature, the change also updates the
user-agent.css with the latest from the HTML specification. Extra
padding and extraneous settings (such as a bogus line-height and
min-height) are also removed from servo.css. This leads to some new
passes.
There are some new passes, this introduces failures as inserting text
reveals issues that were hidden before. Notably:
- failures in `/html/editing/editing-0/spelling-and-grammar-checking/`:
We do not support spell-checking.
- Most of the rest of the new failures are missing features of input
boxes that are also missing in legacy layout.
This uses a pretty simple heuristic to select a font likely to contain
color emoji. In the future Servo should actually check if the font also
contains a color representation of the character in question. For now
the code assumes that when a font supports color glyphs of some kind and
supports the character in question at all, it supports the color
version.
This fixes support for rendering keycap emoji clusters such as 1️⃣ .
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Rakhi Sharma <atbrakhi@igalia.com>
Co-authored-by: Mukilan Thiyagarajan <mukilan@igalia.com>
Instead of linebreaking inside each single-font text segment, linebreak
the entire inline formatting context at once. This has several benefits:
1. It allows us to use `icu_segmenter` (already in use from style),
which is written against a newer version of the Unicode spec --
preventing breaking emoji clusters.
2. Opens up the possibility of changing the way that linebreaking and
shaping work -- eventually allowing shaping across inline box
boundaries and line breaking *after* shaping.
Co-authored-by: Rakhi Sharma <atbrakhi@igalia.com>
Each non-collapsed track used to increase the offset by the subsequent
border spacing. Now they will take care of their preceding spacing
instead.
This way, if a cell spans two rows, and the second is collapsed, the
cell won't be forced to be at least as tall as the border spacing.
This matches Gecko and Blink (WebKit lacks `visibility: collapse`).
This makes visibility-collapse-border-spacing-001.html fail because we
generate outlines in a different way than Blink. Gecko also fails it
in a similar (but different) way.
* layout: Take into account `display: table` etc in offset* queries
The specification says that for deciding whether an element should be
used for offset* queries, a browser should take into account whether the
element is a table cell or table. This change makes that happen.
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
* Only tag HTML elements if they are in the HTML namespace
---------
Co-authored-by: Oriol Brufau <obrufau@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>
It was providing a length whenever the element generates a box.
However, these properties don't apply to non-replaced inlines,
so the computed value should be provided instead.
The main change here is that collapsed and `text-transform`'d text is
computed as it's processed by DOM traversal. This single transformed
text is stored in the root of the `InlineFormattingContext`.
This will eventually allow performing linebreaking and shaping of the
entire inline formatting context at once. Allowing for intelligent
processing of linebreaking and also shaping across elements. This
matches more closely what LayoutNG does.
This shouldn't have any (or negligable) behavioral changes, but will
allow us to prevent linebreaking inside of clusters in a followup
change.
Co-authored-by: Rakhi Sharma <atbrakhi@igalia.com>
This change adds support for `white-space-collapse: break-spaces` and
adds initial parsing support for `overflow-wrap` and `word-break`. The
later two properties are not fully supported, only in their interaction
with `break-spaces`. This is a preliminary change preparing to implement
them.
In addition, `break_and_shape` is now forked and added to Layout 2020.
This function is going to change a lot soon and forking is preparation
for this. More code that is only used by Layout 2013 is moved from `gfx`
to that crate.
Co-authored-by: Rakhi Sharma <atbrakhi@igalia.com>
