[css-mediaqueries] Should prefers-color-scheme in SVG images be context-dependent?

Consider this test-case:

```html
<!doctype html>
<div style="color-scheme: light">
  <img>
</div>
<div style="color-scheme: dark">
  <img>
</div>
<script>
  for (let img of document.querySelectorAll("img")) {
    img.src = "data:image/svg+xml;base64," + btoa(`
      <svg width="32" height="32" viewBox="0 0 32 32" xmlns="https://www.w3.org/2000/svg">
        <style>
          :root { color: blue }
          @media (prefers-color-scheme: dark) {
            :root { color: purple }
          }
        </style>
        <rect fill="currentColor" width="32" height="32"/>
      </svg>
    `);
  }
</script>
```

Right now the rendering of those images match in all browsers, but one could argue that perhaps they should render differently (top blue, bottom purple)?

See also https://bugzilla.mozilla.org/show_bug.cgi?id=1764354, which is what prompted this discussion.

cc @lilles @smfr

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[css-mediaqueries] Should prefers-color-scheme in SVG images be context-dependent? #7213

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[css-mediaqueries] Should prefers-color-scheme in SVG images be context-dependent? #7213

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions