Commit graph

42 commits

Author SHA1 Message Date
Martin Robinson
99ce81cf64
layout: Support storing layout data for two-level nested pseudo-elements (#38678)
Add basic support for storing layout data for pseudo-elements nested to
up to two levels. This removes the last unstored layout result and fixes
a double-borrow issue. This change does not add properly parsing nor
styling of these element types, but does prepare for those changes which
must come from stylo.

Testing: This fixes a intermittent panic in
`tests/wpt/tests/css/css-lists/nested-marker-styling.html`
Fixes: #38177. 
Closes: #38183.

Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
2025-08-14 13:41:34 +00:00
Martin Robinson
5ff084a688
layout: Use the PseudoElement from ServoThreadSafeLayoutNode in NodeAndStyleInfo (#38630)
Instead of storing the non-pseudo version of the node in
`NodeAndStyleInfo`, store the pseudo version and use that to query the
`PseudoElement` that a `NodeAndStyleInfo` refers to.

This is a step on the way toward fixing nested pseudo-elements in Servo.

Testing: This should not change behavior and is thus covered by existing
WPT tests.

Signed-off-by: Martin Robinson <mrobinson@igalia.com>
2025-08-13 17:31:57 +00:00
Martin Robinson
ee7c1d9109
layout: Use ServoThreadSafeLayoutNode in more places (#38626)
Use `ServoThreadSafeLayoutNode` in more places in layout rather than
`ServoLayoutNode`. The former is meant to be used during layout, but
layout 2020 was written against the latter. In general, this reduces the
amount of conversion to the thread-safe version in many places in
layout.

In addition, an unused iterator from the `script` crate
`ServoThreadSafeLayoutNodeChildrenIterator` is replaced with the child
iterator from `layout`. The `layout` version must be directly in
`script` now as it uses the dangerous variants of `next_sibling` and
`first_child`, which allow encapsulating the unsafe bits into one
module.

This will ultimately be useful for storing the layout data of
pseudo-element children of pseudo-elements properly.

Testing: This should not change any behavior and thus is covered by
existing tests.

Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
2025-08-13 14:55:19 +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
Jo Steven Novaryo
3cb16eb864
Reland Input type=text Shadow DOM With Performance Improvement (#37483)
Depends on #37427.

In addition to the changes introduced by
https://github.com/servo/servo/pull/37065, there are several performance
improvements and nits as follows:
- Use the internal pseudo element for style matching, this will reduce
the performance regression by ~66%.
- Manual construction of the `Text` node inside a text container. This
is followed by the modification of the inner `Text` node instead of
using `SetTextContent` which is more expensive.
- Use `implemented_pseudo_element` instead of
`text_control_inner_editor` `NodeFlag` to handle the special cases that
these elements should follow, specifically the:
  - focus delegation workaround;
  - selections; and
  - line height resolving.
- More documentation.

Servo's side of: https://github.com/servo/stylo/pull/217

Testing: No new unexpected WPT failure, except for the one introduced by
https://github.com/servo/servo/pull/37065/.
Fixes: #36307 #37205

---------

Signed-off-by: stevennovaryo <steven.novaryo@gmail.com>
2025-07-23 09:08:24 +00:00
Martin Robinson
2366a8bf9e
script: Wrapping unsafe code in unsafe blocks for basic DOM types (#37997)
There is a new default cargo clippy lint, `unsafe_op_in_unsafe_fn`,
which requires unsafe code to be wrapped in unsafe blocks, even inside
functions marked as unsafe. The lint is disabled as much of our code
doesn't fulfill this contract. The thing itself is pretty useful in
order to gradually remove unsafety, so this change starts adding
`unsafe` blocks so we can eventually enable this lint.

Testing: This doesn't change behavior so existings tests should suffice.
Fixes: This is part of #35955.

Signed-off-by: Martin Robinson <mrobinson@igalia.com>
2025-07-11 11:38:02 +00:00
Martin Robinson
69ff4afa58
Rename script_layout_interface to layout_api (#37591)
Now that we are standardizing on the `_traits` crates becoming `_api`
and exposing the API of the crate that they get their name from [^1],
`script_layout_interface` becomes `layout_api` as it exposes the API for
`layout` that is used by `script` This brings the crate in line with the
naming of the other ones in `shared`.

[^1]:
https://servo.zulipchat.com/#narrow/channel/263398-general/topic/Organizing.20*_traits.20crates/with/396893711

Testing: This should not change any behavior and thus is covered by
existing tests.

Signed-off-by: Martin Robinson <mrobinson@igalia.com>
2025-06-20 17:13:05 +00:00
Simon Wülker
0fa3de3937
Support ::part selector (#37307)
This is pretty much just wiring up the necessary stylo methods. Note
that the `exportparts` attribute is not yet supported, I'll do that in a
followup change

Testing: Covered by existing web platform tests.
This is the first half of https://github.com/servo/servo/issues/35349

Fixes https://github.com/servo/servo/issues/37325

---------

Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
2025-06-09 10:17:28 +00:00
webbeef
a1f43ab06d
Revert "Implement Input UA Shadow DOM (#37065)" (#37296)
This reverts commit 5580704438.

Let's re-land that fix when a working solution is found. Keeping that
regression makes it hard to evaluate other potential improvements.

Signed-off-by: webbeef <me@webbeef.org>
2025-06-06 15:23:08 +00:00
Steven Novaryo
5580704438
Implement Input type=text UA Shadow DOM (#37065)
Implement Shadow Tree construction for input `type=text`, adding a text
control inner editor container and placeholder container. Subsequently,
due to the changes of the DOM tree structure, the changes will add a new
NodeFlag `IS_TEXT_CONTROL_INNER_EDITOR` to handle the following cases.
- If a mouse click button event hits a text control inner editor, it
will redirect the focus target to its shadow host.
- In text run's construction, the text control inner editor container
queries the selection from its shadow host. This is later used to
resolve caret and selection painting in the display list.

This will be the first step of fixing input `type=text` and other
single-line text input element widgets. Such as, implementing
`::placeholder` selector.



Testing: Existing WPT test and new Servo specific appearance WPT.
Fixes: #36307

---------

Signed-off-by: stevennovaryo <steven.novaryo@gmail.com>
2025-05-30 12:02:10 +00:00
Mukilan Thiyagarajan
8a20e42de4
Add support for static SVG images using resvg crate (#36721)
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:
![servo - resvg
img](https://github.com/user-attachments/assets/8ecb2de2-ab7c-48e2-9f08-2d09d2cb8791)

<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>
2025-05-27 11:02:40 +00:00
Simon Wülker
b100a98e1d
Fully support <input type=color> (#36992)
This change adds a shadow-tree widget for `<input type=color>` elements.
It also involves some changes to the way layout interacts with the DOM,
because currently all `input` and `textarea` elements are rendered as
plain text and their descendants are ignored. This obviously doesn't
work for `<input type={color, date, range, etc}>`.


![image](https://github.com/user-attachments/assets/4f16c3b0-1f79-4095-b19d-1153f5853dd5)

<details><summary>HTML used for the screenshot above</summary>

```html
<input type=color>
```

</details>



Testing: I doubt that this affects WPT tests, because the appearance and
behaviour of the widget is almost entirely unspecified.

---------

Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
2025-05-15 17:30:38 +00:00
Nico Burns
c792e6db7c
Use version of markup5ever with web_atoms crate (#36542)
Upgrades `markup5ever` and fixes "unnecessary import" lints.

See https://github.com/servo/html5ever/pull/599
And https://github.com/servo/stylo/pull/173

Signed-off-by: Nico Burns <nico@nicoburns.com>
2025-04-19 11:49:37 +00:00
Martin Robinson
b5c8164e99
layout: Simplify and generalize the usage of pseudo-elements (#36202)
- Remove the last remaining Servo-specific PseudoElement enum from
  layout. This was made to select `::before` and `::after` (both eager
  pseudo-elements), but now `traverse_pseudo_element` is called
  `traverse_eager_pseudo_element` and should work on any eager pseudo
  element.
- Expose a single way of getting psuedo-element variants of
  ThreadSafeLayoutElement in the Layout DOM, which returns `None` when
  the pseudo-element doesn't apply (not defined for eager
  pseudo-elements or when trying to get `<details>` related
  pseudo-elements on elements that they don't apply to).
- Ensure that NodeAndStyleInfo always refers to a node. This is done by
  making sure that anonymous boxes are all associated with their
  originating node.

These changes are prepatory work for implementation of the `::marker`
pseudo-element as well as ensuring that all anonymous boxes can be
cached into the box tree eventually.

Signed-off-by: Martin Robinson <mrobinson@igalia.com>
2025-03-29 12:41:04 +00:00
Martin Robinson
a9b393a854
script: Eliminate PseudoElementType (#36146)
Servo has a `PseudoElementType` which more or less duplicate's Stylo's
`PseudoElement` with the addition of a non-pseudo element variant. This
type needs to be converted into `PseudoElement` anyway when asking for
the style of an element from Stylo, so eliminate Servo's version and
simply use `Option<PseudoElement>` with the `None` variant meaning the
non-pseudo.

This is preparation for adding support for the `::marker` pseudo
element.

Signed-off-by: Martin Robinson <mrobinson@igalia.com>
2025-03-26 08:33:12 +00:00
Martin Robinson
be164874e7
script: Remove ThreadSafeLayoutNode::is_ignorable_whitespace (#35959)
This is now unused with the removal of legacy layout. I didn't see any
others methods in this trait that were unused.

Signed-off-by: Martin Robinson <mrobinson@igalia.com>
2025-03-13 13:10:48 +00:00
Simon Wülker
5a5d796988
Implement ServoLayoutNode::traversal_parent (#35338)
This fixes common crash related to slottables, currently present on wpt.fyi.

Previously, the traversal parent of `Text` nodes was incorrectly
assumed to always be the parent or shadow host. That caused crashes
inside stylo's bloom filter. Now the traversal parent is the slot
that the node is assigned to, if any, and the parent/shadow host otherwise.

The slottable data for Text/Element nodes is now stored in NodeRareData.
This is very cheap, because NodeRareData will already be instantiated
for assigned slottables anyways, because the containing_shadow_root
field will be set (since assigned slottables are always in a shadow
tree). This change is necessary because we need to hand out references
to the assigned slot to stylo and that is not possible to do (without
unsafe code) if we need to downcast the node first.

As a side effect, this reduces the size of `Text` from 256 to 232 bytes,
because the slottable data is no longer stored there.

Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
2025-02-07 01:05:27 +00:00
Josh Matthews
c0cef69108
Move more foundational types to script_bindings (#35280)
* script: Move DOMClass to script_bindings.

Signed-off-by: Josh Matthews <josh@joshmatthews.net>

* script: Move DOMJSClass and get_dom_class to script_bindings.

Signed-off-by: Josh Matthews <josh@joshmatthews.net>

* script: Move Castable/DerivedFrom/IDLInterface to script_bindings.

Signed-off-by: Josh Matthews <josh@joshmatthews.net>

---------

Signed-off-by: Josh Matthews <josh@joshmatthews.net>
2025-02-04 10:36:30 +00:00
Simon Wülker
6a2e37183c
Lay out the contents of slot elements (#35220)
* Make Slottable match layout/alignment of NonNull<Node>

Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>

* Implement ServoLayoutElement::slotted_nodes

Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>

* Bump mozjs

Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>

* Layout the contents of slot elements

Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>

* Implement ServoLayoutElement::assigned_slot

Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>

* implement ServoLayoutElement::traversal_parent

Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>

* Simplify slottable name update

Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>

* Don't iterate over children of shadow hosts

Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>

* Recompute slot style when contents change

Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>

* Change match_slottable to a function instead of a macro

Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>

* Fix crown errors

Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>

* Update WPT expectations

Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>

* Reset a slottable's assigned slot when it's removed from the slot

Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>

---------

Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
2025-02-02 20:49:42 +00:00
Josh Matthews
c94d909a86
script: Limit public exports. (#34915)
* script: Restrict reexport visibility of DOM types.

Signed-off-by: Josh Matthews <josh@joshmatthews.net>

* script: Mass pub->pub(crate) conversion.

Signed-off-by: Josh Matthews <josh@joshmatthews.net>

* script: Hide existing dead code warnings.

Signed-off-by: Josh Matthews <josh@joshmatthews.net>

* Formatting.

Signed-off-by: Josh Matthews <josh@joshmatthews.net>

* Fix clippy warnings.

Signed-off-by: Josh Matthews <josh@joshmatthews.net>

* Formatting.

Signed-off-by: Josh Matthews <josh@joshmatthews.net>

* Fix unit tests.

Signed-off-by: Josh Matthews <josh@joshmatthews.net>

* Fix clippy.

Signed-off-by: Josh Matthews <josh@joshmatthews.net>

* More formatting.

Signed-off-by: Josh Matthews <josh@joshmatthews.net>

---------

Signed-off-by: Josh Matthews <josh@joshmatthews.net>
2025-01-10 08:19:19 +00:00
Simon Wülker
b6a5eaa3db
Add shadow tree flags to Bind/UnbindContext (#34863)
* Rename IS_IN_DOC flag to IS_IN_A_DOCUMENT_TREE

Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>

* Add BindContext::is_in_a_shadow_tree

Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>

* Add UnbindContext::tree_is_in_shadow_tree

Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>

* ./mach fmt

Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>

* Update test expectations

Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>

* fix build after rebasing

Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>

---------

Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
2025-01-07 00:00:43 +00:00
Martin Robinson
621ddd749c
Elide lifetimes where possible after rustup (#34824)
The new version of rust allows us to elide some lifetimes and clippy is
now complaining about this. This change elides them where possible and
removes the clippy exceptions.

Fixes #34804.

Signed-off-by: Martin Robinson <mrobinson@igalia.com>
2025-01-03 18:54:44 +00:00
Martin Robinson
30abb99287
clippy: Add safety documentation and clean up unsafe methods (#33748)
This change:

1. Adds safety documentation where it was missing.
2. Limits the scope of unsafe code in some cases to where it is actually
   unsafe.
3. Converts some free functions to associated functions and methods,
   thereby making them more likely to be called safely.

Signed-off-by: Martin Robinson <mrobinson@igalia.com>
2024-10-16 08:11:31 +00:00
Martin Robinson
cd2ab36759
Rename gfx to fonts (#32556)
This crate only takes care of fonts now as graphics related things are
split into other crates. In addition, this exposes data structures at
the top of the crate, hiding the implementation details and making it
simpler to import them.

Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Mukilan Thiyagarajan <mukilan@igalia.com>
2024-06-19 20:26:19 +00:00
Martin Robinson
f4c9b310d5
layout: Take into account display: table etc in offset* queries (#32448)
* 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>
2024-06-10 15:05:57 +00:00
Mukilan Thiyagarajan
2af6fe0b30
compositor: Move WebRender-ish messages and types to webrender_traits (#32315)
* Move WebRender related types to `webrender_traits`

This refactor moves several WebRender related types
from `compositing_traits`, `script_traits` and `net_traits`
crates to the `webrender_traits` crate.

This change also moves the `Image` type and associated
function out of `net_traits` and into the `pixels` crate.

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

* Move `script_traits::WebrenderIpcSender` to `webrender_traits::WebRenderScriptApi`

---------

Signed-off-by: Mukilan Thiyagarajan <mukilan@igalia.com>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
2024-05-20 10:35:18 +00:00
Martin Robinson
3398fc017b
Move non-gfx things out of gfx_traits and create a base crate (#32296)
For a long time, `gfx_traits` has held a lot of things unrelated to graphics
and also unrelated to the `gfx` crate (which is mostly about fonts).
This is a cleanup which does a few things:

1. Move non `gfx` crate things out of `gfx_traits`. This is important in
   order to prevent dependency cycles with a different integration between
   layout, script, and fonts.
2. Rename the `msg` crate to `base`. It didn't really contain anything
   to do with messages and instead mostly holds ids, which are used
   across many different crates in Servo. This new crate will hold the
   *rare* data types that are widely used.

Details:

 - All BackgroundHangMonitor-related things from base to a new
   `background_hang_monitor_api` crate.
 - Moved `TraversalDirection` to `script_traits`
 - Moved `Epoch`-related things from `gfx_traits` to `base`.
 - Moved `PrintTree` to base. This should be widely useful in Servo.
 - Moved `WebrenderApi` from `base` to `webrender_traits` and renamed it
   to `WebRenderFontApi`.
2024-05-17 12:28:58 +00:00
Oriol Brufau
d490fdf83c
Turn white-space into a shorthand (#32146)
Bumps Stylo to servo/stylo#37

`white-space` is split into `white-space-collapse` and `text-wrap-mode`:

| white-space | white-space-collapse | text-wrap-mode |
| ----------- | -------------------- | -------------- |
| normal      | collapse             | wrap           |
| nowrap      | collapse             | nowrap         |
| pre-wrap    | preserve             | wrap           |
| pre         | preserve             | nowrap         |
| pre-line    | preserve-breaks      | wrap           |
| -           | preserve-breaks      | nowrap         |

Note this introduces a combination that wasn't previously possible,
but I think the existing logic can handle it well enough.

The old `allow_wrap()` is replaced by checking whether `text-wrap-mode`
is set to `wrap`.

The old `preserve_newlines()` is replaced by checking whether
`white-space-collapse` is *not* set to `collapse`.

The old `preserve_spaces()` is replaced by checking whether
`white-space-collapse` is set to `preserve`.
2024-04-29 10:40:44 +00:00
Martin Robinson
24c3a2df1e
script: Make layout DOM wrappers not generic on layout data (#31994)
Remove the type parameter from the layout DOM wrappers. This is possible
now that style and layout data are separate and the `Any` nature of the
layout data is exposed in the wrappers.

Removing the phantom data member of the wrappers also allows using the
default `derive` implementations for things like `Clone`, `Copy`, and
`PartialEq`.
2024-04-04 11:34:35 +00:00
Martin Robinson
08ef158d4e
script: Split style and layout data in DOM nodes (#31985)
This change splits the style and layout data in DOM nodes that is
populated by style and layout passes. This makes Servo's data design
more like Gecko's. This allows:

1. Removing the various `StyleAndLayout` data structures used by layout.
2. Removing the `GetStyleAndLayoutData` and
   `GetStyleAndOpaqueLayoutData` traits. Accessing style and layout data
   are now just functions on the `LayoutNode` and `ThreadSafeLayoutNode`
   traits.
3. Styling now doesn't populate layout data. This is is postponed until
   layout itself.
4. Allows the DOM wrappers to no longer have to be generic over the
   layout data. This data was already stored using `std::any::Any` and
   the new code just makes layout responsible for downcasting. Cleaning
   up the generic type parameter in the DOM wrappers can happen in a
   followup change.

The main benefit to all of this is that we should be able to remove
unsafe creation of `ServoLayoutNode` in layout and
`TrustedLayoutNodeAddress` entirely, because `ServoLayoutNode` will be
able to be passed directly from script to layout. In addition, this
removes one more abstraction layer from the layout DOM wrappers, making
the code a lot more understandable.

Note: This increases the measured size of DOM types, but the same data
is stored. It's simply that before that data was stored behind a heap
pointer.
2024-04-04 07:56:51 +00:00
Martin Robinson
18b37e676b
script: Reduce the use of unsafe in LayoutDom (#31979)
Remove the use of unsafe code in the layout wrappers of the DOM. The
main change here is that `unsafe_get()` no longer needs to be an unsafe
method, which allows us to transitively remove or reduce unsafe blocks
from callers. The function itself is not renamed, because it's still
a bit dangerous to start removing the layers of abstraction from actual
DOM nodes.

In addition `init_style_and_opaque_layout_data` can be merged into
`initialize_data`, which removes one more unsafe method.

Finally, a "Safety" section is added to some unsafe methods.
2024-04-03 08:41:19 +00:00
komuhangi
c3360df918
Fixed some clippy warnings in components/script (#31950)
* Fixd some clippy warnings in components/script

* Update node.rs

Removed the  ```# Safety ``` section.

* Update shadow_root.rs

Removed the ``` # Safety ``` section from components/script/layout_dom

* Updated fixes to some clippy warnings in components/script

* Revert "Updated fixes to some clippy warnings in components/script"

This reverts commit 2a37c3dec8.

* Updated fixes to clippy warnings in components/script

* Revert "Updated fixes to clippy warnings in components/script"

This reverts commit 5780dc3a0a.

* Revert "Revert "Updated fixes to some clippy warnings in components/script""

This reverts commit 98c411354a.

* Revert "Updated fixes to some clippy warnings in components/script"

This reverts commit 2a37c3dec8.

* Update shadow_root.rs (Ignore change)

* Update node.rs (Ignore changes)

* Updated fixes to clippy warnings in components/script

* Removed  trailing white space in componets/script/layout_dom_root.rs

* Revert "Removed  trailing white space in componets/script/layout_dom_root.rs"

This reverts commit 1976fd0405.

* Revert "Updated fixes to clippy warnings in components/script"

This reverts commit 5c71b925fb.

* Updated fixes to clippy warnings in components/script including review suggestions.
2024-03-31 19:51:16 +00:00
Oluwatobi Sofela
f8a2eaea47
clippy: Fix collapsible_else_if warnings (#31853) 2024-03-26 09:15:04 +00:00
Oluwatobi Sofela
bae77671f8
clippy: Fix unnecessary_cast warnings in components/script (#31823)
* clippy: Fix unnecessary cast warnings

* clippy: Replace redundant field names with their shorthand alternatives

* clippy: Delete struct pattern dereferencings
2024-03-22 13:48:03 +00:00
Aarya Khandelwal
9b26dca141
Fixed the .clone() warnings. (#31819) 2024-03-22 05:41:17 +00:00
eri
21939c2ba8
clippy: Fix warnings in components/shared (#31627)
* clippy: fix warnings in `components/shared`

* fix: formatting derive

* fix: rename new to default
2024-03-12 17:22:05 +00:00
Martin Robinson
02ae1f448e
layout: Add support for table rows, columns, rowgroups and colgroups (#31341)
This adds support for table rows, columns, rowgroups and colgroups.
There are few additions here:

1. The createion of fragments, which allows script queries and hit
   testing to work properly. These fragments are empty as all cells are
   still direct descendants of the table fragment.
2. Properly handling size information from tracks and track groups as
   well as frustrating rules about reordering rowgroups.
3. Painting a background seemlessly across track groups and groups. This
   is a thing that isn't done in legacy layout (nor WebKit)!

Co-authored-by: Oriol Brufau <obrufau@igalia.com>
2024-02-20 13:22:02 +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
72b5fcd0b6 Combine DOM-related concepts in Layout 2020 into dom.rs 2023-05-13 11:52:59 +02:00
Martin Robinson
ab4bd2a133 Remove DangerousThreadSafeLayoutNode
Remove this trait and replace it by two non-public functions on
ServoThreadSafeLayoutNode. This requires making the iterator not
generic, which simplifies things a little bit as well.
2023-05-12 08:18:31 +02:00
Martin Robinson
2d31d4301d Eliminate duplicate Layout DOM wrappers
There are duplicate sets of Layout DOM wrappers: one for Layout 2013 and
one for Layout 2020. As part of cleaning up and simplifying the
wrappers, this change parameterizes them on the specific layout data
they contain. This allows them to be shared again. In addition, various
small cleanups are included.

Fixes #29691.
2023-05-05 17:16:38 +02:00