[CSS] prefers-color-scheme reflects the color-scheme on the embedding element

[hamishwillee]

Acceptance Criteria

• The listed features are documented sufficiently on MDN
• BCD is updated
• Interactive example and data repos are updated if appropriate
• The content has been reviewed as needed

For folks helping with Firefox related documentation

• Set bugs to dev-doc-complete
• Add entry to Firefox release notes if feature is enabled in release
  or
• Add entry to Firefox experimental features page if feature is not yet enabled in release

Features to document

Update prefers-color-scheme CSS media query doc to note that:

prefers-color-scheme reflects the color-scheme on the embedding element in the embedding document, to the extent acceptable from security standpoint (pending security review).
This affects SVG and iframes - both same and cross-origin.

This should include an example like the one at the top of w3c/csswg-drafts#7213 (comment) -

Related Gecko bugs

https://bugzilla.mozilla.org/show_bug.cgi?id=1779457

Other

What does this all mean?

• [css-mediaqueries] Should prefers-color-scheme in SVG images be context-dependent? w3c/csswg-drafts#7213 - initial CSSWG discussion- description gives example
• [css-mediaqueries] Should prefers-color-scheme in iframes be context-dependent? w3c/csswg-drafts#7493 - follow up to confirm also applies to cross-origin iframes.
• https://bugzilla.mozilla.org/show_bug.cgi?id=1764354#c20 - discussion with Moz engineer.

IN summary, previously prefers-color-scheme reflected the user choice of light/dark mode based on the device or OS theme setting. It was possible to have a case where the OS and firefox would have a different mode, and you could get prefers-color-scheme matching the OS rather than browser - so the incorrect media would be displayed.

The change is that prefers-color-scheme in SVG files and iframes will now respect the the color-scheme of the embedder.

Links / tasks

• mdn/content: 19449 prefers color scheme #20886
• relnote: 19449 relnote for prefers-color-scheme media queries #20888
• BCD: docs(CSS): add compat info on color-scheme for embedded elements browser-compat-data#17846

[hamishwillee]

@Rumyra @dipikabh This was one of the draft items in the project to investigate. I have done the initial investigation. It doesn't happen until FF105 so parking for now. I can take it, or someone else with more CSS skill at that point.

[Rumyra]

Great - thank you so much @hamishwillee !

[bsmth]

@hamishwillee just a heads-up, I'm looking into this one now 🔬

---

notes:
Here are some nice tests demonstrating this: https://phabricator.services.mozilla.com/D151751#change-KuxjvTSyzOBB