Fixes #7428: Preload fonts avoid testing elements where font-family doesn't apply

[Miraeld]

Description

Fixes #7428
This enhancement improves font preloading performance by filtering out HTML elements that cannot be styled with font-family CSS properties before processing them for visibility and position checks.

Type of change

• Enhancement (non-breaking change which improves an existing functionality).

Detailed scenario

What was tested

Automated Testing:

• Added 16 new unit tests covering the new canElementBeStyledWithFontFamily() and canElementBeProcessed() methods
• Tests verify that excluded tag names (IMG, SCRIPT, STYLE, META, BR, FONT, etc.) are properly filtered out
• Tests confirm that valid elements (DIV, P, SPAN, etc.) can still be processed
• All 91 tests pass including existing regression tests

Manual Testing Scenarios:

• Verified that elements like <img>, <script>, <meta>, <br> are excluded from font analysis
• Confirmed that text elements like <p>, <div>, <span> continue to be processed normally

How to test

Refer to wp-media/rocket-scripts#61

Technical description

Documentation

Implementation Details:

1. Added EXCLUDED_TAG_NAMES constant containing 35 HTML tag names that cannot be styled with font-family:

• Metadata/document tags: BASE, HEAD, LINK, META, STYLE, TITLE, SCRIPT
• Media elements: IMG, VIDEO, AUDIO, EMBED, OBJECT, IFRAME
• Template/component tags: NOSCRIPT, TEMPLATE, SLOT, CANVAS
• Resource tags: SOURCE, TRACK, PARAM
• SVG references: USE, SYMBOL
• Layout elements: BR, HR, WBR
• Deprecated tags: APPLET, FONT, MARQUEE, etc.

2. New Methods:

• canElementBeStyledWithFontFamily(element): Checks if element's tagName is not in excluded set
• canElementBeProcessed(element): Combines font-family check with above-fold visibility check

3. Updated Filtering Logic:

• In run() method: Changed from .filter(el => this.isElementAboveFold(el)) to .filter(el => this.canElementBeProcessed(el))
• In processExternalFonts() method: Applied same filtering improvement

Flow Diagram

Element → canElementBeProcessed() → canElementBeStyledWithFontFamily() + isElementAboveFold()
                                                     ↓                              ↓
                                           Check tagName in EXCLUDED_SET    Check visibility/position
                                                     ↓                              ↓
                                              true/false ← AND ← true/false
                                                     ↓
                                           Process element or skip

New dependencies

None

Risks

None

Mandatory Checklist

Code validation

• I validated all the Acceptance Criteria. If possible, provide screenshots or videos.
• I triggered all changed lines of code at least once without new errors/warnings/notices.
• I implemented built-in tests to cover the new/changed code.

Code style

• I wrote a self-explanatory code about what it does.
• I protected entry points against unexpected inputs.
• I did not introduce unnecessary complexity.
• Output messages (errors, notices, logs) are explicit enough for users to understand the issue and are actionnable.

[Copilot]

Pull Request Overview

This PR enhances font preloading by excluding elements that cannot use the font-family CSS property before running visibility and position checks.

• Introduces an EXCLUDED_TAG_NAMES set to list non-stylable HTML tags.
• Adds canElementBeStyledWithFontFamily and canElementBeProcessed helper methods.
• Updates filtering in run() and processExternalFonts() to use the new combined check.

Comments suppressed due to low confidence (1)

assets/js/wpr-beacon.js:480

• [nitpick] The constant name EXCLUDED_TAG_NAMES is quite generic; consider renaming it to something like EXCLUDED_FONT_STYLABLE_TAGS to clarify that these tags cannot be styled with font-family.

    canElementBeStyledWithFontFamily(element) {

[codacy-production]

Coverage summary from Codacy

See diff coverage on Codacy

Coverage variation	Diff coverage
Report missing for 5aae1361	✅ ∅ (target: 50.00%)

Coverage variation details

	Coverable lines	Covered lines	Coverage
Common ancestor commit (5aae136)	Report Missing	Report Missing	Report Missing
Head commit (cb78759)	39811	17574	44.14%

Coverage variation is the difference between the coverage for the head and common ancestor commits of the pull request branch: <coverage of head commit> - <coverage of common ancestor commit>

Diff coverage details

	Coverable lines	Covered lines	Diff coverage
Pull request (#7486)	0	0	∅ (not applicable)

Diff coverage is the percentage of lines that are covered by tests out of the coverable lines that the pull request added or modified: <covered lines added or modified>/<coverable lines added or modified> * 100%

See your quality gate settings    Change summary preferences

Footnotes

1. Codacy didn't receive coverage data for the commit, or there was an error processing the received data. Check your integration for errors and validate that your coverage setup is correct. ↩