Closed
Description
Consider this test-case:
<!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="http://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.