css.at-rules.media.prefers-color-scheme - Chrome and Edge now "Respects color-scheme inherited from parent"

[axel-havukangas-tt]

What type of issue is this?

Incorrect support data (example: BrowserX says "86" but support was added in "40")

What information was incorrect, unhelpful, or incomplete?

The "Respects color-scheme inherited from parent" line states no support in Chrome and Edge, but at least version 130 of the browser seems to support the feature.

What browsers does this problem apply to, if applicable?

Chromium (Chrome, Edge 79+, Opera, Samsung Internet)

What did you expect to see?

I would assume that at least version 130 of chrome and edge would be marked as supporting the feature.

Did you test this? If so, how?

Using the example in https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme#inherited_color_scheme_in_embedded_elements I verified that the last circle is filled with purple on the latest versions of chrome and edge. Safari still renders it as blue.

Can you link to any release notes, bugs, pull requests, or MDN pages related to this?

Strangely there doesn't seem to be any mentions about this in recent chrome releases.

Do you have anything more you want to share?

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

MDN metadata

MDN page report details

• Query: css.at-rules.media.prefers-color-scheme
• Report started: 2024-10-23T12:28:50.413Z

[axel-havukangas-tt]

Found a mention of this feature in chromium commit at chromium/chromium@e91a388. Seems to have been included already in version 129

[caugner]

@axel-havukangas-tt Could you share the Playground (click on "Share"), or the test code you used?

[axel-havukangas-tt]

Sure, it is the listed in https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme#inherited_color_scheme_in_embedded_elements. So

<div>
  <img />
</div>

<div style="color-scheme: light">
  <img />
</div>
<div style="color-scheme: dark">
  <img />
</div>

<!-- Embed an SVG for all <img> elements -->
<script>
  for (let img of document.querySelectorAll("img")) {
    img.alt = "circle";
    img.src =
      "data:image/svg+xml;base64," +
      window.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>
        <circle fill="currentColor" cx="16" cy="16" r="16"/>
      </svg>
    `);
  }
</script>

(Sorry for double comment. The first, now deleted, comment what with wrong GitHub account)