Commit graph

33 commits

Author SHA1 Message Date
Oriol Brufau
141413d52e
layout: Improve sizing for inline SVG (#38603)
The metadata provided by usvg has unreliable sizes. Ignore it, and rely
on the `width`, `height` and `viewBox` attributes instead.

Note that inline SVG with a natural aspect ratio but no natural sizes
should stretch to the containing block. This is left for a follow-up.

Bumps Stylo to https://github.com/servo/stylo/pull/229

Testing: Improves several WPT.

---------

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
Signed-off-by: Mukilan Thiyagarajan <mukilan@igalia.com>
Co-authored-by: Mukilan Thiyagarajan <mukilan@igalia.com>
2025-08-12 12:45:15 +00:00
Mukilan Thiyagarajan
4c05758ded
script: support inline SVG by serializing the subtree (#38188)
This patch adds support for rendering static inline SVG documents in the
DOM tree by serializing the SVGElement's subtree and leveraging the
existing resvg based SVG stack for rendering. Serialiing the subtree is
necessary as resvg's tree representation (roxmltree) is immutable, so we
can't construct the tree incrementally.

Few other design choices here:
1. The `SVGSVGElement` is now treated as a replaced element and the
   layout code is responsible for plumbing the serialized SVG source
   (encoded as a base64 data: url) into the image cache, much like how
   background images are handled.
2. The serialization is done on the script thread after an initial
   layout pass. This is necessary because the serialization code asserts
that it is invoked from script thread i.e we can't call it from layout
   workers.
3. The serialized SVG data: url is cached to avoid recomputing it on
   subsequent layouts. The cache is invalidated when the SVGSVGElement's
   subtree is mutated.

The original SVGSVGElement code was behind the `dom_svg_enabled` pref.
This patch also removes the preference and make SVG support using resvg
available unconditionally.

Below is the analysis of the new test failures:

These tests use inline SVG but used to pass by accident.
They now fail because they contain SVG with no intrinsic
sizing which is not handled by resvg in a way that would
allows us to distinguish it from the sized case. The same
limitation applies to non-inline SVG.

 - /css/CSS2/positioning/absolute-replaced-width-003a.xht
 - /css/CSS2/positioning/absolute-replaced-width-003b.xht
 - /css/CSS2/positioning/absolute-replaced-width-003c.xht

These tests employ CSS styles in the HTML that
target the elements in inline SVG, which is not currently
supported.

-
/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-svg-basic.html
 - /css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-svg.html

This is a tentative test that uses the unsupported 'border-shape' CSS
property. The ref uses SVG, so it used to pass accidentally. The ref
still doesn't render correctly since it also relies on styling SVG
elements using CSS classes in the HTML (instead of inline in SVG).

 - /css/css-borders/tentative/border-shape/border-shape-stroke.html

These tests use the attribute 'clip-path=circle(...)' in the
test, but this doesn't seem to work in resvg.

 - /css/css-masking/clip-path/clip-path-borderBox-1b.html
 - /css/css-masking/clip-path/clip-path-contentBox-1b.html
 - /css/css-masking/clip-path/clip-path-contentBox-1c.html
 - /css/css-masking/clip-path/clip-path-fillBox-1b.html
 - /css/css-masking/clip-path/clip-path-marginBox-1a.html
 - /css/css-masking/clip-path/clip-path-paddingBox-1b.html
 - /css/css-masking/clip-path/clip-path-strokeBox-1b.html
 - /css/css-masking/clip-path/clip-path-strokeBox-1c.html
 - /css/css-masking/clip-path/clip-path-viewBox-1a.html
 - /css/css-masking/clip-path/clip-path-viewBox-1b.html
 - /css/css-masking/clip-path/clip-path-viewBox-1d.html
 - /css/css-masking/clip-path/svg-clip-path-circle-offset.html
 - /css/css-masking/clip-path/svg-clip-path-ellipse-offset.html

Additionally, the below two tests use a `foreignObject` SVG element
which
embeds a html div fragment. This is also not supported by resvg.

 - /css/css-masking/clip-path/clip-path-viewBox-1d.html
 - /css/css-masking/clip-path/clip-path-fillBox-1b.html

The following test fails because of apparent pixel differences
between a circle rendered purely using CSS clip-path vs a circle
rendered in SVG using resvg.

 - /css/css-masking/clip-path/clip-path-contentBox-1c.html

These tests style the inline SVG elements using CSS in the HTML or
separate stylesheet. This is not supported by this implementation.

 - /css-transforms/document-styles/svg-document-styles-{001..004}.html
 - /css-transforms/document-styles/svg-document-styles-012.html
 - /css-transforms/external-styles/svg-external-styles-{001..004}.html
 - /css-transforms/external-styles/svg-external-styles-014.html

These tests seem like they should pass, but they fail because of what
seems like an anti-aliasing issue in the rendering engine. The
transformed element has a thin outline which is causing pixel difference
with the ref:

 - /css/css-transforms/group/svg-transform-group-008.html
 - /css/css-transforms/group/svg-transform-group-009.html
 - /css/css-transforms/group/svg-transform-nested-009.html
 - /css/css-transforms/group/svg-transform-nested-013.html
 - /css/css-transforms/group/svg-transform-nested-014.html
 - /css/css-transforms/group/svg-transform-nested-018.html
 - /css/css-transforms/group/svg-transform-nested-019.html
 - /css/css-transforms/group/svg-transform-nested-008.html

The below tests fail because resvg is calculating the wrong size for the
'rect' inside the SVG. The dimensions of the SVG are established via the
CSS in the HTML, so it seems resvg is using incorrect coordinates for
the children of the svg when explict width/height are not specified in
the root svg element.

 - /css/css-transforms/group/svg-transform-group-011.html
 - /css/css-transforms/group/svg-transform-nested-021.html
 - /css/css-transforms/group/svg-transform-nested-029.html

All these tests use an SVG that doesn't have width nor height attributes
and this causes resvg to use incorrect coordinates for the SVG's
children. In addition, the following tests use the CSS syntax for
transforms inside the SVG (using style attribute) which is not supported
by resvg (it only supports the SVG 1.1 transform syntax).

 - /css/css-transforms/inline-styles/svg-inline-styles-{001..004}.html
 - /css/css-transforms/inline-styles/svg-inline-styles-012.html

In the case of these four tests, the `style` attribute specifies an
invalid transform, but resvg doesn't fallback to the transform specified
via the `transform`  attribute on the same element.

 - /css/css-transforms/inline-styles/svg-inline-styles-005.html
 - /css/css-transforms/inline-styles/svg-inline-styles-006.html
 - /css/css-transforms/inline-styles/svg-inline-styles-010.html
 - /css/css-transforms/inline-styles/svg-inline-styles-013.html

The following test fails because of the lack of width/height in SVG as
described above but it also exposes gaps in our CSS tranform
implementation.

 - /css/css-transforms/preserve3d-and-filter-with-perspective.html

These tests failure because resvg doesn't handle the SVG without
explicit width and height, but specified via CSS in the HTML. In
addition, there are pixel differences between the ref due to
antialiasing issues.

 - /css/css-transforms/matrix/svg-matrix-{005...008}.html
 - /css/css-transforms/matrix/svg-matrix-010.html
 - /css/css-transforms/matrix/svg-matrix-012.html
 - /css/css-transforms/matrix/svg-matrix-{015..069}.html
 - /css/css-transforms/rotate/svg-rotate-angle-45-001.html
 - /css/css-transforms/rotate/svg-rotate-angle-45-011.html
 - /css/css-transforms/rotate/svg-rotate-angle-45-022.html
 - /css/css-transforms/scale/svg-scale-006.html
 - /css/css-transforms/scale/svg-scale-007.html

These tests seem to be failing due to some sort of antialiasing issue,
where a transformed SVG element has a thin border that causes pixel
differences compared to the solid colored reference.

 - /css/css-transforms/skewX/svg-skewx-001.html
 - /css/css-transforms/skewX/svg-skewx-006.html
 - /css/css-transforms/skewX/svg-skewx-011.html
 - /css/css-transforms/skewX/svg-skewx-016.html
 - /css/css-transforms/skewX/svg-skewx-021.html
 - /css/css-transforms/skewX/svg-skewxy-001.html
 - /css/css-transforms/skewY/svg-skewy-001.html
 - /css/css-transforms/skewY/svg-skewy-006.html
 - /css/css-transforms/skewY/svg-skewy-011.html
 - /css/css-transforms/skewY/svg-skewy-016.html
 - /css/css-transforms/skewY/svg-skewy-021.html

These tests specify several SVG attributes such as transform,
vector-effect etc via CSS in the HTML (rather than inline in SVG). The
current implementation doesn't support this.

 - /css/css-transforms/transform-box/stroke-box-mutation-001.html
 - /css/css-transforms/transform-box/stroke-box-mutation-002.html
 - /css/css-transforms/transform-box/stroke-box-mutation-003.html
 - /css/css-transforms/transform-box/stroke-box-mutation-004.html
 - /css/css-transforms/transform-box/svgbox-stroke-box-002.html
 - /css/css-transforms/transform-box/svgbox-stroke-box-003.html
 - /css/css-transforms/transform-box/svgbox-stroke-box-004.html
 - /css/css-transforms/transform-box/svgbox-stroke-box-005.html

These tests depend on 'transform-origin' specified on an element inside
an SVG, but this transform is influenced by the 'tranform-box' set via
CSS in the HTML itself (not the SVG). The current implementation doesn't
support styling the SVG using document styles, so these tests just fail.

- /css/css-transforms/transform-origin/svg-origin-relative-length-*.html

These tests check the fallback behaviour when invalid syntax is
encountered in the 'transform-origin' value. resvg doesn't correctly
fallback to 0,0 causing the tests to fail.

-
/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-001.html
-
/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-002.html
-
/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-003.html
-
/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-004.html

These tests use unimplemented Canvas APIs like 'beginLayer' and
the 'CanvasFilter' constructor and hence fail at runtime.

-
/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.html
-
/html/canvas/element/filters/2d.filter.layers.gaussianBlur.tentative.html
-
/html/canvas/element/layers/2d.layer.anisotropic-blur.isotropic.tentative.html
-
/html/canvas/element/layers/2d.layer.anisotropic-blur.mostly-x.tentative.html
-
/html/canvas/element/layers/2d.layer.anisotropic-blur.mostly-y.tentative.html
-
/html/canvas/element/layers/2d.layer.anisotropic-blur.x-only.tentative.html
-
/html/canvas/element/layers/2d.layer.anisotropic-blur.y-only.tentative.html
-
/html/canvas/element/layers/2d.layer.css-filters.blur-and-shadow.tentative.html
 - /html/canvas/element/layers/2d.layer.css-filters.blur.tentative.html
- /html/canvas/element/layers/2d.layer.css-filters.shadow.tentative.html
 - /html/canvas/element/layers/2d.layer.ctm.layer-filter.tentative.html
-
/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.dropShadow.tentative.html
-
/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.html
-
/html/canvas/offscreen/filters/2d.filter.layers.dropShadow.tentative.html
-
/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.tentative.html
-
/html/canvas/offscreen/layers/2d.layer.anisotropic-blur.isotropic.tentative.html
-
/html/canvas/offscreen/layers/2d.layer.anisotropic-blur.mostly-x.tentative.html
-
/html/canvas/offscreen/layers/2d.layer.anisotropic-blur.mostly-y.tentative.html
-
/html/canvas/offscreen/layers/2d.layer.anisotropic-blur.x-only.tentative.html
-
/html/canvas/offscreen/layers/2d.layer.anisotropic-blur.y-only.tentative.html
-
/html/canvas/offscreen/layers/2d.layer.css-filters.blur-and-shadow.tentative.html
- /html/canvas/offscreen/layers/2d.layer.css-filters.blur.tentative.html
-
/html/canvas/offscreen/layers/2d.layer.css-filters.shadow.tentative.html
- /html/canvas/offscreen/layers/2d.layer.ctm.layer-filter.tentative.html

These tests fail because resvg doesn't seem to honour the 'translate'
CSS property specified on an SVG element using an inline 'style'
attribute.

 - /css/css-transforms/translate/svg-translate-with-units.html
-
/css/css-transforms/translate/translate-and-transform-attribute-in-svg.html
-
/css/css-transforms/translate/translate-and-transform-css-property-in-svg.html
 - /css/css-transforms/translate/translate-in-svg.html

These tests seem to fail due to the filter effect implementation in
resvg either not being complete or spec compliant.

 - /css/filter-effects/feconvolve-divisor.html
 - /css/filter-effects/feconvolve-region-001.html
 - /css/filter-effects/feconvolve-region-002.html
 - /css/filter-effects/filter-subregion-01.html
 - /css/filter-effects/svg-feimage-002.html
 - /css/filter-effects/svg-feimage-003.html
 - /css/filter-effects/svg-feimage-004.html
 - /css/filter-effects/svg-feoffset-001.html

The test /css/filter-effects/svg-feimage-004.html should ideally PASS
but currently fails because we don't propagate height/width set using
CSS in HTML element to the root SVG, so resvg uses the wrong dimensions
when rendering the children of the SVG.

These failures are due to deficienies in our current implementation
i.e we don't support styling SVG elements using CSS in HTML.

-
/css/css-transforms/gradientTransform/svg-gradientTransform-combination-001.html
 - /css/selectors/sharing-in-svg-use.html

The below test fails as our current implementation relies on resvg to
tell us the intrinsic ratio of the SVG, but this doesn't always work
correctly.

 - /css/css-sizing/svg-intrinsic-size-005.html

This failure is due to lack of proper fallback to no-op transform in
resvg when the `rotate()` syntax is specified with an invalid list e.g
`rotate(90,)`.

 - /css/css-transforms/rotate/svg-rotate-3args-invalid-002.html

This test only passes in CI and based on the raw log output, it seems
that no text inside the SVG is rendered in the CI. This could be an font
stack related issue.

 - /css/css-display/display-contents-svg-elements.html

This test asserts that the CSP blocks loads triggered using `use`
elements in SVG. It used to TIMEOUT as without inline SVG support, no
CSP violation event was triggered. It fails now since the event is now
triggered for the load of the SVG itself (our current implementation
loads inline SVGs as serialized base64 data: urls). This doesn't match
the blocked URL in the use element though.

 - /content-security-policy/img-src/svg-use-blocked.tentative.html

Signed-off-by: Mukilan Thiyagarajan <mukilan@igalia.com>

Signed-off-by: Mukilan Thiyagarajan <mukilan@igalia.com>
2025-08-11 11:07:59 +00:00
Oriol Brufau
f05f1b3690
Implement transition-behavior (#33991)
Bump Stylo to https://github.com/servo/stylo/pull/84

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
2024-10-24 20:34:10 +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
Martin Robinson
89944bd330
layout: Improve layout of table captions (#32695)
- 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>
2024-07-08 12:58:38 +00:00
Oriol Brufau
d10d01757d
Don't shrink table columns when handling cells with greater spanning (#32458)
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.
2024-06-07 16:37:12 +00:00
Martin Robinson
4ec61c2cdc
layout: Add support for clear on <br> elements (#32094)
`<br>` elements are a bit "special" in the sense that they defer a
linebreak, but can also have `clear` applied to them. The `clear` that
they supply should be applie *after* the linebreak is processed. This
change adds special processing for this situation.

Fixes #15402.
2024-04-17 14:15:06 +00:00
Oriol Brufau
007a31c1b5
Enable CSS Tables by default (#31470)
And remove the pref `layout.tables.enabled`.
2024-03-07 10:09:10 +00:00
Oriol Brufau
abda22ed63
Fix intrinsic sizing of tables (#31506)
* Fix intrinsic sizing of tables

* Feedback
2024-03-05 20:38:30 +00:00
Oriol Brufau
50fdb82246
Fix size of tables in flow layout (#31455)
* Fix size of tables in flow layout

The contents of a table can make it bigger than what we would expect
from its 'width', 'min-width', 'height' and ' min-height' properties.
Also, 'width: auto' doesn't stretch it to fill the containing block.

We had to refactor the resolution of margins to happen after layout,
otherwise 'auto' margins wouldn't align correctly.

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

* Feedback

* Consistently use `containing_block_for_table` in table layout

* Update test result

---------

Co-authored-by: Martin Robinson <mrobinson@igalia.com>
2024-03-02 01:39:41 +00:00
Martin Robinson
127aa657c2
layout: Add initial support for row height distribution (#31421)
This change adds a version of row height distribution that follows the
distribtuion algorithm used for tables in Blink's LayoutNG. This is just
an intermediate step toward implementing a distribution algorithm for
both rows and columns more similar to Layout NG.

The CSS Table 3 specification is often wrong with regard to web
compatability, which is why we have abandoned it in favor of the Layout
NG algorithm for row height distribution.  this work.

Co-authored-by: Oriol Brufau <obrufau@igalia.com>
2024-02-29 12:12:54 +00:00
Martin Robinson
35fb95ca85
layout: Start work on table row height and vertical-align (#31246)
This implements a very naive row height allocation approach. It has just
enough to implement `vertical-align` in table cells. Rowspanned cells
get enough space for their content, with the extra space necessary being
allocated to the last row. There's still a lot missing here, including
proper distribution of row height to rowspanned cells.

Co-authored-by: Oriol Brufau <obrufau@igalia.com>
2024-02-10 08:03:01 +00:00
Martin Robinson
1876b49251
layout: Add support for table border-spacing (#31166)
This adds support for table `border-spacing` property. Note that we do
not yet support the collapsed border model.

Co-authored-by: Oriol Brufau <obrufau@igalia.com>
2024-01-26 16:07:08 +00:00
atbrakhi
45af1198aa
Layout: use Au in ContentSizes (#31135)
* use app_units

* resolve errors in table layout

* fmt

* add back current_line.min_content

* update expectation

* review fix
2024-01-23 10:18:39 +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
Martin Robinson
aa073c3dca
layout: Implement support for line-height and vertical-align (#30902)
* layout: Implement support for `line-height` and `vertical-align`

This is an initial implementation of proper `line-height` and
`vertical-align` support. While this change includes the bulk of the
work there are still many missing pieces for full support. In particular
some big missing things are:

 - Flex containers do not properly compute their baselines. The idea is
   to tackle this in a followup change. This causes various flex tests
   to start failing because everything used to be top aligned.
 - The implementation of the line-height quirks (only active in quirks
   mode) are incomplete. While the quirk works in many cases, there are
   still some cases where it is handled incorrectly. This requires more
   redesign and refinement, better suited for a followup.
 - Most of the features are CSS 3 such as precision control of the
   baseline and first and last baselines are not implemented. This
   change gets us close to CSS 2.x support.

While there are many new test passes with this change some tests are
starting to fail. An accounting of new failures:

Tests failing also in Layout 2013:
 - /css/css2/positioning/toogle-abspos-on-relpos-inline-child.html (only passes in Chrome)
 - /css/CSS2/fonts/font-applies-to-001.xht (potentially an issue with font size)

Invalid tests:
 - /css/CSS2/visudet/inline-block-baseline-003.xht
 - /css/CSS2/visudet/inline-block-baseline-004.xht
 - These are are failing in all browsers. See https://bugs.chromium.org/p/chromium/issues/detail?id=1222151.

Missing table support:
 - /_mozilla/mozilla/table_valign_middle.html

Missing `font-size-adjust` support :
 - /css/css-fonts/font-size-adjust-zero-2.html (also failing in 2013)

Incomplete form field support :
- /html/rendering/widgets/the-select-element/option-add-label-quirks.html (label isn't rendered so button isn't the right size in quirks mode due to line height quirk)

Need support for calculating flexbox baseline:
 - /css/css-flexbox/fieldset-baseline-alignment.html
 - /css/css-flexbox/flex-inline.html
 - /css/css-flexbox/flexbox-baseline-multi-line-horiz-001.html
 - /css/css-flexbox/flexbox-baseline-single-item-001a.html
 - /css/css-flexbox/flexbox-baseline-single-item-001b.html

Failing because we don't create anonymous inline boxes for text children of blocks:
- /css/CSS2/linebox/anonymous-inline-inherit-001.html

Passes locally (potentially related to fonts):
 - /css/CSS2/css1/c414-flt-fit-004.xht
 - /css/css-transforms/transform-input-017.html
 - /html/obsolete/requirements-for-implementations/the-marquee-element-0/marquee-min-intrinsic-size.html
 - /css/css-fonts/first-available-font-005.html
 - /css/css-fonts/first-available-font-006.html

* Some cleanups after live review with @mukilan

Also update results.
2024-01-08 14:49:50 +00:00
Servo WPT Sync
3fc584d1a1
Sync WPT with upstream (12-11-2023) (#30724)
* Update web-platform-tests to revision b'46476776fdbf0a62522621002ba8af68e4d478b6'

* wpt import: update expectation

Signed-off-by: Mukilan Thiyagarajan <mukilan@igalia.com>

---------

Signed-off-by: Mukilan Thiyagarajan <mukilan@igalia.com>
Co-authored-by: Mukilan Thiyagarajan <mukilan@igalia.com>
2023-11-15 05:55:31 +00:00
Oriol Brufau
111716d458
Stop transitioning properties with a discrete animation type (#30565)
They are not transitionable:
https://drafts.csswg.org/css-transitions-1/#transitionable

There are some new failures in background-image-interpolation.html,
but I think the test is wrong, because it expects background-image
to be transitionable, even though the spec defines it with a discrete
animation type.
2023-10-20 12:55:33 +00:00
Oriol Brufau
9af3495d8a
Consider trailing_whitespace_advance when calling place_line_among_floats() (#30586)
After placing a float, FloatBox's layout_into_line_items() was calling
place_line_among_floats() with ifc.current_line.inline_position as the
width of needed by the contents of the line.

The problem is that this amount includes the trailing whitespace advance
and thus it could seem that the in-flow contents wouldn't fit next to
the float.

That's not the case, since collapsible whitespace at the end of the line
is removed, and preserved whitespace hangs.

So this patch subtracts ifc.current_line.trailing_whitespace_advance
when calling place_line_among_floats(), like it was already happening
when computing the available_inline_size.

Fixes #30561
2023-10-20 11:47:23 +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
Atbrakhi
2b67392fd5
Add initial support for css-text-3 whitespace handling (#29828)
* Add initial support for css-text-3 whitespace handling

This adds initial support for whitespace handling from the CSS
specification for Layout 2020. In general, the basics are covered. Since
test output is very sensitive to whitespace handling, this change
incorporates several fixes:

1. Whitespace is collapsed according to the Phase 1 rules of the
   specification, though language-specific unbreaking rules are not
   handled properly yet.
2. Whitespace is mostly trimmed and positioned according to the Phase 2
   rules, but full support for removing whitespace at the end of lines
   is pending on a temporary data structure to hold lines under
   construction.
3. Completely empty box fragments left over immediately after line
   breaks are now trimmed from the fragment tree.
4. This change tries to detect when an inline formatting context
   collapses through.

Fixes #29994.

Co-authored-by: Mukilan Thiyagarajan <me@mukilan.in>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
Signed-off-by: Martin Robinson <mrobinson@igalia.com>

* Update test results

---------

Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Mukilan Thiyagarajan <me@mukilan.in>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
2023-07-20 18:34:31 +00:00
Martin Robinson
ae3f33b9d0
Place replaced and non-auto inline size independent FCs next to floats (#29977)
* Place replaced and non-auto inline size independent FCs next to floats

The CSS2 specification says that replaced content and independent
formatting contexts should be placed next to floats. This change adds
support for that, but punts on support for independent formatting
contexts that have an auto inline size. With an auto inline size, we
which requires a much more complex layout algorithm.

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

* Fix issue with where last band was taken into account for inline size

* adjustment_from_floats should prevent margin collapse

* Properly handle elements with 0 height

---------

Co-authored-by: Oriol Brufau <obrufau@igalia.com>
2023-07-18 18:43:45 +00:00
Martin Robinson
d31cdb682f
Make the choice of layout runtime setting
Co-authored-by: Samson <16504129+sagudev@users.noreply.github.com>
2023-07-06 14:49:24 +02:00
bors-servo
fe5b494e3f
Auto merge of #29949 - Loirooriol:proper-clearance, r=mrobinson
Layout 2020: Properly calculate clearance

<!-- Please describe your changes on the following line: -->
calculate_clearance() was not taking into account that adding clearance prevents top margin from collapsing with earlier margins.

---
<!-- 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 #29885 and #29919
- [X] There are tests for these changes

<!-- 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. -->
2023-06-30 23:06:24 +02:00
bors-servo
cc54fbca90
Auto merge of #29836 - stshine:newline, r=mrobinson
layout_2020: Do linebreak for atomic inline-level elements

<!-- 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 #29591 (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. -->
2023-06-30 17:45:19 +02:00
Oriol Brufau
95832c999b Layout 2020: Properly calculate clearance
calculate_clearance() was not taking into account that adding clearance
prevents top margin from collapsing with earlier margins.
2023-06-30 16:51:39 +02:00
Pu Xingyu
65445ad742 Update test expectations 2023-06-30 10:40:33 +08:00
Oriol Brufau
a435e02b78 Properly position floats when subsequent boxes collapse margins with containing block (2)
PR #29939 tried to address this but missed various cases.
2023-06-29 05:49:01 +02:00
Martin Robinson
bb13702556 Properly position floats when subsequent boxes collapse margins with containing block
Margins should be able to collapse through floats when collapsing with
parent blocks (the containing block). To properly place floats in this
situation, we need to look at these subsequent floats to find out how
much of the margin will collapse with the parent.

This initial implementation is very basic and the second step would be
to cache this in order to avoid having to constantly recalculate it.

Fixes #29915.

Co-authored-by: Oriol Brufau <obrufau@igalia.com>
2023-06-27 22:45:42 +02:00
Oriol Brufau
e38083a96e Increase BFC root height to contain floats 2023-06-26 01:00:00 +02:00
WPT Sync Bot
209b7ad36b Update web-platform-tests to revision b'7b682ab07397d72fceb6594d0f27cb36cf1d8ee3' 2023-06-25 01:32:25 +00:00
Martin Robinson
f4578afdfe
Rename metadata directories
This renames:
 - `tests/wpt/metadata` → `tests/wpt/meta-legacy-layout`
 - `tests/wpt/metadata-layout-2020` → `tests/wpt/meta`
 - `tests/wpt/mozilla/meta` → `tests/wpt/mozilla/meta-legacy-layout`
 - `tests/wpt/mozilla/meta-layout-2020` → `tests/wpt/mozilla/meta`
2023-06-22 21:15:41 +02:00