cssom/Overview.html

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

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

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

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

mercurial