FPWD: CSS Typed OM Level 1

CSS Typed OM Level 1

http://www.w3.org/TR/2016/WD-css-typed-om-1-20160607/

Abstract



Converting CSSOM value strings into meaningfully typed JavaScript representations and back can incur a significant performance overhead. This specification exposes CSS values as typed JavaScript objects to facilitate their performant manipulation.

Status of the Document



This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.

This document is a First Public Working Draft.

Publication as a First Public Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

The (archived) public mailing list public-houdini@w3.org (see instructions) is preferred for discussion of this specification. When sending e-mail, please put the text “css-typed-om” in the subject, preferably like this: “[css-typed-om] …summary of comment…”

This document was jointly produced by the CSS Working Group and the Technical Architecture Group.

This document was produced by groups operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures ( CSS, TAG) made in connection with the deliverables of the groups; those pages also include instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.

This document is governed by the 1 September 2015 W3C Process Document.


Table of Contents 1 Introduction 2 CSSStyleValue objects 2.1 CSSTokenStreamValue objects 3 The StylePropertyMap 3.1 Computed StylePropertyMapReadOnly objects 3.2 Specified StylePropertyMap objects 3.3 Inline StylePropertyMap objects 4 CSSStyleValue subclasses 4.1 CSSKeywordValue objects 4.2 CSSNumberValue objects 4.3 CSSLengthValue objects 4.4 CSSAngleValue objects 4.5 CSSTransformValue objects 4.6 CSSPositionValue objects 4.7 CSSResourceValue objects 4.8 CSSImageValue objects 4.9 CSSFontFaceValue objects 5 Mapping of properties to accepted types 6 CSSStyleValue normalization 6.1 CSSTokenStreamValue normalization 6.2 CSSKeywordValue normalization 6.3 CSSNumberValue normalization 6.4 CSSLengthValue normalization 6.5 CSSAngleValue normalization 6.6 CSSTransformValue normalization 6.7 CSSPositionValue normalization 6.7.1 Determining x or y from a single value 6.7.2 Determining x or y from a keyword and a length 6.8 CSSResourceValue normalization 7 Security Considerations 8 Privacy Considerations Appendix A: Coputed CSSStyleValue objects Computed CSSTokenStreamValue objects Computed CSSKeywordValue objects Computed CSSNumberValue objects Computed CSSLengthValue objects Computed CSSAngleValue objects Computed CSSTransformValue objects Computed CSSPositionValue objects Computed CSSImageValue objects Computed CSSFontFaceValue objects Conformance Document conventions Conformance classes Partial implementations Experimental implementations Non-experimental implementations Index Terms defined by this specification Terms defined by reference References Normative References IDL Index Issues Index1. Introduction Converting CSSOM value strings into meaningfully typed JavaScript representations and back can incur a significant performance overhead. This specification exposes CSS values as typed JavaScript objects to facilitate their performant manipulation. The API exposed by this specification is designed for performance rather than ergonomics. Some particular considerations: retrieved JavaScript representations of CSS vales are not mutable - instead updates must explicitly be set using the API. objects are organized for consistency rather than ease of access. For example, even though lengths are often numeric pixel values, a specified CSSLengthValue can’t be treated as a number without first explicitly casting it to a CSSSimpleLength, as calc expressions and keywords are also valid lengths. 2. CSSStyleValue objects interface CSSStyleValue { attribute DOMString cssText; static (CSSStyleValue or sequence<CSSStyleValue>)? parse(DOMString property, DOMString cssText); }; CSSStyleValue objects are the base class of all CSS Values accessible via the Typed OM API. Unsupported values are also represented as CSSStyleValue objects. The cssText attribute provides a normalized representation (see §6 CSSStyleValue normalization) of the value contained by a CSSStyleValue object. The parse(DOMString property, DOMString cssText) method attempts to parse cssText as a valid CSSStyleValue or sequence<CSSStyleValue> for property returning null on failure. 2.1. CSSTokenStreamValue objects interface CSSTokenStreamValue : CSSStyleValue { iterable<(DOMString or CSSVariableReferenceValue)>; }; interface CSSVariableReferenceValue { attribute DOMString variable; attribute CSSTokenStreamValue fallback; }; CSSTokenStreamValue objects represent values that reference custom properties. They represent a list of string fragments and variable references. 3. The StylePropertyMap interface StylePropertyMapReadOnly { CSSStyleValue? get(DOMString property); sequence<CSSStyleValue> getAll(DOMString property); boolean has(DOMString property); iterable<DOMString, (CSSStyleValue or sequence<CSSStyleValue> or DOMString)>; sequence<DOMString> getProperties(); stringifier; }; interface StylePropertyMap : StylePropertyMapReadOnly { void append(DOMString property, (CSSStyleValue or DOMString)... values); void delete(DOMString property); void set(DOMString property, (CSSStyleValue or DOMString)... values); }; A StylePropertyMapRadOnly object has an associated property model, which is a list of property - sequence<CSSStyleValue> pairs. This list is initialized differently depending on where the CSSStyleValue is used (see §3.1 Computed StylePropertyMapReadOnly objects, §3.2 Specified StylePropertyMap objects, and §3.3 Inline StylePropertyMap objects). The sequence of CSSStyleValues associated with a property do not represent multiple successive definitions of that property’s value. Instead, sequences represent values associated with list-valued properties. This approach allows single-valued properties to become list-valued in the future without breaking code that relies on calling get() and/or set() for those properties. When invoked, the append(DOMString property (CSSStyleValue or DOMString)... values) method follows the following steps: first need to check whether the property is a valid property. <https://github.com/w3c/css-houdini-drafts/issues/143> if property is not list-valued throw a TypeError if the propert model has no entry for property initialize an empty sequence in the property model for property for each value in values, if value is a CSSStyleValue, and its type is a type that property can’t accept throw a TypeError for each value in values, if value is a DOMString set value to the result of invoking parse(), providing property and value as inputs. if any value in values is null throw a TypeError else concatenate values onto the end of the entry in the property model should refactor out value type-checking, as it’ll be needed by the rest of the setters too <https://github.com/w3c/css-houdini-drafts/issues/145> need a robust description of what "a type that property can’t accept" means. <https://github.com/w3c/css-houdini-drafts/issues/147> add detailed descriptions of the rest of the methods on StylePropertyMap <https://github.com/w3c/css-houdini-drafts/issues/148> describe that these are not live objects <https://github.com/w3c/css-houdini-drafts/issues/149> 3.1.Computed StylePropertyMapReadOnly objects partial interface Window { StylePropertyMapReadOnly getComputedStyleMap(Element element, optional DOMString? pseudoElt); }; Computed StylePropertyMap objects represent the computed style of an Element or pseudo element, and are accessed by calling the getComputedStyleMap(Element, optional DOMString?) method. When constructed, the property model for computed StylePropertyMap objects is initialized to contain an entry for every valid CSS property supported by the User Agent. Note: The StylePropertyMap returned by getComputedStyleMap represents computed style, not resolved style. In this regard it provides different values than those in objects returned by getComputedStyle. 3.2. Specified StylePropertyMap objects partial interface CSSStyleRule { [SameObject] readonly attribute StylePropertyMap styleMap; }; Specified StylePropertyMap objects represent style property-value pairs embedded in a style rule, and are accessed via the styleMap attribute of CSSStyleRule objects When constructed, the property model for specified StylePropertyMap objects is initialized to contain an entry for each property that is paired with at least one valid value inside the CSSStyleRule that the object represents. The value for a given property is the last valid value provided by the CSSStyleRule object. 3.3. Inline StylePropertyMap objects partial interface Element { [SameObject] readonly attribute StylePropertyMap styleMap; }; Inline StylePropertyMap objects represent inline style declarations attached directly to Elements. They are accessed via the styleMap attribute of Element objects. When constructed, the property model for inline StylePropertyMap objects is initialized to contain an entry for each property that is paired with at least one valid value in the string representing the style attribute for the Element that the object is associated with. The value for a given property is the last valid value provided in the string. 4. CSSStyleValue subclasses 4.1. CSSKeywordValue objects [Constuctor(DOMString)] interface CSSKeywordValue : CSSStyleValue { attribute DOMString keywordValue; }; CSSKeywordValue objects represent CSSStyleValues that are keywords. The constructor for CSSKeywordValue should check that they contain valid CSS, but they do not check whether the contained string is a valid keyword for a particular property. Property setters are required to enforce keyword validity. 4.2. CSSNumberValue objects [Constructor(double), Constructor(DOMString cssText)] interface CSSNumberValue : CSSStyleValue { attribute double value; }; CSSNumberValue objects represent values for simple number-valued properties like z-index or opacity. CSSNumberValue objects are not range-restricted. Any valid number can be represented by a CSSNumberValue, and that value will not be clamped, rounded, or rejected when set on a specified StylePropertyMap or inline StylePropertyMap. Instead, clamping and/or rounding will occur during computation of style. The following code is valid myElement.styleMap.set("opaciy", new CSSNumberValue(3)); myElement.styleMap.set("z-index", new CSSNumberValue(15.4)); console.log(myElement.styleMap.get("opacity").value); // 3 console.log(myElement.styleMap.get("z-index").value); // 15.4 var computedStyle = getComputedStyleMap(myElement); var opacity = computedStyle.get("opacity"); var zIndex = computedStyle.get("z-index"); After execution, the value of opacity is 1 (opacity is range-restricted), and the value of zIndex is 15 (z-index is rounded to an integer value). where does a description of parsing values go? For example, where do we indicate that calc(4 + 8) will create a CSSNumberValue with a value of 12? <https://github.com/w3c/css-houdini-drafts/issues/140> 4.3. CSSLengthValue objects enum LengthType { "px", "percent", "em", "ex", "ch", "rem", "vw", "vh", "vmin", "vmax", "cm", "mm", "q", &uot;in", "pc", "pt" }; dictionary CSSCalcDictionary { double px; double percent; double em; double ex; double ch; double rem; double vw; double vh; double vmin; double vmax; double cm; double mm; double q; double in; double pc; double pt; }; interface CSSLengthValue : CSSStyleValue { CSSLengthValue add(CSSLengthValue value); CSSLengthValue subtract(CSSLengthValue value); CSSLengthValue multiply(double value); CSSLengthValue divide(double value); static CSSLengthValue from(DOMString cssText); static CSSLengthValue from(double value, LengthType type); static CSSLengthValue from(CSSCalcDictionary dictionary); }; [Constructor(DOMString cssText), Constructor(CSSLengthValue), Constructor(CSSCalcDictionary) ] interface CSSCalcLength : CSSLengthValue { attribute double? px; attribute double? percent; attribute double? em; attribute double? ex; attribute double? ch; attribute double? rem; attribute double? vw; attribute double? vh; attribute double? vmin; attribute double? vmax; attribute doble? cm; attribute double? mm; attribute double? q; attribute double? in; attribute double? pc; attribute double? pt; }; // lengths that are *just* keywords don’t become CSSSimpleLengths or CSSCalcLengths. // Instead they are represented as CSSKeywordValue objects. [Constructor(DOMString cssText), Constructor(CSSLengthValue), Constructor(double value, LengthType type)] interface CSSSimpleLength : CSSLengthValue { attribute double value; readonly attribute LengthType type; }; CSSLengthValue objects represent lengths: CSSSimpleLength objects represent lengths that contain a single unit type (for example "42px"). CSSCalcLength objects represent lengths that contain multiple units (for example "calc(56em + 10%)"). CSSLengthValue objects are not range-restricted. Any valid combination of primitive lengths can be represented by a CSSLengthValue, that value will be accepted unaltered when set on a specified StylePropertyMap or inline StylePropertyMap. Instead, clamping and/or rounding will ocur during computation of style. Note that lengths which incorporate variable references will instead be represented as CSSTokenStreamValue objects, and keywords as CSSKeywordValue objects. The following methods are defined for CSSLengthValue objects: add(CSSLengthValue value) Adds the provided value to the length represented by the object, and returns the result as a new CSSLengthValue. This will construct a CSSSimpleLength or CSSCalcLength depending on whether the result can be expressed in terms of a single unit. subtract(CSSLengthValue value) Subtracts the provided value from the length represented by the object, and returns the result as a new CSSLengthValue. This will construct a CSSSimpleLength or CSSCalcLength depending on whether the result can be expressed in terms of a single unit. multiply(double value) Multiplies the length represented by the object by the provided value, and returns the result as a new CSSLengthValue. This will construct a CSSSimpleLength if the object is a CSSSimpleLength, or  CSSCalcLength if the object is a CSSCalcLength. divide(double value) Divides the length represented by the object by the provided value, and returns the result as a new CSSLengthValue. This will construct a CSSSimpleLength if the object is a CSSSimpleLength, or a CSSCalcLength if the object is a CSSCalcLength. The function will throw a RangeError when the value given is 0. from(DOMString cssText) Parses the provided cssText as a length value. Will return a CSSSimpleLength when possible, or a CSSCalcLength otherwise. The function will throw a SyntaxError, when the DOMString it is passed doesn’t represent a valid length. from(double value, LengthType type) Constructs a CSSSimpleLength with the given value and unit type. from(CSSCalcDictionary dictionary) Constructs a CSSCalcLength with units and values as defined by the provided dictionary. 4.4. CSSAngleValue objects enum CSSAngleUnit { "deg", "rad", "grad", "turn" }; [Constructor(double value, CSSAngleUnit unit)] inerface CSSAngleValue : CSSStyleValue { readonly attribute double degrees; readonly attribute double radians; readonly attribute double gradians; readonly attribute double turns; }; CSSAngleValue objects represent CSS angles. Once constructed, a CSSAngleValue provides attributes that reflect the size of the angle in each of the CSS angle units represented by the CSSAngleUnit enum. 4.5. CSSTransformValue objects [Constructor(), Constructor(sequence<CSSTransformComponent> transforms)] interface CSSTransformValue : CSSStyleValue { iterable<CSSTransformComponent>; readonly attribute boolean is2D; readonly attribute DOMMatrixReadOnly matrix; }; interface CSSTransformComponent { readonly attribute DOMString cssText; readonly attribute boolean is2D; readonly attribute DOMMatrixReadOnly matrix; }; [Constructor(CSSLengthValue x, CSSLengthValue y), Constructor(CSSLengthValue x, CSSLengthValue y, CSSLengthValue z)] interface CSSTranslation : CSSTransformComponent { readonly attribute CSSLengthValue x; readoly attribute CSSLengthValue y; readonly attribute CSSLengthValue z; }; [Constructor(double degrees), Constructor(CSSAngleValue angle), Constructor(double degrees, double x, double y, double z), Constructor(CSSAngleValue angle, double x, double y, double z)] interface CSSRotation : CSSTransformComponent { readonly attribute double angle; readonly attribute double x; readonly attribute double y; readonly attribute double z; }; [Constructor(double x, double y), Constructor(double x, double y, double z)] interface CSSScale : CSSTransformComponent { readonly attribute double x; readonly attribute double y; readonly attribute double z; }; [Constructor(double ax, double ay)] interface CSSSkew : CSSTransformComponent { readonly attribute double ax; readonly attribute double ay; }; [Constructor(CSSLengthValue length)] interface CSSPerspective : CSSTransformComponent { readonly attribute CSSLengthValue length; }; [Constructor(DOMMatrixReadOnly matrix)] interface CSSMatrix : CSSTransformComponent { }; CSSTransformValu objects represent values for the transform property. A CSSTransformValue represents a list of CSSTransformComponents. CSSTransformComponent objects have the following properties: The is2D attribute is true if the component represents a 2D transform function, and false otherwise. The transform function which the component represents is stored in string form in the cssText attribute. Each CSSTransformComponent can correspond to one of a number of underlying transform functions. For example, a CSSTranslation with an x value of "10px" and y & z values of 0 could be: translate(10px) translate(10px, 0) translateX(10px) translate3d(10px, 0, 0) When a CSSRotation is constructed with a double (as opposed to a CSSAngleValue), the angle is taken to be in degrees. The following two CSSRotations are equivalent: CSSRotation(angle); CSSRotation(CSSAngleValue(angle, "deg")); When a CSSTransformValue is read from a StylePropertyMap, each CSSTransformComponent will maintain the relevant transform funtion in its cssText attribute. However, newly constructed CSSTransformValues will always generate cssText according to the following rules: CSSSkew will always serialize to skew(ax, ay) CSSPerspective will always serialize to perspective(length) CSSTranslation, CSSRotation, and CSSScale each have two constructors. In each case, the constructor with fewer arguments constructs a CSSTransformComponent for which is2D will be true, with cssText employing the 2D version of the relevant transform function (translate, rotate, scale). The constructor with more arguments constructs a CSSTransformComponent for which is2D will be false, with cssText employing the 3D version of the relevant transform function (translate3d, rotate3d, scale3d). CSSMatrix objects are constructed around a DOMMatrixReadOnly, and well serialize to a matrix function if the contained DOMMatrixReadOnly's is2D attribute is false, and a matrix3d function otherwise. is2D is true if the is2D attribute of every CSSTransformComponent referenced b the CSSTransformValue returns true, and false otherwise. 4.6. CSSPositionValue objects [Constructor(CSSLengthValue x, CSSLengthValue y)] interface CSSPositionValue : CSSStyleValue { readonly attribute CSSLengthValue x; readonly attribute CSSLengthValue y; }; CSSPositionValue objects represent values for properties that take <position> productions, for example background-position. The x attribute contains the position offset from the left edge of the container, expressed as a length. The y attribute contains the position offset from the top edge of the container, expressed as a length. Note that <position> productions accept a complicated combination of keywords and values. When specified as such in a stylesheet or via the untyped CSSOM, the cssText attribute will contain the specified string. However, this string is normalized as two Lengths into the x and y values of the CSSStyleValue object. New CSSPositionValue objects can only be constructed via pairs of lengths, and will only return the diect serialization of these lengths in the cssText attribute. For example, the following style sheet: .example { background-position: center bottom 10px; } Will produce the following behavior: // "center bottom 10px" document.querySelector('.example').styleMap.get('background-position').cssText; // 50% - as a CSSSimpleLength document.querySelector('.example').styleMap.get('background-position').x; // calc(100% - 10px) - as a CSSCalcLength document.querySelector('.example').styleMap.get('background-position').y; 4.7. CSSResourceValue objects enum CSSResourceState {"unloaded", "loading", "loaded", "error"}; interface CSSResourceValue { readonly attribute CSSResourceState state; }; CSSResourceValue objects represent CSS values that may require an asynchronous network fetch before being usable. A CSSResourceValue is in one of the following states, as reflected in the value of the state attribute: unloade The resource is not ready and is not actively being fetched loading The resource is not ready, but is in the process of being fetched loaded The resource is ready for rendering error The resource can’t be fetched, or the fetched resource is invalid For example, images that match the <url> production can be used immediately, but will not result in a visual change until the image data is fetched. CSSResourceValue objects represent this by providing values that track loaded state via the CSSResourceState enum. 4.8. CSSImageValue objects interface CSSImageValue : CSSResourceValue { readonly attribute double intrinsicWidth; readonly attribute double intrinsicHeight; }; [Constructor(DOMString url)] interface CSSURLImageValue : CSSImageValue { readonly attribute DOMString url; }; CSSImageValue objects represent values for properties that take <image> productions, for example background-image, list-style-image, and border-image-source. CSSImageValue objects that do not require network data (for exampe linear and radial gradients) are initialized with state loaded. If state is unloaded, loading, or error, then intrinsicWidth and intrinsicHeight are 0. Otherwise, the attributes are set to the intrinsic width and height of the referenced image. Does the loading lifecycle need to be described here? CSSURLImageValue objects represent CSSImageValues that match the <url> production. For these objects, the url attribute contains the URL that references the image. 4.9. CSSFontFaceValue objects [Constructor(DOMString fontFaceName)] interface CSSFontFaceValue : CSSResourceValue { readonly attribute DOMString fontFaceName; }; CSSFontFaceValue objects represent font faces that can be used to render text. As font data may need to be fetched from a remote source, CSSFontFaceValue is a subclass of CSSResourceValue. 5. Mapping of properties to accepted types This section provides a table of which types of CSSStyleValue a given property can accept. Note that most, but not all properties take CSSKeywordValue. Shortand properties and values are not supported. Property Allowable CSSStyleValue types align-content CSSKeywordValue align-items CSSKeywordValue align-self CSSKeywordValue alignment-baseline CSSKeywordValue all CSSKeywordValue animation-delay TimeValue | CSSKeywordValue animation-direction CSSKeywordValue animation-fill-mode CSSKeywordValue animation-iteration-count CSSNumberValue | CSSKeywordValue animation-name CustomIdentValue | CSSKeywordValue animation-play-state CSSKeywordValue animation-timing-function TransitionTimingFunctionValue | CSSKeywordValue appearance CSSKeywordValue background-attachment CSSKeywordValue background-blend-mode CSSKeywordValue background-clip CSSKeywordValue background-color ColorValue | CSSKeywordValue background-image CSSImageValue background-origin CSSKeywordValue background-position CSSPositionValue | CSSKeywordValue background-repeat CSSKeywordValue background-size PairValue<CSSLengthValue> (or SizeValue?)| CSSKeywordValue baseline-shift CSSLengthValue | CSSKeywordValu border-boundary CSSKeywordValue border-collapse CSSKeywordValue border-color ColorValue | CSSKeywordValue border-top-color border-right-color border-bottom-color border-left-color ColorValue | CSSKeywordValue border-image-outset FourValues<CSSLengthValue|CSSNumberValue> border-image-repeat PairValue<CSSKeywordValue> border-image-slice BorderImageSliceValue border-image-source CSSImageValue border-image-width FourValues<CSSLengthValue|CSSNumberValue|CSSKeywordValue> border-top-style border-right-style border-bottom-style border-left-style CSSKeywordValue border-top-right-radius border-bottom-right-radius border-bottom-left-radius border-top-left-radius PairValue<CSSLengthValue> | CSSKeywordValue border-top-width border-right-width border-bottom-width border-left-width CSSLengthValue | CSSKeywordValue bottom CSSLengthValue | CSSKeywordValue caption-side CSSKeywordValue clear CSSKeywordValue clip ShapeValue | CSSKeywordValue color ColorValue | CSSKeywordValue content StringValue | URIVlue | CounterValue | AttrValue | CSSKeywordValue counter-increment counter-reset CounterValue | CSSKeywordValue cue-after cue-before URIValue | CSSKeywordValue cursor URIValue | CSSKeywordValue direction CSSKeywordValue display CSSKeywordValue empty-cells CSSKeywordValue float CSSKeywordValue font-family CSSKeywordValue font-size CSSLengthValue | CSSKeywordValue font-style CSSKeywordValue font-variant CSSKeywordValue font-weight FontWeightValue | CSSKeywordValue height CSSLengthValue | CSSKeywordValue left CSSLengthValue | CSSKeywordValue letter-spacing CSSLengthValue | CSSKeywordValue line-height CSSNumberValue | CSSLengthValue | CSSKeywordValue list-style-image CSSImageValue list-style-position CSSKeywordValue list-style-type CSSKeywordValue margin-top margin-right margin-bottom margin-left CSSLengthValue | CSSKeywordValue max-height max-width min-height min-width CSSLengthValue | CSSKeywordValue orphans CSSNumberValue | CSSKeywordValue outline-color ColorValue | CSSKeywordValue outline-style CSSKeywordVaue outline-width CSSLengthValue | CSSKeywordValue overflow CSSKeywordValue padding-top padding-right padding-bottom padding-left CSSLengthValue | CSSKeywordValue page-break-after page-break-before CSSKeywordValue page-break-inside CSSKeywordValue pause-after pause-before TimeValue | PercentageValue | CSSKeywordValue pitch-range CSSNumberValue | CSSKeywordValue pitch FrequencyValue | CSSKeywordValue play-during PlayDuringValue | CSSKeywordValue position CSSKeywordValue quotes PairValue<StringValue> | CSSKeywordValue richness CSSNumberValue | CSSKeywordValue right CSSLengthValue | CSSKeywordValue speak-header CSSKeywordValue speak-numeral CSSKeywordValue speak-punctuation CSSKeywordValue speak CSSKeywordValue speech-rate CSSNumberValue | CSSKeywordValue stress CSSNumberValue | CSSKeywordValue table-layout CSSKeywordValue text-align CSSKeywordValue text-decoration CSSKeywordValue text-indent CSSLengthValue | CSSKeywordValue text-transform CSSKeywordValue top CSSLengthValue | CSSKeywordValue unicode-bidi SSKeywordValue vertical-align CSSLengthValue | CSSKeywordValue visibility CSSKeywordValue voice-family VoiceValue | CSSKeywordValue volume CSSNumberValue | PercentageValue | CSSKeywordValue white-space CSSKeywordValue widows CSSNumberValue | CSSKeywordValue width CSSLengthValue | CSSKeywordValue word-spacing CSSLengthValue | CSSKeywordValue z-index CSSNumberValue | CSSKeywordValue Spec up ColorValue <https://github.com/w3c/css-houdini-drafts/issues/159> 6. CSSStyleValue normalization This section describes how normalized CSSStyleValue objects are constructed from CSS DOMString values. Strings are normalized by resulting CSSStyleValue subclass. To determine which subclass to use, the CSS property that the string is a value for is used to look up the table in §5 Mapping of properties to accepted types. The normalization procedure defined by each of the CSSStyleValue subclasses listed for that property in turn, falling back to the next subclass in the list if the current one fails to normalize. If all lsted subclasses fail, then the value is normalized as a raw CSSStyleValue, with the cssText attribute set to the input value. 6.1. CSSTokenStreamValue normalization Values which contain custom property references are tokenized then split into runs of tokens separated by custom property references. The token runs are serialized, while each custom property reference is represented by a CSSVariableReferenceValue. The string "calc(42px + var(--foo, 15em) + var(--bar, var(--far) + 15px))" is converted into a CSSTokenStreamValue that contains a sequence with: the string "calc(42px + " a CSSVariableReferenceValue with: variable "--foo" fallback a CSSTokenStreamValue with a single-valued sequence containing " 15em" the string " + " a CSSVariableReferenceValue with: variable "--bar" fallback a CSSTokenStreamValue with a sequence containing: the string " " a CSSVariableReferenceValue with variable "--far" fallback undefined the string &qut; + 15px" the string ")" 6.2. CSSKeywordValue normalization If the provided value can tokenize as an <ident-token>, then a CSSKeywordValue is constructed with the provided value as the keywordValue attribute. Otherwise, normalization fails. 6.3. CSSNumberValue normalization If the provided value can tokenize as a <number-token>, then a CSSNumberValue is constructed with the value attribute set to the number parsed from the <number-token>. Otherwise, if the provided value can be parsed as a calc expression with a resolved type of <number>, then the expression is solved and a CSSNumberValue is constructed with the value attribute set to the result. Otherwise, normalization fails. 6.4. CSSLengthValue normalization If the provided value matches the <length> production or the <percentage> production then a CSSSimpleLength is constructed with the value attribute set to the number part of the length, and the type set to the unit. Otherwise, if the provided value an be parsed as a calc expression with a resolved type of <length> or <percentage>, then a CSSCalcLength is constructed with each unit that is mentioned in the calc expression reflected as the matching attribute set to the appropriate value. A length of calc(42px + 15% - 42px) will normalize to a CSSCalcLength with both the px and the percent attributes set (to 0 and 15 respectively). Even though the two pixel lengths cancel each other, the fact that pixels are mentioned in the expression means that they’re represented in the normalized object. Otherwise, normalization fails. 6.5. CSSAngleValue normalization If the provided value matches the <angle> production then a CSSAngleValue is constructed using the CSSAngleValue(double value, CSSAngleUnit unit) constructor, with value set to the number part of the angle, and unit set to the unit. Otherwise, normalization fails. 6.6. CSSTransformValue normalization If the provided value matches the <transform-list> production then a CSSTransfrmComponent is constructed for each matching <transform-function> in the production, and a CSSTransformValue is constructed around the resulting sequence. Otherwise, if the provided value is "none", an empty string, or a string containing only whitespace, then a CSSTransformValue is constructed around an empty sequence. Otherwise, normalization fails. 6.7. CSSPositionValue normalization If the provided value matches the <position> production, then a CSSPositionValue is constructed with x and y components determined via the following process. If this process, or any sub-process referenced by this process fails, then normalization as a whole fails. Initialize both x and y to a CSSSimpleLength value representing 50%. If the provided value is a single keyword, length, percentage, or calc expression, then follow the procedure outlined in §6.7.1 Determining x or y from a single value with value given by the provided value and a horizontal bias. Otherwise, if the provided value consists of acombination of two keywords, then: follow the procedure outlined in §6.7.1 Determining x or y from a single value with value given by the first keyword and an auto bias. if bias is horizontal, set it to vertical. Otherwise, set it to horizontal. follow the procedure again with value given by the second keyword, using the existing bias. Otherwise, if the provided value consists of a combination of two keywords, lengths, percentages, and calc expressions, then follow the procedure outlined in §6.7.1 Determining x or y from a single value with value given by the first part of the provided value and a horizontal bias, then follow the procedure again with value given by the second part of the provided value and a vertical bias. Otherwise: if the provided value starts with a keyword followed by a length, percentage, or calc expression, then follow the procedure outlined in §6.7.2 Determining x or y from a keyword and a length with keyword set to the keyword, length set to the length, percentage, or calc expresion, and auto bias. otherwise, follow the procedure outlined in §6.7.1 Determining x or y from a single value with value set to the first component of the provided value and an auto bias. if bias is horizontal, set it to vertical. Otherwise, set it to horizontal. if the remainder of the provided value is a single keyword, length, percentage or calc expression, follow the procedure outlined in §6.7.1 Determining x or y from a single value with value set to the keyword and the existing bias. otherwise, if the remainder of the provided value consists of a keyword followed by a length, percentage or calc expression, follow the procedure outlined in §6.7.2 Determining x or y from a keyword and a length with keyword set to the keyword, length set to the length, percentage, or calc expression, and the existing bias. Otherwise, the process fails. 6.7.1. Determining x or y from a single value The following process sets a value for either x or y, depending on an input value and bias. The process also updates bias ased on the value. If value is the keyword "left" and bias is not vertical, then set x to a CSSSimpleLength value representing 0% and bias to horizontal and exit this process. If value is the keyword "right" and bias is not vertical, then set x to a CSSSimpleLength value representing 100% and bias to horizontal and exit this process. If value is the keyword "top" and bias is not horizontal, then set y to a CSSSimpleLength value representing 0% and bias to vertical and exit this process. If value is the keyword "bottom" and bias is not horizontal, then set y to a CSSSimpleLength value representing 100% and bias to vertical and exit this process. If value matches the <length-percentage> production, then set norm to the result of normalizing the value according to §6.4 CSSLengthValue normalization. If bias is vertical, set y to norm, otherwise set x to norm and bias to horizontal. Exit this process. If value is not the keyword "center", then this processfails. 6.7.2. Determining x or y from a keyword and a length The following process sets a value for either x ory, depending on an input keyword, length, and bias. The process also updates bias based on the keyword and length. follow the procedure outlined in §6.7.1 Determining x or y from a single value with value given by keyword, using the provided bias let adjustment be the result of normalizing length according to §6.4 CSSLengthValue normalization. If the keyword is "right" or "bottom", let adjustment be the result of subtracting adjustment from a zero length. amend x (if bias is horizontal) or y (if bias is vertical) by adding adjustment to it. 6.8. CSSResourceValue normalization Resource references are normalized by determining whether the reference is invalid (in which case state is set to error) or requires network data (in which case state is set to loading). If data is not required and the reference is valid then state is set to loaded. If state is set to loading then the imae reference is reevaluated once the pending data becomes available, according to the same rules referenced above. Normalization does not fail for CSSResourceValue objects. 7. Security Considerations There are no known security issues introduced by these features. 8. Privacy Considerations There are no known privacy issues introduced by these features. Appendix A: Computed CSSStyleValue objects This appendix describes the restrictions on CSSStyleValue objects that appear as computed values (i.e. as a value stored on computed StylePropertyMapReadOnly objects). Computed CSSTokenStreamValue objects Custom property references are resolved as part of style computation. Accordingly, computed CSSTokenStreamValue objects will not contain CSSVariableReferenceValue objects. As a result, only a single DOMString will appear in the sequence contained by computed CSSTokenStreamValue objects. Furthermore, values that at specified value time contained custom property references are renormalized after computation. Consider a element "e" with an inline style that specifies a width of var(--baz). Assuming that the custom property --baz contains the value "42px", running the following code: var a = e.styleMap.get('width'); var b = getComputedStyleMap(e).get('width'); Will result in "a" containing a CSSTokenStreamValue with a single CSSVariableReferenceValue in its sequence, and "b" containing a CSSSimpleLength representing 42px. Computed CSSKeywordValue objects During computation, CSSKeywordValue objects are either left unaltered (e.g. auto values for lengths that participate in layout) or resolved to a relevant value and renormalized (e.g. the color red). Computed CSSNumberValue objects During computation, CSSNumberValue objects are range-restricted or rounded as appropriate to the relevant property, but otherwise left unaltered (see the example in §4.2 CSSNumberValue objects). Computed CSSLengthValue objects During computation, CSSLengthValue objects are reduced to cobinations of pixel and percentage values by the standard length computation process described as part of the <length> type. Lengths may then be further range-restricted as appropriate (for example, border-left-width requires non-negative lengths). Note that lengths combining percentage and pixel units can’t in general be range restricted (e.g. is 100px - 50% greater or less than zero?). Computed CSSAngleValue objects CSSAngleValue objects are not modified during computation. Computed CSSTransformValue objects During computation, any CSSLengthValue objects referenced by a CSSTransformComponent (e.g. the x attribute of a CSSTranslation) are computed according to Computed CSSLengthValue objects, but the CSSTransformValue object is otherwise left unaltered. Computed CSSPositionValue objects During computation, both the x and y components of a CSSPositionValue are computed according to Computed CSSLengthValue objects. Computed CSSImageValue objects CSSImageValue objects are not modified during computatio. Computed CSSFontFaceValue objects CSSFontFaceValue objects are not modified during computation.ConformanceDocument conventions

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

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

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


This is an example of an informative example.

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

Note, this is an informative note.

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

Conformance to this specification is defined for three conformance classes:style sheet A CSS style sheet. renderer A UA that interprets the semantics of a style sheet and renders documents that use them. authoring tool A UA that writes a style sheet.

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

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

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

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

To avoid clashes with future CSS features, the CSS2.1 specification reserves a prefixed syntax for proprietary and experimental extensions to CSS.

Prior to a specification reaching the Candidate Recommendation stage in the W3C process, all implementations of a CSS feature are considered experimental. The CSS Working Group recommends that implementations use a vendor-prefixed syntax for such features, including those in W3C Working Drafts. This avoids incompatibilities with future changes in the draft.Non-experimental implementations

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

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

Further information on submitting testcases and implementation reports can be found from on the CSS Working Group’s website at http://www.w3.org/Style/CSS/Test/. Questions should be directed to the public-css-testsuite@w3.org mailing list.IndexTerms defined by this specificationadd(value), in §4.3 angle, in §4.5 append(DOMString property (CSSStyleValue or DOMString)... values), in §3 append(property), in §3 append(property, values...), in §3 ax, in §4.5 ay, in §4.5 "ch", in §4.3 ch enum-value for LengthType, in §4.3 dict-member for CSSCalcDictionary, in §4.3 attribute for CSSCalcLength, in §4.3 cm enum-value for LengthType, in §4.3 dict-member for CSSCalcDictionary, in §4.3 attribute for CSSCalcLength, in §4.3 "cm", in §4.3 Computed StylePropertyMap, in §3.1 CSSAngleUnit, in §4.4 CSSAngleValue, in §4.4 CSSAngleValue(value, unit), in §4.4 CSSCalcDictionary, in §4.3 CSSCalcLength, in §4.3 CSSCalcLength(cssText), in §4.3 CSSFontFaceValue, in §4.9 CSSFontFaceValue(fotFaceName), in §4.9 CSSImageValue, in §4.8 CSSKeywordValue, in §4.1 CSSLengthValue, in §4.3 CSSMatrix, in §4.5 CSSMatrix(matrix), in §4.5 CSSNumberValue, in §4.2 CSSNumberValue(cssText), in §4.2 CSSPerspective, in §4.5 CSSPerspective(length), in §4.5 CSSPositionValue, in §4.6 CSSPositionValue(x, y), in §4.6 CSSResourceState, in §4.7 CSSResourceValue, in §4.7 CSSRotation, in §4.5 CSSRotation(angle), in §4.5 CSSRotation(angle, x, y, z), in §4.5 CSSRotation(degrees), in §4.5 CSSRotation(degrees, x, y, z), in §4.5 CSSScale, in §4.5 CSSScale(x, y), in §4.5 CSSScale(x, y, z), in §4.5 CSSSimpleLength, in §4.3 CSSSimpleLength(cssText), in §4.3 CSSSimpleLength(value, type), in §4.3 CSSSkew, in §4.5 CSSSkew(ax, ay), in §4.5 CSSStyleValue, in §2 cssText attribute for CSSStyleValue, in §2 attribute for CSSTransformComponent, in §4.5 CSSTokenStreamValue, in §2.1 CSSTransformComponent, in §4.5 CSSTransformValue, in §4.5 CSSTransformValue(), in §4.5 CSSTransformValue(transforms), in §4.5CSSTranslation, in §4.5 CSSTranslation(x, y), in §4.5 CSSTranslation(x, y, z), in §4.5 CSSURLImageValue, in §4.8 CSSURLImageValue(url), in §4.8 CSSVariableReferenceValue, in §2.1 "deg", in §4.4 deg, in §4.4 degrees, in §4.4 delete(property), in §3 divide(value), in §4.3 "em", in §4.3 em enum-value for LengthType, in §4.3 dict-member for CSSCalcDictionary, in §4.3 attribute for CSSCalcLength, in §4.3 "error", in §4.7 error, in §4.7 ex enum-value for LengthType, in §4.3 dict-member for CSSCalcDictionary, in §4.3 attribute for CSSCalcLength, in §4.3 "ex", in §4.3 fallback, in §2.1 fontFaceName, in §4.9 from(cssText), in §4.3 from(dictionary), in §4.3 from(value, type), in §4.3 getAll(property), in §3 getComputedStyleMap(element), in §3.1 getComputedStyleMap(element, pseudoElt), in §3.1 getProperties(), in §3 get(property), in §3 grad, in §4.4 "grad", in §4.4 gradians, in §4.4 has(property), in §3 "in", in §4.3 in enm-value for LengthType, in §4.3 dict-member for CSSCalcDictionary, in §4.3 attribute for CSSCalcLength, in §4.3 Inline StylePropertyMap, in §3.3 intrinsicHeight, in §4.8 intrinsicWidth, in §4.8 is2D attribute for CSSTransformComponent, in §4.5 attribute for CSSTransformValue, in §4.5 keywordValue, in §4.1 length, in §4.5 LengthType, in §4.3 "loaded", in §4.7 loaded, in §4.7 loading, in §4.7 "loading", in §4.7 matrix attribute for CSSTransformValue, in §4.5 attribute for CSSTransformComponent, in §4.5 "mm", in §4.3 mm enum-value for LengthType, in §4.3 dict-member for CSSCalcDictionary, in §4.3 attribute for CSSCalcLength, in §4.3 multiply(value), in §4.3 parse(property, cssText), in §2 "pc", in §4.3 pc enum-value for LengthType, in §4.3 dict-member for CSSCalcDictionary, in §4.3 attribute for CSSCalcLength, in §4.3 percent enum-value for LengthType, in §4.3 dict-member for CSSCalcDictionary, in §4.3 attribute for CSSCalcLength, in §4.3 &qot;percent", in §4.3 property model, in §3 "pt", in §4.3 pt enum-value for LengthType, in §4.3 dict-member for CSSCalcDictionary, in §4.3 attribute for CSSCalcLength, in §4.3 px enum-value for LengthType, in §4.3 dict-member for CSSCalcDictionary, in §4.3 attribute for CSSCalcLength, in §4.3 "px", in §4.3 "q", in §4.3 q enum-value for LengthType, in §4.3 dict-member for CSSCalcDictionary, in §4.3 attribute for CSSCalcLength, in §4.3 "rad", in §4.4 rad, in §4.4 radians, in §4.4 "rem", in §4.3 rem enum-value for LengthType, in §4.3 dict-member for CSSCalcDictionary, in §4.3 attribute for CSSCalcLength, in §4.3 set(property), in §3 set(property, values...), in §3 Specified StylePropertyMap, in §3.2 state, in §4.7 stringification behavior, in §3 styleMap attribute for CSSStyleRule, in §3.2 attribute for Element, in §3.3 StylePropertyMap, in §3 StylePropertyMapReadOnly, in §3 subtract(value), in §4.3 turn, in §4.4 "turn&qot;, in §4.4 turns, in §4.4 type, in §4.3 unloaded, in §4.7 "unloaded", in §4.7 url, in §4.8 value attribute for CSSNumberValue, in §4.2 attribute for CSSSimpleLength, in §4.3 variable, in §2.1 "vh", in §4.3 vh enum-value for LengthType, in §4.3 dict-member for CSSCalcDictionary, in §4.3 attribute for CSSCalcLength, in §4.3 vmax enum-value for LengthType, in §4.3 dict-member for CSSCalcDictionary, in §4.3 attribute for CSSCalcLength, in §4.3 "vmax", in §4.3 "vmin", in §4.3 vmin enum-value for LengthType, in §4.3 dict-member for CSSCalcDictionary, in §4.3 attribute for CSSCalcLength, in §4.3 "vw", in §4.3 vw enum-value for LengthType, in §4.3 dict-member for CSSCalcDictionary, in §4.3 attribute for CSSCalcLength, in §4.3 x attribute for CSSTranslation, in §4.5 attribute for CSSRotation, in §4.5 attribute for CSSScale, in §4.5 attribute for CSSPositionValue, in §4.6 y attribute for CSSTranslation, in §4.5 attribute for CSSRotation in §4.5 attribute for CSSScale, in §4.5 attribute for CSSPositionValue, in §4.6 z attribute for CSSTranslation, in §4.5 attribute for CSSRotation, in §4.5 attribute for CSSScale, in §4.5Terms defined by reference[compositing-1] defines the following terms: background-blend-mode [css-align-3] defines the following terms: align-content align-items align-self [css-animations-1] defines the following terms: animation-delay animation-direction animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function [css-backgrounds-3] defines the following terms: <position> background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-color border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left-color border-left-tyle border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width [css-break-3] defines the following terms: orphans widows [css-cascade-3] defines the following terms: all [css-color-3] defines the following terms: color opacity [css-color-4] defines the following terms: red [css-content-3] defines the following terms: content [css-fonts-3] defines the following terms: font-family font-size font-style font-variant font-weight [css-images-3] defines the following terms: <image> [css-lists-3] defines the following terms: counter-increment counter-reset list-style-image list-style-position list-style-type [css-masking-1] defines the following terms: clip [css-overflow-3] defines the following terms: overflow [css-position-3] defines the following terms: auto bottom left position right top z-index [css-round-display-1] defines the following terms: border-boundary [css-speech-1] defines the follwing terms: cue-after cue-before pause-after pause-before speak voice-family [css-syntax-3] defines the following terms: <ident-token> <number-token> [css-tables-3] defines the following terms: border-collapse caption-side empty-cells table-layout [css-text-3] defines the following terms: letter-spacing text-align text-indent text-transform white-space word-spacing [css-text-decor-3] defines the following terms: text-decoration [css-transforms-1] defines the following terms: <transform-function> <transform-list> transform [css-ui-3] defines the following terms: cursor outline-color outline-style outline-width [css-ui-4] defines the following terms: appearance [css-values] defines the following terms: <angle> <length-percentage> <length> <number> <percentage> <url> resolved type [css-writing-modes-3] defines the following terms: direction unicode-bidi [CSS2] defines the following terms: clear display float height line-height margin-bottom margin-lef margin-right margin-top max-height max-width min-height min-width padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside pitch pitch-range play-during quotes richness speak-header speak-numeral speak-punctuation speech-rate stress vertical-align visibility volume width [cssom-1] defines the following terms: CSSStyleRule [WHATWG-DOM] defines the following terms: Element [ECMASCRIPT] defines the following terms: rangeerror [geometry-1] defines the following terms: DOMMatrixReadOnly is2D [HTML] defines the following terms: Window [SVG2] defines the following terms: alignment-baseline baseline-shift [WebIDL-1] defines the following terms: DOMString SyntaxErrorReferencesNormative References[COMPOSITING-1] Rik Cabanier; Nikos Andronikos. Compositing and Blending Level 1. 13 January 2015. CR. URL: http://www.w3.org/TR/compositing-1/ [CSS-ALIGN-3] Elika Etemad; Tab Atkins Jr.. CSS Box Alignment Module Level 3. 19 May 2016. WD. URL: http://www.w3.org/TR/css-align-/ [CSS-ANIMATIONS-1] CSS Animations Module Level 1 URL: https://www.w3.org/TR/css3-animations/ [CSS-BACKGROUNDS-3] CSS Backgrounds and Borders Module Level 3 URL: https://www.w3.org/TR/css3-background/ [CSS-BREAK-3] Rossen Atanassov; Elika Etemad. CSS Fragmentation Module Level 3. 14 January 2016. CR. URL: http://www.w3.org/TR/css-break-3/ [CSS-CASCADE-3] Elika Etemad; Tab Atkins Jr.. CSS Cascading and Inheritance Level 3. 19 May 2016. CR. URL: http://www.w3.org/TR/css-cascade-3/ [CSS-COLOR-3] CSS Color Module Level 3 URL: https://www.w3.org/TR/css3-color/ [CSS-COLOR-4] CSS Color Module Level 4 URL: https://drafts.csswg.org/css-color-4/ [CSS-CONTENT-3] CSS Generated Content Module Level 3 URL: https://drafts.csswg.org/css-content-3/ [CSS-FONTS-3] John Daggett. CSS Fonts Module Level 3. 3 October 2013. CR. URL: http://www.w3.org/TR/css-fonts-3/ [CSS-IMAGES-3] CSS Image Values and Replaced Content Module Level 3 URL: https://www.w3.org/TR/css3-images/ [CSS-LISTS-3] Tab Atkins Jr.. CSS Lists and Counters Modul Level 3. 20 March 2014. WD. URL: http://www.w3.org/TR/css-lists-3/ [CSS-MASKING-1] Dirk Schulze; Brian Birtles; Tab Atkins Jr.. CSS Masking Module Level 1. 26 August 2014. CR. URL: http://www.w3.org/TR/css-masking-1/ [CSS-OVERFLOW-3] David Baron. CSS Overflow Module Level 3. 18 April 2013. WD. URL: http://www.w3.org/TR/css-overflow-3/ [CSS-POSITION-3] Rossen Atanassov; Arron Eicholz. CSS Positioned Layout Module Level 3. 17 May 2016. WD. URL: http://www.w3.org/TR/css-position-3/ [CSS-ROUND-DISPLAY-1] Hyojin Song; Jihye Hong. CSS Round Display Level 1. 1 March 2016. WD. URL: http://www.w3.org/TR/css-round-display-1/ [CSS-SPEECH-1] CSS Speech Module Level 1 URL: https://www.w3.org/TR/css3-speech/ [CSS-SYNTAX-3] Tab Atkins Jr.; Simon Sapin. CSS Syntax Module Level 3. 20 February 2014. CR. URL: http://www.w3.org/TR/css-syntax-3/ [CSS-TABLES-3] CSS Tables Module Level 3 URL: https://drafts.csswg.org/css-tables-3/ [CSS-TEXT-3] Elika Etemad; Koji Ishii. CSS Text Module Level 3. 10 October 2013. LCWD. URL: http://ww.w3.org/TR/css-text-3/ [CSS-TEXT-DECOR-3] Elika Etemad; Koji Ishii. CSS Text Decoration Module Level 3. 1 August 2013. CR. URL: http://www.w3.org/TR/css-text-decor-3/ [CSS-TRANSFORMS-1] Simon Fraser; et al. CSS Transforms Module Level 1. 26 November 2013. WD. URL: http://www.w3.org/TR/css-transforms-1/ [CSS-UI-3] Tantek Çelik; Florian Rivoal. CSS Basic User Interface Module Level 3 (CSS3 UI). 7 July 2015. CR. URL: http://www.w3.org/TR/css-ui-3/ [CSS-UI-4] Florian Rivoal. CSS Basic User Interface Module Level 4. 22 September 2015. WD. URL: http://www.w3.org/TR/css-ui-4/ [CSS-VALUES] Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 3. 11 June 2015. CR. URL: http://www.w3.org/TR/css-values/ [CSS-WRITING-MODES-3] Elika Etemad; Koji Ishii. CSS Writing Modes Level 3. 15 December 2015. CR. URL: http://www.w3.org/TR/css-writing-modes-3/ [CSS2] Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 7 June 2011. REC. URL: http://www.w3.org/TR/CSS2 [CSSOM-1] Simon Pieters Glenn Adams. CSS Object Model (CSSOM). 17 March 2016. WD. URL: http://www.w3.org/TR/cssom-1/ [ECMASCRIPT] ECMAScript Language Specification. URL: https://tc39.github.io/ecma262/ [GEOMETRY-1] Simon Pieters; Dirk Schulze; Rik Cabanier. Geometry Interfaces Module Level 1. 25 November 2014. CR. URL: http://www.w3.org/TR/geometry-1/ [HTML] Ian Hickson. HTML Standard. Living Standard. URL: https://html.spec.whatwg.org/multipage/ [RFC2119] S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Best Current Practice. URL: https://tools.ietf.org/html/rfc2119 [SVG2] Nikos Andronikos; et al. Scalable Vector Graphics (SVG) 2. 15 September 2015. WD. URL: http://www.w3.org/TR/SVG2/ [WebIDL-1] Cameron McCormack; Boris Zbarsky. WebIDL Level 1. 8 March 2016. CR. URL: http://www.w3.org/TR/WebIDL-1/ [WHATWG-DOM] Anne van Kesteren. DOM Standard. Living Standard. URL: https://dom.spec.whatwg.org/IDL Indexinterface CSSStyleValue { attribute DOMString cssText; static (CSSStyleValue or sequence<CSSStleValue>)? parse(DOMString property, DOMString cssText); }; interface CSSTokenStreamValue : CSSStyleValue { iterable<(DOMString or CSSVariableReferenceValue)>; }; interface CSSVariableReferenceValue { attribute DOMString variable; attribute CSSTokenStreamValue fallback; }; interface StylePropertyMapReadOnly { CSSStyleValue? get(DOMString property); sequence<CSSStyleValue> getAll(DOMString property); boolean has(DOMString property); iterable<DOMString, (CSSStyleValue or sequence<CSSStyleValue> or DOMString)>; sequence<DOMString> getProperties(); stringifier; }; interface StylePropertyMap : StylePropertyMapReadOnly { void append(DOMString property, (CSSStyleValue or DOMString)... values); void delete(DOMString property); void set(DOMString property, (CSSStyleValue or DOMString)... values); }; partial interface Window { StylePropertyMapReadOnly getComputedStyleMap(Element element, optional DOMString? pseudoElt); }; partial interface CSSStyleRule { [SameObject] readonly attribut StylePropertyMap styleMap; }; partial interface Element { [SameObject] readonly attribute StylePropertyMap styleMap; }; [Constructor(DOMString)] interface CSSKeywordValue : CSSStyleValue { attribute DOMString keywordValue; }; [Constructor(double), Constructor(DOMString cssText)] interface CSSNumberValue : CSSStyleValue { attribute double value; }; enum LengthType { "px", "percent", "em", "ex", "ch", "rem", "vw", "vh", "vmin", "vmax", "cm", "mm", "q", "in", "pc", "pt" }; dictionary CSSCalcDictionary { double px; double percent; double em; double ex; double ch; double rem; double vw; double vh; double vmin; double vmax; double cm; double mm; double q; double in; double pc; double pt; }; interface CSSLengthValue : CSSStyleValue { CSSLengthValue add(CSSLengthValue value); CSSLengthValue subtract(CSSLengthValue value); CSSLengthValue multiply(double valu); CSSLengthValue divide(double value); static CSSLengthValue from(DOMString cssText); static CSSLengthValue from(double value, LengthType type); static CSSLengthValue from(CSSCalcDictionary dictionary); }; [Constructor(DOMString cssText), Constructor(CSSLengthValue), Constructor(CSSCalcDictionary) ] interface CSSCalcLength : CSSLengthValue { attribute double? px; attribute double? percent; attribute double? em; attribute double? ex; attribute double? ch; attribute double? rem; attribute double? vw; attribute double? vh; attribute double? vmin; attribute double? vmax; attribute double? cm; attribute double? mm; attribute double? q; attribute double? in; attribute double? pc; attribute double? pt; }; // lengths that are *just* keywords don’t become CSSSimpleLengths or CSSCalcLengths. // Instead they are represented as CSSKeywordValue objects. [Constructor(DOMString cssText), Constructor(CSSLengthValue), Constructor(double value, LengthType type)] interface CSSSimpleLength : CSSLengthValue { attribute doubl value; readonly attribute LengthType type; }; enum CSSAngleUnit { "deg", "rad", "grad", "turn" }; [Constructor(double value, CSSAngleUnit unit)] interface CSSAngleValue : CSSStyleValue { readonly attribute double degrees; readonly attribute double radians; readonly attribute double gradians; readonly attribute double turns; }; [Constructor(), Constructor(sequence<CSSTransformComponent> transforms)] interface CSSTransformValue : CSSStyleValue { iterable<CSSTransformComponent>; readonly attribute boolean is2D; readonly attribute DOMMatrixReadOnly matrix; }; interface CSSTransformComponent { readonly attribute DOMString cssText; readonly attribute boolean is2D; readonly attribute DOMMatrixReadOnly matrix; }; [Constructor(CSSLengthValue x, CSSLengthValue y), Constructor(CSSLengthValue x, CSSLengthValue y, CSSLengthValue z)] interface CSSTranslation : CSSTransformComponent { readonly attribute CSSLengthValue x; readonly attribute CSSLengthValue y; readonly attibute CSSLengthValue z; }; [Constructor(double degrees), Constructor(CSSAngleValue angle), Constructor(double degrees, double x, double y, double z), Constructor(CSSAngleValue angle, double x, double y, double z)] interface CSSRotation : CSSTransformComponent { readonly attribute double angle; readonly attribute double x; readonly attribute double y; readonly attribute double z; }; [Constructor(double x, double y), Constructor(double x, double y, double z)] interface CSSScale : CSSTransformComponent { readonly attribute double x; readonly attribute double y; readonly attribute double z; }; [Constructor(double ax, double ay)] interface CSSSkew : CSSTransformComponent { readonly attribute double ax; readonly attribute double ay; }; [Constructor(CSSLengthValue length)] interface CSSPerspective : CSSTransformComponent { readonly attribute CSSLengthValue length; }; [Constructor(DOMMatrixReadOnly matrix)] interface CSSMatrix : CSSTransformComponent { }; [Constructor(CSSLengthValue x, CSSLengthValue y)] interface SSPositionValue : CSSStyleValue { readonly attribute CSSLengthValue x; readonly attribute CSSLengthValue y; }; enum CSSResourceState {"unloaded", "loading", "loaded", "error"}; interface CSSResourceValue { readonly attribute CSSResourceState state; }; interface CSSImageValue : CSSResourceValue { readonly attribute double intrinsicWidth; readonly attribute double intrinsicHeight; }; [Constructor(DOMString url)] interface CSSURLImageValue : CSSImageValue { readonly attribute DOMString url; }; [Constructor(DOMString fontFaceName)] interface CSSFontFaceValue : CSSResourceValue { readonly attribute DOMString fontFaceName; };Issues Index

<https://github.com/w3c/css-houdini-drafts/issues/143>↵
<https://github.com/w3c/css-houdini-drafts/issues/145>↵
property<https://github.com/w3c/css-houdini-drafts/issues/147>↵
StylePropertyMap<https://github.com/w3c/css-houdini-drafts/issues/148>↵
<https://github.com/w3c/css-houdini-drafts/issues/149>↵
CSSNumberValue<https://github.com/w3c/css-houdini-drafts/issues/140>↵
↵
<https://github.com/w3c/css-houdini-drafts/issues/159>↵#cssstylevalueReferenced in: 2. CSSStyleValue objects (2) (3) (4) (5) (6) (7) (8) 2.1. CSSTokenStreamValue objects 3. The StylePropertyMap (2) (3) (4) (5) (6) (7) (8) (9) (10) 4. CSSStyleValue subclasses 4.1. CSSKeywordValue objects (2) 4.2. CSSNumberValue objects 4.3. CSSLengthValue objects 4.4. CSSAngleValue objects 4.5. CSSTransformValue objects 4.6. CSSPositionValue objects (2) 5. Mapping of properties to accepted types (2) 6. CSSStyleValue normalization (2) (3) Appendix A: Computed CSSStyleValue objects (2)#dom-cssstylevalue-csstextReferenced in: 2. CSSStyleValue objects 4.6. CSSPositionValue objects (2) 6. CSSStyleValue normalization#dom-cssstylevalue-parseReferenced in: 2. CSSStyleValue objects 3. The StylePropertyMap#csstokenstreamvalueReferenced in: 2.1. CSSTokenStreamValue objects (2) (3) 4.3. CSSLengthValue objects 6.1. CSSTokenStreamValue normalization (2) (3) (4) Computed CSSTokenStreamValue objects (2) (3) (4)#cssvariablereferencevlueReferenced in: 2.1. CSSTokenStreamValue objects 6.1. CSSTokenStreamValue normalization (2) (3) (4) Computed CSSTokenStreamValue objects (2)#dom-cssvariablereferencevalue-variableReferenced in: 6.1. CSSTokenStreamValue normalization (2) (3)#dom-cssvariablereferencevalue-fallbackReferenced in: 6.1. CSSTokenStreamValue normalization (2) (3)#stylepropertymapreadonlyReferenced in: 3. The StylePropertyMap (2) 3.1. Computed StylePropertyMapReadOnly objects (2) Appendix A: Computed CSSStyleValue objects#dom-stylepropertymapreadonly-getReferenced in: 3. The StylePropertyMap#stylepropertymapReferenced in: 3. The StylePropertyMap (2) 3.2. Specified StylePropertyMap objects (2) 3.3. Inline StylePropertyMap objects (2) 4.5. CSSTransformValue objects#dom-stylepropertymap-setReferenced in: 3. The StylePropertyMap#property-modelReferenced in: 3. The StylePropertyMap (2) (3) 3.1. Computed StylePropertyMapReadOnly objects 3.2. Specified StylePropertyMap objects 3.3. Inline StylePropertyMap objects#computed-stylepropertymaReferenced in: 3.1. Computed StylePropertyMapReadOnly objects#dom-window-getcomputedstylemapReferenced in: 3.1. Computed StylePropertyMapReadOnly objects#specified-stylepropertymapReferenced in: 3.2. Specified StylePropertyMap objects 4.2. CSSNumberValue objects 4.3. CSSLengthValue objects#dom-cssstylerule-stylemapReferenced in: 3.2. Specified StylePropertyMap objects#inline-stylepropertymapReferenced in: 3.3. Inline StylePropertyMap objects 4.2. CSSNumberValue objects 4.3. CSSLengthValue objects#dom-element-stylemapReferenced in: 3.3. Inline StylePropertyMap objects#csskeywordvalueReferenced in: 4.1. CSSKeywordValue objects (2) (3) 4.3. CSSLengthValue objects 5. Mapping of properties to accepted types (2) (3) (4) (5) (6) (7) (8) (9) (10) (11) (12) (13) (14) (15) (16) (17) (18) (19) (20) (21) (22) (23) (24) (25) (26) (27) (28) (29) (30) (31) (32) (33) (34) (35) (36) (37) (38) (39) (40) (41) (42) (43) (44) (45) (46) (47) (48) (49) (50) (51) (52) (53) (54) (55) (56) (57) (58) (59) (60) (61) (62) (63) (64) (65 (66) (67) (68) (69) (70) (71) (72) (73) (74) (75) (76) (77) (78) (79) (80) (81) (82) (83) (84) (85) (86) (87) (88) (89) (90) (91) (92) (93) (94) (95) (96) 6.2. CSSKeywordValue normalization (2) Computed CSSKeywordValue objects (2)#dom-csskeywordvalue-keywordvalueReferenced in: 6.2. CSSKeywordValue normalization#cssnumbervalueReferenced in: 4.2. CSSNumberValue objects (2) (3) (4) (5) 5. Mapping of properties to accepted types (2) (3) (4) (5) (6) (7) (8) (9) (10) (11) (12) 6.3. CSSNumberValue normalization (2) (3) Computed CSSNumberValue objects (2)#dom-cssnumbervalue-valueReferenced in: 6.3. CSSNumberValue normalization (2)#enumdef-lengthtypeReferenced in: 4.3. CSSLengthValue objects (2) (3)#dictdef-csscalcdictionaryReferenced in: 4.3. CSSLengthValue objects#csslengthvalueReferenced in: 1. Introduction 4.3. CSSLengthValue objects (2) (3) (4) (5) (6) (7) (8) (9) (10) (11) (12) (13) (14) (15) (16) (17) (18) (19) (20) 4.5. CSSTransformValue objects (2) (3) (4) (5) (6) (7) (8) (9) (10) 4.6. CSSPositionValue objcts (2) (3) (4) 5. Mapping of properties to accepted types (2) (3) (4) (5) (6) (7) (8) (9) (10) (11) (12) (13) (14) (15) (16) (17) (18) (19) (20) (21) (22) 6.4. CSSLengthValue normalization Computed CSSLengthValue objects (2) Computed CSSTransformValue objects#csscalclengthReferenced in: 4.3. CSSLengthValue objects (2) (3) (4) (5) (6) (7) (8) (9) 6.4. CSSLengthValue normalization (2)#dom-csscalclength-pxReferenced in: 6.4. CSSLengthValue normalization#dom-csscalclength-percentReferenced in: 6.4. CSSLengthValue normalization#csssimplelengthReferenced in: 1. Introduction 4.3. CSSLengthValue objects (2) (3) (4) (5) (6) (7) (8) (9) 6.4. CSSLengthValue normalization 6.7. CSSPositionValue normalization 6.7.1. Determining x or y from a single value (2) (3) (4) Computed CSSTokenStreamValue objects#dom-csssimplelength-valueReferenced in: 6.4. CSSLengthValue normalization#dom-csssimplelength-typeReferenced in: 6.4. CSSLengthValue normalization#dom-csslengthvalue-addReferenced in: 4.3. CSSLengthValue objects#dom-csslegthvalue-subtractReferenced in: 4.3. CSSLengthValue objects#dom-csslengthvalue-multiplyReferenced in: 4.3. CSSLengthValue objects#dom-csslengthvalue-divideReferenced in: 4.3. CSSLengthValue objects#dom-csslengthvalue-fromReferenced in: 4.3. CSSLengthValue objects#dom-csslengthvalue-from-value-typeReferenced in: 4.3. CSSLengthValue objects#dom-csslengthvalue-from-dictionaryReferenced in: 4.3. CSSLengthValue objects#enumdef-cssangleunitReferenced in: 4.4. CSSAngleValue objects (2)#dom-cssanglevalue-cssanglevalueReferenced in: 6.5. CSSAngleValue normalization#cssanglevalueReferenced in: 4.4. CSSAngleValue objects (2) 4.5. CSSTransformValue objects (2) (3) 6.5. CSSAngleValue normalization (2) Computed CSSAngleValue objects (2)#csstransformvalueReferenced in: 4.5. CSSTransformValue objects (2) (3) (4) (5) (6) 6.6. CSSTransformValue normalization (2) (3) Computed CSSTransformValue objects (2)#csstransformcomponentReferenced in: 4.5. CSSTransformValue objects (2) (3) (4) (5) (6) (7) (8) (9) (10) (11) (12) (13) (14 (15) 6.6. CSSTransformValue normalization Computed CSSTransformValue objects#csstranslationReferenced in: 4.5. CSSTransformValue objects (2) Computed CSSTransformValue objects#dom-csstranslation-xReferenced in: Computed CSSTransformValue objects#cssrotationReferenced in: 4.5. CSSTransformValue objects (2)#cssscaleReferenced in: 4.5. CSSTransformValue objects#cssskewReferenced in: 4.5. CSSTransformValue objects#cssperspectiveReferenced in: 4.5. CSSTransformValue objects#cssmatrixReferenced in: 4.5. CSSTransformValue objects#dom-csstransformcomponent-is2dReferenced in: 4.5. CSSTransformValue objects (2) (3) (4)#dom-csstransformcomponent-csstextReferenced in: 4.5. CSSTransformValue objects#dom-csstransformvalue-is2dReferenced in: 4.5. CSSTransformValue objects#csspositionvalueReferenced in: 4.6. CSSPositionValue objects (2) (3) 5. Mapping of properties to accepted types 6.7. CSSPositionValue normalization (2) Computed CSSPositionValue objects (2)#dom-csspositionvalue-xReferenced in: 4.6. CSSPositionValue objets (2) Computed CSSPositionValue objects#dom-csspositionvalue-yReferenced in: 4.6. CSSPositionValue objects (2) Computed CSSPositionValue objects#enumdef-cssresourcestateReferenced in: 4.7. CSSResourceValue objects (2)#cssresourcevalueReferenced in: 4.7. CSSResourceValue objects (2) (3) (4) 4.8. CSSImageValue objects 4.9. CSSFontFaceValue objects (2) 6.8. CSSResourceValue normalization (2)#dom-cssresourcevalue-stateReferenced in: 4.7. CSSResourceValue objects 4.8. CSSImageValue objects (2) 6.8. CSSResourceValue normalization (2) (3) (4)#cssimagevalueReferenced in: 4.8. CSSImageValue objects (2) (3) (4) (5) 5. Mapping of properties to accepted types (2) (3) Computed CSSImageValue objects (2)#dom-cssimagevalue-intrinsicwidthReferenced in: 4.8. CSSImageValue objects#dom-cssimagevalue-intrinsicheightReferenced in: 4.8. CSSImageValue objects#cssurlimagevalueReferenced in: 4.8. CSSImageValue objects#dom-cssurlimagevalue-urlReferenced in: 4.8. CSSImageValue objects#cssfontfacevalueReferenced in: 4.9. CSSFontFaceVaue objects (2) (3) Computed CSSFontFaceValue objects (2)