Add initial support for computed/used/resolved property values

This commit adds a first pass of the implementation of the processings to get a
resolved value from a CSSStyleDeclaration returned by getComputedStyle():

  - collect and filter values declared for the property and element
  - sort declared values to output a cascaded value
  - default the cascaded value to output a specified value
  - resolve the specified value into a computed value by absolutizing component
    values when there is enough data, following the requirements of the
    "computed value" line in the property definition table
  - resolve the computed value into a used value for some properties

It lacks support for several features:

  - collecting transition and animation declarations
  - collecting declarations from a higher (encapsulation/tree) context
  - sort declarations based on their context (and importance)
  - calculate the specificity of pseudos defined with an evaluation context
  - resolve the computed value of an arbitrary substitution containing value
  - resolve the computed value of a <whole-value>
  - resolve the computed/used value of other relative value types than <color>
  - resolve the computed/used value of other properties than color-like ones,
    whose "computed value" line is not "as specified"
  - resolve the computed/used value of a shorthand

Less importantly, <system-color> and <deprecated-color> are resolved without
considering the user preferred color scheme, its overriding preference, or the
UA default color scheme.

Several problems also need to be fixed:

  - at least one selector of the style rule must match the element in order to
    collect a declaration for the property, while calculating the specificity
    requires matching all selectors: a caching system would avoid matching the
    same selector against the same element (and context) multiple times
  - selector matching algorithms must not enter in a shadow tree unless it is
    explicitly specified for a selector, which should be defined in the specs
    but is not
  - top-level shadow tree elements must inherit values from the shadow host
  - "text-decoration-line" and "page" inheritance rules must be considered
  - evaluating @container's condition only considers <container-name>
  - component values are not resolved when nested in a function or simple block

Most of these features and problems require a more in-depth reflection on the
model, more particularly on:

  - how to collect and sort declared values
  - how to represent the context, associate it to a declaration, and pass it to
    the selector matching algorithms
  - how to resolve a computed and used value

Adding more tests will help to identify all requirements.

Author: cdoublev

lib/cssom/CSSStyleDeclaration-impl.js

@@ -5,6 +5,7 @@ import { getDeclarationName, parseDeclarations, parseDestructuredDeclaration } f
 import { isFailure, isOmitted } from '../utils/value.js'
 import { serializeDeclarationBlock, serializeValue } from '../serialize.js'
 import expandShorthandDeclaration from '../parse/shorthand.js'
+import { getResolvedValue } from '../resolve.js'
 import logical from '../properties/logical.js'
 import properties from '../properties/definitions.js'
 import shorthands from '../properties/shorthands.js'
@@ -168,6 +169,9 @@ export default class CSSStyleDeclarationImpl {
      */
     getPropertyValue(name) {
         name = getDeclarationName(this.parentRule ?? this._ownerNode, name)
+        if (this._computed) {
+            return serializeValue({ name, value: getResolvedValue(name, this._ownerNode) })
+        }
         if (shorthands.has(name)) {
             const value = []
             let important = null

lib/cssom/CSSStyleRule-impl.js

@@ -1,17 +1,17 @@
 
-import { delimiter, list, omitted } from '../values/value.js'
 import { isFailure, isOmitted } from '../utils/value.js'
+import { list, omitted } from '../values/value.js'
 import CSSGroupingRuleImpl from './CSSGroupingRule-impl.js'
 import CSSNestedDeclarations from './CSSNestedDeclarations.js'
 import CSSRuleList from './CSSRuleList.js'
 import CSSScopeRule from './CSSScopeRule.js'
 import CSSStyleProperties from './CSSStyleProperties.js'
 import CSSStyleRule from './CSSStyleRule.js'
+import { ampersand } from '../values/defaults.js'
 import { parseGrammar } from '../parse/parser.js'
 import { serializeComponentValues } from '../serialize.js'
 
-const nestingSelector = delimiter('&')
-const compound = list([nestingSelector, list([], '')], '', ['<compound-selector>'])
+const compound = list([ampersand, list([], '')], '', ['<compound-selector>'])
 const complexUnit = list([compound, list([], '')], '', ['<complex-selector-unit>'])
 const complexSelector = list([complexUnit, list()], ' ', ['<complex-selector>'])
 const relativeSelector = list([omitted, complexSelector], ' ', ['<relative-selector>'])

lib/match/container.js

@@ -0,0 +1,33 @@
+
+import { getComputedValue } from '../resolve.js'
+import { isOmitted } from '../utils/value.js'
+import { serializeComponentValue } from '../serialize.js'
+
+/**
+ * @param {*} query
+ * @param {Element} element
+ * @returns {boolean}
+ */
+function matchQuery(query, element) {
+    return isOmitted(query)
+}
+
+/**
+ * @param {object} name
+ * @param {Element} element
+ * @returns {boolean}
+ * @see {@link https://drafts.csswg.org/css-conditional-5/#typedef-container-name}
+ */
+function matchName(name, element) {
+    return isOmitted(name) || name.value === serializeComponentValue(getComputedValue('container-name', element))
+}
+
+/**
+ * @param {*[]} conditions
+ * @param {Element} element
+ * @returns {boolean}
+ * @see {@link https://drafts.csswg.org/css-conditional-5/#typedef-container-condition}
+ */
+export default function match(conditions, element) {
+    return conditions.some(([name, query]) => matchName(name, element) && matchQuery(query, element))
+}

lib/match/selector.js

@@ -1,4 +1,5 @@
 
+import { findAncestor, getParent } from '../utils/dom.js'
 import { isDelimiter, isOmitted } from '../utils/value.js'
 import { serializeComponentValue, serializeIdentifier } from '../serialize.js'
 import { toLowerCase } from '../utils/string.js'
@@ -985,14 +986,6 @@ function getNextSiblings({ nextElementSibling }) {
     return elements
 }
 
-/**
- * @param {Element} element
- * @returns {Element|undefined}
- */
-function getParent({ parentElement, parentNode }) {
-    return parentElement ?? parentNode?.host
-}
-
 /**
  * @param {Element} element
  * @returns {Element[]}
@@ -1026,24 +1019,6 @@ function getRightCombinedElements(element, combinator) {
     }
 }
 
-/**
- * @param {Element} element
- * @param {function} accept
- * @param {function} [reject]
- * @returns {Element|undefined}
- */
-function findAncestor({ parentElement }, accept, reject) {
-    while (parentElement) {
-        if (accept(parentElement)) {
-            return parentElement
-        }
-        if (reject?.(parentElement)) {
-            return
-        }
-        parentElement = getParent(parentElement)
-    }
-}
-
 /**
  * @param {Element} element
  * @param {function} predicate
@@ -1478,6 +1453,9 @@ function matchComplexSelector(element, selector, options) {
  * @see {@link https://drafts.csswg.org/selectors-4/#match-a-selector-against-an-element}
  */
 function matchElementAgainstSelectors(element, selector, options) {
+    if (options.all) {
+        return selector.filter(selector => matchComplexSelector(element, selector, options))
+    }
     return selector.some(selector => matchComplexSelector(element, selector, options))
 }
 

lib/parse/shorthand.js

@@ -23,6 +23,7 @@ import {
 import { isFunction, isList, isOmitted } from '../utils/value.js'
 import { keyword, list, omitted } from '../values/value.js'
 import { keywords as cssWideKeywords } from '../values/substitutions.js'
+import { getInitialValue } from '../resolve.js'
 import properties from '../properties/definitions.js'
 import shorthands from '../properties/shorthands.js'
 
@@ -33,7 +34,7 @@ const borderTypes = ['<line-width>', '<line-style>', '<color>']
  * @returns {Map}
  */
 function getInitialLonghandDeclarations(longhands) {
-    return new Map(longhands.map(longhand => [longhand, properties[longhand].initial.parsed]))
+    return new Map(longhands.map(longhand => [longhand, getInitialValue(longhand)]))
 }
 
 /**
@@ -57,7 +58,7 @@ function parseLonghandsByIndex(values, longhands) {
     return new Map(longhands.map((longhand, index) => {
         let value = values[index]
         if (!value || isOmitted(value)) {
-            value = properties[longhand].initial.parsed
+            value = getInitialValue(longhand)
         }
         return [longhand, value]
     }))
@@ -75,7 +76,7 @@ function parseCoordinatedValues(lists, longhands) {
             const value = list[index]
             declarations
                 .get(longhand)
-                .push(isOmitted(value) ? properties[longhand].initial.parsed[0] : value)
+                .push(isOmitted(value) ? getInitialValue(longhand)[0] : value)
         }))
     return declarations
 }
@@ -89,7 +90,7 @@ function parseCoordinatedValues(lists, longhands) {
  */
 function parseAnimation(animations, longhands, resetOnly) {
     const declarations = parseCoordinatedValues(animations, longhands)
-    resetOnly.forEach(longhand => declarations.set(longhand, properties[longhand].initial.parsed))
+    resetOnly.forEach(longhand => declarations.set(longhand, getInitialValue(longhand)))
     return declarations
 }
 
@@ -135,9 +136,9 @@ function parseBackground(backgrounds, longhands, resetOnly) {
     const color = final.pop()
     const declarations = new Map(longhands.map(longhand =>
         longhand === 'background-color'
-            ? [longhand, isOmitted(color) ? properties[longhand].initial.parsed : color]
+            ? [longhand, isOmitted(color) ? getInitialValue(longhand) : color]
             : [longhand, list([], ',')]))
-    resetOnly.forEach(longhand => declarations.set(longhand, properties[longhand].initial.parsed))
+    resetOnly.forEach(longhand => declarations.set(longhand, getInitialValue(longhand)))
     layers = isOmitted(layers) ? [final] : [...layers, final]
     layers.forEach(([image, positionSize, repeat, attachment, origin, clip]) => {
         let position
@@ -190,7 +191,7 @@ function parseBackground(backgrounds, longhands, resetOnly) {
                     value = isOmitted(clip) ? origin : clip
                     break
             }
-            declarations.get(longhand).push(isOmitted(value) ? properties[longhand].initial.parsed[0] : value)
+            declarations.get(longhand).push(isOmitted(value) ? getInitialValue(longhand)[0] : value)
         })
     })
     return declarations
@@ -235,9 +236,9 @@ function parseBorder(values, longhands, sides) {
             const typeIndex = Math.floor((index / sides) % 3)
             const type = borderTypes.at(typeIndex)
             const value = values.find(value => value.types.includes(type))
-            return [longhand, value ?? properties[longhand].initial.parsed]
+            return [longhand, value ?? getInitialValue(longhand)]
         }
-        return [longhand, properties[longhand].initial.parsed]
+        return [longhand, getInitialValue(longhand)]
     }))
 }
 
@@ -681,7 +682,7 @@ function parseMask(masks, longhands, resetOnly) {
     const positionIndex = longhands.indexOf('mask-position')
     const declarations = new Map
     longhands.forEach(longhand => declarations.set(longhand, list([], ',')))
-    resetOnly.forEach(longhand => declarations.set(longhand, properties[longhand].initial.parsed))
+    resetOnly.forEach(longhand => declarations.set(longhand, getInitialValue(longhand)))
     masks.forEach(layer => {
         const [, positionSize,, origin, clip] = layer
         if (isOmitted(positionSize)) {
@@ -698,7 +699,7 @@ function parseMask(masks, longhands, resetOnly) {
                 } else if (longhand === 'mask-clip' && !isOmitted(origin)) {
                     value = origin
                 } else {
-                    value = properties[longhand].initial.parsed[0]
+                    value = getInitialValue(longhand)[0]
                 }
             }
             declarations.get(longhand).push(value)