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.