CSS 타입드 OM 레벨 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 값의 기본 클래스입니다.

stringification behavior는 CSSStyleValue 객체의 § 6 CSSStyleValue 직렬화에서 정의되어 있습니다.

parse(property, cssText) 메서드는, 호출되면, CSSStyleValue를 파싱해야 합니다. property property, cssText cssText, parseMultiple을 false로 설정하고, 그 결과를 반환합니다.

parseAll(property, cssText) 메서드는, 호출되면, CSSStyleValue를 파싱해야 합니다. property property, cssText cssText, parseMultiple을 true로 설정하고, 그 결과를 반환합니다.

CSSStyleValue를 파싱하려면 string property, string cssText, 그리고 parseMultiple 플래그가 주어졌을 때, 다음 단계를 실행합니다:

property가 사용자 정의 속성 이름 문자열이 아니라면, property를 ASCII 소문자로 변환합니다.
property가 유효한 CSS 속성이 아니라면, 예외를 발생시키고 TypeError를 반환합니다.
cssText를 property의 문법에 따라 파싱을 시도합니다. 실패하면 예외를 발생시키고 TypeError를 반환합니다. 성공하면, whole value를 파싱 결과로 설정합니다.

사용자 정의 속성의 동작은 자바스크립트를 통해 수정될 때와 스타일시트에서 정의될 때 다릅니다.
스타일시트에서 잘못된 문법으로 사용자 정의 속성이 정의될 경우, 해당 값은 "unset"으로 기록되어, 사용자 정의 속성이 등록될 때마다 모든 스타일시트를 다시 파싱할 필요가 없습니다.

반대로, 자바스크립트 API를 통해 사용자 정의 속성이 수정될 경우, 파싱 오류는 TypeError를 통해 프로그래밍 환경에 즉시 전달됩니다. 이는 개발자에게 더 즉각적인 오류 피드백을 제공합니다.
반복으로 분할하여 whole value를, property에 따라, values로 결과를 설정합니다.
각각의 value를 values 내에서 재현 결과로 대체합니다.

글로벌을 정의해야 합니다.
parseMultiple가 false이면, values[0]을 반환합니다. 그렇지 않으면, values를 반환합니다.

반복으로 분할하려면 CSS 값 whole value와 속성 property를 받아, 다음 단계를 실행합니다:

property가 단일 값 속성이라면, whole value를 포함하는 리스트를 반환합니다.
그렇지 않으면, whole value를 각 반복 단위로 나누어, property에 맞게, 해당 반복들을 순서대로 포함하는 리스트를 반환합니다.

리스트 값 속성을 반복으로 어떻게 나눌지에 대한 정의는 현재 의도적으로 미정이며, 다소 애매하게 되어 있습니다. 일반적으로, 최상위 쉼표로 분할합니다 (문법에서 최상위 <foo># 항목에 해당), 하지만 일부 레거시 속성(counter-reset 등)은 반복 사이에 쉼표를 사용하지 않습니다.

이 부분은 앞으로 엄밀하게 정의될 예정이며, 현재는 "알아서 이해하라"는 식으로 남겨져 있습니다.

2.1. 직접적인 `CSSStyleValue` 객체

아직 더 전문화된 CSSStyleValue 하위 클래스로 직접 지원할 수 없는 값은 CSSStyleValue 객체로 표현됩니다.

각 CSSStyleValue 객체는 특정 CSS 속성과 [[associatedProperty]] 내부 슬롯을 통해 연결되어 있으며, 특정 불변의 내부 표현을 가진다. 이 객체들은 자신이 실체화된 특정 내부 표현을 "표현한다"고 한다. 따라서 동일한 속성에 대해 스타일시트에 다시 설정되면, 동등한 내부 표현을 재현한다.

이 CSSStyleValue 객체는 파싱된 속성에 대해서만 유효한 것으로 간주됩니다. 이는 CSSStyleValue 객체가 [[associatedProperty]] 내부 슬롯을 가지기 때문에 강제됩니다. 이 슬롯은 null(기본값) 또는 속성 이름을 지정하는 string입니다.

참고: 이 슬롯은 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를 빈 리스트로 설정합니다.
각 prop → value에 대해 declarations에서:
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를 ASCII 소문자로 변환합니다.
property가 유효한 CSS 속성이 아니라면, 예외를 발생시키고 TypeError를 반환합니다.
props를 this의 [[declarations]] 내부 슬롯의 값으로 설정합니다.
props[property]가 존재하면, 반복으로 분할 props[property]을 실행한 뒤, 그 결과의 첫 번째 항목을 재현하여 반환합니다.

그렇지 않으면 undefined를 반환합니다.

글로벌을 정의하세요.

getAll(property) 메서드는, StylePropertyMap this에서 호출되면 다음 단계를 수행해야 합니다:

property가 사용자 정의 속성 이름 문자열이 아니라면, property를 ASCII 소문자로 변환합니다.
property가 유효한 CSS 속성이 아니라면, 예외를 발생시키고 TypeError를 반환합니다.
props를 this의 [[declarations]] 내부 슬롯의 값으로 설정합니다.
props[property]가 존재하면, 반복으로 분할 props[property]을 실행한 뒤, 각 항목을 재현하여 리스트로 반환합니다.

그렇지 않으면 빈 리스트를 반환합니다.

글로벌을 정의하세요.

has(property) 메서드는, StylePropertyMap this에서 호출되면 다음 단계를 수행해야 합니다:

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를 ASCII 소문자로 변환합니다.
property가 유효한 CSS 속성이 아니라면, 예외를 발생시키고 TypeError를 반환합니다.
property가 단일 값 속성이고 values에 항목이 둘 이상이면, 예외를 발생시키고 TypeError를 반환합니다.
values의 항목 중 하나라도 [[associatedProperty]] 내부 슬롯이 null이 아니고, 해당 슬롯 값이 property와 다르면, 예외를 발생시키고 TypeError를 반환합니다.
values의 크기가 2 이상이고, 항목 중 하나라도 CSSUnparsedValue 또는 CSSVariableReferenceValue 객체이면, 예외를 발생시키고 TypeError를 반환합니다.

참고: 값이 2개 이상이면 리스트 값 속성의 여러 항목을 설정하는 것이지만, 문자열 기반 OM에서 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를 ASCII 소문자로 변환합니다.
property가 유효한 CSS 속성이 아니라면, 예외를 발생시키고 TypeError를 반환합니다.
property가 리스트 값 속성이 아니면, 예외를 발생시키고 TypeError를 반환합니다.
values의 항목 중 하나라도 [[associatedProperty]] 내부 슬롯이 null이 아니고, 해당 슬롯 값이 property와 다르면, 예외를 발생시키고 TypeError를 반환합니다.
values의 항목 중 하나라도 CSSUnparsedValue 또는 CSSVariableReferenceValue 객체이면, 예외를 발생시키고 TypeError를 반환합니다.

참고: 속성을 문자열 기반 API로 설정할 때, var()가 있으면 전체가 해석되지 않습니다. 즉, var()를 제외한 모든 것은 단순 component value일 뿐, 의미 있는 타입이 아닙니다. 이 단계의 제한은 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를 ASCII 소문자로 변환합니다.
property가 유효한 CSS 속성이 아니라면, 예외를 발생시키고 TypeError를 반환합니다.
this의 [[declarations]] 내부 슬롯이 property를 포함하면, 제거합니다.

clear() 메서드는, StylePropertyMap this에서 호출되면 다음 단계를 수행해야 합니다:

this의 [[declarations]] 내부 슬롯의 모든 선언을 제거합니다.

내부 표현 생성은, 문자열 property와 문자열 또는 CSSStyleValue value가 주어졌을 때 다음과 같이 동작합니다:

만약 value가 직접 CSSStyleValue이면,

value의 연관 값을 반환합니다.

만약 value가 CSSStyleValue 하위 클래스이면,

value가 해당 속성의 리스트 값 속성 반복 문법에 맞지 않으면, 예외를 발생시키고 TypeError를 반환합니다.

어떤 CSS 문법의 컴포넌트가 제한된 숫자 범위를 가지며, 해당 부분의 value가 CSSUnitValue 이고 그 범위를 벗어나면, 그 값을 새 CSSMathSum으로 감싼 결과로 대체합니다. values 내부 슬롯에 해당 부분만 포함시킵니다.

value를 반환합니다.

만약 value가 USVString이면,

CSSStyleValue를 파싱을 property, cssText value, parseMultiple을 false로 하여 실행하고, 그 결과를 반환합니다.

참고: 이 과정에서 TypeError 예외가 발생할 수도 있습니다.

CSS 속성은 유효한 입력을 문법으로 표현하며, 이는 CSS Syntax 3 § 4 Tokenization에 정의된 대로 CSS 토큰으로 파싱된 문자열을 대상으로 작성됩니다. CSSStyleValue 객체도 이러한 문법과 매칭될 수 있습니다.

CSSStyleValue 가 문법과 매치된다는 것은 다음 규칙을 따릅니다:

CSSKeywordValue 는 문법에서 지정된 <ident>와 value 내부 슬롯이 동일하면 매치됩니다.

해당 <ident>에 일반적으로 적용되는 대소문자 규칙이 있다면 (예: Auto가 auto와 매치됨), 이 비교에도 동일하게 적용됩니다.
CSSTransformValue 는 <transform-list>와 매치됩니다.
CSSNumericValue 는 자신의 타입이 매치하는 항목과 매치됩니다.
CSSUnparsedValue 는 모든 문법에 매치됩니다.
직접 CSSStyleValue 객체(하위 클래스가 아닌 것)로, [[associatedProperty]] 슬롯이 null이 아니면, 해당 [[associatedProperty]] 슬롯에 지정된 속성의 문법과 매치됩니다. 속성이 무엇이든 상관없습니다.

참고: Typed OM에서 더 복잡한 값을 만들 수 있게 되면, 이 섹션도 더 복잡해질 것입니다.

문자열은 두 개의 대시(U+002D HYPHEN-MINUS)로 시작하면 사용자 정의 속성 이름 문자열입니다. 예: --foo (<custom-property-name> 생성식에 해당하지만, 문자열에 적용되고, 식별자에는 적용되지 않습니다; CSS 파서를 호출하지 않고도 사용할 수 있습니다.)

문자열은 유효한 CSS 속성입니다. 만약 사용자 정의 속성 이름 문자열이거나, UA가 인식하는 CSS 속성 이름이면 유효합니다.

3.1. 계산된 `StylePropertyMapReadOnly` 객체

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

계산된 StylePropertyMap 객체는 computed value 값을 나타내며, Element 의 computedStyleMap() 메서드를 호출하여 접근할 수 있습니다.

모든 Element 는 [[computedStyleMapCache]] 내부 슬롯을 가지며, 초기 값은 null이고, computedStyleMap() 메서드가 처음 호출될 때 그 결과를 캐시합니다.

computedStyleMap() 메서드는, Element this에서 호출될 때 다음 단계를 수행해야 합니다:

this의 [[computedStyleMapCache]] 내부 슬롯이 null이면, 그 값을 새로운 StylePropertyMapReadOnly 객체로 설정합니다. 이 객체의 [[declarations]] 내부 슬롯에는 UA가 지원하는 모든 롱핸드 CSS 속성, 등록된 모든 사용자 정의 속성, 그리고 등록되지 않았지만 this에서 초기값이 아닌 값으로 설정된 모든 사용자 정의 속성의 이름과 computed value 를 표준 순서로 포함합니다.

[[declarations]] 내의 computed value 값은 최신 상태로 유지되어야 하며, 스타일 해석에 따라 this의 속성이 변경되면 값도 변경되어야 합니다.

참고: 실제로 값이 .get() 메서드 뒤에 "숨겨져" 있으므로, UA는 특정 속성이 요청될 때까지 계산을 지연할 수 있습니다.
this의 [[computedStyleMapCache]] 내부 슬롯을 반환합니다.

참고: Window.getComputedStyle()처럼, 이 메서드는 origin-clean flag가 해제된 스타일시트에서 정보를 노출할 수 있습니다.

참고: 이 메서드가 반환하는 StylePropertyMapReadOnly 는 실제 computed value 값을 나타내며, Window.getComputedStyle()에서 사용하는 resolved value 개념과는 다릅니다. 따라서 일부 속성(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 이상 [[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에 추가합니다.

variable 속성의 getter는 CSSVariableReferenceValue this의 variable 내부 슬롯 값을 반환해야 합니다.

variable 속성을 CSSVariableReferenceValue this에 설정할 때, 변수 variable에 대해 다음 단계를 수행해야 합니다:

variable이 사용자 정의 속성 이름 문자열이 아니면, 예외(TypeError)를 발생시킵니다.
그렇지 않으면 this의 variable 내부 슬롯에 variable 값을 할당합니다.

CSSVariableReferenceValue(variable, fallback) 생성자는, 호출될 때 다음 단계를 수행해야 합니다:

variable이 사용자 정의 속성 이름 문자열이 아니면, 예외(TypeError)를 발생시킵니다.
새 CSSVariableReferenceValue 객체를 반환하는데, variable 내부 슬롯은 variable 값으로 설정되고, fallback 내부 슬롯은 fallback 값으로 설정됩니다.

4.2. `CSSKeywordValue` 객체

CSSKeywordValue 객체는 CSS 키워드 및 기타 ident를 나타냅니다.

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

CSSKeywordValue(value) 생성자는, 호출될 때 다음 단계를 수행해야 합니다:

value가 빈 문자열이면, 예외(TypeError)를 발생시킵니다.
그렇지 않으면, CSSKeywordValue 객체를 새로 반환하며, value 내부 슬롯 값은 value로 설정합니다.

CSSKeywordValue 를 받을 수 있는 곳에는 다음 typedef와 알고리즘을 통해 원시 USVString도 허용됩니다:

typedef (DOMString or CSSKeywordValue) CSSKeywordish;

키워드형 값을 보정하려면 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과 (기본값 "number"인) 단위 unit이 주어질 때 다음 단계를 수행합니다:

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 슈퍼클래스의 메서드는 모든 숫자 값이 수행할 수 있는 연산을 나타냅니다.

다음은 치수(dimensions)에 대해 수행할 수 있는 산술 연산입니다:

add(...values) 메서드는, CSSNumericValue this에서 호출될 때, 다음 단계를 수행해야 합니다:

values의 각 항목을 numberish 값을 보정의 결과로 교체합니다.
this가 CSSMathSum 객체라면, this의 values 내부 슬롯의 항목들을 values 앞에 추가합니다. 아니라면, this를 values 앞에 추가합니다.
values의 모든 항목이 CSSUnitValue이고, unit이 동일하다면, this의 unit 내부 슬롯 값으로, value 내부 슬롯 값은 values의 value 내부 슬롯의 합계로 설정하여, 새로운 CSSUnitValue를 반환합니다. 이 덧셈은 "왼쪽에서 오른쪽"으로 수행해야 합니다 - values가 « 1, 2, 3, 4 »라면, 결과는 (((1 + 2) + 3) + 4)입니다. (이 세부사항은 부동소수점 연산의 상호운용성을 보장하기 위해 필요합니다.)
type을 values의 모든 항목의 type을 합산한 결과로 설정합니다. type이 실패면, 예외(TypeError)를 발생시킵니다.
values를 내부 슬롯으로 설정한 새로운 CSSMathSum 객체를 반환합니다.

sub(...values) 메서드는, CSSNumericValue this에서 호출될 때, 다음 단계를 수행해야 합니다:

values의 각 항목을 numberish 값을 보정의 결과로 교체하고, 해당 값을 부정합니다.
this와 values로 add() 내부 알고리즘을 호출한 결과를 반환합니다.

CSSNumericValue this를 부정하려면:

this가 CSSMathNegate 객체라면, this의 value 내부 슬롯을 반환합니다.
this가 CSSUnitValue 객체라면, this와 동일한 unit 값을 가지며, value 내부 슬롯이 this의 음수로 설정된 새로운 CSSUnitValue를 반환합니다.
그 외의 경우, this를 내부 슬롯으로 설정한 새로운 CSSMathNegate 객체를 반환합니다.

mul(...values) 메서드는, CSSNumericValue this에서 호출될 때, 다음 단계를 수행해야 합니다:

values의 각 항목을 numberish 값을 보정의 결과로 교체합니다.
this가 CSSMathProduct 객체라면, this의 values 내부 슬롯의 항목들을 values 앞에 추가합니다. 아니라면, this를 values 앞에 추가합니다.
values의 모든 항목이 CSSUnitValue이고, unit이 "number"라면, unit을 "number"로, value를 values의 value 내부 슬롯의 곱으로 설정하여, 새로운 CSSUnitValue를 반환합니다.

이 곱셈은 "왼쪽에서 오른쪽"으로 수행해야 합니다 - values가 « 1, 2, 3, 4 »라면, 결과는 (((1 × 2) × 3) × 4)입니다. (이 세부사항은 부동소수점 연산의 상호운용성을 보장하기 위해 필요합니다.)
values의 모든 항목이 CSSUnitValue이고, unit이 "number"이며, 하나만 unit으로 설정되어 있다면, 그 unit 값과 value를 values의 value 내부 슬롯의 곱으로 설정하여, 새로운 CSSUnitValue를 반환합니다.

이 곱셈도 "왼쪽에서 오른쪽"으로 수행해야 합니다 - values가 « 1, 2, 3, 4 »라면, 결과는 (((1 × 2) × 3) × 4)입니다.
type을 values의 모든 항목의 type을 곱셈한 결과로 설정합니다. type이 실패면, 예외(TypeError)를 발생시킵니다.
values를 내부 슬롯으로 설정한 새로운 CSSMathProduct 객체를 반환합니다.

div(...values) 메서드는, CSSNumericValue this에서 호출될 때, 다음 단계를 수행해야 합니다:

values의 각 항목을 numberish 값을 보정의 결과로 교체하고, 해당 값을 역수로 변환합니다.
this와 values로 mul() 내부 알고리즘을 호출한 결과를 반환합니다.

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} 내부 슬롯 값으로 나눈 값으로 설정합니다.
그 외의 경우, this를 내부 슬롯으로 설정한 새로운 CSSMathInvert 객체를 반환합니다.

min(...values) 메서드는, CSSNumericValue this에서 호출될 때, 다음 단계를 수행해야 합니다:

values의 각 항목을 numberish 값을 보정의 결과로 교체합니다.
this가 CSSMathMin 객체라면, this의 values 내부 슬롯의 항목들을 values 앞에 추가합니다. 아니라면, this를 values 앞에 추가합니다.
values의 모든 항목이 CSSUnitValue이고, unit이 동일하다면, this의 unit을 사용하고, value를 values의 value 내부 슬롯의 최소값으로 설정하여, 새로운 CSSUnitValue를 반환합니다.
type을 values의 모든 항목의 type을 합산한 결과로 설정합니다. type이 실패면, 예외(TypeError)를 발생시킵니다.
values를 내부 슬롯으로 설정한 새로운 CSSMathMin 객체를 반환합니다.

max(...values) 메서드는, CSSNumericValue this에서 호출될 때, 다음 단계를 수행해야 합니다:

values의 각 항목을 numberish 값을 보정의 결과로 교체합니다.
this가 CSSMathMax 객체라면, this의 values 내부 슬롯의 항목들을 values 앞에 추가합니다. 아니라면, this를 values 앞에 추가합니다.
values의 모든 항목이 CSSUnitValue이고, unit이 동일하다면, this의 unit을 사용하고, value를 values의 value 내부 슬롯의 최대값으로 설정하여, 새로운 CSSUnitValue를 반환합니다.
type을 values의 모든 항목의 type을 합산한 결과로 설정합니다. type이 실패면, 예외(TypeError)를 발생시킵니다.
values를 내부 슬롯으로 설정한 새로운 CSSMathMax 객체를 반환합니다.

equals(...values) 메서드는, CSSNumericValue this에서 호출될 때, 다음 단계를 수행해야 합니다:

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 values 내부 슬롯의 항목과 동일한 숫자 값이 아니면, 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에 항목이 2개 이상이면, 예외(TypeError)를 발생시킵니다. 아니면, item을 sum의 유일한 합값 항목에서 CSSUnitValue 생성 후 unit으로 변환한 결과로 설정합니다. item이 실패면, 예외(TypeError)를 발생시킵니다.
item을 반환합니다.

합값 항목에서 CSSUnitValue 생성 item이 주어지면, 다음 단계를 수행합니다:

item의 엔트리가 unit map에 2개 이상 있으면, 실패를 반환합니다.
item의 엔트리가 unit map에 없으면, CSSUnitValue를 새로 만들어 unit에 "number"를, value에 item의 value를 설정해 반환합니다.
그 외의 경우, item의 엔트리가 unit map에 1개 있습니다. 해당 엔트리의 값이 1이 아니면, 실패를 반환합니다.
그 외엔, CSSUnitValue를 새로 만들어 unit에 해당 엔트리의 key를, value에 item의 value를 설정해 반환합니다.

toSum(...units) 메서드는 기존 CSSNumericValue this를 지정한 units만 포함하는 CSSMathSum으로 변환합니다(가능한 경우). (to() 와 비슷하지만, 결과에 여러 단위를 허용합니다.) 단위를 지정하지 않으면 this를 최소한의 CSSUnitValue 합으로 단순화합니다.

호출 시 다음 단계를 수행해야 합니다:

각 unit에 대해, unit에서 타입 생성이 실패하면 예외(SyntaxError)를 발생시킵니다.
sum을 this에서 합값 생성한 결과로 설정합니다. sum이 실패면 예외(TypeError)를 발생시킵니다.
values를 sum의 각 합값 항목에서 CSSUnitValue 생성 결과의 리스트로 설정합니다. values의 항목 중 실패가 있으면 예외(TypeError)를 발생시킵니다.
units가 비어있으면, values를 unit 내부 슬롯의 코드 포인트 순으로 정렬 후, CSSMathSum의 values 슬롯으로 설정해 반환합니다.
그 외의 경우, result를 빈 리스트로 초기화 후 각 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. value를 values에서 제거합니다.
3. temp를 result에 추가합니다.
values가 비어있지 않으면, 예외(TypeError)를 발생시킵니다. this에 요청하지 않은 단위가 포함되어 있습니다.
result를 CSSMathSum의 values 슬롯으로 설정해 반환합니다.

type() 메서드는 this의 타입 표현을 반환합니다.

호출 시 다음 단계를 수행해야 합니다:

result를 새 CSSNumericType으로 설정합니다.
this의 타입의 각 baseType → power에 대해,
1. power가 0이 아니면, result[baseType]에 power를 설정합니다.
this의 percent hint가 null이 아니면,
1. percentHint를 this의 percent hint로 설정합니다.
result를 반환합니다.

합값(sum value)은 CSSNumericValue 값을 (복잡할 수 있는) 단위가 있는 수의 합으로 추상화한 것입니다. 모든 CSSNumericValue가 합값으로 표현될 수 있는 것은 아닙니다.

합값은 리스트입니다. 리스트의 각 엔트리는 튜플이며, value(숫자)와 unit map(단위(문자열)와 거듭제곱(정수) 매핑된 맵)으로 구성됩니다.

CSS 값과 그에 대응하는 합값 예시:

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]»)» (percent 단위는 다른 단위와 합산이 가능하지만, type에서처럼 다른 단위로 해석되지 않음)
calc(1px * 2em) → «(2, «["em" → 1, "px" → 1]»)»
calc(1px + 1deg)은 합값으로 표현 불가(계산 자체가 잘못됨)
calc(1px * 2deg) → «(2, «["deg" → 1, "px" → 1]»)»

CSSNumericValue this에서 합값 생성하려면, 클래스에 따라 단계가 다릅니다:

CSSUnitValue

unit을 this의 unit 슬롯 값으로, value를 this의 value 슬롯 값으로 설정합니다.
unit이 호환 단위 집합의 멤버이고, 그 집합의 정준 단위가 아니면, value에 unit과 정준 단위의 변환 비율을 곱하고, unit을 정준 단위로 변경합니다.
unit이 "number"면, «(value, «[ ]»)»를 반환합니다.
그 외엔, «(value, «[unit → 1]»)»를 반환합니다.

CSSMathSum

values를 빈 리스트로 초기화합니다.
this의 values 내부 슬롯의 각 item에 대해:
1. value를 item에서 합값 생성한 결과로 설정합니다. value가 실패면, 실패를 반환합니다.
2. value의 각 subvalue에 대해:
  1. values에 subvalue와 동일한 unit map을 가진 항목이 이미 있다면, 해당 항목의 value에 subvalue의 value를 더합니다.
  2. 그 외엔 subvalue를 values에 추가합니다.
각 values의 unit map으로 타입 생성 후 합산합니다. 실패면, 실패를 반환합니다.
values를 반환합니다.

CSSMathNegate

values를 this의 value에서 합값 생성한 결과로 설정합니다.
values가 실패면, 실패를 반환합니다.
values의 각 value를 부정합니다.
values를 반환합니다.

CSSMathProduct

values를 합값 «(1, «[ ]»)»로 초기화합니다. (즉, 1에서 얻는 값)
this의 values의 각 item에 대해:
1. new values를 item에서 합값 생성한 결과로 설정, temp를 빈 리스트로 초기화합니다.
2. new values가 실패면, 실패를 반환합니다.
3. values의 각 item1에 대해:
  1. new values의 각 item2에 대해:
    1. item을 튜플로 생성, value는 item1과 item2의 곱으로, unit map은 두 unit map의 곱으로, 값이 0인 엔트리는 제거합니다.
    2. item을 temp에 추가합니다.
4. values를 temp로 설정합니다.
values를 반환합니다.

CSSMathInvert

values를 this의 value에서 합값 생성한 결과로 설정합니다.
values가 실패면, 실패를 반환합니다.
values의 길이가 2개 이상이면, 실패를 반환합니다.
values의 value에 역수를, unit map의 각 값에 부호를 반전시킵니다.
values를 반환합니다.

CSSMathMin

args를 this의 values의 각 합값 생성 결과로 설정합니다.
args의 항목 중 실패이거나 길이가 2개 이상이면, 실패를 반환합니다.
args의 unit map이 모두 동일하지 않으면, 실패를 반환합니다.
args의 유일한 항목 중 value가 가장 작은 것을 반환합니다.

CSSMathMax

args를 this의 values의 각 합값 생성 결과로 설정합니다.
args의 항목 중 실패이거나 길이가 2개 이상이면, 실패를 반환합니다.
args의 unit map이 모두 동일하지 않으면, 실패를 반환합니다.
args의 유일한 항목 중 value가 가장 큰 것을 반환합니다.

unit map에서 타입 생성 unit map이 주어지면:

types를 빈 리스트로 초기화합니다.
각 unit → power에 대해:
1. type을 unit에서 타입 생성한 결과로 설정합니다.
2. type의 유일한 값에 power를 설정합니다.
3. type을 types에 추가합니다.
types의 모든 항목을 곱셈한 결과를 반환합니다.

두 unit map의 곱 units1과 units2에 대해 다음 단계를 수행:

result를 units1의 복사본으로 설정합니다.
각 unit → power에 대해:
1. result[unit]이 존재하면, result[unit]에 power를 더합니다.
2. 그 외엔 result[unit]에 power를 설정합니다.
result를 반환합니다.

parse() 메서드는 CSSNumericValue 를 CSS 문자열에서 직접 생성할 수 있게 해줍니다. 이는 정적 메서드이며, 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 는 연관된 타입(type)을 가지고 있습니다. 이는 맵으로, 기본 타입을 정수에 매핑합니다 (각 타입의 지수를 나타냅니다. 예를 들어 <length>², 즉 calc(1px * 1em)은 «[ "length" → 2 ]»), 그리고 연관된 percent hint도 가집니다(이 타입이 실제로는 백분율임을 나타내지만, 그 백분율은 결국 힌트된 기본 타입으로 해석될 것이므로, 타입에서는 그 값으로 대체됨).

기본 타입(base types)은 "length", "angle", "time", "frequency", "resolution", "flex", 그리고 "percent"입니다. 타입(type)의 엔트리 순서는 항상 이 기본 타입 순서를 따릅니다. percent hint는 null이거나 "percent"가 아닌 기본 타입입니다.

참고: CSS에 새로운 단위 타입이 추가되면, 이 기본 타입 목록과 CSS 수학 함수(math functions)에도 추가될 것입니다.

타입 생성(create a type)을 문자열 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 ]»를 반환
그 외의 경우: 실패를 반환.

모든 경우에서 연관된 percent hint는 null입니다.

두 타입 더하기(add two types) type1과 type2에 대해, 다음 단계를 수행합니다:

type1을 새 복사본으로, type2도 새 복사본으로 교체합니다. finalType을 새 타입(type)으로, 초기에는 빈 ordered map과 초기값 null인 percent hint를 가집니다.
둘 다 percent hint가 있고, 값이 다르면

타입을 더할 수 없습니다. 실패를 반환.

type1만 percent hint hint를 가지고 있고, type2는 없다면

percent hint 적용(apply the percent hint) hint를 type2에 적용합니다.

반대로 type2만 percent hint를 가지고 있고 type1은 없는 경우도 동일하게 동작.

그 외의 경우

다음 단계로 진행.
type1의 값이 0이 아닌 모든 엔트리가 type2에도 동일한 값으로 존재하고, type2도 마찬가지라면

type1의 모든 엔트리를 finalType에 복사, 그 후 type2의 엔트리 중 finalType에 없는 것만 복사. finalType의 percent hint는 type1의 percent hint로 설정. finalType을 반환.

"percent" 값이 0이 아닌 엔트리가 있고, 동시에 "percent"가 아닌 값도 0이 아닌 엔트리가 있으면
"percent" 외의 각 기본 타입 hint에 대해:
1. 임시로 percent hint 적용 hint를 type1과 type2에 모두 적용.
2. 그 후 type1의 0이 아닌 모든 엔트리가 type2에도 동일한 값으로 존재하고, type2도 마찬가지라면, type1의 모든 엔트리를 finalType에 복사, type2의 엔트리 중 finalType에 없는 것만 복사. finalType의 percent hint를 hint로 설정. finalType을 반환.
3. 그렇지 않으면 type1과 type2를 이 루프 시작 상태로 되돌림.
루프가 finalType을 반환하지 않으면, 타입을 더할 수 없습니다. 실패를 반환.

참고: 어떤 경우에는 type1과 type2의 모든 값의 합만 비교해도 바로 실패를 알 수 있습니다.
그 외의 경우

타입을 더할 수 없습니다. 실패를 반환.

percent hint 적용(apply the percent hint) hint를 type에 적용하려면, 다음 단계를 수행합니다:

type에 hint가 없으면 type[hint]에 0을 설정.
type에 "percent"가 있으면, type["percent"] 값을 type[hint]에 더한 뒤, type["percent"]를 0으로 설정.
type의 percent hint를 hint로 설정.

두 타입 곱하기(multiply two types) type1과 type2에 대해, 다음 단계를 수행합니다:

type1을 새 복사본으로, type2도 새 복사본으로 교체합니다. finalType을 새 타입(type)으로, 초기에는 빈 ordered map과 초기값 null인 percent hint를 가집니다.
둘 다 percent hint가 있고, 값이 다르면 타입을 곱할 수 없습니다. 실패를 반환.
type1만 percent hint hint를 가지고 있고 type2는 없다면, percent hint 적용 hint를 type2에 적용.

반대로 type2만 percent hint를 가지고 있고 type1은 없는 경우도 동일하게 동작.
type1의 엔트리를 모두 finalType에 복사, 그 후 각 baseType → power에 대해:
1. finalType[baseType]이 있으면, 값에 power를 더함.
2. 없으면 finalType[baseType]에 power를 설정.
finalType의 percent hint를 type1의 percent hint로 설정.
finalType을 반환.

타입 반전(invert a type) type에 대해, 다음 단계를 수행합니다:

result를 타입(type)으로 새로 생성. 초기값은 빈 ordered map과 type과 동일한 percent hint.
각 unit→exponent에 대해, result[unit]에 (-1 * exponent)를 설정.
result를 반환.

type이 특정 상황에서 CSS 프로덕션과 매치(match)된다고 한다:

type이 <length>와 매치되려면, 0이 아닌 유일한 엔트리가 «[ "length" → 1 ]»이어야 한다. <angle>, <time>, <frequency>, <resolution>, <flex> 도 동일하게 적용된다.

값이 사용되는 문맥에서 <percentage> 값을 허용하지 않는다면, type은 추가로 percent hint가 null이어야 매치로 간주된다.
type이 <percentage>와 매치되려면, 0이 아닌 유일한 엔트리가 «[ "percent" → 1 ]»이어야 한다.
type이 <length-percentage>와 매치되려면, 0이 아닌 유일한 엔트리가 «[ "length" → 1 ]» 또는 «[ "percent" → 1 ]»이어야 한다. <angle-percentage>, <time-percentage> 등도 동일하다.
type이 <number>와 매치되려면, 0이 아닌 엔트리가 없어야 한다.

값이 사용되는 문맥에서 <percentage> 값을 허용하지 않는다면, type은 추가로 percent hint가 null이어야 매치됨으로 간주된다.

참고: Types는 덧셈에 대해 반군(semi-group)을 이루고, 곱셈에 대해 모노이드(monoid)를 이룬다 (곱셈 항등원은 percent hint가 null인 «[ ]»이다), 즉 결합법칙과 교환법칙이 성립한다. 따라서 명세에서는 예를 들어 타입을 무한히 많이 함께 덧셈해도 모호함이 없으며, 쌍별로 덧셈할 필요가 없다.

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을 설정합니다.

CSSNumericValue의 타입(type) 은 그 객체의 unit 내부 슬롯에서 타입 생성한 결과입니다.

쌍(pair)에서 CSSUnitValue 생성 (num, unit)을 하려면, CSSUnitValue 객체를 새로 생성하며, value 내부 슬롯에 num을, unit 내부 슬롯에 unit을 설정합니다.

예시: (5, "px")에서 새 단위 값(new unit value)을 생성하면 new CSSUnitValue(5, "px")와 동등한 객체가 만들어집니다.

참고: 이는 명세 내부 알고리즘으로, 필요할 때 알고리즘 내에서 단위 값을 쉽게 생성하기 위함입니다.

CSSUnitValue 변환 this를 단위 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는 순수 슈퍼클래스이므로 직접 생성할 수 없습니다. 이는 모든 "math" 연산의 공통 속성을 호스팅하기 위해 존재합니다.

operator 속성은 CSSMathValue this에서 가져올 때, this의 인터페이스에 따라 아래 문자열을 반환해야 합니다:

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

참고: 이 값들은 모두 CSSMathOperator 열거형(enum)의 인스턴스입니다.

CSSMathSum(...args) 생성자는, 호출될 때 다음 단계를 수행해야 합니다:

args의 각 항목을 numberish 값을 보정 결과로 교체합니다.
args가 비어 있으면, 예외(SyntaxError)를 발생시킵니다.
type을 args의 모든 type을 합산한 결과로 설정합니다. type이 실패면 예외(TypeError)를 발생시킵니다.
새 CSSMathSum 객체를 반환하며, values 내부 슬롯을 args로 설정합니다.

CSSMathMin(...args) 및 CSSMathMax(...args) 생성자는 위와 동일하게 정의되며, 마지막 단계에서 각각 CSSMathMin 또는 CSSMathMax 객체를 반환합니다.

CSSMathProduct(...args) 생성자는 위와 동일하게 정의되지만, 3단계에서 곱셈을 수행하며, 마지막 단계에서 CSSMathProduct를 반환합니다.

CSSMathClamp(lower, value, upper) 생성자는, 호출될 때 다음 단계를 수행해야 합니다:

lower, value, upper를 각각 numberish 값을 보정으로 교체합니다.
type을 lower, value, upper의 type을 합산한 결과로 설정합니다. type이 실패면 예외(TypeError)를 발생시킵니다.
새 CSSMathClamp 객체를 반환하며, lower, value, upper 내부 슬롯을 각각 lower, value, upper로 설정합니다.

CSSMathNegate(arg) 생성자는, 호출될 때 다음 단계를 수행해야 합니다:

arg를 numberish 값을 보정 결과로 교체합니다.
새 CSSMathNegate 객체를 반환하며, value 내부 슬롯을 arg로 설정합니다.

CSSMathInvert(arg) 생성자는 위와 동일하게 정의되지만, 마지막 단계에서 CSSMathInvert 객체를 반환합니다.

CSSMathValue의 타입(type)은 클래스에 따라 다릅니다:

CSSMathSum
CSSMathMin
CSSMathMax: type은 values 내부 슬롯의 각 항목의 type을 합산한 결과입니다.
CSSMathClamp: type은 lower, value, upper 내부 슬롯의 type을 합산한 결과입니다.
CSSMathProduct: type은 values 내부 슬롯의 각 항목의 type을 곱셈한 결과입니다.
CSSMathNegate: type은 value 내부 슬롯의 type과 동일합니다.
CSSMathInvert: type은 value 내부 슬롯의 type과 동일하지만, 모든 값의 부호가 반대입니다.

length 속성은 CSSNumericArray에 포함된 CSSNumericValue의 개수를 나타냅니다.

인덱스 속성 getter는 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 내부 슬롯이 여기서 정의된 메서드의 이름으로 설정되어야 한다.

Note: 사용된 단위는 함수의 현재 이름에 의존하지 않는다, 만약 다른 변수에 저장된 경우; 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` 객체

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

CSSTransformValue의 반복 가능한 값(values to iterate over)은 리스트 형태의 CSSTransformComponent들입니다.

CSSTransformValue(transforms) 생성자는 호출될 때 다음 단계를 수행해야 합니다:

transforms가 비어 있다면, TypeError를 throw합니다.
반복 가능한 값(values to iterate over)이 transforms인 새로운 CSSTransformValue를 반환합니다.

is2D 속성은 CSSTransformValue this에서 get될 때, this의 반복 가능한 값(values to iterate over)에 있는 각 func의 is2D 속성이 true를 반환하면 true를 반환합니다. 그렇지 않으면 false를 반환합니다.

toMatrix() 메서드는 CSSTransformValue this에서 호출될 때, 다음 단계를 수행해야 합니다:

matrix를 새로운 DOMMatrix로 초기화합니다. 이때 항등 행렬(identity matrix)로 초기화되며, is2D 내부 슬롯은 true로 설정됩니다.
반복하면서 this의 반복 가능한 값(values to iterate over)에 있는 각 func에 대해:
1. funcMatrix를 DOMMatrix로, func에서 toMatrix()를 호출하여 반환된 값으로 설정합니다.
2. matrix를 matrix와 funcMatrix가 나타내는 행렬의 곱셈 결과로 설정합니다.
matrix를 반환합니다.

length 속성은 해당 CSSTransformValue에 포함된 변환 컴포넌트(transform component)의 개수를 나타냅니다.

이 객체는 [[values]] 내부 슬롯을 가지며, 이는 리스트 형태의 CSSTransformComponent 객체들입니다. 이 리스트가 객체의 반복 가능한 값(values to iterate over)이 됩니다.

CSSTransformValue this의 지원되는 속성 인덱스(supported property indexes)는 0 이상이며, this의 [[values]] 내부 슬롯의 크기(size)보다 작은 정수입니다.

CSSTransformValue this와 인덱스 n의 인덱스된 속성 값을 결정(determine the value of an indexed property)하려면, values를 this의 [[values]] 내부 슬롯으로 두고, values[n]을 반환합니다.

CSSTransformValue this, 인덱스 n, 값 new value에 대해 기존 인덱스된 속성 값을 설정(set the value of an existing indexed property)하려면, values를 this의 [[values]] 내부 슬롯으로 두고, values[n]에 new value를 설정합니다.

CSSTransformValue this, 인덱스 n, 값 new value에 대해 새 인덱스된 속성 값을 설정(set the value of a new indexed property)하려면, values를 this의 [[values]] 내부 슬롯으로 둡니다. n이 values의 크기(size)와 같지 않다면, RangeError를 throw합니다. 그렇지 않으면 append로 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;
};

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

is2D 속성은 변환이 2D인지 3D인지 여부를 나타냅니다. true인 경우, 3D 변환과 관련된 변환의 속성들 (예: CSSTranslate.z 속성) 은 변환에 아무런 영향을 주지 않습니다.

Note: 이것은 객체의 직렬화와, 객체의 "동등한 4x4 행렬"과 같은 개념에 영향을 줍니다.

is2D 설계 고려사항

레거시 이유로, 2D와 3D 변환은 별개로 취급되며, 동일한 효과를 가지더라도 구분됩니다; translateZ(0px)는 페이지에서 관찰 가능한 효과를 가지며, 비록 identity 변환으로 정의되더라도, UA가 해당 요소에 3D 기반 최적화를 활성화하기 때문입니다.

이를 반영할 수 있는 여러 방법이 있었지만—nullable 3D 관련 속성, 별도의 2D 및 3D 인터페이스 등—현재의 디자인(동작을 결정하는 작성자 전환 가능한 스위치)을 선택한 이유는, 대부분의 경우 작성자가 변환이 2D인지 3D인지 신경 쓰지 않고 작업할 수 있게 해주고, 동시에 "실수로" 2D 변환을 3D로 바꾸는 것을 방지하기 때문입니다.

toMatrix() 메서드는 CSSTransformComponent this에 대해, 호출 시 다음 단계를 수행해야 합니다:

matrix를 새로운 DOMMatrix 객체로, this의 동등한 4x4 변환 행렬로 초기화합니다. 자세한 내용은 CSS Transforms 1 §  14. 변환 함수의 수학적 설명을 참고하세요. 그리고 is2D 내부 슬롯을 this의 is2D 내부 슬롯과 동일한 값으로 설정합니다.

Note: is2D 플래그는 변환 및 동등한 행렬에 영향을 주며, CSSTransformComponent 가 무엇을 나타내는지 결정합니다.

이 행렬의 항목들은 px 단위를 기준으로 정의됩니다. 만약 this의 행렬 생성에 관련된 <length> 값들이 px과 호환되는 단위가 아니라면 (예: 상대 길이 또는 퍼센트), TypeError를 TypeError로 throw합니다.
matrix를 반환합니다.

CSSTranslate(x, y, z) 생성자는, 호출될 때 다음 단계를 수행해야 합니다:

x 또는 y가 매치되지 않으면 <length-percentage>, TypeError를 TypeError로 throw합니다.
z가 전달되었지만 매치되지 않으면 <length>, TypeError를 TypeError로 throw합니다.
this를 새로운 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를 TypeError로 throw합니다.
새로운 CSSRotate를 반환합니다. angle 내부 슬롯을 angle로 설정하고, x 및 y 내부 슬롯을 새로운 단위 값 (0, "number")로, z 내부 슬롯을 새로운 단위 값 (1, "number")로, is2D 내부 슬롯을 true로 설정합니다.

CSSRotate(x, y, z, angle) 생성자는, 호출될 때 다음 단계를 수행해야 합니다:

angle이 매치되지 않으면 <angle>, TypeError를 TypeError로 throw합니다.
x, y, z를 숫자형 값 보정의 결과로 교체합니다.
x, y, z가 매치되지 않으면 <number>, TypeError를 TypeError로 throw합니다.
새로운 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(전달된 경우) 중 하나라도 매치되지 않으면 <number>, TypeError를 TypeError로 throw한다.
this를 새로운 CSSScale 객체로 생성하고, x 및 y 내부 슬롯을 각각 x, y로 설정한다.
z가 전달된 경우, this의 z 내부 슬롯을 z로 설정하고, this의 is2D 내부 슬롯을 false로 설정한다.
z가 전달되지 않은 경우, this의 z 내부 슬롯을 새로운 단위 값 (1, "number")로 설정하고, this의 is2D 내부 슬롯을 true로 설정한다.
this를 반환한다.

x, y, z 속성들은, 새로운 값 val로 설정될 때, 숫자형 값 보정을 val에 대해 수행하고 그 결과를 해당 내부 슬롯에 설정해야 한다.

CSSSkew(ax, ay) 생성자는, 호출될 때, 다음 단계를 수행해야 한다:

ax 또는 ay가 매치되지 않으면 <angle>, TypeError를 TypeError로 throw한다.
새로운 CSSSkew 객체를 반환한다. ax 및 ay 내부 슬롯을 각각 ax, ay로 설정하고, is2D 내부 슬롯을 true로 설정한다.

CSSSkewX(ax) 생성자는, 호출될 때, 다음 단계를 수행해야 한다:

ax가 매치되지 않으면 <angle>, TypeError를 TypeError로 throw한다.
새로운 CSSSkewX 객체를 반환한다. ax 내부 슬롯을 ax로 설정하고, is2D 내부 슬롯을 true로 설정한다.

CSSSkewY(ay) 생성자는, 호출될 때, 다음 단계를 수행해야 한다:

ay가 매치되지 않으면 <angle>, TypeError를 TypeError로 throw한다.
새로운 CSSSkewY 객체를 반환한다. ay 내부 슬롯을 ay로 설정하고, is2D 내부 슬롯을 true로 설정한다.

is2D 속성은 CSSSkew, CSSSkewX, CSSSkewY 객체에서, 설정 시 아무 동작도 하지 않는다.

참고: skew(), skewX(), skewY() 함수들은 항상 2D 변환을 나타낸다.

CSSPerspective(length) 생성자는, 호출될 때, 다음 단계를 수행해야 한다:

length가 CSSNumericValue인 경우:
1. length가 매치되지 않으면 <length>, TypeError를 TypeError로 throw한다.
그 외(length가 CSSNumericValue가 아닐 때):
1. 키워드형 값 보정을 length에 대해 수행한 뒤, length를 결과의 값으로 설정한다.
2. length가 ASCII 대소문자 구분 없이 none 키워드와 일치하는 값을 나타내지 않으면, TypeError를 TypeError로 throw한다.
새로운 CSSPerspective 객체를 반환한다. length 내부 슬롯을 length로 설정하고, is2D 내부 슬롯을 false로 설정한다.

is2D 속성은 CSSPerspective 객체에서, 설정 시 아무 동작도 하지 않는다.

참고: perspective() 함수는 항상 3D 변환을 나타낸다.

CSSMatrixComponent(matrix, options) 생성자는, 호출될 때, 다음 단계를 수행해야 한다:

this를 새로운 CSSMatrixComponent 객체로 생성하고, matrix 내부 슬롯을 matrix로 설정한다.
options가 전달되었고, is2D 필드가 있으면, this의 is2D 내부 슬롯을 해당 필드 값으로 설정한다.
그 외에는, this의 is2D 내부 슬롯을 matrix의 is2D 내부 슬롯 값으로 설정한다.
this를 반환한다.

각 CSSTransformComponent 는 여러 기본 변환 함수 중 하나에 대응할 수 있다. 예를 들어, x 값이 10px이고 y와 z 값이 0px인 CSSTranslate는 다음 중 어느 것이든 나타낼 수 있다:

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이나 fragment URL을 해석하는 동작은 일반 CSS와 동일하게 동작합니다.

예를 들어, 상대 URL은 해당하는 스타일시트의 URL을 기준으로 해석되거나 (혹은 style 요소나 style 속성에 지정된 경우에는 문서의 URL을 기준으로 해석됩니다.) 이 해석은 파싱 시점에 즉시 일어나는 것이 아니라, 값 계산 과정 중 아직 지정되지 않은 시점에 일어납니다.

따라서 어떤 요소의 스타일을 background-image: url(foo);로 설정하고, 그 값을 Typed OM으로 추출한 뒤 다른 문서의 요소에 설정하면, 소스와 대상 요소가 서로 다른 base URL을 제공하므로 각기 다르게 URL을 해석합니다.

반면, 만약 추출된 값이 계산된 값(computedStyleMap()에서 추출)이라면 이미 절대 URL로 해석된 상태이므로 어디에 설정하더라도 동일하게 동작합니다. (단, fragment URL인 경우에는 CSS가 다르게 처리하며 완전히 해석하지 않으므로 항상 현재 문서를 기준으로 해석됩니다.)

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를 SyntaxError로 throw하고 이 알고리즘을 중단합니다.
색상 값을 실체화하여 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 내부 슬롯이 "none"과 ASCII 대소문자 구분 없이 일치하면, val을 반환합니다.
SyntaxError를 throw합니다.

CSSColorPercent 보정 val:

만약 val이 double이라면, (val*100, "percent")에서 새 단위 값으로 대체합니다.
val이 DOMString이라면, 키워드형 값 보정 결과로 대체합니다.
val이 CSSNumericValue이고, <percentage>에 매치된다면, val을 반환합니다.
val이 CSSKeywordValue이고, value 내부 슬롯이 "none"과 ASCII 대소문자 구분 없이 일치하면, val을 반환합니다.
SyntaxError를 throw합니다.

CSSColorNumber 보정 val:

만약 val이 double이라면, (val, "number")에서 새 단위 값으로 대체합니다.
val이 DOMString이라면, 키워드형 값 보정 결과로 대체합니다.
val이 CSSNumericValue이고, <number>에 매치된다면, val을 반환합니다.
val이 CSSKeywordValue이고, value 내부 슬롯이 "none"과 ASCII 대소문자 구분 없이 일치하면, val을 반환합니다.
SyntaxError를 throw합니다.

CSSColorAngle 보정 val:

만약 val이 double이라면, (val, "deg")에서 새 단위 값으로 대체합니다.
val이 DOMString이라면, 키워드형 값 보정 결과로 대체합니다.
val이 CSSNumericValue이고, <angle>에 매치된다면, val을 반환합니다.
val이 CSSKeywordValue이고, value 내부 슬롯이 "none"과 ASCII 대소문자 구분 없이 일치하면, val을 반환합니다.
TypeError를 throw합니다.

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

TODO: 문자열 변환자(stringifier) 추가 필요

[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) 생성자는 호출될 때 다음 단계를 수행해야 합니다:

r, g, b 각각을 CSSColorRGBComp 보정 결과로 대체합니다. alpha는 CSSColorPercent 보정 결과로 대체합니다.
CSSRGB 객체를 새로 생성하여, r, g, b, alpha 내부 슬롯을 각각 r, g, b, alpha로 설정합니다.

r, g, b 속성들은 CSSRGB 값에서 새로운 값 val로 설정될 때, CSSColorRGBComp 보정을 val에 대해 수행하고 해당 내부 슬롯에 결과를 설정해야 합니다.

alpha 속성은 CSSRGB 값에서 새로운 값 val로 설정될 때, CSSColorPercent 보정을 val에 대해 수행하고 해당 내부 슬롯에 결과를 설정해야 합니다.

[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 속성은 CSSHSL 값에서 새로운 값 val로 설정될 때, CSSColorAngle 보정을 val에 대해 수행하고 해당 내부 슬롯에 결과를 설정해야 합니다.

s, l, alpha 속성들은 CSSHSL 값에서 새로운 값 val로 설정될 때, CSSColorPercent 보정을 val에 대해 수행하고 해당 내부 슬롯에 결과를 설정해야 합니다.

[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 속성은 CSSHWB 값에서 새로운 값 val로 설정될 때, CSSColorAngle 보정을 val에 대해 수행하고 해당 내부 슬롯에 결과를 설정해야 합니다.

w, b, alpha 속성들은 CSSHWB 값에서 새로운 값 val로 설정될 때, CSSColorPercent 보정을 val에 대해 수행하고 해당 내부 슬롯에 결과를 설정해야 합니다.

[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 속성들은 CSSLab 값에서 새로운 값 val로 설정될 때, CSSColorPercent 보정을 val에 대해 수행하고 해당 내부 슬롯에 결과를 설정해야 합니다.

a, b 속성들은 CSSLab 값에서 새로운 값 val로 설정될 때, CSSColorNumber 보정을 val에 대해 수행하고 해당 내부 슬롯에 결과를 설정해야 합니다.

[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 속성은 CSSLCH 값에서, 새로운 값 val로 설정될 때 CSSColorAngle 보정을 val에 대해 수행하고 해당 내부 슬롯에 그 결과를 설정해야 한다.

l, c, alpha 속성들은 CSSLCH 값에서, 새로운 값 val로 설정될 때 CSSColorPercent 보정을 val에 대해 수행하고 해당 내부 슬롯에 그 결과를 설정해야 한다.

[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 속성들은 CSSOKLab 값에서, 새로운 값 val로 설정될 때 CSSColorPercent 보정을 val에 대해 수행하고 해당 내부 슬롯에 그 결과를 설정해야 한다.

a, b 속성들은 CSSOKLab 값에서, 새로운 값 val로 설정될 때 CSSColorNumber 보정을 val에 대해 수행하고 해당 내부 슬롯에 그 결과를 설정해야 한다.

[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 속성은 CSSOKLCH 값에서, 새로운 값 val로 설정될 때 CSSColorAngle 보정을 val에 대해 수행하고 해당 내부 슬롯에 그 결과를 설정해야 한다.

l, c, alpha 속성들은 CSSOKLCH 값에서, 새로운 값 val로 설정될 때 CSSColorPercent 보정을 val에 대해 수행하고 해당 내부 슬롯에 그 결과를 설정해야 한다.

[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 속성은 CSSColor 값에서, 새로운 값 val로 설정될 때 키워드형 값 보정을 val에 대해 수행하고 해당 내부 슬롯에 그 결과를 설정해야 한다.

alpha 속성은 CSSColor 값에서, 새로운 값 val로 설정될 때 CSSColorPercent 보정을 val에 대해 수행하고 해당 내부 슬롯에 그 결과를 설정해야 한다.

set an indexed value val을 i 인덱스에 CSSColor 값의 channels 속성에 설정하려면:

val을 CSSColorPercent 보정의 결과로 대체한다.
channels의 backing list의 i번째 값을 val로 설정한다.

delete an indexed value val을 i 인덱스에서 CSSColor 값의 channels 속성에서 삭제하려면:

channels의 backing list에서 i번째 값을 Remove 한다.

5. `CSSStyleValue` 실체화(Reification)

이 섹션에서는 내부 표현에서 Typed OM 객체가 어떻게 생성되는지, 즉 실체화(reification) 과정을 설명합니다.

모든 실체화에 적용되는 일반 원칙이 있으며, 각 개별 규칙마다 반복해서 언급되지 않습니다:

내부 표현이 리스트 값 속성에서 온 경우, 이 리스트는 속성의 한 반복(iteration)을 어떻게 실체화하는지 정의합니다; 여러 반복은 StylePropertyMap.getAll()에서 여러 값 반환으로 반영됩니다.
내부 표현에 var() 참조가 포함된 경우, 어떤 속성이든 관계없이 컴포넌트 값 목록 실체화로 실체화합니다.

5.1. 속성별 규칙(Property-specific Rules)

아래 목록은 CSS의 모든 속성에 대해, 명시값(specified)과 계산값(computed) 모두에 대한 실체화 동작을 정의합니다.

미등록 커스텀 속성

명시값과 계산값 모두에 대해, 값에서 컴포넌트 값 목록 실체화를 수행하고 그 결과를 반환합니다.

등록된 커스텀 속성

CSS Properties and Values API 1 § 6.2 CSSStyleValue Reification에서 설명한 대로 실체화됩니다.

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로 실체화하여 결과를 반환합니다.

계산값의 경우:

각각의 각도(angle)에서 숫자값 실체화를 수행하여 결과를 반환합니다.

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

명시값과 계산값 모두에 대해, 해당 값에서 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

명시값과 계산값 모두에 대해, 해당 값에서 식별자를 실체화하여 결과를 반환합니다.

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로 실체화하여 property에 대한 value를 얻는 방법:

value를 나타내는 새로운 CSSStyleValue 객체를 반환하고, 그 [[associatedProperty]] 내부 슬롯을 property로 설정한다.

5.3. 원시 CSS 토큰: var() 참조를 가진 속성

해당 속성의 문법이 어떠하든, 치환되지 않은 var() 참조를 포함한 속성 값은 목록 형태의 구성 값으로 표현되며, Typed OM에서는 CSSUnparsedValue가 된다.

구성 값 목록을 실체화하기 위해 list에서 수행할 단계:

list 안의 모든 var() 참조를 CSSVariableReferenceValue 객체로 치환한다. 자세한 내용은 § 5.4 var() References를 참조한다.
list에서 남아 있는 구성 값들의 각 최대 연속 구간을 그 직렬화 결과를 이어 붙인 단일 문자열로 치환한다.
CSSUnparsedValue를 새로 생성하여 그 [[tokens]] 슬롯을 list로 설정하고 반환한다.

문자열 "calc(42px + var(--foo, 15em) + var(--bar, var(--far) + 15px))"는 다음을 포함하는 시퀀스를 가진 CSSUnparsedValue로 변환된다:

문자열 "calc(42px + "
CSSVariableReferenceValue 하나(구성:)
- variable "--foo"
- fallback — CSSUnparsedValue 하나로서, " 15em"을 포함하는 단일 값 시퀀스를 가진다
문자열 " + "
CSSVariableReferenceValue 하나(구성:)
- variable "--bar"
- fallback — CSSUnparsedValue 하나로서, 다음을 포함하는 시퀀스를 가진다:
  - 문자열 " "
  - CSSVariableReferenceValue 하나
    - variable "--far"
    - fallback null
  - 문자열 " + 15px"
문자열 ")"

5.4. var() 참조

var() 참조는 Typed OM에서 CSSVariableReferenceValue가 된다.

var() 참조를 실체화할 var에 대하여:

object를 새로운 CSSVariableReferenceValue로 둔다.
변수 이름을 제공하는 <custom-ident>의 직렬화 결과를 object의 variable 내부 슬롯에 설정한다.
var에 폴백 값이 있다면, object의 fallback 내부 슬롯을 폴백의 구성 값을 실체화한 결과로 설정한다. 그렇지 않다면 null로 설정한다.
object를 반환한다.

5.5. 식별자 값

CSS 식별자는 Typed OM에서 CSSKeywordValue가 된다.

식별자 실체화 대상 ident에 대하여:

ident의 직렬화 결과를 그 value 내부 슬롯에 설정한 새로운 CSSKeywordValue를 반환한다.

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>이면 "number", <percentage>이면 "percent", <dimension>이면 num의 단위로 설정한다.

실체화되는 값이 계산값인 경우, 사용되는 단위는 해당 값 유형에 맞는 적절한 정준 단위여야 하며, 그에 따라 수치값이 스케일되어야 한다.

예를 들어, 어떤 요소에 style="width: 1in;"이 설정되어 있다면, el.attributeStyleMap.get('width') 는 CSS.in(1)을 반환하지만, el.computedStyleMap.get('width') 는 CSS.px(96)을 반환한다. 이는 px가 절대 길이에 대한 정준 단위이기 때문이다.

수식 실체화 대상 num에 대하여:

num이 min() 또는 max() 표현식이라면:
1. 실체화를 각 인자에 대해 수행하되, 각 인자를 calc()의 내용물로 간주하여 얻은 결과를 values로 둔다.
2. CSSMathMin 또는 CSSMathMax 객체를 각각 새로 생성하여, 그 values 내부 슬롯을 values로 설정하고 반환한다.
그 밖의 경우라면, num은 calc()이다.
num의 인자를 표준 PEMDAS 우선순위 규칙을 사용하여 표현식 트리로 변환하되, 다음 예외/설명을 적용한다:
- 뺄셈은 덧셈으로 취급하고, 오른쪽 인자는 특별한 "negate" 노드로 감싼다.
- 나눗셈은 곱셈으로 취급하고, 오른쪽 인자는 특별한 "invert" 노드로 감싼다.
- 덧셈과 곱셈은 N-항 연산이며, 각 노드는 임의 개수의 인자를 가질 수 있다.
- 표현식에 단 하나의 값만 있고 연산이 없다면, 그 값을 단일 인자로 갖는 덧셈 노드로 취급한다.
다음과 같이 표현식 트리를 재귀적으로 객체로 변환한다:

덧셈 노드

새로운 CSSMathSum 객체가 되며, 그 values 내부 슬롯을 인자 목록으로 설정한다

곱셈 노드

새로운 CSSMathProduct 객체가 되며, 그 values 내부 슬롯을 인자 목록으로 설정한다

부호 반전(negate) 노드

새로운 CSSMathNegate 객체가 되며, 그 value 내부 슬롯을 자신의 인자로 설정한다

역수(invert) 노드

새로운 CSSMathInvert 객체가 되며, 그 value 내부 슬롯을 자신의 인자로 설정한다

리프(leaf) 노드

상황에 맞게 실체화된다

예를 들어, 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 내부 슬롯을 각각 빨강, 초록, 파랑, 알파 구성요소를 실체화한 값으로 설정하여 반환한다.
val이 hsl() 또는 hsla() 함수라면, 새로운 CSSHSL 객체를 생성하여 그 h, s, l, 그리고 alpha 내부 슬롯을 각각 색상 각도, 채도, 명도, 알파를 실체화한 값으로 설정하여 반환한다.
val이 hwb() 함수라면, 새로운 CSSHWB 객체를 생성하여 그 h, w, b, 그리고 alpha 내부 슬롯을 각각 색상 각도, whiteness, blackness, 알파를 실체화한 값으로 설정하여 반환한다.
val이 lch() 함수라면, 새로운 CSSLCH 객체를 생성하여 그 l, c, h, 그리고 alpha 내부 슬롯을 각각 밝기(lightness), 크로마(chroma), 색상 각도, 알파를 실체화한 값으로 설정하여 반환한다.
val이 lab() 함수라면, 새로운 CSSLab 객체를 생성하여 그 l, a, b, 그리고 alpha 내부 슬롯을 각각 밝기(lightness), a, b, 알파를 실체화한 값으로 설정하여 반환한다.
val이 color() 함수라면, 새로운 CSSColor 객체를 생성하여 그 colorSpace 내부 슬롯을 val의 색 공간에서 식별자 실체화를 수행한 결과로 설정하고, channels 내부 슬롯의 백킹 목록을 비-알파 구성요소 목록을 실체화한 결과로 설정하며, alpha 내부 슬롯은 val의 알파 구성요소를 실체화한 결과로 설정한다.
val이 <named-color>이거나 키워드 transparent라면, 새로운 CSSRGB 객체를 생성하여 그 r, g, b, 그리고 alpha 내부 슬롯을 각각 빨강, 초록, 파랑, 알파를 실체화한 값으로 설정하여 반환한다.
그 밖의 다른 색 키워드인 경우, val에서 식별자 실체화 결과를 반환한다.

5.8. <transform-list> 및 <transform-function> 값

CSS <transform-list> 값은 Typed OM에서 CSSTransformValue가 되고, CSS <transform-function> 값은 CSSTransformComponent가 된다.

<transform-list> 실체화 대상 list에 대하여:

CSSTransformValue를 새로 생성하여 그 반복(iterate)할 값들을 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 내부 슬롯을 지정된 길이의 실체화 결과로 설정한다 (길이인 경우 숫자값 실체화, 키워드가 none인 경우 식별자 실체화를 각각 적용). 또한 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을 전달한다. 그 결과를 반환한다.
그 밖의 경우, this에서 CSSMathValue 직렬화를 수행하고 그 결과를 반환한다.

6.4. `CSSUnitValue` 직렬화

CSSUnitValue 직렬화 this, 선택적 인자 minimum(숫자값), 및 maximum(숫자값)을 사용하여:

value와 unit을 각각 this의 value 및 unit 내부 슬롯으로 둔다.
s를 value에서 <number>를 직렬화한 결과로 설정하되, CSSOM § 6.7.2 CSS 값 직렬화에 따른다.
unit이 다음 중 하나라면:

"number"

아무 것도 하지 않는다.

"percent"

"%"를 s에 덧붙인다.

그 밖의 모든 값

unit을 s에 덧붙인다.
minimum이 전달되었고 this가 minimum보다 작은 경우, 또는 maximum이 전달되었고 this가 maximum보다 큰 경우, 또는 minimum 및/또는 maximum이 전달되었으나 현재 이용 가능한 정보로는 this와 minimum/maximum의 상대 크기를 결정할 수 없는 경우, "calc("를 s의 앞에 붙이고, 이어서 ")"를 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의 반복(iterate)할 값들에 있는 각 항목을 직렬화한 결과를, " "로 구분하여 이어 붙인 값을 반환한다.

CSSTranslate 직렬화 this:

s를 처음에는 빈 문자열로 둔다.
this의 is2D 내부 슬롯이 false이면:
1. "translate3d("를 s에 덧붙인다.
2. this의 x 내부 슬롯을 직렬화하고, 그 결과를 s에 덧붙인다.
3. ", "를 s에 덧붙인다.
4. this의 y 내부 슬롯을 직렬화하고, 그 결과를 s에 덧붙인다.
5. ", "를 s에 덧붙인다.
6. this의 z 내부 슬롯을 직렬화하고, 그 결과를 s에 덧붙인다.
7. ")"를 s에 덧붙이고, s를 반환한다.
그 밖의 경우:
1. "translate("를 s에 덧붙인다.
2. this의 x 내부 슬롯을 직렬화하고, 그 결과를 s에 덧붙인다.
3. ", "를 s에 덧붙인다.
4. this의 y 내부 슬롯을 직렬화하고, 그 결과를 s에 덧붙인다.
5. ")"를 s에 덧붙이고, s를 반환한다.

CSSRotate 직렬화 this:

s를 처음에는 빈 문자열로 둔다.
this의 is2D 내부 슬롯이 false이면:
1. "rotate3d("를 s에 덧붙인다.
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. "rotate("를 s에 덧붙인다.
2. this의 angle 내부 슬롯을 직렬화하고, 그 결과를 s에 덧붙인다.
3. ")"를 s에 덧붙이고, s를 반환한다.

CSSScale 직렬화 this:

s를 처음에는 빈 문자열로 둔다.
this의 is2D 내부 슬롯이 false이면:
1. "scale3d("를 s에 덧붙인다.
2. this의 x 내부 슬롯을 직렬화하고, 그 결과를 s에 덧붙인다.
3. ", "를 s에 덧붙인다.
4. this의 y 내부 슬롯을 직렬화하고, 그 결과를 s에 덧붙인다.
5. ", "를 s에 덧붙인다.
6. this의 z 내부 슬롯을 직렬화하고, 그 결과를 s에 덧붙인다.
7. ")"를 s에 덧붙이고, s를 반환한다.
그 밖의 경우:
1. "scale("를 s에 덧붙인다.
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 내부 슬롯을, minimum을 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 FORWARD SLASH 뒤에 U+0020 SPACE)을 border-image-width의 직렬화 결과에 덧붙인 뒤 이를 values에 덧붙인다.
border-image-outset이 모든 변에 대해 0을 지정하지 않았다면:
1. 앞선 border-image-width 단계에서 values에 아무 것도 덧붙이지 않았다면 prefix를 "// "(U+002F FORWARD SLASH 두 개 뒤에 U+0020 SPACE)로, 그렇지 않으면 prefix를 "/ "(U+002F FORWARD SLASH 뒤에 U+0020 SPACE)로 둔다.
2. prefix를 border-image-outset의 직렬화 결과 앞에 붙인 뒤 이를 values에 덧붙인다.
border-image-repeat이 양 축 모두에서 stretch가 아니라면, border-image-repeat를 직렬화하여 values에 덧붙인다.
values가 비어 있다면, "none"을 values에 덧붙인다.
values의 모든 항목을 " " (U+0020 SPACE)로 구분하여 이어 붙인 결과를 반환한다.

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일 작업 초안 이후의 변경 사항

타입 일치 알고리즘이 percent 힌트를 보다 추상적으로 참조하도록 수정.
"타입을 반전(invert)"할 때 percent 힌트를 보존해야 함을 명확히 함.
CSS 숫자 팩토리에 누락된 폰트 단위를 추가. (#1107)
구현의 지원 범위에 맞추어 단위 단축 메서드 목록을 축소 또는 확장해야 함을 규정.
"StylePropertyMapReadOnly.get()"에 undefined union 값을 사용. (#1087)
변환은 Typed OM의 범위가 아니므로 .to()와 CSSColorValue.colorSpace를 제거. (#1070)
"CSSUnitValue 직렬화"에 min/max를 추가하고, CSSPerspective의 인자를 직렬화할 때 이를 전달. (#1069)
실체화 대상을 "a CSSStyleValue"에서 "an identifier"로 변경. (#1068)
새로운 뷰포트/컨테이너 단위를 위한 팩토리 함수 추가. (#1067)
CSSNumericValue.parse에 타입 검사 추가. (#1065)
CSSDeviceCMYK 제거, CSSOKLab 및 CSSOKLCH 추가, 모든 색 클래스가 "none" 키워드 허용.
색 값을 실체화하는 방법을 정의.
"new unit value"가 "create a CSSUnitValue from a pair"로 연결되도록 허용(이미 널리 사용되는 표현이므로).
CSSPerspective에 perspective(none) 지원 추가. (#1053)
CSSClampValue.min/max가 CSSNumericValue.min/max와 충돌하던 문제 수정. (#855)
초록(요약) 단순화.
Color 4가 gray()를 삭제했으므로 CSSGray 및 관련 명세 텍스트 제거. (#1027)
.colorSpace를 CSSColorValue 상위 클래스로 이동. .to*() 색 변환 함수를 일반화된 .to(colorSpace) 메서드로 교체. (#1036)
device-cmyk() 지원 추가.
최근 단순화에 맞추어 CSSColor의 OM 수정.
각 CSSColorValue 하위 클래스가 대응하는 색 함수를 규정하고, CSSGray 추가.
유니온에 누락된 괄호 추가. (#1016)
"type"의 구성에 대한 설명 텍스트 일부 추가.
Web IDL 명세와 정합되도록 조정. (#965 및 #1006)
알고리즘 중첩 수정.
WebIDL 업데이트에 따라 기본 딕셔너리 값 추가. (#936)
"underlying value" 용어를 ":internal representation"로 변경(웹 애니메이션에서 "underlying value"를 다른 의미로 사용하기 때문).
CSSSTyleValue로 실체화하려면 속성이 필요함을 명확히 함.
등록된 커스텀 속성의 실체화 동작 정의 (#886)
partial interface mixin ElementCSSInlineStyle 사용 (#853)
indexed property getter에 대해 WebIDL의 올바른 이름 사용.
다른 명세에서 사용할 수 있도록 다수의 용어를 내보냄.
이 레벨에서 CSSPositionValue 제거.
"clamp()" 함수용 CSSMathClamp 추가.
"문법과 일치시키기(match a grammar)" 알고리즘을 더욱 정밀하게 수정.
계산된 수치값의 실체화는 정준 단위를 사용. (#725)
새 단위 유형에 대한 주석 추가. (#734)
"percentage"가 아닌 올바른 단위 "percent" 사용 (#761).
커스텀 속성 파싱에 대한 주석 추가.
Naina Raisinghani를 전(前) 편집자로 이동.
"invert a type" 연산 추가.
CSS Values & Units가 참조할 수 있도록 여러 수치형 용어를 내보냄.
Shane Stephens를 전(前) 편집자로 이동.

적합성

문서 규약

적합성 요구사항은 설명적 단언과 RFC 2119 용어의 조합으로 표현된다. 규범적인 부분에서 “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, “OPTIONAL”이라는 핵심 단어는 RFC 2119에서 설명한 대로 해석되어야 한다. 다만 가독성을 위해, 이 명세에서는 이러한 단어들이 모두 대문자로 표기되지는 않는다.

명시적으로 비규범으로 표시된 절, 예제, 주석을 제외한 이 명세의 모든 텍스트는 규범적이다. [RFC2119]

이 명세의 예제는 “for example”라는 문구로 소개되거나, 다음과 같이 규범적 텍스트와 class="example"로 구분되어 제시된다:

정보 제공용 주석은 “Note”라는 단어로 시작하며, 다음과 같이 class="note"로 규범적 텍스트와 구분되어 제시된다:

권고(Advisement)는 특별한 주의를 촉구하도록 스타일링된 규범적 절이며 다음과 같이 다른 규범적 텍스트와 <strong class="advisement">로 구분되어 제시된다: UAs MUST provide an accessible alternative.

적합성 클래스

이 명세에 대한 적합성은 세 가지 적합성 클래스로 정의된다:

이 모듈에서 정의된 구문을 사용하는 모든 문이 일반적인 CSS 문법과 이 모듈에서 정의된 각 기능의 개별 문법에 따라 유효하다면, 스타일시트는 이 명세에 적합하다.

렌더러는, 해당 명세에 정의된 대로 스타일시트를 해석하는 것에 더해, 이 명세가 정의하는 모든 기능을 올바르게 파싱하고 그에 따라 문서를 렌더링함으로써 이 명세에 적합하다. 다만, 기기 한계로 인해 문서를 올바르게 렌더링할 수 없는 경우라도 그 사실만으로 UA가 비적합하게 되지는 않는다. (예: UA는 모노크롬 모니터에서 색상을 렌더링할 필요가 없다.)

저작 도구는, 이 모듈에서 정의된 각 기능의 개별 문법과 일반적인 CSS 문법에 따라 문법적으로 올바른 스타일시트를 작성하고, 이 모듈에 기술된 스타일시트의 다른 모든 적합성 요구사항을 충족하는 경우, 이 명세에 적합하다.

부분 구현

작성자가 전달값을 지정하여 폴백 값을 활용할 수 있도록, CSS 렌더러는 사용 가능한 수준의 지원이 없는 at-rule, 속성, 속성 값, 키워드, 기타 구문 구성요소를 모두 무효로 처리하고 (적절히 무시) 해야 한다. 특히, 사용자 에이전트는 단일 다중값 속성 선언에서 지원되지 않는 구성 값만 선택적으로 무시하고 지원되는 값만 적용해서는 안 된다: 어떤 값이 무효(지원되지 않는 값은 무효로 간주됨)라면, CSS는 전체 선언을 무시하도록 요구한다.

불안정 및 독점 기능의 구현

향후 안정적인 CSS 기능과의 충돌을 피하기 위해, CSSWG는 모범 사례를 따라 불안정 기능과 CSS에 대한 독점 확장을 구현할 것을 권장한다.

비실험적 구현

명세가 후보 권고(CR) 단계에 도달하면, 비실험적 구현이 가능하며, 구현자는 명세에 따라 올바르게 구현되었음을 입증할 수 있는 모든 CR 수준 기능에 대해 접두어 없는(unprefixed) 구현을 공개해야 한다.

CSS 구현 간 상호 운용성을 확립하고 유지하기 위해, CSS 워킹 그룹은 비실험적 CSS 렌더러가 접두어 없는 구현을 공개하기 전에 구현 보고서(필요하다면, 해당 구현 보고서에 사용된 테스트케이스 포함)를 W3C에 제출할 것을 요청한다. W3C에 제출된 테스트케이스는 CSS 워킹 그룹의 검토 및 수정 대상이 된다.

테스트케이스와 구현 보고서 제출에 대한 더 자세한 정보는 CSS 워킹 그룹 웹사이트 https://www.w3.org/Style/CSS/Test/에서 확인할 수 있다. 문의는 public-css-testsuite@w3.org 메일링 리스트로 보내야 한다.

CSS 타입드 OM 레벨 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 객체

4.5. CSSImageValue 객체

4.6. CSSColorValue 객체

5. CSSStyleValue 실체화(Reification)

5.1. 속성별 규칙(Property-specific Rules)

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 색인

이슈 색인

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` 객체

4.5. `CSSImageValue` 객체

4.6. `CSSColorValue` 객체

5. `CSSStyleValue` 실체화(Reification)

6. `CSSStyleValue` 직렬화

6.1. `CSSUnparsedValue` 직렬화

6.2. `CSSKeywordValue` 직렬화

6.3. `CSSNumericValue` 직렬화

6.4. `CSSUnitValue` 직렬화

6.5. `CSSMathValue` 직렬화

6.6. `CSSTransformValue` 및 `CSSTransformComponent` 직렬화