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