1703451 - Color scheme simulation does not impact external svg img with prefers-color-scheme media query

Status: NEW

(DevTools :: Inspector, defect, P2)

Description

[Nicolas Chevobbe [:nchevobbe]]

Steps to reproduce

1. Make sure your OS appearance is set to "light"
2. Navigate to https://devtools-color-simulation-external-svg.glitch.me/
3. Open the inspector
4. Turn on dark color scheme simulation

Expected results

The background turns darkblue, and the image inside it turns red

Actual results

The background turns darkblue, but the the image stays white.
Note that switch the OS appearance does turn the image red.

---

The image is embedded via an <img> tag that point to an svg file looking like:

<svg
  width="41"
  height="32"
  viewBox="0 0 41 32"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <style>
    svg {
      background: white;
    }

    @media (prefers-color-scheme: dark) {
      svg {
        background: red;
      }
    }
  </style>
</svg>

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Emilio, any idea what's happening here?

Comment 2

[Emilio Cobos Álvarez [:emilio]]

This is expected (and I suspect pretty hard/hacky to fix).

The image cache doesn't key on e.g. color-scheme, so if you embed the image from two pages, one simulating color scheme and one not doing so, which one is right?

Comment 3

[Cam]

Doe that imply Firefox rasterizes then caches the svg? Because it's the same file in both cases, so the cache should be fine if it stays as a vector format, and since svgs can be resized, i can't imagine they're rasterized in the cache.

Comment 4

[Emilio Cobos Álvarez [:emilio]]

Well, not quite. We reuse the same svg document. Depending on state from the embedder document is not super-easy (it's possibly doable and I guess moz-context-properties sorta does that though...)

Comment 5

[Julian Descottes [:jdescottes]]

We tested on Safari and Chrome, they have the same issue with their DevTools.