cssom/Overview.src.html

Thu, 24 Apr 2014 11:45:59 -0700

author
Tab Atkins Jr. <jackalmage@gmail.com>
date
Thu, 24 Apr 2014 11:45:59 -0700
changeset 13800
fadb766ee5aa
parent 13690
06daf28b2fa7
child 13809
6c774b276720
permissions
-rw-r--r--

[css-grid] Rename Grid Layout Algorithm, move the intrinsic sizing section around.

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

mercurial