Cascading Style Sheets Object Model (CSSOM)

Editor's draft 18 June 2007

This version:
...
Latest version:
...
Previous versions:
http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/
Editor:
Anne van Kesteren (Opera Software ASA) <annevk@opera.com>

Abstract

The Cascading Style Sheets Object Model defines enables developers to find style sheets associated with a Document, to query and modify rules within a CSS style sheet (through an object model) and to find out layout related information from objects within a Document.

Status of this Document

This document is in its very early stages. The intention is that this specification will in due course supersede DOM Level 2 Style.

Table of Contents

1. Introduction

...

1.1. History

This section is non normative.

Several interfaces from DOM Level 2 Style have been obsoleted because they where thought to be too awkward for frequent use. This specification no longer contains those features. DOMImplementationCSS has been removed as well.

1.2. Conformance Requirements

Everything in this specification is normative except for diagrams, examples, notes and sections marked non-normative.

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

The following conformance classes are defined (and considered) by this specification:

conforming implementation
A user agent that implements all interfaces described in this specification and follows all must-, required- and shall-level of criteria in this specification.
conforming document
A document that follows all must-, required- and shall-level of criteria in this specification that apply to document authors.
conforming authoring tool
One that produces conforming documents.

1.2.1. Terminology and Conventions

A color component integer is a base-ten integer in the range 0-255 using digits 0-9, U+0030 to U+0039, in the shortest form possible.

A color component separator is a literal U+002C COMMA followed by a U+0020 SPACE.

When this specification talks about object A where A is actually an interface, it generally means an object implementing interface A.

The terms whitespace and style sheet are used as defined in the CSS 2.1 Specification [CSS21].

A CSS style sheet is a style sheet that conforms to the CSS syntax rules.

1.2.2. DOM feature strings

DOM Level 3 Core defines mechanisms for checking for interface support, and for obtaining implementations of interfaces, using feature strings. [DOM3CORE]

A DOM application can use the hasFeature(feature, version) method of the DOMImplementation interface with parameter values "StyleSheets" and "3.0" (respectively) to determine whether or not "Accessing style sheets through the DOM" is supported by the implementation. The feature string "CSS" (with version string "3.0") can be used to check if the implementation supports "Cascading Style Sheets APIs" and "Layout" (with version string "3.0") can be used to check if the implementation supports "Layout APIs". User agents should respond with a true value when the hasFeature method is queried with these values. Authors are cautioned, however, that user agents returning true might not be perfectly compliant, and that user agents returning false might well have support for features in this specification; in general, therefore, use of this method is discouraged.

The values "StyleSheets", "CSS" and "Layout" (all with version "3.0") should also be supported in the context of the getFeature() and isSupported() methods, as defined by DOM Level 3 Core.

The interfaces defined in this specification are not always supersets of the interfaces defined in DOM Level 2 Style; some features that were formerly deprecated, poorly supported, rarely used or considered unnecessary have been removed. Therefore it is not guaranteed that an implementation that supports "CSS" "3.0" also supports "CSS" "2.0".

2. Accessing style sheets through the DOM

Each style sheet is represented by a StyleSheet object. These objects can be accessed through the LinkStyle interface implemented on individual Node objects or through the DocumentStyle interface implemented on the Document object. The DocumentStyle interface also provides an interface for enabling alternative style sheets and manipulating style sheet sets.

2.1. Terminology

Each style sheet can have a title. A style sheet is said to have a title if the title attribute on the StyleSheet object is neither null nor the empty string.

Persistent style sheets are style sheets without a title.

One or more style sheets with the same title (case-sensitive) form a style sheet set.

2.2. The LinkStyle Interface

Nodes within the DOM causing the association of a style sheet must implement the LinkStyle interface. 

interface LinkStyle {
  readonly attribute StyleSheet       sheet;
};
sheet of type StyleSheet, readonly
This attribute must be the StyleSheet the node is referring to or null if the node is not referring to a StyleSheet (for example, all link elements in HTML implement this interface, but not all link elements are used for style sheets).

Whether or not the node refers to a style sheet is defined by the specification that defines the semantics of said node.

2.2.1. Requirements on specifications

Specifications introducing new ways of associating style sheets through the DOM should define which objects implement the LinkStyle interface. In addition, these specifications should define how these objects affect the potentially associated StyleSheet object (when sheet is non-null).

2.2.2. Requirements on SVG user agents

This section applies to user agents supporting SVG.

SVG user agents must implement LinkStyle on objects implementing the SVGStyleElement interface.

Should SVG define this instead?

2.2.3. <?xml-stylesheet?> processing instruction

User agents supporting supporting <?xml-stylesheet?> must implement the LinkStyle on objects implementing ProcessingInstruction.

If the target DOM attribute of the ProcessingInstruction is not xml-stylesheet or if the href pseudo-attribute of the processing instruction does not point to an external resource or does point to an external resource that has not yet been downloaded the sheet attribute must be null. Otherwise, if the target DOM attribute is xml-stylesheet, the resource has been downloaded and the determined type is a supported style sheet language the sheet attribute must be a StyleSheet object with the members implemented as follows:

type
This must be the determined type.
href
This must be the value of the href pseudo-attribute.
media
This must be the value of the media pseudo-attribute.
title
This must be the value of the title pseudo-attribute.

2.3. The DocumentStyle Interface

Any object implementing the Document interface must also implement the DocumentStyle interface.

interface DocumentStyle {
  readonly attribute StyleSheetList   styleSheets;
           attribute DOMString        selectedStyleSheetSet;
  readonly attribute DOMString        lastStyleSheetSet;
  readonly attribute DOMString        preferredStyleSheetSet;
  readonly attribute DOMStringList    styleSheetSets;
  void               enableStylesheetsForSet(in DOMString name);
};

For this interface, the DOMString values null and "the empty string" are distinct and must not be considered equivalent.

The members are defined as follows:

styleSheets of type StyleSheetList

This attribute must be a StyleSheetList object containing a collection of all LinkStyle objects with a non-null preceded by style sheets introduced through HTTP headers.

sheet attribute in document order

selectedStyleSheetSet of type DOMString

This attribute indicates which style sheet set is in use. This attribute is live; changing the disabled attribute on style sheets directly will change the value of this attribute.

If all the sheets that are enabled and have a title have the same title (by case-sensitive comparisons) then the value of this attribute must be exactly equal to the title of the first enabled style sheet with a title in the styleSheets list. Otherwise, if style sheets from different sets are enabled, then the return value must be null (there is no way to determine what the currently selected style sheet set is in those conditions). Otherwise, either all style sheets that have a title are disabled, or there are no alternative style sheets, and selectedStyleSheetSet must return the empty string.

Setting this attribute to the null value must have no effect.

Setting this attribute to a non-null value must call enableStylesheetsForSet() with that value as the method's argument, and set lastStyleSheetSet to that value.

From the DOM's perspective, all views have the same selectedStyleSheetSet. If a user agent supports multiple views with different selected alternative style sheets, then this attribute (and the StyleSheet interface's disabled attribute) must return and set the value for the default view.

lastStyleSheetSet of type DOMString, readonly

This attribute must initially have the value null. Its value changes when the selectedStyleSheetSet attribute is set.

preferredStyleSheetSet of type DOMString, readonly

This attribute must be the preferred style sheet set as set by the author. It is determined from the order of style sheet declarations and the Default-Style HTTP headers. If there is no preferred style sheet set, this attribute must be the empty string. The case of this attribute must exactly match the case given by the author where the preferred style sheet is specified or implied. This attribute must never be null.

styleSheetSets of type DOMStringList, readonly

This must be a live list of the currently available style sheet sets. This list is constructed by enumerating all the style sheets for this document available to the implementation, in the order they are listed in the styleSheets attribute, adding the title of each style sheet with a title to the list, avoiding duplicates by dropping titles that match (case-sensitively) titles that have already been added to the list.

enableStylesheetsForSet(name), method

Invoking this method must change the disabled attribute on each StyleSheet object with a title in the styleSheets attribute, so that all those whose title matches the name argument are enabled, and all others are disabled. Title matches must be case-sensitive.

Invoking this method with the empty string value must disable all alternative and preferred style sheets (but does not change the state of persistent style sheets).

Invoking this method with the null value must have no effect.

Style sheets that do not have a title are never affected by this method. This method does not change the values of the lastStyleSheetSet or preferredStyleSheetSet attributes.

2.4. The StyleSheetList Interface

The object implementing this interface represents a live collection of StyleSheet objects.

In bindings that allow it, enumerating a StyleSheetList object must enumerate through the currently stored and accessible items in the list the object is associated with. This ensures document.styleSheets[1].x is possible from ECMAScript for example. 

interface StyleSheetList {
  readonly attribute unsigned long    length;
  StyleSheet         item(in unsigned long index);
};

The members of the StyleSheetList object are defined as follows:

length, of type unsigned long, readonly
This attribute must be the number of StyleSheet objects currently in the list.
item(index), method
When invoked, this method must return the StyleSheet in the list given by index. If index is less than zero then this method must raise an INDEX_SIZE_ERR exception. If index is greater than or equal to the number of style sheets currently in the list this method must return null.

2.5. Dynamically adding new style sheets

If new style sheets with titles are added to the document, the user agent must decide whether or not the style sheets should be initially enabled or not. How this happens depends on the exact state of the document at the time the style sheet is added, as follows.

2.5.1. Adding style sheets

First, if the style sheet is a preferred style sheet (it has a title, but is not marked as alternative), and there is no current preferred style sheet (the preferredStyleSheetSet attribute is equal to the empty string) then the preferredStyleSheetSet attribute is set to the exact value of this style sheet's title. (This changes the preferred style sheet set, which causes further changes — see below.)

Then, for all sheets, if any of the following is true, then the style sheet must be enabled:

Otherwise, the style sheet must be disabled.

2.5.2. Changing the preferred style sheet set

The first time the preferred style sheet set is set, which is either before any alternative style sheets are seen (e.g. using a Default-Style HTTP header), or is the first time a titled, non-alternative style sheet is seen (in the absence of information to the contrary, the first titled non-alternative sheet sets the name of the preferred set), the preferredStyleSheetSet attribute's value must be set to the name of that preferred style sheet set. This does not change the lastStyleSheetSet attribute.

If the user agent has the preferred style sheet set changed, for example if it receives a Default-Style HTTP header after it receives HTTP Link headers implying another preferred style sheet, then the preferredStyleSheetSet attribute's value must be changed appropriately, and, if the lastStyleSheetSet is null, the enableStylesheetsForSet() method must be called with the new preferredStyleSheetSet value. (The lastStyleSheetSet attribute is, again, not changed.)

2.5.3. Examples

Thus, in the following HTML snippet:

<link rel="alternate stylesheet" title="foo" href="a">
<link rel="alternate stylesheet" title="bar" href="b">
<script>

  document.selectedStyleSheetSet = 'foo';
  document.styleSheets[1].disabled = false;
</script>
<link rel="alternate stylesheet" title="foo" href="c">
<link rel="alternate stylesheet" title="bar" href="d">

...the style sheets that end up enabled are style sheets "a", "b", and "c", the selectedStyleSheetSet attribute would return null, lastStyleSheetSet would return "foo", and preferredStyleSheetSet would return "".

Similarly, in the following HTML snippet:

<link rel="alternate stylesheet" title="foo" href="a">
<link rel="alternate stylesheet" title="bar" href="b">
<script>
  var before = document.preferredStyleSheetSet;
  document.styleSheets[1].disabled = false;
</script>
<link rel="stylesheet" title="foo" href="c">

<link rel="alternate stylesheet" title="bar" href="d">
<script>
  var after = document.preferredStyleSheetSet;
</script>

...the "before" variable will be equal to the empty string, the "after" variable will be equal to "foo", and style sheets "a" and "c" will be enabled. This is the case even though the first script block sets style sheet "b" to be enabled, because upon parsing the following <link> element, the preferredStyleSheetSet is set and the enableStylesheetsForSet() method is called (since selectedStyleSheetSet was never set explicitly, leaving lastStyleSheetSet at null throughout), which changes which style sheets are enabled and which are not.

2.6. Interaction with the User Interface

The user interface of Web browsers that support style sheets should list the style sheet titles given in the styleSheetSets list, showing the selectedStyleSheetSet as the selected style sheet set, leaving none selected if it is null or the empty string, and selecting an extra option "Basic Page Style" (or similar) if it is the empty string and the preferredStyleSheetSet is the empty string as well.

Selecting a style sheet from this list should set the selectedStyleSheetSet attribute. This (by definition) affects the lastStyleSheetSet attribute.

2.6.1. Persisting the selected style sheet set

If UAs persist the selected style sheet set, they should use the value of the selectedStyleSheetSet attribute, or if that is null, the lastStyleSheetSet attribute, when leaving the page (or at some other time) to determine the set name to store. If that is null then the style sheet set should not be persisted.

When re-setting the style sheet set to the persisted value (which can happen at any time, typically at the first time the style sheets are needed for styling the document, after the <head> of the document has been parsed, after any scripts that are not dependent on computed style have executed), the style sheet set should be set by setting the selectedStyleSheetSet attribute as if the user had selected the set manually.

This specification does not give any suggestions on how UAs should decide to persist the style sheet set or whether or how to persist the selected set across pages.

2.7. Forward compatibility

Future versions of CSS may introduce ways of having alternative style sheets declared at levels lower than the top level, i.e. embedded within other style sheets. Implementations of this specification that also support this proposed declaration of alternative style sheets are expected to perform depth-first traversals of the styleSheets list, not simply enumerations of the styleSheets list that only contains the top level.

Would that actually work?!

2.8. The StyleSheet Interface

Each style sheet is represented by a StyleSheet object. 

interface StyleSheet {
  readonly attribute DOMString        type;
           attribute boolean          disabled;
  readonly attribute Node             ownerNode;
  readonly attribute StyleSheet       parentStyleSheet;
  readonly attribute DOMString        href;
  readonly attribute DOMString        title;
  readonly attribute MediaList        media;
};
type of type DOMString, readonly

This attribute indicates the MIME type of the style sheet. It's set by objects which cause a StyleSheet object to be created, such as LinkStyle.

disabled of type boolean

On getting, this attribute must be true when the style sheet is disabled and false otherwise.

On setting, a value of true must disable the style sheet and a value of false enable it.

ownerNode of type Node, readonly
This attribute must be the Node that associates the style sheet with the document or null otherwise. This Node has implemented the LinkStyle interface.
parentStyleSheet of type StyleSheet, readonly
This attribute must be the StyleSheet object that caused the inclusion of the current style sheet or null if there is no such object.
href of type DOMString, readonly
This attribute must be an IRI pointing to the location of the standalone style sheet or null otherwise (when it's inside a style element for example).
title of type DOMString
This attribute must be the title of the style sheet. In HTML this can obtained from the HTMLLinkElement or HTMLStyleElement for example.
media of type MediaList, readonly

This attribute must be a MediaList object.

In binding languages that support setting to a readonly attribute setting media to a string must set the value of mediaText on the MediaList object.

2.9. The MediaList Interface

This interface depends on the Media Queries specification which still has some issues.

The MediaList object represents a collection of media queries. It provides various ways to manipulate this collection.

In bindings that allow it, enumerating a MediaList object must enumerate through the current collection of media queries.

In bindings that allow it, such as ECMAScript, MediaList objects must stringify to their mediaText attribute's value. 

interface MediaList {
           attribute DOMString        mediaText;
  readonly attribute unsigned long    length;
  DOMString          item(in unsigned long index);
  void               appendMedium(in DOMString medium)
  void               deleteMedium(in DOMString medium)
};
mediaText of type DOMString

On getting this attribute must be a comma-separated list of normalized media queries or the empty string otherwise.

On setting ....

length of type unsigned long
This attribute must be the number of media in the list.
item(index), method
When invoked, this method must return the media query in the collection given by index. If index is less than zero then this method must raise an INDEX_SIZE_ERR exception. If index is greater than or equal to the number of media queries currently in the collection this method must return null.
appendMedium(medium), method
When invoked, ....
deleteMedium(medium), method
This method, when invoked, must raise a NOT_FOUND_ERR exception when medium is not in the collection. Otherwise, medium must be removed from the collection.

3. Cascading Style Sheets APIs

This section (and its subsections) are only applicable to user agents implementing CSS.

The previous section provided a way of getting access to style sheets in a generic way. This section provides a way for getting access to the individual style rules within a Cascading Style Sheet as defined by the CSS specifications. [CSS]

3.1. Parsing and Serializing CSS Constructs

This section (and its subsections) define rules for parsing and serialization of CSS constructs.

3.1.1. CSS Value Rules

The rules for parsing a CSS value for a given property are as given in the following algorithm. The result is either a CSS value or "null" if the operation failed.

  1. Parse the value using the S* expr production in combination with the allowed values for the given property. If this fails return "null". Otherwise return the parsed value.

The aforementioned production is defined in the CSS 2.1 specification. [CSS]

The rules for serializing a CSS value are as given in the following algorithm:

  1. Relative lengths (em, ex, px, all the font-size keywords and %) do not have their units changed. However, absolute lengths must be given in millimeters. For example, the canonical version of +012.0pt is 4.2333mm (give or take a few significant figures). Computed values may well be in different units than the specified value. User agents are to use px as their final units for computed length values.

  2. When a <length> of zero is given, then any specified units must be removed.

  3. A <color> value is canonicalized as follows:

    It is a system color
    See below (you use the representation given in the specification that defines the keyword).
    Alpha component is equal to 1.0
    The color is an uppercase six-digit hexadecimal value, prefixed with a # character (U+0023 NUMBER SIGN), with the first two digits representing the red component, the next two digits representing the green component, and the last two digits representing the blue component, the digits being in the range 0-9 A-F (U+0030 to U+0039 and U+0041 to U+0046).
    Alpha component is less than 1.0
    The color is in the CSS rgba() functional-notation format: the literal string rgba (U+0072 U+0067 U+0062 U+0061) followed by a U+0028 LEFT PARENTHESIS, a color component integer representing the red component, a color component separator, a color component integer for the green component, a color component separator, a color component integer for the blue component, another color component separator a U+0030 DIGIT ZERO, a U+002E FULL STOP (representing the decimal point), one or more digits in the range 0-9 (U+0030 to U+0039) representing the fractional part of the alpha value, and finally a U+0029 RIGHT PARENTHESIS.
    The keyword transparent is used
    The color is rgba(0, 0, 0, 0).

  4. Angles are canonicalized to deg and normalized to the range of their property. For example, azimuth: 700grad would be canonicalized to azimuth: 270deg. This also applies to angle keywords as used in the elevation and azimuth properties, they are canonicalized to their value in degrees.

  5. Times are canonicalized to seconds (s).

  6. Frequencies are canonicalized to Hertz (Hz).

  7. For all integers and real numbers, including those with units, these canonicalization steps must be followed: If the number is 0, the canonical result is the literal string 0 plus any units (for lengths, the unit identifier will have been removed before this step). Otherwise, leading zeros must be omitted, any leading + must be omitted, the decimal point in a real number must be omitted unless there is a fractional part, and if the number is in the range -1 < x < 1, then one leading 0 must be inserted before the decimal point. The number of given significant figures is completely user agent dependent.

  8. Where multiple values may appear in any order without changing the meaning of the value (typically represented by a double bar || in the value syntax), user agents are to use the canonical order as given in the syntax (e.g. <border-width> <border-style> <color> for the border short-hand property).

  9. When repeated values may be omitted without changing the meaning of the value (e.g. as in the margin and padding properties), then the fewest number of values should be given.

  10. If whitespace may be removed without changing the meaning of the value it is to be removed.

  11. <specific-voice> and <family-name values are to be quoted.

  12. Double quotes (rather than single quotes) shall be used for string quotation. (When changing from single quotes to double quotes, double quotes already in the string are escaped.)

  13. The quotes in the <uri> form should be removed. (Parenthesises that were in the string, along with any other characters not legal when the string is not quoted (such as commas), must be escaped.)

  14. Unnecessary escapes should be removed. (For example, \z should be represented as z. This extends to unescaping UNICODE escapes, except, of course, if the encoding cannot contain those characters!)

  15. Where components of the value may be dropped without changing the meaning of the value (for example, initial values in shorthand properties), then they should be removed. If this would remove all the values, then the first allowed value must be given (For example, for background that would be rgba(0, 0, 0, 0) since background-color is the first component of the value; for border it would be 0 since the first component of that value is border-width).

  16. A single space should be added after each comma that is not part of a string, except where that would change the meaning of the value. For example:

    foo,bar,baz

    should become:

    foo, bar, baz

  17. Whenever case is insensitive, for example in property or counter names, the text should be changed to the canonical case as given in the syntax definition. For example, the canonical value of:

    COUNTER( PAR-NUM,UPPER-ROMAN ) DISC

    is:

    counter(par-num, upper-roman) disc

    but the color WINDOWTEXT becomes WindowText.

3.1.1.1. Examples of the CSS Value Serializing Algorithm

The steps above should guarantee that there is no data loss, from a CSS point of view. Here are some examples of before and after results on specified values. The before column could be what the author wrote in a stylesheet, while the after column shows what querying the DOM would return.

Before After
background: none background: rgba(0, 0, 0, 0)
outline: none outline: invert
border: none border: medium
list-style: none list-style: disc
margin: 0px 1px 1px 1px margin: 0 1px 1px
azimuth: behind left azimuth: 220deg
font-family: a, 'b"', serif font-family: "a", "b\"", serif
content: url('h)i') '\[\]' content: url(h\)i) "[]"
azimuth: leftwards azimuth: leftwards
color: rgb(18, 52, 86) color: #123456
color: rgba(000001, 0, 0, 1) color: #000000

3.1.2. Selectors Rules

The rules for parsing a group of selectors are as given in the following algorithm. The return value is either a group of selectors or "null" (if parsing failed).

  1. Parse the value using the selectors_group production. If this fails return "null". Otherwise return the parsed value.

The aforementioned production is defined in the Selectors specification. [Selectors]

The rules for serializing a group of selectors are as given in the following algorithm. The input is a a non-normalized group of selectors and the output is a normalized group of selectors.

  1. Replace one or more consecutive whitespace characters with a single U+0020 character.

  2. Remove leading and trailing whitespace.

  3. Make sure combinators other than the descendant combinator are preceded and followed by a single U+0020 character (and not more).

  4. Make sure each U+002C (,) character is followed by a single U+0020 character (and not more).

  5. Convert pseudo-classes and pseudo-elements to their canonical form as given in the specification. :HOver becomes :hover and :befoRe becomes ::before for example.

  6. Hmm, what about pseudo-classes taking arguments? Attribute selectors? Namespace prefixes?

3.1.3. CSS Page Selectors Rules

Need to define the rules for parsing a CSS page selector and serializing a CSS page selector.

3.1.4. Processing CSS Statements

Need to split this up in parsing and common algorithms.

The rules for inserting a statement are as given in the following algorithm. The variables rule, rule list and index are to be considered equivalent to the identically named variables used when invoking this algorithm. If an exception is raised the algorithm is to be aborted. The steps must be followed in order, as follows:

  1. If index is negative or greater than the length of the rule list an INDEX_SIZE_ERR exception must be raised.

  2. Parse rule as a CSS statement. If the rule is ignored by the CSS parser abort this algorithm (don't raise an exception). Otherwise, create an object that implements one of the inherited interfaces of CSSStyle appropriate for the parsed rule. Let object be the newly created object.

  3. If object can't be inserted within the rule list at the given index because that's not allowed per the CSS specification a HIERARCHY_REQUEST_ERR exception must be raised.

  4. Insert object at the given index within the rule list.

The rules for removing a statement are as given in the following algorithm. The variables index and rule list are to be considered equivalent to the identically named variables used when invoking this algorithm. If an exception is raised this algorithm is to be aborted. The steps must be followed in order, as follows:

  1. If index is negative or greater than the length of the rule list an INDEX_SIZE_ERR exception must be raised.

  2. Remove the object at index from rule list.

The rules for replacing a statement are as given in the following algorithm. The variable rule and old object are to be considered equivalent to the identically named variables used when invoking this algorithm. If an exception is raised this algorithm is to be aborted. The steps must be followed in order, as follows:

  1. Parse rule as a CSS statement. If the rule is ignored by the CSS parser abort this algorithm (don't raise an exception). Otherwise, create an object that implements one of the inherited interfaces of CSSStyle appropriate for the parsed rule. Let object be the newly created object.

  2. If the type of object does not match the type of old object it will replace user agents must raise an INVALID_MODIFICATION_ERR exception.

  3. Replace old object with object.

3.2. The CSSStyleSheet Interface

The CSSStyleSheet interface represents a CSS style sheet.

interface CSSStyleSheet : StyleSheet {
  readonly attribute CSSRule ownerRule;
  readonly attribute CSSRuleList cssRules;
  unsigned long insertRule(in DOMString rule, in unsigned long index);
  void deleteRule(in unsigned long index);
};

The ownerRule attribute, on getting, must return the CSSImportRule that caused this style sheet to be imported (if any). Otherwise, if no CSSImportRule caused it to be imported the attribute must return null.

The cssRules attribute, on getting, must return a CSSRuleList object consisting of a list of statements in order they were found in the CSS style sheet.

Statements that were dropped during parsing can not be found using these APIs.

The insertRule(rule, index) method, when invoked, must insert a statement where rule is rule, index is index and rule list is cssRules.

The deleteRule(index) method, when invoked, must remove a statement where index is index and rule list is cssRules.

3.3. The CSSRuleList Interface

The CSSRuleList object represents an (ordered) list of statements. 

interface CSSRuleList {
  readonly attribute unsigned long length;
  CSSRule item(in unsigned long index);
};

The length attribute, on getting, must return the number of items associated with the object.

The item(index) method, when invoked, if index is equal or greater than the length this method must return null. Otherwise, this method must return the CSSRule in the list given by index.

3.4. Interfaces for CSS Statements

This section defines several specific interfaces for different types of CSS statements and one generic from which the more specific inherit.

3.4.1. The CSSRule Interface

The CSSRule interface is the base interface from which all other CSS statement interfaces inherit. 

interface CSSRule {
  // CSS statement type
  const unsigned short STYLE_RULE = 1;
  const unsigned short CHARSET_RULE = 2;
  const unsigned short IMPORT_RULE = 3;
  const unsigned short MEDIA_RULE = 4;
  const unsigned short FONT_FACE_RULE = 5;
  const unsigned short PAGE_RULE = 6;
  const unsigned short NAMESPACE_RULE = 7;
  readonly attribute unsigned short type;

  // Textual representation
           attribute DOMString cssText;
  
  // Context information
  readonly attribute CSSRule parentRule;
  readonly attribute CSSStyleSheet parentStyleSheet;
};

The type attribute, on getting, must return the CSS statement type as detailed for each specific type.

The cssText attribute allows for replacing a CSS statement or getting a textual representation. On setting, user agents must replace a statement where rule is the value being set and old object is the object of which this attribute is set.

On getting the cssText attribute, ....

The parentRule attribute must return the nearest enclosing rule of the current rule or null if there is no enclosing rule. For example, an @media block enclosing the current rule.

The parentStyleSheet attribute must return the CSSStyleSheet object that contains the the current rule.

3.4.1.1. Extensibility

The constant values 0-1000 are reserved for future use by the CSS WG.

Vendors are encouraged to use reasonably unique values outside this range so that they do not clash with extensions from other vendors. For example, the first value for Mozilla could be 0x08EC0001 and 0x09E8A001 could be the first for Opera.

Vendors are encouraged to prefix the new interface names with a vendor specific prefix. For example, "Example company" could have an interface called "ExampleCSSTestRule".

In general, vendors are encouraged to discuss extensions on a public forum, such as www-style@w3.org.

3.4.2. The CSSStyleRule Interface

The CSSStyleRule object represents a ruleset specified (if any) in a CSS style sheet. It provides access to a declaration block as well as to the associated group of selectors.

Objects implementing the CSSStyleRule interface can be identified by the STYLE_RULE constant. On these objects the type attribute must return the value of that constant. 

interface CSSStyleRule : CSSRule {
           attribute DOMString selectorText;
  readonly attribute CSSStyleDeclaration style;
};

The selectorText attribute allows for manipulation of the associated group of selectors or getting a textual representation of them. On setting, user agents must parse the given string as a group of selectors. If the given string is ignored user agents must act as if setting did not occur. Otherwise, set the attribute to the parsed string and re-apply the style rules stored in the style attribute.

When getting the selectorText attribute it must return a textual representation of the group of selectors.

The style attribute must return a live CSSStyleDeclaration object for the ruleset.

3.4.3. The CSSCharsetRule Interface

It might make more sense to have an "encoding" attribute on CSSStyleSheet and never let this interface enter the CSSOM...

The CSSCharsetRule object represents an @charset rule specified (if any) in a CSS style sheet.

Objects implementing the CSSCharsetRule interface can be identified by the CHARSET_RULE constant. On these objects the type attribute must return the value of that constant. 

interface CSSCharsetRule : CSSRule {
  readonly attribute DOMString encoding;
};

The encoding attribute must return the specified encoding.

3.4.4. The CSSImportRule Interface

Objects implementing the CSSImportRule interface can be identified by the IMPORT_RULE constant. On these objects the type attribute must return the value of that constant.

The CSSImportRule object represents an @import rule specified (if any) in a CSS style sheet. 

interface CSSImportRule : CSSRule {
  readonly attribute DOMString href;
  readonly attribute MediaList media;
  readonly attribute CSSStyleSheet styleSheet;
};

The href attribute, on getting, must return the specified URI of the style sheet referenced by the @import rule.

The media attribute, on getting, must return a live MediaList object containing a list of media queries applicable to the imported style sheet as specified by the @import rule.

The styleSheet attribute, on getting, must return the CSSStyleSheet object that represents the referenced (parsed) style sheet from the @import rule.

If loading of the style sheet fails its cssRules list is simply empty.

3.4.5. The CSSMediaRule Interface

Objects implementing the CSSMediaRule interface can be identified by the MEDIA_RULE constant. On these objects the type attribute must return the value of that constant.

The CSSMediaRule object represents an @media rule specified (if any) in a CSS style sheet. It is a single statement that contains zero or more rulesets which are contrained by one or more media queries (unless one happens to be all). 

interface CSSMediaRule : CSSRule {
  readonly attribute MediaList media;
  readonly attribute CSSRuleList cssRules;
  unsigned long insertRule(in DOMString rule, in unsigned long index);
  void deleteRule(in unsigned long index);
};

The media attribute, on getting, must return a MediaList object containing a list of media queries specified with the @media rule.

The cssRules attribute, on getting, must return a CSSRuleList object containing a list of all the rulesets specified within the @media rule.

The insertRule(rule, index) method, when invoked, must insert a statement where rule is rule, index is index and rule list is cssRules.

The deleteRule(index) method, when invoked, must remove a statement where index is index and rule list is cssRules.

3.4.6. The CSSFontFaceRule Interface

Objects implementing the CSSFontFaceRule interface can be identified by the FONT_FACE_RULE constant. On these objects the type attribute must return the value of that constant.

The CSSFontFaceRule object represents an @font-face rule specified (if any) in a CSS style sheet. 

interface CSSFontFaceRule : CSSRule {
  readonly attribute CSSStyleDeclaration style;
};

The style attribute must return a CSSStyleDeclaration block that contains the property declarations specified within the @font-face rule.

3.4.7. The CSSPageRule Interface

Objects implementing the CSSPageRule interface can be identified by the PAGE_RULE constant. On these objects the type attribute must return the value of that constant.

The CSSPageRule object represents an @page rule specified (if any) in a CSS style sheet. 

interface CSSPageRule : CSSRule {
           attribute DOMString selectorText;
  readonly attribute CSSStyleDeclaration style;
};

The selectorText allows for setting a new page selector or getting the textual representation of the current one. On setting, user agents must parse the given string as a page selector. If the given string is ignored user agents must act as if setting did not occur. Otherwise, the attribute must be set to the parsed string and the styles must be re-applied.

When getting the selectorText attribute it must return a textual representation of the page selector for the rule.

We need to define normalization...

The style attribute, on getting, must return a CSSStyleDeclaration that contains the specified property declarations within the @page rule.

3.4.8. The CSSNamespaceRule Interface

Objects implementing the CSSNamespaceRule interface can be identified by the NAMESPACE_RULE constant. On these objects the type attribute must return the value of that constant.

The CSSNamespaceRule object represents an @namespace rule specified (if any) in a CSS style sheet that consists of a prefix and namespace. 

interface CSSNamespaceRule : CSSRule {
  readonly attribute DOMString namespaceURI;
  readonly attribute DOMString prefix;
};

The namespaceURI attribute, on getting, must return specified namespace IRI from the @namespace rule.

The prefix attribute, on getting, must return the specified prefix from the @namespace rule or the empty string if there is no prefix.

3.5. Accessing declaration blocks

This section provides various way to get to declaration blocks which you can then manipulate.

3.5.1. Introduction

...

3.5.2. The ElementCSSInlineStyle Interface

interface ElementCSSInlineStyle {
  readonly attribute CSSStyleDeclaration  style;
  readonly attribute CSSStyleDeclaration  currentStyle;
  readonly attribute CSSStyleDeclaration  runtimeStyle;
};

...

The currentStyle attribute, when called, must return a readonly CSSStyleDeclaration object which represents the computed style for the element on which it was called.

Serialization of the style attribute is not guaranteed to work.

3.5.3. The ViewCSS Interface

Objects implementing the Window interface must also implement the ViewCSS interface.

The expectation is that an instance of the ViewCSS interface can be obtained by using binding-specific casting methods on an instance of the AbstractView interface.

Since a computed style is related to an Element node, if this element is removed from the document, the associated CSSStyleDeclaration is no longer valid. 

interface ViewCSS {
  CSSStyleDeclaration getComputedStyle(in Element elt);
  CSSStyleDeclaration getComputedStyle(in Element elt, in DOMString pseudoElt);
};

The getComputedStyle method must return a live CSSStyleDeclaration object that contains the computed style declaration block for elt, when the pseudoElt argument is null, the empty string or omitted. Otherwise, for the pseudo-element pseudoElt of elt. [CSS]

If pseudoElt is not a recognized CSS pseudo-element the invocation the method must return ....

3.5.4. The DocumentCSS Interface

I think I'll drop this soon!

This interface represents a document with a CSS view.

The getOverrideStyle method provides a mechanism through which a DOM author could effect immediate change to the style of an element without modifying the explicitly linked style sheets of a document or the inline style of elements in the style sheets. This style sheet comes after the author style sheet in the cascade algorithm and is called override style sheet. The override style sheet takes precedence over author style sheets. An !important declaration in an author style sheet still takes precedence over a normal declaration in an author style sheet. Override, author and user style sheets may all contain !important declarations. User !important rules take precedence over both override and author !important rules, and override !important rules take precedence over author !important rules.

The expectation is that an instance of the DocumentCSS interface can be obtained by using binding-specific casting methods on an instance of the Document interface. 

interface DocumentCSS : DocumentStyle {
  CSSStyleDeclaration getOverrideStyle(in Element elt, in DOMString pseudoElt);
};

The getOverrideStyle method must return the override style declaration for the Element elt (when pseudoElt is null) or for the pseudo-element pseudoElt of Element elt.

For language bindings that support optional arguments invoking getOverrideStyle without the pseudoElt argument must be identical to invoking the method with that argument being null.

3.6. CSS Declaration Blocks

The interfaces described in this section provide generic and convenient attributes for manipulating CSS declaration blocks.

3.6.1. The CSSStyleDeclaration Interface

The CSSStyleDeclaration interface gives access to read and manipulate CSS properties and their values within a declaration block.

If an attribute or method returns an object implementing the CSSStyleDeclaration interface (and related interfaces) and says the object is readonly user agents must raise a NO_MODIFICATION_ALLOWED_ERR exception on an attempt to modify the object.

Invoking removeProperty or setting cssText would be examples of that.

CSSStyleDeclaration can represent computed values and used values. (This also goes for interfaces implemented on top of CSSStyleDeclaration objects obviously.)

This object stringifies to its cssText attribute. Or not? 

interface CSSStyleDeclaration {
           attribute DOMString cssText;
  DOMString getPropertyValue(in DOMString property);
  DOMString getPropertyPriority(in DOMString property);
  DOMString removeProperty(in DOMString property);
  void setProperty(in DOMString property, in DOMString value);
  void setProperty(in DOMString property, in DOMString value, in DOMString priority);
  readonly attribute unsigned long length;
  DOMString item(in unsigned long index);
  readonly attribute CSSRule parentRule;
};

The cssText attribute, on getting, ....

On setting the cssText attribute, user agents must remove all properties currently set on the object and then parse the given string as the contents of a declaration block and set each property / value pair that is not ignored on the CSSStyleDeclaration block. [CSS]

The getPropertyValue(property) method, when invoked, ....

The getPropertyPriority(property) method, when invoked, if property case-insensitively matches a specified property that has a priority user agents must return the canonical priority of that property as given in the syntax definition. Otherwise, the empty string must be returned.

For background-color:lime !IMPORTANT the return value would be important.

The removeProperty(property) method, when invoked, if property case-insensitively matches a specified property user agents must remove that property declaration.

The setProperty(property, value, priority) method gives a way to set a declaration. When invoked, user agents must run the following steps:

  1. If property does not case-insensitively match a supported property abort this algorithm.

  2. If value is null or the empty string invoke removeProperty with property as argument and abort this algorithm.

  3. If the priority argument has been omitted let priority be null.

  4. If priority is neither a valid priority nor null or the empty string abort this algorithm.

  5. If parsing the value returns "null" abort this algorithm.

    value can not include !important.

  6. Finally, set property to value with priority priority when priority is not null or the empty string. Otherwise set property to value.

The length attribute must be the number of setted properties.

The item(index) method, when invoked, ....

The parentRule attribute, on getting, must return the CSSrule object the CSSStyleDeclaration is object is associated with or null if it is not associated with a CSSrule object.

3.6.2. The CSS2Properties Interface

If we have all the properties on CSSStyleDeclarationProperties do we still need this interface?

3.6.3. The CSSStyleDeclarationProperties Interface

Need to work out how to deal with properties that take one or more values. Such as the "newstyle" 'background-image' etc. Suggestions welcome.

Objects implementing the CSSStyleDeclaration interface must also implement the CSSStyleDeclarationProperties interface.

The CSSStyleDeclarationProperties interface can never be considered stable. This means that in languages where stable interfaces are important you have to use some kind of versioning mechanism. 

interface CSSStyleDeclarationProperties {
           // This interface will be updated when more CSS property related
           // specifications become stable (for instance, W3C Recommendation).
           attribute CSSBaseValue azimuth;
           attribute CSSColorValue    backgroundColor;
           attribute CSSUrlValue      backgroundImage;
           attribute CSSBaseValue     backgroundPosition;
           attribute CSSBaseValue     borderSpacing;
           attribute CSSColorValue    borderTopColor;
           attribute CSSColorValue    borderRightColor;
           attribute CSSColorValue    borderBottomColor;
           attribute CSSColorValue    borderLeftColor;
           attribute CSSLengthValue   borderTopWidth;
           attribute CSSLengthValue   borderRightWidth;
           attribute CSSLengthValue   borderBottomWidth;
           attribute CSSLengthValue   borderLeftWidth;
           attribute CSSPercentageLengthValue  bottom;
           attribute CSSBaseValue     clip;
           attribute CSSColorValue    color;
           attribute CSSBaseValue     content;
           attribute CSSUrlValue      cueAfter;
           attribute CSSUrlValue      cueBefore;
           attribute CSSUrlValue      cursor;
           attribute CSSBaseValue elevation;
           attribute CSSPercentageLengthValue  fontSize;
           attribute CSSBaseValue     fontWeight;
           attribute CSSPercentageLengthValue  height;
           attribute CSSPercentageLengthValue  left;
           attribute CSSLengthValue   letterSpacing;
           attribute CSSBaseValue     lineHeight;
           attribute CSSUrlValue      listStyleImage;
           attribute CSSPercentageLengthValue  marginTop;
           attribute CSSPercentageLengthValue  marginRight;
           attribute CSSPercentageLengthValue  marginBottom;
           attribute CSSPercentageLengthValue  marginLeft;
           attribute CSSPercentageLengthValue  maxHeight;
           attribute CSSPercentageLengthValue  maxWidth;
           attribute CSSPercentageLengthValue  minHeight;
           attribute CSSPercentageLengthValue  minWidth;
           attribute CSSBaseValue     orphans;
           attribute CSSColorValue    outlineColor;
           attribute CSSLengthValue   outlineWidth;
           attribute CSSPercentageLengthValue  paddingTop;
           attribute CSSPercentageLengthValue  paddingRight;
           attribute CSSPercentageLengthValue  paddingBottom;
           attribute CSSPercentageLengthValue  paddingLeft;
           attribute CSSBaseValue     pauseAfter;
           attribute CSSBaseValue     pauseBefore;
           attribute CSSBaseValue     pitchRange;
           attribute CSSBaseValue     pitch;
           attribute CSSUrlValue      playDuring;
           attribute CSSBaseValue     richness;
           attribute CSSPercentageLengthValue  right;
           attribute CSSBaseValue     speechRate;
           attribute CSSBaseValue     stress;
           attribute CSSPercentageLengthValue  textIndent;
           attribute CSSPercentageLengthValue  top;
           attribute CSSPercentageLengthValue  verticalAlign;
           attribute CSSPercentageLengthValue  width;
           attribute CSSBaseValue     volume;
           attribute CSSBaseValue     widows;
           attribute CSSLengthValue   wordSpacing;
           attribute CSSBaseValue     zIndex;
};

3.7. CSS Values

The specific interfaces for CSS value allow for "easy" script manipulation of CSS property declarations.

For instance, to increase the pixel value of the width property of object obj by 300 one could write:

obj.style.width.px += 300

3.7.1. The CSSBaseValue Interface

The CSSBaseValue interface acts as the base interface for the specific CSS value interfaces.

Objects implementing the CSSBaseValue interface must stringify to the object's cssText attribute.

CSSBaseValue inherits from DOMString, so in bindings where strings have attributes or methods, those attributes and methods will also be available on CSSBaseValue objects. When used, they affect the objects's cssText attribute. 

interface CSSBaseValue : DOMString {
           attribute DOMString cssText;
};

The cssText attribute, on getting, must return a serialized CSS value.

On setting the cssText attribute user agents must parse the setted value for the associated property (the attribute from which this object was obtained). If that algorithm returns "null" user agents must act as if setting did not happen. Otherwise, the attribute must be set to the given value.

3.7.2. The CSSColorValue Interface

interface CSSColorValue : CSSBaseValue {
           attribute unsigned short   red;
           attribute float            redPercent; // 100% = 255
           attribute unsigned short   green;
           attribute float            greenPercent; // 100% = 255
           attribute unsigned short   blue;
           attribute float            bluePercent; // 100% = 255
           attribute float            alpha; // float in range 0.0..1.0
           attribute unsigned short   hue; // integer in range 0..360
           attribute float            saturation; // percentage
           attribute float            lightness; // percentage
           attribute unsigned long    hex3;
           attribute unsigned long    hex6;
};

3.7.3. The CSSUrlValue Interface

interface CSSUrlValue : CSSBaseValue {
           attribute DOMString        url;
  readonly attribute DOMString        absoluteUrl;
};

3.7.4. The CSSLengthValue Interface

interface CSSLengthValue : CSSBaseValue {
           attribute float            em;
           attribute float            ex;
           attribute float            px;
           attribute float            cm;
           attribute float            mm;
           attribute float            pt;
           attribute float            pc;
};

How to express non-negative lengths?

3.7.5. The CSSPercentageLengthValue Interface

interface CSSPercentageLengthValue : CSSLengthValue {
           attribute float            percent;
};

... some exception for when conversion isn't possible.

4. Layout APIs

This section applies to visual user agents only.

The APIs provided in this section provide authors with a way to inspect a rendered document as well as its environment. Examples include getting the element rendered at a certain position or obtaining the width or height of the output screen.

4.1. The WindowLayout Interface

The term browsing context is used as defined by the Window Object 1.0 specification. Some of the other terminology comes from the Media Queries specification. [Window] [MQ]

The WindowLayout interface must be implemented on objects implementing the Window interface. It represents rendering information about the current browsing context. [Window] 

interface WindowLayout {
  readonly attribute float innerWidth;
  readonly attribute float innerHeight;
  readonly attribute float outerWidth;
  readonly attribute float outerHeight;
  readonly attribute float pageXOffset;
  readonly attribute float pageYOffset;
  readonly attribute float screenX;
  readonly attribute float screenY;
  readonly attribute Media media;
  readonly attribute Screen screen;
};

The innerWidth attribute, on getting, must return the viewport width in CSS pixels as number of CSS pixels. This is including, if rendered, the vertical scrollbar.

The innerHeight attribute, on getting, must return the viewport height in CSS pixels as number of CSS pixels. This is including, if rendered, the horizontal scrollbar.

The outerWidth attribute, on getting, must return the width of the browser window in CSS pixels as number of CSS pixels. If there is no browser window this attribute must return zero.

The outerHeight attribute, on getting, must return the height of the browser window in CSS pixels as number of CSS pixels. If there is no browser windows this attribute must return zero.

The pageXOffset attribute, on getting, must return the number of CSS pixels the user has scrolled towards the right.

The pageYOffset attribute, on getting, must return the number of CSS pixels the user has scrolled towards the bottom.

The screenX attribute, on getting, must return the amount of CSS pixels between the left of the browser window and the left of the screen of the output device. If there is no browser window this attribute must return zero.

The screenY attribute, on getting, must return the amount of CSS pixels between the top of the browser window and the top of the screen of the output device. If there is no browser window this attribute must return zero.

The media attribute, on getting, must return a Media object.

The screen attribute, on getting, must return a Screen object.

If the user agent supports multiple views and the current view does not have a notion of an output device the above attributes with the exception of media and screen should return zero. [DOM2View]

4.1.1. The Screen Interface

As its name suggests, the Screen interface represents information about the screen of the output device. 

interface Screen {
  readonly attribute float availWidth;
  readonly attribute float availHeight;
  readonly attribute float width;
  readonly attribute float height;
  readonly attribute float colorDepth;
  readonly attribute float pixelDepth;
};

The availWidth attribute, on getting, must return the available width for rendering surface of the output device in CSS pixels as number of CSS pixels.

The availHeight attribute, on getting, must return the available height for rendering surface of the output device in CSS pixels as number of CSS pixels.

The width attribute, on getting, must return the width of the output device in CSS pixels as number of CSS pixels.

The height attribute, on getting, must return the height of the output device in CSS pixels as number of CSS pixels.

The colorDepth and pixelDepth attributes must both return the lowest number of bits from the color components of the output device. If the device is not a color device these attributes must return zero.

If the user agent supports multiple views and the current view does not have a notion of an output device the above attributes should return zero. [DOM2View]

4.1.2. The Media Interface

interface Media {
  readonly attribute DOMString type;
  boolean query(in DOMString mediaquery);
};

The type attribute, on getting, must return the string that represents the canvas' current rendering mode (screen, print, etc). This is a lowercase string, as defined by the CSS specification. [CSS]

The query(mediaquery) method, when invoked, must return the result of the following algorithm:

  1. If mediaquery can not be parsed according to the rules given in the Media Query specification return false and terminate this algorithm.
  2. If mediaquery matches the state of the current view return true and terminate this algorithm.
  3. Return false.

4.2. The DocumentLayout Interface

Objects implementing the Document interface must also implement the DocumentLayout interface. [DOM3Core] 

interface DocumentLayout {
  Element elementFromPoint(in unsigned long x, in unsigned long y);
};

The elementFromPoint(x, y) method must return the element for the given position. The element to be returned is determined through hit testing. If either argument is negative or if there is no element under the given position the method must return null.

4.3. The ElementLayout Interface

Objects implementing the Element interface must also implement the ElementLayout interface. [DOM3Core] 

interface ElementLayout {
  TextRectangleList getClientRects();
  TextRectangle getBoundingClientRect();

  readonly attribute Element offsetParent;
  readonly attribute float offsetTop;
  readonly attribute float offsetLeft;
  readonly attribute float offsetWidth;
  readonly attribute float offsetHeight;

           attribute float scrollTop;   // scroll on setting
           attribute float scrollLeft;  // scroll on setting
  readonly attribute float scrollWidth;
  readonly attribute float scrollHeight;

  readonly attribute float clientTop;
  readonly attribute float clientLeft;
  readonly attribute float clientWidth;
  readonly attribute float clientHeight;
};

4.3.1. The getClientRects() and getBoundingClientRect methods

The getClientRects() and getBoundingClientRect methods provide information about the position of the border box edges of an element relative to the initial containing block.

The getClientRects() method, when invoked, must return the result of the following algorithm:

  1. If the element on which it was invoked does not have an associated CSS layout box return an empty (static) TextRectangleList object and stop this algorithm.

  2. Return a (static) TextRectangleList object containing a list of (static) TextRectangle objects in content order describing the border boxes, even if they are empty, for the element on which it was invoked.

The getBoundingClientRect() method, when invoked, must return the result of the following algorithm:

  1. If the element on which it was invoked does not have an associated CSS layout box return a (static) TextRectangle object whose top, right, bottom and left members are zero.

  2. Return a union of the border boxes, excluding border boxes that are empty, returned by getClientRects() method as a single TextRectangle object for the element on which it was invoked. If all border boxes are empty let the top attribute of the new TextRectangle object be the value of the top attribute of the first border box in the list returned. Do likewise for left and then let bottom be equal to top and right to left.

4.3.1.1. The TextRectangleList Interface

The TextRectangleList object consists of an ordered list of TextRectangle objects. 

interface TextRectangleList {
  readonly attribute unsigned long length;
  TextRectangle item(in unsigned long index);
};

The length attribute must return the number of TextRectangle objects associated with the object.

The item(index) method, when invoked, must raise an INDEX_SIZE_ERR exception when index is negative or greater than the number of TextRectangle objects associated with the object. Otherwise, the TextRectangle object at index must be returned.

In ECMAScript implementations, objects that implement the TextRectangleList interface must also have a [[Get]] method that, when invoked with a number, acts like the item() method would when invoked with that argument.

4.3.1.2. The TextRectangle Interface

Objects implementing the TextRectangle interface represent a rectangular layout box. 

interface TextRectangle {
  readonly attribute float top;
  readonly attribute float right;
  readonly attribute float bottom;
  readonly attribute float left;
};

The top attribute, on getting, must return the distance between the top of the initial containing block and the top of the rectangle box in CSS pixels as number of CSS pixels assuming nothing has been scrolled.

The right attribute, on getting, must return the distance between the left of the initial containing block and the right of the rectangle box in CSS pixels as number of CSS pixels assuming nothing has been scrolled.

The bottom attribute, on getting, must return the distance between the top of the initial containing block and the bottom of the rectangle box in CSS pixels as number of CSS pixels assuming nothing has been scrolled.

The left attribute, on getting, must return the distance between the left of the initial containing block and the left of the rectangle box in CSS pixels as number of CSS pixels assuming nothing has been scrolled.

The svg:foreignObject element represents an initial containing block for its descendents.

4.3.2. The offset* attributes

The offsetParent attribute, when called on element A, must return the element determined by the following algorithm:

  1. If any of the following holds true return null and stop this algorithm:

  2. If A is an area element in the http://www.w3.org/1999/xhtml namespace which has a map element somewhere in the ancestor chain return the nearest ancestor map element and stop this algorithm.

  3. Return the nearest ancestor element of A for which at least one of the following is true and stop this algorithm if such an ancestor is found:

  4. Return null.

The offsetTop attribute, when called on element A, must return the value that is the result of the following algorithm:

  1. If element A is the body element, its computed value of the display propery is none or it does not have an associated CSS layout box return zero and stop this algorithm. [HTML5]

  2. If the offsetParent of element A is null or the body element return the distance in CSS pixels as float between the top border edge of element A and the top of the initial containing block and stop this algorithm. [HTML5]

  3. Return the distance in CSS pixels as float between the top border edge of the offsetParent of element A and the top border edge of element A.

The offsetLeft attribute, when caled on element A, must return the value that is the result of the following algorithm:

  1. If element A is the body element, its computed value of the display propery is none or it does not have an associated CSS layout box return zero and stop this algorithm. [HTML5]

  2. If the offsetParent of element A is null or the body element return the distance in CSS pixels as float between the left border edge of element A and the left of the initial containing block and stop this algorithm. [HTML5]

  3. Return the distance in CSS pixels as float between the left border edge of the offsetParent of element A and the left border edge of element A.

See source code for some remarks on html:area elements.

The offsetWidth attribute, when called on element A, must return value that is the result of the following algorithm:

  1. If element A does not have an associated CSS layout box return zero and stop this algorithm.

  2. If element A is the body or root element return the width of the initial containing block in CSS pixels and stop this algorithm. [HTML5]

  3. Return the number of CSS pixels of the border box width of element A.

The offsetHeight attribute, when called on element A, must return value that is the result of the following algorithm:

  1. If element A does not have an associated CSS layout box return zero and stop this algorithm.

  2. If element A is the body or root element return the height of the initial containing block in CSS pixels and stop this algorithm. [HTML5]

  3. Return the number of CSS pixels of the border box height of element A.

4.3.3. The scroll* attributes

The scrollTop attribute, when called on element A, must return the value that is the result of running the following algorithm:

  1. If element A does not have an associated CSS layout box return zero and stop this algorithm.

  2. ...

When setting the scrollTop attribute to y on element A user agents must run the following algorithm:

  1. If element A does not have vertical overflow stop this algorithm.

  2. If y is negative act as if it was zero.

  3. ...

The scrollLeft attribute, when called on element A, must return the value that is the result of running the following algorithm:

  1. If element A does not have an associated CSS layout box return zero and stop this algorithm.

  2. ...

When setting the scrollLeft attribute to x on element A user agents must run the following algorithm:

  1. If element A does not have horizontal overflow stop this algorithm.

  2. If y is negative act as if it was zero.

  3. ...

It seems scrollWidth and scrollHeight are defined by the boxes they contain plus any the surrounding padding area. How about principle box width/height + padding edge width. For inline boxes they are identical to offsetWidth/offsetHeight it seems.

4.3.4. The client* attributes

The clientTop attribute, when called on element A, must return the result of the following algorithm:

  1. If element A does not have an associated CSS layout box or if it is an inline box return zero and stop this algorithm.

  2. Return the computed value of the border-top-width property in CSS pixels plus the width of any scrollbar rendered between the top padding box and top border box in CSS pixels as number of CSS pixels.

The clientLeft attribute, when called on element A, must return the result of the following algorithm:

  1. If element A does not have an associated CSS layout box or if it is an inline box return zero and stop this algorithm.

  2. Return the computed value of the border-left-width property in CSS pixels plus the width of any scrollbar rendered between the left padding box and left border box in CSS pixels as number of CSS pixels.

The clientWidth attribute, when called on element A, must return the result of the following algorithm:

  1. If element A does not have an associated CSS layout box or if it is an inline box return zero and stop this algorithm.

  2. If element A is the body or root element return the width of the initial containing block in CSS pixels as number of CSS pixels and stop this algorithm.

  3. Return the width of the padding box (excluding the width of any rendered scrollbar between the padding and border box) in CSS pixels as number of CSS pixels.

The clientHeight attribute, when called on element A, must return the result of the following algorithm:

  1. If element A does not have an associated CSS layout box or if it is an inline box return zero and stop this algorithm.

  2. If element A is the body or root element return the height of the initial containing block in CSS pixels as number of CSS pixels and stop this algorithm.

  3. Return the height of the padding box (excluding the width of any rendered scrollbar between the padding and border box) in CSS pixels as number of CSS pixels.

5. Canonicalization

This section will be integrated with the Cascading Style Sheets APIs section in due course.

This section defines canonicalization of the various objects you typically encounter in CSS style sheets.

The definitions from this section are used later to define attribute values, et cetera.

5.1. Media queries

The canonicalization of a media query can be determined as follows:

  1. Convert each part of the media query to the case specified in the syntax. For example, MaX-width becomes max-width.
  2. Replace one or more consecutive whitespace characters with a U+0020 SPACE.
  3. Remove leading and trailing whitespace.
  4. Remove whitespace between the media feature and the U+003A COLON.
  5. Remove whitespace between the media feature and the U+0028 LEFT PARENTHESIS.
  6. Remove whitespace between the media feature value and the U+0029 RIGHT PARENTHESIS.
  7. Make sure there's exactly one U+0020 SPACE after the U+003A COLON which is then followed by its value.
  8. Sort the media features alphabetically ([a-z]).

Did I miss anything?

duplicate features?

5.1.1. Examples

The canonical form of the following query:

not screen and (min-width:5px) and   (max-width:40px  )

would be:

not screen and (max-width: 40px) and (min-width: 5px)

References

Once this specification reaches a more stable state this section will be filled up.

Acknowledgements

The editor would like to thank to the following people who have contributed to this specification (ordered by first name):

Also many thanks to the Windows Internet Explorer team for first shipping many of the features introduced on ElementLayout and WindowLayout.