drafts: cssom/Overview.html@1a4eaf3f7f1d (annotated)

cssom/Overview.html@1a4eaf3f7f1d (annotated)

cssom/Overview.html

Sun, 18 Aug 2013 23:23:45 +0200

author: Simon Pieters <simonp@opera.com>
date: Sun, 18 Aug 2013 23:23:45 +0200
changeset 8870: 1a4eaf3f7f1d
parent 8826: aa74bff40af5
child 8901: 048b4760e33e
permissions: -rw-r--r--

[cssom] Make setProperty without priority argument not unset important. Also affects the camel-cased attributes. <http://www.w3.org/mid/DUB119-W4278E92C9DD13C3E85C782E6590@phx.gbl>

 <!DOCTYPE html><html lang="en-US"><head>
   <meta charset="utf-8">
   <title>CSS Object Model (CSSOM)</title>
   <link href="../default.css" rel="stylesheet">
   <link href="https://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet">
  </head>
  <body class="draft">
 <div class="head">
 <!--begin-logo-->
 <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="https://www.w3.org/Icons/w3c_home" width="72"></a></p>
 <!--end-logo-->
  <h1>CSS Object Model (CSSOM)</h1>
  <h2 class="no-num no-toc" id="w3c-doctype">Editor's Draft 18 August 2013</h2>
  <dl>
   <dt>This Version:</dt>
   <dd class="dontpublish"><a href="http://dev.w3.org/csswg/cssom/">http://dev.w3.org/csswg/cssom/</a></dd>
   <dt class="dontpublish">Participate:</dt>
   <dd class="dontpublish"><a href="mailto:www-style@w3.org?subject=%5Bcssom%5D%20">www-style@w3.org</a>
   (<a href="http://lists.w3.org/Archives/Public/www-style/">archives</a>)</dd>
   <dd class="dontpublish"><a href="https://www.w3.org/Bugs/Public/enter_bug.cgi?product=CSS&amp;component=CSSOM">File a bug</a>
   (<a href="https://www.w3.org/Bugs/Public/buglist.cgi?component=CSSOM&amp;product=CSS&amp;resolution=---">open bugs</a>)
   <script async="" src="https://w3c-test.org/resources.whatwg.org/file-bug.js"></script></dd>
   <dd class="dontpublish"><a href="irc://irc.w3.org:6665/css">IRC: #css on W3C</a></dd>
   <dt class="dontpublish">Previous Version:</dt>
   <dd class="dontpublish"><a href="http://www.w3.org/TR/2011/WD-cssom-20110712/">http://www.w3.org/TR/2011/WD-cssom-20110712/</a></dd>
   <dd class="dontpublish"><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/">http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/</a></dd>
   <dt>Editors:</dt>
   <dd>Simon Pieters
   (<a href="http://www.opera.com/">Opera Software ASA</a>)
   &lt;<a href="mailto:simponp@opera.com">simonp@opera.com</a>&gt;</dd>
   <dd><a href="http://www.w3.org/wiki/User:Gadams">Glenn Adams</a>
   (<a href="http://www.cox.com/">Cox Communications, Inc.</a>)
   &lt;<a href="mailto:glenn.adams@cox.com">glenn.adams@cox.com</a>&gt;</dd>
   <dt>Previous Editor:</dt>
   <dd><a href="http://annevankesteren.nl/">Anne van Kesteren</a>
   (<a href="http://www.opera.com/">Opera Software ASA</a>)
   &lt;<a href="mailto:annevk@annevk.nl">annevk@annevk.nl</a>&gt;</dd>
  </dl>
 <!--begin-copyright-->
 <p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.</p>
 <!--end-copyright-->
 </div>
 <hr class="top">
 <h2 class="no-num no-toc" id="abstract">Abstract</h2>
 <p>CSSOM defines APIs (including generic parsing and serialization rules)
 for Media Queries, Selectors, and of course CSS itself.</p>
 <h2 class="no-num no-toc" id="sotd">Status of This Document</h2>
 <p>This is a public copy of the editors' draft. It is provided for discussion only and may change at any moment.
 Its publication here does not imply endorsement of its contents by W3C or by the CSS Working Group. Don't cite
 this document other than as work in progress.</p>
 <p class="note">Implementers should note well that this specification is an ongoing effort to sort out
 what has been widely implemented and deployed from <a class="informative" href="#refsDOM2STYLE">[DOM2STYLE]</a> as well as common extensions thereto, some details
 of which are currently interoperable and others which are not currently interoperable. As this specification moves
 forward, it is hoped that these differences will be resolved and an unambiguous and adequate consensus-based
 specification will emerge.</p>
 <p><em>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
 <a href="http://www.w3.org/TR/">W3C technical reports index at http://www.w3.org/TR/.</a></em>
 <p class="dontpublish">This is the 18 August 2013 Editor's Draft of CSSOM. Please send comments to
 <a href="mailto:www-style@w3.org?subject=%5Bcssom%5D%20">www-style@w3.org</a>
 (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>)
 with <samp>[cssom]</samp> at the start of the subject line.
 <p>This document was produced by a group operating under the
 <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent Policy</a>.
 W3C maintains a
 <a href="http://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a>
 made in connection with the deliverables of the group; that page also
 includes instructions for disclosing a patent. An individual who has
 actual knowledge of a patent which the individual believes contains
 <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a>
 must disclose the information in accordance with
 <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the W3C Patent Policy</a>.</p>
 <h2 class="no-num no-toc" id="toc">Table of Contents</h2>
 <!--begin-toc-->
 <ul class="toc">
  <li><a href="#introduction"><span class="secno">1 </span>Introduction</a></li>
  <li><a href="#conformance"><span class="secno">2 </span>Conformance</a></li>
  <li><a href="#terminology"><span class="secno">3 </span>Terminology</a>
   <ul class="toc">
    <li><a href="#common-serializing-idioms"><span class="secno">3.1 </span>Common Serializing Idioms</a></ul></li>
  <li><a href="#media-queries"><span class="secno">4 </span>Media Queries</a>
   <ul class="toc">
    <li><a href="#parsing-media-queries"><span class="secno">4.1 </span>Parsing Media Queries</a></li>
    <li><a href="#serializing-media-queries"><span class="secno">4.2 </span>Serializing Media Queries</a>
     <ul class="toc">
      <li><a href="#serializing-media-feature-values"><span class="secno">4.2.1 </span>Serializing Media Feature Values</a></ul></li>
    <li><a href="#comparing-media-queries"><span class="secno">4.3 </span>Comparing Media Queries</a></li>
    <li><a href="#the-medialist-interface"><span class="secno">4.4 </span>The <code title="">MediaList</code> Interface</a></ul></li>
  <li><a href="#selectors"><span class="secno">5 </span>Selectors</a>
   <ul class="toc">
    <li><a href="#parsing-selectors"><span class="secno">5.1 </span>Parsing Selectors</a></li>
    <li><a href="#serializing-selectors"><span class="secno">5.2 </span>Serializing Selectors</a></ul></li>
  <li><a href="#css"><span class="secno">6 </span>CSS</a>
   <ul class="toc">
    <li><a href="#css-style-sheets"><span class="secno">6.1 </span>CSS Style Sheets</a>
     <ul class="toc">
      <li><a href="#the-stylesheet-interface"><span class="secno">6.1.1 </span>The <code title="">StyleSheet</code> Interface</a></li>
      <li><a href="#the-cssstylesheet-interface"><span class="secno">6.1.2 </span>The <code title="">CSSStyleSheet</code> Interface</a></ul></li>
    <li><a href="#css-style-sheet-collections"><span class="secno">6.2 </span>CSS Style Sheet Collections</a>
     <ul class="toc">
      <li><a href="#the-http-default-style-header"><span class="secno">6.2.1 </span>The HTTP <code title="">Default-Style</code> Header</a></li>
      <li><a href="#the-stylesheetlist-interface"><span class="secno">6.2.2 </span>The <code title="">StyleSheetList</code> Interface</a></li>
      <li><a href="#extensions-to-the-document-interface"><span class="secno">6.2.3 </span>Extensions to the <code title="">Document</code> Interface</a></li>
      <li><a href="#interaction-with-the-user-interface"><span class="secno">6.2.4 </span>Interaction with the User Interface</a>
       <ul class="toc">
        <li><a href="#persisting-the-selected-css-style-sheet-set"><span class="secno">6.2.4.1 </span>Persisting the selected CSS style sheet set</a></ul></li>
      <li><a href="#examples"><span class="secno">6.2.5 </span>Examples</a></ul></li>
    <li><a href="#style-sheet-association"><span class="secno">6.3 </span>Style Sheet Association</a>
     <ul class="toc">
      <li><a href="#fetching-css-style-sheets"><span class="secno">6.3.1 </span>Fetching CSS style sheets</a></li>
      <li><a href="#the-linkstyle-interface"><span class="secno">6.3.2 </span>The <code title="">LinkStyle</code> Interface</a></li>
      <li><a href="#requirements-on-specifications"><span class="secno">6.3.3 </span>Requirements on specifications</a></li>
      <li><a href="#requirements-on-user-agents-implementing-the-xml-stylesheet-processing-instruction"><span class="secno">6.3.4 </span>Requirements on User Agents Implementing the xml-stylesheet processing instruction</a></li>
      <li><a href="#requirements-on-user-agents-implementing-the-http-link-header"><span class="secno">6.3.5 </span>Requirements on User Agents Implementing the HTTP
 <code title="">Link</code> Header</a></ul></li>
    <li><a href="#css-rules"><span class="secno">6.4 </span>CSS Rules</a>
     <ul class="toc">
      <li><a href="#the-cssrulelist-interface"><span class="secno">6.4.1 </span>The <code title="">CSSRuleList</code> Interface</a></li>
      <li><a href="#the-cssrule-interface"><span class="secno">6.4.2 </span>The <code title="">CSSRule</code> Interface</a></li>
      <li><a href="#the-cssstylerule-interface"><span class="secno">6.4.3 </span>The <code title="">CSSStyleRule</code> Interface</a></li>
      <li><a href="#the-csscharsetrule-interface"><span class="secno">6.4.4 </span>The <code title="">CSSCharsetRule</code> Interface</a></li>
      <li><a href="#the-cssimportrule-interface"><span class="secno">6.4.5 </span>The <code title="">CSSImportRule</code> Interface</a></li>
      <li><a href="#the-cssgroupingrule-interface"><span class="secno">6.4.6 </span>The <code title="">CSSGroupingRule</code> Interface</a></li>
      <li><a href="#the-cssmediarule-interface"><span class="secno">6.4.7 </span>The <code title="">CSSMediaRule</code> Interface</a></li>
      <li><a href="#the-csspagerule-interface"><span class="secno">6.4.8 </span>The <code title="">CSSPageRule</code> Interface</a></li>
      <li><a href="#the-cssnamespacerule-interface"><span class="secno">6.4.9 </span>The <code title="">CSSNamespaceRule</code> Interface</a></ul></li>
    <li><a href="#css-declaration-blocks"><span class="secno">6.5 </span>CSS Declaration Blocks</a>
     <ul class="toc">
      <li><a href="#the-cssstyledeclaration-interface"><span class="secno">6.5.1 </span>The <code title="">CSSStyleDeclaration</code> Interface</a></ul></li>
    <li><a href="#css-values"><span class="secno">6.6 </span>CSS Values</a>
     <ul class="toc">
      <li><a href="#parsing-css-values"><span class="secno">6.6.1 </span>Parsing CSS Values</a></li>
      <li><a href="#serializing-css-values"><span class="secno">6.6.2 </span>Serializing CSS Values</a>
       <ul class="toc">
        <li><a href="#examples-0"><span class="secno">6.6.2.1 </span>Examples</a></ul></ul></ul></li>
  <li><a href="#dom-access-to-css-declaration-blocks"><span class="secno">7 </span>DOM Access to CSS Declaration Blocks</a>
   <ul class="toc">
    <li><a href="#the-elementcssinlinestyle-interface"><span class="secno">7.1 </span>The <code>ElementCSSInlineStyle</code> Interface</a></li>
    <li><a href="#extensions-to-the-window-interface"><span class="secno">7.2 </span>Extensions to the <code title="">Window</code> Interface</a></li>
    <li><a href="#the-getstyleutils-interface"><span class="secno">7.3 </span>The <code title="">GetStyleUtils</code> Interface</a></li>
    <li><a href="#extensions-to-the-element-interface"><span class="secno">7.4 </span>Extensions to the <code title="">Element</code> Interface</a></li>
    <li><a href="#the-pseudoelement-interface"><span class="secno">7.5 </span>The <code title="">PseudoElement</code> Interface</a></ul></li>
  <li><a href="#resolved-values"><span class="secno">8 </span>Resolved Values</a></li>
  <li><a href="#iana-considerations"><span class="secno">9 </span>IANA Considerations</a>
   <ul class="toc">
    <li><a href="#default-style"><span class="secno">9.1 </span><code title="">Default-Style</code></a></ul></li>
  <li><a class="no-num" href="#references">References</a></li>
  <li><a class="no-num" href="#change-history">Change History</a>
   <ul class="toc">
    <li><a class="no-num" href="#changes-from-dom-2-style">Changes From DOM-2 Style</a></ul></li>
  <li><a class="no-num" href="#acknowledgments">Acknowledgments</a></ul>
 <!--end-toc-->
 <h2 id="introduction"><span class="secno">1 </span>Introduction</h2>
 <p>This document formally specifies the core features of the CSS Object Model (CSSOM). Other documents in the CSSOM family of specifications
 as well as other CSS related specifications define extensions to these core features.</p>
 <p>The core features of the CSSOM are oriented towards providing basic capabilities to author-defined scripts to permit access to
 and manipulation of style related state information and processes.</p>
 <p>The features defined below are fundamentally based on prior specifications of the W3C DOM Working Group, primarily
 <a class="informative" href="#refsDOM2STYLE">[DOM2STYLE]</a>. The purposes of the present document are (1) to improve on that prior work by providing
 more technical specificity (so as to improve testability and interoperability), (2) to deprecate or remove certain less-widely implemented
 features no longer considered to be essential in this context, and (3) to newly specify certain extensions that have been
 or expected to be widely implemented.</p>
 <p>A full list of the changes to API signatures can be found in <a href="#changes-from-dom-2-style"><cite>Changes from DOM-2 Style</cite></a>.</p>
 <h2 id="conformance"><span class="secno">2 </span>Conformance</h2>
 <p>All diagrams, examples, and notes in this specification are
 non-normative, as are all sections explicitly marked non-normative.
 Everything else in this specification is normative.
 <p>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. For readability, these words do
 not appear in all uppercase letters in this specification.
 <a href="#refsRFC2119">[RFC2119]</a>
 <p>Requirements phrased in the imperative as part of algorithms
 (such as "strip any leading space characters" or "return false and
 terminate these steps") are to be interpreted with the meaning of the
 key word ("must", "should", "may", etc) used in introducing the
 algorithm.
 <p>Conformance requirements phrased as algorithms or specific steps
 may be implemented in any manner, so long as the end result is
 equivalent. (In particular, the algorithms defined in this
 specification are intended to be easy to follow, and not intended to
 be performant.)
 <p id="hardwareLimitations">User agents may impose
 implementation-specific limits on otherwise unconstrained inputs,
 e.g. to prevent denial of service attacks, to guard against running
 out of memory, or to work around platform-specific limitations. <!--fingerprint-->
 <p>When a method or an attribute is said to call another method or attribute, the user agent must invoke its internal API for that attribute or method so that
 e.g. the author can't change the behavior by overriding attributes or methods with custom properties or functions in ECMAScript.
 <p>Unless otherwise stated, string comparisons are done in a
 <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a> manner.
 <h2 id="terminology"><span class="secno">3 </span>Terminology</h2>
 <p>This specification employs certain terminology from the following documents:
 <cite>DOM</cite>,
 <cite>HTML</cite>,
 <cite>CSS Syntax</cite>,
 <cite>URL</cite>,
 <cite>Fetch</cite>,
 <cite>Associating Style Sheets with XML documents</cite>
 and
 <cite>XML</cite>.
 <a href="#refsDOM">[DOM]</a>
 <a href="#refsHTML">[HTML]</a>
 <a href="#refsCSSSYNTAX">[CSSSYNTAX]</a>
 <a href="#refsURL">[URL]</a>
 <a href="#refsFETCH">[FETCH]</a>
 <a href="#refsXMLSS">[XMLSS]</a>
 <a href="#refsXML">[XML]</a>
 <p>When this specification talks about object
 <code title=""><var>A</var></code> where <code title=""><var>A</var></code> is actually an interface, it generally means an object implementing interface
 <code title=""><var>A</var></code>.</p>
 <p>The terms <dfn id="whitespace">whitespace</dfn> and <dfn id="ignored">ignored</dfn> are defined in CSS. <a href="#refsCSS">[CSS]</a>
 <p>The terms <dfn id="cascaded-value">cascaded value</dfn>, <dfn id="computed-value">computed value</dfn> and <dfn id="used-value">used value</dfn> are defined in CSS Cascade and Inheritance.
 <a href="#refsCSSCASCADE">[CSSCASCADE]</a>
 <p>The terms <dfn id="simple-selector">simple selector</dfn>, <dfn id="sequence-of-simple-selectors">sequence of simple selectors</dfn>, <dfn id="universal-selector">universal selector</dfn> and <dfn id="group-of-selectors">group of selectors</dfn> are defined in
 Selectors. <a href="#refsSELECTORS">[SELECTORS]</a>
 <p>The terms <dfn id="namespace-prefix">namespace prefix</dfn> and <dfn id="default-namespace">default namespace</dfn> are defined in CSS Namespaces Module. <a href="#refsCSSNAMESPACES">[CSSNAMESPACES]</a>
 <p>The term <dfn id="list-of-css-page-selectors">list of CSS page selectors</dfn> refers to the comma-separated list of page selectors, as defined in CSS Paged Media Module.
 <a href="#refsCSSPAGE">[CSSPAGE]</a>
 <p>The terms <dfn id="set">set</dfn> and <dfn id="clear">clear</dfn> to refer to the true and
 false values of binary flags or variables, respectively. These terms are also used as verbs in which case they refer to
 mutating some value to make it true or false, respectively.</p>
 <p>The term <dfn id="supported-styling-language">supported styling language</dfn> refers to CSS.
 <p class="note">If another styling language becomes supported in user agents, this specification is expected to be updated as necessary.
 <p>The term <dfn id="supported-css-property">supported CSS property</dfn> refers to a CSS property that the user agent implements, and that is defined to be a case-insensitive property in
 the CSS specification. A <a href="#supported-css-property">supported CSS property</a> must be in its lowercase form for the purpose of comparisons this specification.
 <p class="note">CSS properties that are case-sensitive such as CSS Variables are author-defined and are represented with dedicated interfaces, and do not
 participate in the base CSSOM API. <a class="informative" href="#refsCSSVARIABLES">[CSSVARIABLES]</a>
 <p>The terms <dfn id="::before-pseudo-element">::before pseudo-element</dfn> and <dfn id="::after-pseudo-element">::after pseudo-element</dfn> refer to the :before and :after pseudo-elements in CSS, except in this
 specification the pseudo-elements are assumed to exist for all elements even if no box is generated for them. <a href="#refsCSS">[CSS]</a>
 <h3 id="common-serializing-idioms"><span class="secno">3.1 </span>Common Serializing Idioms</h3>
 <p>To <dfn id="escape-a-character">escape a character</dfn> means to create a string of
 "<code title="">\</code>" (U+005C), followed by the character.</p>
 <p>To <dfn id="escape-a-character-as-code-point">escape a character as code point</dfn> means to create a
 string of "<code title="">\</code>" (U+005C), followed by the Unicode code point as
 the smallest possible number of hexadecimal digits in the range 0-9 a-f
 (U+0030 to U+0039 and U+0061 to U+0066) to represent the code point in
 base 16, followed by a single SPACE (U+0020).</p>
 <p>To <dfn id="serialize-an-identifier">serialize an identifier</dfn> means to create a string represented
 by the concatenation of, for each character of the identifier:</p>
 <ul>
  <li>If the character is NULL (U+0000), then <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a> an
  <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#invalidcharactererror">InvalidCharacterError</a></code> exception and terminate these steps.</li>
  <li>If the character is in the range [\1-\1f] (U+0001 to U+001F) or
  [\7f-\9f] (U+007F to U+009F), then the character
  <a href="#escape-a-character-as-code-point" title="escape a character as code point">escaped as code point</a>.</li>
  <li>If the character is the first character and is in the range [0-9]
  (U+0030 to U+0039), then the character
  <a href="#escape-a-character-as-code-point" title="escape a character as code point">escaped as code point</a>.</li>
  <li>If the character is the second character and is in the range [0-9]
  (U+0030 to U+0039) and the first character is a "<code title="">-</code>"
  (U+002D), then the character
  <a href="#escape-a-character-as-code-point" title="escape a character as code point">escaped as code point</a>.</li>
  <li>If the character is the second character and is "<code title="">-</code>"
  (U+002D) and the first character is "<code title="">-</code>" as well, then the
  <a href="#escape-a-character" title="escape a character">escaped</a> character.</li>
  <li>If the character is not handled by one of the above rules and is
  greater than or equal to U+0080, is "<code title="">-</code>" (U+002D) or
  "<code title="">_</code>" (U+005F), or is in one of the ranges [0-9] (U+0030 to
  U+0039), [A-Z] (U+0041 to U+005A), or [a-z] (U+0061 to U+007A), then the character
  itself.</li>
  <li>Otherwise, the <a href="#escape-a-character" title="escape a character">escaped</a>
  character.</li>
 </ul>
 <p>To <dfn id="serialize-a-string">serialize a string</dfn> means to create a string represented
 by '"' (U+0022), followed by the result of applying the rules
 below to each character of the given string, followed by
 '"' (U+0022):</p>
 <ul>
  <li>If the character is NULL (U+0000), then <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a> an
  <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#invalidcharactererror">InvalidCharacterError</a></code> exception and terminate these steps.</li>
  <li>If the character is in the range [\1-\1f] (U+0001 to U+001F) or [\7f-\9f] (U+007F to
  U+009F), the character <a href="#escape-a-character-as-code-point" title="escape a character as code point">escaped as code point</a>.</li>
  <li>If the character is '"' (U+0022) or "<code title="">\</code>"
  (U+005C), the <a href="#escape-a-character" title="escape a character">escaped</a> character.</li>
  <li>Otherwise, the character itself.</li>
 </ul>
 <p class="note">"<code title="">'</code>" (U+0027) is not escaped because strings
 are always serialized with '"' (U+0022).</p>
 <p>To <dfn id="serialize-a-url">serialize a URL</dfn> means to create a string represented by
 "<code title="">url(</code>", followed by the
 <a href="#serialize-a-string" title="serialize a string">string escaped</a> value of the given
 string, followed by "<code title="">)</code>".</p>
 <p>To <dfn id="serialize-a-comma-separated-list">serialize a comma-separated list</dfn> concatenate all items of
 the list in list order while separating them by "<code title="">, </code>", i.e.,
 COMMA (U+002C) followed by a single SPACE (U+0020).</p>
 <p>To <dfn id="serialize-a-whitespace-separated-list">serialize a whitespace-separated list</dfn> concatenate all
 items of the list in list order while separating them by "<code title=""> </code>", i.e.,
 a single SPACE (U+0020).</p>
 <p class="note">When serializing a list according to the above rules,
 extraneous whitespace is not inserted prior to the first item or subsequent to
 the last item. Unless otherwise specified, an empty list is serialized as the
 empty string.</p>
 <h2 id="media-queries"><span class="secno">4 </span>Media Queries</h2>
 <p>Media queries are defined by the Media Queries specification. This
 section defines various concepts around media queries, including their API
 and serialization form.</p>
 <!-- XXX ref -->
 <h3 id="parsing-media-queries"><span class="secno">4.1 </span>Parsing Media Queries</h3>
 <p>To
 <dfn id="parse-a-media-query-list">parse a media query list</dfn> for a
 given string <var>s</var> into a media query list is defined in
 the Media Queries specification. Return the list of one or more media
 queries that the algorithm defined there gives.</p> <!-- XXX ref -->
 <p class="note">A media query that ends up being "ignored" will turn
 into "<code title="">not all</code>".</p>
 <p>To
 <dfn id="parse-a-media-query">parse a media query</dfn> for a given string
 <var>s</var> means to follow the
 <a href="#parse-a-media-query-list">parse a media query list</a> steps and return null if more
 than one media query is returned or a media query if a
 single media query is returned.</p>
 <p class="note">Again, a media query that ends up being "ignored" will
 turn into "<code title="">not all</code>".</p>
 <h3 id="serializing-media-queries"><span class="secno">4.2 </span>Serializing Media Queries</h3>
 <p>To
 <dfn id="serialize-a-media-query-list">serialize a media query list</dfn>
 run these steps:</p>
 <ol>
  <li><p>If the media query list is empty return the empty string and
  terminate these steps.</li>
  <li><p><a href="#serialize-a-media-query" title="serialize a media query">Serialize</a> each media query in the list of media queries, in the same order as they appear in the list of
  media queries, and then <a href="#serialize-a-comma-separated-list" title="serialize a comma-separated list">serialize</a> the list.</li>
 </ol>
 <p>To
 <dfn id="serialize-a-media-query">serialize a media query</dfn> let
 <var>s</var> be the empty string, run the steps below, and
 finally return <var>s</var>:</p>
 <ol>
  <li><p>If the media query is negated append "<code title="">not</code>", followed
  by a single SPACE (U+0020), to <var>s</var>.</li>
  <li><p>Let <var>type</var> be the media type of the media query,
  <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a> and
  <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#converted-to-ascii-lowercase">converted to ASCII lowercase</a>.</li>
  <li><p>If the media query does not contain media features append
  <var>type</var>, to <var>s</var>,
  then return <var>s</var> and terminate this algorithm.</li>
  <li><p>If <var>type</var> is not "<code title="">all</code>" or if the
  media query is negated append <var>type</var>, followed by a
  single SPACE (U+0020), followed by "<code title="">and</code>", followed by a single SPACE
  (U+0020), to <var>s</var>.</li>
  <li><p>Sort the media features in lexicographical order.</li>
  <li>
   <p>Then, for each media feature:</p>
   <ol>
    <li><p>Append a "<code title="">(</code>" (U+0028), followed by the media feature
    name, <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#converted-to-ascii-lowercase">converted to ASCII lowercase</a>,
    to <var>s</var>.</li>
    <li><p>If a value is given append a "<code title="">:</code>" (U+003A), followed
    by a single SPACE (U+0020), followed by the
    <a href="#serialize-a-media-feature-value" title="serialize a media feature value">serialized media feature value</a>,
    to <var>s</var>.</li>
    <li><p>Append a "<code title="">)</code>" (U+0029) to
    <var>s</var>.</li>
    <li><p>If this is not the last media feature append a single SPACE (U+0020),
    followed by "<code title="">and</code>", followed by a single SPACE (U+0020), to
    <var>s</var>.</li>
   </ol>
  </li>
 </ol>
 <div class="example">
  <p>Here are some examples of input (first column) and output (second
  column):</p>
  <table class="complex data">
   <thead>
    <tr><th>Input<th>Output
   <tbody>
    <tr>
     <td><pre>not screen and (min-WIDTH:5px) AND (max-width:40px)</pre>
     <td><pre>not screen and (max-width: 40px) and (min-width: 5px)</pre>
    <tr>
     <td><pre>all and (color) and (color)</pre>
     <td><pre>(color)</pre>
  </table>
 </div>
 <h4 id="serializing-media-feature-values"><span class="secno">4.2.1 </span>Serializing Media Feature Values</h4>
 <p class="issue">This should probably be done in terms of mapping it to
 serializing CSS values as media features are defined in terms of CSS
 values after all.</p>
 <p>To <dfn id="serialize-a-media-feature-value">serialize a media feature value</dfn>
 named <var>v</var> locate <var>v</var> in the first
 column of the table below and use the serialization format described in
 the second column:</p>
 <table class="complex data">
  <thead>
   <tr>
    <th>Media Feature
    <th>Serialization
  <tbody>
   <tr>
    <td>'width'
    <td>...
   <tr>
    <td>'height'
    <td>...
   <tr>
    <td>'device-width'
    <td>...
   <tr>
    <td>'device-height'
    <td>...
   <tr>
    <td>'orientation'
    <td>
     <p>If the value is 'portrait': "<code title="">portrait</code>".</p>
     <p>If the value is 'landscape': "<code title="">landscape</code>".</p>
   <tr>
    <td>'aspect-ratio'
    <td>...
   <tr>
    <td>'device-aspect-ratio'
    <td>...
   <tr>
    <td>'color'
    <td>...
   <tr>
    <td>'color-index'
    <td>...
   <tr>
    <td>'monochrome'
    <td>...
   <tr>
    <td>'resolution'
    <td>...
   <tr>
    <td>'scan'
    <td>
     <p>If the value is 'progressive': "<code title="">progressive</code>".</p>
     <p>If the value is 'interlace': "<code title="">interlace</code>".</p>
   <tr>
    <td>'grid'
    <td>...
 </table>
 <p>Other specifications can extend this table and vendor-prefixed media
 features can have custom serialization formats as well.</p>
 <h3 id="comparing-media-queries"><span class="secno">4.3 </span>Comparing Media Queries</h3>
 <p>To
 <dfn id="compare-media-queries">compare media queries</dfn>
 <var>m1</var> and <var>m2</var> means to
 <a href="#serialize-a-media-query" title="serialize a media query">serialize</a> them both and
 return true if they are a
 <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a> match and false if they
 are not.</p>
 <h3 id="the-medialist-interface"><span class="secno">4.4 </span>The <code title="">MediaList</code> Interface</h3>
 <!--
 //
 // All members defined since DOM-2 Style. The only differences are:
 //
 //   1. addition of stringifier qualifier on mediaText
 //   2. addition of getter qualifier on item
 //   3. removal of raises(DOMException) from {append,delete}Medium
 //
 -->
 <p>An object that implements the <code><a href="#medialist">MediaList</a></code> interface has an associated <dfn id="collection-of-media-queries">collection of media queries</dfn>.</p>
 <pre class="idl">interface <dfn id="medialist">MediaList</dfn> {
   [TreatNullAs=EmptyString] stringifier attribute DOMString <a href="#dom-medialist-mediatext" title="dom-MediaList-mediaText">mediaText</a>;
   readonly attribute unsigned long <a href="#dom-medialist-length" title="dom-MediaList-length">length</a>;
   getter DOMString <a href="#dom-medialist-item" title="dom-MediaList-item">item</a>(unsigned long index);
   void <a href="#dom-medialist-appendmedium" title="dom-MediaList-appendMedium">appendMedium</a>(DOMString medium);
   void <a href="#dom-medialist-deletemedium" title="dom-MediaList-deleteMedium">deleteMedium</a>(DOMString medium);
 };</pre>
 <p>The object's <a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-supported-property-indices">supported property indices</a> are the numbers in the range zero to one less than the number of media queries
 in the <a href="#collection-of-media-queries">collection of media queries</a> represented by the collection. If there are no such media queries, then there are no
 <a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-supported-property-indices">supported property indices</a>.
 <p>To <dfn id="create-a-medialist-object">create a <code>MediaList</code> object</dfn> with a string <var>text</var>, run the following steps:
 <ol>
  <li><p>Create a new <code><a href="#medialist">MediaList</a></code> object.</li>
  <li><p>Set its <code title="dom-MediaList-mediaText"><a href="#dom-medialist-mediatext">mediaText</a></code> attribute to <var>text</var>.</li>
  <li><p>Return the newly created <code><a href="#medialist">MediaList</a></code> object.</li>
 </ol>
 <p>The <dfn id="dom-medialist-mediatext" title="dom-MediaList-mediaText"><code>mediaText</code></dfn> attribute, on getting, must return a
 <a href="#serialize-a-media-query-list" title="serialize a media query list">serialization</a> of the <a href="#collection-of-media-queries">collection of media queries</a>.</p>
 <p>Setting the <code title="dom-MediaList-mediaText"><a href="#dom-medialist-mediatext">mediaText</a></code> attribute must run these steps:
 <ol>
  <li><p>Empty the <a href="#collection-of-media-queries">collection of media queries</a>.</li>
  <li><p>If the given value is the empty string terminate these steps.</li>
  <li><p>Append all the media queries as a result of <a href="#parse-a-media-query-list" title="parse a media query list">parsing</a> the given
  value to the <a href="#collection-of-media-queries">collection of media queries</a>.</li>
 </ol>
 <p>The <dfn id="dom-medialist-item" title="dom-MediaList-item"><code>item(<var>index</var>)</code></dfn> method must return the media query in the <a href="#collection-of-media-queries">collection of media
 queries</a> given by <var>index</var>, or null, if <var>index</var> is greater than or equal to the number of media queries in the
 <a href="#collection-of-media-queries">collection of media queries</a>.</p>
 <p>The <dfn id="dom-medialist-length" title="dom-MediaList-length"><code>length</code></dfn> attribute must return the number of media queries in the <a href="#collection-of-media-queries">collection of media
 queries</a>.</p>
 <p>The <dfn id="dom-medialist-appendmedium" title="dom-MediaList-appendMedium"><code>appendMedium(<var>medium</var>)</code></dfn> method must run these steps:</p>
 <ol>
  <li><p>Let <var>m</var> be the result of <a href="#parse-a-media-query" title="parse a media query">parsing</a> the given value.</li>
  <li><p>If <var>m</var> is null terminate these steps.</li>
  <li><p>If <a href="#compare-media-queries" title="compare media queries">comparing</a> <var>m</var> with any of the media queries in the
  <a href="#collection-of-media-queries">collection of media queries</a> returns true terminate these steps.</li>
  <li><p>Append <var>m</var> to the <a href="#collection-of-media-queries">collection of media queries</a>.</li>
 </ol>
 <p>The <dfn id="dom-medialist-deletemedium" title="dom-MediaList-deleteMedium"><code>deleteMedium(<var>medium</var>)</code></dfn> method must run these steps:</p>
 <ol>
  <li><p>Let <var>m</var> be the result of <a href="#parse-a-media-query" title="parse a media query">parsing</a> the given value.</li>
  <li><p>If <var>m</var> is null terminate these steps.</li>
  <li><p>Remove any media query from the <a href="#collection-of-media-queries">collection of media queries</a> for which
  <a href="#compare-media-queries" title="compare media queries">comparing</a> the media query with <var>m</var> returns true.</li>
 </ol>
 <h2 id="selectors"><span class="secno">5 </span>Selectors</h2>
 <p>Selectors are defined in the Selectors specification. This section
 mainly defines how to serialize them.</p> <!-- XXX ref -->
 <!-- XXX ref universal selector etc? some are in <span> some not -->
 <h3 id="parsing-selectors"><span class="secno">5.1 </span>Parsing Selectors</h3>
 <p>To
 <dfn id="parse-a-group-of-selectors">parse a group of selectors</dfn>
 means to parse the value using the <code title="">selectors_group</code>
 production defined in the Selectors specification and return either a
 group of selectors if parsing did not fail or null if parsing did
 fail.</p> <!-- XXX ref -->
 <h3 id="serializing-selectors"><span class="secno">5.2 </span>Serializing Selectors</h3>
 <!-- http://dump.testsuite.org/2009/cssom/serializing-selectors.htm -->
 <p>To
 <dfn id="serialize-a-group-of-selectors">serialize a group of selectors</dfn>
 <a href="#serialize-a-selector" title="serialize a selector">serialize</a> each selector in the
 group of selectors and then
 <a href="#serialize-a-comma-separated-list" title="serialize a comma-separated list">serialize</a> the
 group.</p>
 <p>To <dfn id="serialize-a-selector">serialize a selector</dfn> let
 <var>s</var> be the empty string, run the steps below for each
 part of the chain of the selector, and finally return
 <var>s</var>:</p>
 <ol>
  <li><p>If there is only one <a href="#simple-selector">simple selector</a> in the
  <a href="#sequence-of-simple-selectors">sequence of simple selectors</a> which is a
  <a href="#universal-selector">universal selector</a>, append the result of
  <a href="#serialize-a-simple-selector" title="serialize a simple selector">serializing</a> the
  <a href="#universal-selector">universal selector</a> to <var>s</var>.</li>
  <li><p>Otherwise, for each <a href="#simple-selector">simple selector</a> in the
  <a href="#sequence-of-simple-selectors">sequence of simple selectors</a> that is not a
  universal selector of which the
  <a href="#namespace-prefix">namespace prefix</a> maps to a namespace that is not the
  <a href="#default-namespace">default namespace</a>
  <a href="#serialize-a-simple-selector" title="serialize a simple selector">serialize</a> the
  <a href="#simple-selector">simple selector</a> and append the result to
  <var>s</var>.</li>
  <li><p>If this is not the last part of the chain of the selector append a
  single SPACE (U+0020), followed by the combinator
  "<code title="">&gt;</code>",
  "<code title="">+</code>", or
  "<code title="">~</code>"
  as appropriate, followed by another single SPACE (U+0020) if the combinator was
  not whitespace, to <var>s</var>.</li>
  <li><p>If this is the last part of the chain of the selector and there is
  a pseudo-element, append "<code title="">::</code>" followed by the name of the
  pseudo-element, to <var>s</var>.</li>
 </ol>
 <p>To
 <dfn id="serialize-a-simple-selector">serialize a simple selector</dfn>
 let <var>s</var> be the empty string, run the steps below, and
 finally return <var>s</var>:</p>
 <dl class="switch">
  <dt>type selector</dt>
  <dt>universal selector</dt>
  <dd>
   <ol>
    <li><p>If the <a href="#namespace-prefix">namespace prefix</a> maps to a namespace that is
    not the <a href="#default-namespace">default namespace</a> and is not the
    null namespace (not in a namespace) append the
    <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a>
    <a href="#namespace-prefix">namespace prefix</a>, followed by a "<code title="">|</code>" (U+007C)
    to <var>s</var>.</li>
    <li><p>If the <a href="#namespace-prefix">namespace prefix</a> maps to a namespace that is
    the null namespace (not in a namespace) append
    "<code title="">|</code>" (U+007C) to <var>s</var>.</li>
    <!-- This includes |* -->
    <li><p>If this is a type selector append the
    <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a> element name to
    <var>s</var>.</li>
    <li><p>If this is a universal selector append "<code title="">*</code>" (U+002A)
    to <var>s</var>.</li>
   </ol>
  </dd>
  <dt>attribute selector</dt>
  <dd>
   <ol>
    <li><p>Append "<code title="">[</code>" (U+005B) to
    <var>s</var>.</li>
    <li><p>If the <a href="#namespace-prefix">namespace prefix</a> maps to a namespace that is
    not the null namespace (not in a namespace) append the
    <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a>
    <a href="#namespace-prefix">namespace prefix</a>, followed by a "<code title="">|</code>" (U+007C)
    to <var>s</var>.</li>
    <li><p>Append the <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a>
    attribute name to <var>s</var>.</li>
    <li><p>If there is an attribute value specified, append
    "<code title="">=</code>",
    "<code title="">~=</code>",
    "<code title="">|=</code>",
    "<code title="">^=</code>",
    "<code title="">$=</code>", or
    "<code title="">*=</code>"
    as appropriate (depending on the type of attribute selector), followed
    by the <a href="#serialize-a-string" title="serialize a string">string escaped</a>
    attribute value, to <var>s</var>.</li>
    <li><p>Append "<code title="">]</code>" (U+005D) to
    <var>s</var>.</li>
   </ol>
  </dd>
  <dt>class selector</dt>
  <dd><p>Append a "<code title="">.</code>" (U+002E), followed by the
  <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a> class name to
  <var>s</var>.</dd>
  <dt>ID selector</dt>
  <dd><p>Append a "<code title="">#</code>" (U+0023), followed by the
  <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a> ID to
  <var>s</var>.</dd>
  <dt>pseudo-class</dt>
  <dd>
   <p>If the pseudo-class does not accept arguments append
   "<code title="">:</code>" (U+003A), followed by the name of the pseudo-class, to
   <var>s</var>.</p>
   <p>Otherwise, append "<code title="">:</code>" (U+003A), followed by the name of
   the pseudo-class, followed by "<code title="">(</code>" (U+0028), followed by the
   value of the pseudo-class argument determined as per below, followed by
   "<code title="">)</code>" (U+0029), to <var>s</var>.</p>
   <dl class="switch">
    <dt><code title="">:lang()</code></dt>
    <dd><p>The <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a>
    value.</dd>
    <dt><code title="">:nth-child()</code></dt>
    <dt><code title="">:nth-last-child()</code></dt>
    <dt><code title="">:nth-of-type()</code></dt>
    <dt><code title="">:nth-last-of-type()</code></dt>
    <dd><p>The result of serializing the value using the rules for <a class="external" data-anolis-spec="csssyntax" href="http://dev.w3.org/csswg/css-syntax/#serializing-anb">serializing &lt;an+b&gt;</a>.
    <dt><code title="">:not()</code></dt>
    <dd><p>The result of serializing the value using the rules for
    <a href="#serialize-a-group-of-selectors" title="serialize a group of selectors">serializing a group of selectors</a>.</dd>
   </dl>
  </dd>
 </dl>
 <h2 id="css"><span class="secno">6 </span>CSS</h2>
 <h3 id="css-style-sheets"><span class="secno">6.1 </span>CSS Style Sheets</h3>
 <p>A <dfn id="css-style-sheet">CSS style sheet</dfn> is an abstract concept that
 represents a style sheet as defined by the CSS specification. In the CSSOM a
 <a href="#css-style-sheet">CSS style sheet</a> is represented as a <code><a href="#cssstylesheet">CSSStyleSheet</a></code> object. A
 <a href="#css-style-sheet">CSS style sheet</a> has a number of associated state items:</p>
 <dl>
  <dt><dfn id="concept-css-style-sheet-type" title="concept-css-style-sheet-type">type</dfn></dt>
  <dd><p>The literal string "<code title="">text/css</code>".</dd>
  <dt><dfn id="concept-css-style-sheet-location" title="concept-css-style-sheet-location">location</dfn></dt>
  <dd><p>Specified when created. The <a class="external" data-anolis-spec="url" href="http://url.spec.whatwg.org/#concept-absolute-url" title="concept-absolute-url">absolute URL</a> of the first request of the
  <a href="#css-style-sheet">CSS style sheet</a> or null if the <a href="#css-style-sheet">CSS style sheet</a> was
  embedded. Does not change during the lifetime of the <a href="#css-style-sheet">CSS style sheet</a>.</dd>
  <dt><dfn id="concept-css-style-sheet-parent-css-style-sheet" title="concept-css-style-sheet-parent-css-style-sheet">parent CSS style sheet</dfn></dt>
  <dd><p>Specified when created. The <a href="#css-style-sheet">CSS style sheet</a> that is the parent of the
  <a href="#css-style-sheet">CSS style sheet</a> or null if there is no associated parent.</dd>
  <dt><dfn id="concept-css-style-sheet-owner-node" title="concept-css-style-sheet-owner-node">owner node</dfn></dt>
  <dd><p>Specified when created. The DOM node associated with the <a href="#css-style-sheet">CSS style sheet</a> or
  null if there is no associated DOM node.</dd>
  <dt><dfn id="concept-css-style-sheet-owner-css-rule" title="concept-css-style-sheet-owner-css-rule">owner CSS rule</dfn></dt>
  <dd><p>Specified when created. The <a href="#css-rule">CSS rule</a> in the <a href="#concept-css-style-sheet-parent-css-style-sheet" title="concept-css-style-sheet-parent-css-style-sheet">parent CSS style sheet</a>
  that caused the inclusion of the <a href="#css-style-sheet">CSS style sheet</a> or null if
  there is no associated rule.</dd>
  <dt><dfn id="concept-css-style-sheet-media" title="concept-css-style-sheet-media">media</dfn></dt>
  <dd>
   <p>Specified when created. The <code><a href="#medialist">MediaList</a></code> object associated with the
   <a href="#css-style-sheet">CSS style sheet</a>.</p>
   <p>If this property is specified to a string, the <a href="#concept-css-style-sheet-media" title="concept-css-style-sheet-media">media</a> must be set to the return value of invoking
   <a href="#create-a-medialist-object">create a <code>MediaList</code> object</a> steps for that string.</p>
   <p>If this property is specified to an attribute of the <a href="#concept-css-style-sheet-owner-node" title="concept-css-style-sheet-owner-node">owner node</a>, the
   <a href="#concept-css-style-sheet-media" title="concept-css-style-sheet-media">media</a> must be set to the return value of invoking <a href="#create-a-medialist-object">create a <code>MediaList</code> object</a> steps
   for the value of that attribute. Whenever the attribute is set, changed or removed, the <a href="#concept-css-style-sheet-media" title="concept-css-style-sheet-media">media</a>'s
   <code title="dom-MediaList-mediaText"><a href="#dom-medialist-mediatext">mediaText</a></code> attribute must be set to the new value of the attribute, or to null if the attribute is absent.
   <p class="note">Changing the <a href="#concept-css-style-sheet-media" title="concept-css-style-sheet-media">media</a>'s <code title="dom-MediaList-mediaText"><a href="#dom-medialist-mediatext">mediaText</a></code> attribute does not
   change the corresponding attribute on the <a href="#concept-css-style-sheet-owner-node" title="concept-css-style-sheet-owner-node">owner node</a>.
  </dd>
  <dt><dfn id="concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</dfn></dt>
  <dd>
   <p>Specified when created. The title of the <a href="#css-style-sheet">CSS style sheet</a>, which can be the empty string.</p>
   <div class="example">
    <p>In the following, the <a href="#concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</a> is non-empty
    for the first style sheet, but is empty for the second and third style sheets.</p>
    <pre>&lt;style title="papaya whip"&gt;
   body { background: #ffefd5; }
 &lt;/style&gt;</pre>
      <pre>&lt;style title=""&gt;
   body { background: orange; }
 &lt;/style&gt;</pre>
      <pre>&lt;style&gt;
   body { background: brown; }
 &lt;/style&gt;</pre>
   </div>
   <p>If this property is specified to an attribute of the <a href="#concept-css-style-sheet-owner-node" title="concept-css-style-sheet-owner-node">owner node</a>, the
   <a href="#concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</a> must be set to the value of that attribute. Whenever the attribute is set, changed or removed, the
   <a href="#concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</a> must be set to the new value of the attribute, or to the empty string if the attribute is absent.
  </dd>
  <dt><dfn id="concept-css-style-sheet-alternate-flag" title="concept-css-style-sheet-alternate-flag">alternate flag</dfn></dt>
  <dd>
   <p>Specified when created. Either set or clear. Clear by default.</p>
   <div class="example">
    <p>The following <a href="#css-style-sheet" title="CSS style sheet">CSS style sheets</a> have
    their <a href="#concept-css-style-sheet-alternate-flag" title="concept-css-style-sheet-alternate-flag">alternate flag</a> set:</p>
    <pre>&lt;?xml-stylesheet alternate="yes" title="x" href="data:text/css,…"?&gt;</pre>
    <pre>&lt;link rel="alternate stylesheet" title="x" href="data:text/css,…"&gt;</pre>
   </div>
  </dd>
  <dt><dfn id="concept-css-style-sheet-disabled-flag" title="concept-css-style-sheet-disabled-flag">disabled flag</dfn></dt>
  <dd>
   <p>Either set or clear. Clear by default.</p>
   <p class="note">Even when clear it does not necessarily mean that the
   <a href="#css-style-sheet">CSS style sheet</a> is actually used for rendering.</p>
  </dd>
  <dt><dfn id="concept-css-style-sheet-css-rules" title="concept-css-style-sheet-css-rules">CSS rules</dfn></dt>
  <dd><p>The <a href="#css-rule" title="CSS rule">CSS rules</a> associated with the
  <a href="#css-style-sheet">CSS style sheet</a>.</dd>
  <dt><dfn id="concept-css-style-sheet-origin-clean-flag" title="concept-css-style-sheet-origin-clean-flag">origin-clean flag</dfn>
  <dd><p>Specified when created. Either set or clear. If it is set, the API allows reading and modifying of the <a href="#concept-css-style-sheet-css-rules" title="concept-css-style-sheet-css-rules">CSS
  rules</a>.
 </dl>
 <h4 id="the-stylesheet-interface"><span class="secno">6.1.1 </span>The <code title="">StyleSheet</code> Interface</h4>
 <!--
 //
 // All members defined since DOM-2 Style. Only difference
 // is addition of [PutForwards=mediaText], which is presently
 // not defined in CSSOM draft.
 //
 -->
 <p>The <code><a href="#stylesheet">StyleSheet</a></code> interface represents an abstract, base style sheet.</p>
 <pre class="idl">interface <dfn id="stylesheet">StyleSheet</dfn> {
   readonly attribute DOMString <a href="#dom-stylesheet-type" title="dom-StyleSheet-type">type</a>;
   readonly attribute DOMString? <a href="#dom-stylesheet-href" title="dom-StyleSheet-href">href</a>;
   readonly attribute (<a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#element">Element</a> or <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#processinginstruction">ProcessingInstruction</a>)? <!--
   --><a href="#dom-stylesheet-ownernode" title="dom-StyleSheet-ownerNode">ownerNode</a>;
   readonly attribute <a href="#stylesheet">StyleSheet</a>? <a href="#dom-stylesheet-parentstylesheet" title="dom-StyleSheet-parentStyleSheet">parentStyleSheet</a>;
   readonly attribute DOMString? <a href="#dom-stylesheet-title" title="dom-StyleSheet-title">title</a>;
   [SameObject, PutForwards=<a href="#dom-medialist-mediatext" title="dom-MediaList-mediaText">mediaText</a>] readonly attribute <a href="#medialist">MediaList</a> <!--
   --><a href="#dom-stylesheet-media" title="dom-StyleSheet-media">media</a>;
   attribute boolean <a href="#dom-stylesheet-disabled" title="dom-StyleSheet-disabled">disabled</a>;
 };</pre>
 <p>The <dfn id="dom-stylesheet-type" title="dom-StyleSheet-type"><code>type</code></dfn> attribute must return the <a href="#concept-css-style-sheet-type" title="concept-css-style-sheet-type">type</a>.</p>
 <p>The <dfn id="dom-stylesheet-href" title="dom-StyleSheet-href"><code>href</code></dfn> attribute must return the <a href="#concept-css-style-sheet-location" title="concept-css-style-sheet-location">location</a>.</p>
 <p>The <dfn id="dom-stylesheet-ownernode" title="dom-StyleSheet-ownerNode"><code>ownerNode</code></dfn> attribute must return the <a href="#concept-css-style-sheet-owner-node" title="concept-css-style-sheet-owner-node">owner
 node</a>.</p>
 <p>The <dfn id="dom-stylesheet-parentstylesheet" title="dom-StyleSheet-parentStyleSheet"><code>parentStyleSheet</code></dfn> attribute must return the
 <a href="#concept-css-style-sheet-parent-css-style-sheet" title="concept-css-style-sheet-parent-css-style-sheet">parent CSS style sheet</a>.</p>
 <p>The <dfn id="dom-stylesheet-title" title="dom-StyleSheet-title"><code>title</code></dfn> attribute must return the <a href="#concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</a> or null if
 <a href="#concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</a> is the empty string.</p>
 <p>The <dfn id="dom-stylesheet-media" title="dom-StyleSheet-media"><code>media</code></dfn> attribute must return the <a href="#concept-css-style-sheet-media" title="concept-css-style-sheet-media">media</a>.</p>
 <p>The <dfn id="dom-stylesheet-disabled" title="dom-StyleSheet-disabled"><code>disabled</code></dfn> attribute, on getting, must return true if the
 <a href="#concept-css-style-sheet-disabled-flag" title="concept-css-style-sheet-disabled-flag">disabled flag</a>
 is set, or false otherwise. On setting, the <code title="dom-StyleSheet-disabled"><a href="#dom-stylesheet-disabled">disabled</a></code> attribute must set the
 <a href="#concept-css-style-sheet-disabled-flag" title="concept-css-style-sheet-disabled-flag">disabled flag</a> if the new value is true, or unset the
 <a href="#concept-css-style-sheet-disabled-flag" title="concept-css-style-sheet-disabled-flag">disabled flag</a> otherwise.</p>
 <h4 id="the-cssstylesheet-interface"><span class="secno">6.1.2 </span>The <code title="">CSSStyleSheet</code> Interface</h4>
 <!--
 //
 // All members defined since DOM-2 Style. The only differences are:
 //
 //   1. removal of raises(DOMException) on {insert,delete}Rule operations.
 //
 -->
 <p>The <code><a href="#cssstylesheet">CSSStyleSheet</a></code> interface represents a <a href="#css-style-sheet">CSS style sheet</a>.</p>
 <pre class="idl">interface <dfn id="cssstylesheet">CSSStyleSheet</dfn> : <a href="#stylesheet">StyleSheet</a> {
   readonly attribute <a href="#cssrule">CSSRule</a>? <a href="#dom-cssstylesheet-ownerrule" title="dom-CSSStyleSheet-ownerRule">ownerRule</a>;
   [SameObject] readonly attribute <a href="#cssrulelist">CSSRuleList</a> <a href="#dom-cssstylesheet-cssrules" title="dom-CSSStyleSheet-cssRules">cssRules</a>;
   unsigned long <a href="#dom-cssstylesheet-insertrule" title="dom-CSSStyleSheet-insertRule">insertRule</a>(DOMString rule, unsigned long index);
   void <a href="#dom-cssstylesheet-deleterule" title="dom-CSSStyleSheet-deleteRule">deleteRule</a>(unsigned long index);
 };</pre>
 <p>The <dfn id="dom-cssstylesheet-ownerrule" title="dom-CSSStyleSheet-ownerRule"><code>ownerRule</code></dfn> attribute must return the <a href="#concept-css-style-sheet-owner-css-rule" title="concept-css-style-sheet-owner-css-rule">owner
 CSS rule</a>. If a value other than null is ever returned, then that same value must always be returned on each get access.</p>
 <p>The <dfn id="dom-cssstylesheet-cssrules" title="dom-CSSStyleSheet-cssRules"><code>cssRules</code></dfn> attribute must follow these steps:
 <ol>
  <li><p>If the <a href="#concept-css-style-sheet-origin-clean-flag" title="concept-css-style-sheet-origin-clean-flag">origin-clean flag</a> is clear,
  <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a> a <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#securityerror">SecurityError</a></code> exception.
  <li><p>Return a read-only, live <code><a href="#cssrulelist">CSSRuleList</a></code> object representing
  the <a href="#concept-css-style-sheet-css-rules" title="concept-css-style-sheet-css-rules">CSS rules</a>.</p>
  <p class="note">Even though the returned <code><a href="#cssrulelist">CSSRuleList</a></code> object is read-only (from the perspective of
  client-authored script), it can nevertheless change over time due to its liveness status. For example, invoking
  the <code title="dom-CSSStyleSheet-insertRule"><a href="#dom-cssstylesheet-insertrule">insertRule()</a></code> or <code title="dom-CSSStyleSheet-deleteRule"><a href="#dom-cssstylesheet-deleterule">deleteRule()</a></code> methods can result in
  mutations reflected in the returned object.</p>
 </ol>
 <p>The <dfn id="dom-cssstylesheet-insertrule" title="dom-CSSStyleSheet-insertRule"><code>insertRule(<var>rule</var>, <var>index</var>)</code></dfn> method must run the following steps:
 <ol>
  <li><p>If the <a href="#concept-css-style-sheet-origin-clean-flag" title="concept-css-style-sheet-origin-clean-flag">origin-clean flag</a> is clear,
  <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a> a <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#securityerror">SecurityError</a></code> exception.
  <li><p>Return the result of invoking <a href="#insert-a-css-rule">insert a CSS rule</a> <var>rule</var> in the <a href="#concept-css-style-sheet-css-rules" title="concept-css-style-sheet-css-rules">CSS rules</a>
  at <var>index</var>.
 </ol>
 <p>The <dfn id="dom-cssstylesheet-deleterule" title="dom-CSSStyleSheet-deleteRule"><code>deleteRule(<var>index</var>)</code></dfn> method must run the following steps:
 <ol>
  <li><p>If the <a href="#concept-css-style-sheet-origin-clean-flag" title="concept-css-style-sheet-origin-clean-flag">origin-clean flag</a> is clear,
  <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a> a <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#securityerror">SecurityError</a></code> exception.
  <li><p><a href="#remove-a-css-rule">Remove a CSS rule</a> in the <a href="#concept-css-style-sheet-css-rules" title="concept-css-style-sheet-css-rules">CSS rules</a> at <var>index</var>.
 </ol>
 <h3 id="css-style-sheet-collections"><span class="secno">6.2 </span>CSS Style Sheet Collections</h3>
 <p>Below various new concepts are defined that are associated with each
 <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> object.</p>
 <p>Each <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> has an associated list of zero or more
 <a href="#css-style-sheet" title="CSS style sheet">CSS style sheets</a>, named the
 <dfn id="document-css-style-sheets">document CSS style sheets</dfn>. This is
 an ordered list that contains all
 <a href="#css-style-sheet" title="CSS style sheet">CSS style sheets</a> associated with the
 <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#document">Document</a></code>, in
 <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-tree-order" title="concept-tree-order">tree order</a>, with
 <a href="#css-style-sheet" title="CSS style sheet">CSS style sheets</a> created from HTTP
 <code title="">Link</code> headers first, if any, in header
 order.</p>
 <p>To <dfn id="create-a-css-style-sheet">create a CSS style sheet</dfn>, run these
 steps:</p>
 <ol>
  <li><p>Create a new <a href="#css-style-sheet">CSS style sheet</a> object and set its
  properties as specified.</li>
  <li>
   <p>Then run the <a href="#add-a-css-style-sheet">add a CSS style sheet</a> steps for the newly created <a href="#css-style-sheet">CSS style sheet</a>.
   <p class="warning">If the <a href="#concept-css-style-sheet-origin-clean-flag" title="concept-css-style-sheet-origin-clean-flag">origin-clean flag</a> is unset, this can expose information from the user's
   intranet.
 </ol>
 <p>To <dfn id="add-a-css-style-sheet">add a CSS style sheet</dfn>, run these
 steps:</p>
 <ol>
  <li><p>Add the <a href="#css-style-sheet">CSS style sheet</a> to the list of
  <a href="#document-css-style-sheets">document CSS style sheets</a> at the appropriate location. The
  remainder of these steps deal with the
  <a href="#concept-css-style-sheet-disabled-flag" title="concept-css-style-sheet-disabled-flag">disabled flag</a>.</li>
  <li><p>If the <a href="#concept-css-style-sheet-disabled-flag" title="concept-css-style-sheet-disabled-flag">disabled flag</a> is set, terminate
  these steps.</li>
  <li><p>If the <a href="#concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</a> is not the empty string, the
  <a href="#concept-css-style-sheet-alternate-flag" title="concept-css-style-sheet-alternate-flag">alternate flag</a> is clear, and
  <a href="#preferred-css-style-sheet-set-name">preferred CSS style sheet set name</a> is the empty string
  <a href="#change-the-preferred-css-style-sheet-set-name">change the preferred CSS style sheet set name</a> to the
  <a href="#concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</a>.</li>
  <li>
   <p>If any of the following is true clear the
   <a href="#concept-css-style-sheet-disabled-flag" title="concept-css-style-sheet-disabled-flag">disabled flag</a> and terminate these steps:
   <ul>
    <li><p>The <a href="#concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</a> is the empty string.</li>
    <li><p>The <a href="#last-css-style-sheet-set-name">last CSS style sheet set name</a> is null and the
    <a href="#concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</a> is a
    <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a> match
    for the <a href="#preferred-css-style-sheet-set-name">preferred CSS style sheet set name</a>.</li>
    <li><p>The <a href="#concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</a> is a
    <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a> match for the
    <a href="#last-css-style-sheet-set-name">last CSS style sheet set name</a>.</li>
   </ul>
  </li>
  <li><p>Set the <a href="#concept-css-style-sheet-disabled-flag" title="concept-css-style-sheet-disabled-flag">disabled flag</a>.</li>
 </ol>
 <p>To <dfn id="remove-a-css-style-sheet">remove a CSS style sheet</dfn>, run these steps:</p>
 <ol>
  <li><p>Remove the <a href="#css-style-sheet">CSS style sheet</a> from the list of <a href="#document-css-style-sheets">document CSS style sheets</a>.
  <li><p>Set the <a href="#css-style-sheet">CSS style sheet</a>'s <a href="#concept-css-style-sheet-parent-css-style-sheet" title="concept-css-style-sheet-parent-css-style-sheet">parent CSS style sheet</a>,
  <a href="#concept-css-style-sheet-owner-node" title="concept-css-style-sheet-owner-node">owner node</a> and <a href="#concept-css-style-sheet-owner-css-rule" title="concept-css-style-sheet-owner-css-rule">owner CSS rule</a> to null.
  <!-- "associated CSS style sheet" is defined in terms of owner node, so we don't need to set it to null explicitly -->
  <!-- XXX does anything need to happen wrt alternate style sheets? what if the last style sheet with the preferred style sheet set name is removed? -->
 </ol>
 <p>A <dfn id="persistent-css-style-sheet">persistent CSS style sheet</dfn> is a
 <a href="#css-style-sheet">CSS style sheet</a> from the <a href="#document-css-style-sheets">document CSS style sheets</a>
 whose <a href="#concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</a> is the empty string and whose
 <a href="#concept-css-style-sheet-alternate-flag" title="concept-css-style-sheet-alternate-flag">alternate flag</a> is clear.</p>
 <p>A <dfn id="css-style-sheet-set">CSS style sheet set</dfn> is an ordered
 collection of one or more <a href="#css-style-sheet" title="CSS style sheet">CSS style sheets</a>
 from the <a href="#document-css-style-sheets">document CSS style sheets</a> which have an identical
 <a href="#concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</a> that is not the empty string.</p>
 <p>A <dfn id="css-style-sheet-set-name">CSS style sheet set name</dfn> is the
 <a href="#concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</a> the <a href="#css-style-sheet-set">CSS style sheet set</a> has in
 common.</p>
 <p>An <dfn id="enabled-css-style-sheet-set">enabled CSS style sheet set</dfn> is a
 <a href="#css-style-sheet-set">CSS style sheet set</a> of which each <a href="#css-style-sheet">CSS style sheet</a> has
 its <a href="#concept-css-style-sheet-disabled-flag" title="concept-css-style-sheet-disabled-flag">disabled flag</a> clear.</p>
 <p>To <dfn id="enable-a-css-style-sheet-set">enable a CSS style sheet set</dfn>
 with name <var>name</var>, run these steps:</p>
 <ol>
  <li><p>If <var>name</var> is the empty string, set the
  <a href="#concept-css-style-sheet-disabled-flag" title="concept-css-style-sheet-disabled-flag">disabled flag</a> for each <a href="#css-style-sheet">CSS style sheet</a>
  that is in a <a href="#css-style-sheet-set">CSS style sheet set</a> and terminate these steps.</li>
  <li><p>Clear the <a href="#concept-css-style-sheet-disabled-flag" title="concept-css-style-sheet-disabled-flag">disabled flag</a> for each
  <a href="#css-style-sheet">CSS style sheet</a> in a <a href="#css-style-sheet-set">CSS style sheet set</a> whose
  <a href="#css-style-sheet-set-name">CSS style sheet set name</a> is a
  <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a> match for
  <var>name</var> and set it for all other
  <a href="#css-style-sheet" title="CSS style sheet">CSS style sheets</a> in a
  <a href="#css-style-sheet-set">CSS style sheet set</a>.</li>
 </ol>
 <p>To <dfn id="select-a-css-style-sheet-set">select a CSS style sheet set</dfn>
 with name <var>name</var>, run these steps:</p>
 <ol>
  <li><p><a href="#enable-a-css-style-sheet-set">enable a CSS style sheet set</a> with name
  <var>name</var>.</li>
  <li><p>Set <a href="#last-css-style-sheet-set-name">last CSS style sheet set name</a> to
  <var>name</var>.</li>
 </ol>
 <p>A <dfn id="last-css-style-sheet-set-name">last CSS style sheet set name</dfn>
 is a concept to determine what <a href="#css-style-sheet-set">CSS style sheet set</a> was last
 <a href="#select-a-css-style-sheet-set" title="select a CSS style sheet set">selected</a>. Initially its
 value is null.</p>
 <p>A
 <dfn id="preferred-css-style-sheet-set-name">preferred CSS style sheet set name</dfn>
 is a concept to determine which
 <a href="#css-style-sheet" title="CSS style sheet">CSS style sheets</a> need to have their
 <a href="#concept-css-style-sheet-disabled-flag" title="concept-css-style-sheet-disabled-flag">disabled flag</a> clear. Initially its value
 is the empty string.
 <p>To
 <dfn id="change-the-preferred-css-style-sheet-set-name">change the preferred CSS style sheet set name</dfn>
 with name <var>name</var>, run these steps:</p>
 <ol>
  <li><p>Let <var>current</var> be the <a href="#preferred-css-style-sheet-set-name">preferred CSS style sheet set name</a>.</li>
  <li><p>Set <a href="#preferred-css-style-sheet-set-name">preferred CSS style sheet set name</a> to
  <var>name</var>.</li>
  <li><p>If <var>name</var> is not a
  <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a> match for
  <var>current</var> and
  <a href="#last-css-style-sheet-set-name">last CSS style sheet set name</a> is null
  <a href="#enable-a-css-style-sheet-set">enable a CSS style sheet set</a> with name
  <var>name</var>.</li>
 </ol>
 <!-- XXX ought to define "applied"
 thoughts:
   depends on disabled flag, alternate flag, media queries, sheesh
  -->
 <h4 id="the-http-default-style-header"><span class="secno">6.2.1 </span>The HTTP <code title="">Default-Style</code> Header</h4>
 <p>The HTTP <code title="http-default-style"><a href="#default-style">Default-Style</a></code> header
 can be used to set the <a href="#preferred-css-style-sheet-set-name">preferred CSS style sheet set name</a>
 influencing which <a href="#css-style-sheet-set">CSS style sheet set</a> is (initially) the
 <a href="#enabled-css-style-sheet-set">enabled CSS style sheet set</a>.</p>
 <p>For each HTTP <code title="http-default-style"><a href="#default-style">Default-Style</a></code>
 header, in header order, the user agent must
 <a href="#change-the-preferred-css-style-sheet-set-name">change the preferred CSS style sheet set name</a> with name being the
 value of the header.</p>
 <h4 id="the-stylesheetlist-interface"><span class="secno">6.2.2 </span>The <code title="">StyleSheetList</code> Interface</h4>
 <p>The <code><a href="#stylesheetlist">StyleSheetList</a></code> interface represents an ordered collection of <a href="#css-style-sheet" title="CSS style sheet">CSS style sheets</a>.</p>
 <pre class="idl">[ArrayClass]
 interface <dfn id="stylesheetlist">StyleSheetList</dfn> {
   getter <a href="#stylesheet">StyleSheet</a>? <a href="#dom-stylesheetlist-item" title="dom-StyleSheetList-item">item</a>(unsigned long index);
   readonly attribute unsigned long <a href="#dom-stylesheetlist-length" title="dom-StyleSheetList-length">length</a>;
 };</pre>
 <p>The object's <a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-supported-property-indices">supported property indices</a> are the numbers in the range zero to one less than the number of
 <a href="#css-style-sheet" title="CSS style sheet">CSS style sheets</a> represented by the collection. If there are no such <a href="#css-style-sheet" title="CSS style sheet">CSS style sheets</a>,
 then there are no <a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-supported-property-indices">supported property indices</a>.
 <p>The <dfn id="dom-stylesheetlist-item" title="dom-StyleSheetList-item"><code>item(<var>index</var>)</code></dfn> method must return the <var>index</var>th <a href="#css-style-sheet">CSS style
 sheet</a> in the collection. If there is no <var>index</var>th object in the collection, then the method must return null.
 <p>The <dfn id="dom-stylesheetlist-length" title="dom-StyleSheetList-length"><code>length</code></dfn> attribute must return the number of <a href="#css-style-sheet" title="CSS style sheet">CSS style sheets</a>
 represented by the collection.
 <h4 id="extensions-to-the-document-interface"><span class="secno">6.2.3 </span>Extensions to the <code title="">Document</code> Interface</h4>
 <!--
 //
 // Significant changes since DOM-2 Style:
 //
 //   1. move styleSheets from separate interface (DocumentStyle) to Document
 //   2. addition of selectedStyleSheetSet, lastStyleSheetSet, preferredStyleSheetSet, styleSheetSets, and enableStyleSheetsForSet members
 //
 // N.B. HTML4 Section 14.3 "External Style Sheets" introduces the concept of a "group [of] alternate style sheets ... under a single style [sheet set] name",
 // but does not actually use the term "style sheet set". See http://www.w3.org/TR/html401/present/styles.html#h-14.3 for details.
 //
 // N.B. According to HTML4 Section 14.3, a "persistent style sheet ... must apply in addition to any alternate style sheet".
 //
 // N.B. HTML4 Section 14.3 distinguishes the three categories of style sheets as follows:
 //
 //   * persistent - @rel='stylesheet', @title is missing (or empty string?)
 //   * preferred  - @rel='stylesheet', @title is present (and non-empty?)
 //   * alternate  - @rel='alternate stylesheet', @title is present (and non-empty?)
 //
 // Also, HTML5 effectively defines:
 //
 //   * ignored    - @rel='alternate stylesheet', @title is missing (or is empty string?) - in this case, LinkStyle.style must evaluate to null
 //
 // N.B. HTML4 Section 4.3 allows author to specify the default preferred style sheet [set]... [presumably in the case that there are multiple preferred style
 // sheet sets]:
 //
 //   * in content - <META http-equiv="Default-Style" content="compact">
 //   * in http - e.g., using response header - "Default-Style: compact"
 //   * if multiple of the above forms are present, then the LAST one [seen or parsed] takes precedence; HOWEVER, if two or more LINK elements specify preferred
 //     style [sheet sets], the FIRST one present in the document takes precedence;
 //   * preferred style sheets specified using the above (META or HTTP header equivalent) take precedence over those specified with LINK
 //
 // N.B. CSSOM Draft presently employs the term "Style Sheet Collection"
 //
 // Spec Issues:
 //
 //   1. need to specify which style sheets are included in styleSheets, and in which order:
 //
 //      * from Link HTTP header reference
 //      * from <?xml-stylesheet ...?>
 //      * from LINK element, @rel='stylesheet'|'alternate stylesheet'
 //      * from STYLE element
 //
 //   2. for purpose of comparing two titled (named) style sheets, is title (name) compared on case-sensitive or case-insensitive basis
 //
 //   3. CSSOM 6.2 appears to imply that one can create a CSSStyleSheet (or StyleSheet) object and add it to a Document. However, that is not the case; rather
 //      it is necessary to create an HTMLLinkElement or HTMLStyleElement element to indirectly create an empty StyleSheet, then this element can be added to the
 //      Document.
 //
 -->
 <pre class="idl">partial interface <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#document">Document</a> {
   [SameObject] readonly attribute <a href="#stylesheetlist">StyleSheetList</a> <a href="#dom-document-stylesheets" title="dom-Document-styleSheets">styleSheets</a>;<!-- DOM-2 - defined on DocumentStyle
   interface -->
   attribute DOMString? <a href="#dom-document-selectedstylesheetset" title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</a>;<!-- new -->
   readonly attribute DOMString? <a href="#dom-document-laststylesheetset" title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</a>;<!-- new -->
   readonly attribute DOMString? <a href="#dom-document-preferredstylesheetset" title="dom-Document-preferredStyleSheetSet">preferredStyleSheetSet</a>;<!-- new -->
   readonly attribute DOMString[] <a href="#dom-document-stylesheetsets" title="dom-Document-styleSheetSets">styleSheetSets</a>;<!-- new -->
   void <a href="#dom-document-enablestylesheetsforset" title="dom-Document-enableStyleSheetsForSet">enableStyleSheetsForSet</a>(DOMString? name);<!-- new -->
 };</pre>
 <p>The <dfn id="dom-document-stylesheets" title="dom-Document-styleSheets"><code>styleSheets</code></dfn> attribute must return a <code><a href="#stylesheetlist">StyleSheetList</a></code> collection representing
 the <a href="#document-css-style-sheets">document CSS style sheets</a>.</p>
 <p class="note">Because of historical IDL limitations the <code title="dom-Document-styleSheets"><a href="#dom-document-stylesheets">styleSheets</a></code> attribute
 used to be on a separate interface, <code title="">DocumentStyle</code>.</p>
 <p>The <dfn id="dom-document-selectedstylesheetset" title="dom-Document-selectedStyleSheetSet"><code>selectedStyleSheetSet</code></dfn> attribute, on getting, must run these steps:</p>
 <ol>
  <li><p>If there is a single <a href="#enabled-css-style-sheet-set">enabled CSS style sheet set</a> and no
  other <a href="#document-css-style-sheets">document CSS style sheets</a> with a
  <a href="#concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</a> that is not the empty string have the
  <a href="#concept-css-style-sheet-disabled-flag" title="concept-css-style-sheet-disabled-flag">disabled flag</a> unset, return the
  <a href="#css-style-sheet-set-name">CSS style sheet set name</a> of the
  <a href="#enabled-css-style-sheet-set">enabled CSS style sheet set</a> and terminate these steps.</li>
  <li><p>Otherwise, if <a href="#css-style-sheet" title="CSS style sheet">CSS style sheets</a> from
  different <a href="#css-style-sheet-set" title="CSS style sheet set">CSS style sheet sets</a> have
  their <a href="#concept-css-style-sheet-disabled-flag" title="concept-css-style-sheet-disabled-flag">disabled flag</a> unset, return
  null and terminate these steps.</li>
  <li>
   <p>Otherwise, return the empty string.</p>
   <p class="note">At this point either all
   <a href="#css-style-sheet" title="CSS style sheet">CSS style sheets</a> with a
   <a href="#concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</a> that is not the empty string have the
   <a href="#concept-css-style-sheet-disabled-flag" title="concept-css-style-sheet-disabled-flag">disabled flag</a> set, or there are no such
   <a href="#css-style-sheet" title="CSS style sheet">CSS style sheets</a>.</p>
  </li>
 </ol>
 <p>On setting the
 <code title="dom-Document-selectedStyleSheetSet"><a href="#dom-document-selectedstylesheetset">selectedStyleSheetSet</a></code>
 attribute these steps must be run:</p>
 <ol>
  <li><p>If the value is null terminate this set of steps.</li>
  <li><p>Otherwise, <a href="#select-a-css-style-sheet-set">select a CSS style sheet set</a> with the name being the
  value passed.</li>
 </ol>
 <p>From the DOM's perspective, all views have the same
 <code title="dom-Document-selectedStyleSheetSet"><a href="#dom-document-selectedstylesheetset">selectedStyleSheetSet</a></code>.
 If a user agent supports multiple views with different selected
 alternative style sheets, then this attribute (and the
 <code><a href="#stylesheet">StyleSheet</a></code> interface's
 <code title="dom-StyleSheet-disabled"><a href="#dom-stylesheet-disabled">disabled</a></code> attribute)
 must return and set the value for the default
 view.</p>
 <p>The <dfn id="dom-document-laststylesheetset" title="dom-Document-lastStyleSheetSet"><code>lastStyleSheetSet</code></dfn> attribute must return the <a href="#last-css-style-sheet-set-name">last CSS style sheet set name</a>.</p>
 <p class="note">This attribute is initially null.</p>
 <p>The <dfn id="dom-document-preferredstylesheetset" title="dom-Document-preferredStyleSheetSet"><code>preferredStyleSheetSet</code></dfn> attribute must return the <a href="#preferred-css-style-sheet-set-name">preferred CSS style sheet set
 name</a>.</p>
 <p class="note">Unlike <code title="dom-Document-lastStyleSheetSet"><a href="#dom-document-laststylesheetset">lastStyleSheetSet</a></code>,
 this attribute is initially the empty string.</p>
 <p>The <dfn id="dom-document-stylesheetsets" title="dom-Document-styleSheetSets"><code>styleSheetSets</code></dfn> attribute must return a read only array of the
 <a href="#css-style-sheet-set-name" title="CSS style sheet set name">CSS style sheet set names</a> of the <a href="#css-style-sheet-set" title="CSS style sheet set">CSS style sheet sets</a>, in order of the
 <a href="#document-css-style-sheets">document CSS style sheets</a>. The array is live; if the <a href="#document-css-style-sheets">document CSS style sheets</a> change, the array must be updated as appropriate.</p>
 <p>The <dfn id="dom-document-enablestylesheetsforset" title="dom-Document-enableStyleSheetsForSet"><code>enableStyleSheetsForSet(<var>name</var>)</code></dfn> method must, when invoked, run these
 steps:</p>
 <ol>
  <li><p>If <var>name</var> is null terminate these steps.</li>
  <li><p><a href="#enable-a-css-style-sheet-set">enable a CSS style sheet set</a> with name <var>name</var>.</li>
 </ol>
 <p class="note"><a href="#css-style-sheet" title="CSS style sheet">CSS style sheets</a> with a
 <a href="#concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</a> that is the empty string are never affected by this method.
 This method does not change the values of the
 <code title="dom-Document-lastStyleSheetSet"><a href="#dom-document-laststylesheetset">lastStyleSheetSet</a></code> or
 <code title="dom-Document-preferredStyleSheetSet"><a href="#dom-document-preferredstylesheetset">preferredStyleSheetSet</a></code> attributes.</p>
 <h4 id="interaction-with-the-user-interface"><span class="secno">6.2.4 </span>Interaction with the User Interface</h4>
 <p>The user interface of Web browsers that support style sheets
 should list the style sheet titles given in the
 <code title="dom-Document-styleSheetSets"><a href="#dom-document-stylesheetsets">styleSheetSets</a></code> list,
 showing the
 <code title="dom-Document-selectedStyleSheetSet"><a href="#dom-document-selectedstylesheetset">selectedStyleSheetSet</a></code>
 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
 <code title="dom-Document-preferredStyleSheetSet"><a href="#dom-document-preferredstylesheetset">preferredStyleSheetSet</a></code>
 is the empty string as well.</p>
 <p>Selecting a style sheet from this list should
 use the <a href="#select-a-css-style-sheet-set">select a CSS style sheet set</a> set of steps. This
 (by definition) affects the
 <code title="dom-Document-lastStyleSheetSet"><a href="#dom-document-laststylesheetset">lastStyleSheetSet</a></code>
 attribute.</p>
 <h5 id="persisting-the-selected-css-style-sheet-set"><span class="secno">6.2.4.1 </span>Persisting the selected CSS style sheet set</h5>
 <p>If a user agent persist the <a href="#select-a-css-style-sheet-set" title="select a CSS style sheet set">selected</a> <a href="#css-style-sheet-set">CSS style sheet set</a>, it should use
 the value of the
 <code title="dom-Document-selectedStyleSheetSet"><a href="#dom-document-selectedstylesheetset">selectedStyleSheetSet</a></code>
 attribute, or if that is null, the
 <code title="dom-Document-lastStyleSheetSet"><a href="#dom-document-laststylesheetset">lastStyleSheetSet</a></code>
 attribute, when leaving the page (or at some other time) to determine the
 set name to store. If that is null then the <a href="#css-style-sheet-set">CSS style sheet set</a> should not be
 persisted.</p>
 <p>When re-setting the <a href="#css-style-sheet-set">CSS style sheet set</a> to the persisted value (which can
 happen at any time, typically at the first time the <a href="#css-style-sheet" title="CSS style sheet">CSS style sheets</a> are
 needed for styling the document, after the <code title="">&lt;head&gt;</code> of
 the document has been parsed, after any scripts that are not dependent on
 computed style have executed), the <a href="#css-style-sheet-set">CSS style sheet set</a>
 should be set by using the
 <a href="#select-a-css-style-sheet-set">select a CSS style sheet set</a> set of steps as if the user had
 selected the <a href="#css-style-sheet-set">CSS style sheet set</a> manually.</p>
 <p class="note">This specification does not give any suggestions on
 how user agents are to decide to persist the <a href="#css-style-sheet-set">CSS style sheet set</a> or whether or
 how to persist the <a href="#select-a-css-style-sheet-set" title="select a CSS style sheet set">selected</a> <a href="#css-style-sheet-set">CSS style sheet set</a> across pages.</p>
 <!-- XXX this UI section suggests we may want to introduce a few more
      idioms -->
 <h4 id="examples"><span class="secno">6.2.5 </span>Examples</h4>
 <div class="example">
  <p>Thus, in the following HTML snippet:</p>
  <pre>&lt;link rel="alternate stylesheet" title="foo" href="a"&gt;
 &lt;link rel="alternate stylesheet" title="bar" href="b"&gt;
 &lt;script&gt;
   document.selectedStyleSheetSet = 'foo';
   document.styleSheets[1].disabled = false;
 &lt;/script&gt;
 &lt;link rel="alternate stylesheet" title="foo" href="c"&gt;
 &lt;link rel="alternate stylesheet" title="bar" href="d"&gt;</pre>
  <p>...the style sheets that end up enabled are style sheets "a", "b",
  and "c", the
  <code title="dom-Document-selectedStyleSheetSet"><a href="#dom-document-selectedstylesheetset">selectedStyleSheetSet</a></code>
  attribute would return null,
  <code title="dom-Document-lastStyleSheetSet"><a href="#dom-document-laststylesheetset">lastStyleSheetSet</a></code>
  would return "foo", and
  <code title="dom-Document-preferredStyleSheetSet"><a href="#dom-document-preferredstylesheetset">preferredStyleSheetSet</a></code>
  would return the empty string.</p>
  <p>Similarly, in the following HTML snippet:</p>
  <pre>&lt;link rel="alternate stylesheet" title="foo" href="a"&gt;
 &lt;link rel="alternate stylesheet" title="bar" href="b"&gt;
 &lt;script&gt;
   var before = document.preferredStyleSheetSet;
   document.styleSheets[1].disabled = false;
 &lt;/script&gt;
 &lt;link rel="stylesheet" title="foo" href="c"&gt;
 &lt;link rel="alternate stylesheet" title="bar" href="d"&gt;
 &lt;script&gt;
   var after = document.preferredStyleSheetSet;
 &lt;/script&gt;</pre>
  <p>...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 <code title="">&lt;link&gt;</code> element, the
  <code title="dom-Document-preferredStyleSheetSet"><a href="#dom-document-preferredstylesheetset">preferredStyleSheetSet</a></code>
  is set and the
  <code title="dom-Document-enableStyleSheetsForSet"><a href="#dom-document-enablestylesheetsforset">enableStyleSheetsForSet()</a></code>
  method is called (since
  <code title="dom-Document-selectedStyleSheetSet"><a href="#dom-document-selectedstylesheetset">selectedStyleSheetSet</a></code>
  was never set
  explicitly, leaving
  <code title="dom-Document-lastStyleSheetSet"><a href="#dom-document-laststylesheetset">lastStyleSheetSet</a></code> at
  null throughout), which changes which style sheets are enabled and which
  are not.</p>
 </div>
 <h3 id="style-sheet-association"><span class="secno">6.3 </span>Style Sheet Association</h3>
 <p>This section defines the interface an
 <a href="#concept-css-style-sheet-owner-node" title="concept-css-style-sheet-owner-node">owner node</a> of a <a href="#css-style-sheet">CSS style sheet</a> has to
 implement and defines the requirements for
 <a class="external" data-anolis-spec="xmlss" href="http://www.w3.org/TR/xml-stylesheet/#dt-xml-stylesheet" title="xml-stylesheet processing instruction">xml-stylesheet processing instructions</a>
 and HTTP <code title="">Link</code> headers when the link
 relation type is an
 <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a> match for
 "<code title="">stylesheet</code>" since nobody else was interested in
 defining this.</p>
 <p class="note">The editor is in good hope that HTML and SVG will define the
 appropriate processing in their respective specifications, in terms of
 this specification, in due course.</p>
 <h4 id="fetching-css-style-sheets"><span class="secno">6.3.1 </span>Fetching CSS style sheets</h4>
 <p>To <dfn id="fetch-a-css-style-sheet">fetch a CSS style sheet</dfn> with parsed URL <var>parsed URL</var>, referrer <var>referrer</var>, document
 <var>document</var>, optionally a set of parameters <var>parameters</var> (used as input to creating a
 <a class="external" data-anolis-spec="fetch" href="http://fetch.spec.whatwg.org/#concept-request" title="concept-request">request</a>), follow these steps:
 <ol>
  <li><p>Let <var>origin</var> be <var>document</var>'s <a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html#origin">origin</a>.
  <li><p>Let <var>request</var> be a new <a class="external" data-anolis-spec="fetch" href="http://fetch.spec.whatwg.org/#concept-request" title="concept-request">request</a>, with the
  <a class="external" data-anolis-spec="fetch" href="http://fetch.spec.whatwg.org/#concept-request-url" title="concept-request-url">url</a> <var>parsed URL</var>,
  <a class="external" data-anolis-spec="fetch" href="http://fetch.spec.whatwg.org/#concept-request-origin" title="concept-request-origin">origin</a> <var>origin</var>,
  <a class="external" data-anolis-spec="fetch" href="http://fetch.spec.whatwg.org/#concept-request-referrer" title="concept-request-referrer">referrer</a> <var>referrer</var>, and if specified the set of parameters <var>parameters</var>.
  <li><p>Let <var>response</var> be the result of <a class="external" data-anolis-spec="fetch" href="http://fetch.spec.whatwg.org/#concept-fetch" title="concept-fetch">fetching</a> <var>request</var>.</li>
  <li><p>Wait until <var>response</var> is available.
  <li><p>If <var>response</var> is a <a class="external" data-anolis-spec="fetch" href="http://fetch.spec.whatwg.org/#concept-network-error" title="concept-network-error">network error</a>, return an error.
  <li><p>If <var>document</var> is in <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>, <var>response</var> is
  <a class="external" data-anolis-spec="fetch" href="http://fetch.spec.whatwg.org/#cors-same-origin">CORS-same-origin</a> and the <a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/fetching-resources.html#content-type">Content-Type metadata</a> of <var>response</var> is not a
  <a href="#supported-styling-language">supported styling language</a> change the <a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/fetching-resources.html#content-type">Content-Type metadata</a> of <var>response</var> to
  <code title="">text/css</code>.
  <li><p>If <var>response</var> is not in a <a href="#supported-styling-language">supported styling language</a> return an error.</li>
  <li><p>Return <var>response</var>.
 </ol>
 <h4 id="the-linkstyle-interface"><span class="secno">6.3.2 </span>The <code title="">LinkStyle</code> Interface</h4>
 <p>The <dfn id="associated-css-style-sheet">associated CSS style sheet</dfn> of a node is the <a href="#css-style-sheet">CSS style sheet</a> in the list of
 <a href="#document-css-style-sheets">document CSS style sheets</a> of which the <a href="#concept-css-style-sheet-owner-node" title="concept-css-style-sheet-owner-node">owner node</a> implements the <code><a href="#linkstyle">LinkStyle</a></code>
 interface.</p>
 <pre class="idl">[NoInterfaceObject]
 interface <dfn id="linkstyle">LinkStyle</dfn> {
   readonly attribute <a href="#stylesheet">StyleSheet</a>? <a href="#dom-linkstyle-sheet" title="dom-LinkStyle-sheet">sheet</a>;
 };</pre>
 <p>The <dfn id="dom-linkstyle-sheet" title="dom-LinkStyle-sheet"><code>sheet</code></dfn> attribute must return the <a href="#associated-css-style-sheet">associated CSS style sheet</a> for the node or null
 if there is no <a href="#associated-css-style-sheet">associated CSS style sheet</a>.</p>
 <div class="example">
  <p>In the following fragment, the first <code title="">style</code>
  element has a <code title="dom-LinkStyle-sheet"><a href="#dom-linkstyle-sheet">sheet</a></code> attribute that returns a
  <code><a href="#stylesheet">StyleSheet</a></code> object representing the style sheet, but for
  the second <code title="">style</code> element, the <code title="dom-LinkStyle-sheet"><a href="#dom-linkstyle-sheet">sheet</a></code> attribute returns null,
  assuming the user agent supports CSS (<code title="">text/css</code>), but does
  not support the (hypothetical) ExampleSheets (<code title="">text/example-sheets</code>).</p>
  <pre>&lt;style type="text/css"&gt;
   body { background:lime }
 &lt;/style&gt;</pre>
    <pre>&lt;style type="text/example-sheets"&gt;
   $(body).background := lime
 &lt;/style&gt;</pre>
 </div>
 <p class="note">Whether or not the node refers to a style sheet is defined
 by the specification that defines the semantics of said node.</p>
 <h4 id="requirements-on-specifications"><span class="secno">6.3.3 </span>Requirements on specifications</h4>
 <p>Specifications introducing new ways of associating style sheets through
 the DOM should define which nodes implement the
 <code><a href="#linkstyle">LinkStyle</a></code> interface. When doing so, they
 must also define when a <a href="#css-style-sheet">CSS style sheet</a> is
 <a href="#create-a-css-style-sheet" title="create a CSS style sheet">created</a>.</p>
 <h4 id="requirements-on-user-agents-implementing-the-xml-stylesheet-processing-instruction"><span class="secno">6.3.4 </span>Requirements on User Agents Implementing the xml-stylesheet processing instruction</h4>
 <!-- XXX load/error events -->
 <pre class="idl"><a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#processinginstruction">ProcessingInstruction</a> implements <a href="#linkstyle">LinkStyle</a>;</pre>
 <p>The <dfn id="prolog">prolog</dfn> refers to <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-node" title="concept-node">nodes</a> that are children of the
 <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-document" title="concept-document">document</a> and are not <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-tree-following" title="concept-tree-following">following</a> the
 <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#element">Element</a></code> child of the <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-document" title="concept-document">document</a>, if any.
 <p>When a <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#processinginstruction">ProcessingInstruction</a></code> <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-node" title="concept-node">node</a> <var>node</var> is inserted to a
 document, removed from a document, becomes part of the <a href="#prolog">prolog</a>, is no longer part of the <a href="#prolog">prolog</a>, or has its
 <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-cd-data" title="concept-cd-data">data</a> changed, these steps must be run:
 <ol>
  <li><p>If an instance of this algorithm is currently running for <var>node</var>, abort that instance, and stop the associated
  <a class="external" data-anolis-spec="fetch" href="http://fetch.spec.whatwg.org/#concept-fetch" title="concept-fetch">fetching</a> if applicable.
  <li><p>If <var>node</var> has an <a href="#associated-css-style-sheet">associated CSS style sheet</a>, <a href="#remove-a-css-style-sheet" title="remove a CSS style sheet">remove</a> it.
  <li><p>If <var>node</var> is not an <a class="external" data-anolis-spec="xmlss" href="http://www.w3.org/TR/xml-stylesheet/#dt-xml-stylesheet">xml-stylesheet processing instruction</a>, terminate these steps.
  <li><p>If <var>node</var> is part of the <a class="external" data-anolis-spec="xml" href="http://www.w3.org/TR/xml/#dt-doctype">document type declaration</a>, terminate these steps.
  <li><p>If <var>node</var> does not have an <code title="">href</code> <a class="external" data-anolis-spec="xmlss" href="http://www.w3.org/TR/xml-stylesheet/#dt-pseudo-attribute">pseudo-attribute</a>, terminate these steps.
  <li><p>Let <var>title</var> be the value of the
  <code title="">title</code> <a class="external" data-anolis-spec="xmlss" href="http://www.w3.org/TR/xml-stylesheet/#dt-pseudo-attribute">pseudo-attribute</a> or the empty string if the
  <code title="">title</code> <a class="external" data-anolis-spec="xmlss" href="http://www.w3.org/TR/xml-stylesheet/#dt-pseudo-attribute">pseudo-attribute</a> is not specified.</li>
  <li><p>If there is an <code title="">alternate</code> <a class="external" data-anolis-spec="xmlss" href="http://www.w3.org/TR/xml-stylesheet/#dt-pseudo-attribute">pseudo-attribute</a>
  whose value is a <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a> match
  for "<code title="">yes</code>" and <var>title</var> is the
  empty string terminate these steps.</li>
  <li><p>If there is a <code title="">type</code> <a class="external" data-anolis-spec="xmlss" href="http://www.w3.org/TR/xml-stylesheet/#dt-pseudo-attribute">pseudo-attribute</a> whose
  value is not a <a href="#supported-styling-language">supported styling language</a> the user agent
  may terminate these steps.</li>
  <li><p>Let <var>input URL</var> be the value specified by the
  <code title="">href</code> <a class="external" data-anolis-spec="xmlss" href="http://www.w3.org/TR/xml-stylesheet/#dt-pseudo-attribute">pseudo-attribute</a>.
  <li><p>Let <var>document</var> be <var>node</var>'s <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-node-document" title="concept-node-document">node document</a>
  <li><p>Let <var>base URL</var> be <var>document</var>'s <a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#document-base-url">document base URL</a>.
  <li><p>Let <var>referrer</var> be <var>document</var>'s <a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#the-document's-address" title="the document's address">address</a>.
  <li><p>Let <var>parsed URL</var> be the return value of invoking the <a class="external" data-anolis-spec="url" href="http://url.spec.whatwg.org/#concept-url-parser" title="concept-url-parser">URL parser</a> with the
  string <var>input URL</var> and the base URL <var>base URL</var>.
  <li><p>If <var>parsed URL</var> is failure, terminate these steps.
  <li><p>Let <var>response</var> be the result of <a href="#fetch-a-css-style-sheet" title="fetch a CSS style sheet">fetching a CSS style sheet</a> with parsed URL <var>parsed URL</var>,
  referrer <var>referrer</var> and document <var>document</var>.
  <li><p>If <var>response</var> is an error, terminate these steps.
  <li>
   <p><a href="#create-a-css-style-sheet">Create a CSS style sheet</a> with the following properties:</p>
   <dl>
    <dt><a href="#concept-css-style-sheet-location" title="concept-css-style-sheet-location">location</a></dt>
    <dd><p>The result of invoking the <a class="external" data-anolis-spec="url" href="http://url.spec.whatwg.org/#concept-url-serializer" title="concept-url-serializer">URL serializer</a> with <var>parsed URL</var>.</dd>
    <dt><a href="#concept-css-style-sheet-parent-css-style-sheet" title="concept-css-style-sheet-parent-css-style-sheet">parent CSS style sheet</a></dt>
    <dd><p>null.</dd>
    <dt><a href="#concept-css-style-sheet-owner-node" title="concept-css-style-sheet-owner-node">owner node</a></dt>
    <dd><p><var>node</var>.</dd>
    <dt><a href="#concept-css-style-sheet-owner-css-rule" title="concept-css-style-sheet-owner-css-rule">owner CSS rule</a></dt>
    <dd><p>null.</dd>
    <dt><a href="#concept-css-style-sheet-media" title="concept-css-style-sheet-media">media</a></dt>
    <dd><p>The value of the <code title="">media</code> <a class="external" data-anolis-spec="xmlss" href="http://www.w3.org/TR/xml-stylesheet/#dt-pseudo-attribute">pseudo-attribute</a>
    if any, or the empty string otherwise.</dd>
    <dt><a href="#concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</a></dt>
    <dd><p><var>title</var>.</dd>
    <dt><a href="#concept-css-style-sheet-alternate-flag" title="concept-css-style-sheet-alternate-flag">alternate flag</a></dt>
    <dd><p>Set if the <code title="">alternate</code> <a class="external" data-anolis-spec="xmlss" href="http://www.w3.org/TR/xml-stylesheet/#dt-pseudo-attribute">pseudo-attribute</a>
    value is a <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a> match for
    "<code title="">yes</code>", or clear otherwise.
    <dt><a href="#concept-css-style-sheet-origin-clean-flag" title="concept-css-style-sheet-origin-clean-flag">origin-clean flag</a>
    <dd><p>Set if <var>response</var> is <a class="external" data-anolis-spec="fetch" href="http://fetch.spec.whatwg.org/#cors-same-origin">CORS-same-origin</a>, or clear otherwise.
   </dl>
  </li>
 </ol>
 <h4 id="requirements-on-user-agents-implementing-the-http-link-header"><span class="secno">6.3.5 </span>Requirements on User Agents Implementing the HTTP
 <code title="">Link</code> Header</h4>
 <!-- XXX ref, one day -->
 <!-- XXX deal with media param -->
 <p class="atrisk">For each HTTP <code title="">Link</code> header of which one
 of the link relation types is an
 <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a> match
 for "<code title="">stylesheet</code>" these steps
 must be run:</p>
 <ol>
  <li><p>Let <var>title</var> be the value of the first of all the
  <code title="">title</code> parameters.
  If there are no such parameters it is the empty string.</li>
  <li><p>If one of the (other) link relation types is an
  <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a> match for
  "<code title="">alternate</code>" and <var>title</var> is the
  empty string terminate these steps.</li>
  <li><p>Let <var>input URL</var> be the value specified. <span class="issue" title="">Be more specific</span>
  <li><p>Let <var>base URL</var> be the document's <a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#document-base-url">document base URL</a>. <span class="issue" title="">Is there a document at this
  point?</span>
  <li><p>Let <var>referrer</var> be the document's <a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#the-document's-address" title="the document's address">address</a>.
  <li><p>Let <var>origin</var> be the document's <a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html#origin">origin</a>.
  <li><p>Let <var>parsed URL</var> be the return value of invoking the <a class="external" data-anolis-spec="url" href="http://url.spec.whatwg.org/#concept-url-parser" title="concept-url-parser">URL parser</a> with the
  string <var>input URL</var> and the base URL <var>base URL</var>.
  <li><p>If <var>parsed URL</var> is failure, terminate these steps.
  <li><p>Let <var>response</var> be the result of <a href="#fetch-a-css-style-sheet" title="fetch a CSS style sheet">fetching a CSS style sheet</a> with parsed URL <var>parsed URL</var>,
  referrer <var>referrer</var> and document being the document. <span class="issue" title="">What if the HTML parser hasn't decided on quirks/non-quirks yet?</span>
  <li>
   <p><a href="#create-a-css-style-sheet">Create a CSS style sheet</a> with the following properties:</p>
   <dl>
    <dt><a href="#concept-css-style-sheet-location" title="concept-css-style-sheet-location">location</a></dt>
    <dd><p>The result of invoking the <a class="external" data-anolis-spec="url" href="http://url.spec.whatwg.org/#concept-url-serializer" title="concept-url-serializer">URL serializer</a> with <var>parsed URL</var>.</dd>
    <dt><a href="#concept-css-style-sheet-owner-node" title="concept-css-style-sheet-owner-node">owner node</a></dt>
    <dd><p>null.</dd>
    <dt><a href="#concept-css-style-sheet-parent-css-style-sheet" title="concept-css-style-sheet-parent-css-style-sheet">parent CSS style sheet</a></dt>
    <dd><p>null.</dd>
    <dt><a href="#concept-css-style-sheet-owner-css-rule" title="concept-css-style-sheet-owner-css-rule">owner CSS rule</a></dt>
    <dd><p>null.</dd>
    <dt><a href="#concept-css-style-sheet-media" title="concept-css-style-sheet-media">media</a></dt>
    <dd><p>The value of the first <code title="">media</code> parameter.</dd>
    <!-- XXX register media parameter? bah -->
    <dt><a href="#concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</a></dt>
    <dd><p><var>title</var>.</dd>
    <dt><a href="#concept-css-style-sheet-alternate-flag" title="concept-css-style-sheet-alternate-flag">alternate flag</a></dt>
    <dd><p>Set if one of the specified link relation type for this HTTP
    <code title="">Link</code> header is an
    <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a> match for
    "<code title="">alternate</code>", or false otherwise.
    <dt><a href="#concept-css-style-sheet-origin-clean-flag" title="concept-css-style-sheet-origin-clean-flag">origin-clean flag</a>
    <dd><p>Set if <var>response</var> is <a class="external" data-anolis-spec="fetch" href="http://fetch.spec.whatwg.org/#cors-same-origin">CORS-same-origin</a>, or clear otherwise.
   </dl>
  </li>
 </ol>
 <h3 id="css-rules"><span class="secno">6.4 </span>CSS Rules</h3>
 <p>A <dfn id="css-rule">CSS rule</dfn> is an abstract concept that
 denotes a rule as defined by the CSS specification. A
 <a href="#css-rule">CSS rule</a> is represented as an object that implements a subclass of
 the <code><a href="#cssrule">CSSRule</a></code> interface, and which has the following
 associated state items:</p>
 <dl>
 <dt><dfn id="concept-css-rule-type" title="concept-css-rule-type">type</dfn></dt>
 <dd><p>A non-negative integer associated with a particular type of rule.
 This item is initialized when a rule is created and cannot change.</dd>
 <dt><dfn id="concept-css-rule-text" title="concept-css-rule-text">text</dfn></dt>
 <dd><p>A text representation of the rule suitable for direct use in a style sheet.
 This item is initialized when a rule is created and can be changed.</dd>
 <dt><dfn id="concept-css-rule-parent-css-rule" title="concept-css-rule-parent-css-rule">parent CSS rule</dfn></dt>
 <dd><p>A reference to an enclosing <a href="#css-rule">CSS rule</a> or null.
 If the rule has an enclosing rule when it is created, then this item is initialized to the enclosing rule; otherwise it is null. It can be changed to
 null.</dd>
 <dt><dfn id="concept-css-rule-parent-css-style-sheet" title="concept-css-rule-parent-css-style-sheet">parent CSS style sheet</dfn></dt>
 <dd><p>A reference to a parent <a href="#css-style-sheet">CSS style sheet</a> or null.
 This item is initialized to reference an associated style sheet when the rule is created. It can be changed to null.</dd>
 <dt><dfn id="concept-css-rule-child-css-rules" title="concept-css-rule-child-css-rules">child CSS rules</dfn>
 <dd><p>A list of child <a href="#css-rule" title="CSS rule">CSS rules</a>. The list can be mutated.
 </dl>
 <p>In addition to the above state, each <a href="#css-rule">CSS rule</a> may be associated
 with other state in accordance with its <a href="#concept-css-rule-type" title="concept-css-rule-type">type</a>.</p>
 <p>To <dfn id="parse-a-css-rule">parse a CSS rule</dfn> from a string <var>string</var>, invoke <a class="external" data-anolis-spec="csssyntax" href="http://dev.w3.org/csswg/css-syntax/#parse-a-rule0">parse a rule</a> with <var>string</var> and return
 the value returned.</p>
 <p>To <dfn id="serialize-a-css-rule">serialize a CSS rule</dfn>, perform one of the following in accordance with the <a href="#css-rule">CSS rule</a>'s
 <a href="#concept-css-rule-type" title="concept-css-rule-type">type</a>:</p>
 <dl class="switch">
  <dt><code><a href="#cssstylerule">CSSStyleRule</a></code></dt>
  <dd>
   <p>The result of concatenating the following:</p>
   <ol>
    <li>The result of performing <a href="#serialize-a-group-of-selectors">serialize a group of selectors</a> on the rule's associated selectors.</li>
    <li>The string "<code title=""> { </code>", i.e., a single SPACE (U+0020), followed by LEFT CURLY BRACKET (U+007B),
    followed by a single SPACE (U+0020).</li>
    <li>The result of performing <a href="#serialize-a-css-declaration-block">serialize a CSS declaration block</a> on the rule's associated declarations.</li>
    <li>If the rule is associated with one or more declarations, the string "<code title=""> </code>", i.e., a single SPACE (U+0020).</li>
    <li>The string "<code title="">}</code>", RIGHT CURLY BRACKET (U+007D).
   </ol>
  </dd>
  <dt><code><a href="#csscharsetrule">CSSCharsetRule</a></code></dt>
  <dd>
   <p>The result of concatenating the following:</p>
   <ol>
    <li>The string "<code title="">@charset</code>" followed by a single SPACE (U+0020).</li>
    <li>The result of performing <a href="#serialize-a-string">serialize a string</a> on the rule's character encoding.</li>
    <li>The string "<code title="">;</code>", i.e., SEMICOLON (U+003B).
   </ol>
   <div class="example">
   <pre>@charset "UTF-8";</pre>
   </div>
  </dd>
  <dt><code><a href="#cssimportrule">CSSImportRule</a></code></dt>
  <dd>
   <p>The result of concatenating the following:</p>
   <ol>
    <li>The string "<code title="">@import</code>" followed by a single SPACE (U+0020).</li>
    <li>The result of performing <a href="#serialize-a-url">serialize a URL</a> on the rule's location.</li>
    <li>If the rule's associated media list is not empty, a single SPACE (U+0020) followed by the
    result of performing <a href="#serialize-a-media-query-list">serialize a media query list</a> on the media list.
    <li>The string "<code title="">;</code>", i.e., SEMICOLON (U+003B).
   </ol>
   <div class="example">
   <pre>@import url("import.css");</pre>
   <pre>@import url("print.css") print;</pre>
   </div>
  </dd>
  <dt><code><a href="#cssmediarule">CSSMediaRule</a></code></dt>
  <dd><p class="issue">...</dd>
  <dt><code title="">CSSFontFaceRule</code></dt>
  <dd><p class="issue">...</dd>
  <dt><code><a href="#csspagerule">CSSPageRule</a></code></dt>
  <dd><p class="issue">...</dd>
  <dt><code><a href="#cssnamespacerule">CSSNamespaceRule</a></code></dt>
  <dd><p>The literal string "<code title="">@namespace</code>", followed by a single SPACE
  (U+0020), followed by the
  <a href="#serialize-an-identifier" title="serialize an identifier">identifier escaped</a> value of the
  <code title="dom-CSSNamespaceRule-prefix"><a href="#dom-cssnamespacerule-prefix">prefix</a></code> attribute (if
  any), followed by a single SPACE (U+0020) if there is a prefix, followed by the
  <a href="#serialize-a-url" title="serialize a URL">URL escaped</a> value of the
  <code title="dom-CSSNamespaceRule-namespaceURI"><a href="#dom-cssnamespacerule-namespaceuri">namespaceURI</a></code>
  attribute, followed the character "<code title="">;</code>" (U+003B).</dd>
 </dl>
 <p>To <dfn id="insert-a-css-rule">insert a CSS rule</dfn> <var>rule</var> in a CSS rule list <var>list</var> at index <var>index</var>, follow these steps:</p>
 <ol>
  <li><p>Set <var>new rule</var> to the results of performing <a href="#parse-a-css-rule">parse a CSS rule</a>
  on argument <var>rule</var>.
  <li><p>If <var>new rule</var> is a syntax error, <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a>
  a <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#syntaxerror">SyntaxError</a></code> exception.</li>
  <li><p>If <var>new rule</var> is an <code title="">@charset</code> at-rule, <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a> a
  <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#syntaxerror">SyntaxError</a></code> exception.
  <li><p>Set <var>length</var> to the number of items in <var>list</var>.</li>
  <li><p>If <var>index</var> is greater than <var>length</var>, then <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a>
  an <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#indexsizeerror">IndexSizeError</a></code> exception.</li>
  <li><p>If <var>new rule</var> cannot be inserted into <var>list</var> at the zero-index position <var>index</var> due to constraints
  specified by CSS, then <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a>
  a <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#hierarchyrequesterror">HierarchyRequestError</a></code> exception. <a href="#refsCSS">[CSS]</a></p>
  <p class="note">For example, a CSS style sheet cannot contain an <code title="">@import</code> at-rule after a style rule.</li>
  <li><p>If <var>new rule</var> is an <code title="">@namespace</code> at-rule, and <var>list</var> contains anything other than
  <code title="">@charset</code> at-rules, <code title="">@import</code> at-rules, and <code title="">@namespace</code> at-rules,
  <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a> an <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#invalidstateerror">InvalidStateError</a></code> exception.
  <li><p>Insert <var>new rule</var> into <var>list</var> at the zero-indexed position <var>index</var>.<p></li>
  <li><p>Return <var>index</var>.
 </ol>
 <p>To <dfn id="remove-a-css-rule">remove a CSS rule</dfn> from a CSS rule list <var>list</var> at index <var>index</var>, follow these steps:</p>
 <ol>
  <li><p>Set <var>length</var> to the number of items in <var>list</var>.</li>
  <li><p>If <var>index</var> is greater than or equal to <var>length</var>, then <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a>
  an <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#indexsizeerror">IndexSizeError</a></code> exception.</li>
  <li><p>Set <var>old rule</var> to the <var>index</var>th item in <var>list</var>.</li>
  <li><p>If <var>old rule</var> is an <code title="">@namespace</code> at-rule, and <var>list</var> contains anything other than
  <code title="">@charset</code> at-rules, <code title="">@import</code> at-rules, and <code title="">@namespace</code> at-rules,
  <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a> an <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#invalidstateerror">InvalidStateError</a></code> exception.
  <li><p>Remove rule <var>old rule</var> from <var>list</var> at the zero-indexed position <var>index</var>.<p></li>
  <li><p>Set <var>old rule</var>'s <a href="#concept-css-rule-parent-css-rule" title="concept-css-rule-parent-css-rule">parent CSS rule</a> and
  <a href="#concept-css-rule-parent-css-style-sheet" title="concept-css-rule-parent-css-style-sheet">parent CSS style sheet</a> to null.
 </ol>
 <h4 id="the-cssrulelist-interface"><span class="secno">6.4.1 </span>The <code title="">CSSRuleList</code> Interface</h4>
 <p>The <code><a href="#cssrulelist">CSSRuleList</a></code> interface represents an ordered collection of CSS style rules.</p>
 <pre class="idl">[ArrayClass]
 interface <dfn id="cssrulelist">CSSRuleList</dfn> {
   getter <a href="#cssrule">CSSRule</a>? <a href="#dom-cssrulelist-item" title="dom-CSSRuleList-item">item</a>(unsigned long index);
   readonly attribute unsigned long <a href="#dom-cssrulelist-length" title="dom-CSSRuleList-length">length</a>;
 };</pre>
 <p>The object's <a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-supported-property-indices">supported property indices</a> are the numbers in the range zero to one less than the number of
 <code><a href="#cssrule">CSSRule</a></code> objects represented by the collection. If there are no such <code><a href="#cssrule">CSSRule</a></code> objects, then there are no
 <a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-supported-property-indices">supported property indices</a>.
 <p>The <dfn id="dom-cssrulelist-item" title="dom-CSSRuleList-item"><code>item(<var>index</var>)</code></dfn> method must return the <var>index</var>th <code><a href="#cssrule">CSSRule</a></code>
 object in the collection. If there is no <var>index</var>th object in the collection, then the method must return null.
 <p>The <dfn id="dom-cssrulelist-length" title="dom-CSSRuleList-length"><code>length</code></dfn> attribute must return the number of <code><a href="#cssrule">CSSRule</a></code> objects represented by the
 collection.
 <h4 id="the-cssrule-interface"><span class="secno">6.4.2 </span>The <code title="">CSSRule</code> Interface</h4>
 <!--
 //
 // All members defined since DOM-2 Style. The only differences are:
 //
 //   1. removal of UNKNOWN_RULE = 0 constant
 //   2. addition of NAMESPACE_RULE = 10 constant
 //   3. removal of commented raises(DOMException) on setting cssText
 //
 -->
 <p>The <code><a href="#cssrule">CSSRule</a></code> interface represents an abstract, base CSS style rule. Each
 distinct CSS style rule type is represented by a distinct interface that
 inherits from this interface.</p>
 <pre class="idl">interface <dfn id="cssrule">CSSRule</dfn> {
   const unsigned short <a href="#dom-cssrule-style_rule" title="dom-CSSRule-STYLE_RULE">STYLE_RULE</a> = 1;
   const unsigned short <a href="#dom-cssrule-charset_rule" title="dom-CSSRule-CHARSET_RULE">CHARSET_RULE</a> = 2;
   const unsigned short <a href="#dom-cssrule-import_rule" title="dom-CSSRule-IMPORT_RULE">IMPORT_RULE</a> = 3;
   const unsigned short <a href="#dom-cssrule-media_rule" title="dom-CSSRule-MEDIA_RULE">MEDIA_RULE</a> = 4;
   const unsigned short <a href="#dom-cssrule-font_face_rule" title="dom-CSSRule-FONT_FACE_RULE">FONT_FACE_RULE</a> = 5;
   const unsigned short <a href="#dom-cssrule-page_rule" title="dom-CSSRule-PAGE_RULE">PAGE_RULE</a> = 6;
   const unsigned short <a href="#dom-cssrule-namespace_rule" title="dom-CSSRule-NAMESPACE_RULE">NAMESPACE_RULE</a> = 10;
   readonly attribute unsigned short <a href="#dom-cssrule-type" title="dom-CSSRule-type">type</a>;
   attribute DOMString <a href="#dom-cssrule-csstext" title="dom-CSSRule-cssText">cssText</a>;
   readonly attribute <a href="#cssrule">CSSRule</a>? <a href="#dom-cssrule-parentrule" title="dom-CSSRule-parentRule">parentRule</a>;
   readonly attribute <a href="#cssstylesheet">CSSStyleSheet</a>? <a href="#dom-cssrule-parentstylesheet" title="dom-CSSRule-parentStyleSheet">parentStyleSheet</a>;
 };</pre>
 <p>The <dfn id="dom-cssrule-type" title="dom-CSSRule-type"><code>type</code></dfn> attribute must return the CSS rule type, as follows:
 <dl class="switch">
  <dt>If the object is a <code><a href="#cssstylerule">CSSStyleRule</a></code>
  <dd><p>Return <dfn id="dom-cssrule-style_rule" title="dom-CSSRule-STYLE_RULE"><code>STYLE_RULE</code></dfn> (numeric value 1).
  <dt>If the object is a <code><a href="#csscharsetrule">CSSCharsetRule</a></code>
  <dd><p>Return <dfn id="dom-cssrule-charset_rule" title="dom-CSSRule-CHARSET_RULE"><code>CHARSET_RULE</code></dfn> (numberic value 2).
  <dt>If the object is a <code><a href="#cssimportrule">CSSImportRule</a></code>
  <dd><p>Return <dfn id="dom-cssrule-import_rule" title="dom-CSSRule-IMPORT_RULE"><code>IMPORT_RULE</code></dfn> (numberic value 3).
  <dt>If the object is a <code><a href="#cssmediarule">CSSMediaRule</a></code>
  <dd><p>Return <dfn id="dom-cssrule-media_rule" title="dom-CSSRule-MEDIA_RULE"><code>MEDIA_RULE</code></dfn> (numeric value 4).
  <dt>If the object is a <code title="">CSSFontFaceRule</code>
  <dd><p>Return <dfn id="dom-cssrule-font_face_rule" title="dom-CSSRule-FONT_FACE_RULE"><code>FONT_FACE_RULE</code></dfn> (numeric value 5).
  <dt>If the object is a <code><a href="#csspagerule">CSSPageRule</a></code>
  <dd><p>Return <dfn id="dom-cssrule-page_rule" title="dom-CSSRule-PAGE_RULE"><code>PAGE_RULE</code></dfn> (numeric value 6).
  <dt>If the object is a <code><a href="#cssnamespacerule">CSSNamespaceRule</a></code>
  <dd><p>Return <dfn id="dom-cssrule-namespace_rule" title="dom-CSSRule-NAMESPACE_RULE"><code>NAMESPACE_RULE</code></dfn> (numeric value 10).
  <dt>Otherwise
  <dd><p>Return a value defined on the <a href="http://wiki.csswg.org/spec/cssom-constants">CSSOM Constants</a> wiki page.
 </dl>
 <p class="note">The value 0, formerly known as <code title="">UNKNOWN_RULE</code>, is made
 obsolete by this specification. This value will not be re-allocated in the future and will remain reserved.</p>
 <p>The <dfn id="dom-cssrule-csstext" title="dom-CSSRule-cssText"><code>cssText</code></dfn> attribute must return a <a href="#serialize-a-css-rule" title="serialize a CSS rule">serialization</a> of the
 <a href="#css-rule">CSS rule</a>.</p>
 <p>On setting the <code title="dom-CSSRule-cssText"><a href="#dom-cssrule-csstext">cssText</a></code> attribute these steps must be run:</p>
 <ol>
  <li><p>Let <var>new rule</var> be the returned value of <a href="#parse-a-css-rule" title="parse a CSS rule">parsing</a> the value.</li>
  <li><p>If <var>new rule</var> is a syntax error, terminate this algorithm.</li>
  <li><p>If the <a href="#concept-css-rule-type" title="concept-css-rule-type">type</a> of <var>new rule</var> does not match the <a href="#concept-css-rule-type" title="concept-css-rule-type">type</a> of
  the current object
  <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a> an
  <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#invalidmodificationerror">InvalidModificationError</a></code> exception.</li>
  <li><p>Replace the current object with <var>new rule</var>.</li>
 </ol>
 <p>The <dfn id="dom-cssrule-parentrule" title="dom-CSSRule-parentRule"><code>parentRule</code></dfn> attribute must return the <a href="#concept-css-rule-parent-css-rule" title="concept-css-rule-parent-css-rule">parent CSS
 rule</a>.</p>
 <p class="note">For example, <code title="">@media</code> can enclose a rule, in which case <code title="dom-CSSRule-parentRule"><a href="#dom-cssrule-parentrule">parentRule</a></code> would
 be non-null; in cases where there is no enclosing rule, <code title="dom-CSSRule-parentRule"><a href="#dom-cssrule-parentrule">parentRule</a></code> will be null.</p>
 <p>The <dfn id="dom-cssrule-parentstylesheet" title="dom-CSSRule-parentStyleSheet"><code>parentStyleSheet</code></dfn> attribute must return the
 <a href="#concept-css-rule-parent-css-style-sheet" title="concept-css-rule-parent-css-style-sheet">parent CSS style sheet</a>.</p>
 <p class="note">The only circumstance where null is returned when a rule has been <a href="#remove-a-css-rule" title="remove a CSS rule">removed</a>.</p>
 <p class="note">Removing a <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#node">Node</a></code> that implements the <code><a href="#linkstyle">LinkStyle</a></code> interface from a
 <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> instance does not (by itself) cause the <code><a href="#cssstylesheet">CSSStyleSheet</a></code> referenced by a <code><a href="#cssrule">CSSRule</a></code> to be
 unreachable.</p>
 <h4 id="the-cssstylerule-interface"><span class="secno">6.4.3 </span>The <code title="">CSSStyleRule</code> Interface</h4>
 <!--
 //
 // All members defined since DOM-2 Style. The only differences are:
 //
 //   1. removal of commented raises(DOMException) on setting selectorText
 //
 -->
 <p>The <code><a href="#cssstylerule">CSSStyleRule</a></code> interface represents a style rule.</p>
 <p class="note">CSS 2.1 calls style rule <a href="http://www.w3.org/TR/CSS21/syndata.html#rule-sets">rule sets</a>.</p>
 <pre class="idl">interface <dfn id="cssstylerule">CSSStyleRule</dfn> : <a href="#cssrule">CSSRule</a> {
   attribute DOMString <a href="#dom-cssstylerule-selectortext" title="dom-CSSStyleRule-selectorText">selectorText</a>;
   [SameObject, PutForwards=<a href="#dom-cssstyledeclaration-csstext" title="dom-CSSStyleDeclaration-cssText">cssText</a>] readonly attribute <a href="#cssstyledeclaration">CSSStyleDeclaration</a> <!--
   --><a href="#dom-cssstylerule-style" title="dom-CSSStyleRule-style">style</a>;
 };</pre>
 <p>The <dfn id="dom-cssstylerule-selectortext" title="dom-CSSStyleRule-selectorText"><code>selectorText</code></dfn> attribute, on getting, must return the result of
 <a href="#serialize-a-group-of-selectors" title="serialize a group of selectors">serializing</a> the associated <a href="#group-of-selectors">group of selectors</a>.</p>
 <p>On setting the <code title="dom-CSSStyleRule-selectorText"><a href="#dom-cssstylerule-selectortext">selectorText</a></code> attribute these steps must be run:</p>
 <ol>
  <li><p>Run the <a href="#parse-a-group-of-selectors">parse a group of selectors</a> algorithm on the given value.</li>
  <li><p>If the algorithm returns a non-null value replace the associated <a href="#group-of-selectors">group of selectors</a> with the returned value.</li>
  <li><p>Otherwise, if the algorithm returns a null value, do nothing.</li>
 </ol>
 <p>The <dfn id="dom-cssstylerule-style" title="dom-CSSStyleRule-style"><code>style</code></dfn> attribute must return a <code><a href="#cssstyledeclaration">CSSStyleDeclaration</a></code> object for the style rule, with the
 <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> being the declared declarations in the rule, in
 <a href="#concept-declarations-specified-order" title="concept-declarations-specified-order">specified order</a>.</p>
 <p>The <dfn id="concept-declarations-specified-order" title="concept-declarations-specified-order">specified order</dfn> for declarations is the same as specified, but with shorthand properties
 expanded into their longhand properties, in canonical order. If a property is specified more than once (after shorthand expansion), only the
 one with greatest cascading order must be represented, at the same relative position as it was specified. <a href="#refsCSSCASCADE">[CSSCASCADE]</a>
 <h4 id="the-csscharsetrule-interface"><span class="secno">6.4.4 </span>The <code title="">CSSCharsetRule</code> Interface</h4>
 <p>The <code><a href="#csscharsetrule">CSSCharsetRule</a></code> interface represents an <code title="">@charset</code> at-rule.</p>
 <pre class="idl">interface <dfn id="csscharsetrule">CSSCharsetRule</dfn> : <a href="#cssrule">CSSRule</a> {
   attribute DOMString <a href="#dom-csscharsetrule-encoding" title="dom-CSSCharsetRule-encoding">encoding</a>;
 };</pre>
 <p>The <dfn id="dom-csscharsetrule-encoding" title="dom-CSSCharsetRule-encoding"><code>encoding</code></dfn> attribute must return the encoding information specified by the
 <code title="">@charset</code> at-rule.</p>
 <h4 id="the-cssimportrule-interface"><span class="secno">6.4.5 </span>The <code title="">CSSImportRule</code> Interface</h4>
 <p>The <code><a href="#cssimportrule">CSSImportRule</a></code> interface represents an <code title="">@import</code> at-rule.</p>
 <pre class="idl">interface <dfn id="cssimportrule">CSSImportRule</dfn> : <a href="#cssrule">CSSRule</a> {
   readonly attribute DOMString <a href="#dom-cssimportrule-href" title="dom-CSSImportRule-href">href</a>;
   [SameObject, PutForwards=<a href="#dom-medialist-mediatext" title="dom-MediaList-mediaText">mediaText</a>] readonly attribute <a href="#medialist">MediaList</a> <!--
   --><a href="#dom-cssimportrule-media" title="dom-CSSImportRule-media">media</a>;
   [SameObject] readonly attribute <a href="#cssstylesheet">CSSStyleSheet</a> <a href="#dom-cssimportrule-stylesheet" title="dom-CSSImportRule-styleSheet">styleSheet</a>;
 };</pre>
 <p>The <dfn id="dom-cssimportrule-href" title="dom-CSSImportRule-href"><code>href</code></dfn> attribute must return the <a class="external" data-anolis-spec="url" href="http://url.spec.whatwg.org/#concept-url" title="concept-url">URL</a> specified by
 the <code title="">@import</code> at-rule.</p>
 <p class="note">To get the resolved <a class="external" data-anolis-spec="url" href="http://url.spec.whatwg.org/#concept-url" title="concept-url">URL</a> use the <code title="dom-StyleSheet-href"><a href="#dom-stylesheet-href">href</a></code>
 attribute of the associated <a href="#css-style-sheet">CSS style sheet</a>.</p>
 <p>The <dfn id="dom-cssimportrule-media" title="dom-CSSImportRule-media"><code>media</code></dfn> attribute must return the value of the <code title="dom-StyleSheet-media"><a href="#dom-stylesheet-media">media</a></code>
 attribute of the associated <a href="#css-style-sheet">CSS style sheet</a>.</p>
 <p>The <dfn id="dom-cssimportrule-stylesheet" title="dom-CSSImportRule-styleSheet"><code>styleSheet</code></dfn> attribute must return the associated <a href="#css-style-sheet">CSS style sheet</a>.</p>
 <p class="note">If loading of the style sheet fails its <a href="#concept-css-style-sheet-css-rules" title="concept-css-style-sheet-css-rules">CSS rules</a>
 list is simply empty, i.e., an <code title="">@import</code> at-rule always has an associated <a href="#css-style-sheet">CSS style sheet</a>.</p>
 <h4 id="the-cssgroupingrule-interface"><span class="secno">6.4.6 </span>The <code title="">CSSGroupingRule</code> Interface</h4>
 <p>The <code><a href="#cssgroupingrule">CSSGroupingRule</a></code> interface represents an at-rule that contains other rules nested inside itself.
 <pre class="idl">interface <dfn id="cssgroupingrule">CSSGroupingRule</dfn> : <a href="#cssrule">CSSRule</a> {
   [SameObject] readonly attribute <a href="#cssrulelist">CSSRuleList</a> <a href="#dom-cssgroupingrule-cssrules" title="dom-CSSGroupingRule-cssRules">cssRules</a>;
   unsigned long <a href="#dom-cssgroupingrule-insertrule" title="dom-CSSGroupingRule-insertRule">insertRule</a>(DOMString rule, unsigned long index);
   void <a href="#dom-cssgroupingrule-deleterule" title="dom-CSSGroupingRule-deleteRule">deleteRule</a>(unsigned long index);
 };</pre>
 <p>The <dfn id="dom-cssgroupingrule-cssrules" title="dom-CSSGroupingRule-cssRules"><code>cssRules</code></dfn> attribute must return a <code><a href="#cssrulelist">CSSRuleList</a></code> object for the
 <a href="#concept-css-rule-child-css-rules" title="concept-css-rule-child-css-rules">child CSS rules</a>.</p>
 <p>The <dfn id="dom-cssgroupingrule-insertrule" title="dom-CSSGroupingRule-insertRule"><code>insertRule(<var>rule</var>, <var>index</var>)</code></dfn> method must return the result of
 invoking <a href="#insert-a-css-rule">insert a CSS rule</a> <var>rule</var> into the <a href="#concept-css-rule-child-css-rules" title="concept-css-rule-child-css-rules">child CSS rules</a> at
 <var>index</var>.</p>
 <p>The <dfn id="dom-cssgroupingrule-deleterule" title="dom-CSSGroupingRule-deleteRule"><code>deleteRule(<var>index</var>)</code></dfn> method must <a href="#remove-a-css-rule">remove a CSS rule</a> from the
 <a href="#concept-css-rule-child-css-rules" title="concept-css-rule-child-css-rules">child CSS rules</a> at <var>index</var>.</p>
 <h4 id="the-cssmediarule-interface"><span class="secno">6.4.7 </span>The <code title="">CSSMediaRule</code> Interface</h4>
 <p>The <code><a href="#cssmediarule">CSSMediaRule</a></code> interface represents an <code title="">@media</code> at-rule.</p>
 <pre class="idl">interface <dfn id="cssmediarule">CSSMediaRule</dfn> : <a href="#cssgroupingrule">CSSGroupingRule</a> {
   [SameObject, PutForwards=<a href="#dom-medialist-mediatext" title="dom-MediaList-mediaText">mediaText</a>] readonly attribute <a href="#medialist">MediaList</a> <!--
   --><a href="#dom-cssmediarule-media" title="dom-CSSMediaRule-media">media</a>;
 };</pre>
 <p>The <dfn id="dom-cssmediarule-media" title="dom-CSSMediaRule-media"><code>media</code></dfn> attribute must return a <code><a href="#medialist">MediaList</a></code> object for the list of media queries specified
 with the <code title="">@media</code> at-rule.</p>
 <h4 id="the-csspagerule-interface"><span class="secno">6.4.8 </span>The <code title="">CSSPageRule</code> Interface</h4>
 <p>The <code><a href="#csspagerule">CSSPageRule</a></code> interface represents an <code title="">@page</code> at-rule.</p>
 <p class="issue">Need to define the rules for
 <dfn id="parse-a-list-of-css-page-selectors">parse a list of CSS page selectors</dfn> and
 <dfn id="serialize-a-list-of-css-page-selectors">serialize a list of CSS page selectors</dfn>.</p>
 <pre class="idl">interface <dfn id="csspagerule">CSSPageRule</dfn> : <a href="#cssrule">CSSRule</a> {
   attribute DOMString <a href="#dom-csspagerule-selectortext" title="dom-CSSPageRule-selectorText">selectorText</a>;
   [SameObject, PutForwards=<a href="#dom-cssstyledeclaration-csstext" title="dom-CSSStyleDeclaration-cssText">cssText</a>] readonly attribute <a href="#cssstyledeclaration">CSSStyleDeclaration</a> <!--
   --><a href="#dom-csspagerule-style" title="dom-CSSPageRule-style">style</a>;
 };</pre>
 <p>The <dfn id="dom-csspagerule-selectortext" title="dom-CSSPageRule-selectorText"><code>selectorText</code></dfn> attribute, on getting, must return the result of
 <a href="#serialize-a-list-of-css-page-selectors" title="serialize a list of CSS page selectors">serializing</a> the associated <a href="#list-of-css-page-selectors">list of CSS page selectors</a>.</p>
 <p>On setting the <code title="dom-CSSPageRule-selectorText"><a href="#dom-csspagerule-selectortext">selectorText</a></code> attribute  these steps must be run:</p>
 <ol>
  <li><p>Run the <a href="#parse-a-list-of-css-page-selectors">parse a list of CSS page selectors</a> algorithm on the given value.</li>
  <li><p>If the algorithm returns a non-null value replace the associated <a href="#list-of-css-page-selectors">list of CSS page selectors</a> with the returned value.</li>
  <li><p>Otherwise, if the algorithm returns a null value, do nothing.</li>
 </ol>
 <p>The <dfn id="dom-csspagerule-style" title="dom-CSSPageRule-style"><code>style</code></dfn> attribute must return a <code><a href="#cssstyledeclaration">CSSStyleDeclaration</a></code> for the <code title="">@page</code>
 at-rule.</p>
 <h4 id="the-cssnamespacerule-interface"><span class="secno">6.4.9 </span>The <code title="">CSSNamespaceRule</code> Interface</h4>
 <p>The <code><a href="#cssnamespacerule">CSSNamespaceRule</a></code> interface represents an <code title="">@namespace</code> at-rule.</p>
 <pre class="idl">interface <dfn id="cssnamespacerule">CSSNamespaceRule</dfn> : <a href="#cssrule">CSSRule</a> {
   [TreatNullAs=EmptyString] attribute DOMString <a href="#dom-cssnamespacerule-namespaceuri" title="dom-CSSNamespaceRule-namespaceURI">namespaceURI</a>;
   [TreatNullAs=EmptyString] attribute DOMString <a href="#dom-cssnamespacerule-prefix" title="dom-CSSNamespaceRule-prefix">prefix</a>;
 };</pre>
 <p>The <dfn id="dom-cssnamespacerule-namespaceuri" title="dom-CSSNamespaceRule-namespaceURI"><code>namespaceURI</code></dfn> attribute, on getting, must return the namespace of the
 <code title="">@namespace</code> at-rule.
 <p>On setting, the <code title="dom-CSSNamespaceRule-namespaceURI"><a href="#dom-cssnamespacerule-namespaceuri">namespaceURI</a></code> attribute must run the following steps:</p>
 <ol>
  <li><p>Let <var>parent</var> be the <a href="#concept-css-rule-parent-css-style-sheet" title="concept-css-rule-parent-css-style-sheet">parent CSS style sheet</a>.
  <li><p>Let <var>list</var> be the <a href="#concept-css-style-sheet-css-rules" title="concept-css-style-sheet-css-rules">CSS rules</a> of <var>parent</var>, or
  null if <var>parent</var> is null.
  <li><p>If <var>list</var> is not null and contains anything other than
  <code title="">@charset</code> at-rules, <code title="">@import</code> at-rules, and <code title="">@namespace</code> at-rules,
  <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a> an <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#invalidstateerror">InvalidStateError</a></code> exception.
  <li><p>Set the namespace of the <code title="">@namespace</code> at-rule to the given value.
 </ol>
 <p>The <dfn id="dom-cssnamespacerule-prefix" title="dom-CSSNamespaceRule-prefix"><code>prefix</code></dfn> attribute must return the prefix of the <code title="">@namespace</code> at-rule or the
 empty string if there is no prefix.
 <p>On setting, the <code title="dom-CSSNamespaceRule-prefix"><a href="#dom-cssnamespacerule-prefix">prefix</a></code> attribute must run the following steps:</p>
 <ol>
  <li><p>Let <var>parent</var> be the <a href="#concept-css-rule-parent-css-style-sheet" title="concept-css-rule-parent-css-style-sheet">parent CSS style sheet</a>.
  <li><p>Let <var>list</var> be the <a href="#concept-css-style-sheet-css-rules" title="concept-css-style-sheet-css-rules">CSS rules</a> of <var>parent</var>, or
  null if <var>parent</var> is null.
  <li><p>If <var>list</var> is not null and contains anything other than
  <code title="">@charset</code> at-rules, <code title="">@import</code> at-rules, and <code title="">@namespace</code> at-rules,
  <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a> an <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#invalidstateerror">InvalidStateError</a></code> exception.
  <li><p>Set the prefix of the <code title="">@namespace</code> at-rule to the given value.
 </ol>
 <h3 id="css-declaration-blocks"><span class="secno">6.5 </span>CSS Declaration Blocks</h3>
 <p>A <dfn id="css-declaration-block">CSS declaration block</dfn> is an ordered collection of CSS
 properties with their associated values, also named CSS declarations. In
 the DOM a <a href="#css-declaration-block">CSS declaration block</a> is a
 <code><a href="#cssstyledeclaration">CSSStyleDeclaration</a></code> object. A
 <a href="#css-declaration-block">CSS declaration block</a> has two associated properties:</p>
 <dl>
  <dt><dfn id="concept-css-declaration-block-readonly-flag" title="concept-css-declaration-block-readonly-flag">readonly flag</dfn></dt>
  <dd><p>Clear if the object can be manipulated. Set if it can not be
  manipulated. Unless otherwise stated it is clear.</dd>
  <dt><dfn id="concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</dfn></dt>
  <dd><p>The CSS declarations associated with the object.</dd>
 </dl>
 <p>To <dfn id="parse-a-css-declaration-block">parse a CSS declaration block</dfn> from a string <var>string</var>, invoke <a class="external" data-anolis-spec="csssyntax" href="http://dev.w3.org/csswg/css-syntax/#parse-a-list-of-declarations0">parse a list of declarations</a> with
 <var>string</var> and return the value returned.</p>
 <p>To <dfn id="serialize-a-css-declaration">serialize a CSS declaration</dfn> with property name <var>property</var>, value <var>value</var> and optionally an <i>important</i> flag set, follow
 these steps:
 <ol>
  <li><p>Let <var>s</var> be the empty string.
  <li><p>Append <var>property</var> to <var>s</var>.
  <li><p>Append "<code title="">: </code>" (U+003A U+0020) to <var>s</var>.
  <li><p>Append <var>value</var> to <var>s</var>.
  <li><p>If the <i>important</i> flag is set, append "<code title=""> !important</code>" (U+0020 U+0021 U+0069 U+006D U+0070 U+006F U+0072 U+0074 U+0061 U+006E
  U+0074) to <var>s</var>.
  <li><p>Append "<code title="">;</code>" (U+003B) to <var>s</var>.
  <li><p>Return <var>s</var>.
 </ol>
 <p>To <dfn id="serialize-a-css-declaration-block">serialize a CSS declaration block</dfn> <var>declaration block</var> means to run the steps below:</p>
 <ol>
  <li><p>Let <var>list</var> be an empty array.
  <li><p>Let <var>already serialized</var> be an empty array.
  <li><p><i>Declaration loop</i>: For each declaration <var>declaration</var> in <var>declaration block</var>'s
  <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a>, follow these substeps:
   <ol>
    <li><p>Let <var>property</var> be <var>declaration</var>'s property name.
    <li><p>If <var>property</var> is in <var>already serialized</var>, continue with the steps labeled <i>declaration loop</i>.
    <li><p>If <var>property</var> maps to one or more shorthand properties, let <var>shorthands</var> be an array of those shorthand properties, in
    <a href="#concept-shorthands-preferred-order" title="concept-shorthands-preferred-order">preferred order</a>, and follow these substeps:
     <ol>
      <li><p>Let <var>longhands</var> an array consisting of all declarations in <var>declaration block</var>'s
      <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> that that are not in <var>already serialized</var> and have a property name that
      maps to one of the shorthand properties in <var>shorthands</var>.
      <li><p><i>Shorthand loop</i>: For each <var>shorthand</var> in <var>shorthands</var>, follow these substeps:
       <ol>
        <li><p>If all properties that map to <var>shorthand</var> are not present in <var>longhands</var>, continue with the steps labeled <i>shorthand loop</i>.
        <li><p>Let <var>current longhands</var> be an empty array.
        <li><p>Append all declarations in <var>longhands</var> have a property name that maps to <var>shorthand</var> to <var>current longhands</var>.
        <li><p>If there is one or more declarations in <var>current longhands</var> have their <i>important</i> set and one or more with it unset, continue with
        the steps labeled <i>shorthand loop</i>.
        <li><p>Let <var>value</var> be the result of invoking <a href="#serialize-a-css-value">serialize a CSS value</a> of <var>current longhands</var>.
        <li><p>If <var>value</var> is the empty string, continue with the steps labeled <i>shorthand loop</i>.
        <li><p>Let <var>serialized declaration</var> be the result of invoking <a href="#serialize-a-css-declaration">serialize a CSS declaration</a> with property name
        <var>shorthand</var>, value <var>value</var>, and the <i>important</i> flag set if the declarations in <var>current longhands</var> have their
        <i>important</i> flag set.
        <li><p>Append <var>serialized declaration</var> to <var>list</var>.
        <li><p>Append the property names of all items of <var>current longhands</var> to <var>already serialized</var>.
        <li><p>Remove the items present in <var>current longhands</var> from <var>longhands</var>.
       </ol>
     </ol>
    <li><p>If <var>property</var> is in <var>already serialized</var>, continue with the steps labeled <i>declaration loop</i>.
    <li><p>Let <var>value</var> be the result of invoking <a href="#serialize-a-css-value">serialize a CSS value</a> of <var>declaration</var>.
    <li><p>Let <var>serialized declaration</var> be the result of invoking <a href="#serialize-a-css-declaration">serialize a CSS declaration</a> with property name <var>property</var>, value
    <var>value</var>, and the <i>important</i> flag set if <var>declaration</var> has its <i>important</i> flag set.
    <li><p>Append <var>serialized declaration</var> to <var>list</var>.
    <li><p>Append <var>property</var> to <var>already serialized</var>.
   </ol>
  <li><p>Return <var>list</var> joined with "<code title=""> </code>" (U+0020).
 </ol>
 <p class="note">The serialization of an empty CSS declaration block is the empty string.</p>
 <p class="note">The serialization of a non-empty CSS declaration block does not include any surrounding whitespace, i.e., no whitepsace appears
 before the first property name and no whitespace appears after the final semicolon delimiter that follows the last property value.</p>
 <p>The <dfn id="concept-shorthands-preferred-order" title="concept-shorthands-preferred-order">preferred order</dfn> of a list of shorthand properties <var>shorthands</var> is as follows:
 <ol>
  <li><p>Order <var>shorthands</var> lexicographically.
  <li><p>Move all items in <var>shorthands</var> that begin with "<code title="">-</code>" (U+002D) last in the list, retaining their relative order.
  <li><p>Move all items in <var>shorthands</var> that begin with "<code title="">-</code>" (U+002D) but do not begin with "<code title="">-webkit-</code>" last in the
  list, retaining their relative order.
  <li><p>Order <var>shorthands</var> by the number of longhand properties that map to it, with the greatest number first.
 </ol>
 <h4 id="the-cssstyledeclaration-interface"><span class="secno">6.5.1 </span>The <code title="">CSSStyleDeclaration</code> Interface</h4>
 <!--
 //
 // All members defined since DOM-2 Style. The only differences are:
 //
 //   1. removal of commented raises(DOMException) on setting cssText
 //   2. removal of raises(DOMException) on {set,remove}Property
 //   3. removal of getPropertyCSSValue() method
 //
 -->
 <p>The <code><a href="#cssstyledeclaration">CSSStyleDeclaration</a></code> interface represents a <a href="#css-declaration-block">CSS declaration block</a>, including its underlying state, where this
 underlying state depends upon the source of the <code><a href="#cssstyledeclaration">CSSStyleDeclaration</a></code> instance.</p>
 <pre class="idl">interface <dfn id="cssstyledeclaration">CSSStyleDeclaration</dfn> {
   attribute DOMString <a href="#dom-cssstyledeclaration-csstext" title="dom-CSSStyleDeclaration-cssText">cssText</a>;
   readonly attribute unsigned long <a href="#dom-cssstyledeclaration-length" title="dom-CSSStyleDeclaration-length">length</a>;
   getter DOMString <a href="#dom-cssstyledeclaration-item" title="dom-CSSStyleDeclaration-item">item</a>(unsigned long index);
   DOMString <a href="#dom-cssstyledeclaration-getpropertyvalue" title="dom-CSSStyleDeclaration-getPropertyValue">getPropertyValue</a>(DOMString property);
   DOMString <a href="#dom-cssstyledeclaration-getpropertypriority" title="dom-CSSStyleDeclaration-getPropertyPriority">getPropertyPriority</a>(DOMString property);
   void <a href="#dom-cssstyledeclaration-setproperty" title="dom-CSSStyleDeclaration-setProperty">setProperty</a>(DOMString property, [TreatNullAs=EmptyString] DOMString value, <!--
   -->[TreatNullAs=EmptyString] optional DOMString priority);
   DOMString <a href="#dom-cssstyledeclaration-removeproperty" title="dom-CSSStyleDeclaration-removeProperty">removeProperty</a>(DOMString property);
   readonly attribute <a href="#cssrule">CSSRule</a>? <a href="#dom-cssstyledeclaration-length" title="dom-CSSStyleDeclaration-length">parentRule</a>;
            attribute DOMString <a href="#dom-cssstyledeclaration-cssfloat" title="dom-CSSStyleDeclaration-cssFloat">cssFloat</a>;<!-- setProperty's value arg has [TreatNullAs=EmptyString] -->
 };</pre>
 <p>The object's <a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-supported-property-indices">supported property indices</a> are the numbers in the range zero to one less than the number of declarations in
 the <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a>. If there are no such declarations, then there are no
 <a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-supported-property-indices">supported property indices</a>.
 <p>The <dfn id="dom-cssstyledeclaration-csstext" title="dom-CSSStyleDeclaration-cssText"><code>cssText</code></dfn> attribute must return the result of
 <a href="#serialize-a-css-declaration-block" title="serialize a CSS declaration block">serializing</a> the <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a>.</p>
 <p>Setting the <code title="dom-CSSStyleDeclaration-cssText"><a href="#dom-cssstyledeclaration-csstext">cssText</a></code> attribute must run these steps:
 <ol>
  <li><p>If the <a href="#concept-css-declaration-block-readonly-flag" title="concept-css-declaration-block-readonly-flag">readonly flag</a> is set, <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a>
  a <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#nomodificationallowederror">NoModificationAllowedError</a></code> exception and terminate these steps.</li>
  <li><p>Empty the <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a>.</li>
  <li><p><a href="#parse-a-css-declaration-block" title="Parse a CSS declaration block">Parse</a> the given value and, if the return value is not the empty list, insert the items in the list
  into the <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a>, in <a href="#concept-declarations-specified-order" title="concept-declarations-specified-order">specified
  order</a>.</li>
 </ol>
 <p>The <dfn id="dom-cssstyledeclaration-length" title="dom-CSSStyleDeclaration-length"><code>length</code></dfn> attribute must return the number of declarations in the
 <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a>.</p>
 <p>The <dfn id="dom-cssstyledeclaration-item" title="dom-CSSStyleDeclaration-item"><code>item(<var>index</var>)</code></dfn> method must return the name of the property at position
 <var>index</var>.</p>
 <p>The <dfn id="dom-cssstyledeclaration-getpropertyvalue" title="dom-CSSStyleDeclaration-getPropertyValue"><code>getPropertyValue(<var>property</var>)</code></dfn> method must run these steps:</p>
 <ol>
  <li><p>Let <var>property</var> be <var>property</var> <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#converted-to-ascii-lowercase">converted to ASCII lowercase</a>.
  <li><p>If <var>property</var> is a shorthand property, then follow these substeps:
   <ol>
    <li><p>Let <var>list</var> be a new empty array.
    <li><p>For each longhand property <var>longhand</var> that <var>property</var> maps to, in canonical order, follow these substeps:
     <ol>
      <li><p>If <var>longhand</var> is a <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a> match for a property of a declaration in the
      <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a>, let <var>declaration</var> be that declaration, or null otherwise.
      <li><p>If <var>declaration</var> is null, return the empty string and terminate these steps.
      <li><p>Append the <var>declaration</var> to <var>list</var>.
     </ol>
    <li><p>Return the <a href="#serialize-a-css-value" title="serialize a CSS value">serialization</a> of <var>list</var> and terminate these steps.
   </ol>
  <li><p>If <var>property</var> is a <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a>
  match for a property of a declaration in the
  <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a>, return the result of invoking
  <a href="#serialize-a-css-value">serialize a CSS value</a> of that declaration and terminate these steps.
  <li><p>Return the empty string.
 </ol>
 <p>The <dfn id="dom-cssstyledeclaration-getpropertypriority" title="dom-CSSStyleDeclaration-getPropertyPriority"><code>getPropertyPriority(<var>property</var>)</code></dfn> method must run these steps:
 <ol>
  <li><p>Let <var>property</var> be <var>property</var> <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#converted-to-ascii-lowercase">converted to ASCII lowercase</a>.
  <li><p>If <var>property</var> is a shorthand property, follow these substeps:
   <ol>
    <li><p>Let <var>list</var> be a new array.
    <li><p>For each longhand property <var>longhand</var> that <var>property</var> maps to, append the result of invoking
    <code title="dom-CSSStyleDeclaration-getPropertyPriority"><a href="#dom-cssstyledeclaration-getpropertypriority">getPropertyPriority()</a></code> with <var>longhand</var> as argument to <var>list</var>.
    <li><p>If all items in <var>list</var> are the string "<code title="">important</code>", return the string "<code title="">important</code>" and terminate these
    steps.
   </ol>
  <li><p>Otherwise, follow these substeps:
   <ol>
    <li><p>If <var>property</var> is a
    <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a> match for a property of a
    declaration in the <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> that has the
    <i>important</i> flag set, return
    the string "<code title="">important</code>".</p>
   </ol>
  <li><p>Return the empty string.
 </ol>
 <div class="example"><p>E.g. for <code title="">background-color:lime !IMPORTANT</code> the return
 value would be "<code title="">important</code>".</div>
 <p>The <dfn id="dom-cssstyledeclaration-setproperty" title="dom-CSSStyleDeclaration-setProperty"><code>setProperty(<var>property</var>, <var>value</var>,
 <var>priority</var>)</code></dfn> method must run these steps:</p>
 <ol>
  <li><p>If the <a href="#concept-css-declaration-block-readonly-flag" title="concept-css-declaration-block-readonly-flag">readonly flag</a> is set, <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a>
  a <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#nomodificationallowederror">NoModificationAllowedError</a></code> exception and terminate these steps.</li>
  <li><p>Let <var>property</var> be <var>property</var> <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#converted-to-ascii-lowercase">converted to ASCII lowercase</a>.
  <li><p>If <var>property</var> is not a <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a> match for a <a href="#supported-css-property">supported CSS property</a>, terminate this
  algorithm.</li>
  <li><p>If <var>value</var> is the empty string, invoke <code title="dom-CSSStyleDeclaration-removeProperty"><a href="#dom-cssstyledeclaration-removeproperty">removeProperty()</a></code>
  with <var>property</var> as argument and terminate this algorithm.</li>
  <li><p>If <var>priority</var> is not specified, let <var>priority action</var> be "leave as is". Otherwise, if <var>priority</var> is the empty string, let
  <var>priority action</var> be "unset important". Otherwise, if <var>priority</var> is an <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a> match for the
  string "<code title="">important</code>", set <var>priority action</var> to "set important". Otherwise, terminate this algorithm.
  <li>
   <p>Let <var>component value list</var> be the result of <a href="#parse-a-css-value" title="parse a CSS value">parsing</a> <var>value</var>.
   <p class="note"><var>value</var> can not include "<code title="">!important</code>".</p>
  </li>
  <li><p>If <var>component value list</var> is null terminate these steps.
  <li><p>If <var>property</var> is a shorthand property, then for each longhand property <var>longhand</var> that <var>property</var> maps to, in canonical
  order, <a href="#set-a-css-property" title="set a CSS property">set the CSS property</a> <var>longhand</var> to the appropriate value(s) from <var>component value list</var>, with
  <i>priority action</i> being <var>priority action</var>, and with the list of declarations being the
  <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a>.
  <li><p>Otherwise, <a href="#set-a-css-property" title="set a CSS property">set the CSS property</a> <var>property</var> to <var>component value list</var>, with
  <i>priority action</i> being <var>priority action</var>, and with the list of declarations being the
  <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a>.
 </ol>
 <p>To <dfn id="set-a-css-property">set a CSS property</dfn> <var>property</var> to a value <var>component value list</var> and with <i>priority action</i> being either "set
 important", "unset important" or "leave as is", in a list of declarations <var>declarations</var>, follow these steps:
 <ol>
  <li><p>If <var>property</var> is a <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a> match for a property of a declaration in
  <var>declarations</var>, let <var>declaration</var> be that declaration.
  <li><p>Otherwise, append a new declaration with the property name <var>property</var> to <var>declarations</var> and let <var>declaration</var> be that
  declaration.
  <li><p>Set <var>declaration</var>'s value to <var>component value list</var>.
  <li><p>If <i>priority action</i> is "set important", set the declaration's <i>important</i> flag.
  <li><p>Otherwise, if <i>priority action</i> is "unset important", unset the declaration's <i>important</i> flag.
 </ol>
 <p>The <dfn id="dom-cssstyledeclaration-removeproperty" title="dom-CSSStyleDeclaration-removeProperty"><code>removeProperty(<var>property</var>)</code></dfn> method must run these steps:</p>
 <ol>
  <li><p>If the <a href="#concept-css-declaration-block-readonly-flag" title="concept-css-declaration-block-readonly-flag">readonly flag</a> is set, <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a>
  a <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#nomodificationallowederror">NoModificationAllowedError</a></code> exception and terminate these steps.</li>
  <li><p>Let <var>property</var> be <var>property</var> <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#converted-to-ascii-lowercase">converted to ASCII lowercase</a>.
  <li><p>Let <var>value</var> be the return value of invoking <code title="dom-CSSStyleDeclaration-getPropertyValue"><a href="#dom-cssstyledeclaration-getpropertyvalue">getPropertyValue()</a></code>
  with <var>property</var> as argument.
  <li><p>If <var>property</var> is a shorthand property, for each longhand property <var>longhand</var> that <var>property</var> maps to, invoke
  <code title="dom-CSSStyleDeclaration-removeProperty"><a href="#dom-cssstyledeclaration-removeproperty">removeProperty()</a></code> with <var>longhand</var> as argument.
  <li><p>Otherwise, if <var>property</var> is a <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a> match for a property of a declaration in the
  <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a>, remove the declaration.
  <li><p>Return <var>value</var>.
 </ol>
 <p>The <dfn id="dom-cssstyledeclaration-parentrule" title="dom-CSSStyleDeclaration-parentRule"><code>parentRule</code></dfn> attribute must return the <code><a href="#cssrule">CSSrule</a></code> object the
 <code><a href="#cssstyledeclaration">CSSStyleDeclaration</a></code> is object is associated with or null if it is not associated with a <code><a href="#cssrule">CSSrule</a></code> object.</p>
 <p>The <dfn id="dom-cssstyledeclaration-cssfloat" title="dom-CSSStyleDeclaration-cssFloat"><code>cssFloat</code></dfn>
 attribute, on getting, must return the result of invoking
 <code title="dom-CSSStyleDeclaration-getPropertyValue"><a href="#dom-cssstyledeclaration-getpropertyvalue">getPropertyValue()</a></code> with
 <code title="">float</code> as argument. On setting, the attribute must invoke
 <code title="dom-CSSStyleDeclaration-setProperty"><a href="#dom-cssstyledeclaration-setproperty">setProperty()</a></code> with
 <code title="">float</code> as first argument, as second argument the given value, and no third argument.
 Any exceptions thrown must be re-thrown.
 <p>For each CSS property <var>property</var> that is a <a href="#supported-css-property">supported CSS property</a>,
 the following partial interface applies where <var>camel-cased attribute</var>
 is obtained by running the <a href="#css-property-to-idl-attribute">CSS property to IDL attribute</a> algorithm for
 <var>property</var>.</p>
 <pre class="idl extract">partial interface <a href="#cssstyledeclaration">CSSStyleDeclaration</a> {
            attribute DOMString _<a href="#dom-cssstyledeclaration-camel-cased-attribute" title="dom-CSSStyleDeclaration-camel-cased-attribute"><var>camel-cased attribute</var></a>;
 };</pre>
 <p>The <dfn id="dom-cssstyledeclaration-camel-cased-attribute" title="dom-CSSStyleDeclaration-camel-cased-attribute"><code><var>camel-cased attribute</var></code></dfn> attribute, on getting, must return the
 result of invoking <code title="dom-CSSStyleDeclaration-getPropertyValue"><a href="#dom-cssstyledeclaration-getpropertyvalue">getPropertyValue()</a></code> with the
 argument being the result of running the <a href="#idl-attribute-to-css-property">IDL attribute to CSS property</a>
 algorithm for <var>camel-cased attribute</var>.</p>
 <p>Setting the <code title="dom-CSSStyleDeclaration-camel-cased-attribute"><a href="#dom-cssstyledeclaration-camel-cased-attribute"><var>camel-cased attribute</var></a></code> attribute must invoke
 <code title="dom-CSSStyleDeclaration-setProperty"><a href="#dom-cssstyledeclaration-setproperty">setProperty()</a></code> with the
 first argument being the result of running the <a href="#idl-attribute-to-css-property">IDL attribute to CSS property</a>
 algorithm for <var>camel-cased attribute</var>, as second argument the given value, and no third argument. Any
 exceptions thrown must be re-thrown.</p>
 <div class="example"><p>For example, for the 'font-size' property there would be a <code title="">fontSize</code> IDL attribute.</div>
 <!-- [GA] Remove spec text for so called "dashed-attribute" until consensus obtains on whether to include in spec.
 <p>For each CSS property <var>property</var> that is a <span>supported CSS property</span>, except for properties that have no "<code title>-</code>" (U+002D)
 in the property name, user agents must act as if there was a WebIDL <span data-anolis-spec=webidl>regular attribute</span> member as part of the
 <code>CSSStyleDeclaration</code> interface with the type being <code title>DOMString</code> and the <span data-anolis-spec=webidl>identifier</span> being
 <var>property</var>, and let <var>dashed attribute</var> be <var>property</var>.
 <p>The <dfn title=dom-CSSStyleDeclaration-dashed-attribute><code><var>dashed attribute</var></code></dfn> attribute, on getting, must return the
 result of invoking <code title=dom-CSSStyleDeclaration-getPropertyValue>getPropertyValue()</code> with the
 argument being <var>dashed attribute</var>.</p>
 <p>Setting the <code title=dom-CSSStyleDeclaration-dashed-attribute><var>dashed attribute</var></code> attribute must invoke
 <code title=dom-CSSStyleDeclaration-setProperty>setProperty()</code> with the
 first argument being <var>dashed attribute</var>, as second argument the given value, and no third argument. Any
 exceptions thrown must be re-thrown.</p>
 <div class=example>
  <p>For example, for the 'font-size' property there would be a <code title>font-size</code> IDL attribute. In JavaScript, the property can be accessed as
  follows, assuming <var>element</var> is an <span data-anolis-spec=html title="HTML elements">HTML element</span>:
  <pre><var>element</var>.style['font-size'];</pre>
 </div>
 <p class=note>WebIDL does not allow dashes in identifiers in its syntax.
 <p class=issue>The <code title=dom-CSSStyleDeclaration-dashed-attribute><var>dashed attribute</var></code> attributes will be removed from the specification
 if implementations remove support. User agents that currently support them are urged to experiment with removing support.
 -->
 <p>The <dfn id="css-property-to-idl-attribute">CSS property to IDL attribute</dfn> algorithm for <var>property</var> is as
 follows:</p>
 <ol>
  <li><p>Let <var>output</var> be the empty string.
  <li><p>Let <var>uppercase next</var> be unset.
  <li><p>For each character <var>c</var> in <var>property</var>:
   <ol>
    <li><p>If <var>c</var> is "<code title="">-</code>" (U+002D), let <var>uppercase next</var> be set.
    <li><p>Otherwise, if <var>uppercase next</var> is set, let <var>uppercase next</var> be unset and append <var>c</var>
    <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#converted-to-ascii-uppercase">converted to ASCII uppercase</a> to <var>output</var>.
    <li><p>Otherwise, append <var>c</var> to <var>output</var>.
   </ol>
  <li><p>Return <var>output</var>.
 </ol>
 <p>The <dfn id="idl-attribute-to-css-property">IDL attribute to CSS property</dfn> algorithm for <var>attribute</var> is as
 follows:</p>
 <ol>
  <li><p>Let <var>output</var> be the empty string.
  <li><p>For each character <var>c</var> in <var>attribute</var>:
   <ol>
    <li><p>If <var>c</var> is in the range U+0041 to U+005A (ASCII uppercase), append "<code title="">-</code>" (U+002D) followed by <var>c</var>
    <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#converted-to-ascii-lowercase">converted to ASCII lowercase</a> to <var>output</var>.
    <li><p>Otherwise, append <var>c</var> to <var>output</var>.
   </ol>
  <li><p>Return <var>output</var>.
 </ol>
 <h3 id="css-values"><span class="secno">6.6 </span>CSS Values</h3>
 <h4 id="parsing-css-values"><span class="secno">6.6.1 </span>Parsing CSS Values</h4>
 <p>To <dfn id="parse-a-css-value">parse a CSS value</dfn> <var>value</var> for a given
 <var>property</var> means to follow these steps:
 <ol>
  <li><p>Let <var>list</var> be the value returned by invoking <a class="external" data-anolis-spec="csssyntax" href="http://dev.w3.org/csswg/css-syntax/#parse-a-list-of-component-values0">parse a list of component values</a> from <var>value</var>.
  <li><p>Match <var>list</var> against the grammar for the property <var>property</var> in the CSS specification.
  <li><p>If the above step failed, return null.
  <li><p>Return <var>list</var>.
 </ol>
 <p class="note">"<code title="">!important</code>" declarations are not
 part of the property value space and will therefore cause
 <a href="#parse-a-css-value">parse a CSS value</a> to return null.</p>
 <h4 id="serializing-css-values"><span class="secno">6.6.2 </span>Serializing CSS Values</h4>
 <!-- based on http://damowmow.com/playground/canon.txt -->
 <p>To <dfn id="serialize-a-css-value">serialize a CSS value</dfn> of a declaration <var>declaration</var> or a list of longhand declarations <var>list</var>, follow
 these rules:</p>
 <ol>
  <li><p>If this algorithm is invoked with a list <var>list</var>, follow these substeps:
   <ol>
    <li><p>Let <var>shorthand</var> be the shorthand property that exactly maps to all the longhand properties in <var>list</var>. If there are multiple such
    shorthand properties, use the first in <a href="#concept-shorthands-preferred-order" title="concept-shorthands-preferred-order">preferred order</a>.
    <li><p>If <var>shorthand</var> cannot represent the values of <var>list</var> in its grammar, return the empty string and terminate these steps.
    <li><p>Let <var>trimmed list</var> be a new empty array.
    <li><p>For each declaration <var>declaration</var> in <var>list</var>, if <var>declaration</var>'s value is not the initial value, or if
    <var>declaration</var> is a required component of the <var>shorthand</var> property, append <var>declaration</var> to <var>trimmed list</var>.
    <li><p>If <var>trimmed list</var> is empty, append the value of the first item in <var>list</var> to <var>trimmed list</var>.
    <li><p>Let <var>values</var> be a new empty array.
    <li><p>For each declaration <var>declaration</var> in <var>trimmed list</var>, invoke <a href="#serialize-a-css-value">serialize a CSS value</a> of <var>declaration</var>, and
    append the result to <var>values</var>.
    <li><p>Return the result of joining <var>values</var> as appropriate according to the grammar of <var>shorthand</var> and terminate these steps.
   </ol>
  <li><p>Let <var>values</var> be a new empty array.
  <li><p>Append the result of invoking <a href="#serialize-a-css-component-value">serialize a CSS component value</a> of <var>declaration</var>'s value to <var>values</var>.
  <li><p>If the grammar of the property of <var>declaration</var> is defined to be whitespace-separated, return the result of invoking <a href="#serialize-a-whitespace-separated-list">serialize a
  whitespace-separated list</a> of <var>values</var> and terminate these steps.
  <li><p>If the grammar of the property of <var>declaration</var> is defined to be comma-separated, return the result of invoking <a href="#serialize-a-comma-separated-list">serialize a
  comma-separated list</a> of <var>values</var>.
 </ol>
 <p>To
 <dfn id="serialize-a-css-component-value">serialize a CSS component value</dfn>
 depends on the component, as follows:</p>
 <dl class="switch">
  <dt>keyword</dt>
  <dd><p>The keyword
  <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#converted-to-ascii-lowercase">converted to ASCII lowercase</a>.</dd>
  <dt>&lt;angle&gt;</dt>
  <dd><p>The number of degrees serialized as per &lt;number&gt; followed by
  the literal string "<code title="">deg</code>".</dd>
  <dt>&lt;color&gt;</dt>
  <dd>
  <p>If &lt;color&gt; is a component of a resolved or computed value, then
  return the color using the <code title="">rgb()</code> or <code title="">rgba()</code> functional
  notation as follows:</p>
  <ol>
  <li>If the alpha component of the color is equal to one, then return the serialization of the
  <code title="">rgb()</code> functional equivalent of the opaque color.</li>
  <li>If the alpha component of the color is not equal to one, then return the serialization of the
  <code title="">rgba()</code> functional equivalent of the non-opaque color.</li>
  </ol>
  <p>The serialization of the <code title="">rgb()</code> functional equivalent is the concatenation of the following:</p>
  <ol>
  <li>The string "<code title="">rgb(</code>".</li>
  <li>The shortest base-ten integer serialization of the color's red component.</li>
  <li>The string "<code title="">, </code>".</li>
  <li>The shortest base-ten serialization of the color's green component.</li>
  <li>The string "<code title="">, </code>".</li>
  <li>The shortest base-ten serialization of the color's blue component.</li>
  <li>The string "<code title="">)</code>".</li>
  </ol>
  <p>The serialization of the <code title="">rgba()</code> functional equivalent is the concatenation of the following:</p>
  <ol>
  <li>The string "<code title="">rgba(</code>".</li>
  <li>The shortest base-ten serialization of the color's red component.</li>
  <li>The string "<code title="">, </code>".</li>
  <li>The shortest base-ten serialization of the color's green component.</li>
  <li>The string "<code title="">, </code>".</li>
  <li>The shortest base-ten serialization of the color's blue component.</li>
  <li>The string "<code title="">, </code>".</li>
  <li>The shortest serialization of the &lt;number&gt; that denotes the color's alpha component.</li>
  <li>The string "<code title="">)</code>".</li>
  </ol>
  <p>In the above rules, the string "<code title="">, </code>" denotes a COMMA (U+002C) followed by a single SPACE (U+0020).</p>
  <p>If &lt;color&gt; is a component of a specified value, then
  return the color as follows:</p>
  <ol>
  <li>If the color was explicitly specified by the author, then return the original, author specified color value.</li>
  <li>Otherwise, return the value that would be returned if the color were a component of a computed value.</li>
  </ol>
  <p class="issue">Should author specified values be normalized for case? Or should original case be preserved?</p>
  </dd>
  <!--
    <dt>It is a system color</dt>
    <dd>See below (you use the representation given in the specification that
    defines the keyword).</dd>
    <dt>Alpha component is equal to 1.0</dt>
    <dd>The color is an uppercase six-digit hexadecimal value, prefixed with a
    <code title>#</code> 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).</dd>
    <dt>Alpha component is less than 1.0</dt>
    <dd>The color is in the CSS <code title>rgba()</code> functional-notation format:
    the literal string <code title>rgba</code> (U+0072 U+0067 U+0062 U+0061) followed
    by a U+0028 LEFT PARENTHESIS, a <span>color component integer</span>
    representing the red component, a <span>color component separator</span>, a
    <span>color component integer</span> for the green component, a <span>color
    component separator</span>, a <span>color component integer</span> for the
    blue component, another <span>color component separator</span> 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.</dd>
    <dt>The keyword <code title>transparent</code> is used</dt>
    <dd>The color is <code title>rgba(0, 0, 0, 0)</code>.</dd>
  -->
  <dt>&lt;counter&gt;</dt>
  <dd>
   <p>The concatenation of:</p>
   <ol>
    <li><p>If &lt;counter&gt; has three CSS component values the string
    "<code title="">counters(</code>".</li>
    <li><p>If &lt;counter&gt; has two CSS component values the string
    "<code title="">counter(</code>".</li>
    <li><p>The result of
    <a href="#serialize-a-comma-separated-list" title="serialize a comma-separated list">serializing</a> the
    <a href="#serialize-a-css-component-value" title="serialize a CSS component value">serialized</a>
    CSS component values belonging to &lt;counter&gt; as list while omitting
    the last CSS component value if it is 'decimal'.</li>
    <li><p>"<code title="">)</code>" (U+0029).</li>
   </ol>
  </dd>
  <dt>&lt;frequency&gt;</dt>
  <dd><p>The frequency in hertz serialized as per &lt;number&gt; followed by
  the literal string "<code title="">hz</code>".</dd>
  <dt>&lt;identifier&gt;</dt>
  <dd><p>The identifier
  <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a>.</dd>
  <dt>&lt;integer&gt;</dt>
  <dd><p>A base-ten integer using digits 0-9 (U+0030 to U+0039) in the
  shortest form possible, preceded by "<code title="">-</code>" (U+002D) if it is
  negative.</dd>
  <dt>&lt;length&gt;</dt>
  <dd>
   <p>A length of zero is represented by the literal string
   "<code title="">0px</code>".</p>
   <p>Absolute lengths: the number of millimeters serialized as per
   &lt;number&gt; followed by the literal string "<code title="">mm</code>".</p>
   <p class="issue">Rumor has it absolute lengths will become relative
   lengths. Centimeters would be compatible with &lt;resolution&gt;...</p>
   <p>Relative lengths: the &lt;number&gt; component serialized as per
   &lt;number&gt; followed by the unit in its canonical form as defined in its
   respective specification.</p>
  </dd>
  <dt>&lt;number&gt;</dt>
  <dd>
   <p>A base-ten number using digits 0-9 (U+0030 to U+0039) in the shortest form possible, using "<code title="">.</code>" to separate decimals (if any), preceded
   by "<code title="">-</code>" (U+002D) if it is negative.
   <p class="note">JavaScript's <code title="">ToString</code> algorithm cannot be used since it can serialize numbers using an exponent, which would not round-trip
   in CSS.
  <dt>&lt;percentage&gt;</dt>
  <dd><p>The &lt;number&gt; component serialized as per &lt;number&gt; followed
  by the literal string "<code title="">%</code>" (U+0025).</dd>
  <dt>&lt;resolution&gt;</dt>
  <dd><p>The resolution in dots per centimeter serialized as per
  &lt;number&gt; followed by the literal string "<code title="">dpcm</code>".</dd>
  <dt>&lt;shape&gt;</dt>
  <dd><p>The string "<code title="">rect(</code>", followed by the result
  of <a href="#serialize-a-comma-separated-list" title="serialize a comma-separated list">serializing</a> the
  <a href="#serialize-a-css-component-value" title="serialize a CSS component value">serialized</a>
  CSS component values belonging to &lt;shape&gt; as list, followed by
  "<code title="">)</code>" (U+0029).</dd>
  <dt>&lt;string&gt;</dt>
  <dt>&lt;family-name&gt;</dt>
  <dt>&lt;specific-voice&gt;</dt>
  <dd><p>The string
  <a href="#serialize-a-string" title="serialize a string">string escaped</a>.</dd>
  <dt>&lt;time&gt;</dt>
  <dd><p>The time in seconds serialized as per &lt;number&gt; followed by
  the literal string "<code title="">s</code>".</dd>
  <dt>&lt;uri&gt;</dt>
  <dd><p>The <a class="external" data-anolis-spec="url" href="http://url.spec.whatwg.org/#concept-absolute-url" title="concept-absolute-url">absolute URL</a>
  <a href="#serialize-a-url" title="serialize a URL">URL escaped</a>.</dd>
 </dl>
 <p>
  &lt;absolute-size&gt;,
  &lt;border-width&gt;,
  &lt;border-style&gt;,
  &lt;bottom&gt;,
  &lt;generic-family&gt;,
  &lt;generic-voice&gt;,
  &lt;left&gt;,
  &lt;margin-width&gt;,
  &lt;padding-width&gt;,
  &lt;relative-size&gt;,
  &lt;right&gt;, and
  &lt;top&gt;,
  are considered macros by this specification. They all represent instances
  of components outlined above.</p>
 <p class="issue">One idea is that we can remove this section somewhere in
 the CSS3/CSS4 timeline by moving the above definitions to the drafts that
 define the CSS components.</p>
 <h5 id="examples-0"><span class="secno">6.6.2.1 </span>Examples</h5>
 <p>Here are some examples of before and after results on specified values.
 The before column could be what the author wrote in a style sheet, while
 the after column shows what querying the DOM would return.</p>
 <div class="example">
  <table class="complex data">
   <thead>
    <tr><th>Before<th>After
   <tbody>
    <tr><td><code title="">background: none</code><td><code title="">background: rgba(0, 0, 0, 0)</code>
    <tr><td><code title="">outline: none</code><td><code title="">outline: invert</code>
    <tr><td><code title="">border: none</code><td><code title="">border: medium</code>
    <tr><td><code title="">list-style: none</code><td><code title="">list-style: disc</code>
    <tr><td><code title="">margin: 0 1px 1px 1px</code><td><code title="">margin: 0px 1px 1px</code>
    <tr><td><code title="">azimuth: behind left</code><td><code title="">azimuth: 220deg</code>
    <tr><td><code title="">font-family: a, 'b"', serif</code><td><code title="">font-family: "a", "b\"", serif</code>
    <tr><td><code title="">content: url('h)i') '\[\]'</code><td><code title="">content: url("h)i") "[]"</code>
    <tr><td><code title="">azimuth: leftwards</code><td><code title="">azimuth: leftwards</code>
    <tr><td><code title="">color: rgb(18, 52, 86)</code><td><code title="">color: #123456</code>
    <tr><td><code title="">color: rgba(000001, 0, 0, 1)</code><td><code title="">color: #000000</code>
  </table>
  <p class="issue">Some of these need to be updated per the new rules.</p>
 </div>
 <h2 id="dom-access-to-css-declaration-blocks"><span class="secno">7 </span>DOM Access to CSS Declaration Blocks</h2>
 <h3 id="the-elementcssinlinestyle-interface"><span class="secno">7.1 </span>The <code><a href="#elementcssinlinestyle">ElementCSSInlineStyle</a></code> Interface</h3>
 <p>The <code><a href="#elementcssinlinestyle">ElementCSSInlineStyle</a></code> interface provides access to inline style properties of an element.</p>
 <pre class="idl">[NoInterfaceObject]
 interface <dfn id="elementcssinlinestyle">ElementCSSInlineStyle</dfn> {
   [SameObject, PutForwards=<a href="#dom-cssstyledeclaration-csstext" title="dom-CSSStyleDeclaration-cssText">cssText</a>] readonly attribute <a href="#cssstyledeclaration">CSSStyleDeclaration</a> <!--
   --><a href="#dom-elementcssinlinestyle-style" title="dom-ElementCSSInlineStyle-style">style</a>;
 };</pre>
 <p>The <dfn id="dom-elementcssinlinestyle-style" title="dom-ElementCSSInlineStyle-style"><code>style</code></dfn> attribute must return a <a href="#css-declaration-block">CSS declaration block</a> with the
 <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> being set to the result of <a href="#parse-a-css-declaration-block" title="Parse a CSS declaration block">parsing</a>
 the <code title="">style</code> content attribute, in <a href="#concept-declarations-specified-order" title="concept-declarations-specified-order">specified order</a>. If the
 <code title="">style</code> content attribute is absent, the object represents an empty list of
 declarations. Mutating the <code><a href="#cssstyledeclaration">CSSStyleDeclaration</a></code> object must set the
 <code title="">style</code> content attribute on the element to the
 <a href="#serialize-a-css-declaration-block" title="serialize a CSS declaration block">serialization</a> of the
 <code><a href="#cssstyledeclaration">CSSStyleDeclaration</a></code>'s <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a>.
 The object is live; if the
 <code title="">style</code> content attribute is set, changed or removed, the <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> must be
 updated as appropriate.</p>
 <p>If the user agent supports HTML, the following IDL applies: <a class="informative" href="#refsHTML">[HTML]</a>
 <pre class="idl"><a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#htmlelement">HTMLElement</a> implements <a href="#elementcssinlinestyle">ElementCSSInlineStyle</a>;</pre>
 <p>If the user agent supports SVG, the following IDL applies: <a class="informative" href="#refsSVG">[SVG]</a>
 <pre class="idl">SVGElement implements <a href="#elementcssinlinestyle">ElementCSSInlineStyle</a>;</pre>
 <h3 id="extensions-to-the-window-interface"><span class="secno">7.2 </span>Extensions to the <code title="">Window</code> Interface</h3>
 <pre class="idl">partial interface <a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#window">Window</a> {
   [NewObject] <a href="#cssstyledeclaration">CSSStyleDeclaration</a> <!--
   --><a href="#dom-window-getcomputedstyle" title="dom-Window-getComputedStyle">getComputedStyle</a>(<a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#element">Element</a> elt, optional DOMString pseudoElt);
 };</pre>
 <p>The <dfn id="dom-window-getcomputedstyle" title="dom-Window-getComputedStyle"><code>getComputedStyle(<var>elt</var>, <var>pseudoElt</var>)</code></dfn> method must run these
 steps:</p>
 <ol>
  <li><p>Let <var>doc</var> be the
  <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#document">Document</a></code>
  associated with the <code class="external" data-anolis-spec="html"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#window">Window</a></code> object on
  which the method was invoked.</li>
  <li><p>Let <var>obj</var> be <var>elt</var>.</li>
  <li><p>If <var>pseudoElt</var> is as an
  <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a> match for
  either ':before' or '::before' let
  <var>obj</var> be the <a href="#::before-pseudo-element">::before pseudo-element</a> of
  <var>elt</var>.</li>
  <li><p>If <var>pseudoElt</var> is as an
  <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a> match for
  either ':after' or '::after' let
  <var>obj</var> be the <a href="#::after-pseudo-element">::after pseudo-element</a> of
  <var>elt</var>.</li>
  <li>
   <p>Return a live <a href="#css-declaration-block">CSS declaration block</a> with the
   <a href="#concept-css-declaration-block-readonly-flag" title="concept-css-declaration-block-readonly-flag">readonly flag</a> set and the
   <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> set to all longhand properties
   that are <a href="#supported-css-property" title="supported CSS property">supported CSS properties</a> with the value being the <a href="#resolved-value">resolved value</a>
   computed for <var>obj</var> using the style rules associated
   with <var>doc</var>.</p>
   <p class="note">This means that even if <var>obj</var> is in a
   different document (e.g. one fetched via <code title="">XMLHttpRequest</code>) it
   will still use the style rules associated with the document that is
   associated with the global object on which
   <code title="dom-Window-getComputedStyle"><a href="#dom-window-getcomputedstyle">getComputedStyle()</a></code> was
   invoked to compute the <a href="#css-declaration-block">CSS declaration block</a>.</p>
  </li>
 </ol>
 <p class="note">Because of historical IDL limitations the <code title="dom-Window-getComputedStyle"><a href="#dom-window-getcomputedstyle">getComputedStyle()</a></code> method used to be on
 a separate interface, <code title="">ViewCSS</code>.</p>
 <p class="warning">The <code title="dom-Window-getComputedStyle"><a href="#dom-window-getcomputedstyle">getComputedStyle()</a></code> method exposes information from <a href="#css-style-sheet" title="CSS style sheet">CSS style
 sheets</a> with the <a href="#concept-css-style-sheet-origin-clean-flag" title="concept-css-style-sheet-origin-clean-flag">origin-clean flag</a> unset.
 <h3 id="the-getstyleutils-interface"><span class="secno">7.3 </span>The <code title="">GetStyleUtils</code> Interface</h3>
 <p>The <dfn id="associated-document">associated document</dfn> of an object <var>obj</var> is <var>obj</var>'s <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-node-document" title="concept-node-document">node
 document</a> if <var>obj</var> is an <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#element">Element</a></code> object, or <var>obj</var>'s associated
 <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#element">Element</a></code> object's <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-node-document" title="concept-node-document">node document</a> if <var>obj</var> is a
 <code><a href="#pseudoelement">PseudoElement</a></code> object.</p>
 <pre class="idl">[NoInterfaceObject]
 interface <dfn id="getstyleutils">GetStyleUtils</dfn> {
   [SameObject] readonly attribute <a href="#cssstyledeclaration">CSSStyleDeclaration</a> <a href="#dom-getstyleutils-cascadedstyle" title="dom-GetStyleUtils-cascadedStyle">cascadedStyle</a>;
   <!--[SameObject] readonly attribute <span>CSSStyleDeclaration</span> <span title=dom-GetStyleUtils-defaultStyle>defaultStyle</span>;
   -->[SameObject] readonly attribute <a href="#cssstyledeclaration">CSSStyleDeclaration</a> <a href="#dom-getstyleutils-rawcomputedstyle" title="dom-GetStyleUtils-rawComputedStyle">rawComputedStyle</a>;
   [SameObject] readonly attribute <a href="#cssstyledeclaration">CSSStyleDeclaration</a> <a href="#dom-getstyleutils-usedstyle" title="dom-GetStyleUtils-usedStyle">usedStyle</a>;
 };</pre>
 <p class="atrisk">The <dfn id="dom-getstyleutils-cascadedstyle" title="dom-GetStyleUtils-cascadedStyle"><code>cascadedStyle</code></dfn> attribute must return a live <a href="#css-declaration-block">CSS declaration block</a>
 with the <a href="#concept-css-declaration-block-readonly-flag" title="concept-css-declaration-block-readonly-flag">readonly flag</a> set and the
 <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> set to all longhand properties
 that are <a href="#supported-css-property" title="supported CSS property">supported CSS properties</a> that have a <a href="#cascaded-value">cascaded value</a> for the <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#context-object">context
 object</a>, with the value being the <a href="#cascaded-value">cascaded value</a> computed for the <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#context-object">context object</a> using the style rules
 associated with the <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#context-object">context object</a>'s <a href="#associated-document">associated document</a>.</p>
 <!--<p class=atrisk>The <dfn title=dom-GetStyleUtils-defaultStyle><code>defaultStyle</code></dfn> attribute must return a live <span>CSS declaration
 block</span> with the <span title=concept-css-declaration-block-readonly-flag>readonly flag</span> set and the
 <span title=concept-css-declaration-block-declarations>declarations</span> set to all longhand properties that are
 <span title="supported CSS property">supported CSS properties</span> with the value being the
 <span>computed value</span> computed for the <span data-anolis-spec=dom>context object</span> using the user-agent-level style rules and user-level style rules
 associated with the <span data-anolis-spec=dom>context object</span>'s <span>associated document</span>, ignoring transitions, animations, author-level style
 rules, author-level presentational hints and override-level style rules.</p>-->
 <p class="atrisk">The <dfn id="dom-getstyleutils-rawcomputedstyle" title="dom-GetStyleUtils-rawComputedStyle"><code>rawComputedStyle</code></dfn> attribute must return a live <a href="#css-declaration-block">CSS declaration
 block</a> with the <a href="#concept-css-declaration-block-readonly-flag" title="concept-css-declaration-block-readonly-flag">readonly flag</a> set and the
 <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> set to all longhand properties
 that are <a href="#supported-css-property" title="supported CSS property">supported CSS properties</a> with the value being the <a href="#computed-value">computed value</a>
 computed for the <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#context-object">context object</a> using the style rules associated
 with the <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#context-object">context object</a>'s <a href="#associated-document">associated document</a>.</p>
 <p class="atrisk">The <dfn id="dom-getstyleutils-usedstyle" title="dom-GetStyleUtils-usedStyle"><code>usedStyle</code></dfn> attribute must return a live <a href="#css-declaration-block">CSS declaration block</a> with the
 <a href="#concept-css-declaration-block-readonly-flag" title="concept-css-declaration-block-readonly-flag">readonly flag</a> set and the
 <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> set to all longhand properties
 that are <a href="#supported-css-property" title="supported CSS property">supported CSS properties</a> with the value being the <a href="#used-value">used value</a>
 computed for the <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#context-object">context object</a> using the style rules associated
 with the <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#context-object">context object</a>'s <a href="#associated-document">associated document</a>.</p>
 <p class="warning">The <code title="dom-GetStyleUtils-cascadedStyle"><a href="#dom-getstyleutils-cascadedstyle">cascadedStyle</a></code>, <code title="dom-GetStyleUtils-rawComputedStyle"><a href="#dom-getstyleutils-rawcomputedstyle">rawComputedStyle</a></code>
 and <code title="dom-GetStyleUtils-usedStyle"><a href="#dom-getstyleutils-usedstyle">usedStyle</a></code> methods expose information from <a href="#css-style-sheet" title="CSS style sheet">CSS style sheets</a> with the
 <a href="#concept-css-style-sheet-origin-clean-flag" title="concept-css-style-sheet-origin-clean-flag">origin-clean flag</a> unset.
 <h3 id="extensions-to-the-element-interface"><span class="secno">7.4 </span>Extensions to the <code title="">Element</code> Interface</h3>
 <pre class="idl">partial interface <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#element">Element</a> {
   <a href="#pseudoelement">PseudoElement</a>? <a href="#dom-element-pseudo" title="dom-Element-pseudo">pseudo</a>(DOMString pseudoElt);
 };
 <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#element">Element</a> implements <a href="#getstyleutils">GetStyleUtils</a>;</pre>
 <p class="atrisk">The <dfn id="dom-element-pseudo" title="dom-Element-pseudo"><code>pseudo(<var>pseudoElt</var>)</code></dfn> method, when invoked, must run the following steps:
 <ol>
  <li><p>If <var>pseudoElt</var> is as an <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a> match for either ':before' or
  '::before' return the <code><a href="#pseudoelement">PseudoElement</a></code> representing the <a href="#::before-pseudo-element">::before pseudo-element</a> of the
  <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#context-object">context object</a>.</li>
  <li><p>If <var>pseudoElt</var> is as an <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a> match for either ':after' or
  '::after' return the <code><a href="#pseudoelement">PseudoElement</a></code> representing the <a href="#::after-pseudo-element">::after pseudo-element</a> of the
  <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#context-object">context object</a>.</li>
  <li><p>Return null.</li>
 </ol>
 <p>When invoked with an argument that returns a <code><a href="#pseudoelement">PseudoElement</a></code> object representing a particular pseudo-element, the same object must be
 returned as returned by an earlier call that represent the same pseudo-element.</p>
 <h3 id="the-pseudoelement-interface"><span class="secno">7.5 </span>The <code title="">PseudoElement</code> Interface</h3>
 <p class="atrisk">The <code><a href="#pseudoelement">PseudoElement</a></code> interface is used for representing CSS pseudo-elements. A <code><a href="#pseudoelement">PseudoElement</a></code> object is associated with an
 <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#element">Element</a></code> object.</p>
 <pre class="idl">interface <dfn id="pseudoelement">PseudoElement</dfn> {
 };
 <a href="#pseudoelement">PseudoElement</a> implements <a href="#getstyleutils">GetStyleUtils</a>;</pre>
 <h2 id="resolved-values"><span class="secno">8 </span>Resolved Values</h2>
 <p><code title="dom-Window-getComputedStyle"><a href="#dom-window-getcomputedstyle">getComputedStyle()</a></code> was
 historically defined to return the "computed value" of an element or
 pseudo-element. However, the concept of "computed value" changed between
 revisions of CSS while the implementation of
 <code title="dom-Window-getComputedStyle"><a href="#dom-window-getcomputedstyle">getComputedStyle()</a></code> had to
 remain the same for compatibility with deployed scripts. To address this
 issue this specification introduces the concept of a
 <dfn id="resolved-value">resolved value</dfn>.</p>
 <p>The <a href="#resolved-value">resolved value</a> for a given property can be determined
 as follows:</p>
 <dl class="switch">
  <!--
  We want to treat shorthand properties like any other value basically.
  <dt>'background'
  <dt>'border'
  <dt>'border-collapse'
  <dt>'border-color'
  <dt>'border-spacing'
  <dt>'border-style'
  <dt>'border-top'
  <dt>'border-right'
  <dt>'border-bottom'
  <dt>'border-left'
  <dt>'border-width'
  <dt>'font'
  <dt>'list-style'
  <dt>'margin'
  <dt>'outline'
  <!- - overflow is not - ->
  <dt>'padding'
  <dt>'pause'
  <dd>
   <p>There is no <span>resolved value</span>.</p>
  </dd>
  -->
  <dt>'line-height'</dt>
  <dd><p>The <a href="#resolved-value">resolved value</a> is the <a href="#used-value">used value</a>.</dd>
  <dt>'height'</dt>
  <dt>'margin'</dt>
  <dt>'margin-bottom'</dt>
  <dt>'margin-left'</dt>
  <dt>'margin-right'</dt>
  <dt>'margin-top'</dt>
  <dt>'padding'</dt>
  <dt>'padding-bottom'</dt>
  <dt>'padding-left'</dt>
  <dt>'padding-right'</dt>
  <dt>'padding-top'</dt>
  <dt>'width'</dt>
  <dd><p>If the property applies to the element or pseudo-element and the
  <a href="#resolved-value">resolved value</a> of the 'display' property is not
  'none', the <a href="#resolved-value">resolved value</a> is the
  <a href="#used-value">used value</a>. Otherwise the <a href="#resolved-value">resolved value</a> is the
  <a href="#computed-value">computed value</a>.</dd>
  <dt>'bottom'</dt>
  <dt>'left'</dt>
  <dt>'right'</dt>
  <dt>'top'</dt>
  <dd><p>If the property applies to a positioned element and the
  <a href="#resolved-value">resolved value</a> of the 'display' property is not
  'none', the <a href="#resolved-value">resolved value</a> is the
  <a href="#used-value">used value</a>. Otherwise the <a href="#resolved-value">resolved value</a> is the
  computed value.</dd>
  <dt>Any other property</dt>
  <dd><p>The <a href="#resolved-value">resolved value</a> is the <a href="#computed-value">computed value</a>.</dd>
 </dl>
 <h2 id="iana-considerations"><span class="secno">9 </span>IANA Considerations</h2>
 <h3 id="default-style"><span class="secno">9.1 </span><dfn title="http-default-style"><code title="">Default-Style</code></dfn></h3>
 <p>This section describes a header field for registration in the Permanent
 Message Header Field Registry.
 <!--<a href="issue">[RFC3864]</a>--></p>
 <dl>
  <dt>Header field name</dt>
  <dd>Default-Style</dd>
  <dt>Applicable protocol</dt>
  <dd>http</dd>
  <dt>Status</dt>
  <dd>standard</dd>
  <dt>Author/Change controller</dt>
  <dd>W3C</dd>
  <dt>Specification document(s)</dt>
  <dd>This document is the relevant specification.</dd>
  <dt>Related information</dt>
  <dd>None.</dd>
 </dl>
 <h2 class="no-num" id="references">References</h2>
 <div id="anolis-references"><dl><dt id="refsCSS">[CSS]
 <dd><cite><a href="http://www.w3.org/TR/CSS2/">CSS</a></cite>, Bert Bos, Tantek Çelik, Ian Hickson et al.. W3C.
 <dt id="refsCSSCASCADE">[CSSCASCADE]
 <dd><cite><a href="http://dev.w3.org/csswg/css-cascade/">CSS Cascading and Inheritance</a></cite>, Håkon Wium Lie, fantasai and Tab Atkins Jr..
 <dt id="refsCSSNAMESPACES">[CSSNAMESPACES]
 <dd><cite><a href="http://dev.w3.org/csswg/css-namespaces/">CSS Namespaces Module</a></cite>, Elika J. Etemad and Anne van Kesteren. W3C.
 <dt id="refsCSSPAGE">[CSSPAGE]
 <dd><cite><a href="http://dev.w3.org/csswg/css-page/">CSS Paged Media Module</a></cite>, Melinda Grant, Håkon Wium Lie, Elika J. Etemad et al.. W3C.
 <dt id="refsCSSSYNTAX">[CSSSYNTAX]
 <dd><cite><a href="http://dev.w3.org/csswg/css-syntax/">CSS Syntax Module</a></cite>, Tab Atkins Jr.. W3C.
 <dt id="refsCSSVARIABLES">[CSSVARIABLES]
 <dd>(Non-normative) <cite><a href="http://dev.w3.org/csswg/css-variables/">CSS Custom Properties for Cascading Variables Module</a></cite>, Tab Atkins Jr.. W3C.
 <dt id="refsDOM">[DOM]
 <dd><cite><a href="http://dom.spec.whatwg.org/">DOM</a></cite>, Anne van Kesteren, Aryeh Gregor and Ms2ger. WHATWG.
 <dt id="refsDOM2STYLE">[DOM2STYLE]
 <dd>(Non-normative) <cite><a href="http://www.w3.org/TR/DOM-Level-2-Style/">Document Object Model (DOM) Level 2 Style Specification</a></cite>, Chris Wilson, Philippe Le Hégaret and Vidur Apparao. W3C.
 <dt id="refsFETCH">[FETCH]
 <dd><cite><a href="http://fetch.spec.whatwg.org/">Fetch</a></cite>, Anne van Kesteren. WHATWG.
 <dt id="refsHTML">[HTML]
 <dd><cite><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/">HTML</a></cite>, Ian Hickson. WHATWG.
 <dt id="refsRFC2119">[RFC2119]
 <dd><cite><a href="http://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a></cite>, Scott Bradner. IETF.
 <dt id="refsSELECTORS">[SELECTORS]
 <dd><cite><a href="http://dev.w3.org/csswg/selectors4/">Selectors</a></cite>, Elika J. Etemad. W3C.
 <dt id="refsSVG">[SVG]
 <dd>(Non-normative) <cite><a href="http://www.w3.org/TR/SVG/">Scalable Vector Graphics (SVG)</a></cite>, O. Andersson, R. Berjon, E. Dahlström et al.. W3C.
 <dt id="refsURL">[URL]
 <dd><cite><a href="http://url.spec.whatwg.org/">URL</a></cite>, Anne van Kesteren. WHATWG.
 <dt id="refsXML">[XML]
 <dd><cite><a href="http://www.w3.org/TR/xml/">Extensible Markup Language</a></cite>, Tim Bray, Jean Paoli, C. M. Sperberg-McQueen et al.. W3C.
 <dt id="refsXMLSS">[XMLSS]
 <dd><cite><a href="http://www.w3.org/TR/xml-stylesheet/">Associating Style Sheets with XML documents 1.0 (Second Edition)</a></cite>, James Clark, Simon Pieters and Henry S. Thompson. W3C.
 </dl></div>
 <h2 class="no-num" id="change-history">Change History</h2>
 <p>This section documents the primary technical changes of CSSOM related functionality, with a focus on changes to API signatures.</p>
 <h3 class="no-num" id="changes-from-dom-2-style">Changes From DOM-2 Style</h3>
 <ul>
 <li><p>Remove definition of <code title="">CSSRule.UNKNOWN_RULE</code>, reserving its value (0) to prevent future reuse.</li>
 <li><p>Remove definition of <code title="">DOMImplementationCSS</code> interface.</li>
 </ul>
 <h2 class="no-num" id="acknowledgments">Acknowledgments</h2>
 <p>The editors would like to thank
 Alexey Feldgendler,
 Björn Höhrmann,
 Boris Zbasky,
 Brian Kardell,
 Christian Krebs,
 Daniel Glazman,
 David Baron,
 <i>fantasai</i>,
 Hallvord R. M. Steen,
 Ian Hickson,
 John Daggett,
 Lachlan Hunt,
 Mike Sherov,
 Morten Stenshorne,
 Øyvind Stenhaug,
 Peter Sloetjes,
 Philip Taylor,
 Robert O'Callahan,
 Simon Sapin,
 Sjoerd Visscher,
 <!--Simon Pieters,-->
 Sylvain Galineau,
 Tarquin Wilton-Jones, and
 Zack Weinberg
 for contributing to this specification.</p>
 <p>Additional thanks to Ian Hickson for writing the
 initial version of the alternative style sheets API and canonicalization
 (now serialization) rules for CSS values.</p>
 <!-- XXX NOTES
 <style type=text/css;charset=utf-8> does create a StyleSheet in Firefox
 and Opera, but does not create a StyleSheet in IE. I prefer IE.
 <style type=TEXT/CSS> sets the style sheet type to text/css in Firefox and
 TEXT/CSS in Opera and IE. I prefer Firefox.
 <style> sets the style sheet location to the document location Firefox,
 the empty string in IE, and null in Opera. I prefer Opera
 <style media="x"> invokes .sheet.media.mediaText = "x"
 <style> does not "have" a title
 .cascadedStyle that returns less keywords than currentStyle, no inherit,
 etc.
 Markup style: http://krijnhoetmer.nl/irc-logs/whatwg/20100204#l-529
 -->

Mercurial > drafts / annotate

cssom/Overview.html@1a4eaf3f7f1d (annotated)

cssom/Overview.html