1620149 - Empty lang="" attribute disrupts font selection [was: `html:root` in `userContent.css` does not match `<html lang="">`]

Status: UNCONFIRMED

(Core :: Layout: Text and Fonts, defect, P3)

Description

[Ciprian Dorin Craciun]

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.100 Safari/537.36

Steps to reproduce:

My userContent.css contains:

html:root {
    font-family : "JetBrains Mono";
    font-size : 16px;
}

A simple HTML with the content correctly displays monospace font on red background:

<html>
	<head><style>html:root { background : red };</style></head>
	<body>hello</body>
</html>

However the following snippet (only having a lang="" attribute) does display a red background, but not a monospace font:

<html lang="">
	<head><style>html:root { background : red };</style></head>
	<body>hello</body>
</html>

Actual results:

The snippet containing lang="" fails to apply html:root from userContent.css.

The snippet not containing lang="", correctly applied html:root from userContent.

Expected results:

Both snippets should result in monospace font on red background. (I.e. html:root should apply both from userContent.css and the inline <style>, for both snippets, regardless of the lang="" attribute.)

As a sidenote, adding lang="en" does seem to work. Only lang="" breaks the matching.

Comment 1

[Ciprian Dorin Craciun]

(The user-agent put automatically by the "report a bug" system is wrong. I use Chrome to access this site, but the bug does refer to Firefox.)

Comment 2

[Emilio Cobos Álvarez [:emilio]]

If you use html:root { color: purple } or such in the user sheet, does the style apply correctly?

If so that is probably a font selection bug (the font selection depends on the language) rather than a selector matching bug.

Comment 3

[Ciprian Dorin Craciun]

Yes, putting color: green in the userContent.css does correctly apply in both cases. (I.e. with lang="" and without.)

---

However strangely, if I configure in <html lang="ro> or any valid language code like ro-US the font configured in userContent.css correctly applies. But if I configure anything that is not a valid lang value, like say zz, or even empty, it doesn't apply the font anymore.

Moreover in the case of invalid language it appears to apply the default font configured in about:preferences at Other Writing Systems.

---

I would expect that userContent.css to apply to all pages regardless of any language configuration, except if the user explicitly takes that into account via html:root[lang="zz"].

Comment 4

[Jonathan Kew [:jfkthame]]

Does this still occur with current a Firefox Nightly version? (See https://www.mozilla.org/en-US/firefox/all/#product-desktop-nightly for downloads.) There have been some changes related to language-code processing recently, and I think this may have been fixed there.

Comment 5

[Ciprian Dorin Craciun]

First of all, I'll provide my test-case:

• the contents of test.html:

<html lang="">
<head><style>html:root { background : yellow; }</style></head>
<body>hello! 1234567890</body>
<html>

• the contents of userContent.css:

html:root {
    font-family: "Fira Mono";
    font-size: 48pt;
    color: red;
    background: green;
}

* {
    background: blue;
}

• I also need to configure toolkit.legacyUserProfileCustomizations.stylesheets = true (and restart the browser);

---

My findings:

• on Firefox 73.0 it seems to work as expected; (although from what I can gather this is the same version I did the initial test with; granted this test was done on a fresh profile, meanwhile my initial test was with my "regular" profile;)
• on Firefox Nightly 75.0a1 (2020-03-08) (64-bit), it also seems to work as expected; (also fresh profile;)

---

However I also found another interesting problem related to the rules in my userContent.css: they appear to "leak" also into some of the browser's widgets; for example my * { background: blue; } rule has that effect also on the buttons in the URL bar, tab bar, etc. (Both for 73.0 and nightly.)

Comment 6

[Jonathan Kew [:jfkthame]]

Moving this to the Layout module, as font selection belongs there more than in Graphics; however, I think it may have been resolved already by recent fixes in the i18n Locale service.

(In reply to Ciprian Dorin Craciun from comment #5)

However I also found another interesting problem related to the rules in my userContent.css: they appear to "leak" also into some of the browser's widgets; for example my * { background: blue; } rule has that effect also on the buttons in the URL bar, tab bar, etc. (Both for 73.0 and nightly.)

That sounds like a separate issue; my understanding is that userContent.css shouldn't be able to affect these browser UI elements in any way. Could you please file a new bug about it? Thank you.

Comment 7

[Jonathan Kew [:jfkthame]]

That sounds like a separate issue; my understanding is that userContent.css shouldn't be able to affect these browser UI elements in any way. Could you please file a new bug about it? Thank you.

Never mind, actually: I went ahead and filed bug 1620953 for this.