Resolve <system-color> and <deprecated-color> with the element color scheme

w3c/csswg-drafts#13857 updated the algorithm to determine the color scheme that
must be used to resolve <system-color> and <deprecated-color>.

Besides, the implementation used the cascading value instead of the specified
value of "color-scheme", and was not really making an effort to show that the
user preferred and UA supported color schemes must be defined somehow in jsdom
by its user and resolved somehow in this library.

Similarly, the color scheme of embedded elements must consider the color scheme
of the embedding element, which is specified as being received by the embedding
document. So this part is also the responsibility of jsdom, since access to
".frameElement" may be disallowed by the cross-origin policy (which does not
seem to be implemented in jsdom though).

Author: cdoublev

lib/resolve.js

@@ -655,52 +655,125 @@ function getSpecifiedValue(property, element, declared = getDeclaredValues(prope
 
 // Resolving the computed and used value
 
+/**
+ * @param {string[]} UASupport
+ * @param {object[]|null} support
+ * @param {string|null} preference
+ * @returns {*[]}
+ * @see {@link https://drafts.csswg.org/css-color-adjust-1/#determine-the-used-color-scheme}
+ */
+function getUsedColorScheme(UASupport, support = null, preference = null) {
+
+    // Assert: the first UA supported color scheme is its default color scheme
+
+    if (!support?.some(scheme => UASupport.includes(scheme[0].value))) {
+        return [UASupport[0], true]
+    }
+
+    const [schemes, only] = support
+
+    if (!preference) {
+        return [schemes[0].value]
+    }
+
+    preference = preference.split('overriding-')
+    let overriding
+    if (preference.length === 2) {
+        overriding = true
+        preference = preference[1]
+    } else {
+        overriding = false
+        preference = preference[0]
+    }
+
+    if (schemes.some(scheme => scheme.value === preference)) {
+        return [preference]
+    }
+    if (!isOmitted(only)) {
+        return [schemes[0].value]
+    }
+    if (overriding) {
+        return [preference]
+    }
+    return [schemes[0].value]
+}
+
 /**
  * @param {Element} element
- * @returns {object|object[][]|undefined}
+ * @returns {string|null}
+ */
+function getEmbbedingElementColorScheme(element) {
+    return null
+}
+
+/**
+ * @param {Element} element
+ * @returns {object[]|null}
+ * @see {@link https://drafts.csswg.org/css-color-adjust-1/#pages-supported-color-scheme}
  * @see {@link https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme}
  */
-function getPageSupportedColorSchemes(element) {
-    const { ownerDocument } = element
-    if (!ownerDocument) {
-        return
-    }
+function getPageSupportedColorSchemes({ ownerDocument }) {
     const selector = parseGrammar('meta[name=color-scheme][content]', '<selector-list>')
     const definition = properties['color-scheme'].value
     for (const meta of matchTreesAgainstSelectors([ownerDocument], selector)) {
         const colorScheme = parseGrammar(meta.getAttribute('content'), definition)
-        if (!isFailure(colorScheme)) {
-            return colorScheme
+        if (isFailure(colorScheme)) {
+            continue
+        }
+        if (colorScheme.value === 'normal') {
+            return null
         }
+        return colorScheme
     }
+    if (ownerDocument.defaultView.frameElement) {
+        return getEmbbedingElementColorScheme(element)
+    }
+    return null
+}
+
+/**
+ * @param {Element} element
+ * @returns {string|null}
+ * @see {@link https://drafts.csswg.org/css-color-adjust-1/#preferred-color-scheme}
+ */
+function getUserPreferredColorScheme(element) {
+    return null
+}
+
+/**
+ * @param {Element} element
+ * @returns {string[]}
+ */
+function getUASupportedColorScheme(element) {
+    return ['light', 'dark']
 }
 
 /**
  * @param {Element} element
- * @returns {string|undefined}
- * @see {@link https://drafts.csswg.org/css-color-adjust-1/#propdef-color-scheme}
+ * @returns {*[]}
+ * @see {@link https://drafts.csswg.org/css-color-adjust-1/#page-color-scheme}
  */
-function getElementSupportedColorSchemes(element) {
-    return getCascadedValue('color-scheme', element)?.value
+function getPageColorScheme(element) {
+    return getUsedColorScheme(
+        getUASupportedColorScheme(element),
+        getPageSupportedColorSchemes(element),
+        getUserPreferredColorScheme(element))
 }
 
 /**
  * @param {Element} element
  * @returns {string}
- * @see {@link https://drafts.csswg.org/css-color-adjust-1/#determine-the-used-color-scheme}
+ * @see {@link https://drafts.csswg.org/css-color-adjust-1/#element-color-scheme}
  */
-function getUsedColorScheme(element) {
-    const supported = getElementSupportedColorSchemes(element) || getPageSupportedColorSchemes(element)
-    if (supported) {
-        if (supported.value === 'normal') {
-            return 'light'
-        }
-        const preferred = supported[0].find(({ value }) => value === 'dark' || value === 'light')
-        if (preferred) {
-            return preferred.value
-        }
+function getElementColorScheme(element) {
+    const support = getSpecifiedValue('color-scheme', element)
+    if (support.value === 'normal') {
+        return getPageColorScheme(element)[0]
     }
-    return 'light'
+    return getUsedColorScheme(
+        getUASupportedColorScheme(element),
+        support,
+        getUserPreferredColorScheme(element))[0]
 }
 
 /**
@@ -714,13 +787,13 @@ function getComputedColor(value, element) {
         return parseGrammar('rgb(0, 0, 0, 0)', '<color>')
     }
     if (value.types.includes('<deprecated-color>')) {
-        return parseGrammar(colors.system[colors.deprecated[value.value]][getUsedColorScheme(element)], '<color>')
+        return parseGrammar(colors.system[colors.deprecated[value.value]][getElementColorScheme(element)], '<color>')
     }
     if (value.types.includes('<named-color>')) {
         return parseGrammar(colors.named[value.value], '<color>')
     }
     if (value.types.includes('<system-color>')) {
-        return parseGrammar(colors.system[value.value][getUsedColorScheme(element)], '<color>')
+        return parseGrammar(colors.system[value.value][getElementColorScheme(element)], '<color>')
     }
     return value
 }