Skip to content

fix: multi-line inline block with background color; support CSS filter #3251

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

Ovilia
Copy link

@Ovilia Ovilia commented Jul 4, 2025

Summary

This PR fixes/implements the following bugs/features

  • Bug: multi-line inline block with background color
  • Bug: CSS filter was not supported

Explain the motivation for making this change. What existing problem does the pull request solve?

Bug 1: multi-line inline block with background color

Before:

image

The background of multi-line inline element has wrong position, and it covers other text.

After:

image

Bug 2: CSS filter has no effect

Before:

image

CSS filter was not supported.

After:

image

Test plan (required)

  • tests/reftests/filter.html
  • tests/reftests/text/child-textnodes.html

Code formatting

Please make sure that code adheres to the project code formatting. Running npm run format will automatically format your code correctly.

Closing issues

Fixes #

@ekxs0109
Copy link

ekxs0109 commented Jul 8, 2025

However, this test case is failing - there's an issue with the textBounds calculation:

<div 
  class="text-formatting" 
  style="border: 1px solid transparent; border-radius: 10px"
>
  <div style="color: #fae1e1">
    <mark 
      data-color="#a64242" 
      style="background-color: #a64242; color: inherit"
    >
      <u>Financial freedom is achieved when passive income covers living expenses, requiring</u>
      test
    </mark>
    <s>
      <mark 
        data-color="#a64242" 
        style="background-color: #a64242; color: inherit"
      >
        <u>clear goals, planned paths and seizing opportunities. Core strategies include increasing income and reducing expenses, investment management and career development. Combined with Ganzhou's distinctive economy such as rare earth and cultural tourism industries, one can</u>
      </mark>
    </s>
    <mark 
      data-color="#a64242" 
      style="background-color: #a64242; color: inherit"
    >
      <u>discover unique opportunities to accelerate wealth accumulation.</u>
    </mark>
  </div>
</div>

The textBounds calculation has issues with this complex nested structure.

@Ovilia
Copy link
Author

Ovilia commented Jul 16, 2025

Financial freedom is achieved when passive income covers living expenses, requiring test clear goals, planned paths and seizing opportunities. Core strategies include increasing income and reducing expenses, investment management and career development. Combined with Ganzhou's distinctive economy such as rare earth and cultural tourism industries, one can discover unique opportunities to accelerate wealth accumulation.

Thanks for your feedback. I don't think this is a problem brought by this PR because I checked the result with the currect code before this PR, it behaves the same. So I think this should be relevant to my changes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants