Skip to content

LibWeb: Update inherited properties for elements without layout nodes#7400

Closed
jmhunter83 wants to merge 2 commits intoLadybirdBrowser:masterfrom
jmhunter83:currentcolor-fix
Closed

LibWeb: Update inherited properties for elements without layout nodes#7400
jmhunter83 wants to merge 2 commits intoLadybirdBrowser:masterfrom
jmhunter83:currentcolor-fix

Conversation

@jmhunter83
Copy link
Copy Markdown
Contributor

@jmhunter83 jmhunter83 commented Jan 9, 2026

Summary

  • Fix for descendants of display:none elements retaining stale inherited property values
  • recompute_inherited_style() now updates computed properties even for elements without layout nodes
  • Added conditional check to only call apply_style() when layout node exists

Previously, recompute_inherited_style() returned early when an element had no layout node. This caused descendants of display:none elements to retain stale inherited property values. When a parent element transitions from display:none to visible (e.g., theme toggle showing a different SVG icon), its descendants need their inherited properties updated before layout nodes are created. Without this update, properties like fill: currentColor would resolve to the old inherited color value instead of the new one.

Fixes #7204

Test plan

  • Build succeeds
  • Test suite passes (5518 pass, 1 unrelated timeout)
  • Manual testing with theme toggle: SVG icons with fill: currentColor now correctly update when toggling themes via data-* attributes
  • Added regression test: Tests/LibWeb/Text/input/SVG/svg-currentcolor-inherited-update.html

🤖 Generated with Claude Code

Previously, recompute_inherited_style() returned early when an element
had no layout node. This caused a bug where descendants of display:none
elements would retain stale inherited property values.

When a parent element transitions from display:none to visible (e.g.,
theme toggle showing a different SVG icon), its descendants need their
inherited properties updated before layout nodes are created. Without
this update, properties like `fill: currentColor` would resolve to the
old inherited `color` value instead of the new one.

This fixes GitHub issue LadybirdBrowser#7204 where SVG icons with currentColor didn't
update after CSS changes triggered by data-* attribute modifications.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@AtkinsSJ
Copy link
Copy Markdown
Member

AtkinsSJ commented Jan 9, 2026

Can you add a test for this so we can avoid regressions? Probably a modification of the test case from #7204.

This test verifies that elements with display:none correctly receive
updated inherited property values when they become visible. It tests the
fix for GitHub issue LadybirdBrowser#7204 where SVG elements with currentColor would
retain stale inherited color values after theme changes.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@jmhunter83
Copy link
Copy Markdown
Contributor Author

Regression Test Added

Per request, I've added a regression test for this fix:

Test file: Tests/LibWeb/Text/input/SVG/svg-currentcolor-inherited-update.html

What the test verifies:

  1. Creates a container with two SVG icons (light/dark theme variants)
  2. Uses CSS display: none to hide one icon based on data-theme attribute
  3. Toggles the theme by changing the data-theme attribute
  4. Verifies that the previously-hidden element's inherited color property updates correctly

Test scenario:

Initial state: data-theme="light"
- dark-icon is display:none
- dark-icon's inherited color should be rgb(0, 0, 0) (black)

After toggle: data-theme="dark"  
- dark-icon becomes visible
- dark-icon's inherited color should now be rgb(255, 255, 255) (white)

Why this catches the bug:

Before the fix, recompute_inherited_style() would return early for elements without layout nodes (like display:none descendants). This meant when the theme changed, the dark-icon's inherited color property wouldn't update - it would retain the stale black value instead of updating to white. Any fill: currentColor on the SVG would then resolve to the wrong color.

The test passes with the fix applied.

@jmhunter83
Copy link
Copy Markdown
Contributor Author

Screen.Recording.2026-01-09.at.09.57.14.mov

@jmhunter83
Copy link
Copy Markdown
Contributor Author

CI Failure Analysis

The failing job Linux, x86_64, Sanitizer, GNU / CI reports memory leaks that are unrelated to this PR:

Leak locations (from ASan):

  • Libraries/LibWeb/Crypto/CryptoAlgorithms.cpp:9195 - MLKEM key import
  • Libraries/LibWeb/Crypto/CryptoAlgorithms.cpp:9270 - MLKEM key import

This PR modifies:

  • Libraries/LibWeb/DOM/Element.cpp - inherited style fix
  • Tests/LibWeb/Text/input/SVG/svg-currentcolor-inherited-update.html - regression test

The leaks are in the post-quantum cryptography (MLKEM) code path, which this PR does not touch. This appears to be a pre-existing issue or flaky test in the GNU sanitizer configuration.

Could a maintainer please re-run the failed job? All other CI jobs pass.

@AtkinsSJ
Copy link
Copy Markdown
Member

Changes look fine to me, though you need to rebase on master - the Windows CI job got renamed and it's required for merging.

Unrelated to the changes themselves, please don't feel the need to comment with everything that Claude says. It tends to be overly verbose, and makes the whole thing feel like I'm just talking to Claude with extra steps.

@jmhunter83
Copy link
Copy Markdown
Contributor Author

for the changes, i could see why you say that.

@github-actions
Copy link
Copy Markdown

This pull request has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions!

@github-actions github-actions Bot added the stale label Feb 11, 2026
@github-actions
Copy link
Copy Markdown

This pull request has been closed because it has not had recent activity. Feel free to open a new pull request if you wish to still contribute these changes. Thank you for your contributions!

@github-actions github-actions Bot closed this Feb 19, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

SVG icon color using currentColor does not update after data-* attribute change until reload

2 participants