Broken CSS property tests in new RWD certification when using Firefox

Affected page

There are multiple pages affected. I will use step 25 in the Learn Accessibility by Building a Quiz course as an example.

When using Firefox, the code check is erroneously failing for border: 0. The current assert for this test is

assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.border, '0px');

Chrome-based browsers do return 0px when border is set to 0 but Firefox is returning 0px none and thus the assert is failing.

Your code

The following assert fixes this issue and allows the border test to pass for both Chrome and Firefox.

assert.include(['0px', '0px none'], new __helpers.CSSHelp(document).getStyle('.sr-only')?.border);

System

• Device: Desktop
• OS: Linux/Fedora 34
• Browser: Firefox
• Version: 95.0

Additional context

I am going through the entire accessibility course and finding/fixing all of these Firefox-specific issues and will open a PR. Should I do a separate PR for each step that needs fixing or one PR that includes all of the fixed steps in the accessibility course?

[gikf]

Another affected property is background.

I mentioned this in related PR, tests could target more precisely the desired property. For example, when set should be border: 0;, check in test value of borderWidth, rather than the general border.

[moT01]

I gave the linked challenges in this thread a quick test, they seem to be working now. I think we can safely close this. If anyone still has any concerns, feel free to bring them up and we can reopen it. Thanks and happy coding 🎉