cssom/Overview.src.html

Fri, 07 Jun 2013 14:43:47 +0200

author
Simon Pieters <simonp@opera.com>
date
Fri, 07 Jun 2013 14:43:47 +0200
changeset 8372
b3a214e224d7
parent 8371
ca20cc414744
child 8373
37cd62aced08
permissions
-rw-r--r--

[cssom] Disallow reading and modifying of cross-origin sheets. Integrate with URL and Fetch specs for xml-stylesheet and Link:. Only expose pre-redirect URL of a sheet.

simonp@8226 1 <!doctype html>
simonp@8226 2 <html lang="en-US">
simonp@8226 3 <head>
simonp@8226 4 <meta charset=utf-8>
simonp@8226 5 <title>CSS Object Model (CSSOM)</title>
simonp@8226 6 <style>
simonp@8226 7 .idl { border:solid thin; background:#eee; color:#000; padding:0.5em }
simonp@8226 8 .idl :link, .idl :visited { color:inherit; background:transparent }
simonp@8226 9 dfn { font-weight:bold; font-style:normal }
simonp@8226 10 .example { margin-left:1em; padding-left:1em; border-left:double; color:#222; background:#fcfcfc }
simonp@8226 11 .example table code { color:inherit }
simonp@8226 12 td, th { padding:.1em }
simonp@8226 13 .note { margin-left:2em; color:green; font-style:italic; font-weight:bold }
simonp@8226 14 p.note::before { content:"Note: " }
simonp@8226 15 .XXX { padding:.5em; border:solid red }
simonp@8226 16 p.XXX::before { content:"Issue: " }
simonp@8226 17 dl.switch { padding-left:2em }
simonp@8226 18 dl.switch > dt { text-indent:-1.5em }
simonp@8226 19 dl.switch > dt:before { content:'\21AA'; padding:0 0.5em 0 0; display:inline-block; width:1em; text-align:right; line-height:0.5em }
simonp@8226 20 code { color:orangered }
simonp@8226 21 code :link, code :visited { color:inherit }
simonp@8327 22 span:not(.secno) { border-bottom:solid red }
simonp@8336 23 .atrisk::before { position:absolute; left:30px; margin-top:-8px; width:25px; height:25px; padding:0 4px 8px; border:1px solid; content:'At risk';
simonp@8336 24 font-size:smaller; background:white; color:gray; border-radius:25px; text-align:center }
simonp@8344 25 td { vertical-align:baseline }
simonp@8344 26 td, th { border:solid }
simonp@8344 27 table { border:hidden; border-collapse:collapse }
simonp@8344 28 .propdef { font:inherit; line-height:2.3 }
simonp@8226 29 </style>
simonp@8226 30 <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/W3C-[STATUS]">
simonp@8226 31 </head>
simonp@8226 32 <body class="draft">
simonp@8226 33
simonp@8244 34 <div class="head">
simonp@8244 35 <!--logo-->
simonp@8244 36
simonp@8244 37
simonp@8244 38 <h1>CSS Object Model (CSSOM)</h1>
simonp@8244 39
simonp@8244 40
simonp@8244 41 <h2 class="no-num no-toc" id="w3c-doctype">[LONGSTATUS] [DATE: 3 August 2002]</h2>
simonp@8244 42
simonp@8244 43 <dl>
simonp@8244 44
simonp@8244 45 <dt>This Version:</dt>
simonp@8244 46 <dd class=dontpublish><a href="http://dev.w3.org/csswg/cssom/">http://dev.w3.org/csswg/cssom/</a></dd>
simonp@8244 47 <dd class=publish><a href="[VERSION]">[VERSION]</a></dd>
simonp@8244 48
simonp@8244 49 <dt class=dontpublish>Participate:</dt>
simonp@8304 50 <dd class=dontpublish><a href="mailto:www-style@w3.org?subject=%5Bcssom%5D%20">www-style@w3.org</a>
simonp@8304 51 (<a href="http://lists.w3.org/Archives/Public/www-style/">archives</a>)</dd>
simonp@8304 52 <dd class=dontpublish><a href="https://www.w3.org/Bugs/Public/enter_bug.cgi?product=CSS&amp;component=CSSOM">File a bug</a>
simonp@8304 53 (<a href="https://www.w3.org/Bugs/Public/buglist.cgi?component=CSSOM&amp;product=CSS&amp;resolution=---">open bugs</a>)
simonp@8304 54 <script async="" src="https://w3c-test.org/resources.whatwg.org/file-bug.js"></script></dd>
simonp@8244 55 <dd class=dontpublish><a href="irc://irc.w3.org:6665/css">IRC: #css on W3C</a></dd>
simonp@8244 56
simonp@8244 57 <dt class=publish>Latest Version:</dt>
simonp@8244 58 <dd class=publish><a href="[LATEST]">[LATEST]</a></dd>
simonp@8244 59
simonp@8244 60 <dt class=publish>Latest Editor's draft:</dt>
simonp@8244 61 <dd class=publish><a href="http://dev.w3.org/csswg/cssom/">http://dev.w3.org/csswg/cssom/</a></dd>
simonp@8244 62
simonp@8244 63 <dt class=dontpublish>Previous Version:</dt>
simonp@8244 64 <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>
simonp@8244 65 <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>
simonp@8244 66
simonp@8244 67 <dt>Editors:</dt>
simonp@8244 68 <dd><a>Simon Pieters</a>
simonp@8244 69 (<a href="http://www.opera.com/">Opera Software ASA</a>)
simonp@8244 70 &lt;<a href="mailto:simponp@opera.com">simonp@opera.com</a>&gt;</dd>
simonp@8244 71 <dd><a href="http://www.w3.org/wiki/User:Gadams">Glenn Adams</a>
simonp@8244 72 (<a href="http://www.cox.com/">Cox Communications, Inc.</a>)
simonp@8244 73 &lt;<a href="mailto:glenn.adams@cox.com">glenn.adams@cox.com</a>&gt;</dd>
simonp@8244 74
simonp@8244 75 <dt>Previous Editor:</dt>
simonp@8244 76 <dd><a href="http://annevankesteren.nl/">Anne van Kesteren</a>
simonp@8244 77 (<a href="http://www.opera.com/">Opera Software ASA</a>)
simonp@8244 78 &lt;<a href="mailto:annevk@opera.com">annevk@opera.com</a>&gt;</dd>
simonp@8244 79 </dl>
simonp@8244 80
simonp@8244 81 <!--copyright-->
simonp@8244 82
simonp@8244 83 </div>
simonp@8244 84
simonp@8244 85 <hr class="top">
simonp@8244 86
simonp@8244 87
simonp@8244 88 <h2 class="no-num no-toc">Abstract</h2>
simonp@8244 89
simonp@8244 90 <p>CSSOM defines APIs (including generic parsing and serialization rules)
simonp@8244 91 for Media Queries, Selectors, and of course CSS itself.</p>
simonp@8244 92
simonp@8244 93
simonp@8244 94 <h2 class="no-num no-toc" id="sotd">Status of This Document</h2>
simonp@8244 95
simonp@8244 96 <p>This is a public copy of the editors' draft. It is provided for discussion only and may change at any moment.
simonp@8244 97 Its publication here does not imply endorsement of its contents by W3C or by the CSS Working Group. Don't cite
simonp@8244 98 this document other than as work in progress.</p>
simonp@8244 99
simonp@8244 100 <p class="note">Implementers should note well that this specification is an ongoing effort to sort out
simonp@8371 101 what has been widely implemented and deployed from <span data-anolis-ref class=informative>DOM2STYLE</span> as well as common extensions thereto, some details
simonp@8244 102 of which are currently interoperable and others which are not currently interoperable. As this specification moves
simonp@8244 103 forward, it is hoped that these differences will be resolved and an unambiguous and adequate consensus-based
simonp@8244 104 specification will emerge.</p>
simonp@8244 105
simonp@8244 106 <p><em>This section describes the status of this document at the time of
simonp@8244 107 its publication. Other documents may supersede this document. A list of
simonp@8244 108 current W3C publications and the latest revision of this technical report
simonp@8244 109 can be found in the
simonp@8244 110 <a href="http://www.w3.org/TR/">W3C technical reports index at http://www.w3.org/TR/.</a></em>
simonp@8244 111
simonp@8244 112 <p class="dontpublish">This is the [DATE: 3 August 2002] [LONGSTATUS] of CSSOM. Please send comments to
simonp@8244 113 <a href="mailto:www-style@w3.org?subject=%5Bcssom%5D%20">www-style@w3.org</a>
simonp@8244 114 (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>)
simonp@8244 115 with <samp>[cssom]</samp> at the start of the subject line.
simonp@8244 116
simonp@8244 117 <p class="publish">This is the [DATE] First Public Working Draft of CSSOM, produced by the
simonp@8244 118 <a href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part
simonp@8244 119 of the <a href="http://www.w3.org/Style/">Style Activity</a>).
simonp@8244 120 <!--XXX remove "First Public" after initial publication -->
simonp@8244 121
simonp@8244 122 <p>This document was produced by a group operating under the
simonp@8244 123 <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent Policy</a>.
simonp@8244 124 W3C maintains a
simonp@8244 125 <a href="http://www.w3.org/2004/01/pp-impl/32061/status" rel=disclosure>public list of any patent disclosures</a>
simonp@8244 126 made in connection with the deliverables of the group; that page also
simonp@8244 127 includes instructions for disclosing a patent. An individual who has
simonp@8244 128 actual knowledge of a patent which the individual believes contains
simonp@8244 129 <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a>
simonp@8244 130 must disclose the information in accordance with
simonp@8244 131 <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the W3C Patent Policy</a>.</p>
simonp@8244 132
simonp@8244 133
simonp@8244 134 <h2 class="no-num no-toc" id="toc">Table of Contents</h2>
simonp@8244 135
simonp@8244 136 <!--toc-->
simonp@8244 137
simonp@8244 138
simonp@8244 139 <h2>Introduction</h2>
simonp@8244 140
simonp@8244 141 <p>This document formally specifies the core features of the CSS Object Model (CSSOM). Other documents in the CSSOM family of specifications
simonp@8244 142 as well as other CSS related specifications define extensions to these core features.</p>
simonp@8244 143
simonp@8244 144 <p>The core features of the CSSOM are oriented towards providing basic capabilities to author-defined scripts to permit access to
simonp@8244 145 and manipulation of style related state information and processes.</p>
simonp@8244 146
simonp@8244 147 <p>The features defined below are fundamentally based on prior specifications of the W3C DOM Working Group, primarily
simonp@8371 148 <span data-anolis-ref class=informative>DOM2STYLE</span>. The purposes of the present document are (1) to improve on that prior work by providing
simonp@8244 149 more technical specificity (so as to improve testability and interoperability), (2) to deprecate or remove certain less-widely implemented
simonp@8244 150 features no longer considered to be essential in this context, and (3) to newly specify certain extensions that have been
simonp@8244 151 or expected to be widely implemented.</p>
simonp@8244 152
simonp@8371 153 <p>A full list of the changes to API signatures can be found in <a href="#changes-from-dom-2-style"><cite>Changes from DOM-2 Style</cite></a>.</p>
simonp@8244 154
simonp@8244 155
simonp@8244 156 <h2>Conformance</h2>
simonp@8244 157
simonp@8244 158 <p>All diagrams, examples, and notes in this specification are
simonp@8244 159 non-normative, as are all sections explicitly marked non-normative.
simonp@8244 160 Everything else in this specification is normative.
simonp@8244 161
simonp@8244 162 <p>The key words "MUST", "MUST NOT", "REQUIRED", <!--"SHALL", "SHALL
simonp@8244 163 NOT",--> "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and
simonp@8244 164 "OPTIONAL" in the normative parts of this document are to be
simonp@8244 165 interpreted as described in RFC2119. For readability, these words do
simonp@8244 166 not appear in all uppercase letters in this specification.
simonp@8244 167 <span data-anolis-ref>RFC2119</span>
simonp@8244 168
simonp@8244 169 <p>Requirements phrased in the imperative as part of algorithms
simonp@8244 170 (such as "strip any leading space characters" or "return false and
simonp@8244 171 terminate these steps") are to be interpreted with the meaning of the
simonp@8244 172 key word ("must", "should", "may", etc) used in introducing the
simonp@8244 173 algorithm.
simonp@8244 174
simonp@8244 175 <p>Conformance requirements phrased as algorithms or specific steps
simonp@8244 176 may be implemented in any manner, so long as the end result is
simonp@8244 177 equivalent. (In particular, the algorithms defined in this
simonp@8244 178 specification are intended to be easy to follow, and not intended to
simonp@8244 179 be performant.)
simonp@8244 180
simonp@8244 181 <p id="hardwareLimitations">User agents may impose
simonp@8244 182 implementation-specific limits on otherwise unconstrained inputs,
simonp@8244 183 e.g. to prevent denial of service attacks, to guard against running
simonp@8244 184 out of memory, or to work around platform-specific limitations.
simonp@8244 185
simonp@8304 186 <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
simonp@8304 187 e.g. the author can't change the behavior by overriding attributes or methods with custom properties or functions in ECMAScript.
simonp@8244 188
simonp@8244 189 <p>Unless otherwise stated, string comparisons are done in a
simonp@8244 190 <span data-anolis-spec=dom>case-sensitive</span> manner.
simonp@8244 191
simonp@8244 192
simonp@8244 193 <h2>Terminology</h2>
simonp@8244 194
simonp@8244 195 <p>This specification employs certain terminology from the following documents:
simonp@8244 196 <cite>DOM</cite>,
simonp@8244 197 <cite>HTML</cite>,
simonp@8244 198 <cite>URL</cite>,
simonp@8372 199 <cite>Fetch</cite>,
simonp@8244 200 <cite>Associating Style Sheets with XML documents</cite>
simonp@8244 201 and
simonp@8244 202 <cite>XML</cite>.
simonp@8244 203 <span data-anolis-ref>DOM</span>
simonp@8244 204 <span data-anolis-ref>HTML</span>
simonp@8244 205 <span data-anolis-ref>URL</span>
simonp@8372 206 <span data-anolis-ref>FETCH</span>
simonp@8244 207 <span data-anolis-ref>XMLSS</span>
simonp@8244 208 <span data-anolis-ref>XML</span>
simonp@8244 209
simonp@8244 210 <p>When this specification talks about object
simonp@8289 211 <code><var title>A</var></code> where <code><var title>A</var></code> is actually an interface, it generally means an object implementing interface
simonp@8289 212 <code><var title>A</var></code>.</p>
simonp@8244 213
simonp@8327 214 <p>The terms <dfn>whitespace</dfn>, <dfn>ignored</dfn>, <dfn>specified value</dfn>, <dfn>computed value</dfn> and <dfn>used value</dfn> are defined in CSS.
simonp@8327 215 <span data-anolis-ref>CSS</span>
simonp@8327 216
simonp@8327 217 <p>The terms <dfn>simple selector</dfn>, <dfn>sequence of simple selectors</dfn>, <dfn>universal selector</dfn> and <dfn>group of selectors</dfn> are defined in
simonp@8327 218 Selectors. <span data-anolis-ref>SELECTORS</span>
simonp@8327 219
simonp@8327 220 <p>The terms <dfn>namespace prefix</dfn> and <dfn>default namespace</dfn> are defined in CSS Namespaces Module. <span data-anolis-ref>CSSNAMESPACES</span>
simonp@8327 221
simonp@8327 222 <p>The term <dfn>list of CSS page selectors</dfn> refers to the comma-separated list of page selectors, as defined in CSS Paged Media Module.
simonp@8327 223 <span data-anolis-ref>CSSPAGE</span>
simonp@8244 224
simonp@8304 225 <p>The terms <dfn>set</dfn> and <dfn>clear</dfn> to refer to the true and
simonp@8304 226 false values of binary flags or variables, respectively. These terms are also used as verbs in which case they refer to
simonp@8304 227 mutating some value to make it true or false, respectively.</p>
simonp@8244 228
simonp@8327 229 <p>The term <dfn>supported styling language</dfn> refers to CSS.
simonp@8327 230
simonp@8327 231 <p class=note>If another styling language becomes supported in user agents, this specification is expected to be updated as necessary.
simonp@8244 232
simonp@8329 233 <p>The terms <dfn>::before pseudo-element</dfn> and <dfn>::after pseudo-element</dfn> refer to the :before and :after pseudo-elements in CSS, except in this
simonp@8329 234 specification the pseudo-elements are assumed to exist for all elements even if no box is generated for them. <span data-anolis-ref>CSS</span>
simonp@8329 235
simonp@8244 236 <h3>Common Serializing Idioms</h3>
simonp@8244 237
simonp@8244 238 <p>To <dfn>escape a character</dfn> means to create a string of
simonp@8304 239 "<code title>\</code>" (U+005C), followed by the character.</p>
simonp@8244 240
simonp@8244 241 <p>To <dfn>escape a character as code point</dfn> means to create a
simonp@8304 242 string of "<code title>\</code>" (U+005C), followed by the Unicode code point as
simonp@8244 243 the smallest possible number of hexadecimal digits in the range 0-9 a-f
simonp@8244 244 (U+0030 to U+0039 and U+0061 to U+0066) to represent the code point in
simonp@8244 245 base 16, followed by a single SPACE (U+0020).</p>
simonp@8244 246
simonp@8244 247 <p>To <dfn>serialize an identifier</dfn> means to create a string represented
simonp@8244 248 by the concatenation of, for each character of the identifier:</p>
simonp@8244 249
simonp@8244 250 <ul>
simonp@8244 251 <li>If the character is NULL (U+0000), then <span data-anolis-spec=dom title=concept-throw>throw</span> an
simonp@8244 252 <code data-anolis-spec=dom>InvalidCharacterError</code> exception and terminate these steps.</li>
simonp@8244 253 <li>If the character is in the range [\1-\1f] (U+0001 to U+001F) or
simonp@8244 254 [\7f-\9f] (U+007F to U+009F), then the character
simonp@8244 255 <span title="escape a character as code point">escaped as code point</span>.</li>
simonp@8244 256 <li>If the character is the first character and is in the range [0-9]
simonp@8244 257 (U+0030 to U+0039), then the character
simonp@8244 258 <span title="escape a character as code point">escaped as code point</span>.</li>
simonp@8244 259 <li>If the character is the second character and is in the range [0-9]
simonp@8304 260 (U+0030 to U+0039) and the first character is a "<code title>-</code>"
simonp@8244 261 (U+002D), then the character
simonp@8244 262 <span title="escape a character as code point">escaped as code point</span>.</li>
simonp@8304 263 <li>If the character is the second character and is "<code title>-</code>"
simonp@8304 264 (U+002D) and the first character is "<code title>-</code>" as well, then the
simonp@8244 265 <span title="escape a character">escaped</span> character.</li>
simonp@8244 266 <li>If the character is not handled by one of the above rules and is
simonp@8304 267 greater than or equal to U+0080, is "<code title>-</code>" (U+002D) or
simonp@8304 268 "<code title>_</code>" (U+005F), or is in one of the ranges [0-9] (U+0030 to
simonp@8244 269 U+0039), [A-Z] (U+0041 to U+005A), or [a-z] (U+0061 to U+007A), then the character
simonp@8244 270 itself.</li>
simonp@8244 271 <li>Otherwise, the <span title="escape a character">escaped</span>
simonp@8244 272 character.</li>
simonp@8244 273 </ul>
simonp@8244 274
simonp@8244 275 <p>To <dfn>serialize a string</dfn> means to create a string represented
simonp@8346 276 by '"' (U+0022), followed by the result of applying the rules
simonp@8244 277 below to each character of the given string, followed by
simonp@8346 278 '"' (U+0022):</p>
simonp@8244 279
simonp@8244 280 <ul>
simonp@8244 281 <li>If the character is NULL (U+0000), then <span data-anolis-spec=dom title=concept-throw>throw</span> an
simonp@8244 282 <code data-anolis-spec=dom>InvalidCharacterError</code> exception and terminate these steps.</li>
simonp@8244 283 <li>If the character is in the range [\1-\1f] (U+0001 to U+001F) or [\7f-\9f] (U+007F to
simonp@8244 284 U+009F), the character <span title="escape a character as code point">escaped as code point</span>.</li>
simonp@8346 285 <li>If the character is '"' (U+0022) or "<code title>\</code>"
simonp@8244 286 (U+005C), the <span title="escape a character">escaped</span> character.</li>
simonp@8244 287 <li>Otherwise, the character itself.</li>
simonp@8244 288 </ul>
simonp@8244 289
simonp@8304 290 <p class="note">"<code title>'</code>" (U+0027) is not escaped because strings
simonp@8346 291 are always serialized with '"' (U+0022).</p>
simonp@8244 292
simonp@8244 293 <p>To <dfn>serialize a URL</dfn> means to create a string represented by
simonp@8304 294 "<code title>url(</code>", followed by the
simonp@8244 295 <span title="serialize a string">string escaped</span> value of the given
simonp@8304 296 string, followed by "<code title>)</code>".</p>
simonp@8244 297
simonp@8244 298 <p>To <dfn>serialize a comma-separated list</dfn> concatenate all items of
simonp@8304 299 the list in list order while separating them by "<code title>, </code>", i.e.,
simonp@8244 300 COMMA (U+002C) followed by a single SPACE (U+0020).</p>
simonp@8244 301
simonp@8244 302 <p>To <dfn>serialize a whitespace-separated list</dfn> concatenate all
simonp@8304 303 items of the list in list order while separating them by "<code title> </code>", i.e.,
simonp@8244 304 a single SPACE (U+0020).</p>
simonp@8244 305
simonp@8244 306 <p class="note">When serializing a list according to the above rules,
simonp@8244 307 extraneous whitespace is not inserted prior to the first item or subsequent to
simonp@8244 308 the last item. Unless otherwise specified, an empty list is serialized as the
simonp@8244 309 empty string.</p>
simonp@8244 310
simonp@8244 311
simonp@8244 312 <h2>Media Queries</h2>
simonp@8244 313
simonp@8244 314 <p>Media queries are defined by the Media Queries specification. This
simonp@8244 315 section defines various concepts around media queries, including their API
simonp@8244 316 and serialization form.</p>
simonp@8244 317
simonp@8244 318 <!-- XXX ref -->
simonp@8244 319
simonp@8244 320
simonp@8244 321 <h3>Parsing Media Queries</h3>
simonp@8244 322
simonp@8244 323 <p>To
simonp@8244 324 <dfn>parse a media query list</dfn> for a
simonp@8289 325 given string <var title>s</var> into a media query list is defined in
simonp@8244 326 the Media Queries specification. Return the list of one or more media
simonp@8244 327 queries that the algorithm defined there gives.</p> <!-- XXX ref -->
simonp@8244 328
simonp@8244 329 <p class="note">A media query that ends up being "ignored" will turn
simonp@8304 330 into "<code title>not all</code>".</p>
simonp@8244 331
simonp@8244 332 <p>To
simonp@8244 333 <dfn>parse a media query</dfn> for a given string
simonp@8289 334 <var title>s</var> means to follow the
simonp@8289 335 <span>parse a media query list</span> steps and return null if more
simonp@8244 336 than one media query is returned or a media query if a
simonp@8244 337 single media query is returned.</p>
simonp@8244 338
simonp@8244 339 <p class="note">Again, a media query that ends up being "ignored" will
simonp@8304 340 turn into "<code title>not all</code>".</p>
simonp@8244 341
simonp@8244 342
simonp@8244 343 <h3>Serializing Media Queries</h3>
simonp@8244 344
simonp@8244 345 <p>To
simonp@8244 346 <dfn>serialize a media query list</dfn>
simonp@8244 347 run these steps:</p>
simonp@8244 348
simonp@8244 349 <ol>
simonp@8244 350 <li><p>If the media query list is empty return the empty string and
simonp@8244 351 terminate these steps.</p></li>
simonp@8244 352
simonp@8244 353 <li><p><span title="serialize a media query">Serialize</span> each
simonp@8244 354 media query in the list of media queries, sort them in lexicographical
simonp@8244 355 order, and then
simonp@8244 356 <span title="serialize a comma-separated list">serialize</span> the
simonp@8244 357 list.</p></li>
simonp@8244 358 </ol>
simonp@8244 359
simonp@8244 360 <p>To
simonp@8244 361 <dfn>serialize a media query</dfn> let
simonp@8289 362 <var title>s</var> be the empty string, run the steps below, and
simonp@8289 363 finally return <var title>s</var>:</p>
simonp@8244 364
simonp@8244 365 <ol>
simonp@8304 366 <li><p>If the media query is negated append "<code title>not</code>", followed
simonp@8289 367 by a single SPACE (U+0020), to <var title>s</var>.</p></li>
simonp@8289 368
simonp@8289 369 <li><p>Let <var title>type</var> be the media type of the media query,
simonp@8244 370 <span title="serialize an identifier">escaped</span> and
simonp@8244 371 <span data-anolis-spec=dom>converted to ASCII lowercase</span>.</p></li>
simonp@8244 372
simonp@8244 373 <li><p>If the media query does not contain media features append
simonp@8289 374 <var title>type</var>, to <var title>s</var>,
simonp@8289 375 then return <var title>s</var> and terminate this algorithm.</p></li>
simonp@8289 376
simonp@8304 377 <li><p>If <var title>type</var> is not "<code title>all</code>" or if the
simonp@8289 378 media query is negated append <var title>type</var>, followed by a
simonp@8304 379 single SPACE (U+0020), followed by "<code title>and</code>", followed by a single SPACE
simonp@8289 380 (U+0020), to <var title>s</var>.</p></li>
simonp@8244 381
simonp@8244 382 <li><p>Sort the media features in lexicographical order.</p></li>
simonp@8244 383
simonp@8244 384 <li>
simonp@8244 385 <p>Then, for each media feature:</p>
simonp@8226 386
simonp@8226 387 <ol>
simonp@8304 388 <li><p>Append a "<code title>(</code>" (U+0028), followed by the media feature
simonp@8244 389 name, <span data-anolis-spec=dom>converted to ASCII lowercase</span>,
simonp@8289 390 to <var title>s</var>.</p></li>
simonp@8244 391
simonp@8304 392 <li><p>If a value is given append a "<code title>:</code>" (U+003A), followed
simonp@8244 393 by a single SPACE (U+0020), followed by the
simonp@8244 394 <span title="serialize a media feature value">serialized media feature value</span>,
simonp@8289 395 to <var title>s</var>.</p></li>
simonp@8244 396
simonp@8304 397 <li><p>Append a "<code title>)</code>" (U+0029) to
simonp@8289 398 <var title>s</var>.</p></li>
simonp@8244 399
simonp@8244 400 <li><p>If this is not the last media feature append a single SPACE (U+0020),
simonp@8304 401 followed by "<code title>and</code>", followed by a single SPACE (U+0020), to
simonp@8289 402 <var title>s</var>.</p></li>
simonp@8226 403 </ol>
simonp@8244 404 </li>
simonp@8244 405 </ol>
simonp@8244 406
simonp@8244 407 <div class="example">
simonp@8244 408 <p>Here are some examples of input (first column) and output (second
simonp@8244 409 column):</p>
simonp@8244 410
simonp@8244 411 <table>
simonp@8244 412 <thead>
simonp@8244 413 <tr><th>Input<th>Output
simonp@8244 414 <tbody>
simonp@8226 415 <tr>
simonp@8244 416 <td><pre>not screen and (min-WIDTH:5px) AND (max-width:40px)</pre>
simonp@8244 417 <td><pre>not screen and (max-width: 40px) and (min-width: 5px)</pre>
simonp@8226 418 <tr>
simonp@8244 419 <td><pre>all and (color) and (color)</pre>
simonp@8244 420 <td><pre>(color)</pre>
simonp@8244 421 </table>
simonp@8244 422 </div>
simonp@8244 423
simonp@8244 424
simonp@8244 425
simonp@8244 426 <h4>Serializing Media Feature Values</h4>
simonp@8244 427
simonp@8244 428 <p class="XXX">This should probably be done in terms of mapping it to
simonp@8244 429 serializing CSS values as media features are defined in terms of CSS
simonp@8244 430 values after all.</p>
simonp@8244 431
simonp@8244 432 <p>To <dfn>serialize a media feature value</dfn>
simonp@8289 433 named <var title>v</var> locate <var title>v</var> in the first
simonp@8244 434 column of the table below and use the serialization format described in
simonp@8244 435 the second column:</p>
simonp@8244 436
simonp@8244 437 <table>
simonp@8244 438 <tr>
simonp@8244 439 <th>Media Feature
simonp@8244 440 <th>Serialization
simonp@8244 441 <tr>
simonp@8346 442 <td>'width'
simonp@8244 443 <td>...
simonp@8244 444 <tr>
simonp@8346 445 <td>'height'
simonp@8244 446 <td>...
simonp@8244 447 <tr>
simonp@8346 448 <td>'device-width'
simonp@8244 449 <td>...
simonp@8244 450 <tr>
simonp@8346 451 <td>'device-height'
simonp@8244 452 <td>...
simonp@8244 453 <tr>
simonp@8346 454 <td>'orientation'
simonp@8244 455 <td>
simonp@8346 456 <p>If the value is 'portrait': "<code title>portrait</code>".</p>
simonp@8346 457 <p>If the value is 'landscape': "<code title>landscape</code>".</p>
simonp@8244 458 <tr>
simonp@8346 459 <td>'aspect-ratio'
simonp@8244 460 <td>...
simonp@8244 461 <tr>
simonp@8346 462 <td>'device-aspect-ratio'
simonp@8244 463 <td>...
simonp@8244 464 <tr>
simonp@8346 465 <td>'color'
simonp@8244 466 <td>...
simonp@8244 467 <tr>
simonp@8346 468 <td>'color-index'
simonp@8244 469 <td>...
simonp@8244 470 <tr>
simonp@8346 471 <td>'monochrome'
simonp@8244 472 <td>...
simonp@8244 473 <tr>
simonp@8346 474 <td>'resolution'
simonp@8244 475 <td>...
simonp@8244 476 <tr>
simonp@8346 477 <td>'scan'
simonp@8244 478 <td>
simonp@8346 479 <p>If the value is 'progressive': "<code title>progressive</code>".</p>
simonp@8346 480 <p>If the value is 'interlace': "<code title>interlace</code>".</p>
simonp@8244 481 <tr>
simonp@8346 482 <td>'grid'
simonp@8244 483 <td>...
simonp@8244 484 </table>
simonp@8244 485
simonp@8244 486 <p>Other specifications can extend this table and vendor-prefixed media
simonp@8244 487 features can have custom serialization formats as well.</p>
simonp@8244 488
simonp@8244 489
simonp@8244 490 <h3>Comparing Media Queries</h3>
simonp@8244 491
simonp@8244 492 <p>To
simonp@8244 493 <dfn>compare media queries</dfn>
simonp@8289 494 <var title>m1</var> and <var title>m2</var> means to
simonp@8244 495 <span title="serialize a media query">serialize</span> them both and
simonp@8244 496 return true if they are a
simonp@8244 497 <span data-anolis-spec=dom>case-sensitive</span> match and false if they
simonp@8244 498 are not.</p>
simonp@8244 499
simonp@8244 500
simonp@8244 501 <h3>The <code title>MediaList</code> Interface</h3>
simonp@8226 502
simonp@8226 503 <!--
simonp@8226 504 //
simonp@8226 505 // All members defined since DOM-2 Style. The only differences are:
simonp@8226 506 //
simonp@8226 507 // 1. addition of stringifier qualifier on mediaText
simonp@8226 508 // 2. addition of getter qualifier on item
simonp@8226 509 // 3. removal of raises(DOMException) from {append,delete}Medium
simonp@8226 510 //
simonp@8226 511 -->
simonp@8226 512
simonp@8226 513 <p>An object that implements the <code>MediaList</code> interface has an associated <dfn>collection of media queries</dfn>.</p>
simonp@8226 514
simonp@8226 515 <pre class=idl>[<span title=dom-MediaList>Constructor</span>(DOMString text)]
simonp@8226 516 interface <dfn>MediaList</dfn> {
simonp@8226 517 stringifier attribute DOMString <span title=dom-MediaList-mediaText>mediaText</span>;
simonp@8226 518 readonly attribute unsigned long <span title=dom-MediaList-length>length</span>;
simonp@8226 519 getter DOMString <span title=dom-MediaList-item>item</span>(unsigned long index);
simonp@8226 520 void <span title=dom-MediaList-appendMedium>appendMedium</span>(DOMString medium);
simonp@8226 521 void <span title=dom-MediaList-deleteMedium>deleteMedium</span>(DOMString medium);
simonp@8226 522 };</pre>
simonp@8226 523
simonp@8265 524 <p>The object's <span data-anolis-spec=webidl>supported property indices</span> are the numbers in the range zero to one less than the number of media queries
simonp@8265 525 in the <span>collection of media queries</span> represented by the collection. If there are no such media queries, then there are no
simonp@8265 526 <span data-anolis-spec=webidl>supported property indices</span>.
simonp@8265 527
simonp@8327 528 <p>When the <dfn title=dom-MediaList><code>MediaList(<var title>text</var>)</code></dfn> constructor is invoked, the <span>create a <code>MediaList</code>
simonp@8327 529 object</span> steps must be run with the string <var title>text</var>.</p>
simonp@8327 530
simonp@8327 531 <p>To <dfn>create a <code>MediaList</code> object</dfn> with a string <var title>text</var>, run the following steps:
simonp@8226 532 <ol>
simonp@8226 533 <li><p>Create a new <code>MediaList</code> object.</p></li>
simonp@8289 534 <li><p>Set its <code title='dom-MediaList-mediaText'>mediaText</code> attribute to <var title>text</var>.</p></li>
simonp@8226 535 <li><p>Return the newly created <code>MediaList</code> object.</p></li>
simonp@8226 536 </ol>
simonp@8226 537
simonp@8304 538 <p>The <dfn title=dom-MediaList-mediaText><code>mediaText</code></dfn> attribute, on getting, must return a
simonp@8304 539 <span title='serialize a media query list'>serialization</span> of the <span>collection of media queries</span>.</p>
simonp@8226 540 <p>Setting the <code title=dom-MediaList-mediaText>mediaText</code> attribute must run these steps:
simonp@8226 541 <ol>
simonp@8226 542 <li><p>Empty the <span>collection of media queries</span>.</p></li>
simonp@8226 543 <li><p>If the given value is the empty string terminate these steps.</p></li>
simonp@8226 544 <li><p>Append all the media queries as a result of <span title='parse a media query list'>parsing</span> the given
simonp@8226 545 value to the <span>collection of media queries</span>.</p></li>
simonp@8226 546 </ol>
simonp@8226 547
simonp@8304 548 <p>The <dfn title=dom-MediaList-item><code>item(<var title>index</var>)</code></dfn> method must return the media query in the <span>collection of media
simonp@8304 549 queries</span> given by <var title>index</var>, or null, if <var title>index</var> is greater than or equal to the number of media queries in the
simonp@8226 550 <span>collection of media queries</span>.</p>
simonp@8226 551
simonp@8304 552 <p>The <dfn title=dom-MediaList-length><code>length</code></dfn> attribute must return the number of media queries in the <span>collection of media
simonp@8304 553 queries</span>.</p>
simonp@8226 554
simonp@8289 555 <p>The <dfn title=dom-MediaList-appendMedium><code>appendMedium(<var title>medium</var>)</code></dfn> method must run these steps:</p>
simonp@8226 556 <ol>
simonp@8289 557 <li><p>Let <var title>m</var> be the result of <span title='parse a media query'>parsing</span> the given value.</p></li>
simonp@8289 558 <li><p>If <var title>m</var> is null terminate these steps.</p></li>
simonp@8289 559 <li><p>If <span title='compare media queries'>comparing</span> <var title>m</var> with any of the media queries in the
simonp@8226 560 <span>collection of media queries</span> returns true terminate these steps.</p></li>
simonp@8289 561 <li><p>Append <var title>m</var> to the <span>collection of media queries</span>.</p></li>
simonp@8226 562 </ol>
simonp@8226 563
simonp@8289 564 <p>The <dfn title=dom-MediaList-deleteMedium><code>deleteMedium(<var title>medium</var>)</code></dfn> method must run these steps:</p>
simonp@8226 565 <ol>
simonp@8289 566 <li><p>Let <var title>m</var> be the result of <span title='parse a media query'>parsing</span> the given value.</p></li>
simonp@8289 567 <li><p>If <var title>m</var> is null terminate these steps.</p></li>
simonp@8226 568 <li><p>Remove any media query from the <span>collection of media queries</span> for which
simonp@8289 569 <span title='compare media queries'>comparing</span> the media query with <var title>m</var> returns true.</p></li>
simonp@8226 570 </ol>
simonp@8226 571
simonp@8244 572 <h2>Selectors</h2>
simonp@8244 573
simonp@8244 574 <p>Selectors are defined in the Selectors specification. This section
simonp@8244 575 mainly defines how to serialize them.</p> <!-- XXX ref -->
simonp@8244 576
simonp@8244 577 <!-- XXX ref universal selector etc? some are in <span> some not -->
simonp@8244 578
simonp@8244 579
simonp@8244 580 <h3>Parsing Selectors</h3>
simonp@8244 581
simonp@8244 582 <p>To
simonp@8244 583 <dfn>parse a group of selectors</dfn>
simonp@8304 584 means to parse the value using the <code title>selectors_group</code>
simonp@8244 585 production defined in the Selectors specification and return either a
simonp@8289 586 group of selectors if parsing did not fail or null if parsing did
simonp@8244 587 fail.</p> <!-- XXX ref -->
simonp@8244 588
simonp@8244 589
simonp@8244 590 <h3>Serializing Selectors</h3>
simonp@8244 591 <!-- http://dump.testsuite.org/2009/cssom/serializing-selectors.htm -->
simonp@8244 592
simonp@8244 593 <p>To
simonp@8244 594 <dfn>serialize a group of selectors</dfn>
simonp@8244 595 <span title="serialize a selector">serialize</span> each selector in the
simonp@8244 596 group of selectors and then
simonp@8244 597 <span title="serialize a comma-separated list">serialize</span> the
simonp@8244 598 group.</p>
simonp@8244 599
simonp@8244 600 <p>To <dfn>serialize a selector</dfn> let
simonp@8289 601 <var title>s</var> be the empty string, run the steps below for each
simonp@8244 602 part of the chain of the selector, and finally return
simonp@8289 603 <var title>s</var>:</p>
simonp@8244 604
simonp@8244 605 <ol>
simonp@8244 606 <li><p>If there is only one <span>simple selector</span> in the
simonp@8244 607 <span>sequence of simple selectors</span> which is a
simonp@8244 608 <span>universal selector</span>, append the result of
simonp@8244 609 <span title="serialize a simple selector">serializing</span> the
simonp@8289 610 <span>universal selector</span> to <var title>s</var>.</p></li>
simonp@8244 611
simonp@8244 612 <li><p>Otherwise, for each <span>simple selector</span> in the
simonp@8244 613 <span>sequence of simple selectors</span> that is not a
simonp@8244 614 universal selector of which the <span>namespace prefix</span> maps to
simonp@8244 615 the null namespace (not in a namespace) or of which the
simonp@8244 616 <span>namespace prefix</span> maps to a namespace that is not the
simonp@8244 617 <span>default namespace</span>
simonp@8244 618 <span title="serialize a simple selector">serialize</span> the
simonp@8244 619 <span>simple selector</span> and append the result to
simonp@8289 620 <var title>s</var>.</p></li>
simonp@8244 621
simonp@8244 622 <li><p>If this is not the last part of the chain of the selector append a
simonp@8244 623 single SPACE (U+0020), followed by the combinator
simonp@8304 624 "<code title>></code>",
simonp@8304 625 "<code title>+</code>", or
simonp@8304 626 "<code title>~</code>"
simonp@8244 627 as appropriate, followed by another single SPACE (U+0020) if the combinator was
simonp@8289 628 not whitespace, to <var title>s</var>.</p></li>
simonp@8244 629
simonp@8244 630 <li><p>If this is the last part of the chain of the selector and there is
simonp@8304 631 a pseudo-element, append "<code title>::</code>" followed by the name of the
simonp@8289 632 pseudo-class, to <var title>s</var>.</p></li>
simonp@8244 633 </ol>
simonp@8244 634
simonp@8244 635
simonp@8244 636 <p>To
simonp@8244 637 <dfn>serialize a simple selector</dfn>
simonp@8289 638 let <var title>s</var> be the empty string, run the steps below, and
simonp@8289 639 finally return <var title>s</var>:</p>
simonp@8244 640
simonp@8244 641 <dl class="switch">
simonp@8244 642 <dt>type selector</dt>
simonp@8244 643 <dt>universal selector</dt>
simonp@8244 644 <dd>
simonp@8226 645 <ol>
simonp@8244 646 <li><p>If the <span>namespace prefix</span> maps to a namespace that is
simonp@8244 647 not the <span>default namespace</span> and is not the
simonp@8244 648 null namespace (not in a namespace) append the
simonp@8244 649 <span title="serialize an identifier">escaped</span>
simonp@8304 650 <span>namespace prefix</span>, followed by a "<code title>|</code>" (U+007C)
simonp@8289 651 to <var title>s</var>.</p></li>
simonp@8244 652
simonp@8244 653 <li><p>If the <span>namespace prefix</span> maps to a namespace that is
simonp@8244 654 the null namespace (not in a namespace) append
simonp@8304 655 "<code title>|</code>" (U+007C) to <var title>s</var>.</p></li>
simonp@8244 656 <!-- This includes |* -->
simonp@8244 657
simonp@8244 658 <li><p>If this is a type selector append the
simonp@8244 659 <span title="serialize an identifier">escaped</span> element name to
simonp@8289 660 <var title>s</var>.</p></li>
simonp@8226 661
simonp@8304 662 <li><p>If this is a universal selector append "<code title>*</code>" (U+002A)
simonp@8289 663 to <var title>s</var>.</p></li>
simonp@8226 664 </ol>
simonp@8244 665 </dd>
simonp@8244 666
simonp@8244 667 <dt>attribute selector</dt>
simonp@8244 668 <dd>
simonp@8244 669 <ol>
simonp@8304 670 <li><p>Append "<code title>[</code>" (U+005B) to
simonp@8289 671 <var title>s</var>.</p></li>
simonp@8244 672
simonp@8244 673 <li><p>If the <span>namespace prefix</span> maps to a namespace that is
simonp@8244 674 not the null namespace (not in a namespace) append the
simonp@8244 675 <span title="serialize an identifier">escaped</span>
simonp@8304 676 <span>namespace prefix</span>, followed by a "<code title>|</code>" (U+007C)
simonp@8289 677 to <var title>s</var>.</p></li>
simonp@8244 678
simonp@8244 679 <li><p>If the <span>namespace prefix</span> maps to a namespace that is
simonp@8244 680 the null namespace (not in a namespace) append
simonp@8304 681 "<code title>|</code>" (U+007C) to <var title>s</var>.</p></li>
simonp@8244 682 <!-- This includes |* -->
simonp@8244 683
simonp@8244 684 <li><p>Append the <span title="serialize an identifier">escaped</span>
simonp@8289 685 attribute name to <var title>s</var>.</p></li>
simonp@8244 686
simonp@8244 687 <li><p>If there is an attribute value specified, append
simonp@8304 688 "<code title>=</code>",
simonp@8304 689 "<code title>~=</code>",
simonp@8304 690 "<code title>|=</code>",
simonp@8304 691 "<code title>^=</code>",
simonp@8304 692 "<code title>$=</code>", or
simonp@8304 693 "<code title>*=</code>"
simonp@8244 694 as appropriate (depending on the type of attribute selector), followed
simonp@8244 695 by the <span title="serialize a string">string escaped</span>
simonp@8289 696 attribute value, to <var title>s</var>.</p></li>
simonp@8244 697
simonp@8304 698 <li><p>Append "<code title>]</code>" (U+005D) to
simonp@8289 699 <var title>s</vaR>.</p></li>
simonp@8244 700 </ol>
simonp@8244 701 </dd>
simonp@8244 702
simonp@8244 703 <dt>class selector</dt>
simonp@8304 704 <dd><p>Append a "<code title>.</code>" (U+002E), followed by the
simonp@8244 705 <span title="serialize an identifier">escaped</span> class name to
simonp@8289 706 <var title>s</var>.</p></dd>
simonp@8244 707
simonp@8244 708 <dt>ID selector</dt>
simonp@8304 709 <dd><p>Append a "<code title>#</code>" (U+0023), followed by the
simonp@8244 710 <span title="serialize an identifier">escaped</span> ID to
simonp@8289 711 <var title>s</var>.</p></dd>
simonp@8244 712
simonp@8244 713 <dt>pseudo-class</dt>
simonp@8244 714 <dd>
simonp@8244 715 <p>If the pseudo-class does not accept arguments append
simonp@8304 716 "<code title>:</code>" (U+003A), followed by the name of the pseudo-class, to
simonp@8289 717 <var title>s</var>.</p>
simonp@8244 718
simonp@8304 719 <p>Otherwise, append "<code title>:</code>" (U+003A), followed by the name of
simonp@8304 720 the pseudo-class, followed by "<code title>(</code>" (U+0028), followed by the
simonp@8244 721 value of the pseudo-class argument determined as per below, followed by
simonp@8304 722 "<code title>)</code>" (U+0029), to <var title>s</var>.</p>
simonp@8226 723
simonp@8226 724 <dl class="switch">
simonp@8304 725 <dt><code title>:lang()</code></dt>
simonp@8244 726 <dd><p>The <span title="serialize an identifier">escaped</span>
simonp@8244 727 value.</p></dd>
simonp@8244 728
simonp@8304 729 <dt><code title>:nth-child()</code></dt>
simonp@8304 730 <dt><code title>:nth-last-child()</code></dt>
simonp@8304 731 <dt><code title>:nth-of-type()</code></dt>
simonp@8304 732 <dt><code title>:nth-last-of-type()</code></dt>
simonp@8226 733 <dd>
simonp@8226 734 <ol>
simonp@8244 735 <li><p>If the value is odd let the value be
simonp@8304 736 "<code title>2n+1</code>".</p></li>
simonp@8244 737
simonp@8244 738 <li><p>If the value is even let the value be
simonp@8304 739 "<code title>2n</code>".</p></li>
simonp@8244 740
simonp@8289 741 <li><p>If <var title>a</var> is zero let the value be
simonp@8289 742 <var title>b</var>
simonp@8244 743 <span title="serialize a CSS component value">serialized</span> as &lt;integer>.</p></li>
simonp@8244 744
simonp@8289 745 <li><p>If <var title>a</var> is one or minus one and
simonp@8289 746 <var title>b</var> is zero let the value be
simonp@8304 747 "<code title>n</code>" (U+006E).</p></li>
simonp@8244 748
simonp@8289 749 <li><p>If <var title>a</var> is one or minus one let the value be
simonp@8304 750 "<code title>n</code>" (U+006E), followed by
simonp@8304 751 "<code title>+</code>" (U+002B) if <var title>b</var> is positive,
simonp@8289 752 followed by <var title>b</var>
simonp@8244 753 <span title="serialize a CSS component value">serialized</span> as &lt;integer>.</p></li>
simonp@8244 754
simonp@8289 755 <li><p>If <var title>b</var> is zero let the value be
simonp@8289 756 <var title>a</var>
simonp@8244 757 <span title="serialize a CSS component value">serialized</span> as &lt;integer>,
simonp@8304 758 followed by "<code title>n</code>" (U+006E).</p></li>
simonp@8244 759
simonp@8244 760 <li><p>Otherwise let the value be
simonp@8289 761 <var title>a</var>
simonp@8244 762 <span title="serialize a CSS component value">serialized</span> as &lt;integer>,
simonp@8304 763 followed by "<code title>n</code>" (U+006E), followed by
simonp@8304 764 "<code title>+</code>" (U+002B) if <var title>b</var> is positive,
simonp@8289 765 followed by <var title>b</var>
simonp@8244 766 <span title="serialize a CSS component value">serialized</span> as &lt;integer>.</p></li>
simonp@8226 767 </ol>
simonp@8226 768 </dd>
simonp@8226 769
simonp@8304 770 <dt><code title>:not()</code></dt>
simonp@8244 771 <dd><p>The result of serializing the value using the rules for
simonp@8244 772 <span title="serialize a group of selectors">serializing a group of selectors</span>.</p></dd>
simonp@8226 773 </dl>
simonp@8244 774 </dd>
simonp@8244 775 </dl>
simonp@8244 776
simonp@8244 777
simonp@8244 778 <h2>CSS</h2>
simonp@8244 779
simonp@8244 780
simonp@8244 781 <h3>CSS Style Sheets</h3>
simonp@8244 782
simonp@8244 783 <!-- XXX
simonp@8244 784 element inserted into the DOM, style sheet created, element removed from
simonp@8244 785 the DOM, what happens to StyleSheet?
simonp@8244 786 -->
simonp@8244 787
simonp@8244 788 <p>A <dfn>CSS style sheet</dfn> is an abstract concept that
simonp@8244 789 represents a style sheet as defined by the CSS specification. In the CSSOM a
simonp@8244 790 <span>CSS style sheet</span> is represented as a <code>CSSStyleSheet</code> object. A
simonp@8244 791 <span>CSS style sheet</span> has a number of associated state items:</p>
simonp@8244 792
simonp@8244 793 <dl>
simonp@8305 794 <dt><dfn title=concept-css-style-sheet-type>type</dfn></dt>
simonp@8304 795 <dd><p>The literal string "<code title>text/css</code>".</p></dd>
simonp@8244 796
simonp@8305 797 <dt><dfn title=concept-css-style-sheet-location>location</dfn></dt>
simonp@8372 798 <dd><p>The <span data-anolis-spec=url title=concept-absolute-url>absolute URL</span> of the first request of the
simonp@8303 799 <span>CSS style sheet</span> or null if the <span>CSS style sheet</span> was
simonp@8244 800 embedded.</p></dd>
simonp@8244 801
simonp@8305 802 <dt><dfn title=concept-css-style-sheet-parent>parent</dfn></dt>
simonp@8303 803 <dd><p>The <span>CSS style sheet</span> that is the parent of the
simonp@8303 804 <span>CSS style sheet</span> or null if there is no associated parent.</p></dd>
simonp@8244 805
simonp@8305 806 <dt><dfn title=concept-css-style-sheet-owner-node>owner node</dfn></dt>
simonp@8303 807 <dd><p>The DOM node associated with the <span>CSS style sheet</span> or
simonp@8289 808 null if there is no associated DOM node.</p></dd>
simonp@8244 809
simonp@8305 810 <dt><dfn title=concept-css-style-sheet-owner-css-rule>owner CSS rule</dfn></dt>
simonp@8305 811 <dd><p>The <span>CSS rule</span> in the <span title=concept-css-style-sheet-parent>parent</span>
simonp@8303 812 that caused the inclusion of the <span>CSS style sheet</span> or null if
simonp@8244 813 there is no associated rule.</p></dd>
simonp@8244 814
simonp@8305 815 <dt><dfn title=concept-css-style-sheet-media>media</dfn></dt>
simonp@8244 816 <dd>
simonp@8244 817 <p>The <code>MediaList</code> object associated with the
simonp@8303 818 <span>CSS style sheet</span>.</p>
simonp@8244 819
simonp@8244 820 <p>If this property is set to a string run the
simonp@8244 821 <span>create a <code>MediaList</code> object</span> steps for that
simonp@8244 822 string and associate the returned object with the
simonp@8303 823 <span>CSS style sheet</span>.</p>
simonp@8244 824 </dd>
simonp@8244 825
simonp@8305 826 <dt><dfn title=concept-css-style-sheet-title>title</dfn></dt>
simonp@8244 827 <dd>
simonp@8303 828 <p>The title of the <span>CSS style sheet</span> or null if no title
simonp@8244 829 is specified or is the empty string, in which case the title is referred to
simonp@8244 830 as an empty title.</p>
simonp@8244 831
simonp@8244 832 <div class="example">
simonp@8305 833 <p>In the following, the <span title=concept-css-style-sheet-title>title</span> is non-empty
simonp@8244 834 for the first style sheet, but is empty for the second and third style sheets.</p>
simonp@8244 835 <pre>&lt;style title="papaya whip">
simonp@8226 836 body { background: #ffefd5; }
simonp@8226 837 &lt;/style></pre>
simonp@8226 838 <pre>&lt;style title="">
simonp@8226 839 body { background: orange; }
simonp@8226 840 &lt;/style></pre>
simonp@8226 841 <pre>&lt;style>
simonp@8226 842 body { background: brown; }
simonp@8226 843 &lt;/style></pre>
simonp@8244 844 </div>
simonp@8244 845 </dd>
simonp@8244 846
simonp@8305 847 <dt><dfn title=concept-css-style-sheet-alternate-flag>alternate flag</dfn></dt>
simonp@8244 848 <dd>
simonp@8244 849 <p>Either set or clear. Clear by default.</p>
simonp@8244 850
simonp@8244 851 <div class="example">
simonp@8304 852 <p>The following <span title="CSS style sheet">CSS style sheets</span> have
simonp@8305 853 their <span title=concept-css-style-sheet-alternate-flag>alternate flag</span> set:</p>
simonp@8244 854
simonp@8244 855 <pre>&lt;?xml-stylesheet alternate="yes" title="x" href="data:text/css,&hellip;"?></pre>
simonp@8244 856
simonp@8244 857 <pre>&lt;link rel="alternate stylesheet" title="x" href="data:text/css,&hellip;"></pre>
simonp@8244 858 </div>
simonp@8244 859 </dd>
simonp@8244 860
simonp@8305 861 <dt><dfn title=concept-css-style-sheet-disabled-flag>disabled flag</dfn></dt>
simonp@8244 862 <dd>
simonp@8244 863 <p>Either set or clear. Clear by default.</p>
simonp@8244 864
simonp@8244 865 <p class="note">Even when clear it does not necessarily mean that the
simonp@8303 866 <span>CSS style sheet</span> is actually used for rendering.</p>
simonp@8244 867 </dd>
simonp@8244 868
simonp@8244 869
simonp@8305 870 <dt><dfn title=concept-css-style-sheet-css-rules>CSS rules</dfn></dt>
simonp@8244 871 <dd><p>The <span title="CSS rule">CSS rules</span> associated with the
simonp@8303 872 <span>CSS style sheet</span>.</p></dd>
simonp@8372 873
simonp@8372 874 <dt><dfn title=concept-css-style-sheet-origin-clean-flag>origin-clean flag</dfn>
simonp@8372 875 <dd><p>Either set or clear. If it is set, the API allows reading and modifying of the <span title=concept-css-style-sheet-css-rules>CSS rules</span>.
simonp@8244 876 </dl>
simonp@8244 877
simonp@8305 878 <p>When you are to <span>create a CSS style sheet</span> the above properties,
simonp@8305 879 with the exception of <span title=concept-css-style-sheet-type>type</span> and
simonp@8305 880 <span title=concept-css-style-sheet-css-rules>CSS rules</span>, are to be set to
simonp@8244 881 their proper values.</p>
simonp@8244 882
simonp@8244 883 <!-- same-origin restrictions -->
simonp@8244 884
simonp@8244 885
simonp@8244 886 <h4>The <code title>StyleSheet</code> Interface</h4>
simonp@8226 887
simonp@8226 888 <!--
simonp@8226 889 //
simonp@8226 890 // All members defined since DOM-2 Style. Only difference
simonp@8226 891 // is addition of [PutForwards=mediaText], which is presently
simonp@8226 892 // not defined in CSSOM draft.
simonp@8226 893 //
simonp@8226 894 -->
simonp@8226 895
simonp@8226 896 <p>The <code>StyleSheet</code> interface represents an abstract, base style sheet.</p>
simonp@8226 897
simonp@8226 898 <pre class=idl>interface <dfn>StyleSheet</dfn> {
simonp@8226 899 readonly attribute DOMString <span title=dom-StyleSheet-type>type</span>;
simonp@8226 900 readonly attribute DOMString? <span title=dom-StyleSheet-href>href</span>;
simonp@8304 901 readonly attribute (<span data-anolis-spec=dom>Element</span> or <span data-anolis-spec=dom>ProcessingInstruction</span>)? <!--
simonp@8304 902 --><span title=dom-StyleSheet-ownerNode>ownerNode</span>;
simonp@8226 903 readonly attribute <span>StyleSheet</span>? <span title=dom-StyleSheet-parentStyleSheet>parentStyleSheet</span>;
simonp@8226 904 readonly attribute DOMString? <span title=dom-StyleSheet-title>title</span>;
simonp@8226 905 readonly attribute <span>MediaList</span> <span title=dom-StyleSheet-media>media</span>;
simonp@8226 906 attribute boolean <span title=dom-StyleSheet-disabled>disabled</span>;
simonp@8226 907 };</pre>
simonp@8226 908
simonp@8305 909 <p>The <dfn title=dom-StyleSheet-type><code>type</code></dfn> attribute must return the <span title=concept-css-style-sheet-type>type</span>.</p>
simonp@8305 910
simonp@8305 911 <p>The <dfn title=dom-StyleSheet-href><code>href</code></dfn> attribute must return the <span title=concept-css-style-sheet-location>location</span> or null if
simonp@8305 912 none.</p>
simonp@8289 913 <p class='XXX'>What should the default value be if not known or specified upon creation? an empty string or null?</p>
simonp@8289 914
simonp@8305 915 <p>The <dfn title=dom-StyleSheet-ownerNode><code>ownerNode</code></dfn> attribute must return the <span title=concept-css-style-sheet-owner-node>owner
simonp@8305 916 node</span> or null if there is none.</p>
simonp@8305 917
simonp@8305 918 <p>The <dfn title=dom-StyleSheet-parentStyleSheet><code>parentStyleSheet</code></dfn> attribute must return the
simonp@8305 919 <span title=concept-css-style-sheet-parent>parent</span> or null if there is none.</p>
simonp@8305 920
simonp@8305 921 <p>The <dfn title=dom-StyleSheet-title><code>title</code></dfn> attribute must return the <span title=concept-css-style-sheet-title>title</span> or null if
simonp@8304 922 none.</p>
simonp@8289 923 <p class='XXX'>What should the default value be if not known or specified upon creation? an empty string or null?</p>
simonp@8226 924
simonp@8305 925 <p>The <dfn title=dom-StyleSheet-media><code>media</code></dfn> attribute must return the <span title=concept-css-style-sheet-media>media</span>.</p>
simonp@8226 926 <p class='XXX'>Should it be nullable?</p>
simonp@8226 927 <p class='XXX'>Need to define a setter that implements the semantics of setting this attribute to a string representing a MediaList.</p>
simonp@8226 928
simonp@8305 929 <p>The <dfn title=dom-StyleSheet-disabled><code>disabled</code></dfn> attribute, on getting, must return true if the
simonp@8305 930 <span title=concept-css-style-sheet-disabled-flag>disabled flag</span>
simonp@8305 931 is set, or false otherwise. On setting, the <code title=dom-StyleSheet-disabled>disabled</code> attribute must set the
simonp@8305 932 <span title=concept-css-style-sheet-disabled-flag>disabled flag</span> if the new value is true, or unset the
simonp@8305 933 <span title=concept-css-style-sheet-disabled-flag>disabled flag</span> otherwise.</p>
simonp@8226 934
simonp@8226 935
simonp@8244 936 <h4>The <code title>CSSStyleSheet</code> Interface</h4>
simonp@8226 937
simonp@8226 938 <!--
simonp@8226 939 //
simonp@8226 940 // All members defined since DOM-2 Style. The only differences are:
simonp@8226 941 //
simonp@8226 942 // 1. removal of raises(DOMException) on {insert,delete}Rule operations.
simonp@8226 943 //
simonp@8226 944 -->
simonp@8226 945
simonp@8303 946 <p>The <code>CSSStyleSheet</code> interface represents a CSS <span>CSS style sheet</span> rule.</p>
simonp@8226 947 <pre class=idl>interface <dfn>CSSStyleSheet</dfn> : <span>StyleSheet</span> {
simonp@8226 948 readonly attribute <span>CSSRule</span>? <span title=dom-CSSStyleSheet-ownerRule>ownerRule</span>;
simonp@8226 949 readonly attribute <span>CSSRuleList</span> <span title=dom-CSSStyleSheet-cssRules>cssRules</span>;
simonp@8226 950 unsigned long <span title=dom-CSSStyleSheet-insertRule>insertRule</span>(DOMString rule, unsigned long index);
simonp@8226 951 void <span title=dom-CSSStyleSheet-deleteRule>deleteRule</span>(unsigned long index);
simonp@8226 952 };</pre>
simonp@8226 953
simonp@8305 954 <p>The <dfn title=dom-CSSStyleSheet-ownerRule><code>ownerRule</code></dfn> attribute must return the <span title=concept-css-style-sheet-owner-css-rule>owner
simonp@8305 955 CSS rule</span> or null if none. If a value other than null is ever returned, than that same value must always be returned on each get access.</p>
simonp@8226 956
simonp@8372 957 <p>The <dfn title=dom-CSSStyleSheet-cssRules><code>cssRules</code></dfn> attribute must follow these steps:
simonp@8372 958
simonp@8372 959 <ol>
simonp@8372 960 <li><p>If the <span title=concept-css-style-sheet-origin-clean-flag>origin-clean flag</span> is clear,
simonp@8372 961 <span title=concept-throw data-anolis-spec=dom>throw</span> a <code data-anolis-spec=dom>SecurityError</code> exception.
simonp@8372 962 <li><p>Return a read-only, live <code>CSSRuleList</code> object representing
simonp@8372 963 the <span title=concept-css-style-sheet-css-rules>CSS rules</span>. The same object must be returned on each get access.</p>
simonp@8372 964 <p class='note'>Even though the returned <code>CSSRuleList</code> object is read-only (from the perspective of
simonp@8372 965 client-authored script), it can nevertheless change over time due to its liveness status. For example, invoking
simonp@8372 966 the <code title=dom-CSSStyleSheet-insertRule>insertRule()</code> or <code title=dom-CSSStyleSheet-deleteRule>deleteRule()</code> methods can result in
simonp@8372 967 mutations reflected in the returned object.</p>
simonp@8372 968 </ol>
simonp@8372 969
simonp@8372 970 <p>The <dfn title=dom-CSSStyleSheet-insertRule><code>insertRule(<var title>rule</var>, <var title>index</var>)</code></dfn> method must run the following steps:
simonp@8372 971
simonp@8372 972 <ol>
simonp@8372 973 <li><p>If the <span title=concept-css-style-sheet-origin-clean-flag>origin-clean flag</span> is clear,
simonp@8372 974 <span title=concept-throw data-anolis-spec=dom>throw</span> a <code data-anolis-spec=dom>SecurityError</code> exception.
simonp@8372 975 <li><p>Return the result of invoking <span>insert a CSS rule</span> <var title>rule</var> in the <span title=concept-css-style-sheet-css-rules>CSS rules</span>
simonp@8372 976 at <var title>index</var>.
simonp@8372 977 </ol>
simonp@8372 978
simonp@8372 979 <p>The <dfn title=dom-CSSStyleSheet-deleteRule><code>deleteRule(<var title>index</var>)</code></dfn> method must run the following steps:
simonp@8372 980
simonp@8372 981 <ol>
simonp@8372 982 <li><p>If the <span title=concept-css-style-sheet-origin-clean-flag>origin-clean flag</span> is clear,
simonp@8372 983 <span title=concept-throw data-anolis-spec=dom>throw</span> a <code data-anolis-spec=dom>SecurityError</code> exception.
simonp@8372 984 <li><p><span>Remove a CSS rule</span> in the <span title=concept-css-style-sheet-css-rules>CSS rules</span> at <var title>index</var>.
simonp@8372 985 </ol>
simonp@8226 986
simonp@8307 987 <h3>CSS Style Sheet Collections</h3>
simonp@8244 988
simonp@8244 989 <p>Below various new concepts are defined that are associated with each
simonp@8244 990 <code data-anolis-spec=dom>Document</code> object.</p>
simonp@8244 991
simonp@8244 992 <p>Each <code data-anolis-spec=dom>Document</code> has an associated list of zero or more
simonp@8304 993 <span title="CSS style sheet">CSS style sheets</span>, named the
simonp@8306 994 <dfn>document CSS style sheets</dfn>. This is
simonp@8244 995 an ordered list that contains all
simonp@8304 996 <span title="CSS style sheet">CSS style sheets</span> associated with the
simonp@8244 997 <code data-anolis-spec=dom>Document</code>, in
simonp@8244 998 <span data-anolis-spec=dom title=concept-tree-order>tree order</span>, with
simonp@8304 999 <span title="CSS style sheet">CSS style sheets</span> created from HTTP
simonp@8244 1000 <code title="http-link">Link</code> headers first, if any, in header
simonp@8244 1001 order.</p>
simonp@8244 1002
simonp@8305 1003 <p>To <dfn>create a CSS style sheet</dfn>, run these
simonp@8244 1004 steps:</p>
simonp@8244 1005
simonp@8244 1006 <ol>
simonp@8303 1007 <li><p>Create a new <span>CSS style sheet</span> object and set its
simonp@8244 1008 properties as specified.</p></li>
simonp@8244 1009
simonp@8306 1010 <li><p>Then run the <span>add a CSS style sheet</span> steps for the newly
simonp@8303 1011 created <span>CSS style sheet</span>.</p></li>
simonp@8244 1012 </ol>
simonp@8244 1013
simonp@8306 1014 <p>To <dfn>add a CSS style sheet</dfn>, run these
simonp@8244 1015 steps:</p>
simonp@8244 1016
simonp@8244 1017 <ol>
simonp@8303 1018 <li><p>Add the <span>CSS style sheet</span> to the list of
simonp@8306 1019 <span>document CSS style sheets</span> at the appropriate location. The
simonp@8244 1020 remainder of these steps deal with the
simonp@8305 1021 <span title=concept-css-style-sheet-disabled-flag>disabled flag</span>.</p></li>
simonp@8305 1022
simonp@8305 1023 <li><p>If the <span title=concept-css-style-sheet-disabled-flag>disabled flag</span> is set, terminate
simonp@8244 1024 these steps.</p></li>
simonp@8244 1025
simonp@8305 1026 <li><p>If the <span title=concept-css-style-sheet-title>title</span> is non-empty, the
simonp@8305 1027 <span title=concept-css-style-sheet-alternate-flag>alternate flag</span> is clear, and
simonp@8306 1028 <span>preferred CSS style sheet set name</span> is the empty string
simonp@8306 1029 <span>change the preferred CSS style sheet set name</span> to the
simonp@8305 1030 <span title=concept-css-style-sheet-title>title</span>.</p></li>
simonp@8244 1031
simonp@8244 1032 <li>
simonp@8244 1033 <p>If any of the following is true clear the
simonp@8305 1034 <span title=concept-css-style-sheet-disabled-flag>disabled flag</span> and terminate these steps:
simonp@8244 1035
simonp@8244 1036 <ul>
simonp@8305 1037 <li><p>The <span title=concept-css-style-sheet-title>title</span> is empty.</p></li>
simonp@8306 1038 <li><p>The <span>last CSS style sheet set name</span> is null and the
simonp@8305 1039 <span title=concept-css-style-sheet-title>title</span> is a
simonp@8244 1040 <span data-anolis-spec=dom>case-sensitive</span> match
simonp@8306 1041 for the <span>preferred CSS style sheet set name</span>.</p></li>
simonp@8305 1042 <li><p>The <span title=concept-css-style-sheet-title>title</span> is a
simonp@8244 1043 <span data-anolis-spec=dom>case-sensitive</span> match for the
simonp@8306 1044 <span>last CSS style sheet set name</span>.</p></li>
simonp@8244 1045 </ul>
simonp@8244 1046 </li>
simonp@8244 1047
simonp@8305 1048 <li><p>Set the <span title=concept-css-style-sheet-disabled-flag>disabled flag</span>.</li>
simonp@8244 1049 </ol>
simonp@8244 1050
simonp@8306 1051 <p>A <dfn>persistent CSS style sheet</dfn> is a
simonp@8306 1052 <span>CSS style sheet</span> from the <span>document CSS style sheets</span>
simonp@8305 1053 whose <span title=concept-css-style-sheet-title>title</span> is the empty string and whose
simonp@8305 1054 <span title=concept-css-style-sheet-alternate-flag>alternate flag</span> is clear.</p>
simonp@8244 1055
simonp@8306 1056 <p>A <dfn>CSS style sheet set</dfn> is an ordered
simonp@8304 1057 collection of one or more <span title="CSS style sheet">CSS style sheets</span>
simonp@8306 1058 from the <span>document CSS style sheets</span> which have an identical
simonp@8305 1059 <span title=concept-css-style-sheet-title>title</span> that is not the empty string.</p>
simonp@8244 1060
simonp@8306 1061 <p>A <dfn>CSS style sheet set name</dfn> is the
simonp@8306 1062 <span title=concept-css-style-sheet-title>title</span> the <span>CSS style sheet set</span> has in
simonp@8244 1063 common.</p>
simonp@8244 1064
simonp@8306 1065 <p>An <dfn>enabled CSS style sheet set</dfn> is a
simonp@8306 1066 <span>CSS style sheet set</span> of which each <span>CSS style sheet</span> has
simonp@8305 1067 its <span title=concept-css-style-sheet-disabled-flag>disabled flag</span> clear.</p>
simonp@8244 1068
simonp@8306 1069 <p>To <dfn>enable a CSS style sheet set</dfn>
simonp@8289 1070 with name <var title>name</var>, run these steps:</p>
simonp@8244 1071
simonp@8244 1072 <ol>
simonp@8289 1073 <li><p>If <var title>name</var> is the empty string, set the
simonp@8305 1074 <span title=concept-css-style-sheet-disabled-flag>disabled flag</span> for each <span>CSS style sheet</span>
simonp@8306 1075 that is in a <span>CSS style sheet set</span> and terminate these steps.</li>
simonp@8305 1076
simonp@8305 1077 <li><p>Clear the <span title=concept-css-style-sheet-disabled-flag>disabled flag</span> for each
simonp@8306 1078 <span>CSS style sheet</span> in a <span>CSS style sheet set</span> whose
simonp@8327 1079 <span>CSS style sheet set name</span> is a
simonp@8244 1080 <span data-anolis-spec=dom>case-sensitive</span> match for
simonp@8289 1081 <var title>name</var> and set it for all other
simonp@8304 1082 <span title="CSS style sheet">CSS style sheets</span> in a
simonp@8306 1083 <span>CSS style sheet set</span>.</p></li>
simonp@8244 1084 </ol>
simonp@8244 1085
simonp@8306 1086 <p>To <dfn>select a CSS style sheet set</dfn>
simonp@8289 1087 with name <var title>name</var>, run these steps:</p>
simonp@8244 1088
simonp@8244 1089 <ol>
simonp@8306 1090 <li><p><span>enable a CSS style sheet set</span> with name
simonp@8289 1091 <var title>name</var>.</p></li>
simonp@8244 1092
simonp@8306 1093 <li><p>Set <span>last CSS style sheet set name</span> to
simonp@8289 1094 <var title>name</var>.</p></li>
simonp@8244 1095 </ol>
simonp@8244 1096
simonp@8306 1097 <p>A <dfn>last CSS style sheet set name</dfn>
simonp@8306 1098 is a concept to determine what <span>CSS style sheet set</span> was last
simonp@8306 1099 <span title="select a CSS style sheet set">selected</span>. Initially its
simonp@8289 1100 value is null.</p>
simonp@8244 1101
simonp@8244 1102 <p>A
simonp@8306 1103 <dfn>preferred CSS style sheet set name</dfn>
simonp@8244 1104 is a concept to determine which
simonp@8304 1105 <span title="CSS style sheet">CSS style sheets</span> need to have their
simonp@8305 1106 <span title=concept-css-style-sheet-disabled-flag>disabled flag</span> clear. Initially its value
simonp@8244 1107 is the empty string.
simonp@8244 1108
simonp@8244 1109 <p>To
simonp@8306 1110 <dfn>change the preferred CSS style sheet set name</dfn>
simonp@8289 1111 with name <var title>name</var>, run these steps:</p>
simonp@8244 1112
simonp@8244 1113 <ol>
simonp@8306 1114 <li><p>Let <var title>current</var> be the <span>preferred CSS style sheet set name</span>.</p></li>
simonp@8306 1115
simonp@8306 1116 <li><p>Set <span>preferred CSS style sheet set name</span> to
simonp@8289 1117 <var title>name</var>.</p></li>
simonp@8289 1118
simonp@8289 1119 <li><p>If <var title>name</var> is not a
simonp@8244 1120 <span data-anolis-spec=dom>case-sensitive</span> match for
simonp@8289 1121 <var title>current</var> and
simonp@8306 1122 <span>last CSS style sheet set name</span> is null
simonp@8306 1123 <span>enable a CSS style sheet set</span> with name
simonp@8289 1124 <var title>name</var>.</p></li>
simonp@8244 1125 </ol>
simonp@8244 1126
simonp@8244 1127 <!-- XXX ought to define "applied"
simonp@8244 1128
simonp@8244 1129 thoughts:
simonp@8244 1130 depends on disabled flag, alternate flag, media queries, sheesh
simonp@8244 1131 -->
simonp@8244 1132
simonp@8244 1133
simonp@8244 1134 <h4>The HTTP <code title>Default-Style</code> Header</h4>
simonp@8244 1135
simonp@8244 1136 <p>The HTTP <code title="http-default-style">Default-Style</code> header
simonp@8306 1137 can be used to set the <span>preferred CSS style sheet set name</span>
simonp@8306 1138 influencing which <span>CSS style sheet set</span> is (initially) the
simonp@8306 1139 <span>enabled CSS style sheet set</span>.</p>
simonp@8244 1140
simonp@8244 1141 <p>For each HTTP <code title="http-default-style">Default-Style</code>
simonp@8244 1142 header, in header order, the user agent must
simonp@8306 1143 <span>change the preferred CSS style sheet set name</span> with name being the
simonp@8244 1144 value of the header.</p>
simonp@8244 1145
simonp@8244 1146
simonp@8244 1147 <h4>The <code title>StyleSheetList</code> Interface</h4>
simonp@8229 1148
simonp@8304 1149 <p>The <code>StyleSheetList</code> interface represents an ordered collection of <span title="CSS style sheet">CSS style sheets</span>.</p>
simonp@8229 1150
simonp@8229 1151 <pre class=idl>[ArrayClass]
simonp@8229 1152 interface <dfn>StyleSheetList</dfn> {
simonp@8229 1153 getter <span>StyleSheet</span>? <span title=dom-StyleSheetList-item>item</span>(unsigned long index);
simonp@8229 1154 readonly attribute unsigned long <span title=dom-StyleSheetList-length>length</span>;
simonp@8229 1155 };</pre>
simonp@8229 1156
simonp@8304 1157 <p>The object's <span data-anolis-spec=webidl>supported property indices</span> are the numbers in the range zero to one less than the number of
simonp@8304 1158 <span title="CSS style sheet">CSS style sheets</span> represented by the collection. If there are no such <span title="CSS style sheet">CSS style sheets</span>,
simonp@8304 1159 then there are no <span data-anolis-spec=webidl>supported property indices</span>.
simonp@8304 1160
simonp@8304 1161 <p>The <dfn title=dom-StyleSheetList-item><code>item(<var title>index</var>)</code></dfn> method must return the <var title>index</var>th <span>CSS style
simonp@8304 1162 sheet</span> in the collection. If there is no <var title>index</var>th object in the collection, then the method must return null.
simonp@8304 1163
simonp@8304 1164 <p>The <dfn title=dom-StyleSheetList-length><code>length</code></dfn> attribute must return the number of <span title="CSS style sheet">CSS style sheets</span>
simonp@8304 1165 represented by the collection.
simonp@8226 1166
simonp@8244 1167 <h4>Extensions to the <code title>Document</code> Interface</h4>
simonp@8226 1168
simonp@8226 1169 <!--
simonp@8226 1170 //
simonp@8226 1171 // Significant changes since DOM-2 Style:
simonp@8226 1172 //
simonp@8226 1173 // 1. move styleSheets from separate interface (DocumentStyle) to Document
simonp@8226 1174 // 2. addition of selectedStyleSheetSet, lastStyleSheetSet, preferredStyleSheetSet, styleSheetSets, and enableStyleSheetsForSet members
simonp@8226 1175 //
simonp@8226 1176 // N.B. HTML4 Section 14.3 "External Style Sheets" introduces the concept of a "group [of] alternate style sheets ... under a single style [sheet set] name",
simonp@8226 1177 // but does not actually use the term "style sheet set". See http://www.w3.org/TR/html401/present/styles.html#h-14.3 for details.
simonp@8226 1178 //
simonp@8226 1179 // N.B. According to HTML4 Section 14.3, a "persistent style sheet ... must apply in addition to any alternate style sheet".
simonp@8226 1180 //
simonp@8226 1181 // N.B. HTML4 Section 14.3 distinguishes the three categories of style sheets as follows:
simonp@8226 1182 //
simonp@8226 1183 // * persistent - @rel='stylesheet', @title is missing (or empty string?)
simonp@8226 1184 // * preferred - @rel='stylesheet', @title is present (and non-empty?)
simonp@8226 1185 // * alternate - @rel='alternate stylesheet', @title is present (and non-empty?)
simonp@8226 1186 //
simonp@8226 1187 // Also, HTML5 effectively defines:
simonp@8226 1188 //
simonp@8226 1189 // * ignored - @rel='alternate stylesheet', @title is missing (or is empty string?) - in this case, LinkStyle.style must evaluate to null
simonp@8226 1190 //
simonp@8304 1191 // N.B. HTML4 Section 4.3 allows author to specify the default preferred style sheet [set]... [presumably in the case that there are multiple preferred style
simonp@8304 1192 // sheet sets]:
simonp@8226 1193 //
simonp@8226 1194 // * in content - <META http-equiv="Default-Style" content="compact">
simonp@8226 1195 // * in http - e.g., using response header - "Default-Style: compact"
simonp@8304 1196 // * if multiple of the above forms are present, then the LAST one [seen or parsed] takes precedence; HOWEVER, if two or more LINK elements specify preferred
simonp@8304 1197 // style [sheet sets], the FIRST one present in the document takes precedence;
simonp@8226 1198 // * preferred style sheets specified using the above (META or HTTP header equivalent) take precedence over those specified with LINK
simonp@8226 1199 //
simonp@8226 1200 // N.B. CSSOM Draft presently employs the term "Style Sheet Collection"
simonp@8226 1201 //
simonp@8226 1202 // Spec Issues:
simonp@8226 1203 //
simonp@8226 1204 // 1. need to specify which style sheets are included in styleSheets, and in which order:
simonp@8226 1205 //
simonp@8226 1206 // * from Link HTTP header reference
simonp@8226 1207 // * from <?xml-stylesheet ...?>
simonp@8226 1208 // * from LINK element, @rel='stylesheet'|'alternate stylesheet'
simonp@8226 1209 // * from STYLE element
simonp@8226 1210 //
simonp@8226 1211 // 2. for purpose of comparing two titled (named) style sheets, is title (name) compared on case-sensitive or case-insensitive basis
simonp@8226 1212 //
simonp@8226 1213 // 3. CSSOM 6.2 appears to imply that one can create a CSSStyleSheet (or StyleSheet) object and add it to a Document. However, that is not the case; rather
simonp@8304 1214 // it is necessary to create an HTMLLinkElement or HTMLStyleElement element to indirectly create an empty StyleSheet, then this element can be added to the
simonp@8304 1215 // Document.
simonp@8226 1216 //
simonp@8226 1217 -->
simonp@8226 1218
simonp@8226 1219 <pre class=idl>partial interface <span data-anolis-spec=dom>Document</span> {
simonp@8226 1220 readonly attribute <span>StyleSheetList</span> <span title=dom-Document-styleSheets>styleSheets</span>;<!-- DOM-2 - defined on DocumentStyle interface -->
simonp@8226 1221 attribute DOMString? <span title=dom-Document-selectedStyleSheetSet>selectedStyleSheetSet</span>;<!-- new -->
simonp@8226 1222 readonly attribute DOMString? <span title=dom-Document-lastStyleSheetSet>lastStyleSheetSet</span>;<!-- new -->
simonp@8226 1223 readonly attribute DOMString? <span title=dom-Document-preferredStyleSheetSet>preferredStyleSheetSet</span>;<!-- new -->
simonp@8226 1224 readonly attribute DOMString[] <span title=dom-Document-styleSheetSets>styleSheetSets</span>;<!-- new -->
simonp@8226 1225 void <span title=dom-Document-enableStyleSheetsForSet>enableStyleSheetsForSet</span>(DOMString? name);<!-- new -->
simonp@8226 1226 };</pre>
simonp@8226 1227
simonp@8229 1228 <p>The <dfn title=dom-Document-styleSheets><code>styleSheets</code></dfn> attribute must return a <code>StyleSheetList</code> collection representing
simonp@8306 1229 the <span>document CSS style sheets</span>.</p>
simonp@8226 1230 <p class='note'>Because of historical IDL limitations the <code title=dom-Document-styleSheets>styleSheets</code> attribute
simonp@8226 1231 used to be on a separate interface, <code>DocumentStyle</code>.</p>
simonp@8226 1232
simonp@8301 1233 <p>The <dfn title=dom-Document-selectedStyleSheetSet><code>selectedStyleSheetSet</code></dfn> attribute, on getting, must run these steps:</p>
simonp@8226 1234 <ol>
simonp@8306 1235 <li><p>If there is a single <span>enabled CSS style sheet set</span> and no
simonp@8306 1236 other <span>document CSS style sheets</span> with a non-empty
simonp@8305 1237 <span title=concept-css-style-sheet-title>title</span> have the
simonp@8305 1238 <span title=concept-css-style-sheet-disabled-flag>disabled flag</span> unset, return the
simonp@8327 1239 <span>CSS style sheet set name</span> of the
simonp@8306 1240 <span>enabled CSS style sheet set</span> and terminate these steps.</li>
simonp@8226 1241
simonp@8304 1242 <li><p>Otherwise, if <span title="CSS style sheet">CSS style sheets</span> from
simonp@8306 1243 different <span title='CSS style sheet set'>CSS style sheet sets</span> have
simonp@8305 1244 their <span title=concept-css-style-sheet-disabled-flag>disabled flag</span> unset, return
simonp@8289 1245 null and terminate these steps.</li>
simonp@8226 1246
simonp@8226 1247 <li>
simonp@8226 1248 <p>Otherwise, return the empty string.</p>
simonp@8226 1249
simonp@8226 1250 <p class='note'>At this point either all
simonp@8304 1251 <span title="CSS style sheet">CSS style sheets</span> with a non-empty
simonp@8305 1252 <span title=concept-css-style-sheet-title>title</span> have the
simonp@8305 1253 <span title=concept-css-style-sheet-disabled-flag>disabled flag</span> set, or there are no such
simonp@8304 1254 <span title="CSS style sheet">CSS style sheets</span>.</p>
simonp@8226 1255 </li>
simonp@8226 1256 </ol>
simonp@8226 1257
simonp@8226 1258 <p>On setting the
simonp@8226 1259 <code title='dom-Document-selectedStyleSheetSet'>selectedStyleSheetSet</code>
simonp@8226 1260 attribute these steps must be run:</p>
simonp@8226 1261
simonp@8226 1262 <ol>
simonp@8289 1263 <li><p>If the value is null terminate this set of steps.</p></li>
simonp@8331 1264 <li><p>Otherwise, <span>select a CSS style sheet set</span> with the name being the
simonp@8226 1265 value passed.</p></li>
simonp@8226 1266 </ol>
simonp@8226 1267
simonp@8226 1268 <p>From the DOM's perspective, all views have the same
simonp@8226 1269 <code title='dom-Document-selectedStyleSheetSet'>selectedStyleSheetSet</code>.
simonp@8226 1270 If a user agent supports multiple views with different selected
simonp@8226 1271 alternative style sheets, then this attribute (and the
simonp@8226 1272 <code>StyleSheet</code> interface's
simonp@8226 1273 <code title='dom-StyleSheet-disabled'>disabled</code> attribute)
simonp@8226 1274 must return and set the value for the default
simonp@8226 1275 view.</p>
simonp@8226 1276
simonp@8306 1277 <p>The <dfn title=dom-Document-lastStyleSheetSet><code>lastStyleSheetSet</code></dfn> attribute must return the <span>last CSS style sheet set name</span>.</p>
simonp@8289 1278 <p class='note'>This attribute is initially null.</p>
simonp@8226 1279
simonp@8327 1280 <p>The <dfn title=dom-Document-preferredStyleSheetSet><code>preferredStyleSheetSet</code></dfn> attribute must return the <span>preferred CSS style sheet set
simonp@8304 1281 name</span>.</p>
simonp@8226 1282 <p class='note'>Unlike <code title='dom-Document-lastStyleSheetSet'>lastStyleSheetSet</code>,
simonp@8226 1283 this attribute is initially the empty string.</p>
simonp@8226 1284
simonp@8226 1285 <p>The <dfn title=dom-Document-styleSheetSets><code>styleSheetSets</code></dfn> attribute must return a read only array of the
simonp@8306 1286 <span title='CSS style sheet set name'>CSS style sheet set names</span> of the
simonp@8327 1287 <span title='CSS style sheet set'>CSS style sheet sets</span>, in order of the <span>document CSS style sheets</span>.</p>
simonp@8226 1288
simonp@8304 1289 <p>The <dfn title=dom-Document-enableStyleSheetsForSet><code>enableStyleSheetsForSet(<var title>name</var>)</code></dfn> method must, when invoked, run these
simonp@8304 1290 steps:</p>
simonp@8226 1291 <ol>
simonp@8289 1292 <li><p>If <var title>name</var> is null terminate these steps.</p></li>
simonp@8306 1293 <li><p><span>enable a CSS style sheet set</span> with name <var title>name</var>.</p></li>
simonp@8226 1294 </ol>
simonp@8306 1295 <p class='note'><span title='CSS style sheet'>CSS style sheets</span> with an
simonp@8305 1296 empty <span title=concept-css-style-sheet-title>title</span> are never affected by this method.
simonp@8226 1297 This method does not change the values of the
simonp@8226 1298 <code title='dom-Document-lastStyleSheetSet'>lastStyleSheetSet</code> or
simonp@8226 1299 <code title='dom-Document-preferredStyleSheetSet'>preferredStyleSheetSet</code> attributes.</p>
simonp@8226 1300
simonp@8226 1301
simonp@8244 1302 <h4>Interaction with the User Interface</h4>
simonp@8244 1303
simonp@8244 1304 <p>The user interface of Web browsers that support style sheets
simonp@8244 1305 should list the style sheet titles given in the
simonp@8244 1306 <code title="dom-Document-styleSheetSets">styleSheetSets</code> list,
simonp@8244 1307 showing the
simonp@8244 1308 <code title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code>
simonp@8244 1309 as the selected style sheet set, leaving none selected if it is
simonp@8289 1310 null or the empty string, and selecting an extra option
simonp@8244 1311 "Basic Page Style" (or similar) if it is the empty string and the
simonp@8244 1312 <code title="dom-Document-preferredStyleSheetSet">preferredStyleSheetSet</code>
simonp@8244 1313 is the empty string as well.</p>
simonp@8244 1314
simonp@8244 1315 <p>Selecting a style sheet from this list should
simonp@8306 1316 use the <span>select a CSS style sheet set</span> set of steps. This
simonp@8244 1317 (by definition) affects the
simonp@8244 1318 <code title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code>
simonp@8244 1319 attribute.</p>
simonp@8244 1320
simonp@8307 1321 <h5>Persisting the selected CSS style sheet set</h5>
simonp@8307 1322
simonp@8307 1323 <p>If a user agent persist the <span title="select a CSS style sheet set">selected</span> <span>CSS style sheet set</span>, it should use
simonp@8244 1324 the value of the
simonp@8244 1325 <code title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code>
simonp@8289 1326 attribute, or if that is null, the
simonp@8244 1327 <code title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code>
simonp@8244 1328 attribute, when leaving the page (or at some other time) to determine the
simonp@8307 1329 set name to store. If that is null then the <span>CSS style sheet set</span> should not be
simonp@8244 1330 persisted.</p>
simonp@8244 1331
simonp@8307 1332 <p>When re-setting the <span>CSS style sheet set</span> to the persisted value (which can
simonp@8307 1333 happen at any time, typically at the first time the <span title="CSS style sheet">CSS style sheets</span> are
simonp@8304 1334 needed for styling the document, after the <code title>&lt;head&gt;</code> of
simonp@8244 1335 the document has been parsed, after any scripts that are not dependent on
simonp@8307 1336 computed style have executed), the <span>CSS style sheet set</span>
simonp@8244 1337 should be set by using the
simonp@8306 1338 <span>select a CSS style sheet set</span> set of steps as if the user had
simonp@8307 1339 selected the <span>CSS style sheet set</span> manually.</p>
simonp@8244 1340
simonp@8244 1341 <p class="note">This specification does not give any suggestions on
simonp@8307 1342 how user agents are to decide to persist the <span>CSS style sheet set</span> or whether or
simonp@8307 1343 how to persist the <span title="select a CSS style sheet set">selected</span> <span>CSS style sheet set</span> across pages.</p>
simonp@8244 1344
simonp@8244 1345 <!-- XXX this UI section suggests we may want to introduce a few more
simonp@8244 1346 idioms -->
simonp@8244 1347
simonp@8244 1348
simonp@8244 1349 <h4>Examples</h4>
simonp@8244 1350
simonp@8244 1351 <div class="example">
simonp@8244 1352 <p>Thus, in the following HTML snippet:</p>
simonp@8244 1353
simonp@8244 1354 <pre>&lt;link rel="alternate stylesheet" title="foo" href="a"&gt;
simonp@8226 1355 &lt;link rel="alternate stylesheet" title="bar" href="b"&gt;
simonp@8226 1356 &lt;script&gt;
simonp@8226 1357 document.selectedStyleSheetSet = 'foo';
simonp@8226 1358 document.styleSheets[1].disabled = false;
simonp@8226 1359 &lt;/script&gt;
simonp@8226 1360 &lt;link rel="alternate stylesheet" title="foo" href="c"&gt;
simonp@8226 1361 &lt;link rel="alternate stylesheet" title="bar" href="d"&gt;</pre>
simonp@8226 1362
simonp@8244 1363 <p>...the style sheets that end up enabled are style sheets "a", "b",
simonp@8244 1364 and "c", the
simonp@8244 1365 <code title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code>
simonp@8289 1366 attribute would return null,
simonp@8244 1367 <code title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code>
simonp@8244 1368 would return "foo", and
simonp@8244 1369 <code title="dom-Document-preferredStyleSheetSet">preferredStyleSheetSet</code>
simonp@8244 1370 would return the empty string.</p>
simonp@8244 1371
simonp@8244 1372 <p>Similarly, in the following HTML snippet:</p>
simonp@8244 1373
simonp@8244 1374 <pre>&lt;link rel="alternate stylesheet" title="foo" href="a"&gt;
simonp@8226 1375 &lt;link rel="alternate stylesheet" title="bar" href="b"&gt;
simonp@8226 1376 &lt;script&gt;
simonp@8226 1377 var before = document.preferredStyleSheetSet;
simonp@8226 1378 document.styleSheets[1].disabled = false;
simonp@8226 1379 &lt;/script&gt;
simonp@8226 1380 &lt;link rel="stylesheet" title="foo" href="c"&gt;
simonp@8226 1381 &lt;link rel="alternate stylesheet" title="bar" href="d"&gt;
simonp@8226 1382 &lt;script&gt;
simonp@8226 1383 var after = document.preferredStyleSheetSet;
simonp@8226 1384 &lt;/script&gt;</pre>
simonp@8226 1385
simonp@8244 1386 <p>...the "before" variable will be equal to the empty string, the
simonp@8244 1387 "after" variable will be equal to "foo", and style sheets "a" and "c"
simonp@8244 1388 will be enabled. This is the case even though the first script block
simonp@8244 1389 sets style sheet "b" to be enabled, because upon parsing the
simonp@8304 1390 following <code title>&lt;link&gt;</code> element, the
simonp@8244 1391 <code title="dom-Document-preferredStyleSheetSet">preferredStyleSheetSet</code>
simonp@8244 1392 is set and the
simonp@8244 1393 <code title="dom-Document-enableStyleSheetsForSet">enableStyleSheetsForSet()</code>
simonp@8244 1394 method is called (since
simonp@8244 1395 <code title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code>
simonp@8244 1396 was never set
simonp@8244 1397 explicitly, leaving
simonp@8244 1398 <code title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code> at
simonp@8289 1399 null throughout), which changes which style sheets are enabled and which
simonp@8244 1400 are not.</p>
simonp@8244 1401 </div>
simonp@8244 1402
simonp@8244 1403
simonp@8244 1404 <h3>Style Sheet Association</h3>
simonp@8244 1405
simonp@8244 1406 <p>This section defines the interface a
simonp@8305 1407 <span title=concept-css-style-sheet-owner-node>owner node</span> of a <span>CSS style sheet</span> has to
simonp@8244 1408 implement and defines the requirements for
simonp@8244 1409 <span data-anolis-spec=xmlss title="xml-stylesheet processing instruction">xml-stylesheet processing instructions</span>
simonp@8244 1410 and HTTP <code title="http-link">Link</code> headers when the link
simonp@8244 1411 relation type is an
simonp@8244 1412 <span data-anolis-spec=dom>ASCII case-insensitive</span> match for
simonp@8304 1413 "<code title>stylesheet</code>" since nobody else was interested in
simonp@8244 1414 defining this.</p>
simonp@8244 1415
simonp@8244 1416 <p class=note>The editor is in good hope that HTML and SVG will define the
simonp@8244 1417 appropriate processing in their respective specifications, in terms of
simonp@8244 1418 this specification, in due course.</p>
simonp@8244 1419
simonp@8244 1420
simonp@8244 1421
simonp@8244 1422 <h4>The <code title>LinkStyle</code> Interface</h4>
simonp@8226 1423
simonp@8307 1424 <p>The <dfn>associated CSS style sheet</dfn> of a node is the <span>CSS style sheet</span> in the list of
simonp@8306 1425 <span>document CSS style sheets</span> of which the <span title=concept-css-style-sheet-owner-node>owner node</span> implements the <code>LinkStyle</code>
simonp@8305 1426 interface.</p>
simonp@8226 1427
simonp@8226 1428 <pre class=idl>[NoInterfaceObject]
simonp@8226 1429 interface <dfn>LinkStyle</dfn> {
simonp@8226 1430 readonly attribute <span>StyleSheet</span>? <span title=dom-LinkStyle-sheet>sheet</span>;
simonp@8226 1431 };</pre>
simonp@8226 1432
simonp@8307 1433 <p>The <dfn title=dom-LinkStyle-sheet><code>sheet</code></dfn> attribute must return the <span>associated CSS style sheet</span> for the node or null
simonp@8307 1434 if there is no <span>associated CSS style sheet</span>.</p>
simonp@8244 1435
simonp@8244 1436 <div class="example">
simonp@8304 1437 <p>In the following fragment, the first <code title>style</code>
simonp@8304 1438 element has a <code title=dom-LinkStyle-sheet>sheet</code> attribute that returns a
simonp@8244 1439 <code>StyleSheet</code> object representing the style sheet, but for
simonp@8304 1440 the second <code title>style</code> element, the <code title=dom-LinkStyle-sheet>sheet</code> attribute returns null,
simonp@8304 1441 assuming the user agent supports CSS (<code title>text/css</code>), but does
simonp@8304 1442 not support the (hypothetical) ExampleSheets (<code title>text/example-sheets</code>).</p>
simonp@8244 1443
simonp@8244 1444 <pre>&lt;style type="text/css"&gt;
simonp@8226 1445 body { background:lime }
simonp@8226 1446 &lt;/style&gt;</pre>
simonp@8226 1447 <pre>&lt;style type="text/example-sheets"&gt;
simonp@8226 1448 $(body).background := lime
simonp@8226 1449 &lt;/style&gt;</pre>
simonp@8244 1450 </div>
simonp@8244 1451
simonp@8244 1452 <p class="note">Whether or not the node refers to a style sheet is defined
simonp@8244 1453 by the specification that defines the semantics of said node.</p>
simonp@8244 1454
simonp@8244 1455
simonp@8244 1456 <h4>Requirements on specifications</h4>
simonp@8244 1457
simonp@8244 1458 <p>Specifications introducing new ways of associating style sheets through
simonp@8244 1459 the DOM should define which nodes implement the
simonp@8244 1460 <code>LinkStyle</code> interface. When doing so, they
simonp@8303 1461 must also define when a <span>CSS style sheet</span> is
simonp@8305 1462 <span title="create a CSS style sheet">created</span>.</p>
simonp@8244 1463
simonp@8244 1464
simonp@8244 1465
simonp@8244 1466
simonp@8244 1467
simonp@8304 1468 <h4>Requirements on User Agents Implementing the <code title>xml-stylesheet</code> processing instruction</h4>
simonp@8244 1469
simonp@8244 1470 <!-- XXX load/error events, reparse -->
simonp@8244 1471
simonp@8244 1472 <pre class="idl"><span data-anolis-spec=dom>ProcessingInstruction</span> implements <span>LinkStyle</span>;</pre>
simonp@8244 1473
simonp@8244 1474 <p>For each
simonp@8244 1475 <span data-anolis-spec=xmlss><code>xml-stylesheet</code> processing instruction</span>
simonp@8244 1476 that is not part of the
simonp@8244 1477 <span data-anolis-spec=xml>document type declaration</span> and has an
simonp@8304 1478 <code title>href</code>
simonp@8244 1479 <span data-anolis-spec=xmlss>pseudo-attribute</span> these steps must
simonp@8244 1480 (unless otherwise stated) be run:</p>
simonp@8244 1481
simonp@8244 1482 <ol>
simonp@8289 1483 <li><p>Let <var title>title</var> be the value of the
simonp@8304 1484 <code title>title</code> <span data-anolis-spec=xmlss>pseudo-attribute</span> or the empty string if the
simonp@8304 1485 <code title>title</code> <span data-anolis-spec=xmlss>pseudo-attribute</span> is not specified.</p></li>
simonp@8304 1486
simonp@8304 1487 <li><p>If there is an <code title>alternate</code> <span data-anolis-spec=xmlss>pseudo-attribute</span>
simonp@8244 1488 whose value is a <span data-anolis-spec=dom>case-sensitive</span> match
simonp@8304 1489 for "<code title>yes</code>" and <var title>title</var> is the
simonp@8244 1490 empty string terminate these steps.</p></li>
simonp@8244 1491
simonp@8304 1492 <li><p>If there is a <code title>type</code> <span data-anolis-spec=xmlss>pseudo-attribute</span> whose
simonp@8244 1493 value is not a <span>supported styling language</span> the user agent
simonp@8244 1494 may terminate these steps.</p></li>
simonp@8244 1495
simonp@8372 1496 <li><p>Let <var title>input URL</var> be the value specified by the
simonp@8372 1497 <code title>href</code> <span data-anolis-spec=xmlss>pseudo-attribute</span>.
simonp@8372 1498
simonp@8372 1499 <li><p>Let <var title>base URL</var> be the processing instruction's <span data-anolis-spec=dom title=concept-node-document>node document</span>'s
simonp@8372 1500 <span data-anolis-spec=html>document base URL</span>.
simonp@8372 1501
simonp@8372 1502 <li><p>Let <var title>origin</var> be the processing instruction's <span data-anolis-spec=dom title=concept-node-document>node document</span>'s
simonp@8372 1503 <span data-anolis-spec=html>origin</span>.
simonp@8372 1504
simonp@8372 1505 <li><p>Let <var title>parsed URL</var> be the return value of invoking the <span data-anolis-spec=url title=concept-url-parser>URL parser</span> with the
simonp@8372 1506 string <var title>input URL</var> and the base URL <var title>base URL</var>.
simonp@8372 1507
simonp@8372 1508 <li><p>If <var title>parsed URL</var> is failure, terminate these steps.
simonp@8372 1509
simonp@8372 1510 <li><p>Let <var title>request</var> be a new <span data-anolis-spec=fetch title=concept-request>request</span>, with the
simonp@8372 1511 <span data-anolis-spec=fetch title=concept-request-url>url</span> <var title>parsed URL</var>,
simonp@8372 1512 <span data-anolis-spec=fetch title=concept-request-origin>origin</span> <var title>origin</var> and
simonp@8372 1513 <span data-anolis-spec=fetch title=concept-request-referrer>referrer</span> <var title>base URL</var>.
simonp@8372 1514
simonp@8372 1515 <li><p>Let <var title>response</var> be the result of <span data-anolis-spec=fetch title=concept-fetch>fetching</span> <var title>request</var>.</p></li>
simonp@8372 1516
simonp@8372 1517 <li><p>Wait until <var title>response</var> is available.
simonp@8372 1518
simonp@8372 1519 <li><p>If <var title>response</var> is a <span data-anolis-spec=fetch title=concept-network-error>network error</span>, terminate these steps.
simonp@8372 1520
simonp@8372 1521 <li><p>If the processing instruction's <span data-anolis-spec=dom title=concept-node-document>node document</span> is
simonp@8372 1522 in <span data-anolis-spec=dom title=concept-document-quirks>quirks mode</span>, <var title>response</var> is
simonp@8372 1523 <span data-anolis-spec=fetch>CORS-same-origin</span> and the <span data-anolis-spec=html>Content-Type metadata</span> of <var title>response</var> is not a
simonp@8372 1524 <span>supported styling language</span> change the <span data-anolis-spec=html>Content-Type metadata</span> of <var title>response</var> to
simonp@8372 1525 <code title>text/css</code>.
simonp@8372 1526
simonp@8372 1527 <li><p>If <var title>response</var> is not in a
simonp@8244 1528 <span>supported styling language</span> terminate these steps.</p></li>
simonp@8244 1529
simonp@8244 1530 <li>
simonp@8305 1531 <p><span>Create a CSS style sheet</span> with the following properties:</p>
simonp@8244 1532
simonp@8244 1533 <dl>
simonp@8305 1534 <dt><span title=concept-css-style-sheet-location>location</span></dt>
simonp@8372 1535 <dd><p>The result of invoking the <span data-anolis-spec=url title=concept-url-serializer>URL serializer</span> with <var title>parsed URL</var>.</p></dd>
simonp@8244 1536
simonp@8305 1537 <dt><span title=concept-css-style-sheet-parent>parent</span></dt>
simonp@8372 1538 <dd><p>null.</p></dd>
simonp@8244 1539
simonp@8305 1540 <dt><span title=concept-css-style-sheet-owner-node>owner node</span></dt>
simonp@8372 1541 <dd><p>The processing instruction.</p></dd>
simonp@8244 1542
simonp@8305 1543 <dt><span title=concept-css-style-sheet-owner-css-rule>owner CSS rule</span></dt>
simonp@8372 1544 <dd><p>null.</p></dd>
simonp@8244 1545
simonp@8305 1546 <dt><span title=concept-css-style-sheet-media>media</span></dt>
simonp@8304 1547 <dd><p>The value of the <code title>media</code> <span data-anolis-spec=xmlss>pseudo-attribute</span>
simonp@8244 1548 if any, or the empty string otherwise.</p></dd>
simonp@8244 1549
simonp@8305 1550 <dt><span title=concept-css-style-sheet-title>title</span></dt>
simonp@8372 1551 <dd><p><var title>title</var>.</p></dd>
simonp@8244 1552
simonp@8305 1553 <dt><span title=concept-css-style-sheet-alternate-flag>alternate flag</span></dt>
simonp@8304 1554 <dd><p>Set if the <code title>alternate</code> <span data-anolis-spec=xmlss>pseudo-attribute</span>
simonp@8244 1555 value is a <span data-anolis-spec=dom>case-sensitive</span> match for
simonp@8304 1556 "<code title>yes</code>", or clear otherwise.
simonp@8372 1557
simonp@8372 1558 <dt><span title=concept-css-style-sheet-origin-clean-flag>origin-clean flag</span>
simonp@8372 1559 <dd><p>Set if <var title>response</var> is <span data-anolis-spec=fetch>CORS-same-origin</span>, or clear otherwise.
simonp@8244 1560 </dl>
simonp@8244 1561 </li>
simonp@8244 1562 </ol>
simonp@8244 1563
simonp@8244 1564
simonp@8244 1565
simonp@8244 1566
simonp@8244 1567 <h4>Requirements on User Agents Implementing the HTTP
simonp@8244 1568 <code title>Link</code> Header</h4>
simonp@8244 1569
simonp@8244 1570 <!-- XXX ref, one day -->
simonp@8244 1571
simonp@8244 1572 <!-- XXX deal with media param -->
simonp@8244 1573
simonp@8244 1574 <p>For each HTTP <code title="http-link">Link</code> header of which one
simonp@8244 1575 of the link relation types is an
simonp@8244 1576 <span data-anolis-spec=dom>ASCII case-insensitive</span> match
simonp@8304 1577 for "<code title>stylesheet</code>" these steps
simonp@8244 1578 must be run:</p>
simonp@8244 1579
simonp@8244 1580 <ol>
simonp@8289 1581 <li><p>Let <var title>title</var> be the value of the first of all the
simonp@8304 1582 <code title>title</code> and <code title>title*</code> parameters.
simonp@8244 1583 If there are no such parameters it is the empty string.</p></li>
simonp@8244 1584
simonp@8244 1585 <li><p>If one of the (other) link relation types is an
simonp@8244 1586 <span data-anolis-spec=dom>ASCII case-insensitive</span> match for
simonp@8304 1587 "<code title>alternate</code>" and <var title>title</var> is the
simonp@8244 1588 empty string terminate these steps.</p></li>
simonp@8244 1589
simonp@8372 1590 <li><p>Let <var title>input URL</var> be the value specified. <span class=XXX>Be more specific</span>
simonp@8372 1591
simonp@8372 1592 <li><p>Let <var title>base URL</var> be the document's <span data-anolis-spec=html>document base URL</span>. <span class=XXX>Is there a document at this
simonp@8372 1593 point?</span>
simonp@8372 1594
simonp@8372 1595 <li><p>Let <var title>origin</var> be the document's <span data-anolis-spec=html>origin</span>.
simonp@8372 1596
simonp@8372 1597 <li><p>Let <var title>parsed URL</var> be the return value of invoking the <span data-anolis-spec=url title=concept-url-parser>URL parser</span> with the
simonp@8372 1598 string <var title>input URL</var> and the base URL <var title>base URL</var>.
simonp@8372 1599
simonp@8372 1600 <li><p>If <var title>parsed URL</var> is failure, terminate these steps.
simonp@8372 1601
simonp@8372 1602 <li><p>Let <var title>request</var> be a new <span data-anolis-spec=fetch title=concept-request>request</span>, with the
simonp@8372 1603 <span data-anolis-spec=fetch title=concept-request-url>url</span> <var title>parsed URL</var>,
simonp@8372 1604 <span data-anolis-spec=fetch title=concept-request-origin>origin</span> <var title>origin</var> and
simonp@8372 1605 <span data-anolis-spec=fetch title=concept-request-referrer>referrer</span> <var title>base URL</var>.
simonp@8372 1606
simonp@8372 1607 <li><p>Let <var title>response</var> be the result of <span data-anolis-spec=fetch title=concept-fetch>fetching</span> <var title>request</var>.</p></li>
simonp@8372 1608
simonp@8372 1609 <li><p>Wait until <var title>response</var> is available.
simonp@8372 1610
simonp@8372 1611 <li><p>If <var title>response</var> is a <span data-anolis-spec=fetch title=concept-network-error>network error</span>, terminate these steps.
simonp@8372 1612
simonp@8372 1613 <li><p>If the processing instruction's <span data-anolis-spec=dom title=concept-node-document>node document</span> is
simonp@8372 1614 in <span data-anolis-spec=dom title=concept-document-quirks>quirks mode</span>, <var title>response</var> is
simonp@8372 1615 <span data-anolis-spec=fetch>CORS-same-origin</span> and the <span data-anolis-spec=html>Content-Type metadata</span> of <var title>response</var> is not a
simonp@8372 1616 <span>supported styling language</span> change the <span data-anolis-spec=html>Content-Type metadata</span> of <var title>response</var> to
simonp@8372 1617 <code title>text/css</code>.
simonp@8372 1618
simonp@8372 1619 <li><p>If <var title>response</var> is not in a
simonp@8244 1620 <span>supported styling language</span> terminate these steps.</p></li>
simonp@8244 1621
simonp@8244 1622 <li>
simonp@8305 1623 <p><span>Create a CSS style sheet</span> with the following properties:</p>
simonp@8244 1624
simonp@8244 1625 <dl>
simonp@8305 1626 <dt><span title=concept-css-style-sheet-location>location</span></dt>
simonp@8372 1627 <dd><p>The result of invoking the <span data-anolis-spec=url title=concept-url-serializer>URL serializer</span> with <var title>parsed URL</var>.</p></dd>
simonp@8244 1628
simonp@8305 1629 <dt><span title=concept-css-style-sheet-owner-node>owner node</span></dt>
simonp@8372 1630 <dd><p>null.</p></dd>
simonp@8244 1631
simonp@8305 1632 <dt><span title=concept-css-style-sheet-parent>parent</span></dt>
simonp@8372 1633 <dd><p>null.</p></dd>
simonp@8244 1634
simonp@8305 1635 <dt><span title=concept-css-style-sheet-owner-css-rule>owner CSS rule</span></dt>
simonp@8372 1636 <dd><p>null.</p></dd>
simonp@8244 1637
simonp@8305 1638 <dt><span title=concept-css-style-sheet-media>media</span></dt>
simonp@8304 1639 <dd><p>The value of the first <code title>media</code> parameter.</p></dd>
simonp@8244 1640 <!-- XXX register media parameter? bah -->
simonp@8244 1641
simonp@8305 1642 <dt><span title=concept-css-style-sheet-title>title</span></dt>
simonp@8372 1643 <dd><p><var title>title</var>.</p></dd>
simonp@8244 1644
simonp@8305 1645 <dt><span title=concept-css-style-sheet-alternate-flag>alternate flag</span></dt>
simonp@8244 1646 <dd><p>Set if one of the specified link relation type for this HTTP
simonp@8244 1647 <code title="http-link">Link</code> header is an
simonp@8244 1648 <span data-anolis-spec=dom>ASCII case-insensitive</span> match for
simonp@8304 1649 "<code title>alternate</code>", or false otherwise.
simonp@8372 1650
simonp@8372 1651 <dt><span title=concept-css-style-sheet-origin-clean-flag>origin-clean flag</span>
simonp@8372 1652 <dd><p>Set if <var title>response</var> is <span data-anolis-spec=fetch>CORS-same-origin</span>, or clear otherwise.
simonp@8244 1653 </dl>
simonp@8244 1654 </li>
simonp@8244 1655 </ol>
simonp@8244 1656
simonp@8244 1657
simonp@8244 1658 <h3>CSS Rules</h3>
simonp@8244 1659
simonp@8244 1660 <p>A <dfn>CSS rule</dfn> is an abstract concept that
simonp@8244 1661 denotes a rule as defined by the CSS specification. A
simonp@8244 1662 <span>CSS rule</span> is represented as an object that implements a subclass of
simonp@8244 1663 the <code>CSSRule</code> interface, and which has the following
simonp@8244 1664 associated state items:</p>
simonp@8244 1665
simonp@8244 1666 <dl>
simonp@8305 1667 <dt><dfn title=concept-css-rule-type>type</dfn></dt>
simonp@8244 1668 <dd><p>A non-negative integer associated with a particular type of rule.
simonp@8244 1669 This item is initialized when a rule is created and must never change.</p></dd>
simonp@8244 1670
simonp@8305 1671 <dt><dfn title=concept-css-rule-text>text</dfn></dt>
simonp@8244 1672 <dd><p>A text representation of the rule suitable for direct use in a style sheet.
simonp@8244 1673 This item is initialized when a rule is created, and may change over the lifetime of the rule.</p></dd>
simonp@8244 1674
simonp@8305 1675 <dt><dfn title=concept-css-rule-parent-css-rule>parent CSS rule</dfn></dt>
simonp@8244 1676 <dd><p>An optional reference to another, enclosing <span>CSS rule</span>.
simonp@8289 1677 If the rule has an enclosing rule when it is created, then this item is initialized to the enclosing rule; otherwise it is null.
simonp@8289 1678 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>
simonp@8244 1679
simonp@8305 1680 <dt><dfn title=concept-css-rule-parent-css-style-sheet>parent CSS style sheet</dfn></dt>
simonp@8244 1681 <dd><p>An optional reference to an associated <span>CSS style sheet</span>.
simonp@8244 1682 This item is initialized to reference an associated style sheet when the rule is created. Subsequent to initialization, this item
simonp@8289 1683 is reset to null if the rule becomes disassociated from its initial style sheet. Once reset to null, it must never change.</p></dd>
simonp@8372 1684
simonp@8372 1685 <dt><dfn title=concept-css-rule-nested-css-rules>child CSS rules</dfn>
simonp@8372 1686 <dd><p>A list of child <span title="CSS rule">CSS rules</span>.
simonp@8244 1687 </dl>
simonp@8244 1688
simonp@8244 1689 <p>In addition to the above state, each <span>CSS rule</span> may be associated
simonp@8305 1690 with other state in accordance with its <span title=concept-css-rule-type>type</span>.</p>
simonp@8244 1691
simonp@8244 1692 <p>To <dfn>parse a CSS rule</dfn> ...</p>
simonp@8244 1693
simonp@8244 1694 <p class="XXX">Should a rule be instantiated in OM if there is a parse error? To
simonp@8244 1695 what extent should original (but non-valid) CSS text be captured in cssText?</p>
simonp@8244 1696
simonp@8327 1697 <p>To <dfn>serialize a CSS rule</dfn>, perform one of the following in accordance with the <span>CSS rule</span>'s <span title="concept-css-rule-type">type</span>:</p>
simonp@8244 1698
simonp@8244 1699 <dl class="switch">
simonp@8244 1700 <dt><code>CSSStyleRule</code></dt>
simonp@8244 1701 <dd>
simonp@8244 1702 <p>The result of concatenating the following:</p>
simonp@8244 1703 <ol>
simonp@8244 1704 <li>The result of performing <span>serialize a group of selectors</span> on the rule's associated selectors.</li>
simonp@8304 1705 <li>The string "<code title> { </code>", i.e., a single SPACE (U+0020), followed by LEFT CURLY BRACKET (U+007B),
simonp@8244 1706 followed by a single SPACE (U+0020).</li>
simonp@8244 1707 <li>The result of performing <span>serialize a CSS declaration block</span> on the rule's associated declarations.</li>
simonp@8304 1708 <li>If the rule is associated with one or more declarations, the string "<code title> </code>", i.e., a single SPACE (U+0020).</li>
simonp@8304 1709 <li>The string "<code title>}</code>", RIGHT CURLY BRACKET (U+007D).
simonp@8244 1710 </ol>
simonp@8244 1711 </dd>
simonp@8244 1712
simonp@8244 1713 <dt><code>CSSCharsetRule</code></dt>
simonp@8244 1714 <dd>
simonp@8244 1715 <p>The result of concatenating the following:</p>
simonp@8244 1716 <ol>
simonp@8304 1717 <li>The string "<code title>@charset</code>" followed by a single SPACE (U+0020).</li>
simonp@8244 1718 <li>The result of performing <span>serialize a string</span> on the rule's character encoding.</li>
simonp@8304 1719 <li>The string "<code title>;</code>", i.e., SEMICOLON (U+003B).
simonp@8244 1720 </ol>
simonp@8244 1721 <div class="example">
simonp@8244 1722 <pre>@charset "UTF-8";</pre>
simonp@8226 1723 </div>
simonp@8244 1724 </dd>
simonp@8244 1725
simonp@8244 1726 <dt><code>CSSImportRule</code></dt>
simonp@8244 1727 <dd>
simonp@8244 1728 <p>The result of concatenating the following:</p>
simonp@8226 1729 <ol>
simonp@8304 1730 <li>The string "<code title>@import</code>" followed by a single SPACE (U+0020).</li>
simonp@8244 1731 <li>The result of performing <span>serialize a URL</span> on the rule's location.</li>
simonp@8244 1732 <li>If the rule's associated media list is not empty, a single SPACE (U+0020) followed by the
simonp@8244 1733 result of performing <span>serialize a media query list</span> on the media list.
simonp@8304 1734 <li>The string "<code title>;</code>", i.e., SEMICOLON (U+003B).
simonp@8226 1735 </ol>
simonp@8244 1736 <div class="example">
simonp@8244 1737 <pre>@import url("import.css");</pre>
simonp@8244 1738 <pre>@import url("print.css") print;</pre>
simonp@8244 1739 </div>
simonp@8244 1740 </dd>
simonp@8244 1741
simonp@8244 1742 <dt><code>CSSMediaRule</code></dt>
simonp@8244 1743 <dd><p class="XXX">...</p></dd>
simonp@8244 1744
simonp@8244 1745 <dt><code>CSSFontFaceRule</code></dt>
simonp@8244 1746 <dd><p class="XXX">...</p></dd>
simonp@8244 1747
simonp@8244 1748 <dt><code>CSSPageRule</code></dt>
simonp@8244 1749 <dd><p class="XXX">...</p></dd>
simonp@8244 1750
simonp@8244 1751 <dt><code>CSSNamespaceRule</code></dt>
simonp@8304 1752 <dd><p>The literal string "<code title>@namespace</code>", followed by a single SPACE
simonp@8244 1753 (U+0020), followed by the
simonp@8244 1754 <span title="serialize an identifier">identifier escaped</span> value of the
simonp@8244 1755 <code title="dom-CSSNamespaceRule-prefix">prefix</code> attribute (if
simonp@8244 1756 any), followed by a single SPACE (U+0020) if there is a prefix, followed by the
simonp@8244 1757 <span title="serialize a URL">URL escaped</span> value of the
simonp@8244 1758 <code title="dom-CSSNamespaceRule-namespaceURI">namespaceURI</code>
simonp@8304 1759 attribute, followed the character "<code title>;</code>" (U+003B).</p></dd>
simonp@8244 1760 </dl>
simonp@8244 1761
simonp@8289 1762 <p>To <dfn>insert a CSS rule</dfn> <var title>rule</var> in a CSS rule list <var title>list</var> at index <var title>index</var>, follow these steps:</p>
simonp@8287 1763 <ol>
simonp@8289 1764 <li><p>Set <var title>new rule</var> to the results of performing <span>parse a CSS rule</span>
simonp@8289 1765 on argument <var title>rule</var>, <span data-anolis-spec='dom' title='concept-throw'>throwing</span>
simonp@8287 1766 a <code data-anolis-spec='dom'>SyntaxError</code> exception if a parse error occurs.</p></li>
simonp@8289 1767 <li><p>If <var title>new rule</var> is an <code title>@charset</code> at-rule, <span data-anolis-spec='dom' title='concept-throw'>throw</span> a
simonp@8287 1768 <code data-anolis-spec='dom'>SyntaxError</code> exception.
simonp@8289 1769 <li><p>Set <var title>length</var> to the number of items in <var title>list</var>.</p></li>
simonp@8289 1770 <li><p>If <var title>index</var> is greater than <var title>length</var>, then <span data-anolis-spec='dom' title='concept-throw'>throw</span>
simonp@8287 1771 an <code data-anolis-spec='dom'>IndexSizeError</code> exception.</p></li>
simonp@8304 1772 <li><p>If <var title>new rule</var> cannot be inserted into <var title>list</var> at the zero-index position <var title>index</var> due to constraints
simonp@8304 1773 specified by CSS, then <span data-anolis-spec='dom' title='concept-throw'>throw</span>
simonp@8287 1774 a <code data-anolis-spec='dom'>HierarchyRequestError</code> exception. <span data-anolis-ref>CSS</span></p>
simonp@8287 1775 <p class='note'>For example, a CSS style sheet cannot contain an <code title>@import</code> at-rule after a rule set.</p></li>
simonp@8289 1776 <li><p>If <var title>new rule</var> is an <code title>@namespace</code> at-rule, and <var title>list</var> contains anything other than
simonp@8288 1777 <code title>@charset</code> at-rules, <code title>@import</code> at-rules, and <code title>@namespace</code> at-rules,
simonp@8288 1778 <span data-anolis-spec='dom' title='concept-throw'>throw</span> an <code data-anolis-spec=dom>InvalidStateError</code> exception.
simonp@8289 1779 <li><p>Insert <var title>new rule</var> into <var title>list</var> at the zero-indexed position <var title>index</var>.<p></li>
simonp@8372 1780 <li><p>Return <var title>index</var>.
simonp@8287 1781 </ol>
simonp@8287 1782 <p class='XXX'>DOM-2 CSS specifies that a <code>NO_MODIFICATION_ALLOWED_ERR</code> exception is thrown
simonp@8287 1783 if the style sheet is read-only. Are there any read-only style sheets?</p>
simonp@8287 1784
simonp@8289 1785 <p>To <dfn>remove a CSS rule</dfn> from a CSS rule list <var title>list</var> at index <var title>index</var>, follow these steps:</p>
simonp@8287 1786 <ol>
simonp@8289 1787 <li><p>Set <var title>length</var> to the number of items in <var title>list</var>.</p></li>
simonp@8289 1788 <li><p>If <var title>index</var> is greater than or equal to <var title>length</var>, then <span data-anolis-spec='dom' title='concept-throw'>throw</span>
simonp@8287 1789 an <code data-anolis-spec='dom'>IndexSizeError</code> exception.</p></li>
simonp@8289 1790 <li><p>Set <var title>old rule</var> to the <var title>index</var>th item in <var title>list</var>.</p></li>
simonp@8289 1791 <li><p>If <var title>old rule</var> is an <code title>@namespace</code> at-rule, and <var title>list</var> contains anything other than
simonp@8288 1792 <code title>@charset</code> at-rules, <code title>@import</code> at-rules, and <code title>@namespace</code> at-rules,
simonp@8288 1793 <span data-anolis-spec='dom' title='concept-throw'>throw</span> an <code data-anolis-spec=dom>InvalidStateError</code> exception.
simonp@8289 1794 <li><p>Remove rule <var title>old rule</var> from <var title>list</var> at the zero-indexed position <var title>index</var>.<p></li>
simonp@8287 1795 </ol>
simonp@8287 1796
simonp@8244 1797
simonp@8244 1798 <h4>The <code title>CSSRuleList</code> Interface</h4>
simonp@8229 1799
simonp@8229 1800 <p>The <code>CSSRuleList</code> interface represents an ordered collection of CSS style rules.</p>
simonp@8229 1801
simonp@8229 1802 <pre class=idl>[ArrayClass]
simonp@8229 1803 interface <dfn>CSSRuleList</dfn> {
simonp@8229 1804 getter <span>CSSRule</span>? <span title=dom-CSSRuleList-item>item</span>(unsigned long index);
simonp@8229 1805 readonly attribute unsigned long <span title=dom-CSSRuleList-length>length</span>;
simonp@8229 1806 };</pre>
simonp@8229 1807
simonp@8304 1808 <p>The object's <span data-anolis-spec=webidl>supported property indices</span> are the numbers in the range zero to one less than the number of
simonp@8304 1809 <code>CSSRule</code> objects represented by the collection. If there are no such <code>CSSRule</code> objects, then there are no
simonp@8304 1810 <span data-anolis-spec=webidl>supported property indices</span>.
simonp@8304 1811
simonp@8304 1812 <p>The <dfn title=dom-CSSRuleList-item><code>item(<var title>index</var>)</code></dfn> method must return the <var title>index</var>th <code>CSSRule</code>
simonp@8304 1813 object in the collection. If there is no <var title>index</var>th object in the collection, then the method must return null.
simonp@8304 1814
simonp@8304 1815 <p>The <dfn title=dom-CSSRuleList-length><code>length</code></dfn> attribute must return the number of <code>CSSRule</code> objects represented by the
simonp@8304 1816 collection.
simonp@8226 1817
simonp@8244 1818 <h4>The <code title>CSSRule</code> Interface</h4>
simonp@8226 1819
simonp@8226 1820 <!--
simonp@8226 1821 //
simonp@8226 1822 // All members defined since DOM-2 Style. The only differences are:
simonp@8226 1823 //
simonp@8226 1824 // 1. removal of UNKNOWN_RULE = 0 constant
simonp@8226 1825 // 2. addition of NAMESPACE_RULE = 10 constant
simonp@8226 1826 // 3. removal of commented raises(DOMException) on setting cssText
simonp@8226 1827 //
simonp@8226 1828 -->
simonp@8226 1829
simonp@8226 1830 <p>The <code>CSSRule</code> interface represents an abstract, base CSS style rule. Each
simonp@8244 1831 distinct CSS style rule type is represented by a distinct interface that
simonp@8244 1832 inherits from this interface.</p>
simonp@8226 1833
simonp@8226 1834 <pre class=idl>interface <dfn>CSSRule</dfn> {
simonp@8262 1835 const unsigned short <span title=dom-CSSRule-STYLE_RULE>STYLE_RULE</span> = 1;
simonp@8262 1836 const unsigned short <span title=dom-CSSRule-CHARSET_RULE>CHARSET_RULE</span> = 2;
simonp@8262 1837 const unsigned short <span title=dom-CSSRule-IMPORT_RULE>IMPORT_RULE</span> = 3;
simonp@8262 1838 const unsigned short <span title=dom-CSSRule-MEDIA_RULE>MEDIA_RULE</span> = 4;
simonp@8262 1839 const unsigned short <span title=dom-CSSRule-FONT_FACE_RULE>FONT_FACE_RULE</span> = 5;
simonp@8262 1840 const unsigned short <span title=dom-CSSRule-PAGE_RULE>PAGE_RULE</span> = 6;
simonp@8262 1841 const unsigned short <span title=dom-CSSRule-NAMESPACE_RULE>NAMESPACE_RULE</span> = 10;
simonp@8262 1842 readonly attribute unsigned short <span title=dom-CSSRule-type>type</span>;
simonp@8262 1843 attribute DOMString <span title=dom-CSSRule-cssText>cssText</span>;
simonp@8262 1844 readonly attribute <span>CSSRule</span>? <span title=dom-CSSRule-parentRule>parentRule</span>;
simonp@8262 1845 readonly attribute <span>CSSStyleSheet</span>? <span title=dom-CSSRule-parentStyleSheet>parentStyleSheet</span>;
simonp@8226 1846 };</pre>
simonp@8226 1847
simonp@8263 1848 <p>The <dfn title=dom-CSSRule-type><code>type</code></dfn> attribute must return the CSS rule type, as follows:
simonp@8263 1849
simonp@8263 1850 <dl class=switch>
simonp@8263 1851 <dt>If the object is a <code>CSSStyleRule</code>
simonp@8263 1852 <dd><p>Return <dfn title=dom-CSSRule-STYLE_RULE><code>STYLE_RULE</code></dfn> (numeric value 1).
simonp@8263 1853 <dt>If the object is a <code>CSSCharsetRule</code>
simonp@8263 1854 <dd><p>Return <dfn title=dom-CSSRule-CHARSET_RULE><code>CHARSET_RULE</code></dfn> (numberic value 2).
simonp@8263 1855 <dt>If the object is a <code>CSSImportRule</code>
simonp@8263 1856 <dd><p>Return <dfn title=dom-CSSRule-IMPORT_RULE><code>IMPORT_RULE</code></dfn> (numberic value 3).
simonp@8263 1857 <dt>If the object is a <code>CSSMediaRule</code>
simonp@8263 1858 <dd><p>Return <dfn title=dom-CSSRule-MEDIA_RULE><code>MEDIA_RULE</code></dfn> (numeric value 4).
simonp@8263 1859 <dt>If the object is a <code>CSSFontFaceRule</code>
simonp@8263 1860 <dd><p>Return <dfn title=dom-CSSRule-FONT_FACE_RULE><code>FONT_FACE_RULE</code></dfn> (numeric value 5).
simonp@8263 1861 <dt>If the object is a <code>CSSPageRule</code>
simonp@8263 1862 <dd><p>Return <dfn title=dom-CSSRule-PAGE_RULE><code>PAGE_RULE</code></dfn> (numeric value 6).
simonp@8263 1863 <dt>If the object is a <code>CSSNamespaceRule</code>
simonp@8263 1864 <dd><p>Return <dfn title=dom-CSSRule-NAMESPACE_RULE><code>NAMESPACE_RULE</code></dfn> (numeric value 10).
simonp@8263 1865 <dt>Otherwise
simonp@8263 1866 <dd><p>Return a value defined on the <a href='http://wiki.csswg.org/spec/cssom-constants'>CSSOM Constants</a> wiki page.
simonp@8263 1867 </dl>
simonp@8263 1868
simonp@8263 1869 <p class=note>The value 0, formerly known as <code title>UNKNOWN_RULE</code>, is made
simonp@8263 1870 obsolete by this specification. This value will not be re-allocated in the future and will remain reserved.</p>
simonp@8226 1871
simonp@8226 1872 <p>The <dfn title=dom-CSSRule-cssText><code>cssText</code></dfn> attribute must return a <span title='serialize a CSS rule'>serialization</span> of the
simonp@8226 1873 <span>CSS rule</span>.</p>
simonp@8226 1874 <p>On setting the <code title=dom-CSSRule-cssText>cssText</code> attribute these steps must be run:</p>
simonp@8226 1875 <ol>
simonp@8226 1876 <li><p><span title='Parse a CSS rule'>Parse</span> the value.</p></li>
simonp@8226 1877 <li><p>If parsing failed terminate this algorithm.</p></li>
simonp@8226 1878 <li><p>If the <code title='dom-CSSRule-type'>type</code> of the new
simonp@8226 1879 object does not match the <code title='dom-CSSRule-type'>type</code> of
simonp@8226 1880 the current object
simonp@8226 1881 <span data-anolis-spec=dom title=concept-throw>throw</span> an
simonp@8293 1882 <code data-anolis-spec=dom>InvalidModificationError</code> exception.</li>
simonp@8226 1883 <li><p>Replace the current object with the new object.</p></li>
simonp@8226 1884 </ol>
simonp@8226 1885
simonp@8289 1886 <p>The <dfn title=dom-CSSRule-parentRule><code>parentRule</code></dfn> attribute must return the nearest enclosing rule of the current rule or null if
simonp@8289 1887 there is none. If a value other than null is ever returned, than that same value must always be returned on each get access.</p>
simonp@8304 1888 <p class='note'>For example, <code title>@media</code> can enclose a rule, in which case <code title=dom-CSSRule-parentRule>parentRule</code> would
simonp@8304 1889 be non-null; in cases where there is no enclosing rule, <code title=dom-CSSRule-parentRule>ownerRule</code> will be null.</p>
simonp@8304 1890
simonp@8304 1891 <p>The <dfn title=dom-CSSRule-parentStyleSheet><code>parentStyleSheet</code></dfn> attribute must return the <code>CSSStyleSheet</code> object that contains the
simonp@8289 1892 current rule or null if there is none.</p>
simonp@8289 1893 <p class='note'>The only circumstance where null is returned when a rule has been <span title="remove a CSS rule">removed</span>.</p>
simonp@8304 1894 <p class='note'>Removing a <code data-anolis-spec=dom>Node</code> that implements the <code>LinkStyle</code> interface from a
simonp@8304 1895 <code data-anolis-spec=dom>Document</code> instance does not (by itself) cause the <code>CSSStyleSheet</code> referenced by a <code>CSSRule</code> to be
simonp@8304 1896 unreachable.</p>
simonp@8226 1897
simonp@8226 1898
simonp@8244 1899 <h4>The <code title>CSSStyleRule</code> Interface</h4>
simonp@8226 1900
simonp@8226 1901 <!--
simonp@8226 1902 //
simonp@8226 1903 // All members defined since DOM-2 Style. The only differences are:
simonp@8226 1904 //
simonp@8226 1905 // 1. removal of commented raises(DOMException) on setting selectorText
simonp@8226 1906 //
simonp@8226 1907 -->
simonp@8226 1908
simonp@8330 1909 <p>The <code>CSSStyleRule</code> interface represents a rule set.</p>
simonp@8226 1910
simonp@8226 1911 <pre class=idl>interface <dfn>CSSStyleRule</dfn> : <span>CSSRule</span> {
simonp@8226 1912 attribute DOMString <span title=dom-CSSStyleRule-selectorText>selectorText</span>;
simonp@8334 1913 [PutForwards=<span title=dom-CSSStyleDeclaration-cssText>cssText</span>] readonly attribute <span>CSSStyleDeclaration</span> <span title=dom-CSSStyleRule-style>style</span>;
simonp@8226 1914 };</pre>
simonp@8226 1915
simonp@8304 1916 <p>The <dfn title=dom-CSSStyleRule-selectorText><code>selectorText</code></dfn> attribute, on getting, must return the result of
simonp@8304 1917 <span title='serialize a group of selectors'>serializing</span> the associated <span>group of selectors</span>.</p>
simonp@8226 1918 <p>On setting the <code title=dom-CSSStyleRule-selectorText>selectorText</code> attribute these steps must be run:</p>
simonp@8226 1919 <ol>
simonp@8226 1920 <li><p>Run the <span>parse a group of selectors</span> algorithm on the given value.</p></li>
simonp@8226 1921 <li><p>If the algorithm returns a non-null value replace the associated <span>group of selectors</span> with the returned value.</p></li>
simonp@8289 1922 <li><p>Otherwise, if the algorithm returns a null value, do nothing.</p></li>
simonp@8226 1923 </ol>
simonp@8226 1924
simonp@8226 1925 <p>The <dfn title=dom-CSSStyleRule-style><code>style</code></dfn> attribute must return a <code>CSSStyleDeclaration</code> object for the rule set.</p>
simonp@8226 1926
simonp@8226 1927
simonp@8244 1928 <h4>The <code title>CSSCharsetRule</code> Interface</h4>
simonp@8226 1929
simonp@8304 1930 <p>The <code>CSSCharsetRule</code> interface represents an <code title>@charset</code> at-rule.</p>
simonp@8226 1931
simonp@8226 1932 <pre class=idl>interface <dfn>CSSCharsetRule</dfn> : <span>CSSRule</span> {
simonp@8226 1933 attribute DOMString <span title=dom-CSSCharsetRule-encoding>encoding</span>;
simonp@8226 1934 };</pre>
simonp@8226 1935
simonp@8304 1936 <p>The <dfn title=dom-CSSCharsetRule-encoding><code>encoding</code></dfn> attribute must return the encoding information specified by the
simonp@8304 1937 <code title>@charset</code> at-rule.</p>
simonp@8226 1938
simonp@8226 1939
simonp@8244 1940 <h4>The <code title>CSSImportRule</code> Interface</h4>
simonp@8226 1941
simonp@8304 1942 <p>The <code>CSSImportRule</code> interface represents an <code title>@import</code> at-rule.</p>
simonp@8226 1943
simonp@8226 1944 <pre class=idl>interface <dfn>CSSImportRule</dfn> : <span>CSSRule</span> {
simonp@8226 1945 readonly attribute DOMString <span title=dom-CSSImportRule-href>href</span>;
simonp@8334 1946 [PutForwards=<span title=dom-MediaList-mediaText>mediaText</span>] readonly attribute <span>MediaList</span> <span title=dom-CSSImportRule-media>media</span>;
simonp@8226 1947 readonly attribute <span>CSSStyleSheet</span> <span title=dom-CSSImportRule-styleSheet>styleSheet</span>;
simonp@8226 1948 };</pre>
simonp@8226 1949
simonp@8304 1950 <p>The <dfn title=dom-CSSImportRule-href><code>href</code></dfn> attribute must return the <span data-anolis-spec=url title=concept-url>URL</span> specified by
simonp@8304 1951 the <code title>@import</code> at-rule.</p>
simonp@8227 1952 <p class='note'>To get the resolved <span data-anolis-spec=url title=concept-url>URL</span> use the <code title='dom-StyleSheet-href'>href</code>
simonp@8303 1953 attribute of the associated <span>CSS style sheet</span>.</p>
simonp@8226 1954
simonp@8226 1955 <p>The <dfn title=dom-CSSImportRule-media><code>media</code></dfn> attribute must return the value of the <code title='dom-StyleSheet-media'>media</code>
simonp@8303 1956 attribute of the associated <span>CSS style sheet</span>.</p>
simonp@8303 1957
simonp@8303 1958 <p>The <dfn title=dom-CSSImportRule-styleSheet><code>styleSheet</code></dfn> attribute must return the associated <span>CSS style sheet</span>.</p>
simonp@8372 1959 <p class='note'>If loading of the style sheet fails its <span title=concept-css-style-sheet-css-rules>CSS rules</span>
simonp@8304 1960 list is simply empty, i.e., an <code title>@import</code> at-rule always has an associated <span>CSS style sheet</span>.</p>
simonp@8226 1961
simonp@8226 1962
simonp@8244 1963 <h4>The <code title>CSSMediaRule</code> Interface</h4>
simonp@8226 1964
simonp@8304 1965 <p>The <code>CSSMediaRule</code> interface represents an <code title>@media</code> at-rule.</p>
simonp@8226 1966
simonp@8226 1967 <pre class=idl>interface <dfn>CSSMediaRule</dfn> : <span>CSSRule</span> {
simonp@8334 1968 [PutForwards=<span title=dom-MediaList-mediaText>mediaText</span>] readonly attribute <span>MediaList</span> <span title=dom-CSSMediaRule-media>media</span>;
simonp@8226 1969 readonly attribute <span>CSSRuleList</span> <span title=dom-CSSMediaRule-cssRules>cssRules</span>;
simonp@8226 1970 unsigned long <span title=dom-CSSMediaRule-insertRule>insertRule</span>(DOMString rule, unsigned long index);
simonp@8226 1971 void <span title=dom-CSSMediaRule-deleteRule>deleteRule</span>(unsigned long index);
simonp@8226 1972 };</pre>
simonp@8226 1973
simonp@8226 1974 <p>The <dfn title=dom-CSSMediaRule-media><code>media</code></dfn> attribute must return a <code>MediaList</code> object for the list of media queries specified
simonp@8304 1975 with the <code title>@media</code> at-rule.</p>
simonp@8304 1976
simonp@8372 1977 <p>The <dfn title=dom-CSSMediaRule-cssRules><code>cssRules</code></dfn> attribute must return a <code>CSSRuleList</code> object for the
simonp@8372 1978 <span title=concept-css-rule-child-css-rules>child CSS rules</span> specified with the <code title>@media</code> at-rule.</p>
simonp@8372 1979
simonp@8372 1980 <p>The <dfn title=dom-CSSMediaRule-insertRule><code>insertRule(<var title>rule</var>, <var title>index</var>)</code></dfn> method must return the result of
simonp@8372 1981 invoking <span>insert a CSS rule</span> <var title>rule</var> into the <span title=concept-css-rule-child-css-rules>child CSS rules</span> at
simonp@8372 1982 <var title>index</var>.</p>
simonp@8372 1983
simonp@8372 1984 <p>The <dfn title=dom-CSSMediaRule-deleteRule><code>deleteRule(<var title>index</var>)</code></dfn> method must <span>remove a CSS rule</span> from the
simonp@8372 1985 <span title=concept-css-rule-child-css-rules>child CSS rules</span> at <var title>index</var>.</p>
simonp@8226 1986
simonp@8226 1987
simonp@8244 1988 <h4>The <code title>CSSFontFaceRule</code> Interface</h4>
simonp@8226 1989
simonp@8304 1990 <p>The <code>CSSFontFaceRule</code> interface represents an <code title>@font-face</code> at-rule.</p>
simonp@8226 1991
simonp@8226 1992 <pre class=idl>interface <dfn>CSSFontFaceRule</dfn> : <span>CSSRule</span> {
simonp@8334 1993 [PutForwards=<span title=dom-CSSStyleDeclaration-cssText>cssText</span>] readonly attribute <span>CSSStyleDeclaration</span> <span title=dom-CSSFontFaceRule-style>style</span>;
simonp@8226 1994 };</pre>
simonp@8226 1995
simonp@8226 1996 <p>The <dfn title=dom-CSSFontFaceRule-style><code>style</code></dfn> attribute must return a <code>CSSStyleDeclaration</code> block that contains the property
simonp@8304 1997 declarations specified within the <code title>@font-face</code> at-rule.</p>
simonp@8226 1998
simonp@8226 1999
simonp@8244 2000 <h4>The <code title>CSSPageRule</code> Interface</h4>
simonp@8226 2001
simonp@8304 2002 <p>The <code>CSSPageRule</code> interface represents an <code title>@page</code> at-rule.</p>
simonp@8327 2003 <p class='XXX'>Need to define the rules for
simonp@8327 2004 <dfn>parse a list of CSS page selectors</dfn> and
simonp@8327 2005 <dfn>serialize a list of CSS page selectors</dfn>.</p>
simonp@8226 2006
simonp@8226 2007 <pre class=idl>interface <dfn>CSSPageRule</dfn> : <span>CSSRule</span> {
simonp@8226 2008 attribute DOMString <span title=dom-CSSPageRule-selectorText>selectorText</span>;
simonp@8334 2009 [PutForwards=<span title=dom-CSSStyleDeclaration-cssText>cssText</span>] readonly attribute <span>CSSStyleDeclaration</span> <span title=dom-CSSPageRule-style>style</span>;
simonp@8226 2010 };</pre>
simonp@8226 2011
simonp@8304 2012 <p>The <dfn title=dom-CSSPageRule-selectorText><code>selectorText</code></dfn> attribute, on getting, must return the result of
simonp@8327 2013 <span title='serialize a list of CSS page selectors'>serializing</span> the associated <span>list of CSS page selectors</span>.</p>
simonp@8226 2014 <p>On setting the <code title=dom-CSSPageRule-selectorText>selectorText</code> attribute these steps must be run:</p>
simonp@8226 2015 <ol>
simonp@8327 2016 <li><p>Run the <span>parse a list of CSS page selectors</span> algorithm on the given value.</p></li>
simonp@8327 2017 <li><p>If the algorithm returns a non-null value replace the associated <span>list of CSS page selectors</span> with the returned value.</p></li>
simonp@8289 2018 <li><p>Otherwise, if the algorithm returns a null value, do nothing.</p></li>
simonp@8226 2019 </ol>
simonp@8226 2020
simonp@8304 2021 <p>The <dfn title=dom-CSSPageRule-style><code>style</code></dfn> attribute must return a <code>CSSStyleDeclaration</code> for the <code title>@page</code>
simonp@8304 2022 at-rule.</p>
simonp@8226 2023
simonp@8226 2024
simonp@8244 2025 <h4>The <code title>CSSNamespaceRule</code> Interface</h4>
simonp@8226 2026
simonp@8304 2027 <p>The <code>CSSNamespaceRule</code> interface represents an <code title>@namespace</code> at-rule.</p>
simonp@8226 2028
simonp@8226 2029 <pre class=idl>interface <dfn>CSSNamespaceRule</dfn> : <span>CSSRule</span> {
simonp@8335 2030 [TreatNullAs=EmptyString] attribute DOMString <span title=dom-CSSNamespaceRule-namespaceURI>namespaceURI</span>;
simonp@8335 2031 [TreatNullAs=EmptyString] attribute DOMString <span title=dom-CSSNamespaceRule-prefix>prefix</span>;
simonp@8226 2032 };</pre>
simonp@8226 2033
simonp@8288 2034 <p>The <dfn title=dom-CSSNamespaceRule-namespaceURI><code>namespaceURI</code></dfn> attribute, on getting, must return the namespace of the
simonp@8304 2035 <code title>@namespace</code> at-rule.
simonp@8301 2036
simonp@8301 2037 <p>On setting, the <code title=dom-CSSNamespaceRule-namespaceURI>namespaceURI</code> attribute must run the following steps:</p>
simonp@8288 2038
simonp@8288 2039 <ol>
simonp@8372 2040 <li><p>Let <var title>parent</var> be the <span title=concept-css-rule-parent-css-style-sheet>parent CSS style sheet</span>.
simonp@8372 2041 <li><p>Let <var title>list</var> be the <span title=concept-css-style-sheet-css-rules>CSS rules</span> of <var title>parent</var>, or
simonp@8372 2042 null if <var title>parent</var> is null.
simonp@8289 2043 <li><p>If <var title>list</var> is not null and contains anything other than
simonp@8288 2044 <code title>@charset</code> at-rules, <code title>@import</code> at-rules, and <code title>@namespace</code> at-rules,
simonp@8288 2045 <span data-anolis-spec='dom' title='concept-throw'>throw</span> an <code data-anolis-spec=dom>InvalidStateError</code> exception.
simonp@8288 2046 <li><p>Set the namespace of the <code title>@namespace</code> at-rule to the given value.
simonp@8288 2047 </ol>
simonp@8226 2048
simonp@8304 2049 <p>The <dfn title=dom-CSSNamespaceRule-prefix><code>prefix</code></dfn> attribute must return the prefix of the <code title>@namespace</code> at-rule or the
simonp@8301 2050 empty string if there is no prefix.
simonp@8301 2051
simonp@8301 2052 <p>On setting, the <code title=dom-CSSNamespaceRule-prefix>prefix</code> attribute must run the following steps:</p>
simonp@8288 2053
simonp@8288 2054 <ol>
simonp@8372 2055 <li><p>Let <var title>parent</var> be the <span title=concept-css-rule-parent-css-style-sheet>parent CSS style sheet</span>.
simonp@8372 2056 <li><p>Let <var title>list</var> be the <span title=concept-css-style-sheet-css-rules>CSS rules</span> of <var title>parent</var>, or
simonp@8372 2057 null if <var title>parent</var> is null.
simonp@8289 2058 <li><p>If <var title>list</var> is not null and contains anything other than
simonp@8288 2059 <code title>@charset</code> at-rules, <code title>@import</code> at-rules, and <code title>@namespace</code> at-rules,
simonp@8288 2060 <span data-anolis-spec='dom' title='concept-throw'>throw</span> an <code data-anolis-spec=dom>InvalidStateError</code> exception.
simonp@8288 2061 <li><p>Set the prefix of the <code title>@namespace</code> at-rule to the given value.
simonp@8288 2062 </ol>
simonp@8226 2063
simonp@8226 2064
simonp@8244 2065 <h3>CSS Declaration Blocks</h3>
simonp@8244 2066
simonp@8244 2067 <p>A <dfn>CSS declaration block</dfn> is an ordered collection of CSS
simonp@8244 2068 properties with their associated values, also named CSS declarations. In
simonp@8244 2069 the DOM a <span>CSS declaration block</span> is a
simonp@8244 2070 <code>CSSStyleDeclaration</code> object. A
simonp@8244 2071 <span>CSS declaration block</span> has two associated properties:</p>
simonp@8244 2072
simonp@8244 2073 <dl>
simonp@8305 2074 <dt><dfn title=concept-css-declaration-block-readonly-flag>readonly flag</dfn></dt>
simonp@8244 2075 <dd><p>Clear if the object can be manipulated. Set if it can not be
simonp@8244 2076 manipulated. Unless otherwise stated it is clear.</p></dd>
simonp@8244 2077
simonp@8305 2078 <dt><dfn title=concept-css-declaration-block-declarations>declarations</dfn></dt>
simonp@8244 2079 <dd><p>The CSS declarations associated with the object.</p></dd>
simonp@8244 2080 </dl>
simonp@8244 2081
simonp@8305 2082 <p class="note">The <span title=concept-css-declaration-block-declarations>declarations</span> are
simonp@8244 2083 ordered. This matters for the
simonp@8244 2084 <code title="dom-CSSStyleDeclaration-item">item()</code> method.</p>
simonp@8244 2085
simonp@8244 2086 <p>To <dfn>parse a CSS declaration block</dfn> ...</p>
simonp@8244 2087
simonp@8244 2088 <p class="XXX">What should be captured in the cssText of a declaration block which fails
simonp@8244 2089 to parse?</p>
simonp@8244 2090
simonp@8244 2091 <p>To <dfn>serialize a CSS declaration block</dfn>
simonp@8289 2092 represented by a <code>CSSStyleDeclarations</code> instance named <var title>d</var>,
simonp@8289 2093 let <var title>s</var> be the empty string, then run the steps below:</p>
simonp@8244 2094
simonp@8244 2095 <ol>
simonp@8304 2096 <li><p>If <code title><var title>d</var>.length</code> is zero (0), then return <var title>s</var>.</p></li>
simonp@8304 2097 <li><p>For each <var title>i</var> from zero (0) through <code title><var title>d</var>.length</code> - 1 (inclusive), perform the following sub-steps:</p>
simonp@8244 2098 <ol>
simonp@8304 2099 <li><p>Let <var title>n</var> be the value returned by <code title><var title>d</var>.item(<var title>i</var>)</code>.</p></li>
simonp@8304 2100 <li><p>Let <var title>v</var> be the value returned by <code title><var title>d</var>.getPropertyValue(<var title>n</var>)</code>.</p></li>
simonp@8289 2101 <li><p>If <var title>v</var> is the empty string, then continue.</p></li>
simonp@8244 2102 <li>
simonp@8289 2103 <p>Otherwise (<var title>v</var> is non-empty), perform the following sub-steps:</p>
simonp@8244 2104 <ol>
simonp@8289 2105 <li><p>If <var title>s</var> is not empty, then append a single SPACE (U+0020) to <var title>s</var>.</p></li>
simonp@8289 2106 <li><p>Append <var title>n</var> to <var title>s</var>.</p></li>
simonp@8304 2107 <li><p>Append COLON (U+003A) followed by a single SPACE (U+0020), i.e., "<code title>: </code>", to <var title>s</var>.</p></li>
simonp@8289 2108 <li><p>Append <var title>v</var> to <var title>s</var>.</p></li>
simonp@8244 2109 </ol>
simonp@8244 2110 </li>
simonp@8304 2111 <li><p>Let <var title>p</var> be the value returned by <code title><var title>d</var>.getPropertyPriority(<var title>n</var>)</code>.</p></li>
simonp@8244 2112 <li>
simonp@8289 2113 <p>If <var title>p</var> is not the empty string, then perform the following sub-steps:</p>
simonp@8226 2114 <ol>
simonp@8304 2115 <li><p>Append a single SPACE (U+0020) followed by EXCLAMATION MARK (U+0021), i.e., "<code title> !</code>", to <var title>s</var>.</p></li>
simonp@8289 2116 <li><p>Append <var title>p</var> to <var title>s</var>.</p></li>
simonp@8226 2117 </ol>
simonp@8244 2118 </li>
simonp@8304 2119 <li><p>Append SEMICOLON (U+003B), i.e., "<code title>;</code>", to <var title>s</var>.</p></li>
simonp@8244 2120 </ol>
simonp@8244 2121 </li>
simonp@8289 2122 <li><p>Return <var title>s</var>.</p></li>
simonp@8244 2123 </ol>
simonp@8244 2124
simonp@8244 2125 <p class="note">The serialization of an empty CSS declaration block is the empty string.</p>
simonp@8244 2126
simonp@8244 2127 <p class="note">The serialization of a non-empty CSS declaration block does not include any surrounding whitespace, i.e., no whitepsace appears
simonp@8244 2128 before the first property name and no whitespace appears after the final semicolon delimiter that follows the last property value.</p>
simonp@8244 2129
simonp@8244 2130
simonp@8244 2131 <h4>The <code title>CSSStyleDeclaration</code> Interface</h4>
simonp@8226 2132
simonp@8226 2133 <!--
simonp@8226 2134 //
simonp@8226 2135 // All members defined since DOM-2 Style. The only differences are:
simonp@8226 2136 //
simonp@8226 2137 // 1. removal of commented raises(DOMException) on setting cssText
simonp@8226 2138 // 2. removal of raises(DOMException) on {set,remove}Property
simonp@8226 2139 // 3. removal of getPropertyCSSValue() method
simonp@8226 2140 //
simonp@8226 2141 -->
simonp@8226 2142
simonp@8226 2143 <p>The <code>CSSStyleDeclaration</code> interface represents a <span>CSS declaration block</span>, including its underlying state, where this
simonp@8244 2144 underlying state depends upon the source of the <code>CSSStyleDeclaration</Code> instance.</p>
simonp@8226 2145
simonp@8226 2146 <pre class=idl>interface <dfn>CSSStyleDeclaration</dfn> {
simonp@8262 2147 attribute DOMString <span title=dom-CSSStyleDeclaration-cssText>cssText</span>;
simonp@8262 2148 readonly attribute unsigned long <span title=dom-CSSStyleDeclaration-length>length</span>;
simonp@8266 2149 getter DOMString <span title=dom-CSSStyleDeclaration-item>item</span>(unsigned long index);
simonp@8262 2150 DOMString <span title=dom-CSSStyleDeclaration-getPropertyValue>getPropertyValue</span>(DOMString property);
simonp@8262 2151 DOMString <span title=dom-CSSStyleDeclaration-getPropertyPriority>getPropertyPriority</span>(DOMString property);
simonp@8350 2152 void <span title=dom-CSSStyleDeclaration-setProperty>setProperty</span>(DOMString property, [TreatNullAs=EmptyString] DOMString value, <!--
simonp@8304 2153 -->[TreatNullAs=EmptyString] optional DOMString priority = "");
simonp@8262 2154 DOMString <span title=dom-CSSStyleDeclaration-removeProperty>removeProperty</span>(DOMString property);
simonp@8262 2155 readonly attribute <span>CSSRule</span>? <span title=dom-CSSStyleDeclaration-length>parentRule</span>;
simonp@8350 2156 attribute DOMString <span title=dom-CSSStyleDeclaration-cssFloat>cssFloat</span>;<!-- setProperty's value arg has [TreatNullAs=EmptyString] -->
simonp@8226 2157 };</pre>
simonp@8226 2158
simonp@8266 2159 <p>The object's <span data-anolis-spec=webidl>supported property indices</span> are the numbers in the range zero to one less than the number of declarations in
simonp@8305 2160 the <span title=concept-css-declaration-block-declarations>declarations</span>. If there are no such declarations, then there are no
simonp@8305 2161 <span data-anolis-spec=webidl>supported property indices</span>.
simonp@8266 2162
simonp@8304 2163 <p>The <dfn title=dom-CSSStyleDeclaration-cssText><code>cssText</code></dfn> attribute must return the result of
simonp@8305 2164 <span title='serialize a CSS declaration block'>serializing</span> the <span title=concept-css-declaration-block-declarations>declarations</span>.</p>
simonp@8226 2165 <p>Setting the <code title=dom-CSSStyleDeclaration-cssText>cssText</code> attribute must run these steps:
simonp@8226 2166 <ol>
simonp@8305 2167 <li><p>If the <span title=concept-css-declaration-block-readonly-flag>readonly flag</span> is set, <span data-anolis-spec=dom title=concept-throw>throw</span>
simonp@8305 2168 a <code data-anolis-spec=dom>NoModificationAllowedError</code> exception and terminate these steps.</li>
simonp@8305 2169 <li><p>Empty the <span title=concept-css-declaration-block-declarations>declarations</span>.</li>
simonp@8289 2170 <li><p><span title='Parse a CSS declaration block'>Parse</span> the given value and, if the return value is not null, insert it into the
simonp@8305 2171 <span title=concept-css-declaration-block-declarations>declarations</span>.</p></li>
simonp@8226 2172 </ol>
simonp@8226 2173
simonp@8327 2174 <p>The <dfn title=dom-CSSStyleDeclaration-length><code>length</code></dfn> attribute must return the number of declarations in the
simonp@8327 2175 <span title=concept-css-declaration-block-declarations>declarations</span>.</p>
simonp@8304 2176
simonp@8304 2177 <p>The <dfn title=dom-CSSStyleDeclaration-item><code>item(<var title>index</var>)</code></dfn> method must return the name of the property at position
simonp@8304 2178 <var title>index</var>.</p>
simonp@8289 2179
simonp@8289 2180 <p>The <dfn title=dom-CSSStyleDeclaration-getPropertyValue><code>getPropertyValue(<var title>property</var>)</code></dfn> method must run these steps:</p>
simonp@8226 2181 <ol>
simonp@8289 2182 <li><p>If <var title>property</var> is an <span data-anolis-spec=dom>ASCII
simonp@8226 2183 case-insensitive</span> match for a property of a declaration in the
simonp@8305 2184 <span title=concept-css-declaration-block-declarations>declarations</span>, and that declaration's property
simonp@8226 2185 is defined to be case-insensitive, return the
simonp@8226 2186 <span title='serialize a CSS value'>serialization</span> of that declaration's
simonp@8226 2187 value.
simonp@8289 2188 <li><p>If <var title>property</var> is a <span data-anolis-spec=dom>case-sensitive</span>
simonp@8226 2189 match for a property of a declaration in the
simonp@8305 2190 <span title=concept-css-declaration-block-declarations>declarations</span>, and that declaration's property
simonp@8226 2191 is defined to be case-sensitive, return the
simonp@8226 2192 <span title='serialize a CSS value'>serialization</span> of that declaration's
simonp@8226 2193 value.
simonp@8226 2194 <li><p>Return the empty string.
simonp@8226 2195 </ol>
simonp@8226 2196
simonp@8289 2197 <p>The <dfn title=dom-CSSStyleDeclaration-getPropertyPriority><code>getPropertyPriority(<var title>property</var>)</code></dfn> method must run these steps:
simonp@8226 2198 <ol>
simonp@8289 2199 <li><p>If <var title>property</var> is an <span data-anolis-spec=dom>ASCII
simonp@8327 2200 case-insensitive</span> match for a property of a declaration in the <span title=concept-css-declaration-block-declarations>declarations</span> that has the
simonp@8327 2201 <i title>important</i> flag set, and that declaration's
simonp@8269 2202 property is defined to be case-insensitive, return the string "<code title>important</code>".</p>
simonp@8289 2203 <li><p>If <var title>property</var> is a
simonp@8226 2204 <span data-anolis-spec=dom>case-sensitive</span> match for a property of a
simonp@8305 2205 declaration in the <span title=concept-css-declaration-block-declarations>declarations</span> that has the
simonp@8269 2206 <i title>important</i> flag set, and that declaration's property is defined to be case-sensitive, return
simonp@8269 2207 the string "<code title>important</code>".</p>
simonp@8226 2208 <li><p>Return the empty string.
simonp@8226 2209 </ol>
simonp@8304 2210 <p class='example'>E.g. for <code title>background-color:lime !IMPORTANT</code> the return
simonp@8304 2211 value would be "<code title>important</code>".</p>
simonp@8304 2212
simonp@8304 2213 <p>The <dfn title=dom-CSSStyleDeclaration-setProperty><code>setProperty(<var title>property</var>, <var title>value</var>,
simonp@8304 2214 <var title>priority</var>)</code></dfn> method must run these steps:</p>
simonp@8226 2215 <ol>
simonp@8305 2216 <li><p>If the <span title=concept-css-declaration-block-readonly-flag>readonly flag</span> is set, <span data-anolis-spec=dom title=concept-throw>throw</span>
simonp@8293 2217 an <code data-anolis-spec=dom>NoModificationAllowedError</code> exception and terminate these steps.</li>
simonp@8304 2218 <li><p>If <var title>property</var> is not an <span data-anolis-spec=dom>ASCII case-insensitive</span> match for a supported property that is defined to be
simonp@8337 2219 case-insensitive, or if <var title>property</var> is not a <span data-anolis-spec=dom>case-sensitive</span> match for a supported property that is defined to
simonp@8337 2220 be case-sensitive, terminate this algorithm.</p></li>
simonp@8289 2221 <li><p>If <var title>value</var> is the empty string, invoke <code title='dom-CSSStyleDeclaration-removeProperty'>removeProperty()</code>
simonp@8289 2222 with <var title>property</var> as argument and terminate this algorithm.</p></li>
simonp@8304 2223 <li><p>If <var title>priority</var> is neither an <span data-anolis-spec=dom>ASCII case-insensitive</span> match for the string "<code title>important</code>"
simonp@8304 2224 nor the empty string terminate this algorithm.</p></li>
simonp@8226 2225 <li>
simonp@8289 2226 <p>If <span title='parse a CSS value'>parsing the <var title>value</var></span> returns null terminate this algorithm.
simonp@8304 2227 <p class='note'><var title>value</var> can not include "<code title>!important</code>".</p>
simonp@8226 2228 </li>
simonp@8304 2229 <li><p>Finally, set <var title>property</var> to <var title>value</var> with the <i title>important</i> flag set if <var title>priority</var> is not the empty
simonp@8304 2230 string, and unset otherwise.</p></li>
simonp@8226 2231 </ol>
simonp@8226 2232
simonp@8289 2233 <p>The <dfn title=dom-CSSStyleDeclaration-removeProperty><code>removeProperty(<var title>property</var>)</code></dfn> method must run these steps:</p>
simonp@8226 2234 <ol>
simonp@8305 2235 <li><p>If the <span title=concept-css-declaration-block-readonly-flag>readonly flag</span> is set, <span data-anolis-spec=dom title=concept-throw>throw</span>
simonp@8305 2236 a <code data-anolis-spec=dom>NoModificationAllowedError</code> exception and terminate these steps.</li>
simonp@8289 2237 <li><p>Let <var title>value</var> be the return value of invoking <code title='dom-CSSStyleDeclaration-getPropertyValue'>getPropertyValue()</code>
simonp@8289 2238 with <var title>property</var> as argument.
simonp@8289 2239 <li><p>If <var title>property</var> is an <span data-anolis-spec=dom>ASCII case-insensitive</span> match for a property of a declaration in the
simonp@8305 2240 <span title=concept-css-declaration-block-declarations>declarations</span>, and that property is defined to be a case-insensitive property, remove the
simonp@8305 2241 declaration.</p></li>
simonp@8289 2242 <li><p>If <var title>property</var> is a <span data-anolis-spec=dom>case-sensitive</span> match for a property of a declaration in the
simonp@8305 2243 <span title=concept-css-declaration-block-declarations>declarations</span>, and that property is defined to be a case-sensitive property, remove the
simonp@8305 2244 declaration.</p></li>
simonp@8289 2245 <li><p>Return <var title>value</var>.
simonp@8226 2246 </ol>
simonp@8226 2247
simonp@8304 2248 <p>The <dfn title=dom-CSSStyleDeclaration-parentRule><code>parentRule</code></dfn> attribute must return the <code>CSSrule</code> object the
simonp@8304 2249 <code>CSSStyleDeclaration</code> is object is associated with or null if it is not associated with a <code>CSSrule</code> object.</p>
simonp@8289 2250
simonp@8291 2251 <p>The <dfn title=dom-CSSStyleDeclaration-cssFloat><code>cssFloat</code></dfn>
simonp@8291 2252 attribute, on getting, must return the result of invoking
simonp@8291 2253 <code title=dom-CSSStyleDeclaration-getPropertyValue>getPropertyValue()</code> with
simonp@8291 2254 <code title>float</code> as argument. On setting, the attribute must invoke
simonp@8291 2255 <code title=dom-CSSStyleDeclaration-setProperty>setProperty()</code> with
simonp@8291 2256 <code title>float</code> as first argument, as second argument the given value, and no third argument.
simonp@8291 2257 Any exceptions thrown must be re-thrown.
simonp@8291 2258
simonp@8351 2259 <p>For each CSS property <var title>property</var> that the user agent supports,
simonp@8351 2260 the following partial interface applies where <var title>camel-cased attribute</var>
simonp@8291 2261 is obtained by running the <span>CSS property to IDL attribute</span> algorithm for
simonp@8291 2262 <var>property</var>.</p>
simonp@8291 2263
simonp@8352 2264 <pre class="idl extract">partial interface <span>CSSStyleDeclaration</span> {
simonp@8351 2265 attribute DOMString _<span title=dom-CSSStyleDeclaration-camel-cased-attribute><var title>camel-cased attribute</var></span>;
simonp@8291 2266 };</pre>
simonp@8291 2267
simonp@8351 2268 <p>The <dfn title=dom-CSSStyleDeclaration-camel-cased-attribute><code><var title>camel-cased attribute</var></code></dfn> attribute, on getting, must return the
simonp@8351 2269 result of invoking <code title=dom-CSSStyleDeclaration-getPropertyValue>getPropertyValue()</code> with the
simonp@8331 2270 argument being the result of running the <span>IDL attribute to CSS property</span>
simonp@8351 2271 algorithm for <var title>camel-cased attribute</var>.</p>
simonp@8351 2272
simonp@8351 2273 <p>Setting the <code title=dom-CSSStyleDeclaration-camel-cased-attribute><var title>camel-cased attribute</var></code> attribute must invoke
simonp@8331 2274 <code title=dom-CSSStyleDeclaration-setProperty>setProperty()</code> with the
simonp@8331 2275 first argument being the result of running the <span>IDL attribute to CSS property</span>
simonp@8351 2276 algorithm for <var title>camel-cased attribute</var>, as second argument the given value, and no third argument. Any
simonp@8291 2277 exceptions thrown must be re-thrown.</p>
simonp@8289 2278
simonp@8351 2279 <p class=example>For example, for the 'font-size' property there would be a <code title>fontSize</code> IDL attribute.
simonp@8351 2280
glenn@8354 2281 <!-- [GA] Remove spec text for so called "dashed-attribute" until consensus obtains on whether to include in spec.
glenn@8354 2282
simonp@8351 2283 <p>For each CSS property <var title>property</var> that the user agent supports, except for properties that have no "<code title>-</code>" (U+002D) in the
simonp@8351 2284 property name, user agents must act as if there was a WebIDL <span data-anolis-spec=webidl>regular attribute</span> member as part of the
simonp@8351 2285 <code>CSSStyleDeclaration</code> interface with the type being <code title>DOMString</code> and the <span data-anolis-spec=webidl>identifier</span> being
simonp@8351 2286 <var title>property</var>, and let <var title>dashed attribute</var> be <var title>property</var>.
simonp@8351 2287
simonp@8351 2288 <p>The <dfn title=dom-CSSStyleDeclaration-dashed-attribute><code><var title>dashed attribute</var></code></dfn> attribute, on getting, must return the
simonp@8351 2289 result of invoking <code title=dom-CSSStyleDeclaration-getPropertyValue>getPropertyValue()</code> with the
simonp@8351 2290 argument being <var title>dashed attribute</var>.</p>
simonp@8351 2291
simonp@8351 2292 <p>Setting the <code title=dom-CSSStyleDeclaration-dashed-attribute><var title>dashed attribute</var></code> attribute must invoke
simonp@8351 2293 <code title=dom-CSSStyleDeclaration-setProperty>setProperty()</code> with the
simonp@8351 2294 first argument being <var title>dashed attribute</var>, as second argument the given value, and no third argument. Any
simonp@8351 2295 exceptions thrown must be re-thrown.</p>
simonp@8351 2296
simonp@8351 2297 <div class=example>
simonp@8351 2298 <p>For example, for the 'font-size' property there would be a <code title>font-size</code> IDL attribute. In JavaScript, the property can be accessed as
simonp@8351 2299 follows, assuming <var title>element</var> is an <span data-anolis-spec=html title="HTML elements">HTML element</span>:
simonp@8351 2300 <pre><var title>element</var>.style['font-size'];</pre>
simonp@8351 2301 </div>
simonp@8351 2302
simonp@8351 2303 <p class=note>WebIDL does not allow dashes in identifiers in its syntax.
simonp@8351 2304
simonp@8352 2305 <p class=XXX>The <code title=dom-CSSStyleDeclaration-dashed-attribute><var title>dashed attribute</var></code> attributes will be removed from the specification
simonp@8352 2306 if implementations remove support. User agents that currently support them are urged to experiment with removing support.
simonp@8352 2307
glenn@8354 2308 -->
glenn@8354 2309
simonp@8289 2310 <p>The <dfn>CSS property to IDL attribute</dfn> algorithm for <var title>property</var> is as
simonp@8244 2311 follows:</p>
simonp@8244 2312
simonp@8244 2313 <ol>
simonp@8289 2314 <li><p>Let <var title>output</var> be the empty string.
simonp@8244 2315
simonp@8289 2316 <li><p>Let <var title>uppercase next</var> be unset.
simonp@8244 2317
simonp@8289 2318 <li><p>For each character <var title>c</var> in <var title>property</var>:
simonp@8244 2319
simonp@8226 2320 <ol>
simonp@8289 2321 <li><p>If <var title>c</var> is "<code title>-</code>" (U+002D), let <var title>uppercase next</var> be set.
simonp@8244 2322
simonp@8304 2323 <li><p>Otherwise, if <var title>uppercase next</var> is set, let <var title>uppercase next</var> be unset and append <var title>c</var>
simonp@8304 2324 <span data-anolis-spec=dom>converted to ASCII uppercase</span> to <var title>output</var>.
simonp@8244 2325
simonp@8289 2326 <li><p>Otherwise, append <var title>c</var> to <var title>output</var>.
simonp@8226 2327 </ol>
simonp@8244 2328
simonp@8289 2329 <li><p>Return <var title>output</var>.
simonp@8244 2330 </ol>
simonp@8244 2331
simonp@8289 2332 <p>The <dfn>IDL attribute to CSS property</dfn> algorithm for <var title>attribute</var> is as
simonp@8244 2333 follows:</p>
simonp@8244 2334
simonp@8244 2335 <ol>
simonp@8289 2336 <li><p>Let <var title>output</var> be the empty string.
simonp@8244 2337
simonp@8289 2338 <li><p>For each character <var title>c</var> in <var title>attribute</var>:
simonp@8244 2339
simonp@8226 2340 <ol>
simonp@8304 2341 <li><p>If <var title>c</var> is in the range U+0041 to U+005A (ASCII uppercase), append "<code title>-</code>" (U+002D) followed by <var title>c</var>
simonp@8304 2342 <span data-anolis-spec=dom>converted to ASCII lowercase</span> to <var title>output</var>.
simonp@8244 2343
simonp@8289 2344 <li><p>Otherwise, append <var title>c</var> to <var title>output</var>.
simonp@8226 2345 </ol>
simonp@8244 2346
simonp@8289 2347 <li><p>Return <var title>output</var>.
simonp@8244 2348 </ol>
simonp@8244 2349
simonp@8226 2350
simonp@8244 2351 <h3>CSS Values</h3>
simonp@8244 2352
simonp@8244 2353
simonp@8244 2354 <h4>Parsing CSS Values</h4>
simonp@8244 2355
simonp@8244 2356 <p>To <dfn>parse a CSS value</dfn> for a given
simonp@8289 2357 <var title>property</var> means to a parse the given value according to
simonp@8244 2358 the definition of the property that is an
simonp@8244 2359 <span data-anolis-spec=dom>ASCII case-insensitive</span> match for
simonp@8289 2360 <var title>property</var> in the CSS specification, if <var title>property</var> is defined to be
simonp@8244 2361 case-insensitive, or otherwise that is a
simonp@8289 2362 <span data-anolis-spec=dom>case-sensitive</span> match for <var title>property</var> in the
simonp@8289 2363 CSS specification. If the given value is <span>ignored</span> return null.
simonp@8289 2364 Otherwise return the CSS value for the given <var title>property</var>.</p>
simonp@8244 2365
simonp@8304 2366 <p class="note">"<code title>!important</code>" declarations are not
simonp@8244 2367 part of the property value space and will therefore cause
simonp@8289 2368 <span>parse a CSS value</span> to return null.</p>
simonp@8244 2369
simonp@8244 2370
simonp@8244 2371
simonp@8244 2372 <h4>Serializing CSS Values</h4>
simonp@8244 2373
simonp@8244 2374 <!-- based on http://damowmow.com/playground/canon.txt -->
simonp@8244 2375
simonp@8244 2376 <p>To <dfn>serialize a CSS value</dfn> follow
simonp@8244 2377 these rules:</p>
simonp@8244 2378
simonp@8244 2379 <ul>
simonp@8244 2380 <li><p><span title="Serialize a CSS component value">Serialize</span> any
simonp@8244 2381 CSS component values in the value.</p></li>
simonp@8244 2382
simonp@8244 2383 <li><p>Where multiple CSS component values can appear in any order
simonp@8244 2384 without changing the meaning of the value (typically represented by a
simonp@8304 2385 double bar <code title>||</code> in the value syntax), use the order as given
simonp@8244 2386 in the syntax.</p></li>
simonp@8304 2387 <!-- <code title>&lt;border-width> &lt;border-style> &lt;color></code>
simonp@8304 2388 for <code title>border</code> -->
simonp@8244 2389
simonp@8244 2390 <li>
simonp@8244 2391 <p>Where CSS component values of the value can be omitted without
simonp@8244 2392 changing the meaning of the value (e.g. initial values in shorthand
simonp@8244 2393 properties), omit them. If this would remove all the values, then
simonp@8244 2394 include the first allowed value.</p>
simonp@8244 2395
simonp@8304 2396 <p class="example">E.g. <code title>margin: 20px 20px</code> becomes
simonp@8304 2397 <code title>margin: 20px</code>.</p>
simonp@8304 2398
simonp@8304 2399 <p class="example">E.g. the value <code title>0</code> for the
simonp@8346 2400 'border' property.</p>
simonp@8244 2401 </li>
simonp@8244 2402
simonp@8244 2403 <li><p>If the value of a shorthand property is requested and it cannot be
simonp@8244 2404 computed because the properties associated with the shorthand have values
simonp@8244 2405 that cannot be represented by the shorthand the serialization is the
simonp@8244 2406 empty string.</p></li>
simonp@8244 2407
simonp@8244 2408 <li><p>If a value has a <span>whitespace</span>-separated list of
simonp@8244 2409 CSS component values,
simonp@8244 2410 <span title="serialize a whitespace-separated list">serialize</span> the
simonp@8244 2411 value as a whitespace-separated list.</p></li>
simonp@8244 2412
simonp@8244 2413 <li><p>If a value has a comma-separated list of
simonp@8244 2414 CSS component values,
simonp@8244 2415 <span title="serialize a comma-separated list">serialize</span> the
simonp@8244 2416 value as a comma-separated list.</p></li>
simonp@8244 2417 </ul>
simonp@8244 2418
simonp@8244 2419
simonp@8244 2420 <p>To
simonp@8244 2421 <dfn>serialize a CSS component value</dfn>
simonp@8244 2422 depends on the component, as follows:</p>
simonp@8244 2423
simonp@8244 2424 <dl class="switch">
simonp@8244 2425 <dt>keyword</dt>
simonp@8244 2426 <dd><p>The keyword
simonp@8244 2427 <span data-anolis-spec=dom>converted to ASCII lowercase</span>.</p></dd>
simonp@8244 2428
simonp@8244 2429 <dt>&lt;angle></dt>
simonp@8244 2430 <dd><p>The number of degrees serialized as per &lt;number> followed by
simonp@8304 2431 the literal string "<code title>deg</code>".</p></dd>
simonp@8244 2432
simonp@8244 2433 <dt>&lt;color></dt>
simonp@8244 2434 <dd>
simonp@8244 2435 <p>If &lt;color&gt; is a component of a resolved or computed value, then
simonp@8304 2436 return the color using the <code title>rgb()</code> or <code title>rgba()</code> functional
simonp@8244 2437 notation as follows:</p>
simonp@8244 2438 <ol>
simonp@8244 2439 <li>If the alpha component of the color is equal to one, then return the serialization of the
simonp@8304 2440 <code title>rgb()</code> functional equivalent of the opaque color.</li>
simonp@8244 2441 <li>If the alpha component of the color is not equal to one, then return the serialization of the
simonp@8304 2442 <code title>rgba()</code> functional equivalent of the non-opaque color.</li>
simonp@8244 2443 </ol>
simonp@8304 2444 <p>The serialization of the <code title>rgb()</code> functional equivalent is the concatenation of the following:</p>
simonp@8244 2445 <ol>
simonp@8304 2446 <li>The string "<code title>rgb(</code>".</li>
simonp@8244 2447 <li>The shortest base-ten integer serialization of the color's red component.</li>
simonp@8304 2448 <li>The string "<code title>, </code>".</li>
simonp@8244 2449 <li>The shortest base-ten serialization of the color's green component.</li>
simonp@8304 2450 <li>The string "<code title>, </code>".</li>
simonp@8244 2451 <li>The shortest base-ten serialization of the color's blue component.</li>
simonp@8304 2452 <li>The string "<code title>)</code>".</li>
simonp@8244 2453 </ol>
simonp@8304 2454 <p>The serialization of the <code title>rgba()</code> functional equivalent is the concatenation of the following:</p>
simonp@8244 2455 <ol>
simonp@8304 2456 <li>The string "<code title>rgba(</code>".</li>
simonp@8244 2457 <li>The shortest base-ten serialization of the color's red component.</li>
simonp@8304 2458 <li>The string "<code title>, </code>".</li>
simonp@8244 2459 <li>The shortest base-ten serialization of the color's green component.</li>
simonp@8304 2460 <li>The string "<code title>, </code>".</li>
simonp@8244 2461 <li>The shortest base-ten serialization of the color's blue component.</li>
simonp@8304 2462 <li>The string "<code title>, </code>".</li>
simonp@8244 2463 <li>The shortest serialization of the &lt;number&gt; that denotes the color's alpha component.</li>
simonp@8304 2464 <li>The string "<code title>)</code>".</li>
simonp@8244 2465 </ol>
simonp@8244 2466
simonp@8304 2467 <p>In the above rules, the string "<code title>, </code>" denotes a COMMA (U+002C) followed by a single SPACE (U+0020).</p>
simonp@8244 2468
simonp@8244 2469 <p>If &lt;color&gt; is a component of a specified value, then
simonp@8244 2470 return the color as follows:</p>
simonp@8244 2471 <ol>
simonp@8244 2472 <li>If the color was explicitly specified by the author, then return the original, author specified color value.</li>
simonp@8244 2473 <li>Otherwise, return the value that would be returned if the color were a component of a computed value.</li>
simonp@8244 2474 </ol>
simonp@8244 2475 <p class="XXX">Should author specified values be normalized for case? Or should original case be preserved?</p>
simonp@8244 2476 </dd>
simonp@8244 2477 <!--
simonp@8244 2478 <dt>It is a system color</dt>
simonp@8244 2479
simonp@8244 2480 <dd>See below (you use the representation given in the specification that
simonp@8244 2481 defines the keyword).</dd>
simonp@8244 2482
simonp@8244 2483 <dt>Alpha component is equal to 1.0</dt>
simonp@8244 2484
simonp@8244 2485 <dd>The color is an uppercase six-digit hexadecimal value, prefixed with a
simonp@8304 2486 <code title>#</code> character (U+0023 NUMBER SIGN), with the first two digits
simonp@8244 2487 representing the red component, the next two digits representing the green
simonp@8244 2488 component, and the last two digits representing the blue component, the
simonp@8244 2489 digits being in the range 0-9 A-F (U+0030 to U+0039 and U+0041 to
simonp@8244 2490 U+0046).</dd>
simonp@8244 2491
simonp@8244 2492 <dt>Alpha component is less than 1.0</dt>
simonp@8244 2493
simonp@8304 2494 <dd>The color is in the CSS <code title>rgba()</code> functional-notation format:
simonp@8304 2495 the literal string <code title>rgba</code> (U+0072 U+0067 U+0062 U+0061) followed
simonp@8244 2496 by a U+0028 LEFT PARENTHESIS, a <span>color component integer</span>
simonp@8244 2497 representing the red component, a <span>color component separator</span>, a
simonp@8244 2498 <span>color component integer</span> for the green component, a <span>color
simonp@8244 2499 component separator</span>, a <span>color component integer</span> for the
simonp@8244 2500 blue component, another <span>color component separator</span> a U+0030
simonp@8244 2501 DIGIT ZERO, a U+002E FULL STOP (representing the decimal point), one or
simonp@8244 2502 more digits in the range 0-9 (U+0030 to U+0039) representing the fractional
simonp@8244 2503 part of the alpha value, and finally a U+0029 RIGHT PARENTHESIS.</dd>
simonp@8244 2504
simonp@8304 2505 <dt>The keyword <code title>transparent</code> is used</dt>
simonp@8304 2506
simonp@8304 2507 <dd>The color is <code title>rgba(0, 0, 0, 0)</code>.</dd>
simonp@8244 2508 -->
simonp@8244 2509
simonp@8244 2510 <dt>&lt;counter></dt>
simonp@8244 2511 <dd>
simonp@8244 2512 <p>The concatenation of:</p>
simonp@8244 2513 <ol>
simonp@8244 2514 <li><p>If &lt;counter> has three CSS component values the string
simonp@8304 2515 "<code title>counters(</code>".</p></li>
simonp@8244 2516 <li><p>If &lt;counter> has two CSS component values the string
simonp@8304 2517 "<code title>counter(</code>".</p></li>
simonp@8244 2518 <li><p>The result of
simonp@8244 2519 <span title="serialize a comma-separated list">serializing</span> the
simonp@8226 2520 <span title="serialize a CSS component value">serialized</span>
simonp@8244 2521 CSS component values belonging to &lt;counter> as list while omitting
simonp@8244 2522 the last CSS component value if it is 'decimal'.</p></li>
simonp@8304 2523 <li><p>"<code title>)</code>" (U+0029).</p></li>
simonp@8244 2524 </ol>
simonp@8244 2525 </dd>
simonp@8244 2526
simonp@8244 2527 <dt>&lt;frequency></dt>
simonp@8244 2528 <dd><p>The frequency in hertz serialized as per &lt;number> followed by
simonp@8304 2529 the literal string "<code title>hz</code>".</dd>
simonp@8244 2530
simonp@8244 2531 <dt>&lt;identifier></dt>
simonp@8244 2532 <dd><p>The identifier
simonp@8244 2533 <span title="serialize an identifier">escaped</span>.</p></dd>
simonp@8244 2534
simonp@8244 2535 <dt>&lt;integer></dt>
simonp@8244 2536 <dd><p>A base-ten integer using digits 0-9 (U+0030 to U+0039) in the
simonp@8304 2537 shortest form possible, preceded by "<code title>-</code>" (U+002D) if it is
simonp@8244 2538 negative.</p></dd>
simonp@8244 2539
simonp@8244 2540 <dt>&lt;length></dt>
simonp@8244 2541 <dd>
simonp@8244 2542 <p>A length of zero is represented by the literal string
simonp@8304 2543 "<code title>0px</code>".</p>
simonp@8244 2544
simonp@8244 2545 <p>Absolute lengths: the number of millimeters serialized as per
simonp@8304 2546 &lt;number> followed by the literal string "<code title>mm</code>".</p>
simonp@8244 2547 <p class="XXX">Rumor has it absolute lengths will become relative
simonp@8244 2548 lengths. Centimeters would be compatible with &lt;resolution>...</p>
simonp@8244 2549
simonp@8244 2550 <p>Relative lengths: the &lt;number> component serialized as per
simonp@8244 2551 &lt;number> followed by the unit in its canonical form as defined in its
simonp@8244 2552 respective specification.</p>
simonp@8244 2553 </dd>
simonp@8244 2554
simonp@8244 2555 <dt>&lt;number></dt>
simonp@8244 2556 <dd><p class="XXX">Browsers seem to use ToString(), but that might give a
simonp@8244 2557 significand which according to some is teh evil (and also currently does
simonp@8244 2558 not parse correctly).</p></dd>
simonp@8244 2559
simonp@8244 2560 <dt>&lt;percentage></dt>
simonp@8244 2561 <dd><p>The &lt;number> component serialized as per &lt;number> followed
simonp@8304 2562 by the literal string "<code title>%</code>" (U+0025).</p></dd>
simonp@8244 2563
simonp@8244 2564 <dt>&lt;resolution></dt>
simonp@8244 2565 <dd><p>The resolution in dots per centimeter serialized as per
simonp@8304 2566 &lt;number> followed by the literal string "<code title>dpcm</code>".</dd>
simonp@8244 2567
simonp@8244 2568 <dt>&lt;shape></dt>
simonp@8304 2569 <dd><p>The string "<code title>rect(</code>", followed by the result
simonp@8244 2570 of <span title="serialize a comma-separated list">serializing</span> the
simonp@8244 2571 <span title="serialize a CSS component value">serialized</span>
simonp@8244 2572 CSS component values belonging to &lt;shape> as list, followed by
simonp@8304 2573 "<code title>)</code>" (U+0029).</p></dd>
simonp@8244 2574
simonp@8244 2575 <dt>&lt;string></dt>
simonp@8244 2576 <dt>&lt;family-name></dt>
simonp@8244 2577 <dt>&lt;specific-voice></dt>
simonp@8244 2578 <dd><p>The string
simonp@8244 2579 <span title="serialize a string">string escaped</span>.</p></dd>
simonp@8244 2580
simonp@8244 2581 <dt>&lt;time></dt>
simonp@8244 2582 <dd><p>The time in seconds serialized as per &lt;number> followed by
simonp@8304 2583 the literal string "<code title>s</code>".</dd>
simonp@8244 2584
simonp@8244 2585 <dt>&lt;uri></dt>
simonp@8244 2586 <dd><p>The <span data-anolis-spec=url title=concept-absolute-url>absolute URL</span>
simonp@8244 2587 <span title="serialize a URL">URL escaped</span>.</p></dd>
simonp@8244 2588 </dl>
simonp@8244 2589
simonp@8244 2590 <p>
simonp@8244 2591 &lt;absolute-size>,
simonp@8244 2592 &lt;border-width>,
simonp@8244 2593 &lt;border-style>,
simonp@8244 2594 &lt;bottom>,
simonp@8244 2595 &lt;generic-family>,
simonp@8244 2596 &lt;generic-voice>,
simonp@8244 2597 &lt;left>,
simonp@8244 2598 &lt;margin-width>,
simonp@8244 2599 &lt;padding-width>,
simonp@8244 2600 &lt;relative-size>,
simonp@8244 2601 &lt;right>, and
simonp@8244 2602 &lt;top>,
simonp@8244 2603 are considered macros by this specification. They all represent instances
simonp@8244 2604 of components outlined above.</p>
simonp@8244 2605
simonp@8244 2606 <p class="XXX">One idea is that we can remove this section somewhere in
simonp@8244 2607 the CSS3/CSS4 timeline by moving the above definitions to the drafts that
simonp@8244 2608 define the CSS components.</p>
simonp@8244 2609
simonp@8244 2610
simonp@8244 2611 <h5>Examples</h5>
simonp@8244 2612
simonp@8244 2613 <p>Here are some examples of before and after results on specified values.
simonp@8244 2614 The before column could be what the author wrote in a style sheet, while
simonp@8244 2615 the after column shows what querying the DOM would return.</p>
simonp@8244 2616
simonp@8244 2617 <div class="example">
simonp@8244 2618 <table>
simonp@8244 2619 <thead>
simonp@8244 2620 <tr><th>Before<th>After
simonp@8244 2621 <tbody>
simonp@8304 2622 <tr><td><code title>background: none</code><td><code title>background: rgba(0, 0, 0, 0)</code>
simonp@8304 2623 <tr><td><code title>outline: none</code><td><code title>outline: invert</code>
simonp@8304 2624 <tr><td><code title>border: none</code><td><code title>border: medium</code>
simonp@8304 2625 <tr><td><code title>list-style: none</code><td><code title>list-style: disc</code>
simonp@8304 2626 <tr><td><code title>margin: 0 1px 1px 1px</code><td><code title>margin: 0px 1px 1px</code>
simonp@8304 2627 <tr><td><code title>azimuth: behind left</code><td><code title>azimuth: 220deg</code>
simonp@8304 2628 <tr><td><code title>font-family: a, 'b"', serif</code><td><code title>font-family: "a", "b\"", serif</code>
simonp@8304 2629 <tr><td><code title>content: url('h)i') '\[\]'</code><td><code title>content: url("h)i") "[]"</code>
simonp@8304 2630 <tr><td><code title>azimuth: leftwards</code><td><code title>azimuth: leftwards</code>
simonp@8304 2631 <tr><td><code title>color: rgb(18, 52, 86)</code><td><code title>color: #123456</code>
simonp@8304 2632 <tr><td><code title>color: rgba(000001, 0, 0, 1)</code><td><code title>color: #000000</code>
simonp@8244 2633 </table>
simonp@8244 2634
simonp@8244 2635 <p class="XXX">Some of these need to be updated per the new rules.</p>
simonp@8244 2636 </div>
simonp@8244 2637
simonp@8244 2638
simonp@8244 2639 <h2>DOM Access to CSS Declaration Blocks</h2>
simonp@8244 2640
simonp@8244 2641
simonp@8244 2642 <h3>The <code>ElementCSSInlineStyle</code> Interface</h3>
simonp@8226 2643
simonp@8226 2644 <p>The <code>ElementCSSInlineStyle</code> interface provides access to inline style properties of an element.</p>
simonp@8226 2645
simonp@8226 2646 <pre class=idl>[NoInterfaceObject]
simonp@8226 2647 interface <dfn>ElementCSSInlineStyle</dfn> {
simonp@8334 2648 [PutForwards=<span title=dom-CSSStyleDeclaration-cssText>cssText</span>] readonly attribute <span>CSSStyleDeclaration</span> <span title=dom-ElementCSSInlineStyle-style>style</span>;
simonp@8226 2649 };</pre>
simonp@8226 2650
simonp@8226 2651 <p>The <dfn title=dom-ElementCSSInlineStyle-style><code>style</code></dfn> attribute must return a <span>CSS declaration block</span> with the
simonp@8305 2652 <span title=concept-css-declaration-block-declarations>declarations</span> being set to the declarations
simonp@8226 2653 specified in the element's <code title>style</code> content attribute. If the
simonp@8226 2654 <code title>style</code> content attribute is absent, the object represents an empty
simonp@8226 2655 declaration. Mutating the <code>CSSStyleDeclaration</code> object must set the
simonp@8226 2656 <code title>style</code> content attribute on the element to the
simonp@8226 2657 <span title='serialize a CSS declaration block'>serialization</span> of the
simonp@8305 2658 <code>CSSStyleDeclaration</code>'s <span title=concept-css-declaration-block-declarations>declarations</span>.
simonp@8333 2659 The same object must be returned each time. The object is live; if the
simonp@8327 2660 <code title>style</code> content attribute is set, changed or removed, the <span title=concept-css-declaration-block-declarations>declarations</span> must be
simonp@8327 2661 updated as appropriate.</p>
simonp@8226 2662
simonp@8371 2663 <p>If the user agent supports HTML, the following IDL applies: <span data-anolis-ref class=informative>HTML</span>
simonp@8371 2664
simonp@8371 2665 <pre class=idl><span data-anolis-spec=html>HTMLElement</span> implements <span>ElementCSSInlineStyle</span>;</pre>
simonp@8371 2666
simonp@8371 2667 <p>If the user agent supports SVG, the following IDL applies: <span data-anolis-ref class=informative>SVG</span>
simonp@8371 2668
simonp@8371 2669 <pre class=idl>SVGElement implements <span>ElementCSSInlineStyle</span>;</pre>
simonp@8226 2670
simonp@8226 2671
simonp@8244 2672 <h3>Extensions to the <code title>Window</code> Interface</h3>
simonp@8226 2673
simonp@8226 2674 <pre class=idl>partial interface <span data-anolis-spec=html>Window</span> {
simonp@8335 2675 <span>CSSStyleDeclaration</span> <span title=dom-Window-getComputedStyle>getComputedStyle</span>(<span data-anolis-spec=dom>Element</span> elt, <!--
simonp@8335 2676 -->optional DOMString pseudoElt);
simonp@8226 2677 };</pre>
simonp@8226 2678
simonp@8304 2679 <p>The <dfn title=dom-Window-getComputedStyle><code>getComputedStyle(<var title>elt</var>, <var title>pseudoElt</var>)</code></dfn> method must run these
simonp@8304 2680 steps:</p>
simonp@8226 2681 <ol>
simonp@8289 2682 <li><p>Let <var title>doc</var> be the
simonp@8226 2683 <code data-anolis-spec=dom>Document</code>
simonp@8226 2684 associated with the <code data-anolis-spec=html>Window</code> object on
simonp@8226 2685 which the method was invoked.</p></li>
simonp@8289 2686 <li><p>Let <var title>obj</var> be <var title>elt</var>.</p></li>
simonp@8289 2687 <li><p>If <var title>pseudoElt</var> is as an
simonp@8226 2688 <span data-anolis-spec=dom>ASCII case-insensitive</span> match for
simonp@8346 2689 either ':before' or '::before' let
simonp@8329 2690 <var title>obj</var> be the <span>::before pseudo-element</span> of
simonp@8289 2691 <var title>elt</var>.</p></li>
simonp@8289 2692 <li><p>If <var title>pseudoElt</var> is as an
simonp@8226 2693 <span data-anolis-spec=dom>ASCII case-insensitive</span> match for
simonp@8346 2694 either ':after' or '::after' let
simonp@8329 2695 <var title>obj</var> be the <span>::after pseudo-element</span> of
simonp@8289 2696 <var title>elt</var>.</p></li>
simonp@8226 2697 <li>
simonp@8226 2698 <p>Return a <span>CSS declaration block</span> with the
simonp@8305 2699 <span title=concept-css-declaration-block-readonly-flag>readonly flag</span> set and the
simonp@8305 2700 <span title=concept-css-declaration-block-declarations>declarations</span> set to all properties
simonp@8328 2701 the user agent supports with the value being the <span>resolved value</span>
simonp@8289 2702 computed for <var title>obj</var> using the style rules associated
simonp@8289 2703 with <var title>doc</var>.</p>
simonp@8289 2704 <p class='note'>This means that even if <var title>obj</var> is in a
simonp@8304 2705 different document (e.g. one fetched via <code title>XMLHttpRequest</code>) it
simonp@8226 2706 will still use the style rules associated with the document that is
simonp@8226 2707 associated with the global object on which
simonp@8226 2708 <code title='dom-Window-getComputedStyle'>getComputedStyle()</code> was
simonp@8226 2709 invoked to compute the <span>CSS declaration block</span>.</p>
simonp@8226 2710 </li>
simonp@8226 2711 </ol>
simonp@8226 2712 <p class='note'>Because of historical IDL limitations the <code title=dom-Window-getComputedStyle>getComputedStyle()</code> method used to be on
simonp@8304 2713 a separate interface, <code title>ViewCSS</code>.</p>
simonp@8226 2714
simonp@8226 2715
simonp@8226 2716
simonp@8244 2717 <h3>The <code title>GetStyleUtils</code> Interface</h3>
simonp@8226 2718
simonp@8289 2719 <p>The <dfn>associated document</dfn> of an object <var title>obj</var> is <var title>obj</var>'s <span data-anolis-spec=dom title=concept-node-document>node
simonp@8304 2720 document</span> if <var title>obj</var> is an <code data-anolis-spec=dom>Element</code> object, or <var title>obj</var>'s associated
simonp@8304 2721 <code data-anolis-spec=dom>Element</code> object's <span data-anolis-spec=dom title=concept-node-document>node document</span> if <var title>obj</var> is a
simonp@8304 2722 <code>PseudoElement</code> object.</p>
simonp@8226 2723
simonp@8226 2724 <pre class=idl>[NoInterfaceObject]
simonp@8226 2725 interface <dfn>GetStyleUtils</dfn> {
simonp@8226 2726 readonly attribute <span>CSSStyleDeclaration</span> <span title=dom-GetStyleUtils-specifiedStyle>specifiedStyle</span>;
simonp@8226 2727 readonly attribute <span>CSSStyleDeclaration</span> <span title=dom-GetStyleUtils-defaultStyle>defaultStyle</span>;
simonp@8226 2728 readonly attribute <span>CSSStyleDeclaration</span> <span title=dom-GetStyleUtils-computedStyle>computedStyle</span>;
simonp@8226 2729 readonly attribute <span>CSSStyleDeclaration</span> <span title=dom-GetStyleUtils-usedStyle>usedStyle</span>;
simonp@8226 2730 };</pre>
simonp@8226 2731
simonp@8336 2732 <p class=atrisk>The <dfn title=dom-GetStyleUtils-specifiedStyle><code>specifiedStyle</code></dfn> attribute must return a <span>CSS declaration block</span>
simonp@8336 2733 with the <span title=concept-css-declaration-block-readonly-flag>readonly flag</span> set and the
simonp@8305 2734 <span title=concept-css-declaration-block-declarations>declarations</span> set to all properties
simonp@8328 2735 the user agent supports with the value being the <span>specified value</span>
simonp@8226 2736 computed for the <span data-anolis-spec=dom>context object</span> using the style rules associated
simonp@8226 2737 with the <span data-anolis-spec=dom>context object</span>'s <span>associated document</span>.</p>
simonp@8226 2738
simonp@8336 2739 <p class=atrisk>The <dfn title=dom-GetStyleUtils-defaultStyle><code>defaultStyle</code></dfn> attribute must return a <span>CSS declaration block</span> with
simonp@8336 2740 the <span title=concept-css-declaration-block-readonly-flag>readonly flag</span> set and the
simonp@8328 2741 <span title=concept-css-declaration-block-declarations>declarations</span> set to all properties the user agent supports with the value being the <span>computed
simonp@8305 2742 value</span> computed for the <span data-anolis-spec=dom>context object</span> using the user agent-level style rules and user-level style rules associated with
simonp@8305 2743 the <span data-anolis-spec=dom>context object</span>'s <span>associated document</span>, ignoring transitions, animations, author-level style
simonp@8226 2744 rules, author-level presentational hints and override-level style rules.</p>
simonp@8226 2745
simonp@8336 2746 <p class=atrisk>The <dfn title=dom-GetStyleUtils-computedStyle><code>computedStyle</code></dfn> attribute must return a <span>CSS declaration block</span> with
simonp@8336 2747 the <span title=concept-css-declaration-block-readonly-flag>readonly flag</span> set and the
simonp@8305 2748 <span title=concept-css-declaration-block-declarations>declarations</span> set to all properties
simonp@8328 2749 the user agent supports with the value being the <span>computed value</span>
simonp@8226 2750 computed for the <span data-anolis-spec=dom>context object</span> using the style rules associated
simonp@8226 2751 with the <span data-anolis-spec=dom>context object</span>'s <span>associated document</span>.</p>
simonp@8226 2752
simonp@8336 2753 <p class=atrisk>The <dfn title=dom-GetStyleUtils-usedStyle><code>usedStyle</code></dfn> attribute must return a <span>CSS declaration block</span> with the
simonp@8305 2754 <span title=concept-css-declaration-block-readonly-flag>readonly flag</span> set and the
simonp@8305 2755 <span title=concept-css-declaration-block-declarations>declarations</span> set to all properties
simonp@8328 2756 the user agent supports with the value being the <span>used value</span>
simonp@8226 2757 computed for the <span data-anolis-spec=dom>context object</span> using the style rules associated
simonp@8226 2758 with the <span data-anolis-spec=dom>context object</span>'s <span>associated document</span>.</p>
simonp@8226 2759
simonp@8226 2760
simonp@8226 2761
simonp@8244 2762 <h3>Extensions to the <code title>Element</code> Interface</h3>
simonp@8226 2763
simonp@8226 2764 <pre class=idl>partial interface <span data-anolis-spec=dom>Element</span> {
simonp@8226 2765 <span>PseudoElement</span>? <span title=dom-Element-pseudo>pseudo</span>(DOMString pseudoElt);
simonp@8226 2766 };
simonp@8226 2767
simonp@8226 2768 <span data-anolis-spec=dom>Element</span> implements <span>GetStyleUtils</span>;</pre>
simonp@8226 2769
simonp@8336 2770 <p class=atrisk>The <dfn title=dom-Element-pseudo><code>pseudo(<var title>pseudoElt</var>)</code></dfn> method, when invoked, must run the following steps:
simonp@8226 2771 <ol>
simonp@8346 2772 <li><p>If <var title>pseudoElt</var> is as an <span data-anolis-spec=dom>ASCII case-insensitive</span> match for either ':before' or
simonp@8346 2773 '::before' return the <code>PseudoElement</code> representing the <span>::before pseudo-element</span> of the
simonp@8329 2774 <span data-anolis-spec=dom>context object</span>.</p></li>
simonp@8346 2775 <li><p>If <var title>pseudoElt</var> is as an <span data-anolis-spec=dom>ASCII case-insensitive</span> match for either ':after' or
simonp@8346 2776 '::after' return the <code>PseudoElement</code> representing the <span>::after pseudo-element</span> of the
simonp@8329 2777 <span data-anolis-spec=dom>context object</span>.</p></li>
simonp@8226 2778 <li><p>Return null.</p></li>
simonp@8226 2779 </ol>
simonp@8226 2780 <p>When invoked with an argument that returns a <code>PseudoElement</code> object representing a particular pseudo-element, the same object must be
simonp@8226 2781 returned as returned by an earlier call that represent the same pseudo-element.</p>
simonp@8226 2782
simonp@8226 2783
simonp@8226 2784
simonp@8244 2785 <h3>The <code title>PseudoElement</code> Interface</h3>
simonp@8226 2786
simonp@8336 2787 <p class=atrisk>The <code>PseudoElement</code> interface is used for representing CSS pseudo-elements. A <code>PseudoElement</code> object is associated with an
simonp@8304 2788 <code data-anolis-spec=dom>Element</code> object.</p>
simonp@8226 2789
simonp@8226 2790 <pre class=idl>interface <dfn>PseudoElement</dfn> {
simonp@8226 2791 };
simonp@8226 2792
simonp@8226 2793 <span>PseudoElement</span> implements <span>GetStyleUtils</span>;</pre>
simonp@8226 2794
simonp@8226 2795
simonp@8244 2796 <h2>Resolved Values</h2>
simonp@8244 2797
simonp@8244 2798 <p><code title="dom-Window-getComputedStyle">getComputedStyle()</code> was
simonp@8244 2799 historically defined to return the "computed value" of an element or
simonp@8244 2800 pseudo-element. However, the concept of "computed value" changed between
simonp@8244 2801 revisions of CSS while the implementation of
simonp@8244 2802 <code title="dom-Window-getComputedStyle">getComputedStyle()</code> had to
simonp@8244 2803 remain the same for compatibility with deployed scripts. To address this
simonp@8244 2804 issue this specification introduces the concept of a
simonp@8244 2805 <dfn>resolved value</dfn>.</p>
simonp@8244 2806
simonp@8244 2807 <p>The <span>resolved value</span> for a given property can be determined
simonp@8244 2808 as follows:</p>
simonp@8244 2809
simonp@8244 2810 <dl class="switch">
simonp@8244 2811 <!--
simonp@8244 2812 We want to treat shorthand properties like any other value basically.
simonp@8244 2813
simonp@8346 2814 <dt>'background'
simonp@8346 2815 <dt>'border'
simonp@8346 2816 <dt>'border-collapse'
simonp@8346 2817 <dt>'border-color'
simonp@8346 2818 <dt>'border-spacing'
simonp@8346 2819 <dt>'border-style'
simonp@8346 2820 <dt>'border-top'
simonp@8346 2821 <dt>'border-right'
simonp@8346 2822 <dt>'border-bottom'
simonp@8346 2823 <dt>'border-left'
simonp@8346 2824 <dt>'border-width'
simonp@8346 2825 <dt>'font'
simonp@8346 2826 <dt>'list-style'
simonp@8346 2827 <dt>'margin'
simonp@8346 2828 <dt>'outline'
simonp@8244 2829 <!- - overflow is not - ->
simonp@8346 2830 <dt>'padding'
simonp@8346 2831 <dt>'pause'
simonp@8244 2832 <dd>
simonp@8244 2833 <p>There is no <span>resolved value</span>.</p>
simonp@8244 2834 </dd>
simonp@8244 2835 -->
simonp@8244 2836
simonp@8346 2837 <dt>'line-height'</dt>
simonp@8327 2838 <dd><p>The <span>resolved value</span> is the <span>used value</span>.</p></dd>
simonp@8244 2839
simonp@8346 2840 <dt>'height'</dt>
simonp@8346 2841 <dt>'margin'</dt>
simonp@8346 2842 <dt>'margin-bottom'</dt>
simonp@8346 2843 <dt>'margin-left'</dt>
simonp@8346 2844 <dt>'margin-right'</dt>
simonp@8346 2845 <dt>'margin-top'</dt>
simonp@8346 2846 <dt>'padding'</dt>
simonp@8346 2847 <dt>'padding-bottom'</dt>
simonp@8346 2848 <dt>'padding-left'</dt>
simonp@8346 2849 <dt>'padding-right'</dt>
simonp@8346 2850 <dt>'padding-top'</dt>
simonp@8346 2851 <dt>'width'</dt>
simonp@8244 2852 <dd><p>If the property applies to the element or pseudo-element and the
simonp@8346 2853 <span>resolved value</span> of the 'display' property is not
simonp@8346 2854 'none', the <span>resolved value</span> is the
simonp@8244 2855 <span>used value</span>. Otherwise the <span>resolved value</span> is the
simonp@8327 2856 <span>computed value</span>.</p></dd>
simonp@8244 2857
simonp@8346 2858 <dt>'bottom'</dt>
simonp@8346 2859 <dt>'left'</dt>
simonp@8346 2860 <dt>'right'</dt>
simonp@8346 2861 <dt>'top'</dt>
simonp@8244 2862 <dd><p>If the property applies to a positioned element and the
simonp@8346 2863 <span>resolved value</span> of the 'display' property is not
simonp@8346 2864 'none', the <span>resolved value</span> is the
simonp@8244 2865 <span>used value</span>. Otherwise the <span>resolved value</span> is the
simonp@8244 2866 computed value.</p></dd>
simonp@8244 2867
simonp@8244 2868 <dt>Any other property</dt>
simonp@8327 2869 <dd><p>The <span>resolved value</span> is the <span>computed value</span>.</p></dd>
simonp@8244 2870 </dl>
simonp@8244 2871
simonp@8244 2872
simonp@8244 2873 <h2>IANA Considerations</h2>
simonp@8244 2874
simonp@8244 2875
simonp@8244 2876 <h3><dfn title="http-default-style"><code>Default-Style</code></dfn></h3>
simonp@8244 2877
simonp@8244 2878 <p>This section describes a header field for registration in the Permanent
simonp@8244 2879 Message Header Field Registry.
simonp@8244 2880 <!--<a href="XXX">[RFC3864]</a>--></p>
simonp@8244 2881
simonp@8244 2882 <dl>
simonp@8244 2883 <dt>Header field name</dt>
simonp@8244 2884 <dd>Default-Style</dd>
simonp@8244 2885 <dt>Applicable protocol</dt>
simonp@8244 2886 <dd>http</dd>
simonp@8244 2887 <dt>Status</dt>
simonp@8244 2888 <dd>standard</dd>
simonp@8244 2889 <dt>Author/Change controller</dt>
simonp@8244 2890 <dd>W3C</dd>
simonp@8244 2891 <dt>Specification document(s)</dt>
simonp@8244 2892 <dd>This document is the relevant specification.</dd>
simonp@8244 2893 <dt>Related information</dt>
simonp@8244 2894 <dd>None.</dd>
simonp@8244 2895 </dl>
simonp@8244 2896
simonp@8244 2897
simonp@8244 2898 <h2 class=no-num>References</h2>
simonp@8244 2899
simonp@8244 2900 <div id=anolis-references></div>
simonp@8244 2901
simonp@8244 2902
simonp@8244 2903 <h2 class="no-num">Change History</h2>
simonp@8244 2904
simonp@8244 2905 <p>This section documents the primary technical changes of CSSOM related functionality, with a focus on changes to API signatures.</p>
simonp@8244 2906
simonp@8244 2907 <h3 class="no-num">Changes From DOM-2 Style</h3>
simonp@8244 2908
simonp@8244 2909 <ul>
simonp@8304 2910 <li><p>Remove definition of <code title>CSSRule.UNKNOWN_RULE</code>, reserving its value (0) to prevent future reuse.</p></li>
simonp@8304 2911 <li><p>Remove definition of <code title>DOMImplementationCSS</code> interface.</p></li>
simonp@8244 2912 </ul>
simonp@8244 2913
simonp@8244 2914
simonp@8244 2915 <h2 class="no-num">Acknowledgments</h2>
simonp@8244 2916
simonp@8244 2917 <p>The editors would like to thank
simonp@8244 2918
simonp@8244 2919 Alexey Feldgendler,
simonp@8244 2920 Bj&ouml;rn H&ouml;hrmann,
simonp@8244 2921 Boris Zbasky,
simonp@8244 2922 Brian Kardell,
simonp@8244 2923 Christian Krebs,
simonp@8244 2924 Daniel Glazman,
simonp@8244 2925 David Baron,
simonp@8244 2926 <i>fantasai</i>,
simonp@8244 2927 Hallvord R. M. Steen,
simonp@8244 2928 Ian Hickson,
simonp@8244 2929 John Daggett,
simonp@8244 2930 Lachlan Hunt,
simonp@8244 2931 Morten Stenshorne,
simonp@8244 2932 Philip Taylor,
simonp@8244 2933 Robert O'Callahan,
simonp@8244 2934 Sjoerd Visscher,
simonp@8244 2935 <!--Simon Pieters,-->
simonp@8244 2936 Sylvain Galineau,
simonp@8244 2937 Tarquin Wilton-Jones, and
simonp@8244 2938 Zack Weinberg
simonp@8244 2939
simonp@8244 2940 for contributing to this specification.</p>
simonp@8244 2941
simonp@8244 2942 <p>Additional thanks to Ian Hickson for writing the
simonp@8244 2943 initial version of the alternative style sheets API and canonicalization
simonp@8244 2944 (now serialization) rules for CSS values.</p>
simonp@8244 2945
simonp@8244 2946 <!-- XXX NOTES
simonp@8244 2947
simonp@8244 2948 <style type=text/css;charset=utf-8> does create a StyleSheet in Firefox
simonp@8244 2949 and Opera, but does not create a StyleSheet in IE. I prefer IE.
simonp@8244 2950
simonp@8244 2951 <style type=TEXT/CSS> sets the style sheet type to text/css in Firefox and
simonp@8244 2952 TEXT/CSS in Opera and IE. I prefer Firefox.
simonp@8244 2953
simonp@8244 2954 <style> sets the style sheet location to the document location Firefox,
simonp@8244 2955 the empty string in IE, and null in Opera. I prefer Opera
simonp@8244 2956
simonp@8244 2957 <style media="x"> invokes .sheet.media.mediaText = "x"
simonp@8244 2958
simonp@8244 2959 <style> does not "have" a title
simonp@8244 2960
simonp@8244 2961 .cascadedStyle that returns less keywords than currentStyle, no inherit,
simonp@8244 2962 etc.
simonp@8244 2963
simonp@8244 2964 Markup style: http://krijnhoetmer.nl/irc-logs/whatwg/20100204#l-529
simonp@8244 2965 -->
simonp@8226 2966 </body>
simonp@8226 2967 </html>
simonp@8226 2968

mercurial