dotnet / dotnet/aspnetcore

Add fallback tests based on css pseudo-elements

Open
#38,146 4 comments 6 reactions 0 assignees View on GitHub
area-ui-rendering enhancement feature-mvc-razor-views
Dominant language
C#
Stars
38.4k
Forks
10.9k
Avg merge
2d 10h
Merged PRs (30d)
281

Description

**Motivation:**

CSS for a popular CDN package [Bootstrap Icons](https://icons.getbootstrap.com/) consists entirely of pseudo-element definitions, such as below:

```
.bi::before {
display: inline-block;
font-family: bootstrap-icons !important;
...
}
```

The current implementation of the ASP.NET fallback tester offers no support for pseudo-elements, because the JavaScript for the tester calls a single-parameter overload of [`getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle). To test pseudo-elements, we need to pass the name of the the pseudo-element to be tested as a second parameter of `getComputedStyle`.

**Solution:**

We add support for testing pseudo-elements by setting an `asp-fallback-test-pseudo-element` attribute:

...
asp-fallback-test-class="bi"
asp-fallback-test-pseudo-element="before"
...

We then pass the value of the `asp-fallback-test-pseudo-element` as the second parameter to the fallback tester function, which then forwards it to `getComputedStyle`; if no value is specified, we pass `null`.

Contributor guide

Open the contributing guide

Research direction

Locate the ASP.NET fallback tester's JavaScript and its existing fallback tests, then inspect how asp-fallback-test-class is read and how getComputedStyle is called. Add coverage for the asp-fallback-test-pseudo-element attribute and verify both the specified pseudo-element and the no-value case are handled.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript
Domain
testing-qa, web-dev
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.