[csswg-drafts] [mediaqueries-5] SVG images referenced by img elements do not respect prefers-color-scheme in forced-colors mode (#10331)

tsmd has just created a new issue for https://github.com/w3c/csswg-drafts:

== [mediaqueries-5] SVG images referenced by img elements do not respect prefers-color-scheme in forced-colors mode ==
## Problem Summary

SVG images referenced by `img` elements in "Secure Animated" mode are expected to inherit the `prefers-color-scheme` media query context from their embedding document, but in Windows High Contrast mode, they always respond to `prefers-color-scheme: light`.

## Details

According to the Media Queries Level 5 specification, when evaluated in an embedded SVG document using the "Secure Animated" embedding mode, the preferred color scheme must reflect the value of the [used color scheme](https://drafts.csswg.org/css-color-adjust-1/#used-color-scheme) on the embedding node in the embedding document.

However, when Windows High Contrast mode is enabled, SVG images referenced by `img` elements always respond to `prefers-color-scheme: light`. The `prefers-color-scheme` should match the corresponding value when the `forced-colors` media query is matched.

## Relevant Spec Section

[Media Queries Level 5 ยง 11.5](https://drafts.csswg.org/mediaqueries-5/#forced-colors:~:text=If%20evaluated%20in,Issue%207213.):

## Code Example

The following example shows that even when Windows High Contrast mode is enabled, the SVG responds only to `prefers-color-scheme: light`.

```html
<!doctype html>
<title>SVG in img element</title>
<img>
<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="http://www.w3.org/2000/svg">
        <style>
          :root { color: red }
          @media (prefers-color-scheme: light) {
            :root { color: blue }
          }
          @media (prefers-color-scheme: dark) {
            :root { color: purple }
          }
        </style>
        <rect fill="currentcolor" width="32" height="32"/>
      </svg>
    `);
  }
</script>
```

#### Proposal

Clarify the specification to ensure that `prefers-color-scheme` matches the corresponding value when the `forced-colors` media query is matched.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10331 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 14 May 2024 16:33:41 UTC