Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.w3.org/TR/css-typed-om-1/ below:

CSS Typed OM Level 1

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.

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

To

given a

, a

, and a

flag, run these steps:

1. If property is not a custom property name string, set property to property ASCII lowercased.

2. If property is not a valid CSS property, throw a TypeError.

3. Attempt to parse cssText according to property’s grammar. If this fails, throw a TypeError. Otherwise, let whole value be the parsed result.

   The behavior of custom properties are different when modified via JavaScript than when defined in style sheets.

   When a custom property is defined with an invalid syntax in a style sheet, then the value is recorded as "unset", to avoid having to reparse every style sheet when a custom property is registered.

   Conversely, when a custom property is modified via the JavaScript API, any parse errors are propagated to the progamming environment via a TypeError. This allows more immediate feedback of errors to developers.

4. Subdivide into iterations whole value, according to property, and let values be the result.

5. For each value in values, replace it with the result of reifying value for property.

   Define the global.

6. If parseMultiple is false, return values[0]. Otherwise, return values.

To

a CSS value

for a property

, execute the following steps:

1. If property is a single-valued property, return a list containing whole value.

2. Otherwise, divide whole value into individual iterations, as appropriate for property, and return a list containing the iterations in order.

How to divide a

into iterations is intentionally undefined and hand-wavey at the moment.

, you just split it on top-level commas (corresponding to a top-level

term in the grammar), but some legacy properties (such as

) don’t separate their iterations with commas.

It’s expected to be rigorously defined in the future, but at the moment is explicitly a "you know what we mean" thing.

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()

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

There are multiple examples of CSS properties that have transitioned from being

to

. To ensure that code written at a time when a property was

does not break when it becomes

in the future, the

is a

; it stores

of values for each key, but allows you to interact with it as if there was only a single value for each key as well.

This means that multiple values for a single property in a StylePropertyMap do not represent multiple successive definition of that property’s value; instead, they represent multiple comma-separated sub-values in a single property value, like each "layer" in a background-image property.

The

method, when called on a

, must perform the following steps:

1. If property is not a custom property name string, set property to property ASCII lowercased.

2. If property is not a valid CSS property, throw a TypeError.

3. If property is a single-valued property and values has more than one item, throw a TypeError.

4. If any of the items in values have a non-null [[associatedProperty]] internal slot, and that slot’s value is anything other than property, throw a TypeError.

5. If the size of values is two or more, and one or more of the items are a CSSUnparsedValue or CSSVariableReferenceValue object, throw a TypeError.

   Note: Having 2+ values implies that you’re setting multiple items of a list-valued property, but the presence of a var() function in the string-based OM disables all syntax parsing, including splitting into individual iterations (because there might be more commas inside of the var() value, so you can’t tell how many items are actually going to show up). This step’s restriction preserves the same semantics in the Typed OM.

6. Let props be the value of this’s [[declarations]] internal slot.

7. If props[property] exists, remove it.

8. Let values to set be an empty list.

9. For each value in values, create an internal representation for property and value, and append the result to values to set.

10. Set props[property] to values to set.

Note: The property is deleted then added back so that it gets put at the end of the ordered map, which gives the expected behavior in the face of shorthand properties.

The

method, when called on a

, must perform the following steps:

1. If property is not a custom property name string, set property to property ASCII lowercased.

2. If property is not a valid CSS property, throw a TypeError.

3. If property is not a list-valued property, throw a TypeError.

4. If any of the items in values have a non-null [[associatedProperty]] internal slot, and that slot’s value is anything other than property, throw a TypeError.

5. If any of the items in values are a CSSUnparsedValue or CSSVariableReferenceValue object, throw a TypeError.

   Note: When a property is set via string-based APIs, the presence of var() in a property prevents the entire thing from being interpreted. In other words, everything besides the var() is a plain component value, not a meaningful type. This step’s restriction preserves the same semantics in the Typed OM.

6. Let props be the value of this’s [[declarations]] internal slot.

7. If props[property] does not exist, set props[property] to an empty list.

8. If props[property] contains a var() reference, throw a TypeError.

9. Let temp values be an empty list.

10. For each value in values, create an internal representation with property and value, and append the returned value to temp values.

11. Append the entries of temp values to props[property].

To

, given a

and a

or

:

If value is a direct CSSStyleValue,

Return value’s associated value.

If value is a CSSStyleValue subclass,

If value does not match the grammar of a list-valued property iteration of property, throw a TypeError.

If any component of property’s CSS grammar has a limited numeric range, and the corresponding part of value is a CSSUnitValue that is outside of that range, replace that value with the result of wrapping it in a fresh CSSMathSum whose values internal slot contains only that part of value.

Return the value.

If value is a USVString,

Parse a CSSStyleValue with property property, cssText value, and parseMultiple set to false, and return the result.

Note: This can throw a TypeError instead.

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.

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.

The

method must, when called on an

, perform the following steps:

1. If this’s [[computedStyleMapCache]] internal slot is set to null, set its value to a new StylePropertyMapReadOnly object, whose [[declarations]] internal slot are the name and computed value of every longhand CSS property supported by the User Agent, every registered custom property, and every non-registered custom property which is not set to its initial value on this, in the standard order.

   The computed values in the [[declarations]] of this object must remain up-to-date, changing as style resolution changes the properties on this and how they’re computed.

   Note: In practice, since the values are "hidden" behind a .get() method call, UAs can delay computing anything until a given property is actually requested.

2. Return this’s [[computedStyleMapCache]] internal slot.

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

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.

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

The

of a

are the integers greater than or equal to 0, and less than the

of

’s

internal slot.

To determine the value of an indexed property of a CSSUnparsedValue this and an index n, let tokens be this’s [[tokens]] internal slot, and return tokens[n].

To set the value of an existing indexed property of a CSSUnparsedValue this, an index n, and a value new value, let tokens be this’s [[tokens]] internal slot, and set tokens[n] to new value.

To set the value of a new indexed property of a CSSUnparsedValue this, an index n, and a value new value, let tokens be this’s [[tokens]] internal slot. If n is not equal to the size of tokens, throw a RangeError. Otherwise, append new value to tokens.

CSSKeywordValue objects represent CSS keywords and other idents.

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

The

constructor must, when called, perform the following steps:

1. If value is an empty string, throw a TypeError.

2. Otherwise, return a new CSSKeywordValue with its value internal slot set to value.

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

typedef (DOMString or CSSKeywordValue) CSSKeywordish;

The

attribute of a

must, on setting a value

, perform the following steps:

1. If value is an empty string, throw a TypeError.

2. Otherwise, set this’s value internal slot, to value.

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.

The following code is valid

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");

After execution, the value of opacity is 1 (opacity is range-restricted), and the value of zIndex is 15 (z-index is rounded to an integer value).

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;

To

, optionally to a given unit

(defaulting to "number"), perform the following steps:

1. If num is a CSSNumericValue, return num.

2. If num is a double, return a new CSSUnitValue with its value internal slot set to num and its unit internal slot set to unit.

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

method, when called on a

, must perform the following steps:

1. Replace each item of values with the result of rectifying a numberish value for the item.

2. If this is a CSSMathSum object, prepend the items in this’s values internal slot to values. Otherwise, prepend this to values.

3. If all of the items in values are CSSUnitValues and have the same unit, return a new CSSUnitValue whose unit internal slot is set to this’s unit internal slot, and value internal slot is set to the sum of the value internal slots of the items in values. This addition must be done "left to right" - if values is « 1, 2, 3, 4 », the result must be (((1 + 2) + 3) + 4). (This detail is necessary to ensure interoperability in the presence of floating-point arithmetic.)

4. Let type be the result of adding the types of every item in values. If type is failure, throw a TypeError.

5. Return a new CSSMathSum object whose values internal slot is set to values.

The

method, when called on a

, must perform the following steps:

1. Replace each item of values with the result of rectifying a numberish value for the item.

2. If this is a CSSMathProduct object, prepend the items in this’s values internal slot to values. Otherwise, prepend this to values.

3. If all of the items in values are CSSUnitValues with unit internal slot set to "number", return a new CSSUnitValue whose unit internal slot is set to "number", and value internal slot is set to the product of the value internal slots of the items in values.

   This multiplication must be done "left to right" - if values is « 1, 2, 3, 4 », the result must be (((1 × 2) × 3) × 4). (This detail is necessary to ensure interoperability in the presence of floating-point arithmetic.)

4. If all of the items in values are CSSUnitValues with unit internal slot set to "number" except one which is set to unit, return a new CSSUnitValue whose unit internal slot is set to unit, and value internal slot is set to the product of the value internal slots of the items in values.

   This multiplication must be done "left to right" - if values is « 1, 2, 3, 4 », the result must be (((1 × 2) × 3) × 4).

5. Let type be the result of multiplying the types of every item in values. If type is failure, throw a TypeError.

6. Return a new CSSMathProduct object whose values internal slot is set to values.

This notion of equality is purposely fairly exacting; all the values must be the exact same type and value, in the same order. For example,

is

equal to

.

This precise notion is used because it allows structural equality to be tested for very quickly; if we were to use a slower and more forgiving notion of equality, such as allowing the arguments to match in any order, we’d probably want to go all the way and perform other simplifications, like considering 96px to be equal to 1in; this looser notion of equality might be added in the future.

When asked to

, perform the following steps:

1. If item has more than one entry in its unit map, return failure.

2. If item has no entries in its unit map, return a new CSSUnitValue whose unit internal slot is set to "number", and whose value internal slot is set to item’s value.

3. Otherwise, item has a single entry in its unit map. If that entry’s value is anything other than 1, return failure.

4. Otherwise, return a new CSSUnitValue whose unit internal slot is set to that entry’s key, and whose value internal slot is set to item’s value.

The

method converts an existing

into a

of only

s with the specified units, if possible. (It’s like

, but allows the result to have multiple units in it.) If called without any units, it just simplifies

into a minimal sum of

s.

When called, it must perform the following steps:

1. For each unit in units, if the result of creating a type from unit is failure, throw a SyntaxError.

2. Let sum be the result of creating a sum value from this. If sum is failure, throw a TypeError.

3. Let values be the result of creating a CSSUnitValue for each item in sum. If any item of values is failure, throw a TypeError.

4. If units is empty, sort values in code point order according to the unit internal slot of its items, then return a new CSSMathSum object whose values internal slot is set to values.

5. Otherwise, let result initially be an empty list. For each unit in units:

   1. Let temp initially be a new CSSUnitValue whose unit internal slot is set to unit and whose value internal slot is set to 0.

   2. For each value in values:

      1. Let value unit be value’s unit internal slot.

      2. If value unit is a compatible unit with unit, then:

         1. Convert value to unit.

         2. Increment temp’s value internal slot by the value of value’s value internal slot.

         3. Remove value from values.

   3. Append temp to result.

6. If values is not empty, throw a TypeError. this had units that you didn’t ask for.

7. Return a new CSSMathSum object whose values internal slot is set to result.

The

method returns a representation of the

of

.

When called, it must perform the following steps:

1. Let result be a new CSSNumericType.

2. For each baseType → power in the type of this,

   1. If power is not 0, set result[baseType] to power.

3. If the percent hint of this is not null,

   1. Set percentHint to the percent hint of this.

4. Return result.

A

is an abstract representation of a

as a sum of numbers with (possibly complex) units. Not all

s can be expressed as a

.

A sum value is a list. Each entry in the list is a tuple of a value, which is a number, and a unit map, which is a map of units (strings) to powers (integers).

Here are a few examples of CSS values, and their equivalent

:

• 1px becomes «(1, «["px" → 1]»)»

• calc(1px + 1in) becomes «(97, «["px" → 1]»)» (because in and px are compatible units, and px is the canonical unit for them)

• calc(1px + 2em) becomes «(1, «["px" → 1]»), (2, «["em" → 1]»)»

• calc(1px + 2%) becomes «(1, «["px" → 1]»), (2, «["percent" → 1]»)» (percentages are allowed to add to other units, but aren’t resolved into another unit, like they are in a type)

• calc(1px * 2em) becomes «(2, «["em" → 1, "px" → 1]»)»

• calc(1px + 1deg) can’t be represented as a sum value because it’s an invalid computation

• calc(1px * 2deg) becomes «(2, «["deg" → 1, "px" → 1]»)»

To create a sum value from a CSSNumericValue this, the steps differ based on this’s class:

CSSUnitValue

1. Let unit be the value of this’s unit internal slot, and value be the value of this’s value internal slot.

2. If unit is a member of a set of compatible units, and is not the set’s canonical unit, multiply value by the conversion ratio between unit and the canonical unit, and change unit to the canonical unit.

3. If unit is "number", return «(value, «[ ]»)».

4. Otherwise, return «(value, «[unit → 1]»)».

CSSMathSum

CSSMathNegate

1. Let values be the result of creating a sum value from this’s value internal slot.

2. If values is failure, return failure.

3. Negate the value of each item of values.

4. Return values.

CSSMathProduct

1. Let values initially be the sum value «(1, «[ ]»)». (I.e. what you’d get from 1.)

2. For each item in this’s values internal slot:

   1. Let new values be the result of creating a sum value from item. Let temp initially be an empty list.

   2. If new values is failure, return failure.

   3. For each item1 in values:

      1. For each item2 in new values:

         1. Let item be a tuple with its value set to the product of the values of item1 and item2, and its unit map set to the product of the unit maps of item1 and item2, with all entries with a zero value removed.

         2. Append item to temp.

   4. Set values to temp.

3. Return values.

CSSMathInvert

1. Let values be the result of creating a sum value from this’s value internal slot.

2. If values is failure, return failure.

3. If the length of values is more than one, return failure.

4. Invert (find the reciprocal of) the value of the item in values, and negate the value of each entry in its unit map.

5. Return values.

CSSMathMin

CSSMathMax

To

:

1. Let types be an initially empty list.

2. For each unit → power in unit map:

   1. Let type be the result of creating a type from unit.

   2. Set type’s sole value to power.

   3. Append type to types.

3. Return the result of multiplying all the items of types.

The

and

is the result given by the following steps:

1. Let result be a copy of units1.

2. For each unit → power in units2:

   1. If result[unit] exists, increment result[unit] by power.

   2. Otherwise, set result[unit] to power.

3. Return result.

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.

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 other than "percent".

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.

To

from a string

, follow the appropriate branch of the following:

unit is "number"

Return «[ ]» (empty map)

unit is "percent"

Return «[ "percent" → 1 ]»

unit is a <length> unit

Return «[ "length" → 1 ]»

unit is an <angle> unit

Return «[ "angle" → 1 ]»

unit is a <time> unit

Return «[ "time" → 1 ]»

unit is a <frequency> unit

Return «[ "frequency" → 1 ]»

unit is a <resolution> unit

Return «[ "resolution" → 1 ]»

unit is a <flex> unit

Return «[ "flex" → 1 ]»

anything else

Return failure.

In all cases, the associated percent hint is null.

To

and

, perform the following steps:

1. Replace type1 with a fresh copy of type1, and type2 with a fresh copy of type2. Let finalType be a new type with an initially empty ordered map and an initially null percent hint.

2. If both type1 and type2 have non-null percent hints with different values

   The types can’t be added. Return failure.

   If type1 has a non-null percent hint hint and type2 doesn’t

   Apply the percent hint hint to type2.

   Vice versa if type2 has a non-null percent hint and type1 doesn’t.

   Otherwise

   Continue to the next step.

3. If all the entries of type1 with non-zero values are contained in type2 with the same value, and vice-versa

   Copy all of type1’s entries to finalType, and then copy all of type2’s entries to finalType that finalType doesn’t already contain. Set finalType’s percent hint to type1’s percent hint. Return finalType.

   If type1 and/or type2 contain "percent" with a non-zero value, and type1 and/or type2 contain a key other than "percent" with a non-zero value

   For each base type other than "percent" hint:

   1. Provisionally apply the percent hint hint to both type1 and type2.

   2. If, afterwards, all the entries of type1 with non-zero values are contained in type2 with the same value, and vice versa, then copy all of type1’s entries to finalType, and then copy all of type2’s entries to finalType that finalType doesn’t already contain. Set finalType’s percent hint to hint. Return finalType.

   3. Otherwise, revert type1 and type2 to their state at the start of this loop.

   If the loop finishes without returning finalType, then the types can’t be added. Return failure.

   Note: You can shortcut this in some cases by just checking the sum of all the values of type1 vs type2. If the sums are different, the types can’t be added.

   Otherwise

   The types can’t be added. Return failure.

To

to a

, perform the following steps:

1. If type doesn’t contain hint, set type[hint] to 0.

2. If type contains "percent", add type["percent"] to type[hint], then set type["percent"] to 0.

3. Set type’s percent hint to hint.

To

and

, perform the following steps:

1. Replace type1 with a fresh copy of type1, and type2 with a fresh copy of type2. Let finalType be a new type with an initially empty ordered map and an initially null percent hint.

2. If both type1 and type2 have non-null percent hints with different values, the types can’t be multiplied. Return failure.

3. If type1 has a non-null percent hint hint and type2 doesn’t, apply the percent hint hint to type2.

   Vice versa if type2 has a non-null percent hint and type1 doesn’t.

4. Copy all of type1’s entries to finalType, then for each baseType → power of type2:

   1. If finalType[baseType] exists, increment its value by power.

   2. Otherwise, set finalType[baseType] to power.

   Set finalType’s percent hint to type1’s percent hint.

5. Return finalType.

To

, perform the following steps:

1. Let result be a new type with an initially empty ordered map and a percent hint matching that of type.

2. For each unit → exponent of type, set result[unit] to (-1 * exponent).

3. Return result.

Note: Types form a semi-group under both 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.

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

For example, the value

in a stylesheet will be represented by a

with its

attribute set to

and its

attribute set to

.

Similarly, the value 10 in a stylesheet will be represented by a CSSUnitValue with its value attribute set to 10 and its unit attribute set to "number".

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

The

constructor must, when called, perform the following steps:

1. If creating a type from unit returns failure, throw a TypeError and abort this algorithm.

2. Return a new CSSUnitValue with its value internal slot set to value and its unit set to unit.

To

(

,

), return a new

object with its

internal slot set to

, and its

internal slot set to

.

For example, creating a

from

creates an object equivalent to

.

Note: This is a spec-internal algorithm, meant simply to make it easier to create unit values in algorithms when needed.

To

to a unit

, perform the following steps:

1. Let old unit be the value of this’s unit internal slot, and old value be the value of this’s value internal slot.

2. If old unit and unit are not compatible units, return failure.

3. Return a new CSSUnitValue whose unit internal slot is set to unit, and whose value internal slot is set to old value multiplied by the conversation ratio between old unit and unit.

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.

For example, the CSS value

will be represented by a

like

.

A more complex expression, like calc(1em + 5px * 2), will be represented by a nested structure like CSSMathSum(CSS.em(1), CSSMathProduct(CSS.px(5), 2)).

[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

constructor must, when called, perform the following steps:

1. Replace lower, value, and upper with the result of rectifying a numberish value for each.

2. Let type be the result of adding the types of lower, value, and upper. If type is failure, throw a TypeError.

3. Return a new CSSMathClamp whose lower, value, and upper internal slots are set to lower, value, and upper, respectively.

The

constructor must, when called, perform the following steps:

1. Replace arg with the result of rectifying a numberish value for arg.

2. Return a new CSSMathNegate whose value internal slot is set to arg.

The CSSMathInvert(arg) constructor is defined identically to the above, except that in the last step it returns a new CSSMathInvert object.

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.

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);
};

All of the above methods must, when called with a double

, return a new

whose

internal slot is set to

and whose

internal slot is set to the name of the method as defined here.

Note: The unit used does not depend on the current name of the function, if it’s stored in another variable; let foo = CSS.px; let val = foo(5); does not return a {value: 5, unit: "foo"} CSSUnitValue. The above talk about names is just a shorthand to avoid defining the unit individually for all ~60 functions.

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.

For example, the CSS Speech spec

defines two additional units, the decibel

and semitone

. No current browser implementation supports these or has plans to, so they’re not included in the above list, but if an implementation

support the Speec spec, it must also expose

and

methods.

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

method of a

must, when called, perform the following steps:

1. Let matrix be a new DOMMatrix, initialized to the identity matrix, with its is2D internal slot set to true.

2. For each func in this’s values to iterate over:

   1. Let funcMatrix be the DOMMatrix returned by calling toMatrix() on func.

   2. Set matrix to the result of multiplying matrix and the matrix represented by funcMatrix.

3. Return matrix.

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.

The

of a

are the integers greater than or equal to 0, and less than the

of

’s

internal slot.

To determine the value of an indexed property of a CSSTransformValue this and an index n, let values be this’s [[values]] internal slot, and return values[n].

To set the value of an existing indexed property of a CSSTransformValue this, an index n, and a value new value, let values be this’s [[values]] internal slot, and set values[n] to new value.

To set the value of a new indexed property of a CSSTransformValue this, an index n, and a value new value, let values be this’s [[values]] internal slot. If n is not equal to the size of values, throw a RangeError. Otherwise, append new value to values.

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;
};

The

attribute indicates whether the transform is 2D or 3D. When it’s

, the attributes of the transform that are relevant to 3D transforms (such as the

attribute) simply have no effect on the transform they represent.

Note: This affects the serialization of the object, and concepts such as the object’s "equivalent 4x4 matrix".

For legacy reasons, 2D and 3D transforms are distinct, even if they have identical effects; a translateZ(0px) has observable effects on a page, even tho it’s defined to be an identity transform, as the UA activates some 3D-based optimizations for the element.

There were several possible ways to reflect this—​nullable 3D-related attributes, separate 2D and 3D interfaces, etc—​but we chose the current design (an author-flippable switch that dictates the behavior) because it allows authors to, in most circumstances, operate on transforms without having to care whether they’re 2D or 3D, but also prevents "accidentally" flipping a 2D transform into becoming 3D.

The

constructor must, when invoked, perform the following steps:

1. If x or y don’t match <length-percentage>, throw a TypeError.

2. If z was passed, but doesn’t match <length>, throw a TypeError.

3. Let this be a new CSSTranslate object, with its x and y internal slots set to x and y.

4. If z was passed, set this’s z internal slot to z, and set this’s is2D internal slot to false.

5. If z was not passed, set this’s z internal slot to a new unit value of (0, "px"), and set this’s is2D internal slot to true.

6. Return this.

The

constructor must, when invoked, perform the following steps:

1. If angle doesn’t match <angle>, throw a TypeError.

2. Let x, y, and z be replaced by the result of rectifying a numberish value.

3. If x, y, or z don’t match <number>, throw a TypeError.

4. Return a new CSSRotate with its angle internal slot set to angle, its x, y, z internal slots set to x, y, and z, and its is2D internal slot set to false.

The

,

, and

attributes must, on setting to a new value

,

from

and set the corresponding internal slot to the result of that.

The

constructor must, when invoked, perform the following steps:

1. Let x, y, and z (if passed) be replaced by the result of rectifying a numberish value.

2. If x, y, or z (if passed) don’t match <number>, throw a TypeError.

3. Let this be a new CSSScale object, with its x and y internal slots set to x and y.

4. If z was passed, set this’s z internal slot to z, and set this’s is2D internal slot to false.

5. If z was not passed, set this’s z internal slot to a new unit value of (1, "number"), and set this’s is2D internal slot to true.

6. Return this.

The

,

, and

attributes must, on setting to a new value

,

from

and set the corresponding internal slot to the result of that.

The

constructor must, when invoked, perform the following steps:

1. If ax or ay do not match <angle>, throw a TypeError.

2. Return a new CSSSkew object with its ax and ay internal slots set to ax and ay, and its is2D internal slot set to true.

The

constructor must, when invoked, perform the following steps:

1. If ax does not match <angle>, throw a TypeError.

2. Return a new CSSSkewX object with its ax internal slot set to ax, and its is2D internal slot set to true.

The

constructor must, when invoked, perform the following steps:

1. If ay does not match <angle>, throw a TypeError.

2. Return a new CSSSkewY object with its ay internal slot set to ay, and its is2D internal slot set to true.

The

attribute of a

object must, on setting, do nothing.

Note: perspective() functions always represent 3D transforms.

The

constructor must, when invoked, perform the following steps:

1. Let this be a new CSSMatrixComponent object with its matrix internal slot set to matrix.

2. If options was passed and has a is2D field, set this’s is2D internal slot to the value of that field.

3. Otherwise, set this’s is2D internal slot to the value of matrix’s is2D internal slot.

4. Return this.

Each

can correspond to one of a number of underlying transform functions. For example, a

with an x value of

and y & z values of

could represent any of the following:

• translate(10px)

• translate(10px, 0)

• translateX(10px)

• translate3d(10px, 0, 0)

When stringified, however, it will always print out either translate(10px, 0px) or translate3d(10px, 0px, 0px), depending on whether its is2D internal slot is true or false, respectively.

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

For example, relative URLs are resolved against the URL of the stylesheet they’re within (or the document’s URL, if they’re specified in a

element or

attribute). This resolution doesn’t happen eagerly at parse-time, but at some currently-unspecified point during value computation.

Thus, if an element’s style is set to background-image: url(foo);, and that specified value is extracted via the Typed OM and then set on an element in a different document, both the source and destination elements will resolve the URL differently, as they provide different base URLs.

On the other hand, if the extracted value was a computed value (from computedStyleMap()), then it would already be resolved to an absolute URL, and thus would act identically no matter where you later set it to. (Unless it was a fragment URL, which CSS treats differently and never fully resolves, so it always resolves against the current document.)

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);
};

The

method, when called, must perform the following steps:

1. Parse cssText as a <color> and let result be the result. If result is a syntax error, throw a SyntaxError and abort this algorithm.

2. Reify a color value from result, and return the result.

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.

The

constructor must, when invoked, perform the following steps:

1. Let r, g, b be replaced by the result of rectifying a CSSColorRGBComp from each of them. Let alpha be replaced by the result of rectifying a CSSColorPercent from it.

2. Return a new CSSRGB with its r, g, b, and alpha internal slots set to r, g, b, and alpha.

The

,

, and

attributes of a

value must, on setting to a new value

,

from

and set the corresponding internal slot to the result of that.

The

attribute of a

value must, on setting to a new value

,

from

and set the corresponding internal slot to the result of that.

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

The

constructor must, when invoked, perform the following steps:

1. Let h be replaced by the result of rectifying a CSSColorAngle from it. Let s, l, and alpha be replaced by the result of rectifying a CSSColorPercent from each of them.

2. Return a new CSSHSL with its h, s, l, and alpha internal slots set to h, s, l, and alpha.

The

attribute of a

value must, on setting to a new value

,

from

and set the corresponding internal slot to the result of that.

The

,

, and

attributes of a

value must, on setting to a new value

,

from

and set the corresponding internal slot to the result of that.

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

The

constructor must, when invoked, perform the following steps:

1. Let h be replaced by the result of rectifying a CSSColorAngle from it. Let w, b, and alpha be replaced by the result of rectifying a CSSColorPercent from each of them.

2. Return a new CSSHWB with its h, w, b, and alpha internal slots set to h, w, b, and alpha.

The

attribute of a

value must, on setting to a new value

,

from

and set the corresponding internal slot to the result of that.

The

,

, and

attributes of a

value must, on setting to a new value

,

from

and set the corresponding internal slot to the result of that.

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

The

constructor must, when invoked, perform the following steps:

1. Let a and b be replaced by the result of rectifying a CSSColorNumber from each of them. Let l and alpha be replaced by the result of rectifying a CSSColorPercent from each of them.

2. Return a new CSSLab with its l, a, b, and alpha internal slots set to l, a, b, and alpha.

The

and

attributes of a

value must, on setting to a new value

,

from

and set the corresponding internal slot to the result of that.

The

, and

attributes of a

value must, on setting to a new value

,

from

and set the corresponding internal slot to the result of that.

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

The

constructor must, when invoked, perform the following steps:

1. Let h be replaced by the result of rectifying a CSSColorAngle from it. Let l, c, and alpha be replaced by the result of rectifying a CSSColorPercent from each of them.

2. Return a new CSSLCH with its l, c, h, and alpha internal slots set to l, c, h, and alpha.

The

attribute of a

value must, on setting to a new value

,

from

and set the corresponding internal slot to the result of that.

The

,

, and

attributes of a

value must, on setting to a new value

,

from

and set the corresponding internal slot to the result of that.

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

The

constructor must, when invoked, perform the following steps:

1. Let a and b be replaced by the result of rectifying a CSSColorNumber from each of them. Let l and alpha be replaced by the result of rectifying a CSSColorPercent from each of them.

2. Return a new CSSOKLab with its l, a, b, and alpha internal slots set to l, a, b, and alpha.

The

and

attributes of a

value must, on setting to a new value

,

from

and set the corresponding internal slot to the result of that.

The

, and

attributes of a

value must, on setting to a new value

,

from

and set the corresponding internal slot to the result of that.

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

The

constructor must, when invoked, perform the following steps:

1. Let h be replaced by the result of rectifying a CSSColorAngle from it. Let l, c, and alpha be replaced by the result of rectifying a CSSColorPercent from each of them.

2. Return a new CSSOKLCH with its l, c, h, and alpha internal slots set to l, c, h, and alpha.

The

attribute of a

value must, on setting to a new value

,

from

and set the corresponding internal slot to the result of that.

The

,

, and

attributes of a

value must, on setting to a new value

,

from

and set the corresponding internal slot to the result of that.

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

The

attribute of a

value must, on setting to a new value

,

from

and set the corresponding internal slot to the result of that.

The

attribute of a

value must, on setting to a new value

,

from

and set the corresponding internal slot to the result of that.

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.

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

Not all internal representations are simple enough to be reified with the current set of CSSStyleValue subclasses. When this is the case, the property is reified as a CSSStyleValue for a particular property, ensuring that it can be used as a value for that property, and nothing else.

Regardless of what the property’s grammar is otherwise, a property value with an un-substituted var() reference is represented as a list of component values, which becomes a CSSUnparsedValue in the Typed OM.

var() references become CSSVariableReferenceValues in the Typed OM.

CSS identifiers become CSSKeywordValues in the Typed OM.

CSS <number>, <percentage>, and <dimension> values become CSSNumericValues in the Typed OM.

To

:

1. If num is a math function, reify a math expression from num and return the result.

2. If num is the unitless value 0 and num is a <dimension>, return a new CSSUnitValue with its value internal slot set to 0, and its unit internal slot set to "px".

3. Return a new CSSUnitValue with its value internal slot set to the numeric value of num, and its unit internal slot set to "number" if num is a <number>, "percent" if num is a <percentage>, and num’s unit if num is a <dimension>.

   If the value being reified is a computed value, the unit used must be the appropriate canonical unit for the value’s type, with the numeric value scaled accordingly.

   For example, if an element has

   style = "width: 1in;"

   ,

   el . attributeStyleMap . get ( 'width' )

   will return

   CSS . in ( 1 )

   , but

   el . computedStyleMap . get ( 'width' )

   will return

   CSS . px ( 96 )

   , as

   px

   is the

   canonical unit

   for absolute lengths.

To

:

1. If num is a min() or max() expression:

   1. Let values be the result of reifying the arguments to the expression, treating each argument as if it were the contents of a calc() expression.

   2. Return a new CSSMathMin or CSSMathMax object, respectively, with its values internal slot set to values.

2. Assert: Otherwise, num is a calc().

3. Turn num’s argument into an expression tree using standard PEMDAS precedence rules, with the following exceptions/clarification:

   • Treat subtraction as instead being addition, with the RHS argument instead wrapped in a special "negate" node.

   • Treat division as instead being multiplication, with the RHS argument instead wrapped in a special "invert" node.

   • Addition and multiplication are N-ary; each node can have any number of arguments.

   • If an expression has only a single value in it, and no operation, treat it as an addition node with the single argument.

4. Recursively transform the expression tree into objects, as follows:

   addition node

   becomes a new CSSMathSum object, with its values internal slot set to its list of arguments

   multiplication node

   becomes a new CSSMathProduct object, with its values internal slot set to its list of arguments

   negate node

   becomes a new CSSMathNegate object, with its value internal slot set to its argument

   invert node

   becomes a new CSSMathInvert object, with its value internal slot set to its argument

   leaf node

   reified as appropriate

For example,

produces the structure:

CSSMathSum(
    CSS.px(1),
    CSSMathNegate(
        CSSMathProduct(
            2,
            CSS.em(3)
        )
    )
)

Note that addition and multiplication are N-ary, so

produces the structure:

CSSMathSum(
    CSS.px(1),
    CSS.px(2),
    CSS.px(3)
)

but calc(calc(1px + 2px) + 3px) produces the structure:

CSSMathSum(
    CSSMathSum(
        CSS.px(1),
        CSS.px(2)
    ),
    CSS.px(3)
)

Note: The value computation process may transform different units into identical ones, simplifying the resulting expression. For example, calc(1px + 2em) as a specified value results in a CSSMathSum(CSS.px(1), CSS.em(2)), but as a computed value will give CSS.px(33) or similar (depending on the value of an em in that context).

CSS <color> values become either CSSColorValues (if they can be resolved to an absolute color) or generic CSSStyleValues (otherwise).

To

:

1. If val is a <hex-color>, an rgb() function, or an rgba() function, then return a new CSSRGB object with its r, g, b, and alpha internal slots set to the reification of its red, green, blue, and alpha components, respectively.

2. If val is an hsl() or hsla() function, then return a new CSSHSL object with its h, s, l, and alpha internal slots set to the reification of its hue angle, saturation, lightness, and alpha components, respectively.

3. If val is an hwb() function, then return a new CSSHWB object with its h, w, b, and alpha internal slots set to the reification of its hue angle, whiteness, blackness, and alpha components, respectively.

4. If val is an lch() function, then return a new CSSLCH object with its l, c, h, and alpha internal slots set to the reification of its lightness, chroma, hue angle, and alpha components, respectively.

5. If val is an lab() function, then return a new CSSLab object with its l, a, b, and alpha internal slots set to the reification of its lightness, a, b, and alpha components, respectively.

6. If val is a color() function, then return a new CSSColor object with its colorSpace internal slot set to the result of reifying an identifier from val’s color space, its channels internal slot’s backing list set to the result of reifying val’s list of non-alpha components, and alpha internal slot set to the result of reifying val’s alpha component.

7. If val is a <named-color> or the keyword transparent, then return a new CSSRGB object with its r, g, b, and alpha internal slots set to the reification of its red, green, blue, and alpha components, respectively.

8. If val is any other color keyword, return the result of reifying an identifier from val.

CSS <transform-list> values become CSSTransformValues in the Typed OM, while CSS <transform-function> values become CSSTransformComponents.

To

, perform the appropriate set of steps below, based on

:

matrix()

matrix3d()

1. Return a new CSSMatrixComponent object, whose matrix internal slot is set to a 4x4 matrix representing the same information as func, and whose is2D internal slot is true if func is matrix(), and false otherwise.

translate()

translateX()

translateY()

translate3d()

translateZ()

1. Return a new CSSTranslate object, whose x, y, and z internal slots are set to the reification of the specified x/y/z offsets, or the reification of 0px if not specified in func, and whose is2D internal slot is true if func is translate(), translateX(), or translateY(), and false otherwise.

scale()

scaleX()

scaleY()

scale3d()

scaleZ()

1. Return a new CSSScale object, whose x, y, and z internal slots are set to the specified x/y/z scales, or to 1 if not specified in func and whose is2D internal slot is true if func is scale(), scaleX(), or scaleY(), and false otherwise.

rotate()

rotate3d()

rotateX()

rotateY()

rotateZ()

1. Return a new CSSRotate object, whose angle internal slot is set to the reification of the specified angle, and whose x, y, and z internal slots are set to the specified rotation axis coordinates, or the implicit axis coordinates if not specified in func and whose is2D internal slot is true if func is rotate(), and false otherwise.

skew()

1. Return a new CSSSkew object, whose ax and ay internal slots are set to the reification of the specified x and y angles, or the reification of 0deg if not specified in func, and whose is2D internal slot is true.

skewX()

1. Return a new CSSSkewX object, whose ax internal slot is set to the reification of the specified x angle, or the reification of 0deg if not specified in func, and whose is2D internal slot is true.

skewY()

1. Return a new CSSSkewY object, whose ay internal slot is set to the reification of the specified y angle, or the reification of 0deg if not specified in func, and whose is2D internal slot is true.

perspective()

1. Return a new CSSPerspective object, whose length internal slot is set to the reification of the specified length (see reify a numeric value if it is a length, and reify an identifier if it is the keyword none) and whose is2D internal slot is false.

The way that a CSSStyleValue serializes is dependent on how the value was constructed.

if the value was constructed from a USVString

the serialization is the USVString from which the value was constructed.

otherwise, if the value was constructed using an IDL constructor

the serialization is specified in the sections below.

otherwise, if the value was extracted from the CSSOM

the serialization is specified in § 6.7 Serialization from CSSOM Values below.

For example:

var length1 = CSSNumericValue.parse("42.0px");
length1.toString(); // "42.0px"

var length2 = CSS.px(42.0);
length2.toString(); // "42px";

element.style.width = "42.0px";
var length3 = element.attributeStyleMap.get('width');
length3.toString(); // "42px";

To

:

1. Let s initally be "var(".

2. Append this’s variable internal slot to s.

3. If this’s fallback internal slot is not null, append ", " to s, then serialize the fallback internal slot and append it to s.

4. Append ")" to s and return s.

To

, with optional arguments

, a numeric value, and

, a numeric value:

1. Let value and unit be this‘s value and unit internal slots.

2. Set s to the result of serializing a <number> from value, per CSSOM § 6.7.2 Serializing CSS Values.

3. If unit is:

   "number"

   Do nothing.

   "percent"

   Append "%" to s.

   anything else

   Append unit to s.

4. If minimum was passed and this is less than minimum, or if maximum was passed and this is greater than maximum, or either minimum and/or maximum were passed and the relative size of this and minimum/maximum can’t be determined with the available information at this time, prepend "calc(" to s, then append ")" to s.

5. Return s.

To

, with optional arguments

, a boolean (defaulting to false if unspecified),

, a boolean (defaulting to false if unspecified), perform the following steps.

1. Let s initially be the empty string.

2. If this is a CSSMathMin or CSSMathMax:

   1. Append "min(" or "max(" to s, as appropriate.

   2. For each arg in this’s values internal slot, serialize arg with nested and paren-less both true, and append the result to s, appending a ", " between successive values.

   3. Append ")" to s and return s.

3. Otherwise, if this is a CSSMathSum:

   1. If paren-less is true, continue to the next step; otherwise, if nested is true, append "(" to s; otherwise, append "calc(" to s.

   2. Serialize the first item in this’s values internal slot with nested set to true, and append the result to s.

   3. For each arg in this’s values internal slot beyond the first:

      1. If arg is a CSSMathNegate, append " - " to s, then serialize arg’s value internal slot with nested set to true, and append the result to s.

      2. Otherwise, append " + " to s, then serialize arg with nested set to true, and append the result to s.

   4. If paren-less is false, append ")" to s,

   5. Return s.

4. Otherwise, if this is a CSSMathNegate:

   1. If paren-less is true, continue to the next step; otherwise, if nested is true, append "(" to s; otherwise, append "calc(" to s.

   2. Append "-" to s.

   3. Serialize this’s value internal slot with nested set to true, and append the result to s.

   4. If paren-less is false, append ")" to s,

   5. Return s.

5. Otherwise, if this is a CSSMathProduct:

   1. If paren-less is true, continue to the next step; otherwise, if nested is true, append "(" to s; otherwise, append "calc(" to s.

   2. Serialize the first item in this’s values internal slot with nested set to true, and append the result to s.

   3. For each arg in this’s values internal slot beyond the first:

      1. If arg is a CSSMathInvert, append " / " to s, then serialize arg’s value internal slot with nested set to true, and append the result to s.

      2. Otherwise, append " * " to s, then serialize arg with nested set to true, and append the result to s.

   4. If paren-less is false, append ")" to s,

   5. Return s.

6. Otherwise, if this is a CSSMathInvert:

   1. If paren-less is true, continue to the next step; otherwise, if nested is true, append "(" to s; otherwise, append "calc(" to s.

   2. Append "1 / " to s.

   3. Serialize this’s value internal slot with nested set to true, and append the result to s.

   4. If paren-less is false, append ")" to s,

   5. Return s.

To

:

1. Let s initially be the empty string.

2. If this’s is2D internal slot is false:

   1. Append "translate3d(" to s.

   2. Serialize this’s x internal slot, and append it to s.

   3. Append ", " to s.

   4. Serialize this’s y internal slot, and append it to s.

   5. Append ", " to s.

   6. Serialize this’s z internal slot, and append it to s.

   7. Append ")" to s, and return s.

3. Otherwise:

   1. Append "translate(" to s.

   2. Serialize this’s x internal slot, and append it to s.

   3. Append ", " to s.

   4. Serialize this’s y internal slot, and append it to s.

   5. Append ")" to s, and return s.

To

:

1. Let s initially be the empty string.

2. If this’s is2D internal slot is false:

   1. Append "rotate3d(" to s.

   2. Serialize this’s x internal slot, and append it to s.

   3. Append ", " to s.

   4. Serialize this’s y internal slot, and append it to s.

   5. Append ", " to s.

   6. Serialize this’s z internal slot, and append it to s.

   7. Append "," to s.

   8. Serialize this’s angle internal slot, and append it to s.

   9. Append ")" to s, and return s.

3. Otherwise:

   1. Append "rotate(" to s.

   2. Serialize this’s angle internal slot, and append it to s.

   3. Append ")" to s, and return s.

To

:

1. Let s initially be the empty string.

2. If this’s is2D internal slot is false:

   1. Append "scale3d(" to s.

   2. Serialize this’s x internal slot, and append it to s.

   3. Append ", " to s.

   4. Serialize this’s y internal slot, and append it to s.

   5. Append ", " to s.

   6. Serialize this’s z internal slot, and append it to s.

   7. Append ")" to s, and return s.

3. Otherwise:

   1. Append "scale(" to s.

   2. Serialize this’s x internal slot, and append it to s.

   3. If this’s x and y internal slots are equal numeric values, append ")" to s and return s.

   4. Otherwise, append ", " to s.

   5. Serialize this’s y internal slot, and append it to s.

   6. Append ")" to s, and return s.

To

:

1. Let s initially be "skew(".

2. Serialize this’s ax internal slot, and append it to s.

3. If this’s ay internal slot is a CSSUnitValue with a value of 0, then append ")" to s and return s.

4. Otherwise, append ", " to s.

5. Serialize this’s ay internal slot, and append it to s.

6. Append ")" to s, and return s.

To

:

1. Let s initially be "skewX(".

2. Serialize this’s ax internal slot, and append it to s.

3. Append ")" to s, and return s.

To

:

1. Let s initially be "skewY(".

2. Serialize this’s ay internal slot, and append it to s.

3. Append ")" to s, and return s.

To

:

1. Let s initially be "perspective(".

2. Serialize this’s length internal slot, with a minimum of 0px, and append it to s.

3. Append ")" to s, and return s.

CSSStyleValue objects produced by the user agent from values in the CSSOM, rather than directly constructed by the author, are serialized according to the following rules, depending on the property they came from:

background-color

1. If the value is the currentcolor keyword, return "currentcolor".

2. Otherwise, return the result of serializing the <color> value.

border-color

1. If the value is the currentcolor keyword, return "currentcolor".

2. Otherwise, return the result of serializing the <color> value.

border-image

1. Let values initially be the empty list.

2. If border-image-source is not none, serialize border-image-source and append it to values.

3. If border-image-slice does not specify 100% for all sides and omits the fill keyword, serialize border-image-slice and append it to values.

4. If border-image-width does not specify 1 for all sides, append "/ " (U+002F FORWARD SLASH followed by U+0020 SPACE) to the result of serializing border-image-width and append it to values.

5. If border-image-outset does not specify 0 for all sides:

   1. If the previous border-image-width step did not append anything to values, let prefix be "// " (two U+002F FORWARD SLASH characters followed by U+0020 SPACE); otherwise let prefix be "/ " (U+002F FORWARD SLASH followed by U+0020 SPACE)

   2. Append prefix to the result of serializing border-image-outset and append it to values.

6. If border-image-repeat is not stretch in both axises, serialize border-image-repeat and append it to values.

7. If values is empty, append "none" to values.

8. Return the result of concatenating all the items in values, separated by " " (U+0020 SPACE).

bottom

1. If the value is the auto keyword, return "auto".

2. If the value is of type <length>, return the result of serializing the <length> value.

3. Otherwise, return the result of serializing the <percentage> value.

color

1. If the value is the currentcolor keyword, return "currentcolor".

2. Otherwise, return the result of serializing the <color> value.

left

1. If the value is the auto keyword, return "auto".

2. If the value is of type <length>, return the result of serializing the <length> value.

3. Otherwise, return the result of serializing the <percentage> value.

opacity

1. If the value is of type <number>, return the result of serializing the <number> value.

2. Otherwise, return the result of serializing the <percentage> value.

right

1. If the value is the auto keyword, return "auto".

2. If the value is of type <length>, return the result of serializing the <length> value.

3. Otherwise, return the result of serializing the <percentage> value.

top

1. If the value is the auto keyword, return "auto".

2. If the value is of type <length>, return the result of serializing the <length> value.

3. Otherwise, return the result of serializing the <percentage> value.

There are no known security issues introduced by these features.

There are no known privacy issues introduced by these features.

• Fixed the type match algorithm to refer to the percent hint more abstractly.

• Clarified that "invert a type" needs to preserve the percent hint.

• Added missing font units to CSS numeric factory. (#1107)

• Specified that the list of unit shorthand methods must be reduced or expanded to match the implementation’s support.

• Used undefined union value for "StylePropertyMapReadOnly.get()". (#1087)

• Removed .to() and the CSSColorValue.colorSpace, as conversion isn’t really in Typed OM’s remit. (#1070)

• Added min/max to "serialize a CSSUnitValue", and pass it when serializing the argument of CSSPerspective. (#1069)

• Changed reifying from "a CSSStyleValue" to "an identifier". (#1068)

• Added factory functions for new viewport/container units. (#1067)

• Added type checking to CSSNumericValue.parse. (#1065)

• Removed CSSDeviceCMYK, add CSSOKLab and CSSOKLCH, made all the color classes accept the "none" keyword.

• Defined how to reify a color value.

• Allowed "new unit value" to link to "create a CSSUnitValue from a pair" since that phrasing is used everywhere already.

• Added support for perspective(none) to CSSPerspective. (#1053)

• Fixed accidental clash of CSSClampValue.min/max with CSSNumericValue.min/max. (#855)

• Simplified the Abstract

• Removed CSSGray and associated spec text, since Color 4 dropped gray() some time ago. (#1027)

• Moved .colorSpace up to the CSSColorValue superclass. Swapped the .to*() color-conversion functions for a generic .to(colorSpace) method. (#1036)

• Added device-cmyk() support.

• Fix the OM for CSSColor to match recent simplifications.

• Specified which color function each CSSColorValue subclass represents, and added CSSGray.

• Added missing parentheses for union. (#1016)

• Added some explanatory text about the makeup of a "type".

• Aligned with Web IDL specification. (#965 and #1006 )

• Fixed algorithm nesting.

• Added default dictionary value, required by update to WebIDL. (#936)

• Switched term from "underlying value" to :internal representation", as Web Animations already uses "underlying value" for something different.

• Clarified that reifying as a CSSSTyleValue requires a property.

• Defined reification behavior for registered custom properties (#886)

• Used partial interface mixin ElementCSSInlineStyle (#853)

• Used the correct name from WebIDL for indexed property getter.

• Exported a number of terms for use in other specifications

• Droped CSSPositionValue from this level.

• Added CSSMathClamp for the "clamp()"" function.

• Made the "match a grammar" algorithm a little more precise.

• Reifying computed numeric values uses the canonical unit. (#725)

• Added note about new unit types. (#734)

• Used correct unit "percent", not "percentage" (#761).

• Added note about custom property parsing

• Moved Naina Raisinghani to Former Editor

• Added an 'invert a type' operation.

• Exported several numeric-type terms, so CSS Values & Units can refer to them.

• Moved Shane Stephens to Former Editor

Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification.

All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. [RFC2119]

Examples in this specification are introduced with the words “for example” or are set apart from the normative text with class="example", like this:

Informative notes begin with the word “Note” and are set apart from the normative text with class="note", like this:

Note, this is an informative note.

Advisements are normative sections styled to evoke special attention and are set apart from other normative text with <strong class="advisement">, like this: UAs MUST provide an accessible alternative.

A style sheet is conformant to this specification if all of its statements that use syntax defined in this module are valid according to the generic CSS grammar and the individual grammars of each feature defined in this module.

A renderer is conformant to this specification if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the features defined by this specification by parsing them correctly and rendering the document accordingly. However, the inability of a UA to correctly render a document due to limitations of the device does not make the UA non-conformant. (For example, a UA is not required to render color on a monochrome monitor.)

An authoring tool is conformant to this specification if it writes style sheets that are syntactically correct according to the generic CSS grammar and the individual grammars of each feature in this module, and meet all other conformance requirements of style sheets as described in this module.

So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and ignore as appropriate) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support. In particular, user agents must not selectively ignore unsupported component values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored.

Once a specification reaches the Candidate Recommendation stage, non-experimental implementations are possible, and implementors should release an unprefixed implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec.

To establish and maintain the interoperability of CSS across implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the testcases used for that implementation report) to the W3C before releasing an unprefixed implementation of any CSS features. Testcases submitted to W3C are subject to review and correction by the CSS Working Group.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4