[mediaqueries-5] SVG images referenced by img elements do not respect prefers-color-scheme in forced-colors mode
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- PR merge metrics
- PR metrics pending
Description
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
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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with Media Queries Level 5 §11.5 and the linked used color scheme definition. Compare the forced-colors behavior described there with the embedded SVG example using an img element. Done means the specification clearly requires the SVG's prefers-color-scheme value to correspond to the embedding node's used color scheme in forced-colors mode.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html
- Domain
- documentation
- Issue type
- Documentation
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100