[css-mediaqueries] Edge cases of prefers-color-scheme and iframe color-scheme #13796

#7213 resolved that prefers-color-scheme reflects color-scheme of the embedding element (for SVG only)

RESOLVED: Have prefered-color-scheme reflect 'color-scheme' on the embedding element in the embedding document, to the extent acceptable from security standpoint (pending security review)

This was edited into the spec as:

If 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.

#7493 additionally extended this behavior to iframes:

RESOLVED: Context-dependent color scheme propagation works for iframes (including cross-origin) unless specifically restricted

While implementing this behavior for WebKit, I found two edge cases not mentioned in the spec.

When color-scheme is not specified

From my reading of the spec, the embedded document's prefers-color-scheme should only look at the embedding element's color-scheme. What if the embedding element doesn't specify color-scheme at all?

The spec doesn't mention this, but from my testing, Chrome and Firefox defaults to the system's appearance (i.e if the system is dark, then prefers-color-scheme is dark.) Personally, I prefer this behavior and would like this to be added to the spec.

Nested iframes and color-scheme propagation

Consider a document of nested iframes and some of them have color-scheme specified:

<iframe style=color-scheme:dark srcdoc="
  <iframe style=color-scheme:light srcdoc=&quot;
    <iframe srcdoc='
      <style>
        div { width: 100px; height: 100px; }

        @media (prefers-color-scheme: dark) {
          div { background-color: darkblue; }
        }

        @media (prefers-color-scheme: light) {
          div { background-color: lightblue; }
        }
      </style>
      <div></div>
    '></iframe>
  &quot;></iframe>
"></iframe>

My understanding is that prefers-color-scheme only looks at the color-scheme of the <iframe> containing it, and not its ancestor <iframe>s. However, Chroma and Firefox considers the middle iframe's color-scheme and resolves prefers-color-scheme to light. So effectively, they go up the <iframe> chain and stops at the first <iframe> that explicitly defines a color-scheme I also think this behavior is reasonable and should be added to the spec.