1665837 - Button-text on network error pages is hard to read (dark-on-dark) when printed

Status: NEW

(Core :: Printing: Output, defect, P3)

Description

[Daniel Holbert [:dholbert]]

Attachment: about:neterror printed to PDF (note the unreadable button text)

STR:

1. Visit about:neterror (or any network error page with a button)
2. Print or print-preview the page.
3. Look at the button, in the printed/print-previewed output.

ACTUAL RESULTS:
The button has black text on a dark-blue background, which makes it pretty unreadable.

EXPECTED RESULTS:
Sufficient contrast to read the text. The button should either have white text (as it has on-screen), or it should have a lighter background when printed.

(Note: This is really probably a bug in our theme code or somewhere in our design of these error pages; but I'm starting it out in Toolkit|Printing since that's the use case & since that may get it a bit more visibility as part of the printing project.)

Comment 1

[Daniel Holbert [:dholbert]]

This button's coloring comes from this rule in common.css:

html|button[autofocus], html|button[type="submit"], button.primary {
    background-color: var(--in-content-primary-button-background);
    color: var(--in-content-selected-text) !important;
}

The problem here is that var(--in-content-selected-text) isn't working in the printed document. I'm not sure why. I get the same results (black-text-when-printing) if I use this variable as the color for other elements in the page, too.

If I use devtools to manually set the variable (e.g. on the body element) to a color of my choosing, e.g. --in-content-selected-text: red;, and then I print, then the button text does end up red, as you would expect. It's only the default setup that's broken.

Comment 2

[Daniel Holbert [:dholbert]]

(also: strangely, I can't reproduce this bug in my normal browsing profile. I'm only seeing it in a fresh profile. So there might be some pref/setting that works around it that I've got flipped in my normal browsing profile.)

In all cases that I've tested here, I've been using latest Nightly 82.0a1 (2020-09-17) (64-bit).

Comment 3

[:Gijs (he/him)]

(In reply to Daniel Holbert [:dholbert] from comment #1)

The problem here is that var(--in-content-selected-text) isn't working in the printed document. I'm not sure why. I get the same results (black-text-when-printing) if I use this variable as the color for other elements in the page, too.

This sounds bad, and like it could also affect other pages? If this is restricted to error pages I'm not so worried about the severity, but if we're breaking CSS variables when pringing that seems worse...