Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
tsmd opened this issue May 14, 2024 · 0 comments
Open

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

tsmd opened this issue May 14, 2024 · 0 comments

Comments

@tsmd
Copy link

tsmd commented May 14, 2024 •
edited
Loading

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 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:

Code Example

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

<!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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@tsmd