CSS 类型化对象模型第 1 级

1. 介绍

CSS 样式表被解析为抽象的 UA 内部数据结构，称为 CSS 的内部表示，各种规范算法会对其进行操作。

内部表示无法直接操作，因为它们依赖于实现；UA 必须同意如何解释内部表示，但这些表示本身故意未定义，以便 UA 可以以最有效的方式存储和操作 CSS。

以前，唯一的读取或写入内部表示的方式是通过字符串——样式表或 CSSOM 允许作者将字符串发送给 UA，这些字符串被解析为内部表示，并且 CSSOM 允许作者请求 UA 将其内部表示重新序列化为字符串。

本规范引入了一种与内部表示交互的新方法，通过使用特殊的 JS 对象表示这些内部表示，使其比字符串解析/拼接更易于操作和理解。这种新方法对作者来说更简单（例如，数值通过实际的 JS 数字反映，并为其定义了单位感知的数学运算），在许多情况下性能更高，因为值可以直接操作，然后以较低的成本重新转换为内部表示，而无需构建和解析 CSS 字符串。

2. `CSSStyleValue` 对象

[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 对象是通过 Typed OM API 访问的所有 CSS 值的基类。

CSSStyleValue 对象的字符串化行为在§ 6 CSSStyleValue 序列化中定义。

parse(property, cssText)方法，当调用时，必须解析 CSSStyleValue，使用属性property、 cssTextcssText，并将parseMultiple设置为false，并返回结果。

parseAll(property, cssText)方法，当调用时，必须解析 CSSStyleValue，使用属性property、cssTextcssText，并将parseMultiple设置为true，并返回结果。

要解析 CSSStyleValue，给定字符串 property、字符串 cssText，以及parseMultiple标志，运行以下步骤：

如果property不是自定义属性名称字符串，则将property设置为其 ASCII 小写形式。
如果property不是有效的 CSS 属性，抛出一个TypeError。
根据property的语法，尝试解析 cssText。如果失败，抛出一个TypeError。否则，令whole value为解析结果。

自定义属性在通过 JavaScript 修改时的行为与在样式表中定义时不同。
当自定义属性在样式表中以无效语法定义时，该值将被记录为“未设置”，以避免在注册自定义属性时重新解析每个样式表。

相反，当通过 JavaScript API 修改自定义属性时，任何解析错误都会通过TypeError传播到编程环境中。这允许开发人员更及时地反馈错误。
根据property，将整个值划分为迭代，并将values作为结果。
对于 values中的每个value，将其替换为实化 value 对于property的结果。

定义全局。
如果parseMultiple为 false，返回values[0]。否则，返回values。

要将整个值划分为迭代，针对属性property的 CSS 值whole value，执行以下步骤：

如果property是单值属性，返回包含whole value的列表。
否则，将whole value根据property适当划分为单个迭代，并返回包含按顺序排列的迭代的列表。

如何将列表值属性划分为迭代，目前故意未定义并且含糊不清。通常，只需将其按顶级逗号分割（对应于语法中的顶级<foo>#术语），但某些遗留属性（如counter-reset）不会用逗号分隔其迭代。

预计未来会严格定义，但目前明确是一个“你懂我们意思”的事。

2.1. 直接`CSSStyleValue`对象

尚未能被更专业的CSSStyleValue子类直接支持的值，将表示为CSSStyleValue对象。

每个CSSStyleValue对象通过其[[associatedProperty]]内部槽与特定的 CSS 属性相关联，并且与特定的不可变的内部表示相关联。这些对象被称为“表示”它们内部表示的特定内容，当它们重新设置到同一属性的样式表中时，它们会再现等效的内部表示。

这些CSSStyleValue对象仅对它们所解析的属性有效。这通过CSSStyleValue对象的[[associatedProperty]]内部槽来强制执行，该槽默认为null，或为指定属性名称的字符串。

注意：此槽由StylePropertyMap.set()/append()检查。

3. `StylePropertyMap`

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

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

StylePropertyMap是以对象形式表示CSS声明块的另一种方式（当通过[cssom]获取时，CSS声明块则表示为CSSStyleDeclaration对象。）

一个StylePropertyMapReadOnly对象具有一个[[declarations]]内部槽，它是一个映射，反映了CSS声明块的声明。

注意：声明尚未使用[infra]术语定义，但在本规范中，它被假定为一个映射，其键是字符串（代表属性名称），其值是这些属性的内部表示。

除非另有说明，[[declarations]]内部槽的初始排序基于每个条目的键：

标准化属性（不是自定义属性或供应商前缀属性），ASCII小写化，然后按代码点递增顺序排序。
供应商前缀/实验性属性（名称以单破折号开头的属性），ASCII小写化，然后按代码点递增顺序排序。
自定义属性，按代码点递增顺序排序。（这些属性从不小写；它们会完全保留书写时的形式。）

获取用于StylePropertyMapReadOnly对象this的要迭代的值对如下：

让declarations为this的[[declarations]]槽。
让value pairs为一个空的列表。
对于 declarations中的每个prop → value：
1. 让iterations为将value划分为迭代的结果。
2. 实化iterations中的每个项，并将objects设为结果。
3. 将prop/objects附加到value pairs中。
返回value pairs。

某些 CSS 属性是列表值属性，例如background-image或animation; 它们的值是一个平行语法项的列表，几乎总是以逗号分隔（唯一的例外是某些遗留属性，例如counter-reset），表示多个以相同方式解释的不同“值”。其他属性，例如color，是单值属性；它们只接受一个（可能是复杂的）值。

w3c/css-houdini-drafts/644 [css-typed-om]明确定义哪些属性是列表值，哪些不是，可能在附录中。

有多个 CSS 属性的例子从单值过渡到列表值。为了确保在某个属性是单值时编写的代码不会在它未来变为列表值时出错， StylePropertyMap 是一个多重映射；它为每个键存储列表值，但允许您像只有单个值一样与它进行交互。

这意味着在StylePropertyMap中某个属性的多个值并不代表该属性值的多次定义；相反，它们表示单个属性值中的多个以逗号分隔的子值，就像background-image属性中的每一层。

get(property)方法，在StylePropertyMap this上调用时，必须执行以下步骤：

如果property不是自定义属性名称字符串，将property设置为property的ASCII 小写。
如果property不是有效的 CSS 属性，则抛出TypeError。
让props成为this的[[declarations]] 内部插槽的值。
如果props[property] 存在，则将其细分为迭代 props[property]，然后实现结果的第一个项并返回它。

否则，返回undefined。

定义全局。

getAll(property)方法，在StylePropertyMap this上调用时，必须执行以下步骤：

如果property不是自定义属性名称字符串，将property设置为property的ASCII 小写。
如果property不是有效的 CSS 属性，则抛出TypeError。
让props成为this的[[declarations]] 内部插槽的值。
如果props[property] 存在，则将其细分为迭代 props[property]，然后实现结果的每个项，并返回列表。

否则，返回一个空列表。

定义全局。

has(property)方法，在StylePropertyMap this上调用时，必须执行以下步骤：

如果property不是自定义属性名称字符串，将property设置为property的ASCII 小写。
如果property不是有效的 CSS 属性，则抛出TypeError。
让props成为this的[[declarations]] 内部插槽的值。
如果props[property] 存在，返回true。否则，返回false。

size 属性，在从StylePropertyMap this获取时，必须执行以下步骤：

返回this的大小，即[[declarations]] 内部插槽的值。

set(property, ...values)方法，在StylePropertyMap this上调用时，必须执行以下步骤：

如果property不是自定义属性名称字符串，将property设置为property的ASCII 小写。
如果property不是有效的 CSS 属性，则抛出TypeError。
如果property是单值属性并且values有多个项，则抛出TypeError。
如果values中的任何项具有非空[[associatedProperty]] 内部槽，并且该槽的值不是property，则抛出TypeError。
如果values的大小为两个或更多，并且其中一个或多个项是CSSUnparsedValue 或CSSVariableReferenceValue对象，则抛出TypeError。

注意：多个值意味着您正在设置一个列表值属性的多个项，但是字符串中的var()函数禁用了所有语法解析，包括分割为独立的迭代（因为var()值中可能还有更多的逗号，因此无法确定实际出现了多少项）。此步骤的限制在Typed OM中保留了相同的语义。
让props成为this的[[declarations]] 内部插槽的值。
如果props[property] 存在，则移除它。
让values to set成为一个空的列表。
对于values中的每个value，为property和value 创建内部表示，并将结果附加到values to set。
将props[property]设置为values to set。

注意：该属性将先删除再添加回，这样它会被放在有序映射的末尾，这在简写属性的情况下产生预期的行为。

append(property, ...values) 方法，在StylePropertyMap this上调用时，必须执行以下步骤：

如果property不是自定义属性名称字符串，将property设置为property的ASCII 小写。
如果property不是有效的 CSS 属性，则抛出TypeError。
如果property不是列表值属性，则抛出TypeError。
如果values中的任何项具有非空[[associatedProperty]] 内部槽，并且该槽的值不是property，则抛出TypeError。
如果values中的任何项是CSSUnparsedValue 或CSSVariableReferenceValue 对象，则抛出TypeError。

注意：当属性通过字符串API设置时，属性中的var()的存在阻止了整个内容被解释。换句话说，除var()之外的所有内容都是普通的组件值，而不是有意义的类型。此步骤的限制在Typed OM中保留了相同的语义。
让props成为this的[[declarations]] 内部插槽的值。
如果props[property]不存在，则将props[property]设置为空列表。
如果props[property]包含var()引用，则抛出TypeError。
让temp values成为一个空的列表。
对于values中的每个value，为property和value 创建内部表示，并将返回值附加到temp values。
将temp values的条目附加到 props[property]。

delete(property)方法，在StylePropertyMap this上调用时，必须执行以下步骤：

如果property不是自定义属性名称字符串，将property设置为property的ASCII 小写。
如果property不是有效的 CSS 属性，则抛出TypeError。
如果this的[[declarations]] 内部插槽包含property，则移除它。

clear()方法，在StylePropertyMap this上调用时，必须执行以下步骤：

移除this的[[declarations]] 内部插槽中的所有声明。

为了创建内部表示，给定property为字符串， value为字符串或CSSStyleValue：

如果value是直接的CSSStyleValue，

返回value的关联值。

如果value是CSSStyleValue 的子类，

如果value不匹配property的列表值属性迭代的语法，抛出TypeError。

如果property的CSS语法组件中的任何部分具有有限的数值范围，并且value的相应部分是一个CSSUnitValue 超出该范围，使用一个新的CSSMathSum包裹该值，其values 内部槽仅包含value的该部分。

返回value。

如果value是USVString，

使用属性property，cssTextvalue，并将parseMultiple设置为false，解析CSSStyleValue，并返回结果。

注意：这可能会抛出TypeError。

CSS属性通过语法表达它们的有效输入，这些语法是基于与解析为CSS标记的字符串匹配的假设来编写的，正如CSS Syntax 3 § 4 词法分析中定义的一样。CSSStyleValue 对象也可以与这些语法匹配。

一个CSSStyleValue 被称为根据以下规则匹配语法：

一个CSSKeywordValue 如果其值 内部槽匹配语法中指定的标识符，则匹配<ident>。
如果案例折叠规则通常适用于该<ident>（例如Auto匹配关键字auto，正如语法中为width指定的一样），则该比较也适用这些规则。
一个CSSTransformValue 匹配<transform-list>。
一个CSSNumericValue 匹配它的类型匹配的内容。
一个CSSUnparsedValue 匹配任何语法。
一个直接的CSSStyleValue 对象（不是子类）具有非空的[[associatedProperty]] 槽与在其[[associatedProperty]] 槽中指定的属性的语法匹配，无论它是什么。

注意：随着在Typed OM中创建更复杂值的能力增加，本节将变得更加复杂。

一个字符串是一个自定义属性名称字符串，如果它以两个破折号（U+002D HYPHEN-MINUS）开头，比如--foo。（这对应于<custom-property-name>，但适用于字符串，而不是标识符；它可以在不调用CSS解析器的情况下使用。）

一个字符串是一个有效的CSS属性，如果它是自定义属性名称字符串，或者是用户代理识别的CSS属性名称。

3.1. 计算`StylePropertyMapReadOnly` 对象

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

计算 StylePropertyMap对象表示一个Element的计算值，可以通过调用computedStyleMap()方法访问。

每个Element 都有一个[[computedStyleMapCache]]内部槽，初始设置为null，用于缓存首次调用computedStyleMap()方法时的结果。

computedStyleMap()方法，在Element this上调用时，必须执行以下步骤：

如果this的[[computedStyleMapCache]] 内部槽设置为null，将其值设置为一个新的StylePropertyMapReadOnly 对象，其[[declarations]] 内部槽包含用户代理支持的所有长格式CSS属性的名称和计算值，所有已注册的自定义属性，以及未设置为初始值的所有未注册的自定义属性，按标准顺序排列。

此对象的[[declarations]]中的计算值必须保持最新，随着样式解析改变this上的属性及其计算方式而变化。

注意：实际上，由于这些值通过.get()方法调用“隐藏”，用户代理可以推迟计算，直到实际请求某个属性。
返回this的[[computedStyleMapCache]] 内部槽。

注意：类似于Window.getComputedStyle()，此方法可以公开来自样式表的未设置origin-clean标志的信息。

注意：此方法返回的StylePropertyMapReadOnly 表示的是实际的计算值，而不是Window.getComputedStyle()使用的已解析值概念。因此，对于某些属性（如width），它返回的值可能与Window.getComputedStyle()不同。

注意：根据WG决议，伪元素样式旨在通过将此方法添加到新的PseudoElement 接口中来获取，而不是像pseudoElt参数一样使用Window.getComputedStyle()。

3.2. 声明和内联`StylePropertyMap` 对象

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

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

声明 StylePropertyMap对象表示嵌入在样式规则或内联样式中的样式属性-值对，可以通过CSSStyleRule对象的styleMap属性访问，或通过实现ElementCSSInlineStyle接口混入的对象的attributeStyleMap属性访问（如HTMLElement）。

构造时，声明的StylePropertyMap对象的[[declarations]] 内部槽初始化为包含每个属性的条目，这些属性在对象所代表的CSSStyleRule 或内联样式中具有有效值，顺序与CSSStyleRule或内联样式的顺序相同。

4. `CSSStyleValue` 子类

4.1. `CSSUnparsedValue` 对象

[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 对象表示引用自定义属性的属性值。它们由字符串片段和变量引用的列表组成。

它们具有[[tokens]]内部槽，这是一个列表，包含USVString和CSSVariableReferenceValue 对象。这个列表是对象的迭代值。

length属性返回[[tokens]] 内部槽的大小。

CSSUnparsedValue 的this对象支持的属性索引是大于等于0的整数，且小于this的[[tokens]] 内部槽的大小。

为了确定索引属性的值，对于一个CSSUnparsedValue this对象和一个索引n，让tokens成为this的[[tokens]] 内部槽，并返回tokens[n]。

为了设置现有索引属性的值，对于一个CSSUnparsedValue this对象，一个索引n，和一个值new value，让tokens成为this的[[tokens]] 内部槽，并将tokens[n]设置为new value。

为了设置新的索引属性的值，对于一个CSSUnparsedValue this对象，一个索引n，和一个值new value，让tokens成为this的[[tokens]] 内部槽。如果n不等于tokens的大小，则抛出RangeError。否则，追加new value到tokens。

CSSVariableReferenceValue this对象的variable属性的getter 必须返回其variable 内部槽的值。

variable 属性的setter 必须在设置变量variable时执行以下步骤：

如果variable不是自定义属性名称字符串，则抛出TypeError。
否则，将this的variable 内部槽设置为variable。

CSSVariableReferenceValue(variable, fallback) 构造函数必须在调用时执行以下步骤：

如果variable不是自定义属性名称字符串，则抛出TypeError。
返回一个新的CSSVariableReferenceValue，其variable 内部槽设置为variable，并且其fallback 内部槽设置为fallback。

4.2. `CSSKeywordValue` 对象

CSSKeywordValue 对象表示CSS关键字和其他idents。

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

CSSKeywordValue(value)构造函数必须在调用时执行以下步骤：

如果value是空字符串，抛出TypeError。
否则，返回一个新的CSSKeywordValue，其value 内部槽设置为value。

任何接受CSSKeywordValue的地方也接受一个原始的USVString，通过使用以下typedef和算法：

typedef (DOMString or CSSKeywordValue) CSSKeywordish;

为了修正keywordish值val，执行以下步骤：

如果val是CSSKeywordValue，返回val。
如果val是DOMString，返回一个新的CSSKeywordValue，其value 内部槽设置为val。

value属性的CSSKeywordValue this必须在设置value时执行以下步骤：

如果value是空字符串，抛出TypeError。
否则，将this的value 内部槽设置为value。

4.3. 数值:

CSSNumericValue 对象表示本质上是数值的CSS值 (<number>、<percentage>、<dimension>)。有两个接口继承自CSSNumericValue：

CSSUnitValue 对象表示包含单一单位类型的值 (例如 "42px")。
CSSMathValue 对象表示数学表达式，其中可以包含多个值/单位 (例如 "calc(56em + 10%)")。

CSSNumericValue 对象没有范围限制。任何有效的数值都可以由CSSNumericValue表示，并且该值在设置为声明的StylePropertyMap时不会被限制、四舍五入或拒绝。相反，限制和/或四舍五入将在样式计算期间发生。

以下代码是有效的：

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

执行后，opacity的值是1（opacity具有范围限制），而zIndex的值是15（z-index被四舍五入为整数值）。

注意：包含变量引用的"数值" 将表示为CSSUnparsedValue 对象，而关键字将表示为CSSKeywordValue 对象。

任何接受CSSNumericValue的地方也接受一个原始的double，通过使用以下typedef和算法：

typedef (double or CSSNumericValue) CSSNumberish;

为了修正一个numberish值 num，可选地设定一个单位unit（默认为“number”），执行以下步骤：

如果num是一个CSSNumericValue，返回num。
如果num是一个double，返回一个新的CSSUnitValue，其value 内部槽设置为num，并且其unit 内部槽设置为unit。

4.3.1. 通用数值操作，以及`CSSNumericValue` 超类

所有数值类型的CSS值 (<number>、<percentage>，以及<dimension>) 由CSSNumericValue 接口的子类表示。

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

CSSNumericValue 超类中的方法表示所有数值都可以执行的操作。

以下是可以对维度执行的算术运算：

add(...values) 方法，当在CSSNumericValue 上调用时，必须执行以下步骤：

将values中的每个项替换为修正numberish值的结果。
如果this是CSSMathSum对象，将this的values 内部槽中的项前置到values。否则，前置this到values。
如果values中的所有项都是CSSUnitValue且具有相同的 unit，返回一个新的CSSUnitValue，其unit内部槽设置为 this的unit内部槽，且value内部槽设置为 values中的各项value内部槽之和。该加法必须按“从左到右”的顺序执行 - 如果values是«1, 2, 3, 4»，则结果必须是(((1 + 2) + 3) + 4)。（此细节对于在浮点运算存在时确保互操作性是必要的。）
让type成为添加 values中的所有项的类型的结果。如果type失败，抛出TypeError。
返回一个新的CSSMathSum对象，其values内部槽设置为 values。

sub(...values) 方法，当在CSSNumericValue上调用时，必须执行以下步骤：

将values中的每个项替换为为该修正numberish值的结果，然后取反该值。
调用add()内部算法，并传入this和values。

取反CSSNumericValue this：

如果this是CSSMathNegate对象，返回this的value内部槽。
如果this是CSSUnitValue对象，返回一个新的CSSUnitValue，其 unit内部槽与this相同，并且其value内部槽设置为this的相反数。
否则，返回一个新的CSSMathNegate对象，其value内部槽设置为this。

mul(...values) 方法，当在CSSNumericValue上调用时，必须执行以下步骤：

将values中的每个项替换为为该修正numberish值的结果。
如果this是CSSMathProduct对象，将this的values中的项前置到values。否则，前置this到values。
如果values中的所有项是CSSUnitValue且其unit内部槽设置为"number"，返回一个新的CSSUnitValue，其unit内部槽设置为"number"，且value内部槽设置为 values中的各项value内部槽的乘积。

该乘法必须按“从左到右”的顺序执行 - 如果values是«1, 2, 3, 4»，则结果必须是(((1 × 2) × 3) × 4)。该细节对于浮点数运算的互操作性至关重要。
如果values中的所有项是CSSUnitValue，且其unit内部槽设置为"number"，除了一项设置为unit，返回一个新的CSSUnitValue，其unit内部槽设置为unit，且value内部槽设置为values中的各项value内部槽的乘积。

该乘法必须按“从左到右”的顺序执行 - 如果values是«1, 2, 3, 4»，则结果必须是(((1 × 2) × 3) × 4)。
让type成为乘以 values中每一项的类型的结果。如果type失败，抛出TypeError。
返回一个新的CSSMathProduct对象，其values内部槽设置为values。

div(...values) 方法，当在CSSNumericValue上调用时，必须执行以下步骤：

将values中的每个项替换为为该修正numberish值的结果，然后取反该值。
调用mul()内部算法，并传入this和values。

取反CSSNumericValue this：

如果this是CSSMathInvert对象，返回this的value内部槽。
如果this是一个CSSUnitValue对象，其unit内部槽设置为"number"：
1. 如果this的value内部槽设置为0或-0，抛出RangeError。
2. 否则返回一个新的CSSUnitValue，其unit内部槽设置为"number"，且value内部槽设置为1除以this的{CSSUnitValue/value}内部槽。
否则，返回一个新的CSSMathInvert对象，其value内部槽设置为this。

min(...values) 方法，当在CSSNumericValue上调用时，必须执行以下步骤：

将values中的每个项替换为为该修正numberish值的结果。
如果this是CSSMathMin对象，将this的values中的项前置到values。否则，前置this到values。
如果 values 中的所有项都是 CSSUnitValue 且具有相同的 单位，则返回一个新的 CSSUnitValue，其 单位 内部槽位设置为 this 的 单位 内部槽位，且 值 内部槽位设置为 values 中项的最小值。
令 type 为通过添加 values 中每个类型的结果。如果 type 失败，抛出一个 TypeError。
返回一个新的 CSSMathMin 对象，其 values 内部槽位设置为 values。

max(...values) 方法，当在CSSNumericValue上调用时，必须执行以下步骤：

将 values 中的每一个项替换为通过修正数值获得的结果。
如果 this 是一个 CSSMathMax 对象，将 this 的 values 内部槽中的项前置到 values。否则，将 this 前置到 values。
如果 values 中的所有项都是 CSSUnitValue 并且具有相同的 单位，则返回一个新的 CSSUnitValue，其 单位 内部槽被设置为 this 的 单位 内部槽，其 值 内部槽被设置为 values 中的所有项的最大值。
将 type 设置为通过添加 values 中每个类型的结果。如果 type 失败，抛出一个 TypeError。
返回一个新的 CSSMathMax 对象，其 values 内部槽被设置为 values。

equals(...values) 方法，当在CSSNumericValue上调用时，必须执行以下步骤：

将values中的每个项替换为为该修正numberish值的结果。
对于values中的每个项，如果该项不是this的相等数值，返回false。
返回true。

这种相等的概念是有意相当严格的；所有值必须是完全相同的类型和顺序的值。例如，CSSMathSum(CSS.px(1), CSS.px(2))不等于CSSMathSum(CSS.px(2), CSS.px(1))。

之所以使用这种精确的概念，是因为它允许非常快速地测试结构相等性；如果我们使用更慢、更宽松的相等概念，例如允许参数按任何顺序匹配，那么我们可能希望彻底进行其他简化，比如认为96px等于1in；这种更宽松的相等概念可能会在未来添加。

要确定两个CSSNumericValue value1和value2是否为相等数值，执行以下步骤：

如果value1和value2不是同一个接口的成员，返回false。
如果value1和value2都是CSSUnitValue，如果它们的unit和value 内部槽相等，则返回true，否则返回false。
如果value1和value2都是CSSMathSum， CSSMathProduct， CSSMathMin，或CSSMathMax：
1. 如果value1的values内部槽与value2的values内部槽的大小不同，返回false。
2. 如果value1的values内部槽中的任何项不是与value2的项相等的数值，返回false。
3. 返回true。
断言：value1和value2都是CSSMathNegate或CSSMathInvert。
返回value1的value和value2的value是否为相等数值。

to(unit)方法将现有的CSSNumericValue this转换为具有指定unit的另一个，如果可能的话。调用时，必须执行以下步骤：

让type成为从unit中创建类型的结果。如果type失败，抛出SyntaxError。
让sum成为从this创建总和值的结果。如果sum失败，抛出TypeError。
如果sum有多个项，抛出TypeError。否则，让item成为从sum中的唯一项中创建CSSUnitValue的结果，然后将其转换为unit。如果item失败，抛出TypeError。
返回item。

当要求从总值项创建CSSUnitValueitem时，执行以下步骤：

如果 item 在其单位映射中有多于一个的条目，则返回失败。
如果 item 在其单位映射中没有任何条目，则返回一个新的 CSSUnitValue，其 单位内部槽设置为 "number"，其 值 内部槽设置为 item 的值。
否则，item 在其单位映射中有一个单一的条目。如果该条目的值不是 1，则返回失败。
否则，返回一个新的 CSSUnitValue，其 单位内部槽设置为该条目的键，其 值 内部槽设置为 item 的值。

toSum(...units)方法将现有的CSSNumericValue this转换为仅包含指定单位的CSSMathSum，如果可能的话。（这类似于to()，但允许结果包含多个单位。）如果没有指定单位，它只会将this简化为CSSUnitValue的最小和。

调用时，必须执行以下步骤：

遍历units中的每个unit，如果从unit创建类型的结果为失败，抛出SyntaxError。
让sum成为从this创建总和值的结果。如果sum失败，抛出TypeError。
让values成为从sum中的每个项创建CSSUnitValue的结果。如果values中的任何项失败，抛出TypeError。
如果units是空的，按照items的unit内部槽的代码点顺序对values进行排序，然后返回一个新的CSSMathSum对象，其values内部槽设置为values。
否则，让result最初为空列表。遍历units中的每个unit：
1. 让temp最初为一个新的CSSUnitValue，其unit内部槽设置为unit，其value内部槽设置为0。
2. 遍历values中的每个value：
  1. 让value unit成为value的unit内部槽。
  2. 如果value unit与unit是兼容单位，那么：
    1. 将value转换为unit。
    2. 将temp的value 内部槽按value的value 内部槽的值递增。
    3. 从values中移除value。
3. 将temp添加到result。
如果values不为空，抛出TypeError。 this有你未请求的单位。
返回一个新的CSSMathSum对象，其values内部槽设置为result。

type() 方法返回 this 的类型的表示。

调用时，必须执行以下步骤：

让 result 为一个新的 CSSNumericType。
对于 this 的类型中的每个 baseType → power，
1. 如果 power 不为 0，将 result[baseType] 设置为 power。
如果 this 的百分比提示不为 null，
1. 将 percentHint 设置为 this 的百分比提示。
返回 result。

sum value 是 CSSNumericValue 的一个抽象表示，表示为带有（可能是复杂）单位的数值之和。并非所有 CSSNumericValue 都能表示为 sum value。

sum value 是一个列表。列表中的每个条目是一个元组，包含一个值，即一个数字，和一个单位映射，即一个有序映射，将单位（字符串）映射到幂（整数）。

以下是一些 CSS 值的示例，及其等效的 sum value:

1px 变为 «(1, «["px" → 1]»)»
calc(1px + 1in) 变为 «(97, «["px" → 1]»)» （因为 in 和 px 是兼容单位，并且 px 是它们的标准单位）
calc(1px + 2em) 变为 «(1, «["px" → 1]»), (2, «["em" → 1]»)»
calc(1px + 2%) 变为 «(1, «["px" → 1]»), (2, «["percent" → 1]»)» （百分比允许添加到其他单位，但不会解析为其他单位，就像在类型中一样）
calc(1px * 2em) 变为 «(2, «["em" → 1, "px" → 1]»)»
calc(1px + 1deg) 不能表示为 sum value 因为这是无效的计算
calc(1px * 2deg) 变为 «(2, «["deg" → 1, "px" → 1]»)»

从 this CSSNumericValue 创建 sum value 的步骤因 this 的类而异：

CSSUnitValue

让 unit 为 this 的 unit 内部槽的值， value 为 this 的 value 内部槽的值。
如果 unit 是一组兼容单位的成员，且不是该组的标准单位，则将 value 乘以 unit 与标准单位之间的转换比率，并将 unit 更改为标准单位。
如果 unit 是 "number"，返回 «(value, «[ ]»)»。
否则，返回 «(value, «[unit → 1]»)»。

CSSMathSum

让 values 最初为空列表。
对于每个 item，在 this 的 values 内部槽中：
1. 让 value 为从 item 创建的sum值的结果。如果 value 失败，则返回失败。
2. 对于每个 subvalue，在 value 中：
  1. 如果 values 中已经包含具有与 subvalue 相同单位映射的项，则将该项的值增加 subvalue 的值。
  2. 否则，追加 subvalue 到 values。
从每个项目的单位映射创建类型，并将所有类型相加。如果结果是失败，返回失败。
返回 values。

CSSMathNegate

让 values 为从 this 的 value 内部槽中创建的sum值的结果。
如果 values 失败，则返回失败。
将 values 中每个项的值取负。
返回 values。

CSSMathProduct

让 values 最初为 sum value «(1, «[ ]»)»。（即，你从 1 得到的。）
对于每个 item，在 this 的 values 内部槽中：
1. 让 new values 为从 item 创建的sum值的结果。让 temp 最初为空列表。
2. 如果 new values 失败，则返回失败。
3. 对于每个 item1 在 values 中：
  1. 对于每个 item2 在 new values 中：
    1. 让 item 为一个元组，其值设置为 item1 和 item2 的值的乘积，其单位映射设置为两个单位映射的乘积，并删除所有值为零的条目。
    2. 将 item 追加到 temp。
4. 将 values 设置为 temp。
返回 values。

CSSMathInvert

让 values 为从 this 的 value 内部槽中创建的sum值的结果。
如果 values 失败，则返回失败。
如果 values 的长度大于 1，返回失败。
求 values 中项目的倒数，并将单位映射中的每个条目取负。
返回 values。

CSSMathMin

让 args 为从 this 的 values 内部槽中创建的sum值的结果。
如果 args 中的任何项失败，或其长度大于 1，返回失败。
如果 args 项目之间的单位映射不一致，返回失败。
返回具有最小值的 args 项。

CSSMathMax

让 args 为从 this 的 values 内部槽中创建的sum值的结果。
如果 args 中的任何项失败，或其长度大于 1，返回失败。
如果 args 项目之间的单位映射不一致，返回失败。
返回具有最大值的 args 项。

为单位映射 unit map 创建类型：

让 types 最初为空列表。
对于每个 unit → power 在 unit map 中：
1. 让 type 为从 unit 创建的类型的结果。
2. 将 type 的唯一值设置为 power。
3. 追加 type 到 types。
返回所有 types 的乘积的结果。

两个单位映射 units1 和 units2 的乘积按以下步骤计算：

让 result 为 units1 的副本。
对于每个 unit → power 在 units2 中：
1. 如果 result[unit] 存在，则将 result[unit] 增加 power。
2. 否则，设置 result[unit] 为 power。
返回 result。

parse() 方法允许直接从包含CSS的字符串构造 CSSNumericValue。注意这是一个静态方法，直接存在于 CSSNumericValue 接口对象上，而不是 CSSNumericValue 的实例上。

parse(cssText) 方法，当调用时，必须执行以下步骤：

从 cssText 解析组件值，并让 result 成为结果。如果 result 是语法错误，抛出 SyntaxError 并中止该算法。
如果 result 不是 <number-token>，<percentage-token>，<dimension-token>，或数学函数，抛出 SyntaxError 并中止该算法。
如果 result 是 <dimension-token>，并且从 result 的单位创建类型失败，抛出 SyntaxError 并中止该算法。
转化为数值 result，并返回结果。

4.3.2. 数值类型化

每个 CSSNumericValue 都有一个关联的类型，它是一个映射，将基本类型映射到整数（表示每种类型的指数，因此一个 <length>²，比如来自 calc(1px * 1em)，是 «[ "length" → 2 ]»），以及一个关联的百分比提示（表示该类型实际上持有百分比，但该百分比最终会解析为提示的基本类型，因此在类型中已被其替代）。

基本类型是 "length"（长度）， "angle"（角度）， "time"（时间）， "frequency"（频率）， "resolution"（分辨率）， "flex"（弹性），和 "percent"（百分比）。类型条目的排序始终与此基本类型排序一致。百分比提示为空或是除 "percent" 之外的基本类型。

注意：随着新单位类型添加到 CSS，它们将被添加到此基本类型列表中，以及 CSS 数学函数中。

要从字符串 unit 创建类型，请遵循以下适当的分支：

unit 是 "number": 返回 «[ ]»（空映射）
unit 是 "percent": 返回 «[ "percent" → 1 ]»
unit 是 <length> 单位: 返回 «[ "length" → 1 ]»
unit 是 <angle> 单位: 返回 «[ "angle" → 1 ]»
unit 是 <time> 单位: 返回 «[ "time" → 1 ]»
unit 是 <frequency> 单位: 返回 «[ "frequency" → 1 ]»
unit 是 <resolution> 单位: 返回 «[ "resolution" → 1 ]»
unit 是 <flex> 单位: 返回 «[ "flex" → 1 ]»
其他情况: 返回失败。

在所有情况下，关联的百分比提示为空。

要添加两种类型 type1 和 type2，执行以下步骤：

用 type1 的新副本替换 type1，用 type2 的新副本替换 type2。让 finalType 成为一个新的类型，初始为一个空的有序映射和一个初始为 null 的百分比提示。
如果 type1 和 type2 都有非空的百分比提示，并且值不同

这些类型不能相加。返回失败。

如果 type1 有一个非空的百分比提示 hint，而 type2 没有

应用百分比提示 hint 到 type2。

反之亦然，如果 type2 有非空的百分比提示而 type1 没有。

否则

继续下一步。
如果 type1 所有具有非零值的条目都在 type2 中具有相同的值，并且反之亦然

将 type1 的所有条目复制到 finalType，然后将 type2 的所有条目复制到 finalType，这些条目尚未包含在 finalType 中。将 finalType 的百分比提示设置为 type1 的百分比提示。返回 finalType。

如果 type1 和/或 type2 包含非零值的 "percent"，且 type1 和/或 type2 包含非 "percent" 的键，且其值非零
对于每个非 "percent" 的基本类型 hint：
1. 暂时将百分比提示应用到 type1 和 type2。
2. 如果之后，type1 中所有具有非零值的条目都在 type2 中具有相同的值，并且反之亦然，则将 type1 的所有条目复制到 finalType，然后将 type2 的所有条目复制到 finalType，这些条目尚未包含在 finalType 中。将 finalType 的百分比提示设置为 hint。返回 finalType。
3. 否则，恢复 type1 和 type2 到此循环开始时的状态。
如果循环完成而没有返回 finalType，则这些类型不能相加。返回失败。

注意：在某些情况下，你可以通过仅检查 type1 和 type2 的值之和来简化此过程。如果总和不同，这些类型不能相加。
否则

这些类型不能相加。返回失败。

要应用百分比提示 hint 到 type，执行以下步骤：

如果 type 没有包含 hint，设置 type[hint] 为 0。
如果 type 包含 "percent"，将 type["percent"] 添加到 type[hint]，然后将 type["percent"] 设置为 0。
将 type 的百分比提示设置为 hint。

要乘以两种类型 type1 和 type2，执行以下步骤：

用 type1 的新副本替换 type1，用 type2 的新副本替换 type2。让 finalType 成为一个新的类型，初始为一个空的有序映射和一个初始为空的百分比提示。
如果 type1 和 type2 都有非空的百分比提示且值不同，则类型无法相乘。返回失败。
如果 type1 有一个非空的百分比提示 hint，而 type2 没有，应用百分比提示 hint 到 type2。

反之亦然，如果 type2 有非空的百分比提示，而 type1 没有。
将 type1 的所有条目复制到 finalType，然后对于每个 baseType → power 的 type2：
1. 如果 finalType[baseType] 存在，则其值加 power。
2. 否则，将 finalType[baseType] 设置为 power。
将 finalType 的百分比提示设置为 type1 的百分比提示。
返回 finalType。

要反转一个类型 type，执行以下步骤：

让 result 成为一个新的类型，初始为一个空的有序映射，并且百分比提示与 type 的提示匹配。
对于每个 unit → exponent 的 type，将 result[unit] 设置为 (-1 * exponent)。
返回 result。

一个类型在某些情况下被认为是匹配某个 CSS 生成式：

如果类型仅包含一个非零的条目，即 «[ "length" → 1 ]»，则它匹配 <length>。同样适用于 <angle>、<time>、<frequency>、<resolution> 和 <flex>。

如果使用该值的上下文不允许 <percentage>，则类型必须还具有空的百分比提示，以被认为是匹配。
如果类型的唯一非零条目是 «[ "percent" → 1 ]»，则它匹配 <percentage>。
如果类型的唯一非零条目是 «[ "length" → 1 ]» 或 «[ "percent" → 1 ]»，则它匹配 <length-percentage>。同样适用于 <angle-percentage>、<time-percentage>，等等。
如果类型没有非零的条目，则它匹配 <number>。

如果使用该值的上下文不允许 <percentage>，则类型必须还具有空的百分比提示，以被认为是匹配。

注意：类型在加法下形成半群，并在乘法下形成幺半群（乘法的恒等元是 «[ ]»，其百分比提示为空），这意味着它们是结合律和交换律的。因此，规范可以，例如，添加无限制数量的类型，而无需手动逐对添加。

4.3.3. 数值 + 单位：`CSSUnitValue` 对象

可以用一个单一单位（或纯数字或百分比）表示的数值表示为 CSSUnitValue。

例如，样式表中的值 5px 将由一个 CSSUnitValue 表示，其 value 属性设置为 5，unit 属性设置为 "px"。

同样，样式表中的值 10 将由一个 CSSUnitValue 表示，其 value 属性设置为 10，unit 属性设置为 "number"。

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

CSSUnitValue(value, unit) 构造函数在调用时，必须执行以下步骤：

如果从 unit 创建类型返回失败，抛出一个 TypeError 并终止此算法。
返回一个新的 CSSUnitValue，其 value 内部槽设置为 value，并且其 unit 设置为 unit。

type of a CSSUnitValue 是从其 unit 内部槽创建类型的结果。

要从一对 (num, unit) 创建一个 CSSUnitValue，返回一个新的 CSSUnitValue 对象，其 value 内部槽设置为 num，并且其 unit 内部槽设置为 unit。

例如，从 (5, "px") 创建一个新单位值会创建一个等价于 new CSSUnitValue(5, "px") 的对象。

注意：这是一个规范内部算法，旨在使算法中需要时更容易创建单位值。

要将 this CSSUnitValue 转换为单位 unit，请执行以下步骤：

令 old unit 为 this 的 unit 内部槽的值， old value 为 this 的 value 内部槽的值。
如果 old unit 和 unit 不是兼容单位，返回失败。
返回一个新的 CSSUnitValue，其 unit 内部槽设置为 unit，并且其 value 内部槽设置为 old value 乘以 old unit 和 unit 之间的转换比率。

4.3.4. 复杂的数值：`CSSMathValue` 对象

比单一值+单位更复杂的数值由 CSSMathValue 子类构成的树来表示，最终在叶节点处终止为 CSSUnitValue 对象。CSS 中的 calc()、min() 和 max() 函数就是以这种方式表示的。

例如，CSS 值 calc(1em + 5px) 将由 CSSMathSum 表示，如 CSSMathSum(CSS.em(1), CSS.px(5))。

一个更复杂的表达式，例如 calc(1em + 5px * 2)，将由一个嵌套结构表示，如 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",
};

注意： CSSMathValue 作为一个纯粹的超类，不能被直接构造。它仅仅存在于承载所有“数学”运算的通用属性。

CSSMathValue this 的 operator 属性，返回以下字符串，具体取决于 this 的接口：

CSSMathSum: "sum"
CSSMathProduct: "product"
CSSMathMin: "min"
CSSMathMax: "max"
CSSMathClamp: "clamp"
CSSMathNegate: "negate"
CSSMathInvert: "invert"

注意：这些都是 CSSMathOperator 枚举的实例。

CSSMathSum(...args) 构造函数必须在调用时执行以下步骤：

将 args 中的每个项替换为通过调整数值结果的项。
如果 args 为空，抛出 SyntaxError。
令 type 为通过相加所有 args 的类型的结果。如果 type 失败，抛出 TypeError。
返回一个新的 CSSMathSum，其 values 内部槽设置为 args。

CSSMathMin(...args) 和 CSSMathMax(...args) 构造函数的定义与上述相同，只是在最后一步中，它们分别返回新的 CSSMathMin 或 CSSMathMax 对象。

CSSMathProduct(...args) 构造函数的定义与上述相同，除了第 3 步中它相乘类型而不是相加，并且在最后一步它返回一个 CSSMathProduct。

CSSMathClamp(lower, value, upper) 构造函数必须在调用时执行以下步骤：

用调整数值的结果替换 lower、value 和 upper。
令 type 为通过相加 lower、value 和 upper 的类型的结果。如果 type 失败，抛出 TypeError。
返回一个新的 CSSMathClamp，其 lower、value 和 upper 内部槽设置为 lower、value 和 upper。

CSSMathNegate(arg) 构造函数必须在调用时执行以下步骤：

将 arg 替换为通过调整数值得到的 arg。
返回一个新的 CSSMathNegate，其 value 内部槽设置为 arg。

CSSMathInvert(arg) 构造函数的定义与上述相同，只是在最后一步返回一个新的 CSSMathInvert 对象。

CSSMathValue的类型取决于其类：

CSSMathSum
CSSMathMin
CSSMathMax: 该类型是通过相加每个项目的类型的结果。
CSSMathClamp: 该类型是通过相加 lower、value 和 upper 的类型的结果。
CSSMathProduct: 该类型是通过相乘每个项目的类型的结果。
CSSMathNegate: 该类型与其 value 内部槽的类型相同。
CSSMathInvert: 该类型与其 value 内部槽的类型相同，但所有的值都取反。

length 属性表示 CSSNumericArray 中包含的 CSSNumericValue 的数量。

索引属性获取器用于从 CSSNumericArray 中检索提供索引的 CSSNumericValue。

4.3.5. 数值工厂函数

以下工厂函数可以用来创建新的数值，比直接使用构造函数的方式更加简洁。

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

所有上述方法，当使用 double 类型的 value 调用时，必须返回一个新的 CSSUnitValue，其 value 内部槽位设置为 value，其 unit 内部槽位设置为在此处定义的方法名称。

注意：使用的单位与函数的当前名称无关，即使它存储在另一个变量中；let foo = CSS.px; let val = foo(5); 不会返回 {value: 5, unit: "foo"} 的 CSSUnitValue。上述关于名称的说明仅作为简写方式，以避免为所有约60个函数单独定义单位。

上述方法列表反映了CSS在某一特定时间点的有效预定义单位集合。此列表会随着时间更新，但在任何时刻都可能是过时的。如果某个实现支持附加的CSS单位，而这些单位没有在上述列表中定义的对应方法，但这些单位与现有的 CSSNumericType 值相对应，则该实现必须另外支持这些方法，方法名应与单位的规范大小写一致，并使用上面定义的通用行为。

如果某个实现支持的单位与现有的 CSSNumericType 值不对应，则该实现不得在此规范中定义的API中支持这些单位；应请求将这些单位及其类型显式添加到此规范中，因为从单位推导出适当的类型名称不是隐式的。

如果某个实现不支持给定单位，则不得实现该单位在上述列表中的对应方法。

例如，CSS Speech 规范 [CSS-SPEECH-1] 定义了两个额外的单位，分贝 dB 和半音 st。目前没有浏览器实现支持这些单位或计划支持它们，因此它们不包括在上述列表中，但如果某个实现确实支持 Speech 规范，则它还必须公开 CSS.dB() 和 CSS.st() 方法。

4.4. `CSSTransformValue` objects

CSSTransformValue 对象表示 <transform-list> 值，用于 transform 属性。它们“包含”一个或多个 CSSTransformComponent，这些组件表示单个 <transform-function> 值。

[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的迭代值是一个列表，其中包含 CSSTransformComponent。

CSSTransformValue(transforms) 构造函数在调用时必须执行以下步骤：

如果 transforms 为空，抛出 TypeError。
返回一个新的 CSSTransformValue，其迭代值为 transforms。

is2D 属性必须在获取时：

如果在 this 的迭代值中的每个 func 的 is2D 属性都返回 true，则返回 true；否则，返回 false。

toMatrix() 方法必须在调用时执行以下步骤：

令 matrix 为一个新的 DOMMatrix，初始化为单位矩阵，且其 is2D 内部槽设置为 true。
遍历 this 的迭代值中的每个 func：
1. 令 funcMatrix 为通过在 func 上调用 toMatrix() 返回的 DOMMatrix。
2. 将 matrix 设置为 matrix 与 funcMatrix 矩阵的乘积。
返回 matrix。

length 属性表示 CSSTransformValue 中包含的变换组件的数量。

它们有一个 [[values]] 内部槽，这是一个列表，其中包含 CSSTransformComponent 对象。这个列表是对象的迭代值。

CSSTransformValue this 的支持的属性索引是大于或等于 0 且小于 this 的 [[values]] 内部槽的大小的整数。

要确定索引属性的值， this 和索引 n，让 values 是 this 的 [[values]] 内部槽，并返回 values[n]。

要设置现有索引属性的值， this 的一个索引 n 和一个值 new value，让 values 是 this 的 [[values]] 内部槽，并将 values[n] 设置为 new value。

要设置新的索引属性的值， this 的一个索引 n 和一个值 new value，让 values 是 this 的 [[values]] 内部槽。如果 n 不等于 values 的大小，抛出 RangeError。否则，追加 new value 到 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;
};

/* 请注意，skew(x,y) 与 skewX(x) 和 skewY(y) 并不相同，
   因此它们有各自的接口。 */

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

is2D 属性表示变换是二维还是三维。当它为true时，与3D变换相关的属性（例如CSSTranslate.z属性）对它们表示的变换不产生影响。

注意：这会影响对象的序列化以及类似于对象的"等效4x4矩阵"等概念。

is2D设计考虑

出于兼容性的原因，2D和3D变换是不同的，即使它们有相同的效果；一个translateZ(0px)在页面上有可观察的效果，即使它被定义为一个单位变换，因为UA为该元素激活了一些基于3D的优化。

有几种可能的方法来反映这一点——可以使用可为空的3D相关属性、单独的2D和3D接口等等，但我们选择了当前的设计（一个由作者控制的开关来决定行为），因为它允许作者在大多数情况下不必关心变换是2D还是3D，但也防止了"意外"将2D变换转换为3D。

toMatrix() 方法必须在调用时执行以下步骤：

创建一个新的DOMMatrix对象，初始化为this等效的4x4变换矩阵，如CSS Transforms 1§14 数学描述中定义，并将其is2D内部槽设置为与this的is2D内部槽相同的值。

注意：记住is2D标志影响CSSTransformComponent表示的变换及其等效矩阵。

由于这样的矩阵条目是相对于px单位定义的，如果this中涉及生成矩阵的任何<length>不是与兼容单位（如相对长度或百分比）兼容，抛出一个TypeError。
返回matrix。

CSSTranslate(x, y, z) 构造函数必须在调用时执行以下步骤：

如果x或y不符合匹配 <length-percentage>，抛出一个TypeError。
如果传入了z但不符合匹配 <length>，抛出一个TypeError。
创建一个新的CSSTranslate对象，设置其x和y内部槽为x和y。
如果传入了z，将this的z内部槽设置为z，并将this的is2D内部槽设置为false。
如果没有传入z，将this的z内部槽设置为(0, "px")的新单位值，并将this的is2D内部槽设置为true。
返回this。

CSSRotate(angle) 构造器必须在调用时执行以下步骤：

如果 angle 未能匹配 <angle>，抛出 TypeError。
返回一个新的 CSSRotate，其 angle 内部槽设置为 angle，x 和 y 内部槽设置为新的单位值，其值为 (0, "number")，z 内部槽设置为新的单位值，其值为 (1, "number")，并将 is2D 内部槽设置为 true。

CSSRotate(x, y, z, angle) 构造器必须在调用时执行以下步骤：

如果 angle 未能匹配 <angle>，抛出 TypeError。
将 x、y 和 z 替换为校正为数值的结果。
如果 x、y 或 z 未能匹配 <number>，抛出 TypeError。
返回一个新的 CSSRotate，其 angle 内部槽设置为 angle，x、y 和 z 内部槽设置为 x、y 和 z，并将 is2D 内部槽设置为 false。

x , y , 和 z 属性在设置为新值 val 时，必须从 val 纠正为数值类型，并将对应的内部槽设置为该结果。

CSSScale(x, y, z) 构造器必须在调用时执行以下步骤：

将 x, y 和 z（如果传递了）替换为纠正为数值类型的结果。
如果 x, y, 或 z（如果传递了）不匹配数值，则抛出 TypeError 错误。
创建一个新的 CSSScale 对象，设置其内部槽 x 和 y 为 x 和 y。
如果传递了 z，设置 this 的内部槽 z 为 z，并将 is2D 内部槽设置为 false。
如果未传递 z，将 this 的 z 内部槽设置为新单位值，值为 (1, "number")，并将 this 的 is2D 内部槽设置为 true。
返回 this。

x , y , 和 z 属性在设置为新值 val 时，必须从 val 纠正为数值类型，并将对应的内部槽设置为该结果。

CSSSkew(ax, ay) 构造器必须在调用时执行以下步骤：

如果 ax 或 ay 不匹配角度值，则抛出 TypeError 错误。
返回一个新的 CSSSkew 对象，设置其内部槽 ax 和 ay 为 ax 和 ay，并将其 is2D 内部槽设置为 true。

CSSSkewX(ax) 构造器必须在调用时执行以下步骤：

如果 ax 不匹配角度值，则抛出 TypeError 错误。
返回一个新的 CSSSkewX 对象，设置其内部槽 ax 为 ax，并将其 is2D 内部槽设置为 true。

CSSSkewY(ay) 构造器必须在调用时执行以下步骤：

如果 ay 不匹配角度，则抛出一个 TypeError 错误。
返回一个新的 CSSSkewY 对象，设置其内部槽 ay 为 ay，并将其 is2D 内部槽设置为 true。

is2D 属性必须在设置时不做任何操作。

注意： skew()、skewX() 和 skewY() 函数总是表示 2D 变换。

CSSPerspective(length) 构造器必须在调用时执行以下步骤：

如果 length 是一个 CSSNumericValue：
1. 如果 length 不匹配长度，则抛出一个 TypeError 错误。
否则（即，如果 length 不是 CSSNumericValue）：
1. 从 length 纠正为关键字类型值，然后将 length 设置为结果的值。
2. 如果 length 表示的值不是与关键字 none 的 ASCII 不区分大小写匹配，则抛出一个 TypeError 错误。
返回一个新的 CSSPerspective 对象，设置其内部槽 length 为 length，并将其 is2D 内部槽设置为 false。

is2D 属性必须在设置时不做任何操作。

注意： perspective() 函数总是表示 3D 变换。

CSSMatrixComponent(matrix, options) 构造器必须在调用时执行以下步骤：

令 this 为一个新的 CSSMatrixComponent 对象，并将其内部槽 matrix 设置为 matrix。
如果传递了 options 并且具有 is2D 字段，则将 this 的内部槽 is2D 设置为该字段的值。
否则，将 this 的内部槽 is2D 设置为 matrix 的 is2D 内部槽的值。
返回 this。

每个 CSSTransformComponent 可以对应多个底层变换函数。例如，一个 CSSTranslate，其 x 值为 10px，y 和 z 值为 0px，可以表示以下任一情况：

translate(10px)
translate(10px, 0)
translateX(10px)
translate3d(10px, 0, 0)

然而，在序列化时，它将始终打印为 translate(10px, 0px) 或 translate3d(10px, 0px, 0px)，取决于其 is2D 内部槽是 true 还是 false。

4.5. `CSSImageValue` 对象

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

CSSImageValue 对象表示用于接受 <image> 生成的属性的值，例如 background-image、list-style-image 和 border-image-source。

注意：此对象是有意保持不透明的，不暴露任何图像类型或图像的任何方面。这是因为需要表示图像以支持自定义绘制（Custom Paint），但由于处理 URL 和加载规范方面的复杂性，在本规范的时间表内难以完全明确。这将在未来的规范版本中得到扩展。

如果一个 CSSImageValue 对象表示包含 URL 的 <image>（例如 url() 或 image()），则此类值的处理方式与当前 CSS 的处理方式相同。特别是，解析相对 URL 或片段 URL 的行为与普通 CSS 相同。

例如，相对 URL 是相对于它们所在样式表的 URL 进行解析的（如果它们是在 style 元素或 style 属性中指定的，则相对于文档的 URL）。这种解析不是在解析时立即发生，而是在值计算期间的某个未指定的时间点进行。

因此，如果一个元素的样式设置为 background-image: url(foo);，并通过类型化对象模型（Typed OM）提取出该指定值，然后将其设置到另一个文档中的元素上，那么源元素和目标元素将会不同地解析该 URL，因为它们提供了不同的基准 URL。

另一方面，如果提取的值是计算值（通过 computedStyleMap() 获得），那么它已经被解析为绝对 URL，因此无论你将它设置到哪里，它的行为都是相同的。（除非它是一个片段 URL，CSS 对此的处理不同，永远不会完全解析片段 URL，因此它始终是相对于当前文档进行解析的。）

4.6. `CSSColorValue` 对象

CSSColorValue 对象表示 <color> 值。它是一个抽象超类，子类代表各个 CSS 颜色函数。

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

parse(cssText) 方法在调用时必须执行以下步骤：

解析 cssText 为 <color>，并让 result 是结果。如果 result 是语法错误，抛出 SyntaxError 并中止此算法。
将颜色值具体化从 result，并返回该结果。

多个 IDL 类型被定义用于 CSSColorValue 中：

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

所有这些类型在类型签名上是相同的，但它们表示不同的值：CSSColorRGBComp 表示一个规范上为 <number>、<percentage> 或关键字 none 的值；CSSColorPercent 表示一个规范上为 <percentage> 或关键字 none 的值；CSSColorNumber 表示一个规范上为 <number> 或关键字 none 的值；CSSColorAngle 表示一个规范上为 <angle> 或关键字 none 的值。

它们对应的整形算法也各有不同，用于将 double 值转换为 CSSNumericValue。

要整形 CSSColorRGBComp val：

如果 val 是 double，用新单位值替换它，值为 (val*100, "percent")。
如果 val 是 DOMString，用整形关键字值替换它。
如果 val 是 CSSNumericValue，并且它匹配 <number> 或 <percentage>，则返回 val。
如果 val 是 CSSKeywordValue，并且它的 value 内部槽是 ASCII 不区分大小写匹配 "none"，则返回 val。
抛出 SyntaxError。

要整形 CSSColorPercent val：

如果 val 是 double，用新单位值替换它，值为 (val*100, "percent")。
如果 val 是 DOMString，用整形关键字值替换它。
如果 val 是 CSSNumericValue，并且它匹配 <percentage>，则返回 val。
如果 val 是 CSSKeywordValue，并且它的 value 内部槽是 ASCII 不区分大小写匹配 "none"，则返回 val。
抛出 SyntaxError。

要整形 CSSColorNumber val：

如果 val 是 double，用新单位值替换它，值为 (val, "number")。
如果 val 是 DOMString，用整形关键字值替换它。
如果 val 是 CSSNumericValue，并且它匹配 <number>，则返回 val。
如果 val 是 CSSKeywordValue，并且它的 value 内部槽是 ASCII 不区分大小写匹配 "none"，则返回 val。
抛出 SyntaxError。

要整形 CSSColorAngle val：

如果 val 是 double，用新单位值替换它，值为 (val, "deg")。
如果 val 是 DOMString，用整形关键字值替换它。
如果 val 是 CSSNumericValue，并且它匹配 <angle>，则返回 val。
如果 val 是 CSSKeywordValue，并且它的 value 内部槽是 ASCII 不区分大小写匹配 "none"，则返回 val。
抛出 TypeError。

===============

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

CSSRGB 类表示 CSS rgb()/rgba() 函数。

CSSRGB(r, g, b, optional alpha) 构造函数在调用时，必须执行以下步骤：

用整形 CSSColorRGBComp 的结果替换 r、g 和 b。用整形 CSSColorPercent 的结果替换 alpha。
返回一个新的 CSSRGB，其 r、g、b 和 alpha 内部槽分别设置为 r、g、b 和 alpha。

r、g 和 b 属性在设置为新值 val 时，必须从 val 中整形 CSSColorRGBComp 并将相应的内部槽设置为该结果。

alpha 属性在设置为新值 val 时，必须从 val 中整形 CSSColorPercent 并将相应的内部槽设置为该结果。

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

CSSHSL 类表示 CSS hsl()/hsla() 函数。

CSSHSL(h, s, l, optional alpha) 构造函数在调用时，必须执行以下步骤：

将 h 替换为从其整形的 CSSColorAngle 结果。将 s、l 和 alpha 替换为从它们各自整形的 CSSColorPercent 结果。
返回一个新的 CSSHSL，其 h、s、l 和 alpha 内部槽分别设置为 h、s、l 和 alpha。

h 属性在设置为新值 val 时，必须从 val 中整形 CSSColorAngle 并将相应的内部槽设置为该结果。

s、l 和 alpha 属性在设置为新值 val 时，必须从 val 中整形 CSSColorPercent 并将相应的内部槽设置为该结果。

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

CSSHWB 类表示 CSS hwb() 函数。

CSSHWB(h, w, b, optional alpha) 构造函数在调用时，必须执行以下步骤：

将 h 替换为从其整形的 CSSColorAngle 结果。将 w、b 和 alpha 替换为从它们各自整形的 CSSColorPercent 结果。
返回一个新的 CSSHWB，其 h、w、b 和 alpha 内部槽分别设置为 h、w、b 和 alpha。

h 属性在设置为新值 val 时，必须从 val 中整形 CSSColorAngle 并将相应的内部槽设置为该结果。

w、b 和 alpha 属性在设置为新值 val 时，必须从 val 中整形 CSSColorPercent 并将相应的内部槽设置为该结果。

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

CSSLab 类表示 CSS lab() 函数。

CSSLab(l, a, b, optional alpha) 构造函数在调用时，必须执行以下步骤：

将 a 和 b 替换为从它们各自整形的 CSSColorNumber 结果。将 l 和 alpha 替换为从它们整形的 CSSColorPercent 结果。
返回一个新的 CSSLab，其 l、a、b 和 alpha 内部槽分别设置为 l、a、b 和 alpha。

l 和 alpha 属性在设置为新值 val 时，必须从 val 中整形 CSSColorPercent 并将相应的内部槽设置为该结果。

a 和 b 属性在设置为新值 val 时，必须从 val 中整形 CSSColorNumber 并将相应的内部槽设置为该结果。

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

CSSLCH 类表示 CSS lch() 函数。

CSSLCH(l, c, h, optional alpha) 构造函数在调用时，必须执行以下步骤：

将 h 替换为从中整形的 CSSColorAngle 结果。将 l、c 和 alpha 替换为从中整形的 CSSColorPercent 结果。
返回一个新的 CSSLCH，其 l、c、h 和 alpha 内部槽分别设置为 l、c、h 和 alpha。

h 属性在设置为新值 val 时，必须从 val 中整形 CSSColorAngle 并将相应的内部槽设置为该结果。

l、c，以及 alpha 属性在设置为新值 val 时，必须从 val 中整形 CSSColorPercent 并将相应的内部槽设置为该结果。

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

CSSOKLab 类表示 CSS oklab() 函数。

CSSOKLab(l, a, b, optional alpha) 构造函数在调用时，必须执行以下步骤：

将 a 和 b 替换为从中整形的 CSSColorNumber 结果。将 l 和 alpha 替换为从中整形的 CSSColorPercent 结果。
返回一个新的 CSSOKLab，其 l、a、b 和 alpha 内部槽分别设置为 l、a、b 和 alpha。

l 和 alpha 属性在设置为新值 val 时，必须从 val 中整形 CSSColorPercent 并将相应的内部槽设置为该结果。

a 和 b 属性在设置为新值 val 时，必须从 val 中整形 CSSColorNumber 并将相应的内部槽设置为该结果。

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

CSSOKLCH 类表示 CSS lch() 函数。

CSSOKLCH(l, c, h, optional alpha) 构造函数在调用时，必须执行以下步骤：

将 h 替换为从中整形的 CSSColorAngle 结果。将 l、c 和 alpha 替换为从中整形的 CSSColorPercent 结果。
返回一个新的 CSSOKLCH，其 l、c、h 和 alpha 内部槽分别设置为 l、c、h 和 alpha。

h 属性在设置为新值 val 时，必须从 val 中整形 CSSColorAngle 并将相应的内部槽设置为该结果。

l、c 和 alpha 属性在设置为新值 val 时，必须从 val 中整形 CSSColorPercent 并将相应的内部槽设置为该结果。

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

CSSColor 类表示 CSS color() 函数。

CSSColor(colorSpace, channels, optional alpha) 构造函数在调用时，必须执行以下步骤：

将 colorSpace 替换为从中整形的关键字值结果。将 channels 中的每一项替换为从中整形的 CSSColorPercent 结果。将 alpha 替换为从中整形的 CSSColorPercent 结果。
返回一个新的 CSSColor，其 colorSpace、channels 和 alpha 内部槽分别设置为 colorSpace、channels 和 alpha。

colorSpace 属性在设置为新值 val 时，必须从 val 中整形关键字值并将相应的内部槽设置为该结果。

alpha 属性在设置为新值 val 时，必须从 val 中整形 CSSColorPercent 并将相应的内部槽设置为该结果。

要为 CSSColor 值的 channels 属性设置索引值 i 处的 val：

将 val 替换为从中整形的 CSSColorPercent 结果。
将 channels 的 i 值在其支持列表中设置为 val。

要为 CSSColor 值的 channels 属性删除索引值 i 处的 val：

移除 channels 的 i 值在其支持列表中的值。

5. `CSSStyleValue` 实体化

本节描述了如何通过内部表示构建 Typed OM 对象的过程，称为实体化。

一些适用于所有实体化的一般原则不在每个具体实例中说明：

如果内部表示来自于列表值属性，则该列表定义了如何实体化该属性的单个迭代；多个迭代通过从 StylePropertyMap.getAll() 返回多个值来反映。
如果内部表示包含 var() 引用，则无论属于何种属性，都会通过实体化组件值列表来进行实体化。

5.1. 特定属性规则

以下列表定义了 CSS 中每个属性的实体化行为，包括指定值和计算值。

未注册的自定义属性

对于指定值和计算值，从值中实体化组件值列表，并返回结果。

已注册的自定义属性

根据 CSS Properties and Values API 1 § 6.2 CSSStyleValue 实体化的描述进行实体化。

align-content

align-items

对于指定值和计算值：

如果值是 normal 或 stretch，从值中实体化标识符，并返回结果。
如果值是 baseline 或 first baseline，实体化标识符 "baseline"，并返回结果。
如果值是一个 <self-position> 且没有 <overflow-position>，从值中实体化标识符，并返回结果。
否则，实体化为 CSSStyleValue 并返回结果。

align-self

对于指定值和计算值：

如果值是 auto，normal，或 stretch，从值中实体化标识符，并返回结果。
如果值是 baseline 或 first baseline，实体化标识符 "baseline"，并返回结果。
如果值是一个 <self-position> 且没有 <overflow-position>，从值中实体化标识符，并返回结果。
否则，实体化为 CSSStyleValue 并返回结果。

alignment-baseline

对于指定值和计算值，从值中实体化标识符，并返回结果。

all

对于指定值和计算值，从值中实体化标识符，并返回结果。

animation-composition

对于指定值和计算值，从值中实体化标识符，并返回结果。

appearance

对于指定值和计算值，从值中实体化标识符，并返回结果。

azimuth

对于指定值：

如果值是一个 <angle>，从值中实体化数值，并返回结果。
如果值是单个关键词，从值中实体化标识符，并返回结果。
否则，实体化为 CSSStyleValue 并返回结果。

对于计算值：

从角度值中实体化数值，并返回结果。

backdrop-filter

对于指定值和计算值：

如果值是 none，从值中实体化标识符，并返回结果。
否则，实体化为 CSSStyleValue 并返回结果。

backface-visibility

对于指定值和计算值，从值中实体化标识符，并返回结果。

background

对于指定值和计算值，实体化为 CSSStyleValue 并返回结果。

background-attachment

对于指定值和计算值，从值中实体化标识符，并返回结果。

background-blend-mode

对于指定值和计算值，从值中实体化标识符，并返回结果。

background-clip

对于指定值和计算值，从值中实体化标识符，并返回结果。

background-color

对于指定值和计算值，实体化为 CSSStyleValue 并返回结果。

background-image

对于指定值和计算值：

如果值是 none，从值中实体化标识符，并返回结果。
如果值是一个 url() 函数，从值中实体化 url 并返回结果。
否则，从值中实体化图像并返回结果。

background-position

对于指定值和计算值，从值中实体化位置，并返回结果。

background-repeat

对于指定值和计算值：

如果值是单个关键词或相同关键词重复两次，从关键词中实体化标识符并返回结果。
如果值是 repeat no-repeat，实体化标识符 "repeat-x" 并返回结果。
如果值是 no-repeat repeat，实体化标识符 "repeat-y" 并返回结果。
否则，实体化为 CSSStyleValue 并返回结果。

baseline-shift

对于指定值和计算值：

如果值是 sub 或 super，从值中实体化标识符并返回结果。
否则，从值中实体化数值并返回结果。

block-size

与 width 相同。

block-step

对于指定值和计算值，实体化为 CSSStyleValue 并返回结果。

block-step-align

对于指定值和计算值，从值中实体化标识符并返回结果。

block-step-insert

对于指定值和计算值，从值中实体化标识符并返回结果。

block-step-round

对于指定值和计算值，从值中实体化标识符并返回结果。

block-step-size

对于指定值和计算值：

如果值是 none，从值中实体化标识符并返回结果。
否则，从值中实体化数值并返回结果。

bookmark-label

对于指定值和计算值，实体化为 CSSStyleValue 并返回结果。

bookmark-level

对于指定值和计算值：

如果值是 none，从值中实体化标识符并返回结果。
否则，从值中实体化数值并返回结果。

bookmark-state

对于指定值和计算值，从值中实体化标识符并返回结果。

border

对于指定值和计算值，实体化为 CSSStyleValue 并返回结果。

border-block

与 border-block-start 相同。

border-block-color

对于指定值和计算值，实体化为 CSSStyleValue 并返回结果。

border-block-end

与 border-block-start 相同。

border-block-end-color

与 border-top-color 相同。

border-block-end-style

与 border-top-style 相同。

border-block-end-width

与 border-top-width 相同。

border-block-start

与 border-top 相同。

border-block-start-color

与 border-top-color 相同。

border-block-start-style

与 border-top-style 相同。

border-block-start-width

与 border-top-width 相同。

border-block-style

对于指定值和计算值，实体化为 CSSStyleValue 并返回结果。

border-block-width

对于指定值和计算值，实体化为 CSSStyleValue 并返回结果。

border-bottom

与 border-top 相同。

border-bottom-color

与 border-top-color 相同。

border-bottom-style

与 border-top-style 相同。

border-bottom-width

与 border-top-width 相同。

border-boundary

对于指定值和计算值，从值中实体化标识符并返回结果。

border-collapse

对于指定值和计算值，从值中实体化标识符并返回结果。

border-color

对于指定值和计算值，实体化为 CSSStyleValue 并返回结果。

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

与 border-top 相同。

border-left-color

与 border-top-color 相同。

border-left-style

与 border-top-style 相同。

border-left-width

与 border-top-width 相同。

border-radius

对于指定值和计算值，实体化为 CSSStyleValue 并返回结果。

border-right

与 border-top 相同。

border-right-color

与 border-top-color 相同。

border-right-style

与 border-top-style 相同。

border-right-width

与 border-top-width 相同。

border-spacing

border-style

border-top

对于指定值和计算值，实体化为 CSSStyleValue 并返回结果。

border-top-color

对于指定值和计算值:

如果值为 currentcolor，从值中实体化标识符并返回结果。
否则，实体化为 CSSStyleValue 并返回结果。

border-top-style

对于指定值和计算值，从值中实体化标识符并返回结果。

border-top-width

对于指定值和计算值:

如果值是 <length>，从值中实体化数值并返回结果。
否则，从值中实体化标识符并返回结果。

border-width

对于指定值和计算值，实体化为 CSSStyleValue 并返回结果。

bottom

对于指定值和计算值:

如果值为 auto，从值中实体化标识符并返回结果。
否则，从值中实体化数值并返回结果。

box-decoration-break

box-sizing

对于指定值和计算值，从值中实体化标识符并返回结果。

对于指定值和计算值:

如果值为 currentcolor，从值中实体化标识符并返回结果。
否则，实体化为 CSSStyleValue 并返回结果。

caret-shape

clear

对于指定值和计算值，从值中实体化标识符并返回结果。

对于指定值和计算值:

如果值为 currentcolor，从值中实体化标识符并返回结果。
否则，实体化为 CSSStyleValue 并返回结果。

color-adjust

color-interpolation

counter-increment

对于指定值和计算值，从值中实体化标识符并返回结果。

display

对于指定值和计算值，从值中实体化标识符并返回结果。

dominant-baseline

elevation

empty-cells

对于指定值和计算值，从值中实体化标识符并返回结果。

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

对于指定值和计算值，从值中实体化标识符并返回结果。

float-defer

font

对于指定值和计算值，实体化为 CSSStyleValue 并返回结果。

font-family

对于指定值和计算值，实体化为 CSSStyleValue 并返回结果。

font-language-override

对于指定值和计算值:

如果值为 normal，从值中实体化标识符并返回结果。
否则，实体化为 CSSStyleValue 并返回结果。

font-optical-sizing

对于指定值和计算值，从值中实体化标识符并返回结果。

font-palette

对于指定值和计算值:

如果值为 normal, light 或 dark，从值中实体化标识符并返回结果。
否则，实体化为 CSSStyleValue 并返回结果。

font-size

对于指定值和计算值:

如果值为 <absolute-size> 或 <relative-size>，从值中实体化标识符并返回结果。
否则，从值中实体化数值并返回结果。

font-size-adjust

对于指定值和计算值:

如果值为 none，从值中实体化标识符并返回结果。
否则，从值中实体化数值并返回结果。

font-stretch

对于指定值和计算值:

如果值为 <percentage>，从值中实体化数值并返回结果。
否则，从值中实体化标识符并返回结果。

font-style

对于指定值和计算值，具象化标识符，并返回结果。

font-synthesis

对于指定值和计算值：

如果值为 none，weight，style 或 small-caps，具象化标识符并返回结果。
否则，将其具象化为 CSSStyleValue 并返回结果。

font-variant

对于指定值和计算值，将其具象化为 CSSStyleValue 并返回结果。

font-variant-alternates

对于指定值和计算值：

如果值为 none 或 historical-forms，具象化标识符并返回结果。
否则，将其具象化为 CSSStyleValue 并返回结果。

font-variant-emoji

对于指定值和计算值，具象化标识符并返回结果。

font-variation-settings

对于指定值和计算值：

如果值为 normal，具象化标识符并返回结果。
否则，将其具象化为 CSSStyleValue 并返回结果。

font-weight

对于指定值和计算值：

如果值为 <number>，具象化数值并返回结果。
否则，具象化标识符并返回结果。

gap

globalcompositeoperation

glyph-orientation-vertical

grid

grid-area

grid-auto-columns

grid-column-start

grid-template-areas

grid-template-columns

grid-template-rows

height

对于指定值和计算值：

如果值为 auto，具象化标识符并返回结果。
如果值为 <length> 或 <percentage>，具象化数值并返回结果。

image-rendering

image-resolution

initial-letter

initial-letter-align

initial-letter-wrap

inset-block-start

inset-inline

inset-inline-end

inset-inline-start

对于指定值和计算值：

如果值为 auto，具象化标识符并返回结果。
否则，从值中具象化数值并返回结果。

letter-spacing

line-grid

line-height

对于指定值和计算值：

如果值为 normal，具象化标识符并返回结果。
否则，从值中具象化数值并返回结果。

对于指定值和计算值：

如果值为 none，具象化标识符并返回结果。
如果值为 url() 函数，具象化 URL 并返回结果。
否则，具象化图像并返回结果。

list-style-position

对于指定值和计算值，具象化标识符并返回结果。

list-style-type

margin

对于指定值和计算值，将其具象化为 CSSStyleValue 并返回结果。

margin-block

margin-block-end

margin-block-start

margin-bottom

与 margin-top 相同。

margin-inline

margin-inline-end

margin-inline-start

margin-left

与 margin-top 相同。

margin-right

与 margin-top 相同。

margin-top

对于指定值和计算值：

如果值为 auto，具象化标识符并返回结果。
否则，具象化数值并返回结果。

mask-border-outset

mask-border-repeat

mask-border-slice

mask-border-source

mask-border-width

mask-clip

mask-composite

mask-image

对于指定值和计算值：

如果值为 none，具象化标识符并返回结果。
否则，具象化图像并返回结果。

对于指定值和计算值，从值中具象化数值并返回结果。

对于指定值和计算值：

如果值为 currentcolor，从值中具象化标识符并返回结果。
否则，将其具象化为 CSSStyleValue 并返回结果。

outline-offset

outline-style

对于指定值和计算值，具象化标识符并返回结果。

outline-width

overflow

对于指定值和计算值，将其具象化为 CSSStyleValue 并返回结果。

overflow-anchor

对于指定值和计算值，具象化标识符并返回结果。

overflow-x

对于指定值和计算值，具象化标识符并返回结果。

overflow-y

对于指定值和计算值，具象化标识符并返回结果。

padding

对于指定值和计算值，将其具象化为 CSSStyleValue 并返回结果。

padding-block

padding-block-end

padding-block-start

padding-bottom

与 padding-top 相同。

padding-inline

padding-inline-end

padding-inline-start

padding-left

与 padding-top 相同。

padding-right

与 padding-top 相同。

padding-top

对于指定值和计算值，从值中具象化数值并返回结果。

page

page-break-after

page-break-before

page-break-inside

perspective-origin

对于指定值和计算值，具象化标识符并返回结果。

presentation-level

对于指定值和计算值，具象化标识符并返回结果。

对于指定值和计算值：

如果值为 auto，从值中具象化标识符并返回结果。
否则，具象化数值并返回结果。

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

speak-punctuation

stroke-dash-corner

stroke-dash-justify

stroke-dasharray

stroke-dashoffset

stroke-image

stroke-linecap

stroke-linejoin

stroke-miterlimit

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-underline-offset

top

对于指定值和计算值：

如果值为 auto，从值中具象化标识符并返回结果。
否则，具象化数值并返回结果。

transform-style

transition

transition-delay

transition-duration

transition-property

transition-timing-function

对于指定值和计算值：

如果值为 baseline，从值中具象化标识符并返回结果。
否则，具象化数值并返回结果。

visibility

对于指定值和计算值，具象化标识符并返回结果。

对于指定值和计算值，具象化标识符并返回结果。

widows

width

对于指定值和计算值：

如果值为 auto，从值中具象化标识符并返回结果。
如果值为 <length> 或 <percentage>，从值中具象化数值并返回结果。

5.2. 不可表示的值

并非所有的内部表示都足够简单，可以通过当前的一组CSSStyleValue 子类进行具象化。在这种情况下，该属性会针对特定属性具象化为 CSSStyleValue，确保它可作为该属性的值使用，且仅限于此。

要将具象化为 CSSStyleValue 一个value 用于一个property：

返回一个新的CSSStyleValue 对象，表示value，其[[associatedProperty]] 内部槽位设置为property。

5.3. 原始 CSS 令牌：具有var() 引用的属性

无论该属性的语法如何，具有未替换的var()引用的属性值表示为列表的组件值，该值在 Typed OM 中成为CSSUnparsedValue。

要从list中具象化组件值列表：

用CSSVariableReferenceValue 对象替换list中的所有var()引用，如§ 5.4 var() 引用中所述。
将list中的每个剩余最大子序列组件值替换为其串联序列的单个字符串。
返回一个新的CSSUnparsedValue，其[[tokens]] 槽位设置为list。

字符串"calc(42px + var(--foo, 15em) + var(--bar, var(--far) + 15px))" 被转换为包含以下序列的CSSUnparsedValue：

字符串 "calc(42px + "
一个CSSVariableReferenceValue，其中：
- variable "--foo"
- fallback 一个包含 " 15em" 的CSSUnparsedValue
字符串 " + "
一个CSSVariableReferenceValue，其中：
- variable "--bar"
- fallback 一个包含以下序列的CSSUnparsedValue：
  - 字符串 " "
  - 一个CSSVariableReferenceValue，其中
    - variable "--far"
    - fallback null
  - 字符串 " + 15px"
字符串 ")"

5.4. var() 引用

var()引用在 Typed OM 中变为CSSVariableReferenceValue。

要具象化 var() 引用 var：

令object为一个新的CSSVariableReferenceValue对象。
将object的variable 内部槽位设置为提供变量名称的<custom-ident>的序列化。
如果var有一个回退值，将object的fallback 内部槽位设置为具象化回退的组件值的结果。否则，将其设置为null。
返回object。

5.5. 标识符值

CSS标识符在 Typed OM 中变为CSSKeywordValue。

要具象化一个标识符 ident：

返回一个新的CSSKeywordValue，其value内部槽位设置为ident的序列化。

5.6. <number>, <percentage>, 和<dimension>值

CSS <number>, <percentage>, 和<dimension>值在 Typed OM 中变为CSSNumericValue。

要具象化一个数值 num：

如果num是数学函数，从num具象化数学表达式并返回结果。
如果num是无单位值0，并且num是<dimension>，返回一个新的CSSUnitValue ，其value 内部槽位被设置为0，并且其unit 内部槽位被设置为"px"。
返回一个新的CSSUnitValue，其value 内部槽位设置为num的数值，并且其unit 内部槽位根据num的类型设置为： "number"如果num是<number>， "percent"如果num是<percentage>，并且num的单位如果num是<dimension>。

如果被具象化的值是计算值，使用该值类型的适当标准单位，并相应地调整数值比例。

例如，如果一个元素有style="width: 1in;"，el.attributeStyleMap.get('width') 会返回CSS.in(1)，但el.computedStyleMap.get('width') 会返回CSS.px(96)，因为px是绝对长度的标准单位。

要具象化数学表达式 num：

如果num是min() 或max()表达式：
1. 让values成为对该表达式参数的具象化结果，将每个参数视为calc()表达式的内容。
2. 返回一个新的CSSMathMin 或CSSMathMax 对象，分别将其values 内部槽位设置为values。
断言：否则，num是calc()。
将num的参数转换为表达式树，使用标准的PEMDAS优先规则，但有以下例外/说明：
- 将减法视为加法，右侧的参数用特殊的“negate”节点包装。
- 将除法视为乘法，右侧的参数用特殊的“invert”节点包装。
- 加法和乘法是N元的；每个节点可以有任意数量的参数。
- 如果表达式中只有一个值，且没有操作，将其视为具有单个参数的加法节点。
递归地将表达式树转换为对象，如下所示：

加法节点

变为一个新的CSSMathSum 对象，其values 内部槽位设置为其参数列表

乘法节点

变为一个新的CSSMathProduct 对象，其values 内部槽位设置为其参数列表

取反节点

变为一个新的CSSMathNegate 对象，其value 内部槽位设置为其参数

取倒节点

变为一个新的CSSMathInvert 对象，其value 内部槽位设置为其参数

叶节点

根据需要具象化

例如，calc(1px - 2 * 3em)产生结构：

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

注意，加法和乘法是N元的，所以calc(1px + 2px + 3px)产生结构：

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

但calc(calc(1px + 2px) + 3px)产生结构：

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

注意：值的计算过程可能将不同的单位转换为相同的单位，简化结果表达式。例如，calc(1px + 2em)作为指定值产生CSSMathSum(CSS.px(1), CSS.em(2))，但作为计算值将返回CSS.px(33)或类似值（取决于该上下文中的em的值）。

5.7. <color> 值

CSS <color>值将变为CSSColorValue （如果可以解析为绝对颜色），否则为通用CSSStyleValue。

要具象化颜色值 val：

如果val是<hex-color>、 rgb()函数，或rgba() 函数，则返回一个新的CSSRGB 对象，其r、 g、 b，和alpha 内部槽位分别设置为其红色、绿色、蓝色和alpha分量的具象化结果。
如果val是hsl()或 hsla()函数，则返回一个新的CSSHSL 对象，其h、 s、 l，和alpha 内部槽位分别设置为其色相角度、饱和度、亮度和alpha分量的具象化结果。
如果val是hwb() 函数，则返回一个新的CSSHWB 对象，其h、 w、 b，和alpha 内部槽位分别设置为其色相角度、白度、黑度和alpha分量的具象化结果。
如果val是lch() 函数，则返回一个新的CSSLCH 对象，其l、 c、 h，和alpha 内部槽位分别设置为其亮度、色度、色相角度和alpha分量的具象化结果。
如果val是lab() 函数，则返回一个新的CSSLab 对象，其l、 a、 b，和alpha 内部槽位分别设置为其亮度、a、b和alpha分量的具象化结果。
如果val是color()函数，则返回一个新的CSSColor 对象，其colorSpace 内部槽位设置为通过从val的颜色空间具象化标识符的结果，其channels 内部槽位的支持列表设置为具象化 val的非alpha分量的结果，其alpha 内部槽位设置为具象化其alpha分量的结果。
如果val是<named-color>或关键字transparent，则返回一个新的CSSRGB 对象，其r、 g、 b，和alpha 内部槽位分别设置为其红色、绿色、蓝色和alpha分量的具象化结果。
如果val是任何其他颜色关键字，返回通过从val具象化标识符的结果。

5.8. <transform-list> 和 <transform-function> 值

CSS <transform-list> 值在 Typed OM 中变为CSSTransformValue，而 CSS <transform-function> 值变为CSSTransformComponent。

要具象化 <transform-list> list：

返回一个新的CSSTransformValue，其要遍历的值是通过对list运行具象化 <transform-function>算法的结果。

要具象化 <transform-function> func，执行下列步骤，基于func：

matrix()

matrix3d()

返回一个新的CSSMatrixComponent对象，其matrix内部槽位被设置为表示与func相同信息的4x4矩阵，其is2D内部槽位如果func是matrix()则为true，否则为false。

返回一个新的CSSTranslate对象，其x、 y、 z内部槽位被设置为指定的 x/y/z 偏移的具象化结果，或者如果func未指定，则设置为0px的具象化结果，其is2D内部槽位如果func是translate()、translateX()或translateY()，则为true，否则为false。

返回一个新的CSSScale对象，其x、 y、 z内部槽位被设置为指定的 x/y/z 缩放值，如果func未指定，则设置为1，其is2D内部槽位如果func是scale()、scaleX()或scaleY()，则为true，否则为false。

返回一个新的CSSRotate对象，其angle内部槽位被设置为指定角度的具象化结果，其x、 y、 z内部槽位被设置为指定的旋转轴坐标，如果func未指定，则设置为隐式轴坐标，其is2D内部槽位如果func是rotate()，则为true，否则为false。

skew()

返回一个新的CSSSkew对象，其ax 和ay内部槽位被设置为指定的 x 和 y 角度的具象化结果，如果func未指定，则为具象化0deg，且其is2D 内部槽位为true。

skewX()

返回一个新的CSSSkewX对象，其ax内部槽位被设置为指定 x 角度的具象化结果，如果func未指定，则为具象化0deg，且其is2D 内部槽位为true。

skewY()

返回一个新的CSSSkewY对象，其ay内部槽位被设置为指定 y 角度的具象化结果，如果func未指定，则为具象化0deg，且其is2D内部槽位为true。

perspective()

返回一个新的CSSPerspective对象，其length内部槽位被设置为指定长度的具象化结果（参见具象化数值，如果是长度，并且如果是关键字，则为具象化标识符），其is2D 内部槽位为false。

6. `CSSStyleValue` 序列化

一个CSSStyleValue的序列化方式取决于其是如何构造的。

如果该值是从 USVString 构造的: 序列化为构造该值的 USVString。
否则，如果该值是使用 IDL 构造函数构造的: 序列化方式在下方各节中指定。
否则，如果该值是从 CSSOM 提取的: 序列化方式在§ 6.7 从 CSSOM 值序列化中指定。

例如：

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

6.1. `CSSUnparsedValue` 序列化

要序列化 CSSUnparsedValue this：

令s初始为空的字符串。
对每个item在this的[[tokens]] 内部槽位中：
1. 如果item是USVString，将其追加到s。
2. 否则，item是CSSVariableReferenceValue。将其序列化，然后将结果追加到s。
返回s。

要序列化CSSVariableReferenceValue this：

令s初始为 "var("。
将this的variable内部槽位追加到s。
如果this的fallback内部槽位不为null，追加 ", " 到s，然后将fallback内部槽位序列化并追加到s。
追加 ")" 到s并返回s。

6.2. `CSSKeywordValue` 序列化

要序列化 CSSKeywordValue this：

返回this的value 内部槽位。

6.3. `CSSNumericValue` 序列化

要序列化 CSSNumericValue this，给定可选的minimum，数值，和可选的maximum，数值：

如果this是一个CSSUnitValue，从this中序列化一个 CSSUnitValue，传递minimum和maximum。返回结果。
否则，序列化一个 CSSMathValue，并返回结果。

6.4. `CSSUnitValue` 序列化

要序列化一个 CSSUnitValue this，带有可选参数minimum，数值，和maximum，数值：

令value和unit为this的value 和unit 内部槽位。
根据<number>，按照CSSOM § 6.7.2 序列化 CSS 值中的规定，序列化value并设置为s。
如果unit是：

"number"

不做任何操作。

"percent"

将"%"追加到s。

其他

将unit追加到s。
如果传递了minimum，并且this小于minimum，或者传递了maximum，并且this大于maximum，或者传递了minimum和/或maximum，并且当前没有足够的信息来确定this和minimum/maximum的相对大小，在s前加上 "calc("，然后在s后加上 ")"。
返回s。

6.5. `CSSMathValue` 序列化

要序列化一个CSSMathValue this，可选参数nested，布尔值（如果未指定则默认为false）， paren-less，布尔值（如果未指定则默认为false），执行以下步骤：

将s初始化为空的字符串。
如果this是一个CSSMathMin 或CSSMathMax：
1. 根据情况将"min("或"max("附加到s。
2. 对于每个arg在this的values 内部槽中，使用nested和paren-less都为true的方式序列化arg，并将结果附加到s，在连续的值之间附加", "。
3. 将")"附加到s并返回s。
否则，如果this是一个CSSMathSum：
1. 如果paren-less为true，继续下一步；否则，如果nested为true，将"("附加到s；否则，将"calc("附加到s。
2. 序列化this的values 内部槽中的第一个项，并将nested设置为true，然后将结果附加到s。
3. 对于每个arg在this的values 内部槽中超出第一个的项：
  1. 如果arg是CSSMathNegate，将" - "附加到s，然后序列化arg的value 内部槽，并将nested设置为true，然后将结果附加到s。
  2. 否则，将" + "附加到s，然后将arg序列化并将nested设置为true，并将结果附加到s。
4. 如果paren-less为false，将")"附加到s，
5. 返回s。
否则，如果this是CSSMathNegate：
1. 如果paren-less为true，继续下一步；否则，如果nested为true，将"("附加到s；否则，将"calc("附加到s。
2. 将"-"附加到s。
3. 序列化this的value 内部槽，将nested设置为true，并将结果附加到s。
4. 如果paren-less为false，将")"附加到s，
5. 返回s。
否则，如果this是CSSMathProduct：
1. 如果paren-less为true，继续下一步；否则，如果nested为true，将"("附加到s；否则，将"calc("附加到s。
2. 序列化this的values 内部槽中的第一个项，将nested设置为true，并将结果附加到s。
3. 对于每个arg在this的values 内部槽中超出第一个的项：
  1. 如果arg是CSSMathInvert，将" / "附加到s，然后序列化arg的value 内部槽，将nested设置为true，然后将结果附加到s。
  2. 否则，将" * "附加到s，然后将arg序列化并将nested设置为true，并将结果附加到s。
4. 如果paren-less为false，将")"附加到s，
5. 返回s。
否则，如果this是CSSMathInvert：
1. 如果paren-less为true，继续下一步；否则，如果nested为true，将"("附加到s；否则，将"calc("附加到s。
2. 将"1 / "附加到s。
3. 序列化this的value 内部槽，将nested设置为true，并将结果附加到s。
4. 如果paren-less为false，将")"附加到s，
5. 返回s。

6.6. `CSSTransformValue` 和 `CSSTransformComponent` 序列化

要序列化CSSTransformValue this：

返回序列化this的项目的结果，然后用空格将它们连接。

要序列化CSSTranslate this：

将s初始化为空字符串。
如果this的is2D 内部槽为false：
1. 在s中追加"translate3d("。
2. 序列化this的x 内部槽，并追加到s。
3. 在s中追加", "。
4. 序列化this的y 内部槽，并追加到s。
5. 在s中追加", "。
6. 序列化this的z 内部槽，并追加到s。
7. 在s中追加")"，然后返回s。
否则：
1. 在s中追加"translate("。
2. 序列化this的x 内部槽，并追加到s。
3. 在s中追加", "。
4. 序列化this的y 内部槽，并追加到s。
5. 在s中追加")"，然后返回s。

要序列化CSSRotate this：

将s初始化为空字符串。
如果this的is2D 内部槽为false：
1. 在s中追加"rotate3d("。
2. 序列化this的x 内部槽，并追加到s。
3. 在s中追加", "。
4. 序列化this的y 内部槽，并追加到s。
5. 在s中追加", "。
6. 序列化this的z 内部槽，并追加到s。
7. 在s中追加","。
8. 序列化this的angle 内部槽，并追加到s。
9. 在s中追加")"，然后返回s。
否则：
1. 在s中追加"rotate("。
2. 序列化this的angle 内部槽，并追加到s。
3. 在s中追加")"，然后返回s。

要序列化CSSScale this：

将s初始化为空字符串。
如果this的is2D 内部槽为false：
1. 在s中追加"scale3d("。
2. 序列化this的x 内部槽，并追加到s。
3. 在s中追加", "。
4. 序列化this的y 内部槽，并追加到s。
5. 在s中追加", "。
6. 序列化this的z 内部槽，并追加到s。
7. 在s中追加")"，然后返回s。
否则：
1. 在s中追加"scale("。
2. 序列化this的x 内部槽，并追加到s。
3. 如果this的x 和y 内部槽为相同的数值，追加")"到s，然后返回s。
4. 否则，追加", "到s。
5. 序列化this的y 内部槽，并追加到s。
6. 追加")"到s，然后返回s。

要序列化CSSSkew this：

将s初始化为"skew("。
序列化this的ax 内部槽，并追加到s。
如果this的ay 内部槽为CSSUnitValue，且其value 为0，则追加")"到s并返回s。
否则，追加", "到s。
序列化this的ay 内部槽，并追加到s。
追加")"到s，然后返回s。

要序列化CSSSkewX this：

将s初始化为"skewX("。
序列化this的ax 内部槽，并追加到s。
追加")"到s，然后返回s。

要序列化CSSSkewY this：

将s初始化为"skewY("。
序列化this的ay 内部槽，并追加到s。
追加")"到s，然后返回s。

要序列化 CSSPerspective this：

将s初始化为"perspective("。
序列化this的length 内部槽，最小值为0px，并追加到s。
追加")"到s，然后返回s。

要序列化 CSSMatrixComponent this：

返回this的matrix 内部槽的序列化结果。

6.7. 从 CSSOM 值序列化

CSSStyleValue 由用户代理从 CSSOM 中的值生成的对象，而不是由作者直接构造的，根据它们来自的属性，按照以下规则序列化：

background-color

如果该值是currentcolor关键字，则返回"currentcolor"。
否则，返回序列化<color>值的结果。

border-color

如果该值是currentcolor关键字，则返回"currentcolor"。
否则，返回序列化<color>值的结果。

border-image

将values初始化为空列表。
如果border-image-source不是none，序列化border-image-source并将其追加到 values。
如果border-image-slice未指定所有边的100%并且省略了fill关键字，则序列化border-image-slice并将其追加到 values。
如果border-image-width未指定所有边的1，则将"/ "（U+002F 斜杠后跟 U+0020 空格）追加到序列化border-image-width的结果并将其追加到 values。
如果border-image-outset未为所有边指定0：
1. 如果上一个border-image-width步骤未向 values追加任何内容，则将prefix设为"// "（两个 U+002F 斜杠字符后跟 U+0020 空格）；否则将prefix设为"/ " （U+002F 斜杠后跟 U+0020 空格）
2. 将prefix追加到序列化border-image-outset的结果并将其追加到 values。
如果border-image-repeat在两个轴上都不是 stretch，则序列化border-image-repeat并将其追加到 values。
如果values是空，则将"none"追加到values。
返回连接values中所有项的结果，使用" "（U+0020 空格）分隔。

bottom

如果该值是auto关键字，则返回"auto"。
如果该值为<length>类型，则返回序列化<length>值的结果。
否则，返回序列化<percentage>值的结果。

color

如果该值是currentcolor关键字，则返回"currentcolor"。
否则，返回序列化<color>值的结果。

left

如果该值是auto关键字，则返回"auto"。
如果该值为<length>类型，则返回序列化<length>值的结果。
否则，返回序列化<percentage>值的结果。

opacity

如果该值为<number>类型，则返回序列化<number>值的结果。
否则，返回序列化<percentage>值的结果。

right

如果该值是auto关键字，则返回"auto"。
如果该值为<length>类型，则返回序列化<length>值的结果。
否则，返回序列化<percentage>值的结果。

top

如果该值是auto关键字，则返回"auto"。
如果该值为<length>类型，则返回序列化<length>值的结果。
否则，返回序列化<percentage>值的结果。

7. 安全性考虑

这些特性未引入已知的安全问题。

8. 隐私性考虑

这些特性未引入已知的隐私问题。

9. 变更

9.1. 自 2018年4月10日工作草案以来的更改

修复了类型匹配算法，以更抽象的方式引用百分比提示。
澄清了"反转类型"需要保留百分比提示。
为CSS数字工厂添加了缺少的字体单位。(#1107)
指定了单位速记方法列表必须根据实现的支持进行减少或扩展。
为"StylePropertyMapReadOnly.get()"使用了未定义的联合值。(#1087)
移除了.to()和CSSColorValue.colorSpace，因为转换并不属于Typed OM的职责。(#1070)
为"序列化CSSUnitValue"添加了min/max，并在序列化CSSPerspective的参数时传递它们。(#1069)
将重新具体化从"CSSStyleValue"改为"标识符"。(#1068)
为新的视口/容器单位添加了工厂函数。(#1067)
为CSSNumericValue.parse添加了类型检查。(#1065)
移除了CSSDeviceCMYK，添加了CSSOKLab和CSSOKLCH，并让所有颜色类接受"none"关键字。
定义了如何具体化颜色值。
允许"新单位值"链接到"从对创建CSSUnitValue"，因为这种表达已经被广泛使用。
为CSSPerspective添加了对perspective(none)的支持。(#1053)
修复了CSSClampValue.min/max与CSSNumericValue.min/max的冲突。(#855)
简化了摘要。
移除了CSSGray和相关的规范文本，因为Color 4在不久前放弃了gray()。(#1027)
将.colorSpace移到CSSColorValue超类。将.to*()颜色转换函数替换为通用的.to(colorSpace)方法。(#1036)
添加了device-cmyk()支持。
修复了CSSColor的OM以匹配最近的简化。
指定了每个CSSColorValue子类表示的颜色函数，并添加了CSSGray。
为联合添加了缺少的括号。(#1016)
添加了一些关于"type"构成的解释文本。
与Web IDL规范对齐。(#965 和 #1006)
修复了算法嵌套。
添加了默认的字典值，WebIDL更新后需要。(#936)
将术语从"底层值"改为"内部表示"，因为Web Animations已将"底层值"用于不同的含义。
澄清了将具体化为CSSStyleValue需要一个属性。
定义了注册自定义属性的具体化行为。(#886)
使用了局部接口mixin ElementCSSInlineStyle。(#853)
使用了WebIDL中的正确名称作为索引属性获取器。
为其他规范导出了许多术语。
从该层级中删除了CSSPositionValue。
为"clamp()"函数添加了CSSMathClamp。
使"匹配语法"算法更加精确。
重新具体化计算的数字值使用规范单位。(#725)
添加了关于新单位类型的注释。(#734)
使用正确的单位"percent"，而不是"percentage" (#761)。
添加了关于自定义属性解析的注释。
将Naina Raisinghani移至前任编辑。
添加了"反转类型"操作。
为CSS Values & Units导出了几个数字类型术语。
将Shane Stephens移至前任编辑。

合规性

文档惯例

合规性要求通过描述性声明和RFC 2119术语的组合来表达。关键词“MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”和“OPTIONAL”在本规范的规范性部分中应按照RFC 2119中的描述进行解释。然而，为了可读性，这些词在本规范中并未全部以大写字母出现。

除非明确标记为非规范性部分、示例和注释，否则本规范的所有文本都是规范性的。[RFC2119]

本规范中的示例以“例如”一词引入，或通过class="example"与规范性文本分开，示例如下：

信息性注释以“注释”一词开头，并通过class="note"与规范性文本分开，示例如下：

建议性规范是规范性部分，旨在引起特别关注，并通过<strong class="advisement">与其他规范性文本区分开来，例如：用户代理（UA）必须提供可访问的替代方案。

合规性类别

如果样式表的所有语句使用本模块定义的语法均符合通用CSS语法以及本模块中定义的各个特性的语法，则样式表符合本规范。

如果渲染器除了按相关规范解释样式表外，还支持本规范中定义的所有特性，能够正确解析并相应地渲染文档，则渲染器符合本规范。然而，因设备限制导致UA无法正确渲染文档，并不意味着该UA不符合规范。（例如，UA不需要在单色显示器上渲染颜色。）

如果编写工具编写的样式表符合通用CSS语法以及本模块中每个特性的语法，且符合本模块中描述的样式表的所有其他合规性要求，则该编写工具符合本规范。

部分实现

为了使作者能够利用向前兼容的解析规则分配后备值，CSS渲染器必须将其不支持的任何at规则、属性、属性值、关键词和其他语法结构视为无效，并适当忽略。特别是，用户代理不得选择性地忽略多值属性声明中的不支持值并仅保留支持的值：如果任何值被视为无效（不支持的值必须如此处理），CSS要求整个声明被忽略。

不稳定和专有功能的实现

非实验性实现

一旦规范达到候选推荐阶段，便可以进行非实验性实现，且实现者应发布任何CR级别功能的无前缀实现，前提是他们能够证明其实现是根据规范正确实现的。

为了建立和维护CSS在不同实现之间的互操作性，CSS工作组要求非实验性CSS渲染器在发布任何CSS功能的无前缀实现之前，向W3C提交实现报告（如果有必要，还需提交该实现报告使用的测试用例）。提交给W3C的测试用例将由CSS工作组进行审查和修订。

CSS 类型化对象模型 第 1 级

摘要

本文档状态

1. 介绍

2. CSSStyleValue 对象

2.1. 直接CSSStyleValue对象

3. StylePropertyMap

3.1. 计算StylePropertyMapReadOnly 对象

3.2. 声明和内联StylePropertyMap 对象

4. CSSStyleValue 子类

4.1. CSSUnparsedValue 对象

4.2. CSSKeywordValue 对象

4.3. 数值:

4.3.1. 通用数值操作，以及CSSNumericValue 超类

4.3.2. 数值类型化

4.3.3. 数值 + 单位：CSSUnitValue 对象

4.3.4. 复杂的数值：CSSMathValue 对象

4.3.5. 数值工厂函数

4.4. CSSTransformValue objects

4.5. CSSImageValue 对象

4.6. CSSColorValue 对象

5. CSSStyleValue 实体化

5.1. 特定属性规则

5.2. 不可表示的值

5.3. 原始 CSS 令牌：具有var() 引用的属性

5.4. var() 引用

5.5. 标识符值

5.6. <number>, <percentage>, 和<dimension>值

5.7. <color> 值

5.8. <transform-list> 和 <transform-function> 值

6. CSSStyleValue 序列化

6.1. CSSUnparsedValue 序列化

6.2. CSSKeywordValue 序列化

6.3. CSSNumericValue 序列化

6.4. CSSUnitValue 序列化

6.5. CSSMathValue 序列化

6.6. CSSTransformValue 和 CSSTransformComponent 序列化

6.7. 从 CSSOM 值序列化

7. 安全性考虑

8. 隐私性考虑

9. 变更

9.1. 自 2018年4月10日工作草案以来的更改

合规性

文档惯例

合规性类别

部分实现

不稳定和专有功能的实现

非实验性实现

索引

本规范定义的术语

通过引用定义的术语

参考文献

规范性引用

IDL 索引

问题索引

CSS 类型化对象模型第 1 级

2. `CSSStyleValue` 对象

2.1. 直接`CSSStyleValue`对象

3. `StylePropertyMap`

3.1. 计算`StylePropertyMapReadOnly` 对象

3.2. 声明和内联`StylePropertyMap` 对象

4. `CSSStyleValue` 子类

4.1. `CSSUnparsedValue` 对象

4.2. `CSSKeywordValue` 对象

4.3.1. 通用数值操作，以及`CSSNumericValue` 超类

4.3.3. 数值 + 单位：`CSSUnitValue` 对象

4.3.4. 复杂的数值：`CSSMathValue` 对象

4.4. `CSSTransformValue` objects

4.5. `CSSImageValue` 对象

4.6. `CSSColorValue` 对象

5. `CSSStyleValue` 实体化

6. `CSSStyleValue` 序列化

6.1. `CSSUnparsedValue` 序列化

6.2. `CSSKeywordValue` 序列化

6.3. `CSSNumericValue` 序列化

6.4. `CSSUnitValue` 序列化

6.5. `CSSMathValue` 序列化

6.6. `CSSTransformValue` 和 `CSSTransformComponent` 序列化