cssom/cssom-source

Mon, 01 Oct 2012 12:17:55 +0800

author
Glenn Adams <glenn@skynav.com>
date
Mon, 01 Oct 2012 12:17:55 +0800
changeset 6802
0d2a6c814dd1
parent 6794
7c881a97c919
child 6809
380501b9292e
permissions
-rwxr-xr-x

[cssom] first draft of color serialization rules

     1 <!doctype html>
     2 <html lang="en-US">
     3  <head>
     4   <meta charset=utf-8>
     5   <title>CSS Object Model (CSSOM)</title>
     6   <link rel="stylesheet" href="cssom.css">
     7   <link rel="stylesheet" href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS]">
     8  </head>
     9  <body class="draft">
    10   <div class="head">
    11    <!--logo-->
    13    <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
    14    <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
    16    <h1 id="cssom">CSS Object Model (CSSOM)</h1>
    18    <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
    20    <h2 class="no-num no-toc" id="w3c-doctype">[LONGSTATUS] [DATE: 3 August 2002]</h2>
    22    <dl>
    24     <dt>This Version:</dt>
    25     <dd class=dontpublish><a href="http://dvcs.w3.org/hg/csswg/raw-file/tip/cssom/Overview.html">http://dvcs.w3.org/hg/csswg/raw-file/tip/cssom/Overview.html</a></dd>
    26     <dd class=publish><a href="[VERSION]">[VERSION]</a></dd>
    28     <dt class=dontpublish>Participate:</dt>
    29     <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>
    30     <dd class=dontpublish><a href="https://www.w3.org/Bugs/Public/enter_bug.cgi?product=CSS&amp;component=CSSOM">File a bug</a></dd>
    31     <dd class=dontpublish><a href="irc://irc.w3.org/css">IRC: #css on W3C</a></dd>
    33     <dt class=publish>Latest Version:</dt>
    34     <dd class=publish><a href="[LATEST]">[LATEST]</a></dd>
    36     <dt class=publish>Latest Editor's draft:</dt>
    37     <dd class=publish><a href="http://dvcs.w3.org/hg/csswg/raw-file/tip/cssom/Overview.html">http://dvcs.w3.org/hg/csswg/raw-file/tip/cssom/Overview.html</a></dd>
    39     <dt class=dontpublish>Previous Version:</dt>
    40     <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>
    41     <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>
    43     <dt>Editors:</dt>
    44     <dd><a href="http://www.w3.org/wiki/User:Gadams">Glenn Adams</a>
    45     (<a href="http://www.cox.com/">Cox Communications, Inc.</a>)
    46     &lt;<a href="mailto:glenn.adams@cox.com">glenn.adams@cox.com</a>&gt;</dd>
    47     <dd><a>Shane Stephens</a>
    48     (<a href="http://www.google.com/">Google, Inc.</a>)
    49     &lt;<a href="mailto:shans@google.com">shans@google.com</a>&gt;</dd>
    51     <dt>Previous Editor:</dt>
    52     <dd><a href="http://annevankesteren.nl/">Anne van Kesteren</a>
    53     (<a href="http://www.opera.com/">Opera Software ASA</a>)
    54     &lt;<a href="mailto:annevk@opera.com">annevk@opera.com</a>&gt;</dd>
    55    </dl>
    57    <!--copyright-->
    59   </div>
    61   <hr class="top">
    63   <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
    65   <h2 class="no-num no-toc" id="abstract">Abstract</h2>
    67   <p>CSSOM defines APIs (including generic parsing and serialization rules)
    68   for Media Queries, Selectors, and of course CSS itself.</p>
    70   <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
    72   <h2 class="no-num no-toc" id="sotd">Status of this Document</h2>
    74   <p>This is a public copy of the editors' draft. It is provided for discussion only and may change at any moment.
    75   Its publication here does not imply endorsement of its contents by W3C or by the CSS Working Group. Don't cite
    76   this document other than as work in progress.</p>
    78   <p class="note">Implementers should note well that this specification is an ongoing effort to sort out
    79   what has been widely implemented and deployed from <span data-anolis-ref>DOM2STYLE</span> as well as common extensions thereto, some details
    80   of which are currently interoperable and others which are not currently interoperable. As this specification moves
    81   forward, it is hoped that these differences will be resolved and an unambiguous and adequate consensus-based
    82   specification will emerge.</p>
    84   <p><em>This section describes the status of this document at the time of
    85   its publication. Other documents may supersede this document. A list of
    86   current W3C publications and the latest revision of this technical report
    87   can be found in the
    88   <a href="http://www.w3.org/TR/">W3C technical reports index at http://www.w3.org/TR/.</a></em>
    90   <p class="dontpublish">This is the [DATE: 3 August 2002] [LONGSTATUS] of CSSOM. Please send comments to
    91   <a href="mailto:www-style@w3.org?subject=%5Bcssom%5D%20">www-style@w3.org</a>
    92   (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>)
    93   with <samp>[cssom]</samp> at the start of the subject line.
    95   <p class="publish">This is the [DATE] First Public Working Draft of CSSOM, produced by the
    96   <a href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part
    97   of the <a href="http://www.w3.org/Style/">Style Activity</a>).
    98   <!--XXX remove "First Public" after initial publication -->
   100   <p>This document was produced by a group operating under the
   101   <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent Policy</a>.
   102   W3C maintains a
   103   <a href="http://www.w3.org/2004/01/pp-impl/32061/status" rel=disclosure>public list of any patent disclosures</a>
   104   made in connection with the deliverables of the group; that page also
   105   includes instructions for disclosing a patent. An individual who has
   106   actual knowledge of a patent which the individual believes contains
   107   <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a>
   108   must disclose the information in accordance with
   109   <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the W3C Patent Policy</a>.</p>
   111   <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
   113   <h2 class="no-num no-toc" id="toc">Table of Contents</h2>
   115   <!--toc-->
   117   <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
   119   <h2 id="introduction">Introduction</h2>
   121   <p>This document formally specifies the core features of the CSS Object Model (CSSOM). Other documents in the CSSOM family of specifications
   122   as well as other CSS related specifications define extensions to these core features.</p>
   124   <p>The core features of the CSSOM are oriented towards providing basic capabilities to author-defined scripts to permit access to
   125   and manipulation of style related state information and processes.</p>
   127   <p>The features defined below are fundamentally based on prior specifications of the W3C DOM Working Group, primarily
   128   <span data-anolis-ref>DOM2STYLE</span>. The purposes of the present document are (1) to improve on that prior work by providing
   129   more technical specificity (so as to improve testability and interoperability), (2) to deprecate or remove certain less-widely implemented
   130   features no longer considered to be essential in this context, and (3) to newly specify certain extensions that have been
   131   or expected to be widely implemented.</p>
   133   <p>A full list of the changes to API signatures can be found in <a href="#changes-from-dom2"><cite>Changes from DOM-2 Style</cite></a>.</p>
   135   <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
   137   <h2>Conformance</h2>
   139   <p>All diagrams, examples, and notes in this specification are
   140   non-normative, as are all sections explicitly marked non-normative.
   141   Everything else in this specification is normative.
   143   <p>The key words "MUST", "MUST NOT", "REQUIRED", <!--"SHALL", "SHALL
   144   NOT",--> "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and
   145   "OPTIONAL" in the normative parts of this document are to be
   146   interpreted as described in RFC2119. For readability, these words do
   147   not appear in all uppercase letters in this specification.
   148   <span data-anolis-ref>RFC2119</span>
   150   <p>Requirements phrased in the imperative as part of algorithms
   151   (such as "strip any leading space characters" or "return false and
   152   terminate these steps") are to be interpreted with the meaning of the
   153   key word ("must", "should", "may", etc) used in introducing the
   154   algorithm.
   156   <p>Conformance requirements phrased as algorithms or specific steps
   157   may be implemented in any manner, so long as the end result is
   158   equivalent. (In particular, the algorithms defined in this
   159   specification are intended to be easy to follow, and not intended to
   160   be performant.)
   162   <p id="hardwareLimitations">User agents may impose
   163   implementation-specific limits on otherwise unconstrained inputs,
   164   e.g. to prevent denial of service attacks, to guard against running
   165   out of memory, or to work around platform-specific limitations.
   167   <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.
   169   <p>Unless otherwise stated, string comparisons are done in a
   170   <span data-anolis-spec=dom>case-sensitive</span> manner.
   172   <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
   174   <h2 id="terminology">Terminology</h2>
   176   <p>This specification employs certain terminology from the following documents:
   177   <cite>DOM4</cite>,
   178   <cite>HTML</cite>,
   179   <cite>Associating Style Sheets with XML documents</cite>
   180   and
   181   <cite>XML</cite>
   182   <span data-anolis-ref>DOM</span>
   183   <span data-anolis-ref>HTML</span>
   184   <span data-anolis-ref>XMLSS</span>
   185   <span data-anolis-ref>XML</span>.
   187   <p>When this specification talks about object
   188   <code><var>A</var></code> where <code><var>A</var></code> is actually an interface, it generally means an object implementing interface
   189   <code><var>A</var></code>.</p>
   191   <p>The term <dfn id="whitespace">whitespace</dfn> is used as defined in <span data-anolis-ref>CSS</span>.
   193   <!-- ........................................................................................................................ -->
   194   <!-- ........................................................................................................................ -->
   196   <h3>Common Serializing Idioms</h3>
   198   <p>To <dfn>escape a character</dfn> means to create a string of
   199   "<code>\</code>" (U+005C), followed by the character.</p>
   201   <p>To <dfn>escape a character as code point</dfn> means to create a
   202   string of "<code>\</code>" (U+005C), followed by the Unicode code point as
   203   the smallest possible number of hexadecimal digits in the range 0-9 a-f
   204   (U+0030 to U+0039 and U+0061 to U+0066) to represent the code point in
   205   base 16, followed by a space (U+0020).</p>
   207   <p>To <dfn>serialize an identifier</dfn> means to create a string represented
   208   by the concatenation of, for each character of the identifier:</p>
   210   <ul>
   211    <li>If the character is in the range U+0000 to U+001F or U+007F to
   212    U+009F, the character
   213    <span title="escape a character as code point">escaped as code point</span>.</li>
   214    <li>If the character is the first character and is in the range 0-9
   215    (U+0030 to U+0039), the character
   216    <span title="escape a character as code point">escaped as code point</span>.</li>
   217    <li>If the character is the second character and is in the range 0-9
   218    (U+0030 to U+0039) and the first character is a "<code>-</code>"
   219    (U+002D), the character
   220    <span title="escape a character as code point">escaped as code point</span>.</li>
   221    <li>If the character is the second character and is "<code>-</code>"
   222    (U+002D) and the first character is "<code>-</code>" too, the
   223    <span title="escape a character">escaped</span> character.</li>
   224    <li>If the character is not handled by one of the above rules and is
   225    greater than or equal to U+0080, is "<code>-</code>" (U+002D) or
   226    "<code>_</code>" (U+005F), or is in one of the ranges 0-9 (U+0030 to
   227    U+0039), A-Z (U+0041 to U+005A), or a-z (U+0061 to U+007A), the character
   228    itself.</li>
   229    <li>Otherwise, the <span title="escape a character">escaped</span>
   230    character.</li>
   231   </ul>
   233   <p>To <dfn>serialize a string</dfn> means to create a string represented
   234   by '<code>"</code>' (U+0022), followed by the result of applying the rules
   235   below to each character of the given string, followed by
   236   '<code>"</code>' (U+0022):</p>
   238   <ul>
   239    <li>If the character is in the range U+0000 to U+001F or U+007F to
   240    U+009F, the character
   241    <span title="escape a character as code point">escaped as code point</span>.</li>
   242    <li>If the character is '<code>"</code>' (U+0022) or '<code>\</code>'
   243    (U+005C), the <span title="escape a character">escaped</span> character.</li>
   244    <li>Otherwise, the character itself.</li>
   245   </ul>
   247   <p class="note">"<code>'</code>" (U+0027) is not escaped because strings
   248   are always serialized with '<code>"</code>' (U+0022).</p>
   250   <p>To <dfn>serialize a URL</dfn> means to create a string represented by
   251   "<code>url(</code>", followed by the
   252   <span title="serialize a string">string escaped</span> value of the given
   253   string, followed by "<code>)</code>".</p>
   255   <p>To <dfn>serialize a comma-separated list</dfn> concatenate all items of
   256   the list in list order while separating them by "<code>,</code>" (U+002C),
   257   followed by a space (U+0020).</p>
   259   <p>To <dfn>serialize a whitespace-separated list</dfn> concatenate all
   260   items of the list in list order while separating them a space (U+0020).</p>
   262   <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
   264   <h2>Media Queries</h2>
   266   <p>Media queries are defined by the Media Queries specification. This
   267   section defines various concepts around media queries, including their API
   268   and serialization form.</p>
   270   <!-- XXX ref -->
   272   <!-- ........................................................................................................................ -->
   273   <!-- ........................................................................................................................ -->
   275   <h3>Parsing Media Queries</h3>
   277   <p>To
   278   <dfn id="parse-a-media-query-list">parse a media query list</dfn> for a
   279   given string <var>s</var> into a media query list is defined in
   280   the Media Queries specification. Return the list of one or more media
   281   queries that the algorithm defined there gives.</p> <!-- XXX ref -->
   283   <p class="note">A media query that ends up being "ignored" will turn
   284   into "<code>not all</code>".</p>
   286   <p>To
   287   <dfn id="parse-a-media-query">parse a media query</dfn> for a given string
   288   <var>s</var> means to follow the
   289   <span>parse a media query list</span> steps and return null if more
   290   than one media query is returned or a media query if a
   291   single media query is returned.</p>
   293   <p class="note">Again, a media query that ends up being "ignored" will
   294   turn into "<code>not all</code>".</p>
   296   <!-- ........................................................................................................................ -->
   298   <h3>Serializing Media Queries</h3>
   300   <p>To
   301   <dfn id="serialize-a-media-query-list">serialize a media query list</dfn>
   302   run these steps:</p>
   304   <ol>
   305    <li><p>If the media query list is empty return the empty string and
   306    terminate these steps.</p></li>
   308    <li><p><span title="serialize a media query">Serialize</span> each
   309    media query in the list of media queries, sort them in lexicographical
   310    order, and then
   311    <span title="serialize a comma-separated list">serialize</span> the
   312    list.</p></li>
   313   </ol>
   315   <p>To
   316   <dfn id="serialize-a-media-query">serialize a media query</dfn> let
   317   <var>s</var> be the empty string, run the steps below, and
   318   finally return <var>s</var>:</p>
   320   <ol>
   321    <li><p>If the media query is negated append "<code>not</code>", followed
   322    by a space (U+0020), to <var>s</var>.</p></li>
   324    <li><p>Let <var>type</var> be the media type of the media query,
   325    <span title="serialize an identifier">escaped</span> and
   326    <span data-anolis-spec=dom>converted to ASCII lowercase</span>.</p></li>
   328    <li><p>If the media query does not contain media features append
   329    <var>type</var>, to <var>s</var>,
   330    then return <var>s</var> and terminate this algorithm.</p></li>
   332    <li><p>If <var>type</var> is not "<code>all</code>" or if the
   333    media query is negated append <var>type</var>, followed by a
   334    space (U+0020), followed by "<code>and</code>", followed by a space
   335    (U+0020), to <var>s</var>.</p></li>
   337    <li><p>Sort the media features in lexicographical order.</p></li>
   339    <li>
   340     <p>Then, for each media feature:</p>
   342     <ol>
   343      <li>Append a "<code>(</code>" (U+0028), followed by the media feature
   344      name, <span data-anolis-spec=dom>converted to ASCII lowercase</span>,
   345      to <var>s</var>.</p></li>
   347      <li><p>If a value is given append a "<code>:</code>" (U+003A), followed
   348      by a space (U+0020), followed by the
   349      <span title="serialize a media feature value">serialized media feature value</span>,
   350      to <var>s</var>.</p></li>
   352      <li><p>Append a "<code>)</code>" (U+0029) to
   353      <var>s</var>.</p></li>
   355      <li><p>If this is not the last media feature append a space (U+0020),
   356      followed by "<code>and</code>", followed by a space (U+0020), to
   357      <var>s</var>.</p></li>
   358     </ol>
   359    </li>
   360   </ol>
   362   <div class="example">
   363    <p>Here are some examples of input (first column) and output (second
   364    column):</p>
   366    <table>
   367     <thead>
   368      <tr><th>Input<th>Output
   369     <tbody>
   370      <tr>
   371       <td><code>not screen and (min-WIDTH:5px) AND (max-width:40px  )</code>
   372       <td><code>not screen and (max-width: 40px) and (min-width: 5px)</code>
   373      <tr>
   374       <td><code>all and (color) and (color)</code>
   375       <td><code>(color)</code>
   376    </table>
   377   </div>
   380   <!-- ........................................................................................................................ -->
   382   <h4>Serializing Media Feature Values</h4>
   384   <p class="issue">This should probably be done in terms of mapping it to
   385   serializing CSS values as media features are defined in terms of CSS
   386   values after all.</p>
   388   <p>To <dfn id="serialize-a-media-feature-value">serialize a media feature value</dfn>
   389   named <var>v</var> locate <var>v</var> in the first
   390   column of the table below and use the serialization format described in
   391   the second column:</p>
   393   <table>
   394    <tr>
   395     <th>Media Feature
   396     <th>Serialization
   397    <tr>
   398     <td><code>width</code>
   399     <td>...
   400    <tr>
   401     <td><code>height</code>
   402     <td>...
   403    <tr>
   404     <td><code>device-width</code>
   405     <td>...
   406    <tr>
   407     <td><code>device-height</code>
   408     <td>...
   409    <tr>
   410     <td><code>orientation</code>
   411     <td>
   412      <p>If the value is `<code>portrait</code>`: "<code>portrait</code>".</p>
   413      <p>If the value is `<code>landscape</code>`: "<code>landscape</code>".</p>
   414    <tr>
   415     <td><code>aspect-ratio</code>
   416     <td>...
   417    <tr>
   418     <td><code>device-aspect-ratio</code>
   419     <td>...
   420    <tr>
   421     <td><code>color</code>
   422     <td>...
   423    <tr>
   424     <td><code>color-index</code>
   425     <td>...
   426    <tr>
   427     <td><code>monochrome</code>
   428     <td>...
   429    <tr>
   430     <td><code>resolution</code>
   431     <td>...
   432    <tr>
   433     <td><code>scan</code>
   434     <td>
   435      <p>If the value is `<code>progressive</code>`: "<code>progressive</code>".</p>
   436      <p>If the value is `<code>interlace</code>`: "<code>interlace</code>".</p>
   437    <tr>
   438     <td><code>grid</code>
   439     <td>...
   440   </table>
   442   <p>Other specifications can extend this table and vendor-prefixed media
   443   features can have custom serialization formats as well.</p>
   445   <!-- ........................................................................................................................ -->
   446   <!-- ........................................................................................................................ -->
   448   <h3>Comparing Media Queries</h3>
   450   <p>To
   451   <dfn id="compare-media-queries">compare media queries</dfn>
   452   <var>m1</var> and <var>m2</var> means to
   453   <span title="serialize a media query">serialize</span> them both and
   454   return true if they are a
   455   <span data-anolis-spec=dom>case-sensitive</span> match and false if they
   456   are not.</p>
   458   <!-- ........................................................................................................................ -->
   459   <!-- ........................................................................................................................ -->
   461   <h3>The <code>MediaList</code> Interface</h3>
   463   <!--{@idl(MediaList)}-->
   465   <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
   467   <h2>Selectors</h2>
   469   <p>Selectors are defined in the Selectors specification. This section
   470   mainly defines how to serialize them.</p> <!-- XXX ref -->
   472   <!-- XXX ref universal selector etc? some are in <span> some not -->
   474   <!-- ........................................................................................................................ -->
   475   <!-- ........................................................................................................................ -->
   477   <h3>Parsing Selectors</h3>
   479   <p>To
   480   <dfn id="parse-a-group-of-selectors">parse a group of selectors</dfn>
   481   means to parse the value using the <code>selectors_group</code>
   482   production defined in the Selectors specification and return either a
   483   group of selectors if parsing did not fail or null if parsing did
   484   fail.</p> <!-- XXX ref -->
   486   <!-- ........................................................................................................................ -->
   487   <!-- ........................................................................................................................ -->
   489   <h3>Serializing Selectors</h3>
   490   <!-- http://dump.testsuite.org/2009/cssom/serializing-selectors.htm -->
   492   <p>To
   493   <dfn id="serialize-a-group-of-selectors">serialize a group of selectors</dfn>
   494   <span title="serialize a selector">serialize</span> each selector in the
   495   group of selectors and then
   496   <span title="serialize a comma-separated list">serialize</span> the
   497   group.</p>
   499   <p>To <dfn id="serialize-a-selector">serialize a selector</dfn> let
   500   <var>s</var> be the empty string, run the steps below for each
   501   part of the chain of the selector, and finally return
   502   <var>s</var>:</p>
   504   <ol>
   505    <li><p>If there is only one <span>simple selector</span> in the
   506    <span>sequence of simple selectors</span> which is a
   507    <span>universal selector</span>, append the result of
   508    <span title="serialize a simple selector">serializing</span> the
   509    <span>universal selector</span> to <var>s</var>.</p></li>
   511    <li><p>Otherwise, for each <span>simple selector</span> in the
   512    <span>sequence of simple selectors</span> that is not a
   513    universal selector of which the <span>namespace prefix</span> maps to
   514    the null namespace (not in a namespace) or of which the
   515    <span>namespace prefix</span> maps to a namespace that is not the
   516    <span>default namespace</span>
   517    <span title="serialize a simple selector">serialize</span> the
   518    <span>simple selector</span> and append the result to
   519    <var>s</var>.</p></li>
   521    <li><p>If this is not the last part of the chain of the selector append a
   522    space (U+0020), followed by the combinator
   523    "<code>></code>",
   524    "<code>+</code>", or
   525    "<code>~</code>"
   526    as appropriate, followed by another space (U+0020) if the combinator was
   527    not whitespace, to <var>s</var>.</p></li>
   529    <li><p>If this is the last part of the chain of the selector and there is
   530    a pseudo-element, append "<code>::</code>" followed by the name of the
   531    pseudo-class, to <var>s</var>.</p></li>
   532   </ol>
   535   <p>To
   536   <dfn id="serialize-a-simple-selector">serialize a simple selector</dfn>
   537   let <var>s</var> be the empty string, run the steps below, and
   538   finally return <var>s</var>:</p>
   540   <dl class="switch">
   541    <dt>type selector</dt>
   542    <dt>universal selector</dt>
   543    <dd>
   544     <ol>
   545      <li><p>If the <span>namespace prefix</span> maps to a namespace that is
   546      not the <span>default namespace</span> and is not the
   547      null namespace (not in a namespace) append the
   548      <span title="serialize an identifier">escaped</span>
   549      <span>namespace prefix</span>, followed by a "<code>|</code>" (U+007C)
   550      to <var>s</var>.</p></li>
   552      <li><p>If the <span>namespace prefix</span> maps to a namespace that is
   553      the null namespace (not in a namespace) append
   554      "<code>|</code>" (U+007C) to <var>s</var>.</p></li>
   555      <!-- This includes |* -->
   557      <li><p>If this is a type selector append the
   558      <span title="serialize an identifier">escaped</span> element name to
   559      <var>s</var>.</p></li>
   561      <li><p>If this is a universal selector append "<code>*</code>" (U+002A)
   562      to <var>s</var>.</p></li>
   563     </ol>
   564    </dd>
   566    <dt>attribute selector</dt>
   567    <dd>
   568     <ol>
   569      <li><p>Append "<code>[</code>" (U+005B) to
   570      <var>s</var>.</p></li>
   572      <li><p>If the <span>namespace prefix</span> maps to a namespace that is
   573      not the null namespace (not in a namespace) append the
   574      <span title="serialize an identifier">escaped</span>
   575      <span>namespace prefix</span>, followed by a "<code>|</code>" (U+007C)
   576      to <var>s</var>.</p></li>
   578      <li><p>If the <span>namespace prefix</span> maps to a namespace that is
   579      the null namespace (not in a namespace) append
   580      "<code>|</code>" (U+007C) to <var>s</var>.</p></li>
   581      <!-- This includes |* -->
   583      <li><p>Append the <span title="serialize an identifier">escaped</span>
   584      attribute name to <var>s</var>.</p></li>
   586      <li><p>If there is an attribute value specified, append
   587      "<code>=</code>",
   588      "<code>~=</code>",
   589      "<code>|=</code>",
   590      "<code>^=</code>",
   591      "<code>$=</code>", or
   592      "<code>*=</code>"
   593      as appropriate (depending on the type of attribute selector), followed
   594      by the <span title="serialize a string">string escaped</span>
   595      attribute value, to <var>s</var>.</p></li>
   597      <li><p>Append "<code>]</code>" (U+005D) to
   598      <var>s</vaR>.</p></li>
   599     </ol>
   600    </dd>
   602    <dt>class selector</dt>
   603    <dd><p>Append a "<code>.</code>" (U+002E), followed by the
   604    <span title="serialize an identifier">escaped</span> class name to
   605    <var>s</var>.</p></dd>
   607    <dt>ID selector</dt>
   608    <dd><p>Append a "<code>#</code>" (U+0023), followed by the
   609    <span title="serialize an identifier">escaped</span> ID to
   610    <var>s</var>.</p></dd>
   612    <dt>pseudo-class</dt>
   613    <dd>
   614     <p>If the pseudo-class does not accept arguments append
   615     "<code>:</code>" (U+003A), followed by the name of the pseudo-class, to
   616     <var>s</var>.</p>
   618     <p>Otherwise, append "<code>:</code>" (U+003A), followed by the name of
   619     the pseudo-class, followed by "<code>(</code>" (U+0028), followed by the
   620     value of the pseudo-class argument determined as per below, followed by
   621     "<code>)</code>" (U+0029), to <var>s</var>.</p>
   623     <dl class="switch">
   624      <dt><code>:lang()</code></dt>
   625      <dd><p>The <span title="serialize an identifier">escaped</span>
   626      value.</p></dd>
   628      <dt><code>:nth-child()</code></dt>
   629      <dt><code>:nth-last-child()</code></dt>
   630      <dt><code>:nth-of-type()</code></dt>
   631      <dt><code>:nth-last-of-type()</code></dt>
   632      <dd>
   633       <ol>
   634        <li><p>If the value is odd let the value be
   635        "<code>2n+1</code>".</p></li>
   637        <li><p>If the value is even let the value be
   638        "<code>2n</code>".</p></li>
   640        <li><p>If <var>a</var> is zero let the value be
   641        <var>b</var>
   642        <span title="serialize a CSS component value">serialized</span> as &lt;integer>.</p></li>
   644        <li><p>If <var>a</var> is one or minus one and
   645        <var>b</var> is zero let the value be
   646        "<code>n</code>" (U+006E).</p></li>
   648        <li><p>If <var>a</var> is one or minus one let the value be
   649        "<code>n</code>" (U+006E), followed by
   650        "<code>+</code>" (U+002B) if <var>b</var> is positive,
   651        followed by <var>b</var>
   652        <span title="serialize a CSS component value">serialized</span> as &lt;integer>.</p></li>
   654        <li><p>If <var>b</var> is zero let the value be
   655        <var>a</var>
   656        <span title="serialize a CSS component value">serialized</span> as &lt;integer>,
   657        followed by "<code>n</code>" (U+006E).</p></li>
   659        <li><p>Otherwise let the value be
   660        <var>a</var>
   661        <span title="serialize a CSS component value">serialized</span> as &lt;integer>,
   662        followed by "<code>n</code>" (U+006E), followed by
   663        "<code>+</code>" (U+002B) if <var>b</var> is positive,
   664        followed by <var>b</var>
   665        <span title="serialize a CSS component value">serialized</span> as &lt;integer>.</p></li>
   666       </ol>
   667      </dd>
   669      <dt><code>:not()</code></dt>
   670      <dd><p>The result of serializing the value using the rules for
   671      <span title="serialize a group of selectors">serializing a group of selectors</span>.</p></dd>
   672     </dl>
   673    </dd>
   674   </dl>
   676   <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
   678   <h2>CSS</h2>
   680   <!-- ........................................................................................................................ -->
   681   <!-- ........................................................................................................................ -->
   683   <h3>CSS Style Sheets</h3>
   685   <!-- XXX
   686    element inserted into the DOM, style sheet created, element removed from
   687    the DOM, what happens to StyleSheet?
   688   -->
   690   <p>A <dfn id="css-style-sheet">CSS style sheet</dfn> is an abstract concept that
   691   represents a style sheet as defined by the CSS specification. In the CSSOM a
   692   <span>CSS style sheet</span> is represented as a <code>CSSStyleSheet</code> object. A
   693   <span>CSS style sheet</span> has a number of associated state items:</p>
   695   <dl>
   696    <dt><dfn id="style-sheet-type">style sheet type</dfn></dt>
   697    <dd><p>The literal string "<code>text/css</code>".</p></dd>
   699    <dt><dfn id="style-sheet-location">style sheet location</dfn></dt>
   700    <dd><p>The <span data-anolis-spec=html>URL</span> of the
   701    <span>style sheet</span> or null if the <span>style sheet</span> was
   702    embedded.</p></dd>
   704    <dt><dfn id="style-sheet-parent">style sheet parent</dfn></dt>
   705    <dd><p>The <span>style sheet</span> that is the parent of the
   706    <span>style sheet</span>.</p></dd>
   708    <dt><dfn id="style-sheet-owner-node">style sheet owner node</dfn></dt>
   709    <dd><p>The DOM node associated with the <span>style sheet</span> or
   710    null if there is no associated DOM node.</p></dd>
   712    <dt><dfn id="style-sheet-owner-css-rule">style sheet owner CSS rule</dfn></dt>
   713    <dd><p>The <span>CSS rule</span> in the <span>style sheet parent</span>
   714    that caused the inclusion of the <span>style sheet</span> or null if
   715    there is no such <span>CSS rule</span>.</p></dd>
   717    <dt><dfn id="style-sheet-media">style sheet media</dfn></dt>
   718    <dd>
   719     <p>The <code>MediaList</code> object associated with the
   720     <span>style sheet</span>.</p>
   722     <p>If this property is set to a string run the
   723     <span>create a <code>MediaList</code> object</span> steps for that
   724     string and associate the returned object with the
   725     <span>style sheet</span>.</p>
   726    </dd>
   728    <dt><dfn id="style-sheet-title">style sheet title</dfn></dt>
   729    <dd>
   730     <p>The title of the <span>style sheet</span>. It is said to be empty
   731     if the title is the empty string.</p>
   733     <div class="example">
   734      <p>In these examples the <span>style sheet title</span> ends up being
   735      empty:</p>
   737      <pre>&lt;style> body { background:papayawhip } &lt;/style></pre>
   739      <pre>&lt;style> body { background:orange } &lt;/style></pre>
   740     </div>
   741    </dd>
   743    <dt><dfn id="style-sheet-alternate-flag">style sheet alternate flag</dfn></dt>
   744    <dd>
   745     <p>Either set or unset. Unset by default.</p>
   747     <div class="example">
   748      <p>The following <span title="style sheet">style sheets</span> have
   749      their <span>style sheet alternate flag</span> set:</p>
   751      <pre><code>&lt;?xml-stylesheet alternate="yes" title="x" href="data:text/css,&hellip;"?></code></pre>
   753      <pre><code>&lt;link rel="alternate stylesheet" title="x" href="data:text/css,&hellip;"></code></pre>
   754     </div>
   755    </dd>
   757    <dt><dfn id="style-sheet-disabled-flag">style sheet disabled flag</dfn></dt>
   758    <dd>
   759     <p>Either set or unset. Unset by default.</p>
   761     <p class="note">Even when unset it does not necessarily mean that the
   762     <span>style sheet</span> is actually used for rendering.</p>
   763    </dd>
   766    <dt><dfn id="style-sheet-css-rules">style sheet CSS rules</dfn></dt>
   767    <dd><p>The <span title="CSS rule">CSS rules</span> associated with the
   768    <span>style sheet</span>.</p></dd>
   769   </dl>
   771   <p>When you are to <span>create a style sheet</span> the above properties,
   772   with the exception of <span>style sheet type</span> and
   773   <span>style sheet CSS rules</span>, are to be set to
   774   their proper values.</p>
   776   <!-- same-origin restrictions -->
   778   <!-- ........................................................................................................................ -->
   780   <h4>The <code>StyleSheet</code> Interface</h4>
   782   <!--{@idl(StyleSheet)}-->
   784   <!-- ........................................................................................................................ -->
   786   <h4>The <code>CSSStyleSheet</code> Interface</h4>
   788   <!--{@idl(CSSStyleSheet)}-->
   790   <!-- ........................................................................................................................ -->
   791   <!-- ........................................................................................................................ -->
   793   <h3>Style Sheet Collections</h3>
   795   <p>Below various new concepts are defined that are associated with each
   796   <code data-anolis-spec=dom>Document</code> object.</p>
   798   <p>Each <code data-anolis-spec=dom>Document</code> has an associated list of zero or more
   799   <span title="style sheet">style sheets</span>, named the
   800   <dfn id="document-style-sheets">document style sheets</dfn>. This is
   801   an ordered list that contains all
   802   <span title="style sheet">style sheets</span> associated with the
   803   <code data-anolis-spec=dom>Document</code>, in
   804   <span data-anolis-spec=dom title=concept-tree-order>tree order</span>, with
   805   <span title="style sheet">style sheets</span> created from HTTP
   806   <code title="http-link">Link</code> headers first, if any, in header
   807   order.</p>
   809   <p>To <dfn id="create-a-style-sheet">create a style sheet</dfn>, run these
   810   steps:</p>
   812   <ol>
   813    <li><p>Create a new <span>style sheet</span> object and set its
   814    properties as specified.</p></li>
   816    <li><p>Then run the <span>add a style sheet</span> steps for the newly
   817    created <span>style sheet</span>.</p></li>
   818   </ol>
   820   <p>To <dfn id="add-a-style-sheet">add a style sheet</dfn>, run these
   821   steps:</p>
   823   <ol>
   824    <li><p>Add the <span>style sheet</span> to the list of
   825    <span>document style sheets</span> at the appropriate location. The
   826    remainder of these steps deal with the
   827    <span>style sheet disabled flag</span>.</p></li>
   829    <li><p>If the <span>style sheet disabled flag</span> is set, terminate
   830    these steps.</p></li>
   832    <li><p>If the <span>style sheet title</span> is non-empty, the
   833    <span>style sheet alternate flag</span> is unset, and
   834    <span>preferred style sheet set name</span> is the empty string
   835    <span>change the preferred style sheet set name</span> to the
   836    <span>style sheet title</span>.</p></li>
   838    <li>
   839     <p>If any of the following is true unset the
   840     <span>style sheet disabled flag</span> and terminate these steps:
   842     <ul>
   843      <li><p>The <span>style sheet title</span> is empty.</p></li>
   844      <li><p>The <span>last style sheet set name</span> is null and the
   845      <span>style sheet title</span> is a
   846      <span data-anolis-spec=dom>case-sensitive</span> match
   847      for the <span>preferred style sheet set name</span>.</p></li>
   848      <li><p>The <span>style sheet title</span> is a
   849      <span data-anolis-spec=dom>case-sensitive</span> match for the
   850      <span>last style sheet set name</span>.</p></li>
   851     </ul>
   852    </li>
   854    <li><p>Set the <span>style sheet disabled flag</span>.</li>
   855   </ol>
   857   <p>A <dfn id="persistent-style-sheet">persistent style sheet</dfn> is a
   858   <span>style sheet</span> from the <span>document style sheets</span>
   859   whose <span>style sheet title</span> is the empty string and whose
   860   <span>style sheet alternate flag</span> is unset.</p>
   862   <p>A <dfn id="style-sheet-set">style sheet set</dfn> is an ordered
   863   collection of one or more <span title="style sheet">style sheets</span>
   864   from the <span>document style sheets</span> which have an identical
   865   <span>style sheet title</span> that is not the empty string.</p>
   867   <p>A <dfn id="style-sheet-set-name">style sheet set name</dfn> is the
   868   <span>style sheet title</span> the <span>style sheet set</span> has in
   869   common.</p>
   871   <p>An <dfn id="enabled-style-sheet-set">enabled style sheet set</dfn> is a
   872   <span>style sheet set</span> of which each <span>style sheet</span> has
   873   its <span>style sheet disabled flag</span> unset.</p>
   875   <p>To <dfn id="enable-a-style-sheet-set">enable a style sheet set</dfn>
   876   with name <var>name</var>, run these steps:</p>
   878   <ol>
   879    <li><p>If <var>name</var> is the empty string, set the
   880    <span>style sheet disabled flag</span> for each <span>style sheet</span>
   881    that is in a <span>style sheet set</span> and terminate these steps.</li>
   883    <li><p>Unset the <span>style sheet disabled flag</span> for each
   884    <span>style sheet</span> in a <span>style sheet set</span> whose
   885    <span>style sheet set name</span> is a
   886    <span data-anolis-spec=dom>case-sensitive</span> match for
   887    <var>name</var> and set it for all other
   888    <span title="style sheet">style sheets</span> in a
   889    <span>style sheet set</span>.</p></li>
   890   </ol>
   892   <p>To <dfn id="select-a-style-sheet-set">select a style sheet set</dfn>
   893   with name <var>name</var>, run these steps:</p>
   895   <ol>
   896    <li><p><span>Enable a style sheet set</span> with name
   897    <var>name</var>.</p></li>
   899    <li><p>Set <span>last style sheet set name</span> to
   900    <var>name</var>.</p></li>
   901   </ol>
   903   <p>A <dfn id="last-style-sheet-set-name">last style sheet set name</dfn>
   904   is a concept to determine what <span>style sheet set</span> was last
   905   <span title="select a style sheet set">selected</span>. Initially its
   906   value is null.</p>
   908   <p>A
   909   <dfn id="preferred-style-sheet-set-name">preferred style sheet set name</dfn>
   910   is a concept to determine which
   911   <span title="style sheet">style sheets</span> need to have their
   912   <span>style sheet disabled flag</span> unset. Initially its value
   913   is the empty string.
   915   <p>To
   916   <dfn id="change-the-preferred-style-sheet-set-name">change the preferred style sheet set name</dfn>
   917   with name <var>name</var>, run these steps:</p>
   919   <ol>
   920    <li><p>Let <var>current</var> be the <span>preferred style sheet set name</span>.</p></li>
   922    <li><p>Set <span>preferred style sheet set name</span> to
   923    <var>name</var>.</p></li>
   925    <li><p>If <var>name</var> is not a
   926    <span data-anolis-spec=dom>case-sensitive</span> match for
   927    <var>current</var> and
   928    <span>last style sheet set name</span> is null
   929    <span>enable a style sheet set</span> with name
   930    <var>name</var>.</p></li>
   931   </ol>
   933   <!-- XXX ought to define "applied"
   935   thoughts:
   936     depends on disabled flag, alternate flag, media queries, sheesh
   937    -->
   939   <!-- ........................................................................................................................ -->
   941   <h4>The HTTP <code>Default-Style</code> Header</h4>
   943   <p>The HTTP <code title="http-default-style">Default-Style</code> header
   944   can be used to set the <span>preferred style sheet set name</span>
   945   influencing which <span>style sheet set</span> is (initially) the
   946   <span>enabled style sheet set</span>.</p>
   948   <p>For each HTTP <code title="http-default-style">Default-Style</code>
   949   header, in header order, the user agent must
   950   <span>change the preferred style sheet set name</span> with name being the
   951   value of the header.</p>
   953   <!-- ........................................................................................................................ -->
   955   <h4>The <code>StyleSheetList</code> Sequence</h4>
   957   <!--{@idl(StyleSheetList)}-->
   959   <!-- ........................................................................................................................ -->
   961   <h4>Extensions to the <code>Document</code> Interface</h4>
   963   <!--{@idl(Document)}-->
   965   <!-- ........................................................................................................................ -->
   967   <h4>Interaction with the User Interface</h4>
   969   <p>The user interface of Web browsers that support style sheets
   970   should list the style sheet titles given in the
   971   <code title="dom-Document-styleSheetSets">styleSheetSets</code> list,
   972   showing the
   973   <code title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code>
   974   as the selected style sheet set, leaving none selected if it is
   975   null or the empty string, and selecting an extra option
   976   "Basic Page Style" (or similar) if it is the empty string and the
   977   <code title="dom-Document-preferredStyleSheetSet">preferredStyleSheetSet</code>
   978   is the empty string as well.</p>
   980   <p>Selecting a style sheet from this list should
   981   use the <span>select a style sheet set</span> set of steps. This
   982   (by definition) affects the
   983   <code title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code>
   984   attribute.</p>
   986   <h5>Persisting the selected style sheet set</h5>
   988   <p>If a user agent persist the selected style sheet set, they should use
   989   the value of the
   990   <code title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code>
   991   attribute, or if that is null, the
   992   <code title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code>
   993   attribute, when leaving the page (or at some other time) to determine the
   994   set name to store. If that is null then the style sheet set should not be
   995   persisted.</p>
   997   <p>When re-setting the style sheet set to the persisted value (which can
   998   happen at any time, typically at the first time the style sheets are
   999   needed for styling the document, after the <code>&lt;head&gt;</code> of
  1000   the document has been parsed, after any scripts that are not dependent on
  1001   computed style have executed), the style sheet set
  1002   should be set by using the
  1003   <span>select a style sheet set</span> set of steps as if the user had
  1004   selected the set manually.</p>
  1006   <p class="note">This specification does not give any suggestions on
  1007   how user agents should decide to persist the style sheet set or whether or
  1008   how to persist the selected set across pages.</p>
  1010   <!-- XXX this UI section suggests we may want to introduce a few more
  1011        idioms -->
  1013   <!-- ........................................................................................................................ -->
  1015   <h4>Examples</h4>
  1017   <div class="example">
  1018    <p>Thus, in the following HTML snippet:</p>
  1020    <pre>&lt;link rel="alternate stylesheet" title="foo" href="a"&gt;
  1021 &lt;link rel="alternate stylesheet" title="bar" href="b"&gt;
  1022 &lt;script&gt;
  1023   document.selectedStyleSheetSet = 'foo';
  1024   document.styleSheets[1].disabled = false;
  1025 &lt;/script&gt;
  1026 &lt;link rel="alternate stylesheet" title="foo" href="c"&gt;
  1027 &lt;link rel="alternate stylesheet" title="bar" href="d"&gt;</pre>
  1029    <p>...the style sheets that end up enabled are style sheets "a", "b",
  1030    and "c", the
  1031    <code title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code>
  1032    attribute would return null,
  1033    <code title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code>
  1034    would return "foo", and
  1035    <code title="dom-Document-preferredStyleSheetSet">preferredStyleSheetSet</code>
  1036    would return the empty string.</p>
  1038    <p>Similarly, in the following HTML snippet:</p>
  1040    <pre>&lt;link rel="alternate stylesheet" title="foo" href="a"&gt;
  1041 &lt;link rel="alternate stylesheet" title="bar" href="b"&gt;
  1042 &lt;script&gt;
  1043   var before = document.preferredStyleSheetSet;
  1044   document.styleSheets[1].disabled = false;
  1045 &lt;/script&gt;
  1046 &lt;link rel="stylesheet" title="foo" href="c"&gt;
  1047 &lt;link rel="alternate stylesheet" title="bar" href="d"&gt;
  1048 &lt;script&gt;
  1049   var after = document.preferredStyleSheetSet;
  1050 &lt;/script&gt;</pre>
  1052    <p>...the "before" variable will be equal to the empty string, the
  1053    "after" variable will be equal to "foo", and style sheets "a" and "c"
  1054    will be enabled. This is the case even though the first script block
  1055    sets style sheet "b" to be enabled, because upon parsing the
  1056    following <code>&lt;link&gt;</code> element, the
  1057    <code title="dom-Document-preferredStyleSheetSet">preferredStyleSheetSet</code>
  1058    is set and the
  1059    <code title="dom-Document-enableStyleSheetsForSet">enableStyleSheetsForSet()</code>
  1060    method is called (since
  1061    <code title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code>
  1062    was never set
  1063    explicitly, leaving
  1064    <code title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code> at
  1065    null throughout), which changes which style sheets are enabled and which
  1066    are not.</p>
  1067   </div>
  1069   <!-- ........................................................................................................................ -->
  1070   <!-- ........................................................................................................................ -->
  1072   <h3>Style Sheet Association</h3>
  1074   <p>This section defines the interface a
  1075   <span>style sheet owner node</span> of a <span>style sheet</span> has to
  1076   implement and defines the requirements for
  1077   <span data-anolis-spec=xmlss title="xml-stylesheet processing instruction">xml-stylesheet processing instructions</span>
  1078   and HTTP <code title="http-link">Link</code> headers when the link
  1079   relation type is an
  1080   <span data-anolis-spec=dom>ASCII case-insensitive</span> match for
  1081   "<code>stylesheet</code>" since nobody else was interested in
  1082   defining this.</p>
  1084   <p class=note>The editor is in good hope that HTML and SVG will define the
  1085   appropriate processing in their respective specifications, in terms of
  1086   this specification, in due course.</p>
  1089   <!-- ........................................................................................................................ -->
  1091   <h4>The <code>LinkStyle</code> Interface</h4>
  1093   <!--{@idl(LinkStyle)}-->
  1095   <div class="example">
  1096    <p>In the following HTML snippet the first HTML <code>style</code>
  1097    element has a <code>sheet</code> attribute that returns a
  1098    <code>StyleSheet</code> object representing the style sheet, but for
  1099    the second <code>style</code> attribute it returns null.
  1100    (Assuming the user agent supports CSS (<code>text/css</code>) and does
  1101    not support ExampleSheets (<code>text/example-sheets</code>).</p>
  1103    <pre>&lt;style type=text/css> body { background:lime } &lt;/style>
  1104 &lt;style type=text/example-sheets> $(body).background := lime &lt;/style></pre>
  1105   </div>
  1107   <p class="note">Whether or not the node refers to a style sheet is defined
  1108   by the specification that defines the semantics of said node.</p>
  1110   <!-- ........................................................................................................................ -->
  1112   <h4>Requirements on specifications</h4>
  1114   <p>Specifications introducing new ways of associating style sheets through
  1115   the DOM should define which nodes implement the
  1116   <code>LinkStyle</code> interface. When doing so, they
  1117   must also define when a <span>style sheet</span> is
  1118   <span title="create a style sheet">created</span>.</p>
  1123   <!-- ........................................................................................................................ -->
  1125   <h4>Requirements on User Agents Implementing the
  1126   <span><code>xml-stylesheet</code> processing instruction</span></h4>
  1128   <!-- XXX load/error events, reparse -->
  1130   <!--{@idl(ProcessingInstruction)}-->
  1132   <!--
  1133   <pre class="idl"><span data-anolis-spec=dom>ProcessingInstruction</span> implements <span>LinkStyle</span>;</pre>
  1134   -->
  1136   <p>For each
  1137   <span data-anolis-spec=xmlss><code>xml-stylesheet</code> processing instruction</span>
  1138   that is not part of the
  1139   <span data-anolis-spec=xml>document type declaration</span> and has an
  1140   <code>href</code>
  1141   <span data-anolis-spec=xmlss>pseudo-attribute</span> these steps must
  1142   (unless otherwise stated) be run:</p>
  1144   <ol>
  1145    <li><p>Let <var>title</var> be the value of the
  1146    <code>title</code> <span data-anolis-spec=xmlss>pseudo-attribute</span> or the empty string if the
  1147    <code>title</code> <span data-anolis-spec=xmlss>pseudo-attribute</span> is not specified.</p></li>
  1149    <li><p>If there is an <code>alternate</code> <span data-anolis-spec=xmlss>pseudo-attribute</span>
  1150    whose value is a <span data-anolis-spec=dom>case-sensitive</span> match
  1151    for "<code>yes</code>" and <var>title</var> is the
  1152    empty string terminate these steps.</p></li>
  1154    <li><p>If there is a <code>type</code> <span data-anolis-spec=xmlss>pseudo-attribute</span> whose
  1155    value is not a <span>supported styling language</span> the user agent
  1156    may terminate these steps.</p></li>
  1158    <li><p><span data-anolis-spec=html title="Resolve a URL">Resolve</span>
  1159    the <span data-anolis-spec=html>URL</span> specified by the
  1160    <code>href</code> <span data-anolis-spec=xmlss>pseudo-attribute</span> and then
  1161    <span data-anolis-spec=html>fetch</span> it.</p></li>
  1163    <li>
  1164     <p>When the resource is available, the document is in
  1165     <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span>
  1166     and the
  1167     <span data-anolis-spec=html>Content-Type metadata</span> of
  1168     the resource is not a <span>supported styling language</span> change the
  1169     <span data-anolis-spec=html>Content-Type metadata</span> of the resource
  1170     to <code>text/css</code>.</p>
  1172     <p class="note">This step might never actually happen, but is included
  1173     here in case other specifications change, to keep things consistent.</p>
  1174    </li>
  1176    <li><p>If the resource is not in a
  1177    <span>supported styling language</span> terminate these steps.</p></li>
  1179    <li>
  1180     <p><span>Create a style sheet</span> with the following properties:</p>
  1182     <dl>
  1183      <dt><span>style sheet location</span></dt>
  1184      <dd><p>The <span data-anolis-spec=html>absolute URL</span> of the
  1185      resource.</p></dd>
  1187      <dt><span>style sheet parent</span></dt>
  1188      <dd><p>null</p></dd>
  1190      <dt><span>style sheet owner node</span></dt>
  1191      <dd><p>The node.</p></dd>
  1193      <dt><span>style sheet owner CSS rule</span></dt>
  1194      <dd><p>null</p></dd>
  1196      <dt><span>style sheet media</span></dt>
  1197      <dd><p>The value of the <code>media</code> <span data-anolis-spec=xmlss>pseudo-attribute</span>
  1198      if any, or the empty string otherwise.</p></dd>
  1200      <dt><span>style sheet title</span></dt>
  1201      <dd><p><var>title</var></p></dd>
  1203      <dt><span>style sheet alternate flag</span></dt>
  1204      <dd><p>Set if the <code>alternate</code> <span data-anolis-spec=xmlss>pseudo-attribute</span>
  1205      value is a <span data-anolis-spec=dom>case-sensitive</span> match for
  1206      "<code>yes</code>", or unset otherwise.
  1207     </dl>
  1208    </li>
  1209   </ol>
  1213   <!-- ........................................................................................................................ -->
  1215   <h4>Requirements on User Agents Implementing the HTTP
  1216   <code>Link</code> Header</h4>
  1218   <!-- XXX ref, one day -->
  1220   <!-- XXX deal with media param -->
  1222   <p>For each HTTP <code title="http-link">Link</code> header of which one
  1223   of the link relation types is an
  1224   <span data-anolis-spec=dom>ASCII case-insensitive</span> match
  1225   for "<code>stylesheet</code>" these steps
  1226   must be run:</p>
  1228   <ol>
  1229    <li><p>Let <var>title</var> be the value of the first of all the
  1230    <code>title</code> and <code>title*</code> parameters.
  1231    If there are no such parameters it is the empty string.</p></li>
  1233    <li><p>If one of the (other) link relation types is an
  1234    <span data-anolis-spec=dom>ASCII case-insensitive</span> match for
  1235    "<code>alternate</code>" and <var>title</var> is the
  1236    empty string terminate these steps.</p></li>
  1238    <li><p><span data-anolis-spec=html title="Resolve a URL">Resolve</span>
  1239    the specified <span data-anolis-spec=html>URL</span> and
  1240    <span data-anolis-spec=html>fetch</span> it.</p></li>
  1242    <li><p>When the resource is available, the document is in
  1243    <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span>
  1244    and the <span data-anolis-spec=html>Content-Type metadata</span> of
  1245    the resource is not a <span>supported styling language</span> change the
  1246    <span data-anolis-spec=html>Content-Type metadata</span> of the resource
  1247    to <code>text/css</code>.</p></li>
  1249    <li><p>If the resource is not in a
  1250    <span>supported styling language</span> terminate these steps.</p></li>
  1252    <li>
  1253     <p><span>Create a style sheet</span> with the following properties:</p>
  1255     <dl>
  1256      <dt><span>style sheet location</span></dt>
  1257      <dd><p>The <span data-anolis-spec=html>absolute URL</span> of the
  1258      resource.</p></dd>
  1260      <dt><span>style sheet owner node</span></dt>
  1261      <dd><p>null</p></dd>
  1263      <dt><span>style sheet parent</span></dt>
  1264      <dd><p>null</p></dd>
  1266      <dt><span>style sheet owner CSS rule</span></dt>
  1267      <dd><p>null</p></dd>
  1269      <dt><span>style sheet media</span></dt>
  1270      <dd><p>The value of the first <code>media</code> parameter.</p></dd>
  1271      <!-- XXX register media parameter? bah -->
  1273      <dt><span>style sheet title</span></dt>
  1274      <dd><p><var>title</var></p></dd>
  1276      <dt><span>style sheet alternate flag</span></dt>
  1277      <dd><p>Set if one of the specified link relation type for this HTTP
  1278      <code title="http-link">Link</code> header is an
  1279      <span data-anolis-spec=dom>ASCII case-insensitive</span> match for
  1280      "<code>alternate</code>", or false otherwise.
  1281     </dl>
  1282    </li>
  1283   </ol>
  1285   <!-- ........................................................................................................................ -->
  1286   <!-- ........................................................................................................................ -->
  1288   <h3>CSS Rules</h3>
  1290   <p>A <dfn id="rule">CSS rule</dfn> is an abstract concept that
  1291   represents a rule as defined by the CSS specification. In the CSSOM a
  1292   <span>CSS rule</span> is represented as an object that implements a subclass of
  1293   the <code>CSSRule</code> interface. A <span>CSS rule</span> has the following
  1294   associated state items:</p>
  1296   <dl>
  1297   <dt><dfn id="rule-type">rule type</dfn></dt>
  1298   <dd><p>A non-negative integer associated with a particular type of rule.
  1299   This item is initialized when a rule is created and must never change.</p></dd>
  1301   <dt><dfn id="rule-text">rule text</dfn></dt>
  1302   <dd><p>A text representation of the rule suitable for direct use in a style sheet.
  1303   This item is initialized when a rule is created, and may change over the lifetime of the rule.</p></dd>
  1305   <dt><dfn id="rule-parent">rule parent</dfn></dt>
  1306   <dd><p>An optional reference to another, enclosing <span>CSS rule</span>.
  1307   If the rule has an enclosing rule when it is created, then this item is initialized to the enclosing rule; otherwise it is null.
  1308   Subsequent to initialization, this item is reset to null if the rule becomes non-enclosed. Once reset to null, it must never change.</p></dd>
  1310   <dt><dfn id="rule-style-sheet">rule parent style sheet</dfn></dt>
  1311   <dd><p>An optional reference to an associated <span>CSS style sheet</span>.
  1312   This item is initialized to reference an associated style sheet when the rule is created. Subsequent to initialization, this item
  1313   is reset to null if the rule becomes disassociated from its initial style sheet. Once reset to null, it must never change.</p></dd>
  1314   </dl>
  1316   <p>In addition to the above state, each <span>CSS rule</span> may be associated
  1317   with other state in accordance to the <span>rule type</span>.</p>
  1319   <p>To <dfn>parse a CSS rule</dfn> ...</p>
  1321   <p>To <dfn>serialize a CSS rule</dfn> depends on the type of CSS rule, as
  1322   follows:</p>
  1324   <dl class="switch">
  1325    <dt><code>CSSStyleRule</code></dt>
  1326    <dd><p class="issue">...</p></dd>
  1328    <dt><code>CSSCharsetRule</code></dt>
  1329    <dd><p class="issue">...</p></dd>
  1331    <dt><code>CSSImportRule</code></dt>
  1332    <dd>
  1333     <p>The result of concatenating these strings:</p>
  1334     <ol>
  1335      <li>The literal string "<code>@import</code>", followed by a space
  1336      (U+0020), followed by the <span title="serialize a URL">URL escaped</span>
  1337      value of the <code title="dom-CSSImportRule-href">href</code>
  1338      attribute.</li>
  1339      <li>If the associated <code>MediaList</code> object is not empty, a
  1340      space (U+0020), followed by the value of the
  1341      <code title="dom-MediaList-mediaText">mediaText</code> attribute of the
  1342      associated <code>MediaList</code> object.</li>
  1343      <li>A "<code>;</code>" (U+003B).</li>
  1344     </ol>
  1345    </dd>
  1347    <dt><code>CSSMediaRule</code></dt>
  1348    <dd><p class="issue">...</p></dd>
  1350    <dt><code>CSSFontFaceRule</code></dt>
  1351    <dd><p class="issue">...</p></dd>
  1353    <dt><code>CSSPageRule</code></dt>
  1354    <dd><p class="issue">...</p></dd>
  1356    <dt><code>CSSNamespaceRule</code></dt>
  1357    <dd><p>The literal string "<code>@namespace</code>", followed by a space
  1358    (U+0020), followed by the
  1359    <span title="serialize an identifier">identifier escaped</span> value of the
  1360    <code title="dom-CSSNamespaceRule-prefix">prefix</code> attribute (if
  1361    any), followed by a space (U+0020) if there is a prefix, followed by the
  1362    <span title="serialize a URL">URL escaped</span> value of the
  1363    <code title="dom-CSSNamespaceRule-namespaceURI">namespaceURI</code>
  1364    attribute, followed the character "<code>;</code>" (U+003B).</p></dd>
  1365   </dl>
  1367   <!-- ........................................................................................................................ -->
  1369   <h4>The <code>CSSRuleList</code> Sequence</h4>
  1371   <!--{@idl(CSSRuleList)}-->
  1373   <!-- ........................................................................................................................ -->
  1375   <h4>The <code>CSSRule</code> Interface</h4>
  1377   <!--{@idl(CSSRule)}-->
  1379   <!-- ........................................................................................................................ -->
  1381   <h4>The <code>CSSStyleRule</code> Interface</h4>
  1383   <!--{@idl(CSSStyleRule)}-->
  1385   <!-- ........................................................................................................................ -->
  1387   <h4>The <code>CSSCharsetRule</code> Interface</h4>
  1389   <!--{@idl(CSSCharsetRule)}-->
  1391   <!-- ........................................................................................................................ -->
  1393   <h4>The <code>CSSImportRule</code> Interface</h4>
  1395   <!--{@idl(CSSImportRule)}-->
  1397   <!-- ........................................................................................................................ -->
  1399   <h4>The <code>CSSMediaRule</code> Interface</h4>
  1401   <!--{@idl(CSSMediaRule)}-->
  1403   <!-- ........................................................................................................................ -->
  1405   <h4>The <code>CSSFontFaceRule</code> Interface</h4>
  1407   <!--{@idl(CSSFontFaceRule)}-->
  1409   <!-- ........................................................................................................................ -->
  1411   <h4>The <code>CSSPageRule</code> Interface</h4>
  1413   <!--{@idl(CSSPageRule)}-->
  1415   <!-- ........................................................................................................................ -->
  1417   <h4>The <code>CSSNamespaceRule</code> Interface</h4>
  1419   <!--{@idl(CSSNamespaceRule)}-->
  1421   <!-- ........................................................................................................................ -->
  1422   <!-- ........................................................................................................................ -->
  1424   <h3>CSS Declaration Blocks</h3>
  1426   <p>A <dfn>CSS declaration block</dfn> is an ordered collection of CSS
  1427   properties with their associated values, also named CSS declarations. In
  1428   the DOM a <span>CSS declaration block</span> is a
  1429   <code>CSSStyleDeclaration</code> object. A
  1430   <span>CSS declaration block</span> has two associated properties:</p>
  1432   <dl>
  1433    <dt><dfn>CSS declaration block readonly flag</dfn></dt>
  1434    <dd><p>Unset if the object can be manipulated. Set if it can not be
  1435    manipulated. Unless otherwise stated it is unset.</p></dd>
  1437    <dt><dfn>CSS declaration block declarations</dfn></dt>
  1438    <dd><p>The CSS declarations associated with the object.</p></dd>
  1439   </dl>
  1441   <p class="note">The <span>CSS declaration block declarations</span> are
  1442   ordered. This matters for the
  1443   <code title="dom-CSSStyleDeclaration-item">item()</code> method.</p>
  1446   <p class="issue">To
  1447   <dfn id="parse-a-css-declaration-block">parse a CSS declaration block</dfn>
  1448   ...</p>
  1450   <p>To <dfn id="serialize-a-css-declaration-block">serialize a CSS declaration block</dfn>
  1451   represented by a <code>CSSStyleDeclarations</code> instance named <var>d</var>,
  1452   let <var>s</var> be the empty string, then run the steps below:</p>
  1454   <ol>
  1455     <li><p>If <code><var>d</var>.length</code> is zero (0), then return <var>s</var>.</p></li>
  1456     <li><p>For each <var>i</var> from zero (0) through <code><var>d</var>.length</code> - 1 (inclusive), perform the following sub-steps:</p>
  1457     <ol>
  1458       <li><p>Let <var>n</var> be the value returned by <code><var>d</var>.item(<var>i</var>)</code>.</p></li>
  1459       <li><p>Let <var>v</var> be the value returned by <code><var>d</var>.getPropertyValue(<var>n</var>)</code>.</p></li>
  1460       <li><p>If <var>v</var> is the empty string, then continue.</p></li>
  1461       <li><p>Otherwise (<var>v</var> is non-empty), perform the following sub-steps:</p>
  1462           <ol>
  1463             <li><p>If <var>s</var> is not empty, then append a SPACE (U+0020) to <var>s</var>.</p></li>
  1464             <li><p>Append <var>n</var> to <var>s</var>.</p></li>
  1465             <li><p>Append COLON (U+003A) followed by SPACE (U+0020), i.e., "<code>: </code>", to <var>s</var>.</p></li>
  1466             <li><p>Append <var>v</var> to <var>s</var>.</p></li>
  1467           </ol>
  1468       </li>
  1469       <li><p>Let <var>p</var> be the value returned by <code><var>d</var>.getPropertyPriority(<var>n</var>)</code>.</p></li>
  1470       <li><p>If <var>p</var> is not the empty string, then perform the following sub-steps:</p>
  1471           <ol>
  1472             <li><p>Append SPACE (U+0020) followed by EXCLAMATION MARK (U+0021), i.e., "<code> !</code>", to <var>s</var>.</p></li>
  1473             <li><p>Append <var>p</var> to <var>s</var>.</p></li>
  1474           </ol>
  1475       </li>
  1476       <li><p>Append SEMICOLON (U+003B), i.e., "<code>;</code>", to <var>s</var>.</p></li>
  1477     </ol>
  1478     </li>
  1479     <li><p>Return <var>s</var>.</p></li>
  1480   </ol>
  1482   <p class="note">The serialization of an empty CSS declaration block is the empty string.</p>
  1484   <p class="note">The serialization of a non-empty CSS declaration block does not include any surrounding whitespace, i.e., no whitepsace appears
  1485   before the first property name and no whitespace appears after the final semicolon delimiter that follows the last property value.</p>
  1487   <!-- ........................................................................................................................ -->
  1489   <h4>The <code>CSSStyleDeclaration</code> Interface</h4>
  1491   <!--{@idl(CSSStyleDeclaration)}-->
  1493   <hr>
  1495   <p>For the table below, the IDL attribute in the first column
  1496   must return the result of invoking
  1497   <code title="dom-CSSStyleDeclaration-getPropertyValue">getPropertyValue()</code>
  1498   with as argument the CSS property given in the second column on the same
  1499   row.</p>
  1501   <p>Similarly for the table below, setting the IDL attribute in the
  1502   first column must invoke
  1503   <code title="dom-CSSStyleDeclaration-setProperty">setProperty()</code>
  1504   with as first argument the CSS property given in the second column on the
  1505   same row, as second argument the given value, and no third argument. Any
  1506   exceptions thrown must be re-thrown.</p>
  1508   <p class="issue">Restore the entries for the following table or resurrect
  1509   CSS2Properties (or similar) or define in general terms using prose or ...</p>
  1511   <table>
  1512    <thead>
  1513     <tr>
  1514      <th>IDL attribute
  1515      <th>CSS property
  1516    <tbody>
  1517 <!--CSSOM-DECLARATIONTABLE-->
  1518   </table>
  1520 <!--
  1521   <h4>CSS Properties</h4>
  1523   <p>The DOM attribute name of a CSS property can be found by using the
  1524   following algorithm:</p>
  1526   <ol>
  1527    <li>Let <var>r</var> be the CSS property to be
  1528    converted.</li>
  1530    <li>Uppercase the first character after every U+002D (<code>-</code>) in
  1531    <var>r</var>.</li>
  1533    <li>Remove every U+002D (<code>-</code>) in <var>r</var>.</li>
  1535    <li>Return <var>r</var>.</li>
  1536   </ol>
  1538   <p class="note">This means that
  1539   <code>-<var>vendor</var>-<var>property</var></code>
  1540   becomes
  1541   <code><var><strong>V</strong>endor</var><var><strong>P</strong>roperty</var></code>
  1542   for instance.</p>
  1543 -->
  1545   <!-- ........................................................................................................................ -->
  1546   <!-- ........................................................................................................................ -->
  1548   <h3>CSS Values</h3>
  1550   <!-- ........................................................................................................................ -->
  1552   <h4>Parsing CSS Values</h4>
  1554   <p>To <dfn id="parse-a-css-value">parse a CSS value</dfn> for a given
  1555   <var>property</var> means to a parse the given value according to
  1556   the definition of the property that is an
  1557   <span data-anolis-spec=dom>ASCII case-insensitive</span> match for
  1558   <var>property</var> in the CSS specification. If the given value
  1559   is <span>ignored</span> return null. Otherwise return the CSS value for
  1560   the given <var>property</var>.</p>
  1562   <p class="note">"<code>!important</code>" declarations are not
  1563   part of the property value space and will therefore cause
  1564   <span>parse a CSS value</span> to return null.</p>
  1567   <!-- ........................................................................................................................ -->
  1569   <h4>Serializing CSS Values</h4>
  1571   <!-- based on http://damowmow.com/playground/canon.txt -->
  1573   <p>To <dfn id="serialize-a-css-value">serialize a CSS value</dfn> follow
  1574   these rules:</p>
  1576   <ul>
  1577    <li><p><span title="Serialize a CSS component value">Serialize</span> any
  1578    CSS component values in the value.</p></li>
  1580    <li><p>Where multiple CSS component values can appear in any order
  1581    without changing the meaning of the value (typically represented by a
  1582    double bar <code>||</code> in the value syntax), use the order as given
  1583    in the syntax.</p></li>
  1584    <!-- <code>&lt;border-width> &lt;border-style> &lt;color></code>
  1585    for <code>border</code> -->
  1587    <li>
  1588     <p>Where CSS component values of the value can be omitted without
  1589     changing the meaning of the value (e.g. initial values in shorthand
  1590     properties), omit them. If this would remove all the values, then
  1591     include the first allowed value.</p>
  1593     <p class="example">E.g. <code>margin: 20px 20px</code> becomes
  1594     <code>margin: 20px</code>.</p>
  1596     <p class="example">E.g. the value <code>0</code> for the
  1597     '<code>border</code>' property.</p>
  1598    </li>
  1600    <li><p>If the value of a shorthand property is requested and it cannot be
  1601    computed because the properties associated with the shorthand have values
  1602    that cannot be represented by the shorthand the serialization is the
  1603    empty string.</p></li>
  1605    <li><p>If a value has a <span>whitespace</span>-separated list of
  1606    CSS component values,
  1607    <span title="serialize a whitespace-separated list">serialize</span> the
  1608    value as a whitespace-separated list.</p></li>
  1610    <li><p>If a value has a comma-separated list of
  1611    CSS component values,
  1612    <span title="serialize a comma-separated list">serialize</span> the
  1613    value as a comma-separated list.</p></li>
  1614   </ul>
  1617   <p>To
  1618   <dfn id="serialize-a-css-value-component">serialize a CSS component value</dfn>
  1619   depends on the component, as follows:</p>
  1621   <dl class="switch">
  1622    <dt>keyword</dt>
  1623    <dd><p>The keyword
  1624    <span data-anolis-spec=dom>converted to ASCII lowercase</span>.</p></dd>
  1626    <dt>&lt;angle></dt>
  1627    <dd><p>The number of degrees serialized as per &lt;number> followed by
  1628    the literal string "<code>deg</code>".</p></dd>
  1630    <dt>&lt;color></dt>
  1631    <dd>
  1632    <p>If &lt;color&gt; is a component of a resolved or computed value, then
  1633    return the color using the <code>rgb()</code> or <code>rgba()</code> functional
  1634    notation as follows:</p>
  1635    <ol>
  1636    <li>If the alpha component of the color is equal to one, then return the serialization of the
  1637    <code>rgb()</code> functional equivalent of the opaque color.</li>
  1638    <li>If the alpha component of the color is not equal to one, then return the serialization of the
  1639    <code>rgba()</code> functional equivalent of the non-opaque color.</li>
  1640    </ol>
  1641    <p>The serialization of the <code>rgb()</code> functional equivalent is the concatenation of the following:</p>
  1642    <ol>
  1643    <li>The string "<code>rgb(</code>".</li>
  1644    <li>The shortest base-ten integer serialization of the red value.</li>
  1645    <li>The string "<code>, </code>".</li>
  1646    <li>The shortest base-ten serialization of the green value.</li>
  1647    <li>The string "<code>, </code>".</li>
  1648    <li>The shortest base-ten serialization of the blue value.</li>
  1649    <li>The string "<code>)</code>".</li>
  1650    </ol>
  1651    <p>The serialization of the <code>rgba()</code> functional equivalent is the concatenation of the following:</p>
  1652    <ol>
  1653    <li>The string "<code>rgba(</code>".</li>
  1654    <li>The shortest base-ten serialization of the red value.</li>
  1655    <li>The string "<code>, </code>".</li>
  1656    <li>The shortest base-ten serialization of the green value.</li>
  1657    <li>The string "<code>, </code>".</li>
  1658    <li>The shortest base-ten serialization of the blue value.</li>
  1659    <li>The string "<code>, </code>".</li>
  1660    <li>The shortest serialization of the &lt;number&gt; that denotes the alpha value.</li>
  1661    <li>The string "<code>)</code>".</li>
  1662    </ol>
  1664    <p>If &lt;color&gt; is a component of a specified value, then
  1665    return the color as follows:</p>
  1666    <ol>
  1667    <li>If the color was explicitly specified by the author, then return the original, author specified color value.</li>
  1668    <li>Otherwise, return the value that would be returned if the color were a component of a computed value.</li>
  1669    </ol>
  1670    <p class="issue">Should author specified values be normalized for case? Or should original case be preserved?</p>
  1671    </dd>
  1672    <!--
  1673      <dt>It is a system color</dt>
  1675      <dd>See below (you use the representation given in the specification that
  1676      defines the keyword).</dd>
  1678      <dt>Alpha component is equal to 1.0</dt>
  1680      <dd>The color is an uppercase six-digit hexadecimal value, prefixed with a
  1681      <code>#</code> character (U+0023 NUMBER SIGN), with the first two digits
  1682      representing the red component, the next two digits representing the green
  1683      component, and the last two digits representing the blue component, the
  1684      digits being in the range 0-9 A-F (U+0030 to U+0039 and U+0041 to
  1685      U+0046).</dd>
  1687      <dt>Alpha component is less than 1.0</dt>
  1689      <dd>The color is in the CSS <code>rgba()</code> functional-notation format:
  1690      the literal string <code>rgba</code> (U+0072 U+0067 U+0062 U+0061) followed
  1691      by a U+0028 LEFT PARENTHESIS, a <span>color component integer</span>
  1692      representing the red component, a <span>color component separator</span>, a
  1693      <span>color component integer</span> for the green component, a <span>color
  1694      component separator</span>, a <span>color component integer</span> for the
  1695      blue component, another <span>color component separator</span> a U+0030
  1696      DIGIT ZERO, a U+002E FULL STOP (representing the decimal point), one or
  1697      more digits in the range 0-9 (U+0030 to U+0039) representing the fractional
  1698      part of the alpha value, and finally a U+0029 RIGHT PARENTHESIS.</dd>
  1700      <dt>The keyword <code>transparent</code> is used</dt>
  1702      <dd>The color is <code>rgba(0, 0, 0, 0)</code>.</dd>
  1703    -->
  1705    <dt>&lt;counter></dt>
  1706    <dd>
  1707     <p>The concatenation of:</p>
  1708     <ol>
  1709      <li><p>If &lt;counter> has three CSS component values the string
  1710      "<code>counters(</code>".</p></li>
  1711      <li><p>If &lt;counter> has two CSS component values the string
  1712      "<code>counter(</code>".</p></li>
  1713      <li><p>The result of
  1714      <span title="serialize a comma-separated list">serializing</span> the
  1715      <span title="serialize a CSS component value">serialized</span>
  1716      CSS component values belonging to &lt;counter> as list while omitting
  1717      the last CSS component value if it is 'decimal'.</p></li>
  1718      <li><p>"<code>)</code>" (U+0029).</p></li>
  1719     </ol>
  1720    </dd>
  1722    <dt>&lt;frequency></dt>
  1723    <dd><p>The frequency in hertz serialized as per &lt;number> followed by
  1724    the literal string "<code>hz</code>".</dd>
  1726    <dt>&lt;identifier></dt>
  1727    <dd><p>The identifier
  1728    <span title="serialize an identifier">escaped</span>.</p></dd>
  1730    <dt>&lt;integer></dt>
  1731    <dd><p>A base-ten integer using digits 0-9 (U+0030 to U+0039) in the
  1732    shortest form possible, preceded by "<code>-</code>" (U+002D) if it is
  1733    negative.</p></dd>
  1735    <dt>&lt;length></dt>
  1736    <dd>
  1737     <p>A length of zero is represented by the literal string
  1738     "<code>0px</code>".</p>
  1740     <p>Absolute lengths: the number of millimeters serialized as per
  1741     &lt;number> followed by the literal string "<code>mm</code>".</p>
  1742     <p class="issue">Rumor has it absolute lengths will become relative
  1743     lengths. Centimeters would be compatible with &lt;resolution>...</p>
  1745     <p>Relative lengths: the &lt;number> component serialized as per
  1746     &lt;number> followed by the unit in its canonical form as defined in its
  1747     respective specification.</p>
  1748    </dd>
  1750    <dt>&lt;number></dt>
  1751    <dd><p class="issue">Browsers seem to use ToString(), but that might give a
  1752    significand which according to some is teh evil (and also currently does
  1753    not parse correctly).</p></dd>
  1755    <dt>&lt;percentage></dt>
  1756    <dd><p>The &lt;number> component serialized as per &lt;number> followed
  1757    by the literal string "<code>%</code>" (U+0025).</p></dd>
  1759    <dt>&lt;resolution></dt>
  1760    <dd><p>The resolution in dots per centimeter serialized as per
  1761    &lt;number> followed by the literal string "<code>dpcm</code>".</dd>
  1763    <dt>&lt;shape></dt>
  1764    <dd><p>The string "<code>rect(</code>", followed by the result
  1765    of <span title="serialize a comma-separated list">serializing</span> the
  1766    <span title="serialize a CSS component value">serialized</span>
  1767    CSS component values belonging to &lt;shape> as list, followed by
  1768    "<code>)</code>" (U+0029).</p></dd>
  1770    <dt>&lt;string></dt>
  1771    <dt>&lt;family-name></dt>
  1772    <dt>&lt;specific-voice></dt>
  1773    <dd><p>The string
  1774    <span title="serialize a string">string escaped</span>.</p></dd>
  1776    <dt>&lt;time></dt>
  1777    <dd><p>The time in seconds serialized as per &lt;number> followed by
  1778    the literal string "<code>s</code>".</dd>
  1780    <dt>&lt;uri></dt>
  1781    <dd><p>The <span data-anolis-spec=html>absolute URL</span>
  1782    <span title="serialize a URL">URL escaped</span>.</p></dd>
  1783   </dl>
  1785   <p>
  1786    &lt;absolute-size>,
  1787    &lt;border-width>,
  1788    &lt;border-style>,
  1789    &lt;bottom>,
  1790    &lt;generic-family>,
  1791    &lt;generic-voice>,
  1792    &lt;left>,
  1793    &lt;margin-width>,
  1794    &lt;padding-width>,
  1795    &lt;relative-size>,
  1796    &lt;right>, and
  1797    &lt;top>,
  1798    are considered macros by this specification. They all represent instances
  1799    of components outlined above.</p>
  1801   <p class="issue">One idea is that we can remove this section somewhere in
  1802   the CSS3/CSS4 timeline by moving the above definitions to the drafts that
  1803   define the CSS components.</p>
  1806   <h5>Examples</h5>
  1808   <p>Here are some examples of before and after results on specified values.
  1809   The before column could be what the author wrote in a style sheet, while
  1810   the after column shows what querying the DOM would return.</p>
  1812   <div class="example">
  1813    <table>
  1814     <thead>
  1815      <tr><th>Before<th>After
  1816     <tbody>
  1817      <tr><td><code>background: none</code><td><code>background: rgba(0, 0, 0, 0)</code>
  1818      <tr><td><code>outline: none</code><td><code>outline: invert</code>
  1819      <tr><td><code>border: none</code><td><code>border: medium</code>
  1820      <tr><td><code>list-style: none</code><td><code>list-style: disc</code>
  1821      <tr><td><code>margin: 0 1px 1px 1px</code><td><code>margin: 0px 1px 1px</code>
  1822      <tr><td><code>azimuth: behind left</code><td><code>azimuth: 220deg</code>
  1823      <tr><td><code>font-family: a, 'b"', serif</code><td><code>font-family: "a", "b\"", serif</code>
  1824      <tr><td><code>content: url('h)i') '\[\]'</code><td><code>content: url("h)i") "[]"</code>
  1825      <tr><td><code>azimuth: leftwards</code><td><code>azimuth: leftwards</code>
  1826      <tr><td><code>color: rgb(18, 52, 86)</code><td><code>color: #123456</code>
  1827      <tr><td><code>color: rgba(000001, 0, 0, 1)</code><td><code>color: #000000</code>
  1828    </table>
  1830    <p class="issue">Some of these need to be updated per the new rules.</p>
  1831   </div>
  1833   <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
  1835   <h2>DOM Access to CSS Declaration Blocks</h2>
  1837   <!-- ........................................................................................................................ -->
  1838   <!-- ........................................................................................................................ -->
  1840   <h3>The <code>ElementCSSInlineStyle</code> Interface</h3>
  1842   <!--{@idl(ElementCSSInlineStyle)}-->
  1844   <!-- ........................................................................................................................ -->
  1845   <!-- ........................................................................................................................ -->
  1847   <h3>Extensions to the <code>Window</code> Interface</h3>
  1849   <!--{@idl(Window)}-->
  1851   <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
  1853   <h2>Resolved Values</h2>
  1855   <p><code title="dom-Window-getComputedStyle">getComputedStyle()</code> was
  1856   historically defined to return the "computed value" of an element or
  1857   pseudo-element. However, the concept of "computed value" changed between
  1858   revisions of CSS while the implementation of
  1859   <code title="dom-Window-getComputedStyle">getComputedStyle()</code> had to
  1860   remain the same for compatibility with deployed scripts. To address this
  1861   issue this specification introduces the concept of a
  1862   <dfn>resolved value</dfn>.</p>
  1864   <p>The <span>resolved value</span> for a given property can be determined
  1865   as follows:</p>
  1867   <dl class="switch">
  1868    <!--
  1869    We want to treat shorthand properties like any other value basically.
  1871    <dt>'<code>background</code>'
  1872    <dt>'<code>border</code>'
  1873    <dt>'<code>border-collapse</code>'
  1874    <dt>'<code>border-color</code>'
  1875    <dt>'<code>border-spacing</code>'
  1876    <dt>'<code>border-style</code>'
  1877    <dt>'<code>border-top</code>'
  1878    <dt>'<code>border-right</code>'
  1879    <dt>'<code>border-bottom</code>'
  1880    <dt>'<code>border-left</code>'
  1881    <dt>'<code>border-width</code>'
  1882    <dt>'<code>font</code>'
  1883    <dt>'<code>list-style</code>'
  1884    <dt>'<code>margin</code>'
  1885    <dt>'<code>outline</code>'
  1886    <!- - overflow is not - ->
  1887    <dt>'<code>padding</code>'
  1888    <dt>'<code>pause</code>'
  1889    <dd>
  1890     <p>There is no <span>resolved value</span>.</p>
  1891    </dd>
  1892    -->
  1894    <dt>'<code>line-height</code>'</dt>
  1895    <dd><p>The <span>resolved value</span> is the used value.</p></dd>
  1897    <dt>'<code>height</code>'</dt>
  1898    <dt>'<code>margin</code>'</dt>
  1899    <dt>'<code>margin-bottom</code>'</dt>
  1900    <dt>'<code>margin-left</code>'</dt>
  1901    <dt>'<code>margin-right</code>'</dt>
  1902    <dt>'<code>margin-top</code>'</dt>
  1903    <dt>'<code>padding</code>'</dt>
  1904    <dt>'<code>padding-bottom</code>'</dt>
  1905    <dt>'<code>padding-left</code>'</dt>
  1906    <dt>'<code>padding-right</code>'</dt>
  1907    <dt>'<code>padding-top</code>'</dt>
  1908    <dt>'<code>width</code>'</dt>
  1909    <dd><p>If the property applies to the element or pseudo-element and the
  1910    <span>resolved value</span> of the '<code>display</code>' property is not
  1911    <code>none</code>, the <span>resolved value</span> is the
  1912    <span>used value</span>. Otherwise the <span>resolved value</span> is the
  1913    computed value.</p></dd>
  1915    <dt>'<code>bottom</code>'</dt>
  1916    <dt>'<code>left</code>'</dt>
  1917    <dt>'<code>right</code>'</dt>
  1918    <dt>'<code>top</code>'</dt>
  1919    <dd><p>If the property applies to a positioned element and the
  1920    <span>resolved value</span> of the '<code>display</code>' property is not
  1921    <code>none</code>, the <span>resolved value</span> is the
  1922    <span>used value</span>. Otherwise the <span>resolved value</span> is the
  1923    computed value.</p></dd>
  1925    <dt>Any other property</dt>
  1926    <dd><p>The <span>resolved value</span> is the computed value.</p></dd>
  1927   </dl>
  1929   <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
  1931   <h2 id="iana-considerations">IANA Considerations</h2>
  1933   <!-- ........................................................................................................................ -->
  1934   <!-- ........................................................................................................................ -->
  1936   <h3><dfn title="http-default-style"><code>Default-Style</code></dfn></h3>
  1938   <p>This section describes a header field for registration in the Permanent
  1939   Message Header Field Registry.
  1940   <!--<a href="XXX">[RFC3864]</a>--></p>
  1942   <dl>
  1943    <dt>Header field name</dt>
  1944    <dd>Default-Style</dd>
  1945    <dt>Applicable protocol</dt>
  1946    <dd>http</dd>
  1947    <dt>Status</dt>
  1948    <dd>standard</dd>
  1949    <dt>Author/Change controller</dt>
  1950    <dd>W3C</dd>
  1951    <dt>Specification document(s)</dt>
  1952    <dd>This document is the relevant specification.</dd>
  1953    <dt>Related information</dt>
  1954    <dd>None.</dd>
  1955   </dl>
  1957   <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
  1959   <h2 class=no-num>References</h2>
  1961   <!-- ........................................................................................................................ -->
  1962   <!-- ........................................................................................................................ -->
  1964   <h3 class=no-num>Normative references</h3>
  1965   <div id=anolis-references-normative></div>
  1967   <!-- ........................................................................................................................ -->
  1968   <!-- ........................................................................................................................ -->
  1970   <h3 class=no-num>Informative references</h3>
  1971   <div id=anolis-references-informative></div>
  1973   <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
  1975   <h2 class="no-num" id="changes">Change History</h2>
  1977   <p>This section documents the primary technical changes of CSSOM related functionality, with a focus on changes to API signatures.</p>
  1979   <h3 class="no-num" id="changes-from-dom2">Changes From DOM-2 Style</h3>
  1981   <ul>
  1982   <li><p>Remove definition of <code>CSSRule.UNKNOWN_RULE</code>, reserving its value (0) to prevent future reuse.</p></li>
  1983   <li><p>Remove definition of <code>DOMImplementationCSS</code> interface.</p></li>
  1984   </ul>
  1986   <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
  1988   <h2 class="no-num" id="acknowledgments">Acknowledgments</h2>
  1990   <p>The editors would like to thank
  1992   Alexey Feldgendler,
  1993   Bj&ouml;rn H&ouml;hrmann,
  1994   Boris Zbasky,
  1995   Brian Kardell,
  1996   Christian Krebs,
  1997   Daniel Glazman,
  1998   David Baron,
  1999   <i>fantasai</i>,
  2000   Hallvord R. M. Steen,
  2001   Ian Hickson,
  2002   John Daggett,
  2003   Lachlan Hunt,
  2004   Morten Stenshorne,
  2005   Philip Taylor,
  2006   Robert O'Callahan,
  2007   Sjoerd Visscher,
  2008   Simon Pieters,
  2009   Sylvain Galineau,
  2010   Tarquin Wilton-Jones, and
  2011   Zack Weinberg
  2013   for contributing to this specification.</p>
  2015   <p>Additional thanks to Ian Hickson for writing the
  2016   initial version of the alternative style sheets API and canonicalization
  2017   (now serialization) rules for CSS values.</p>
  2019   <!-- XXX NOTES
  2021   <style type=text/css;charset=utf-8> does create a StyleSheet in Firefox
  2022   and Opera, but does not create a StyleSheet in IE. I prefer IE.
  2024   <style type=TEXT/CSS> sets the style sheet type to text/css in Firefox and
  2025   TEXT/CSS in Opera and IE. I prefer Firefox.
  2027   <style> sets the style sheet location to the document location Firefox,
  2028   the empty string in IE, and null in Opera. I prefer Opera
  2030   <style media="x"> invokes .sheet.media.mediaText = "x"
  2032   <style> does not "have" a title
  2034   .cascadedStyle that returns less keywords than currentStyle, no inherit,
  2035   etc.
  2037   Markup style: http://krijnhoetmer.nl/irc-logs/whatwg/20100204#l-529
  2038   -->
  2039  </body>
  2040 </html>

mercurial