Closes #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

Describe how the PR can be tested so that the validator can be autonomous: environment, dependencies, specific setup, steps to perform, API requests, etc.

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.

[codacy-production]

Coverage summary from Codacy

See diff coverage on Codacy

Coverage variation	Diff coverage
✅ +0.55% (target: -1.00%)	✅ 100.00% (target: 50.00%)

Coverage variation details

	Coverable lines	Covered lines	Coverage
Common ancestor commit (347894a)	1828	1460	79.87%
Head commit (ffbab84)	1879 (+51)	1511 (+51)	80.42% (+0.55%)

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 (#61)	53	53	100.00%

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

[Copilot]

Pull Request Overview

This PR enhances font preloading by excluding non-stylable elements before running visibility and position checks.

• Introduces an EXCLUDED_TAG_NAMES set plus two methods—canElementBeStyledWithFontFamily and canElementBeProcessed—to filter out elements that can’t use font-family.
• Updates the run() and processExternalFonts() methods to use the new combined filtering logic.
• Adds unit tests for both new methods.

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
test/BeaconPreloadFonts.test.js	Added tests for canElementBeStyledWithFontFamily and canElementBeProcessed
src/BeaconPreloadFonts.js	Declared EXCLUDED_TAG_NAMES, implemented two filtering methods, and updated element filters in run and processExternalFonts

Comments suppressed due to low confidence (2)

test/BeaconPreloadFonts.test.js:222

• The tests cover only a subset of excluded tags; consider parameterizing or looping through the full EXCLUDED_TAG_NAMES list to ensure complete coverage.

    describe('canElementBeStyledWithFontFamily', () => {

src/BeaconPreloadFonts.js:92

• [nitpick] The method name is lengthy; you might rename it to something like isElementFontStylable or isFontFamilyApplicable for brevity and clarity.

    canElementBeStyledWithFontFamily(element) {