1682159 - Wrong print style because :defined doesn't apply to the static clone.

Status: RESOLVED FIXED

(Core :: Printing: Output, defect)

Description

[709922234]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:85.0) Gecko/20100101 Firefox/85.0

Steps to reproduce:

1. visit https://gem-book.js.org/en/guide/cli
2. open Devtools > Inspector, enable "print media simulation"
3. click menu File > Print

Actual results:

see screenshot

Expected results:

see screenshot

Comment 1

[709922234]

Attachment: print simulation

Comment 2

[709922234]

Attachment: Actual effect of printing

In particular, I don’t know why the background and text colors of the code block have changed, and the custom elements display undefined styles.

Comment 3

[709922234]

Attachment: chrome print effect

Chrome's printing effect is the same as I expected

Comment 4

[709922234]

https://developer.mozilla.org/en-US/docs/Web/CSS/color-adjust

The background color is for this reason. I can set color-adjust: exact; to solve.

But the printing style of custom elements I think is problematic

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Fun:

        :not(:defined)::before {
          display: block;
          content: 'The element is not defined';
          padding: 1em;
          border-radius: 4px;
          text-align: center;
          background: var(--border-color-sbqar);
        }

Comment 6

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1682159 - Copy defined state to static clones. r=smaug,edgar

Comment 7

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1682159 - Do a minor cleanup of the Element clone code. r=edgar

Depends on D99632

Comment 8

[Emilio Cobos Álvarez (:emilio)]

With that, the print output is as expected. But note that that page still hits the slicing fallback because it seems <gem-book> is a grid, and fragmenting a single column grid is borked (see bug 1417615).

You'd get even better print rendering with @media print { :host { display: block } } in the <gem-book> element.

Comment 9

[709922234]

Unbelievable, there are fixes so soon.

I have been using Firefox Nightly and I have not found a problem with the grid. Thank you for your suggestion.

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b90e93c4aa5c
Copy defined state to static clones. r=edgar
https://hg.mozilla.org/integration/autoland/rev/bee3e0399e0d
Do a minor cleanup of the Element clone code. r=edgar

Comment 11

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/26887 for changes under testing/web-platform/tests

Comment 12

[Sandor Molnar[:smolnar]]

Backed out for failing print reftest animations-print.html

Backout link: https://hg.mozilla.org/integration/autoland/rev/72ddac4860373e30a1815bf645a8782dfaf511d7

Comment 13

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 14

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/e72dab7cb89d
Do a minor cleanup of the Element clone code. r=edgar

Comment 15

[Cristina Coroiu [:ccoroiu]]

https://hg.mozilla.org/mozilla-central/rev/e72dab7cb89d

Comment 16

[709922234]

When printing the page as a .pdf, the link cannot be clicked.
Does this need to be fixed?

Comment 17

[Emilio Cobos Álvarez (:emilio)]

That's bug 454059.