CSS Typed OM Level 1

1. Introduction

CSS stylesheets are parsed into abstract UA-internal data structures, the internal representations of CSS, which various specification algorithms manipulate.

Internal representations can’t be directly manipulated, as they are implementation-dependent; UAs have to agree on how to interpret the internal representations, but the representations themselves are purposely left undefined so that UAs can store and manipulate CSS in whatever way is most efficient for them.

Previously, the only way to read or write to the internal representations was via strings—stylesheets or the CSSOM allowed authors to send strings to the UA, which were parsed into internal representations, and the CSSOM allowed authors to request that the UA serialize their internal representations back into strings.

This specification introduces a new way to interact with internal representations, by representing them with specialized JS objects that can be manipulated and understood more easily and more reliably than string parsing/concatenation. This new approach is both easier for authors (for example, numeric values are reflected with actual JS numbers, and have unit-aware mathematical operations defined for them) and in many cases are more performant, as values can be directly manipulated and then cheaply translated back into internal representations without having to build and then parse strings of CSS.

2. CSSStyleValue objects

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSStyleValue {
    stringifier;
    [Exposed=Window] static CSSStyleValue parse(USVString property, USVString cssText);
    [Exposed=Window] static sequence<CSSStyleValue> parseAll(USVString property, USVString cssText);
};

CSSStyleValue objects are the base class of all CSS values accessible via the Typed OM API.

The stringification behavior of CSSStyleValue objects is defined in § 6 CSSStyleValue Serialization.

The parse(property, cssText) method, when invoked, must parse a CSSStyleValue with property property, cssText cssText, and parseMultiple set to false, and return the result.

The parseAll(property, cssText) method, when invoked, must parse a CSSStyleValue with property property, cssText cssText, and parseMultiple set to true, and return the result.

2.1. Direct CSSStyleValue Objects

Values that can’t yet be directly supported by a more specialized CSSStyleValue subclass are instead represented as CSSStyleValue objects.

Each CSSStyleValue object is associated with a particular CSS property, via its [[associatedProperty]] internal slot, and a particular, immutable, internal representation. These objects are said to "represent" the particular internal representation they were reified from, such that if they are set back into a stylesheet for the same property, they reproduce an equivalent internal representation.

These CSSStyleValue objects are only considered valid for the property that they were parsed for. This is enforced by CSSStyleValue objects having a [[associatedProperty]] internal slot, which is either null (the default) or a string specifying a property name.

Note: This slot is checked by StylePropertyMap.set()/append()

3. The StylePropertyMap

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface StylePropertyMapReadOnly {
    iterable<USVString, sequence<CSSStyleValue>>;
    (undefined or CSSStyleValue) get(USVString property);
    sequence<CSSStyleValue> getAll(USVString property);
    boolean has(USVString property);
    readonly attribute unsigned long size;
};

[Exposed=Window]
interface StylePropertyMap : StylePropertyMapReadOnly {
    undefined set(USVString property, (CSSStyleValue or USVString)... values);
    undefined append(USVString property, (CSSStyleValue or USVString)... values);
    undefined delete(USVString property);
    undefined clear();
};

StylePropertyMap is an alternate way to represent a CSS declaration block as an object (when fetched via the [cssom], CSS declaration blocks are instead represented as CSSStyleDeclaration objects.)

Some CSS properties are list-valued properties, such as background-image or animation; their value is a list of parallel grammar terms, almost always comma-separated (the only exceptions are certain legacy properties like counter-reset), indicating multiple distinct "values" interpreted in the same way. Other properties, such as color, are single-valued properties; they take only a single (possibly complex) value.

A string is a custom property name string if it starts with two dashes (U+002D HYPHEN-MINUS), like --foo. (This corresponds to the <custom-property-name> production, but applies to strings, rather than identifiers; it can be used without invoking the CSS parser.)

A string is a valid CSS property if it is a custom property name string, or is a CSS property name recognized by the user agent.

3.1. Computed StylePropertyMapReadOnly objects

partial interface Element {
    [SameObject] StylePropertyMapReadOnly computedStyleMap();
};

Computed StylePropertyMap objects represent the computed values of an Element, and are accessed by calling the computedStyleMap() method.

Every Element has a [[computedStyleMapCache]] internal slot, initially set to null, which caches the result of the computedStyleMap() method when it is first called.

Note: like Window.getComputedStyle(), this method can expose information from stylesheets with the origin-clean flag unset.

Note: The StylePropertyMapReadOnly returned by this method represents the actual computed values, not the resolved value concept used by Window.getComputedStyle(). It can thus return different values than Window.getComputedStyle() for some properties (such as width).

Note: Per WG resolution, pseudo-element styles are intended to be obtainable by adding this method to the new PseudoElement interface (rather than using a pseudoElt argument like Window.getComputedStyle() does).

3.2. Declared & Inline StylePropertyMap objects

partial interface CSSStyleRule {
    [SameObject] readonly attribute StylePropertyMap styleMap;
};

partial interface mixin ElementCSSInlineStyle {
    [SameObject] readonly attribute StylePropertyMap attributeStyleMap;
};

Declared StylePropertyMap objects represent style property-value pairs embedded in a style rule or inline style, and are accessed via the styleMap attribute of CSSStyleRule objects, or the attributeStyleMap attribute of objects implementing the ElementCSSInlineStyle interface mixin (such as HTMLElements).

When constructed, the [[declarations]] internal slot for declared StylePropertyMap objects is initialized to contain an entry for each property with a valid value inside the CSSStyleRule or inline style that the object represents, in the same order as the CSSStyleRule or inline style.

4. CSSStyleValue subclasses

4.1. CSSUnparsedValue objects

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSUnparsedValue : CSSStyleValue {
    constructor(sequence<CSSUnparsedSegment> members);
    iterable<CSSUnparsedSegment>;
    readonly attribute unsigned long length;
    getter CSSUnparsedSegment (unsigned long index);
    setter CSSUnparsedSegment (unsigned long index, CSSUnparsedSegment val);
};

typedef (USVString or CSSVariableReferenceValue) CSSUnparsedSegment;

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSVariableReferenceValue {
    constructor(USVString variable, optional CSSUnparsedValue? fallback = null);
    attribute USVString variable;
    readonly attribute CSSUnparsedValue? fallback;
};

CSSUnparsedValue objects represent property values that reference custom properties. They are comprised of a list of string fragments and variable references.

They have a [[tokens]] internal slot, which is a list of USVStrings and CSSVariableReferenceValue objects. This list is the object’s values to iterate over.

The length attribute returns the size of the [[tokens]] internal slot.

4.2. CSSKeywordValue objects

CSSKeywordValue objects represent CSS keywords and other idents.

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSKeywordValue : CSSStyleValue {
    constructor(USVString value);
    attribute USVString value;
};

Any place that accepts a CSSKeywordValue also accepts a raw USVString, by using the following typedef and algorithm:

typedef (DOMString or CSSKeywordValue) CSSKeywordish;

4.3. Numeric Values:

CSSNumericValue objects represent CSS values that are numeric in nature (<number>s, <percentage>s, <dimension>s). There are two interfaces that inherit from CSSNumericValue:

• CSSUnitValue objects represent values that contain a single unit type (for example "42px").

• CSSMathValue objects represent math expressions, which can contain more than one value/unit (for example "calc(56em + 10%)").

CSSNumericValue objects are not range-restricted. Any valid numeric value can be represented by a CSSNumericValue, and that value will not be clamped, rounded, or rejected when set on a declared StylePropertyMap. Instead, clamping and/or rounding will occur during computation of style.

myElement.attributeStyleMap.set("opacity", CSS.number(3));
myElement.attributeStyleMap.set("z-index", CSS.number(15.4));

console.log(myElement.attributeStyleMap.get("opacity").value); // 3
console.log(myElement.attributeStyleMap.get("z-index").value); // 15.4

var computedStyle = myElement.computedStyleMap();
var opacity = computedStyle.get("opacity");
var zIndex = computedStyle.get("z-index");

Note: "Numeric values" which incorporate variable references will instead be represented as CSSUnparsedValue objects, and keywords as CSSKeywordValue objects.

Any place that accepts a CSSNumericValue also accepts a raw double, by using the following typedef and algorithm:

typedef (double or CSSNumericValue) CSSNumberish;

4.3.1. Common Numeric Operations, and the CSSNumericValue Superclass

All numeric CSS values (<number>s, <percentage>s, and <dimension>s) are represented by subclasses of the CSSNumericValue interface.

enum CSSNumericBaseType {
    "length",
    "angle",
    "time",
    "frequency",
    "resolution",
    "flex",
    "percent",
};

dictionary CSSNumericType {
    long length;
    long angle;
    long time;
    long frequency;
    long resolution;
    long flex;
    long percent;
    CSSNumericBaseType percentHint;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSNumericValue : CSSStyleValue {
    CSSNumericValue add(CSSNumberish... values);
    CSSNumericValue sub(CSSNumberish... values);
    CSSNumericValue mul(CSSNumberish... values);
    CSSNumericValue div(CSSNumberish... values);
    CSSNumericValue min(CSSNumberish... values);
    CSSNumericValue max(CSSNumberish... values);

    boolean equals(CSSNumberish... value);

    CSSUnitValue to(USVString unit);
    CSSMathSum toSum(USVString... units);
    CSSNumericType type();

    [Exposed=Window] static CSSNumericValue parse(USVString cssText);
};

The methods on the CSSNumericValue superclass represent operations that all numeric values can perform.

The following are the arithmetic operations you can perform on dimensions:

The parse() method allows a CSSNumericValue to be constructed directly from a string containing CSS. Note that this is a static method, existing directly on the CSSNumericValue interface object, rather than on CSSNumericValue instances.

4.3.2. Numeric Value Typing

Each CSSNumericValue has an associated type, which is a map of base types to integers (denoting the exponent of each type, so a <length>², such as from calc(1px * 1em), is «[ "length" → 2 ]»), and an associated percent hint (indicating that the type actually holds a percentage, but that percentage will eventually resolve to the hinted base type, and so has been replaced with it in the type).

The base types are "length", "angle", "time", "frequency", "resolution", "flex", and "percent". The ordering of a type’s entries always matches this base type ordering. The percent hint is either null or a base type.

Note: As new unit types are added to CSS, they’ll be added to this list of base types, and to the CSS math functions.

Note: A percent hint can be "percent", indicating the percentage is used as itself (or, equivalently, evaluated against a plain number), but this is not produced by the Typed OM methods; it only occurs when the type machinery is used directly by CSS, where a value’s context is actually known.

Note: Types form a semi-group under addition, and a monoid under multiplication (with the multiplicative identity being «[ ]» with a null percent hint), meaning that they’re associative and commutative. Thus the spec can, for example, add an unbounded number of types together unambiguously, rather than having to manually add them pair-wise.

4.3.3. Value + Unit: CSSUnitValue objects

Numeric values that can be expressed as a single unit (or a naked number or percentage) are represented as CSSUnitValues.

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSUnitValue : CSSNumericValue {
    constructor(double value, USVString unit);
    attribute double value;
    readonly attribute USVString unit;
};

4.3.4. Complex Numeric Values: CSSMathValue objects

Numeric values that are more complicated than a single value+unit are represented by a tree of CSSMathValue subclasses, eventually terminating in CSSUnitValue objects at the leaf nodes. The calc(), min(), and max() functions in CSS are represented in this way.

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSMathValue : CSSNumericValue {
    readonly attribute CSSMathOperator operator;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSMathSum : CSSMathValue {
    constructor(CSSNumberish... args);
    readonly attribute CSSNumericArray values;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSMathProduct : CSSMathValue {
    constructor(CSSNumberish... args);
    readonly attribute CSSNumericArray values;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSMathNegate : CSSMathValue {
    constructor(CSSNumberish arg);
    readonly attribute CSSNumericValue value;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSMathInvert : CSSMathValue {
    constructor(CSSNumberish arg);
    readonly attribute CSSNumericValue value;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSMathMin : CSSMathValue {
    constructor(CSSNumberish... args);
    readonly attribute CSSNumericArray values;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSMathMax : CSSMathValue {
    constructor(CSSNumberish... args);
    readonly attribute CSSNumericArray values;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSMathClamp : CSSMathValue {
    constructor(CSSNumberish lower, CSSNumberish value, CSSNumberish upper);
    readonly attribute CSSNumericValue lower;
    readonly attribute CSSNumericValue value;
    readonly attribute CSSNumericValue upper;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSNumericArray {
    iterable<CSSNumericValue>;
    readonly attribute unsigned long length;
    getter CSSNumericValue (unsigned long index);
};

enum CSSMathOperator {
    "sum",
    "product",
    "negate",
    "invert",
    "min",
    "max",
    "clamp",
};

Note: CSSMathValue, being a pure superclass, cannot be directly constructed. It exists solely to host the common attributes of all the "math" operations.

The length attribute of CSSNumericArray indicates how many CSSNumericValues are contained within the CSSNumericArray.

The indexed property getter of CSSNumericArray retrieves the CSSNumericValue at the provided index.

4.3.5. Numeric Factory Functions

The following factory functions can be used to create new numeric values much less verbosely than using the constructors directly.

partial namespace CSS {
    CSSUnitValue number(double value);
    CSSUnitValue percent(double value);

    // <length>
    CSSUnitValue cap(double value);
    CSSUnitValue ch(double value);
    CSSUnitValue em(double value);
    CSSUnitValue ex(double value);
    CSSUnitValue ic(double value);
    CSSUnitValue lh(double value);
    CSSUnitValue rcap(double value);
    CSSUnitValue rch(double value);
    CSSUnitValue rem(double value);
    CSSUnitValue rex(double value);
    CSSUnitValue ric(double value);
    CSSUnitValue rlh(double value);
    CSSUnitValue vw(double value);
    CSSUnitValue vh(double value);
    CSSUnitValue vi(double value);
    CSSUnitValue vb(double value);
    CSSUnitValue vmin(double value);
    CSSUnitValue vmax(double value);
    CSSUnitValue svw(double value);
    CSSUnitValue svh(double value);
    CSSUnitValue svi(double value);
    CSSUnitValue svb(double value);
    CSSUnitValue svmin(double value);
    CSSUnitValue svmax(double value);
    CSSUnitValue lvw(double value);
    CSSUnitValue lvh(double value);
    CSSUnitValue lvi(double value);
    CSSUnitValue lvb(double value);
    CSSUnitValue lvmin(double value);
    CSSUnitValue lvmax(double value);
    CSSUnitValue dvw(double value);
    CSSUnitValue dvh(double value);
    CSSUnitValue dvi(double value);
    CSSUnitValue dvb(double value);
    CSSUnitValue dvmin(double value);
    CSSUnitValue dvmax(double value);
    CSSUnitValue cqw(double value);
    CSSUnitValue cqh(double value);
    CSSUnitValue cqi(double value);
    CSSUnitValue cqb(double value);
    CSSUnitValue cqmin(double value);
    CSSUnitValue cqmax(double value);
    CSSUnitValue cm(double value);
    CSSUnitValue mm(double value);
    CSSUnitValue Q(double value);
    CSSUnitValue in(double value);
    CSSUnitValue pt(double value);
    CSSUnitValue pc(double value);
    CSSUnitValue px(double value);

    // <angle>
    CSSUnitValue deg(double value);
    CSSUnitValue grad(double value);
    CSSUnitValue rad(double value);
    CSSUnitValue turn(double value);

    // <time>
    CSSUnitValue s(double value);
    CSSUnitValue ms(double value);

    // <frequency>
    CSSUnitValue Hz(double value);
    CSSUnitValue kHz(double value);

    // <resolution>
    CSSUnitValue dpi(double value);
    CSSUnitValue dpcm(double value);
    CSSUnitValue dppx(double value);

    // <flex>
    CSSUnitValue fr(double value);
};

The above list of methods reflects the set of CSS’s valid predefined units at one particular point in time. It will be updated over time, but might be out-of-date at any given moment. If an implementation supports additional CSS units that do not have a corresponding method in the above list, but that do correspond to one of the existing CSSNumericType values, it must additionally support such a method, named after the unit in its defined canonical casing, using the generic behavior defined above.

If an implementation supports units that do not correspond to one of the existing CSSNumericType values, it must not support those units in the APIs defined in this specification; it should request the units and their types be added explicitly to this specification, as the appropriate type name is not implicit from the unit.

If an implementation does not support a given unit, it must not implement its corresponding method from the list above.

4.4. CSSTransformValue objects

CSSTransformValue objects represent <transform-list> values, used by the transform property. They "contain" one or more CSSTransformComponents, which represent individual <transform-function> values.

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSTransformValue : CSSStyleValue {
    constructor(sequence<CSSTransformComponent> transforms);
    iterable<CSSTransformComponent>;
    readonly attribute unsigned long length;
    getter CSSTransformComponent (unsigned long index);
    setter CSSTransformComponent (unsigned long index, CSSTransformComponent val);

    readonly attribute boolean is2D;
    DOMMatrix toMatrix();
};

A CSSTransformValue’s values to iterate over is a list of CSSTransformComponents.

The length attribute indicates how many transform components are contained within the CSSTransformValue.

They have a [[values]] internal slot, which is a list of CSSTransformComponent objects. This list is the object’s values to iterate over.

typedef (CSSNumericValue or CSSKeywordish) CSSPerspectiveValue;

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSTransformComponent {
    stringifier;
    attribute boolean is2D;
    DOMMatrix toMatrix();
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSTranslate : CSSTransformComponent {
    constructor(CSSNumericValue x, CSSNumericValue y, optional CSSNumericValue z);
    attribute CSSNumericValue x;
    attribute CSSNumericValue y;
    attribute CSSNumericValue z;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSRotate : CSSTransformComponent {
    constructor(CSSNumericValue angle);
    constructor(CSSNumberish x, CSSNumberish y, CSSNumberish z, CSSNumericValue angle);
    attribute CSSNumberish x;
    attribute CSSNumberish y;
    attribute CSSNumberish z;
    attribute CSSNumericValue angle;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSScale : CSSTransformComponent {
    constructor(CSSNumberish x, CSSNumberish y, optional CSSNumberish z);
    attribute CSSNumberish x;
    attribute CSSNumberish y;
    attribute CSSNumberish z;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSSkew : CSSTransformComponent {
    constructor(CSSNumericValue ax, CSSNumericValue ay);
    attribute CSSNumericValue ax;
    attribute CSSNumericValue ay;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSSkewX : CSSTransformComponent {
    constructor(CSSNumericValue ax);
    attribute CSSNumericValue ax;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSSkewY : CSSTransformComponent {
    constructor(CSSNumericValue ay);
    attribute CSSNumericValue ay;
};

/* Note that skew(x,y) is *not* the same as skewX(x) skewY(y),
   thus the separate interfaces for all three. */

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSPerspective : CSSTransformComponent {
    constructor(CSSPerspectiveValue length);
    attribute CSSPerspectiveValue length;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSMatrixComponent : CSSTransformComponent {
    constructor(DOMMatrixReadOnly matrix, optional CSSMatrixComponentOptions options = {});
    attribute DOMMatrix matrix;
};

dictionary CSSMatrixComponentOptions {
    boolean is2D;
};

4.5. CSSImageValue objects

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSImageValue : CSSStyleValue {
};

CSSImageValue objects represent values for properties that take <image> productions, for example background-image, list-style-image, and border-image-source.

Note: This object is intentionally opaque, and exposes no details of what kind of image it contains, or any aspect of the image. This is because having something to represent images is necessary for Custom Paint, but there are sufficient complexities in getting URL-handling and loading specified firmly that it’s not realistically possible to specify in the timeline of this specification. This will be expanded on in future levels.

If a CSSImageValue object represents an <image> that involves a URL (such as url() or image()), the handling of such values is identical to how CSS currently handles them. In particular, resolving relative URLs or fragment URLs has the same behavior as in normal CSS.

4.6. CSSColorValue objects

CSSColorValue objects represent <color> values. It is an abstract superclass, with the subclasses representing individual CSS color functions.

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSColorValue : CSSStyleValue {
    [Exposed=Window] static (CSSColorValue or CSSStyleValue) parse(USVString cssText);
};

Several IDL types are defined to be used in CSSColorValues:

typedef (CSSNumberish or CSSKeywordish) CSSColorRGBComp;
typedef (CSSNumberish or CSSKeywordish) CSSColorPercent;
typedef (CSSNumberish or CSSKeywordish) CSSColorNumber;
typedef (CSSNumberish or CSSKeywordish) CSSColorAngle;

All of these types are the same in terms of type signature, but they represent distinct values: CSSColorRGBComp represents a value that is, canonically, either a <number>, <percentage>, or the keyword none; CSSColorPercent represents a value that is, canonically, either a <percentage> or the keyword none; CSSColorNumber represents a value that is, canonically, either a <number> or the keyword none; CSSColorAngle represents a value that is, canonically, either an <angle> or the keyword none.

Their corresponding rectification algorithms also all have distinct behaviors for translating a double value into a CSSNumericValue.

TODO add stringifiers

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSRGB : CSSColorValue {
    constructor(CSSColorRGBComp r, CSSColorRGBComp g, CSSColorRGBComp b, optional CSSColorPercent alpha = 1);
    attribute CSSColorRGBComp r;
    attribute CSSColorRGBComp g;
    attribute CSSColorRGBComp b;
    attribute CSSColorPercent alpha;
};

The CSSRGB class represents the CSS rgb()/rgba() functions.

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSHSL : CSSColorValue {
    constructor(CSSColorAngle h, CSSColorPercent s, CSSColorPercent l, optional CSSColorPercent alpha = 1);
    attribute CSSColorAngle h;
    attribute CSSColorPercent s;
    attribute CSSColorPercent l;
    attribute CSSColorPercent alpha;
};

The CSSHSL class represents the CSS hsl()/hsla() functions.

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSHWB : CSSColorValue {
    constructor(CSSNumericValue h, CSSNumberish w, CSSNumberish b, optional CSSNumberish alpha = 1);
    attribute CSSNumericValue h;
    attribute CSSNumberish w;
    attribute CSSNumberish b;
    attribute CSSNumberish alpha;
};

The CSSHWB class represents the CSS hwb() function.

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSLab : CSSColorValue {
    constructor(CSSColorPercent l, CSSColorNumber a, CSSColorNumber b, optional CSSColorPercent alpha = 1);
    attribute CSSColorPercent l;
    attribute CSSColorNumber a;
    attribute CSSColorNumber b;
    attribute CSSColorPercent alpha;
};

The CSSLab class represents the CSS lab() function.

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSLCH : CSSColorValue {
    constructor(CSSColorPercent l, CSSColorPercent c, CSSColorAngle h, optional CSSColorPercent alpha = 1);
    attribute CSSColorPercent l;
    attribute CSSColorPercent c;
    attribute CSSColorAngle h;
    attribute CSSColorPercent alpha;
};

The CSSLCH class represents the CSS lch() function.

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSOKLab : CSSColorValue {
    constructor(CSSColorPercent l, CSSColorNumber a, CSSColorNumber b, optional CSSColorPercent alpha = 1);
    attribute CSSColorPercent l;
    attribute CSSColorNumber a;
    attribute CSSColorNumber b;
    attribute CSSColorPercent alpha;
};

The CSSOKLab class represents the CSS oklab() function.

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSOKLCH : CSSColorValue {
    constructor(CSSColorPercent l, CSSColorPercent c, CSSColorAngle h, optional CSSColorPercent alpha = 1);
    attribute CSSColorPercent l;
    attribute CSSColorPercent c;
    attribute CSSColorAngle h;
    attribute CSSColorPercent alpha;
};

The CSSOKLCH class represents the CSS lch() function.

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSColor : CSSColorValue {
    constructor(CSSKeywordish colorSpace, sequence<CSSColorPercent> channels, optional CSSNumberish alpha = 1);
    attribute CSSKeywordish colorSpace;
    attribute ObservableArray<CSSColorPercent> channels;
    attribute CSSNumberish alpha;
};

The CSSColor class represents the CSS color() function.

5. CSSStyleValue Reification

This section describes how Typed OM objects are constructed from internal representations, a process called reification.

Some general principles apply to all reification, and so aren’t stated in each individual instance:

• If an internal representation is from a list-valued property, this list defines how to reify a single iteration of the property; multiple iterations are reflected by returning multiple values from StylePropertyMap.getAll().

• If an internal representation contains a var() reference, then it is reified by reifying a list of component values, regardless of what property it is for.

5.1. Property-specific Rules

The following list defines the reification behavior for every single property in CSS, for both specified and computed values.

unregistered custom properties

For both specified and computed values, reify a list of component values from the value, and return the result.

registered custom properties

Reified as described by CSS Properties and Values API 1 § 6.2 CSSStyleValue Reification.

align-content

align-items

For both specified and computed values:

1. If the value is normal or stretch, reify an identifier from the value and return the result.

2. If the value is baseline or first baseline,, reify an identifier "baseline" and return the result.

3. If the value is a <self-position> with no <overflow-position>, reify an identifier from the value and return the result.

4. Otherwise, reify as a CSSStyleValue and return the result.

align-self

For both specified and computed values:

1. If the value is auto, normal, or stretch, reify an identifier from the value and return the result.

2. If the value is baseline or first baseline,, reify an identifier "baseline" and return the result.

3. If the value is a <self-position> with no <overflow-position>, reify an identifier from the value and return the result.

4. Otherwise, reify as a CSSStyleValue and return the result.

alignment-baseline

For both specified and computed values, reify an identifier from the value and return the result.

all

For both specified and computed values, reify an identifier from the value and return the result.

animation-composition

For both specified and computed values, reify an identifier from the value and return the result.

appearance

For both specified and computed values, reify an identifier from the value and return the result.

azimuth

For specified values:

1. If the value is an <angle>, reify a numeric value from the value and return the result.

2. If the value is a single keyword, reify an identifier from the value and return the result.

3. Otherwise, reify as a CSSStyleValue and return the result.

For computed values:

Reify a numeric value from the angle and return the result.

backdrop-filter

For both specified and computed values:

1. If the value is none, reify an identifier from the value and return the result.

2. Otherwise, reify as a CSSStyleValue and return the result.

backface-visibility

For both specified and computed values, reify an identifier from the value and return the result.

background

For both specified and computed values, reify as a CSSStyleValue and return the result.

background-attachment

For both specified and computed values, reify an identifier from the value and return the result.

background-blend-mode

For both specified and computed values, reify an identifier from the value and return the result.

background-clip

For both specified and computed values, reify an identifier from the value and return the result.

background-color

For both specified and computed values, reify as a CSSStyleValue and return the result.

background-image

For both specified and computed values:

1. If the value is none, reify an identifier from the value and return the result.

2. If the value is a url() function, reify a url from the value and return the result.

3. Otherwise, reify an image from the value and return the result.

background-position

For both specified and computed values, reify a position from the value and return the result.

background-repeat

For both specified and computed values:

1. If the value is a single keyword, or the same keyword repeated twice, reify an identifier from the keyword and return the result.

2. If the value is repeat no-repeat, reify an identifier "repeat-x" and return the result.

3. If the value is no-repeat repeat, reify an identifier "repeat-y" and return the result.

4. Otherwise, reify to a CSSStyleValue and return the result.

baseline-shift

For both specified and computed values:

1. If the value is sub or super, reify an identifier from the value and return the result.

2. Otherwise, reify a numeric value from the value and return the result.

block-size

Same as for width

block-step

For both specified and computed values, reify as a CSSStyleValue and return the result.

block-step-align

For both specified and computed values, reify an identifier from the value and return the result.

block-step-insert

For both specified and computed values, reify an identifier from the value and return the result.

block-step-round

For both specified and computed values, reify an identifier from the value and return the result.

block-step-size

For both specified and computed values:

1. If the value is none, reify an identifier from the value and return the result.

2. Otherwise, reify a numeric value from the value and return the result.

bookmark-label

For both specified and computed values, reify as a CSSStyleValue and return the result.

bookmark-level

For both specified and computed values:

1. If the value is none, reify an identifier from the value and return the result.

2. Otherwise, reify a numeric value from the value and return the result.

bookmark-state

For both specified and computed values, reify an identifier from the value and return the result.

border

For both specified and computed values, reify as a CSSStyleValue and return the result.

border-block

Same as border-block-start

border-block-color

For both specified and computed values, reify as a CSSStyleValue and return the result.

border-block-end

Same as border-block-start

border-block-end-color

Same as border-top-color

border-block-end-style

Same as border-top-style

border-block-end-width

Same as border-top-width

border-block-start

Same as border-top

border-block-start-color

Same as border-top-color

border-block-start-style

Same as border-top-style

border-block-start-width

Same as border-top-width

border-block-style

For both specified and computed values, reify as a CSSStyleValue and return the result.

border-block-width

For both specified and computed values, reify as a CSSStyleValue and return the result.

border-bottom

Same as border-top

border-bottom-color

Same as border-top-color

border-bottom-style

Same as border-top-style

border-bottom-width

Same as border-top-width

border-boundary

For both specified and computed values, reify an identifier from the value and return the result.

border-collapse

For both specified and computed values, reify an identifier from the value and return the result.

border-color

For both specified and computed values, reify as a CSSStyleValue and return the result.

border-inline

border-inline-color

border-inline-end

border-inline-end-color

border-inline-end-style

border-inline-end-width

border-inline-start

border-inline-start-color

border-inline-start-style

border-inline-start-width

border-inline-style

border-inline-width

border-left

Same as border-top

border-left-color

Same as border-top-color

border-left-style

Same as border-top-style

border-left-width

Same as border-top-width

border-radius

For both specified and computed values, reify as a CSSStyleValue and return the result.

border-right

Same as border-top

border-right-color

Same as border-top-color

border-right-style

Same as border-top-style

border-right-width

Same as border-top-width

border-spacing

border-style

border-top

For both specified and computed values, reify as a CSSStyleValue and return the result.

border-top-color

For both specified and computed values:

1. If the value is currentcolor, reify an identifier from the value and return the result.

2. Otherwise, reify as a CSSStyleValue and return the result.

border-top-style

For both specified and computed values, reify an identifier from the value and return the result.

border-top-width

For both specified and computed values:

1. If the value is a <length>, reify a numeric value from the value and return the result.

2. Otherwise, reify an identifier from the value and return the result.

border-width

For both specified and computed values, reify as a CSSStyleValue and return the result.

bottom

For both specified and computed values:

1. If the value is auto, reify an identifier from the value and return the result.

2. Otherwise, reify a numeric value from the value and return the result.

box-decoration-break

box-sizing

For both specified and computed values, reify an identifier from the value and return the result.

box-snap

break-after

break-before

break-inside

caption-side

caret

caret-color

For both specified and computed values:

1. If the value is currentcolor, reify an identifier from the value and return the result.

2. Otherwise, reify as a CSSStyleValue and return the result.

caret-shape

clear

For both specified and computed values, reify an identifier from the value and return the result.

clip

clip-path

clip-rule

color

For both specified and computed values:

1. If the value is currentcolor, reify an identifier from the value and return the result.

2. Otherwise, reify as a CSSStyleValue and return the result.

color-adjust

color-interpolation

color-rendering

column-gap

column-span

contain

content

continue

copy-into

counter-increment

counter-reset

counter-set

cue

cue-after

cue-before

cursor

cx

cy

d

direction

For both specified and computed values, reify an identifier from the value and return the result.

display

For both specified and computed values, reify an identifier from the value and return the result.

dominant-baseline

elevation

empty-cells

For both specified and computed values, reify an identifier from the value and return the result.

fill

fill-break

fill-color

fill-image

fill-opacity

fill-origin

fill-position

fill-repeat

fill-rule

fill-size

'filter-margin-top, filter-margin-right, filter-margin-bottom, filter-margin-left'

flex

flex-basis

flex-direction

flex-flow

flex-grow

flex-shrink

flex-wrap

float

For both specified and computed values, reify an identifier from the value and return the result.

float-defer

font

For both specified and computed values, reify as a CSSStyleValue and return the result.

font-family

For both specified and computed values, reify as a CSSStyleValue and return the result.

font-language-override

For both specified and computed values:

1. If the value is normal, reify an identifier from the value and return the result.

2. Otherwise, reify as a CSSStyleValue and return the result.

font-optical-sizing

For both specified and computed values, reify an identifier from the value and return the result.

font-palette

For both specified and computed values:

1. If the value is normal, light or dark, reify an identifier from the value and return the result.

2. Otherwise, reify as a CSSStyleValue and return the result.

font-size

For both specified and computed values:

1. If the value is an <absolute-size> or <relative-size>, reify an identifier from the value and return the result.

2. Otherwise, reify a numeric value from the value and return the result.

font-size-adjust

For both specified and computed values:

1. If the value is none, reify an identifier from the value and return the result.

2. Otherwise, reify a numeric value from the value and return the result.

font-stretch

For both specified and computed values:

1. If the value is a <percentage>, reify a numeric value from the value and return the result.

2. Otherwise, reify an identifier from the value and return the result.

font-style

For both specified and computed values, reify an identifier from the value and return the result.

font-synthesis

For both specified and computed values:

1. If the value is none, weight, style or small-caps, reify an identifier from the value and return the result.

2. Otherwise, reify as a CSSStyleValue and return the result.

font-variant

For both specified and computed values, reify as a CSSStyleValue and return the result.

font-variant-alternates

For both specified and computed values:

1. If the value is none or historical-forms, reify an identifier from the value and return the result.

2. Otherwise, reify as a CSSStyleValue and return the result.

font-variant-emoji

For both specified and computed values, reify an identifier from the value and return the result.

font-variation-settings

For both specified and computed values:

1. If the value is normal, reify an identifier from the value and return the result.

2. Otherwise, reify as a CSSStyleValue and return the result.

font-weight

For both specified and computed values:

1. If the value is a <number>, reify a numeric value from the value and return the result.

2. Otherwise, reify an identifier from the value

gap

globalcompositeoperation

glyph-orientation-vertical

grid

grid-area

grid-auto-columns

grid-auto-flow

grid-auto-rows

grid-column

grid-column-end

grid-column-gap

grid-column-start

grid-gap

grid-row

grid-row-end

grid-row-gap

grid-row-start

grid-template

grid-template-areas

grid-template-columns

grid-template-rows

height

For both specified and computed values:

1. If the value is auto, reify an identifier from the value and return the result.

2. If the value is a <length> or <percentage>, reify a numeric value from the value and return the result.

image-rendering

image-resolution

initial-letter

initial-letter-align

initial-letter-wrap

inline-size

inset

inset-block

inset-block-end

inset-block-start

inset-inline

inset-inline-end

inset-inline-start

isolation

justify-content

justify-items

justify-self

left

For both specified and computed values:

1. If the value is auto, reify an identifier from the value and return the result.

2. Otherwise, reify a numeric value from the value and return the result.

letter-spacing

line-grid

line-height

For both specified and computed values:

1. If the value is normal, reify an identifier from the value and return the result.

2. Otherwise, reify a numeric value from the value and return the result.

line-height-step

line-snap

list-style

list-style-image

For both specified and computed values:

1. If the value is none, reify an identifier from the value and return the result.

2. If the value is a url() function, reify a url from the value and return the result.

3. Otherwise, reify an image from the value and return the result.

list-style-position

For both specified and computed values, reify an identifier from the value and return the result.

list-style-type

margin

For both specified and computed values, reify as a CSSStyleValue and return the result.

margin-block

margin-block-end

margin-block-start

margin-bottom

Same as margin-top

margin-inline

margin-inline-end

margin-inline-start

margin-left

Same as margin-top

margin-right

Same as margin-top

margin-top

For both specified and computed values:

1. If the value is auto, reify an identifier from the value and return the result.

2. Otherwise, reify a numeric value from the value and return the result.

marker

marker-end

marker-mid

marker-side

marker-start

mask

mask-border

mask-border-mode

mask-border-outset

mask-border-repeat

mask-border-slice

mask-border-source

mask-border-width

mask-clip

mask-composite

mask-image

For both specified and computed values:

1. If the value is none, reify an identifier from the value and return the result.

2. Otherwise, reify an image from the value and return the result.

mask-mode

mask-origin

mask-position

mask-repeat

mask-size

mask-type

max-block-size

max-height

max-inline-size

max-lines

max-width

min-block-size

min-height

min-inline-size

min-width

mix-blend-mode

nav-down

nav-left

nav-right

nav-up

object-fit

offset

offset-anchor

offset-distance

offset-path

offset-position

offset-rotate

opacity

For both specified and computed values, reify a numeric value from the value and return the result.

order

orphans

outline

outline-color

For both specified and computed values:

1. If the value is currentcolor, reify an identifier from the value and return the result.

2. Otherwise, reify as a CSSStyleValue and return the result.

outline-offset

outline-style

For both specified and computed values, reify an identifier from the value and return the result.

outline-width

overflow

For both specified and computed values, reify as a CSSStyleValue and return the result.

overflow-anchor

For both specified and computed values, reify an identifier from the value and return the result.

overflow-x

For both specified and computed values, reify an identifier from the value and return the result.

overflow-y

For both specified and computed values, reify an identifier from the value and return the result.

padding

For both specified and computed values, reify as a CSSStyleValue and return the result.

padding-block

padding-block-end

padding-block-start

padding-bottom

Same as padding-top

padding-inline

padding-inline-end

padding-inline-start

padding-left

Same as padding-top

padding-right

Same as padding-top

padding-top

For both specified and computed values, reify a numeric value from the value and return the result.

page

page-break-after

page-break-before

page-break-inside

paint-order

pause

pause-after

pause-before

perspective

perspective-origin

pitch

pitch-range

place-content

place-items

place-self

play-during

pointer-events

position

For both specified and computed values, reify an identifier from the value and return the result.

presentation-level

quotes

r

region-fragment

resize

For both specified and computed values, reify an identifier from the value and return the result.

rest

rest-after

rest-before

richness

right

For both specified and computed values:

1. If the value is auto, reify an identifier from the value and return the result.

2. Otherwise, reify a numeric value from the value and return the result.

rotate

row-gap

ruby-align

ruby-merge

ruby-position

rx

ry

scale

scroll-behavior

scroll-margin

scroll-margin-block

scroll-margin-block-end

scroll-margin-block-start

scroll-margin-bottom

scroll-margin-inline

scroll-margin-inline-end

scroll-margin-inline-start

scroll-margin-left

scroll-margin-right

scroll-margin-top

scroll-padding

scroll-padding-block

scroll-padding-block-end

scroll-padding-block-start

scroll-padding-bottom

scroll-padding-inline

scroll-padding-inline-end

scroll-padding-inline-start

scroll-padding-left

scroll-padding-right

scroll-padding-top

scroll-snap-align

scroll-snap-stop

scroll-snap-type

scrollbar-gutter

shape-inside

shape-margin

shape-padding

shape-rendering

shape-subtract

speak

speak-as

speak-header

speak-numeral

speak-punctuation

speech-rate

stop-color

stop-opacity

stress

stroke

stroke-align

stroke-break

stroke-color

stroke-dash-corner

stroke-dash-justify

stroke-dasharray

stroke-dashoffset

stroke-image

stroke-linecap

stroke-linejoin

stroke-miterlimit

stroke-opacity

stroke-origin

stroke-position

stroke-repeat

stroke-size

stroke-width

table-layout

text-align

For both specified and computed values, reify an identifier from the value and return the result.

text-anchor

text-combine-upright

text-decoration

text-decoration-fill

text-decoration-skip

text-decoration-skip-ink

text-decoration-stroke

text-decoration-thickness

text-emphasis-skip

text-indent

text-orientation

text-overflow

text-rendering

text-size-adjust

text-transform

For both specified and computed values, reify an identifier from the value and return the result.

text-underline-offset

top

For both specified and computed values:

1. If the value is auto, reify an identifier from the value and return the result.

2. Otherwise, reify a numeric value from the value and return the result.

transform-style

transition

transition-delay

transition-duration

transition-property

transition-timing-function

translate

unicode-bidi

user-select

vector-effect

vertical-align

For both specified and computed values:

1. If the value is baseline, reify an identifier from the value and return the result.

2. Otherwise, reify a numeric value from the value and return the result.

visibility

For both specified and computed values, reify an identifier from the value and return the result.

voice-balance

voice-duration

voice-family

voice-pitch

voice-range

voice-rate

voice-stress

voice-volume

volume

white-space

For both specified and computed values, reify an identifier from the value and return the result.

widows

width

For both specified and computed values:

1. If the value is auto, reify an identifier from the value and return the result.

2. If the value is a <length> or <percentage>, reify a numeric value from the value and return the result.

will-change

word-spacing

writing-mode

x

y

z-index