changeset
[css-syntax] Add an issue about missing the 'n- 5' cases for an+b.
Fri, 09 Aug 2013 10:34:13 -0700
- author
- Tab Atkins Jr. <jackalmage@gmail.com>
- date
- Fri, 09 Aug 2013 10:34:13 -0700
- changeset 8796
- 30e02b0e2042
- parent 8795
- 196c3a2e937a
- child 8797
- dc9599d772f2
[css-syntax] Add an issue about missing the 'n- 5' cases for an+b.
1.1 --- a/css-images/Overview.html Fri Aug 09 14:37:49 2013 +0200 1.2 +++ b/css-images/Overview.html Fri Aug 09 10:34:13 2013 -0700 1.3 @@ -1,450 +1,218 @@ 1.4 -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> 1.5 - 1.6 -<html lang=en> 1.7 - <head 1.8 - profile="http://dublincore.org/documents/2008/08/04/dc-html/ http://www.w3.org/2006/03/hcard"> 1.9 +<!DOCTYPE html><html lang=en><head> 1.10 <meta content="text/html; charset=utf-8" http-equiv=Content-Type> 1.11 <title>CSS Image Values and Replaced Content Module Level 4</title> 1.12 - 1.13 - <link href="http://purl.org/dc/terms/" rel=schema.dc> 1.14 - <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 1.15 - rel=dc.rights> 1.16 - <meta content="CSS Image Values and Replaced Content Module Level 4" 1.17 - name=dc.title> 1.18 - <meta content=text name=dc.type> 1.19 - <meta content=2013-04-11 name=dc.date> 1.20 - <meta content="Elika J. Etemad" name=dc.creator> 1.21 - <meta content="Tab Atkins Jr." name=dc.creator> 1.22 - <meta content=W3C name=dc.publisher> 1.23 - <meta content="http://dev.w3.org/csswg/css4-images/" name=dc.identifier> 1.24 - <link href="../default.css" rel=stylesheet type="text/css"> 1.25 - <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon"> 1.26 - <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet 1.27 - type="text/css"> 1.28 - 1.29 - <body> 1.30 - <div class=head> <!--begin-logo--> 1.31 - <p><a href="http://www.w3.org/"><img alt=W3C height=48 1.32 - src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo--> 1.33 - 1.34 - <h1>CSS Image Values and Replaced Content Module Level 4</h1> 1.35 - 1.36 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 11 April 2013</h2> 1.37 - 1.38 - <dl> 1.39 - <dt>This Version: 1.40 - 1.41 - <dd><a 1.42 - href="http://dev.w3.org/csswg/css4-images/">http://dev.w3.org/csswg/css4-images/</a> 1.43 - <!-- <dd><a href="http://dev.w3.org/csswg/css4-images/">http://www.w3.org/TR/2013/WD-css4-images-20130411/</a>--> 1.44 - 1.45 - <dt>Latest Version: 1.46 - 1.47 - <dd><a 1.48 - href="http://www.w3.org/TR/css4-images/">http://www.w3.org/TR/css4-images/</a> 1.49 - 1.50 - <dt>Editor's Draft: 1.51 - 1.52 - <dd><a 1.53 - href="http://dev.w3.org/csswg/css4-images/">http://dev.w3.org/csswg/css4-images/</a> 1.54 - 1.55 - <dt>Previous Version: 1.56 - 1.57 - <dd><a 1.58 - href="http://www.w3.org/TR/2012/WD-css4-images-20120911/">http://www.w3.org/TR/2012/WD-css4-images-20120911/</a> 1.59 - 1.60 - <dt>Issue Tracking: 1.61 - 1.62 - <dd><a 1.63 - href="http://www.w3.org/Style/CSS/Tracker/products/27">http://www.w3.org/Style/CSS/Tracker/products/27</a> 1.64 - 1.65 - <dt>Feedback: 1.66 - 1.67 - <dd><a 1.68 - href="mailto:www-style@w3.org?subject=%5Bcss-images%5D%20feedback">www-style@w3.org</a> 1.69 - with subject line “<kbd>[css-images] <var>… message topic 1.70 - …</var></kbd>” (<a 1.71 - href="http://lists.w3.org/Archives/Public/www-style/" 1.72 - rel=discussion>archives</a>) 1.73 - 1.74 - <dt>Editors: 1.75 - 1.76 - <dd class=vcard> <a class="url fn" 1.77 - href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a> (<span 1.78 - class=org>Mozilla</span>) 1.79 - 1.80 - <dd class=vcard> <a class="url fn" 1.81 - href="http://www.xanthir.com/contact/">Tab Atkins Jr.</a> (<span 1.82 - class=org>Google</span>) 1.83 - </dl> 1.84 - <!--begin-copyright--> 1.85 - <p class=copyright><a 1.86 - href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 1.87 - rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr 1.88 - title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a 1.89 - href="http://www.csail.mit.edu/"><abbr 1.90 - title="Massachusetts Institute of Technology">MIT</abbr></a>, <a 1.91 - href="http://www.ercim.eu/"><abbr 1.92 - title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, 1.93 - <a href="http://www.keio.ac.jp/">Keio</a>, <a 1.94 - href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a 1.95 - href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, 1.96 - <a 1.97 - href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> 1.98 - and <a 1.99 - href="http://www.w3.org/Consortium/Legal/copyright-documents">document 1.100 - use</a> rules apply.</p> 1.101 - <!--end-copyright--> 1.102 - <hr title="Separator for header"> 1.103 - </div> 1.104 - <details class=obsolete open=open> <summary>Not Ready For 1.105 - Implementation</summary> 1.106 - <p> This spec is not yet ready for implementation. It exists in this 1.107 - repository to record the ideas and promote discussion. 1.108 - 1.109 - <p> Before attempting to implement this spec, please contact the CSSWG at 1.110 - www-style@w3.org. 1.111 - </details> 1.112 - <h2 class="no-num no-toc" id=abstract>Abstract</h2> 1.113 - 1.114 - <p> CSS is a language for describing the rendering of structured documents 1.115 - (such as HTML and XML) on screen, on paper, in speech, etc. This module 1.116 - contains the features of CSS level 4 relating to the <a 1.117 - href="#image-type"><var><image></var></a> type and replaced elements. 1.118 - It includes and extends the functionality of CSS Image Values and Replaced 1.119 - Content Module Level 3. The main extensions compared to level 3 are 1.120 - several additions to the ‘<a href="#image-type"><code 1.121 - class=css><image></code></a>’ type, additions to the ‘<a 1.122 - href="#gradient-type"><code class=css><gradient></code></a>’ type, 1.123 - extentions to the ‘<code class=css>image()</code>’ function, 1.124 - definitions for interpolating several ‘<a href="#image-type"><code 1.125 - class=css><image></code></a>’ types, and several properties 1.126 - controlling the interaction of replaced elements and CSS's layout models. 1.127 - 1.128 - <h2 class="no-num no-toc" id=status>Status of this document</h2> 1.129 - <!--begin-status--> 1.130 - 1.131 - <p>This is a public copy of the editors' draft. It is provided for 1.132 - discussion only and may change at any moment. Its publication here does 1.133 - not imply endorsement of its contents by W3C. Don't cite this document 1.134 - other than as work in progress. 1.135 - 1.136 - <p>The (<a 1.137 - href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public 1.138 - mailing list <a 1.139 - href="mailto:www-style@w3.org?Subject=%5Bcss4-images%5D%20PUT%20SUBJECT%20HERE"> 1.140 - www-style@w3.org</a> (see <a 1.141 - href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for 1.142 - discussion of this specification. When sending e-mail, please put the text 1.143 - “css4-images” in the subject, preferably like this: 1.144 - “[<!---->css4-images<!---->] <em>…summary of comment…</em>” 1.145 - 1.146 - <p>This document was produced by the <a 1.147 - href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of 1.148 - the <a href="http://www.w3.org/Style/">Style Activity</a>). 1.149 - 1.150 - <p>This document was produced by a group operating under the <a 1.151 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 1.152 - 2004 W3C Patent Policy</a>. W3C maintains a <a 1.153 - href="http://www.w3.org/2004/01/pp-impl/32061/status" 1.154 - rel=disclosure>public list of any patent disclosures</a> made in 1.155 - connection with the deliverables of the group; that page also includes 1.156 - instructions for disclosing a patent. An individual who has actual 1.157 - knowledge of a patent which the individual believes contains <a 1.158 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential 1.159 - Claim(s)</a> must disclose the information in accordance with <a 1.160 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 1.161 - 6 of the W3C Patent Policy</a>.</p> 1.162 - <!--end-status--> 1.163 - 1.164 - <h2 class="no-num no-toc" id=contents>Table of contents</h2> 1.165 - <!--begin-toc--> 1.166 - 1.167 - <ul class=toc> 1.168 - <li><a href="#intro"><span class=secno>1. </span> Introduction</a> 1.169 - <ul class=toc> 1.170 - <li><a href="#placement"><span class=secno>1.1. </span> Module 1.171 - Interactions</a> 1.172 - 1.173 - <li><a href="#values"><span class=secno>1.2. </span> Values</a> 1.174 - </ul> 1.175 - 1.176 - <li><a href="#planned-features"><span class=secno>2. </span>Planned 1.177 - Features</a> 1.178 - 1.179 - <li><a href="#image-values"><span class=secno>3. </span> Image Values: the 1.180 - <var><image></var> type</a> 1.181 - <ul class=toc> 1.182 - <li><a href="#url-notation"><span class=secno>3.1. </span> Image 1.183 - References and Image Slices: the ‘<code class=css><url></code>’ 1.184 - type and ‘<code class=css>url()</code>’ notation</a> 1.185 - 1.186 - <li><a href="#image-notation"><span class=secno>3.2. </span> Image 1.187 - Fallbacks and Annotations: the ‘<code class=css>image()</code>’ 1.188 - notation</a> 1.189 - <ul class=toc> 1.190 - <li><a href="#image-fragments"><span class=secno>3.2.1. </span> Image 1.191 - Fragments</a> 1.192 - 1.193 - <li><a href="#image-fallbacks"><span class=secno>3.2.2. </span> Image 1.194 - Fallbacks</a> 1.195 - 1.196 - <li><a href="#color-images"><span class=secno>3.2.3. </span> 1.197 - Solid-color Images</a> 1.198 - 1.199 - <li><a href="#bidi-images"><span class=secno>3.2.4. </span> 1.200 - Bidi-sensitive Images</a> 1.201 - </ul> 1.202 - 1.203 - <li><a href="#image-set-notation"><span class=secno>3.3. </span> 1.204 - Resolution Negotiation: the ‘<code class=css>image-set()</code>’ 1.205 - notation</a> 1.206 - 1.207 - <li><a href="#element-notation"><span class=secno>3.4. </span> Using 1.208 - Elements as Images: the ‘<code class=css>element()</code>’ 1.209 - notation</a> 1.210 - <ul class=toc> 1.211 - <li><a href="#paint-sources"><span class=secno>3.4.1. </span> Paint 1.212 - Sources</a> 1.213 - 1.214 - <li><a href="#element-cycles"><span class=secno>3.4.2. </span> Cycle 1.215 - Detection</a> 1.216 - </ul> 1.217 - 1.218 - <li><a href="#cross-fade-function"><span class=secno>3.5. </span> 1.219 - Combining images: the ‘<code class=css>cross-fade()</code>’ 1.220 - notation</a> 1.221 - </ul> 1.222 - 1.223 - <li><a href="#gradients"><span class=secno>4. </span> Gradients</a> 1.224 - <ul class=toc> 1.225 - <li><a href="#linear-gradients"><span class=secno>4.1. </span> Linear 1.226 - Gradients: the ‘<code class=css>linear-gradient()</code>’ 1.227 - notation</a> 1.228 - 1.229 - <li><a href="#radial-gradients"><span class=secno>4.2. </span> Radial 1.230 - Gradients: the ‘<code class=css>radial-gradient()</code>’ 1.231 - notation</a> 1.232 - 1.233 - <li><a href="#conic-gradients"><span class=secno>4.3. </span> Conic 1.234 - Gradients: the ‘<code class=css>conic-gradient()</code>’ 1.235 - notation</a> 1.236 - 1.237 - <li><a href="#repeating-gradients"><span class=secno>4.4. </span> 1.238 - Repeating Gradients: the ‘<code 1.239 - class=css>repeating-linear-gradient()</code>’, ‘<code 1.240 - class=css>repeating-radial-gradient()</code>’, and ‘<code 1.241 - class=css>repeating-conic-gradient()</code>’ notations</a> 1.242 - 1.243 - <li><a href="#color-stop-syntax"><span class=secno>4.5. </span> Gradient 1.244 - Color-Stops</a> 1.245 - </ul> 1.246 - 1.247 - <li><a href="#sizing"><span class=secno>5. </span> Sizing Images and 1.248 - Objects in CSS</a> 1.249 - <ul class=toc> 1.250 - <li><a href="#sizing-terms"><span class=secno>5.1. </span> Object-Sizing 1.251 - Terminology</a> 1.252 - 1.253 - <li><a href="#object-negotiation"><span class=secno>5.2. </span> 1.254 - CSS⇋Object Negotiation</a> 1.255 - 1.256 - <li><a href="#concrete-size-resolution"><span class=secno>5.3. </span> 1.257 - Concrete Object Size Resolution</a> 1.258 - <ul class=toc> 1.259 - <li><a href="#default-sizing"><span class=secno>5.3.1. </span> Default 1.260 - Sizing Algorithm</a> 1.261 - 1.262 - <li><a href="#cover-contain"><span class=secno>5.3.2. </span> Cover 1.263 - and Contain Constraint Sizing</a> 1.264 - </ul> 1.265 - 1.266 - <li><a href="#object-sizing-examples"><span class=secno>5.4. </span> 1.267 - Examples of CSS Object Sizing</a> 1.268 - 1.269 - <li><a href="#the-object-fit"><span class=secno>5.5. </span> Sizing 1.270 - Objects: the ‘<code class=property>object-fit</code>’ property</a> 1.271 - 1.272 - <li><a href="#the-object-position"><span class=secno>5.6. </span> 1.273 - Positioning Objects: the ‘<code 1.274 - class=property>object-position</code>’ property</a> 1.275 - </ul> 1.276 - 1.277 - <li><a href="#image-processing"><span class=secno>6. </span> Image 1.278 - Processing</a> 1.279 - <ul class=toc> 1.280 - <li><a href="#the-image-resolution"><span class=secno>6.1. </span> 1.281 - Overriding Image Resolutions: the ‘<code 1.282 - class=property>image-resolution</code>’ property</a> 1.283 - 1.284 - <li><a href="#the-image-orientation"><span class=secno>6.2. </span> 1.285 - Orienting an Image on the Page: the ‘<code 1.286 - class=property>image-orientation</code>’ property</a> 1.287 - 1.288 - <li><a href="#the-image-rendering"><span class=secno>6.3. </span> 1.289 - Determing How To Scale an Image: the ‘<code 1.290 - class=property>image-rendering</code>’ property</a> 1.291 - </ul> 1.292 - 1.293 - <li><a href="#interpolation"><span class=secno>7. </span> 1.294 - Interpolation</a> 1.295 - <ul class=toc> 1.296 - <li><a href="#interpolating-images"><span class=secno>7.1. </span> 1.297 - Interpolating <var><image></var></a> 1.298 - 1.299 - <li><a href="#interpolating-image-combinations"><span class=secno>7.2. 1.300 - </span> Interpolating <var><image-combination></var></a> 1.301 - 1.302 - <li><a href="#interpolating-gradients"><span class=secno>7.3. </span> 1.303 - Interpolating <var><gradient></var></a> 1.304 - </ul> 1.305 - 1.306 - <li><a href="#serialization"><span class=secno>8. </span> 1.307 - Serialization</a> 1.308 - 1.309 - <li><a href="#changes"><span class=secno>9. </span> Changes since Images 1.310 - 3</a> 1.311 - 1.312 - <li><a href="#conformance"><span class=secno>10. </span> Conformance</a> 1.313 - <ul class=toc> 1.314 - <li><a href="#conventions"><span class=secno>10.1. </span> Document 1.315 - Conventions</a> 1.316 - 1.317 - <li><a href="#conformance-classes"><span class=secno>10.2. </span> 1.318 - Conformance Classes</a> 1.319 - 1.320 - <li><a href="#partial"><span class=secno>10.3. </span> Partial 1.321 - Implementations</a> 1.322 - 1.323 - <li><a href="#experimental"><span class=secno>10.4. </span> Experimental 1.324 - Implementations</a> 1.325 - 1.326 - <li><a href="#testing"><span class=secno>10.5. </span>Non-Experimental 1.327 - Implementations</a> 1.328 - 1.329 - <li><a href="#cr-exit-criteria"><span class=secno>10.6. </span> CR Exit 1.330 - Criteria</a> 1.331 - </ul> 1.332 - 1.333 - <li class=no-num><a href="#acknowledgments">Acknowledgments</a> 1.334 - 1.335 - <li class=no-num><a href="#references">References</a> 1.336 - <ul class=toc> 1.337 - <li class=no-num><a href="#normative-references">Normative 1.338 - references</a> 1.339 - 1.340 - <li class=no-num><a href="#other-references">Other references</a> 1.341 - </ul> 1.342 - 1.343 - <li class=no-num><a href="#index">Index</a> 1.344 - 1.345 - <li class=no-num><a href="#property-index">Property index</a> 1.346 - </ul> 1.347 - <!--end-toc--> 1.348 - 1.349 - <h2 id=intro><span class=secno>1. </span> Introduction</h2> 1.350 - 1.351 - <p><em>This section is not normative.</em> 1.352 - 1.353 - <p> In CSS Levels 1 and 2, image values, such as those used in the ‘<code 1.354 - class=property>background-image</code>’ property, could only be given by 1.355 - a single URL value. This module introduces additional ways of representing 1.356 - 2D images, for example as <a href="#image-notation">a list of URIs 1.357 - denoting fallbacks</a>, as <a href="#element-image-type">a reference to an 1.358 - element</a>, or as <a href="#gradients">a gradient</a>. 1.359 - 1.360 - <p> This module also defines several properties for <a 1.361 - href="#image-processing">manipulating raster images</a> and for <a 1.362 - href="#object-fit">sizing</a> or <a 1.363 - href="#object-position">positioning</a> replaced elements such as images 1.364 - within the box determined by the CSS layout algorithms. It also defines in 1.365 - a generic way CSS's <a href="#sizing">sizing algorithm</a> for images and 1.366 - other replaced elements. 1.367 - 1.368 - <h3 id=placement><span class=secno>1.1. </span> Module Interactions</h3> 1.369 - 1.370 - <p> This module defines and extends the ‘<a href="#image-type"><code 1.371 - class=css><image></code></a>’ value type defined in <a 1.372 - href="#CSS3VAL" rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>. 1.373 - Furthermore it replaces the ‘<code class=css><url></code>’ type in 1.374 - the ‘<code class=property>background-image</code>’ and ‘<code 1.375 - class=property>list-style-image</code>’ definitions in CSS1 and CSS2 and 1.376 - adds ‘<a href="#image-type"><code class=css><image></code></a>’ as 1.377 - an alternative to ‘<code class=css><url></code>’ in the ‘<code 1.378 - class=property>content</code>’ property's value. It is presumed that CSS 1.379 - specifications beyond CSS2.1 will use the ‘<a href="#image-type"><code 1.380 - class=css><image></code></a>’ notation in place of ‘<code 1.381 - class=css><url></code>’ where 2D images are expected. (See e.g. <a 1.382 - href="#CSS3BG" rel=biblioentry>[CSS3BG]<!--{{CSS3BG}}--></a>.) 1.383 - 1.384 - <p> Of the properties defined in this module, only ‘<a 1.385 - href="#image-resolution"><code 1.386 - class=property>image-resolution</code></a>’ applies to 1.387 - <code>::first-line</code> and <code>::first-letter</code>. 1.388 - 1.389 - <h3 id=values><span class=secno>1.2. </span> Values</h3> 1.390 - 1.391 - <p> This specification follows the <a 1.392 - href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property 1.393 - definition conventions</a> from <a href="#CSS21" 1.394 - rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in 1.395 - this specification are defined in CSS Level 2 Revision 1 <a 1.396 - href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS 1.397 - modules may expand the definitions of these value types: for example <a 1.398 - href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>, 1.399 - when combined with this module, expands the definition of the 1.400 - <var><color></var> value type as used in this specification. 1.401 - 1.402 - <p> In addition to the property-specific values listed in their 1.403 - definitions, all properties defined in this specification also accept the 1.404 - <a href="http://www.w3.org/TR/css3-values">global keywords</a> as their 1.405 - property value. For readability they has not been repeated explicitly. 1.406 - 1.407 - <h2 id=planned-features><span class=secno>2. </span>Planned Features</h2> 1.408 - 1.409 - <ol> 1.410 - <li>Resolution tagging in image() 1.411 - 1.412 - <li>Logical keywords for specifying linear gradient direction. 1.413 - 1.414 - <li>More interpolation modes for gradients: <a 1.415 - href="http://lists.w3.org/Archives/Public/www-style/2012Jan/0635.html">http://lists.w3.org/Archives/Public/www-style/2012Jan/0635.html</a> 1.416 - 1.417 - <li>Ability to reference an SVG paint server via url (maybe as 1.418 - element(<string>)?) 1.419 - </ol> 1.420 - <!-- ====================================================================== --> 1.421 - 1.422 - <h2 id=image-values><span class=secno>3. </span> Image Values: the <a 1.423 - href="#image-type"><var><image></var></a> type</h2> 1.424 - 1.425 - <p> The ‘<a href="#image-type"><code class=css><image></code></a>’ 1.426 - value type denotes a 2D image. It can be a <a href="#url-notation">url 1.427 - reference</a>, <a href="#image-notation">image notation</a>, 1.428 - <!-- <a href="#element-image">element reference</a>, --> or <a 1.429 - href="#gradients">gradient notation</a>. Its syntax is: 1.430 - 1.431 - <pre class=prod><dfn 1.432 - id=image-type><image></dfn> = <var><url></var> | <a 1.433 - href="#image-list-type"><var><image-list></var></a> | <a 1.434 - href="#image-set-type"><var><image-set></var></a> | <a 1.435 - href="#gradient-type"><var><gradient></var></a></pre> 1.436 - 1.437 - <p> An ‘<a href="#image-type"><code class=css><image></code></a>’ 1.438 - can be used in many CSS properties, including the ‘<code 1.439 - class=property>background-image</code>’, ‘<code 1.440 - class=property>list-style-image</code>’, ‘<code 1.441 - class=property>cursor</code>’ properties <a href="#CSS21" 1.442 - rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> (where it replaces the 1.443 - ‘<code class=css><url></code>’ component in the property's value). 1.444 - 1.445 - <p> In some cases, an image is invalid, such as a ‘<code 1.446 - class=css><url></code>’ pointing to a resource that is not a valid 1.447 - image format. An <dfn id=invalid-image>invalid image</dfn> is rendered as 1.448 - a solid-color ‘<code class=css>transparent</code>’ image with no 1.449 - intrinsic dimensions. However, <a href="#invalid-image"><i>invalid 1.450 - images</i></a> have special behavior in some contexts, such as the 1.451 - ‘<code class=css>image()</code>’ notation. <!-- 1.452 + <link href=../default.css rel=stylesheet type=text/css> 1.453 + <link href=../csslogo.ico rel="shortcut icon" type=image/x-icon> 1.454 + <link href=https://www.w3.org/StyleSheets/TR/W3C-ED rel=stylesheet type=text/css> 1.455 +</head> 1.456 +<body class=h-entry> 1.457 +<div class=head> 1.458 + <p data-fill-with=logo><a class=logo href=http://www.w3.org/> 1.459 + <img alt=W3C height=48 src=http://www.w3.org/Icons/w3c_home width=72> 1.460 +</a></p> 1.461 + <h1 class="p-name no-ref" id=title>CSS Image Values and Replaced Content Module Level 4</h1> 1.462 + <h2 class="no-num no-toc no-ref" id=subtitle><span class=content>Editor's Draft, 1.463 + <span class=dt-updated><span class=value-title title=20130809>9 August 2013</span></span></span></h2> 1.464 + <div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-images-4/>http://dev.w3.org/csswg/css-images-4/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css4-images/>http://www.w3.org/TR/css4-images/</a><dt>Editor's Draft:<dd><a href=http://dev.w3.org/csswg/css-images-4/>http://dev.w3.org/csswg/css-images-4/</a><dt>Previous Versions:<dd><a href=http://www.w3.org/TR/2012/WD-css4-images-20120911/ rel=previous>http://www.w3.org/TR/2012/WD-css4-images-20120911/</a> 1.465 +<dt>Feedback:</dt> 1.466 + <dd><a href="mailto:www-style@w3.org?subject=%5Bcss-images%5D%20feedback">www-style@w3.org</a> 1.467 + with subject line 1.468 + “<kbd>[css-images] <var>… message topic …</var></kbd>” 1.469 + (<a href=http://lists.w3.org/Archives/Public/www-style/ rel=discussion>archives</a>)<dt>Test Suite:<dd>None Yet<dt>Editors: 1.470 +<dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://xanthir.com/contact/>Tab Atkins Jr.</a> (<span class="p-org org">Google</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://fantasai.inkedblade.net/contact>fantasai</a> (<span class="p-org org">Mozilla</span>)<dt>Issue Tracking:<dd><a href=http://www.w3.org/Style/CSS/Tracker/products/27>http://www.w3.org/Style/CSS/Tracker/products/27</a></dl></div> 1.471 + <div data-fill-with=warning><details class=obsolete open> 1.472 + <summary>Not Ready For Implementation</summary> 1.473 + <p> 1.474 + This spec is not yet ready for implementation. 1.475 + It exists in this repository to record the ideas and promote discussion. 1.476 + 1.477 + <p> 1.478 + Before attempting to implement this spec, 1.479 + please contact the CSSWG at www-style@w3.org. 1.480 +</details></div> 1.481 + <p class=copyright data-fill-with=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> 1.482 + <hr title="Separator for header"> 1.483 +</div> 1.484 + 1.485 +<h2 class="no-num no-toc no-ref" id=abstract><span class=content>Abstract</span></h2> 1.486 +<p class=p-summary data-fill-with=abstract>This module contains the features of CSS level 4 relating to the <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type><var><image></var></a> type and replaced elements. It includes and extends the functionality of CSS Image Values and Replaced Content Module Level 3. The main extensions compared to level 3 are several additions to the <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type><var><image></var></a> type, additions to the <a class=production data-link-type=type href=#gradient-type><var><gradient></var></a> type, extentions to the <a class=css data-link-type=maybe href=#funcdef-image>image()</a> function, definitions for interpolating several <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type><var><image></var></a> types, and several properties controlling the interaction of replaced elements and CSS's layout models. 1.487 +<a href=http://www.w3.org/TR/CSS/>CSS</a> is a language for describing the rendering of structured documents 1.488 +(such as HTML and XML) 1.489 +on screen, on paper, in speech, etc.</p> 1.490 + 1.491 +<h2 class="no-num no-toc no-ref" id=status><span class=content>Status of this document</span></h2> 1.492 +<div data-fill-with=status><p> 1.493 + This is a public copy of the editors' draft. 1.494 + It is provided for discussion only and may change at any moment. 1.495 + Its publication here does not imply endorsement of its contents by W3C. 1.496 + Don't cite this document other than as work in progress. 1.497 + 1.498 +<p> 1.499 + The (<a href=http://lists.w3.org/Archives/Public/www-style/>archived</a>) public mailing list 1.500 + <a href="mailto:www-style@w3.org?Subject=%5Bcss-images%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a> 1.501 + (see <a href=http://www.w3.org/Mail/Request>instructions</a>) 1.502 + is preferred for discussion of this specification. 1.503 + When sending e-mail, 1.504 + please put the text “css-images” in the subject, 1.505 + preferably like this: 1.506 + “[css-images] <em>…summary of comment…</em>” 1.507 + 1.508 +<p> 1.509 + This document was produced by the <a href=/Style/CSS/members>CSS Working Group</a> 1.510 + (part of the <a href=/Style/>Style Activity</a>). 1.511 + 1.512 +<p> 1.513 + This document was produced by a group operating under 1.514 + the <a href=/Consortium/Patent-Policy-20040205/>5 February 2004 W3C Patent Policy</a>. 1.515 + W3C maintains a <a href=/2004/01/pp-impl/32061/status rel=disclosure>public list of any patent disclosures</a> 1.516 + made in connection with the deliverables of the group; 1.517 + that page also includes instructions for disclosing a patent. 1.518 + An individual who has actual knowledge of a patent which the individual believes contains <a href=/Consortium/Patent-Policy-20040205/#def-essential>Essential Claim(s)</a> 1.519 + must disclose the information in accordance with <a href=/Consortium/Patent-Policy-20040205/#sec-Disclosure>section 6 of the W3C Patent Policy</a>.</div> 1.520 +<div data-fill-with=at-risk></div> 1.521 + 1.522 +<h2 class="no-num no-toc no-ref" id=contents><span class=content>Table of contents</span></h2> 1.523 +<div data-fill-with=table-of-contents><ul class=toc><li><a href=#intro><span class=secno>1</span> 1.524 +Introduction</a><ul class=toc><li><a href=#placement><span class=secno>1.1</span> 1.525 +Module Interactions</a><li><a href=#values><span class=secno>1.2</span> 1.526 +Values</a></ul><li><a href=#planned-features><span class=secno>2</span>Planned Features</a><li><a href=#image-values><span class=secno>3</span> 1.527 +Image Values: the <span class=production data-link-type=type><var><image></var></span> type</a><ul class=toc><li><a href=#url-notation><span class=secno>3.1</span> 1.528 +Image References and Image Slices: the <span class=production data-link-type=type><var><url></var></span> type and <span class=css data-link-type=maybe>url()</span> notation</a><li><a href=#image-notation><span class=secno>3.2</span> 1.529 +Image Fallbacks and Annotations: the <span class=css data-link-type=maybe>image()</span> notation</a><ul class=toc><li><a href=#image-fragments><span class=secno>3.2.1</span> 1.530 +Image Fragments</a><li><a href=#image-fallbacks><span class=secno>3.2.2</span> 1.531 +Image Fallbacks</a><li><a href=#color-images><span class=secno>3.2.3</span> 1.532 +Solid-color Images</a><li><a href=#bidi-images><span class=secno>3.2.4</span> 1.533 +Bidi-sensitive Images</a></ul><li><a href=#image-set-notation><span class=secno>3.3</span> 1.534 +Resolution Negotiation: the <span class=css data-link-type=maybe>image-set()</span> notation</a><li><a href=#element-notation><span class=secno>3.4</span> 1.535 +Using Elements as Images: the <span class=css data-link-type=maybe>element()</span> notation</a><ul class=toc><li><a href=#paint-sources><span class=secno>3.4.1</span> 1.536 +Paint Sources</a><li><a href=#element-cycles><span class=secno>3.4.2</span> 1.537 +Cycle Detection</a></ul><li><a href=#cross-fade-function><span class=secno>3.5</span> 1.538 +Combining images: the <span class=css data-link-type=maybe>cross-fade()</span> notation</a></ul><li><a href=#gradients><span class=secno>4</span> 1.539 +Gradients</a><ul class=toc><li><a href=#linear-gradients><span class=secno>4.1</span> 1.540 +Linear Gradients: the <span class=css data-link-type=maybe>linear-gradient()</span> notation</a><li><a href=#radial-gradients><span class=secno>4.2</span> 1.541 +Radial Gradients: the <span class=css data-link-type=maybe>radial-gradient()</span> notation</a><li><a href=#conic-gradients><span class=secno>4.3</span> 1.542 +Conic Gradients: the <span class=css data-link-type=maybe>conic-gradient()</span> notation</a><li><a href=#repeating-gradients><span class=secno>4.4</span> 1.543 +Repeating Gradients: the <span class=css data-link-type=maybe>repeating-linear-gradient()</span>, <span class=css data-link-type=maybe>repeating-radial-gradient()</span>, and <span class=css data-link-type=maybe>repeating-conic-gradient()</span> notations</a><li><a href=#color-stop-syntax><span class=secno>4.5</span> 1.544 +Gradient Color-Stops</a></ul><li><a href=#sizing><span class=secno>5</span> 1.545 +Sizing Images and Objects in CSS</a><ul class=toc><li><a href=#sizing-terms><span class=secno>5.1</span> 1.546 +Object-Sizing Terminology</a><li><a href=#object-negotiation><span class=secno>5.2</span> 1.547 +CSS⇋Object Negotiation</a><li><a href=#concrete-size-resolution><span class=secno>5.3</span> 1.548 +Concrete Object Size Resolution</a><ul class=toc><li><a href=#default-sizing><span class=secno>5.3.1</span> 1.549 +Default Sizing Algorithm</a><li><a href=#cover-contain><span class=secno>5.3.2</span> 1.550 +Cover and Contain Constraint Sizing</a></ul><li><a href=#object-sizing-examples><span class=secno>5.4</span> 1.551 +Examples of CSS Object Sizing</a><li><a href=#the-object-fit><span class=secno>5.5</span> 1.552 +Sizing Objects: the <span class=property data-link-type=propdesc title=object-fit>object-fit</span> property</a><li><a href=#the-object-position><span class=secno>5.6</span><i title=object-negotiation> 1.553 +Positioning Objects: the <span class=property data-link-type=propdesc title=object-position>object-position</span> property</i></a></ul><li><a href=#image-processing><span class=secno>6</span> 1.554 +Image Processing</a><ul class=toc><li><a href=#the-image-resolution><span class=secno>6.1</span> 1.555 +Overriding Image Resolutions: the <span class=property data-link-type=propdesc title=image-resolution>image-resolution</span> property</a><li><a href=#the-image-orientation><span class=secno>6.2</span> 1.556 +Orienting an Image on the Page: the <span class=property data-link-type=propdesc title=image-orientation>image-orientation</span> property</a><li><a href=#the-image-rendering><span class=secno>6.3</span> 1.557 +Determing How To Scale an Image: the <span class=property data-link-type=propdesc title=image-rendering>image-rendering</span> property</a></ul><li><a href=#interpolation><span class=secno>7</span> 1.558 +Interpolation</a><ul class=toc><li><a href=#interpolating-images><span class=secno>7.1</span> 1.559 +Interpolating <span class=production data-link-type=type><var><image></var></span></a><li><a href=#interpolating-image-combinations><span class=secno>7.2</span> 1.560 +Interpolating <span class=production data-link-type=type><var><image-combination></var></span></a><li><a href=#interpolating-gradients><span class=secno>7.3</span> 1.561 +Interpolating <span class=production data-link-type=type><var><gradient></var></span></a></ul><li><a href=#serialization><span class=secno>8</span> 1.562 +Serialization</a><li><a href=#changes><span class=secno>9</span> 1.563 +Changes since Images 3</a><li><a href=#conformance><span class=secno></span> 1.564 +Conformance</a><ul class=toc><li><a href=#conventions><span class=secno></span> 1.565 +Document conventions</a><li><a href=#conformance-classes><span class=secno></span> 1.566 +Conformance classes</a><li><a href=#partial><span class=secno></span> 1.567 +Partial implementations</a><li><a href=#experimental><span class=secno></span> 1.568 +Experimental implementations</a><li><a href=#testing><span class=secno></span> 1.569 +Non-experimental implementations</a></ul><li><a href=#references><span class=secno></span> 1.570 +References</a><ul class=toc><li><a href=#normative><span class=secno></span> 1.571 +Normative References</a><li><a href=#informative><span class=secno></span> 1.572 +Informative References</a></ul><li><a href=#index><span class=secno></span> 1.573 +Index</a><li><a href=#property-index><span class=secno></span> 1.574 +Property index</a></ul></div> 1.575 + 1.576 + 1.577 + 1.578 +<h2 data-level=1 id=intro><span class=secno>1 </span><span class=content> 1.579 +Introduction</span><a class=section-link href=#intro>§</a></h2> 1.580 + 1.581 +<p> <em>This section is not normative.</em> 1.582 + 1.583 +<p> In CSS Levels 1 and 2, 1.584 + image values, such as those used in the <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/colors.html#propdef-background-image title=background-image>background-image</a> property, 1.585 + could only be given by a single URL value. 1.586 + This module introduces additional ways of representing 2D images, 1.587 + for example as <a href=#image-notation>a list of URIs denoting fallbacks</a>, 1.588 + as <a href=#element-image-type>a reference to an element</a>, 1.589 + or as <a href=#gradients>a gradient</a>. 1.590 + 1.591 +<p> This module also defines several properties for <a href=#image-processing>manipulating raster images</a> 1.592 + and for <a href=#object-fit>sizing</a> 1.593 + or <a href=#object-position>positioning</a> 1.594 + replaced elements such as images within the box determined by the CSS layout algorithms. 1.595 + It also defines in a generic way CSS's <a href=#sizing>sizing algorithm</a> for images and other replaced elements. 1.596 + 1.597 +<h3 data-level=1.1 id=placement><span class=secno>1.1 </span><span class=content> 1.598 +Module Interactions</span><a class=section-link href=#placement>§</a></h3> 1.599 + 1.600 +<p> This module defines and extends the <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type><var><image></var></a> value type defined in <a data-biblio-type=normative data-link-type=biblio href=#css3val title=CSS3VAL>[CSS3VAL]</a>. 1.601 + Furthermore it replaces the <a class=production data-link-type=type href=http://dev.w3.org/fxtf/masking/#lturlgt><var><url></var></a> type 1.602 + in the <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/colors.html#propdef-background-image title=background-image>background-image</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-lists-3/#list-style-image title=list-style-image>list-style-image</a> definitions in CSS1 and CSS2 1.603 + and adds <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type><var><image></var></a> as an alternative to <a class=production data-link-type=type href=http://dev.w3.org/fxtf/masking/#lturlgt><var><url></var></a> in the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-ui-3/#content title=content>content</a> property's value. 1.604 + It is presumed that CSS specifications beyond CSS2.1 will use the <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type><var><image></var></a> notation 1.605 + in place of <a class=production data-link-type=type href=http://dev.w3.org/fxtf/masking/#lturlgt><var><url></var></a> where 2D images are expected. (See e.g. <a data-biblio-type=informative data-link-type=biblio href=#css3bg title=CSS3BG>[CSS3BG]</a>.) 1.606 + 1.607 +<p> Of the properties defined in this module, 1.608 + only <a class=property data-link-type=propdesc href=#propdef-image-resolution title=image-resolution>image-resolution</a> 1.609 + applies to <code>::first-line</code> and <code>::first-letter</code>. 1.610 + 1.611 +<h3 data-level=1.2 id=values><span class=secno>1.2 </span><span class=content> 1.612 +Values</span><a class=section-link href=#values>§</a></h3> 1.613 + 1.614 +<p> This specification follows the <a href=http://www.w3.org/TR/CSS21/about.html#property-defs>CSS property definition conventions</a> from <a data-biblio-type=normative data-link-type=biblio href=#css21 title=CSS21>[CSS21]</a>. 1.615 + Value types not defined in this specification 1.616 + are defined in CSS Level 2 Revision 1 <a data-biblio-type=normative data-link-type=biblio href=#css21 title=CSS21>[CSS21]</a>. 1.617 + Other CSS modules may expand the definitions of these value types: 1.618 + for example <a data-biblio-type=informative data-link-type=biblio href=#css3color title=CSS3COLOR>[CSS3COLOR]</a>, 1.619 + when combined with this module, 1.620 + expands the definition of the <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-color><var><color></var></a> value type as used in this specification. 1.621 + 1.622 +<p> In addition to the property-specific values listed in their definitions, 1.623 + all properties defined in this specification also accept the <a href=http://www.w3.org/TR/css3-values/>global keywords</a> as their property value. 1.624 + For readability they has not been repeated explicitly. 1.625 + 1.626 + 1.627 +<h2 data-level=2 id=planned-features><span class=secno>2 </span><span class=content>Planned Features</span><a class=section-link href=#planned-features>§</a></h2> 1.628 + 1.629 +<ol> 1.630 + <li>Resolution tagging in image() 1.631 + 1.632 + <li>Logical keywords for specifying linear gradient direction. 1.633 + 1.634 + <li>More interpolation modes for gradients: <a href=http://lists.w3.org/Archives/Public/www-style/2012Jan/0635.html>http://lists.w3.org/Archives/Public/www-style/2012Jan/0635.html</a> 1.635 + 1.636 + <li>Ability to reference an SVG paint server via url (maybe as element(<a class=production data-link-type=type href=http://dev.w3.org/csswg/css-template-1/#ltstringgt><var><string></var></a>)?) 1.637 +</ol> 1.638 + 1.639 +<!-- ====================================================================== --> 1.640 + 1.641 +<h2 data-level=3 id=image-values><span class=secno>3 </span><span class=content> 1.642 +Image Values: the <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type><var><image></var></a> type</span><a class=section-link href=#image-values>§</a></h2> 1.643 + 1.644 +<p> The <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type><var><image></var></a> value type denotes a 2D image. It can be a 1.645 + <a href=#url-notation>url reference</a>, 1.646 + <a href=#image-notation>image notation</a>, 1.647 + <!-- <a href="#element-image">element reference</a>, --> 1.648 + or <a href=#gradients>gradient notation</a>. 1.649 + Its syntax is: 1.650 + 1.651 +<pre class=prod><dfn data-dfn-type=type id=typedef-image><image></dfn> = <a class=production data-link-type=type href=http://dev.w3.org/fxtf/masking/#lturlgt><var><url></var></a> | image() | image-set() | element() | cross-fade() | <a class=production data-link-type=type href=#gradient-type><var><gradient></var></a></pre> 1.652 +<p> An <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type><var><image></var></a> can be used in many CSS properties, 1.653 + including the <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/colors.html#propdef-background-image title=background-image>background-image</a>, <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-lists-3/#list-style-image title=list-style-image>list-style-image</a>, <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-ui-3/#cursor0 title=cursor>cursor</a> properties <a data-biblio-type=normative data-link-type=biblio href=#css21 title=CSS21>[CSS21]</a> 1.654 + (where it replaces the <a class=production data-link-type=type href=http://dev.w3.org/fxtf/masking/#lturlgt><var><url></var></a> component in the property's value). 1.655 + 1.656 +<p> In some cases, an image is invalid, 1.657 + such as a <a class=production data-link-type=type href=http://dev.w3.org/fxtf/masking/#lturlgt><var><url></var></a> pointing to a resource that is not a valid image format. 1.658 + An <dfn data-dfn-type=dfn id=invalid-image>invalid image</dfn> is rendered as a solid-color <span class=css data-link-type=maybe>transparent</span> image with no intrinsic dimensions. 1.659 + However, <a href=#invalid-image>invalid images</a> have special behavior in some contexts, 1.660 + such as the <a class=css data-link-type=maybe href=#funcdef-image>image()</a> notation. 1.661 + 1.662 + 1.663 +<!-- 1.664 UUUUUUUU UUUUUUUURRRRRRRRRRRRRRRRR LLLLLLLLLLL 1.665 U::::::U U::::::UR::::::::::::::::R L:::::::::L 1.666 U::::::U U::::::UR::::::RRRRRR:::::R L:::::::::L 1.667 @@ -463,26 +231,24 @@ 1.668 UUUUUUUUU RRRRRRRR RRRRRRRLLLLLLLLLLLLLLLLLLLLLLLL 1.669 --> 1.670 1.671 - <h3 id=url-notation><span class=secno>3.1. </span> Image References and 1.672 - Image Slices: the ‘<code class=css><url></code>’ type and ‘<code 1.673 - class=css>url()</code>’ notation</h3> 1.674 - 1.675 - <p> The simplest way to indicate an image is to reference an image file by 1.676 - URL. This can be done with the <a 1.677 - href="http://www.w3.org/TR/CSS21/syndata.html#uri">‘<code 1.678 - class=css>url()</code>’ notation</a>, defined in <a href="#CSS21" 1.679 - rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. 1.680 - 1.681 - <div class=example> 1.682 - <p> In the example below, a background image is specified with ‘<code 1.683 - class=css>url()</code>’syntax: 1.684 - 1.685 - <pre>background-image: url(wavy.png);</pre> 1.686 - </div> 1.687 - 1.688 - <p> If the UA cannot download, parse, or otherwise successfully display the 1.689 - contents at the URL as an image, it must be treated as an <a 1.690 - href="#invalid-image"><i>invalid image</i></a>. <!-- 1.691 + 1.692 +<h3 data-level=3.1 id=url-notation><span class=secno>3.1 </span><span class=content> 1.693 +Image References and Image Slices: the <a class=production data-link-type=type href=http://dev.w3.org/fxtf/masking/#lturlgt><var><url></var></a> type and <span class=css data-link-type=maybe>url()</span> notation</span><a class=section-link href=#url-notation>§</a></h3> 1.694 + 1.695 +<p> The simplest way to indicate an image is to reference an image file by URL. 1.696 + This can be done with the <a href=http://www.w3.org/TR/CSS21/syndata.html#uri>>url()'' notation</a>, defined in <a data-biblio-type=normative data-link-type=biblio href=#css21 title=CSS21>[CSS21]</a>. 1.697 + 1.698 + <div class=example> 1.699 + 1.700 +<p> In the example below, a background image is specified with <span class=css data-link-type=maybe>url()</span>syntax: 1.701 + 1.702 +<pre>background-image: url(wavy.png);</pre> </div> 1.703 + 1.704 +<p> If the UA cannot download, parse, or otherwise successfully display the contents at the URL as an image, 1.705 + it must be treated as an <a href=#invalid-image>invalid image</a>. 1.706 + 1.707 + 1.708 +<!-- 1.709 IIIIIIIIII 1.710 I::::::::I 1.711 I::::::::I 1.712 @@ -508,226 +274,198 @@ 1.713 gggggg 1.714 --> 1.715 1.716 - <h3 id=image-notation><span class=secno>3.2. </span> Image Fallbacks and 1.717 - Annotations: the ‘<code class=css>image()</code>’ notation</h3> 1.718 - 1.719 - <p> The ‘<code class=css>image()</code>’ function allows an author to: 1.720 - 1.721 - <ul> 1.722 - <li> use <a href="http://www.w3.org/TR/media-frags/">media fragments</a> 1.723 - to clip out a portion of an image 1.724 - 1.725 - <li> specify fallback images in case the preferred image can't be decoded 1.726 - or is a type that the browser doesn't recognize 1.727 - 1.728 - <li> use a solid color as an image 1.729 - </ul> 1.730 - 1.731 - <p> The ‘<code class=css>image()</code>’ notation is defined as: 1.732 - 1.733 - <pre class=prod><br><!-- 1.734 - --><dfn 1.735 - id=image-list-type><image-list></dfn> = image( <a 1.736 - href="#image-tags-type"><var><image-tags></var></a>? [ <a 1.737 - href="#image-src-type"><var><image-src></var></a> , ]* [ <a 1.738 - href="#image-src-type"><var><image-src></var></a> | <var><color></var> ] )<br><!-- 1.739 - --><dfn 1.740 - id=image-tags-type><image-tags></dfn> = [ ltr | rtl ] 1.741 -<!-- 1.742 - --><dfn 1.743 - id=image-src-type><image-src></dfn> = [ <var><url></var> | <var><string></var> ]</pre> 1.744 - 1.745 - <p> Each ‘<code class=css><string></code>’ or ‘<code 1.746 - class=css><url></code>’ inside ‘<code class=css>image()</code>’ 1.747 - represents an image, just as if the <a href="#url-notation">‘<code 1.748 - class=css>url()</code>’ notation</a> had been used. As usual for URLs in 1.749 - CSS, relative URLs are resolved to an absolute URL (as described in Values 1.750 - & Units <a href="#CSS3VAL" 1.751 - rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>) when a specified 1.752 - ‘<code class=css>image()</code>’ value is computed. 1.753 - 1.754 - <h4 id=image-fragments><span class=secno>3.2.1. </span> Image Fragments</h4> 1.755 - 1.756 - <p> When a URL specified in ‘<code class=css>image()</code>’ represents 1.757 - a portion of a resource (e.g. by the use of <a 1.758 - href="http://www.w3.org/TR/media-frags/#naming-space">media fragment 1.759 - identifiers</a>) that portion is clipped out of its context and used as a 1.760 - standalone image. 1.761 - 1.762 - <div class=example> 1.763 - <p> For example, given the following image and CSS: <a 1.764 - href="images/sprites.svg"> <img 1.765 - alt="[9 circles, with 0 to 8 eighths filled in]" height=20 1.766 - src="images/sprites.svg" width=180> </a> 1.767 - 1.768 - <pre>background-image: image('sprites.svg#xywh=40,0,20,20')</pre> 1.769 - 1.770 - <p> ...the background of the element will be the portion of the image that 1.771 - starts at (40px,0px) and is 20px wide and tall, which is just the circle 1.772 - with a quarter filled in. 1.773 - </div> 1.774 - 1.775 - <p> So that authors can take advantage of CSS's forwards-compatible parsing 1.776 - rules to provide a fallback for image slices, implementations that support 1.777 - the ‘<code class=css>image()</code>’ notation <em>must</em> support 1.778 - the <code>xywh=#,#,#,#</code> form of media fragment identifiers for 1.779 - images specified via ‘<code class=css>image()</code>’. <a 1.780 - href="#MEDIA-FRAGS" 1.781 - rel=biblioentry>[MEDIA-FRAGS]<!--{{!MEDIA-FRAGS}}--></a> 1.782 - 1.783 - <div class=example> 1.784 - <p> Note that image fragments can also be used with the ‘<code 1.785 - class=css>url()</code>’ notation. However, a legacy UA that doesn't 1.786 - understand the media fragments notation will ignore the fragment and 1.787 - simply display the entirety of the image. 1.788 - 1.789 - <p> Since the ‘<code class=css>image()</code>’ notation requires UAs 1.790 - to support media fragments, authors can take advantage of CSS's 1.791 - forward-compatible parsing rules to provide a fallback when using an 1.792 - image fragment URL: 1.793 - 1.794 - <pre><!-- 1.795 - -->background-image: url('swirl.png'); /* old UAs */ 1.796 -<!-- 1.797 - -->background-image: image('sprites.png#xywh=10,30,60,20'); /* new UAs */</pre> 1.798 - </div> 1.799 - 1.800 - <h4 id=image-fallbacks><span class=secno>3.2.2. </span> Image Fallbacks</h4> 1.801 - 1.802 - <p> Multiple ‘<a href="#image-src-type"><code 1.803 - class=css><image-src>s</code></a>’ can be given separated by commas, 1.804 - in which case the function represents the first image that's not an <a 1.805 - href="#invalid-image"><i>invalid image</i></a>. The final argument can 1.806 - specify a ‘<code class=css><color></code>’ to serve as an ultimate 1.807 - fallback; this can be used, e.g. for ‘<code 1.808 - class=property>background-image</code>’, to ensure adequate contrast if 1.809 - none of the preceding ‘<a href="#image-src-type"><code 1.810 - class=css><image-src>s</code></a>’ can be used. If the final argument 1.811 - is a ‘<code class=css><color></code>’, it represents a solid-color 1.812 - image of the given color with no <a 1.813 - href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a>. If all of 1.814 - the provided ‘<a href="#image-src-type"><code 1.815 - class=css><image-src>s</code></a>’ are <a 1.816 - href="#invalid-image"><i>invalid images</i></a> and a fallback color was 1.817 - not provided as the last argument, the entire ‘<code 1.818 - class=css>image()</code>’ function must be treated as an <a 1.819 - href="#invalid-image"><i>invalid image</i></a>. 1.820 - 1.821 - <div class=example> 1.822 - <p> The rule below would tell the UA to load ‘<code 1.823 - class=css>wavy.svg</code>’ if it can; failing that to load ‘<code 1.824 - class=css>wavy.png</code>’; and failing that to display ‘<code 1.825 - class=css>wavy.gif</code>’. For example, the browser might not 1.826 - understand how to render SVG images, and the PNG may be temporarily 404 1.827 - (returning an HTML 404 page, which the browser can't decode as an image) 1.828 - due to a server move, so the GIF is used until one of the previous 1.829 - problems corrects itself. 1.830 - 1.831 - <pre>background-image: image("wavy.svg", 'wavy.png' , "wavy.gif");</pre> 1.832 - </div> 1.833 - 1.834 - <div class=example> 1.835 - <p> The fallback color can be used to ensure that text is still readable 1.836 - even when the image fails to load. For example, the following code works 1.837 - fine if the image is rectangular and has no transparency: 1.838 - 1.839 - <pre><!-- 1.840 - -->body { color: black; background: white; } 1.841 -<!-- 1.842 - -->p.special { color: white; background: url("dark.png") black; }</pre> 1.843 - 1.844 - <p> When the image doesn't load, the background color is still there to 1.845 - ensure that the white text is readable. However, if the image has some 1.846 - transparency, the black will be visible behind it, which is probably not 1.847 - desired. The ‘<code class=css>image()</code>’ function addresses 1.848 - this: 1.849 - 1.850 - <pre><!-- 1.851 - -->body { color: black; background: white; } 1.852 -<!-- 1.853 - -->p.special { color: white; background: image("dark.png", black); }</pre> 1.854 - 1.855 - <p> Now, the black won't show at all if the image loads, but if for 1.856 - whatever reason the image fails, it'll pop in and prevent the white text 1.857 - from being set against a white background. 1.858 - </div> 1.859 - 1.860 - <p> If a URL uses a fragment identifier syntax that the implementation does 1.861 - not understand, or does not consider valid for that type of image, the URL 1.862 - must be treated as representing an <a href="#invalid-image"><i>invalid 1.863 - image</i></a>. <span class=note>This error-handling is limited to image(), 1.864 - and not in the definition of URL, for legacy compat reasons.</span> 1.865 - 1.866 - <div class=example> 1.867 - <p> For example, if a future specification defined a way to refer to a 1.868 - specific frame of an animated GIF with a fragment identifier, an author 1.869 - could write the following to get newer browsers to use the GIF's frame, 1.870 - and older browsers to instead download the fallback image: 1.871 - 1.872 - <pre>background-image: image('cat_meme.gif#frame=5', 'lolcat.png');</pre> 1.873 - </div> 1.874 - <!-- XXX SVG fragment example with spriting / fallbacks (once SVG can provide this) --> 1.875 - 1.876 - <h4 id=color-images><span class=secno>3.2.3. </span> Solid-color Images</h4> 1.877 - 1.878 - <div class=example> 1.879 - <p> At times, one may need a solid-color image for a property or function 1.880 - that does not accept the ‘<code class=css><color></code>’ type 1.881 - directly. The ‘<code class=css>image()</code>’ function can be used 1.882 - for this: by specifying <em>only</em> a color without any URLs, the 1.883 - function immediately falls back to representing a solid-color image of 1.884 - the chosen color. 1.885 - 1.886 - <pre>background-image: image(rgba(0,0,255,.5)), url("bg-image.png");</pre> 1.887 - 1.888 - <p> In the above, the background is the image "bg-image.png", overlaid 1.889 - with partially-transparent blue. 1.890 - </div> 1.891 - 1.892 - <h4 id=bidi-images><span class=secno>3.2.4. </span> Bidi-sensitive Images</h4> 1.893 - 1.894 - <p> Before listing any <a 1.895 - href="#image-src-type"><code><image-src>s</code></a>, the author may 1.896 - specify a directionality for the image, similar to adding a 1.897 - <code>dir</code> attribute to an element in HTML. If a directional image 1.898 - is used on or in an element with opposite <a 1.899 - href="http://www.w3.org/TR/CSS21/visuren.html#propdef-direction">direction</a>, 1.900 - the image must be flipped in the inline direction (as if it was 1.901 - transformed by, e.g., <code>scaleX(-1)</code>, if the inline direction is 1.902 - the X axis). 1.903 - 1.904 - <p class=note> Note that, absent this declaration, images default to no 1.905 - directionality at all, and thus don't care about the directionality of the 1.906 - surrounding element. 1.907 - 1.908 - <div class=example> 1.909 - <p> A list may use an arrow for a bullet that points into the content. If 1.910 - the list can contain both LTR and RTL text, though, the bullet may be on 1.911 - the left or the right, and an image designed to point into the text on 1.912 - one side will point out of the text on the other side. This can be fixed 1.913 - with code like: 1.914 - 1.915 - <pre><!-- 1.916 - --><ul style="list-style-image: image(ltr 'arrow.png');"> 1.917 -<!-- 1.918 - --> <li dir='ltr'>My bullet is on the left!</li> 1.919 -<!-- 1.920 - --> <li dir='rtl'>MY BULLET IS ON THE RIGHT!</li> 1.921 -<!-- 1.922 - --></ul></pre> 1.923 - 1.924 - <p> This should render something like: 1.925 - 1.926 - <pre><!-- 1.927 - -->⇒ My bullet is on the left! 1.928 -<!-- 1.929 - --> !THGIR EHT NO SI TELLUB YM ⇐</pre> 1.930 - 1.931 - <p> In LTR list items, the image will be used as-is. In the RTL list 1.932 - items, however, it will be flipped in the inline direction, so it still 1.933 - points into the content. 1.934 - </div> 1.935 - <!-- 1.936 + 1.937 +<h3 data-level=3.2 id=image-notation><span class=secno>3.2 </span><span class=content> 1.938 +Image Fallbacks and Annotations: the <a class=css data-link-type=maybe href=#funcdef-image>image()</a> notation</span><a class=section-link href=#image-notation>§</a></h3> 1.939 + 1.940 +<p> The <a class=css data-link-type=maybe href=#funcdef-image>image()</a> function allows an author to: 1.941 + 1.942 +<p> <ul> 1.943 + <li> 1.944 + use <a href=http://www.w3.org/TR/media-frags/>media fragments</a> to clip out a portion of an image 1.945 + 1.946 + <li> 1.947 + specify fallback images in case the preferred image can't be decoded or is a type that the browser doesn't recognize 1.948 + 1.949 + <li> 1.950 + use a solid color as an image 1.951 + </ul> 1.952 + 1.953 +<p> The <a class=css data-link-type=maybe href=#funcdef-image>image()</a> notation is defined as: 1.954 + 1.955 + <pre class=prod> <dfn data-dfn-type=function id=funcdef-image>image()</dfn> = image( <a class=production data-link-type=type href=#typedef-image-tags><var><image-tags></var></a>? [ <a class=production data-link-type=type href=#typedef-image-src><var><image-src></var></a> , ]* [ <a class=production data-link-type=type href=#typedef-image-src><var><image-src></var></a> | <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-color><var><color></var></a> ] ) 1.956 + <dfn data-dfn-type=type id=typedef-image-tags><image-tags></dfn> = [ ltr | rtl ] 1.957 + <dfn data-dfn-type=type id=typedef-image-src><image-src></dfn> = [ <a class=production data-link-type=type href=http://dev.w3.org/fxtf/masking/#lturlgt><var><url></var></a> | <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-template-1/#ltstringgt><var><string></var></a> ] 1.958 +</pre> 1.959 +<p> Each <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-template-1/#ltstringgt><var><string></var></a> or <a class=production data-link-type=type href=http://dev.w3.org/fxtf/masking/#lturlgt><var><url></var></a> inside <a class=css data-link-type=maybe href=#funcdef-image>image()</a> represents an image, 1.960 + just as if the <a href=#url-notation>>url()'' notation</a> had been used. 1.961 + As usual for URLs in CSS, 1.962 + relative URLs are resolved to an absolute URL 1.963 + (as described in Values & Units <a data-biblio-type=normative data-link-type=biblio href=#css3val title=CSS3VAL>[CSS3VAL]</a>) 1.964 + when a specified <a class=css data-link-type=maybe href=#funcdef-image>image()</a> value is computed. 1.965 + 1.966 +<h4 data-level=3.2.1 id=image-fragments><span class=secno>3.2.1 </span><span class=content> 1.967 +Image Fragments</span><a class=section-link href=#image-fragments>§</a></h4> 1.968 + 1.969 +<p> When a URL specified in <a class=css data-link-type=maybe href=#funcdef-image>image()</a> represents a portion of a resource 1.970 + (e.g. by the use of <a href=http://www.w3.org/TR/media-frags/#naming-space>media fragment identifiers</a>) 1.971 + that portion is clipped out of its context and used as a standalone image. 1.972 + 1.973 + <div class=example> 1.974 + 1.975 +<p> For example, given the following image and CSS: 1.976 + 1.977 +<p> <a href=images/sprites.svg> 1.978 + <img alt="[9 circles, with 0 to 8 eighths filled in]" height=20 src=images/sprites.svg width=180> 1.979 + </a> 1.980 + 1.981 +<pre>background-image: image('sprites.svg#xywh=40,0,20,20')</pre> 1.982 +<p> ...the background of the element will be the portion of the image that starts at (40px,0px) and is 20px wide and tall, 1.983 + which is just the circle with a quarter filled in. 1.984 + </div> 1.985 + 1.986 +<p> So that authors can take advantage of CSS's forwards-compatible parsing rules to provide a fallback for image slices, 1.987 + implementations that support the <a class=css data-link-type=maybe href=#funcdef-image>image()</a> notation 1.988 + <em>must</em> support the <code>xywh=#,#,#,#</code> form of media fragment identifiers 1.989 + for images specified via <a class=css data-link-type=maybe href=#funcdef-image>image()</a>. <a data-biblio-type=normative data-link-type=biblio href=#media-frags title=MEDIA-FRAGS>[MEDIA-FRAGS]</a> 1.990 + 1.991 + <div class=example> 1.992 + Note that image fragments can also be used with the <span class=css data-link-type=maybe>url()</span> notation. 1.993 + However, a legacy UA that doesn't understand the media fragments notation 1.994 + will ignore the fragment and simply display the entirety of the image. 1.995 + 1.996 +<p> Since the <a class=css data-link-type=maybe href=#funcdef-image>image()</a> notation requires UAs to support media fragments, 1.997 + authors can take advantage of CSS's forward-compatible parsing rules 1.998 + to provide a fallback when using an image fragment URL: 1.999 + 1.1000 + <pre> background-image: url('swirl.png'); /* old UAs */ 1.1001 + background-image: image('sprites.png#xywh=10,30,60,20'); /* new UAs */ 1.1002 +</pre> </div> 1.1003 + 1.1004 +<h4 data-level=3.2.2 id=image-fallbacks><span class=secno>3.2.2 </span><span class=content> 1.1005 +Image Fallbacks</span><a class=section-link href=#image-fallbacks>§</a></h4> 1.1006 + 1.1007 +<p> Multiple <a class=production data-link-type=type href=#typedef-image-src><var><image-src></var></a>s can be given separated by commas, 1.1008 + in which case the function represents the first image that's not an <a href=#invalid-image>invalid image</a>. 1.1009 + The final argument can specify a <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-color><var><color></var></a> to serve as an ultimate fallback; 1.1010 + this can be used, e.g. for <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/colors.html#propdef-background-image title=background-image>background-image</a>, 1.1011 + to ensure adequate contrast if none of the preceding <a class=production data-link-type=type href=#typedef-image-src><var><image-src></var></a>s can be used. 1.1012 + If the final argument is a <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-color><var><color></var></a>, 1.1013 + it represents a solid-color image of the given color with no <a href=#intrinsic-dimensions>intrinsic dimensions</a>. 1.1014 + If all of the provided <a class=production data-link-type=type href=#typedef-image-src><var><image-src></var></a>s are <a href=#invalid-image>invalid images</a> 1.1015 + and a fallback color was not provided as the last argument, 1.1016 + the entire <a class=css data-link-type=maybe href=#funcdef-image>image()</a> function must be treated as an <a href=#invalid-image>invalid image</a>. 1.1017 + 1.1018 + <div class=example> 1.1019 + 1.1020 +<p> The rule below would tell the UA to load "wavy.svg" if it can; 1.1021 + failing that to load "wavy.png"; 1.1022 + and failing that to display "wavy.gif". 1.1023 + For example, the browser might not understand how to render SVG images, 1.1024 + and the PNG may be temporarily 404 1.1025 + (returning an HTML 404 page, which the browser can't decode as an image) 1.1026 + due to a server move, 1.1027 + so the GIF is used until one of the previous problems corrects itself. 1.1028 + 1.1029 +<pre>background-image: image("wavy.svg", "wavy.png" , "wavy.gif");</pre> </div> 1.1030 + 1.1031 + <div class=example> 1.1032 + 1.1033 +<p> The fallback color can be used to ensure that text is still readable 1.1034 + even when the image fails to load. 1.1035 + For example, the following code works fine if the image is rectangular and has no transparency: 1.1036 + 1.1037 + <pre> body { color: black; background: white; } 1.1038 + p.special { color: white; background: url("dark.png") black; } 1.1039 +</pre> 1.1040 +<p> When the image doesn't load, 1.1041 + the background color is still there to ensure that the white text is readable. 1.1042 + However, if the image has some transparency, 1.1043 + the black will be visible behind it, 1.1044 + which is probably not desired. 1.1045 + The <a class=css data-link-type=maybe href=#funcdef-image>image()</a> function addresses this: 1.1046 + 1.1047 + <pre> body { color: black; background: white; } 1.1048 + p.special { color: white; background: image("dark.png", black); } 1.1049 +</pre> 1.1050 +<p> Now, the black won't show at all if the image loads, 1.1051 + but if for whatever reason the image fails, 1.1052 + it'll pop in and prevent the white text from being set against a white background. 1.1053 + </div> 1.1054 + 1.1055 +<p> If a URL uses a fragment identifier syntax that the implementation does not understand, 1.1056 + or does not consider valid for that type of image, 1.1057 + the URL must be treated as representing an <a href=#invalid-image>invalid image</a>. 1.1058 + <span class=note>This error-handling is limited to image(), 1.1059 + and not in the definition of URL, 1.1060 + for legacy compat reasons.</span> 1.1061 + 1.1062 + <div class=example> 1.1063 + 1.1064 +<p> For example, if a future specification defined a way to refer to a specific frame of an animated GIF with a fragment identifier, 1.1065 + an author could write the following to get newer browsers to use the GIF's frame, 1.1066 + and older browsers to instead download the fallback image: 1.1067 + 1.1068 +<pre>background-image: image("cat_meme.gif#frame=5", "lolcat.png");</pre> </div> 1.1069 + 1.1070 + <!-- XXX SVG fragment example with spriting / fallbacks (once SVG can provide this) --> 1.1071 + 1.1072 +<h4 data-level=3.2.3 id=color-images><span class=secno>3.2.3 </span><span class=content> 1.1073 +Solid-color Images</span><a class=section-link href=#color-images>§</a></h4> 1.1074 + 1.1075 + <div class=example> 1.1076 + 1.1077 +<p> At times, one may need a solid-color image for a property or function that does not accept the <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-color><var><color></var></a> type directly. 1.1078 + The <a class=css data-link-type=maybe href=#funcdef-image>image()</a> function can be used for this: 1.1079 + by specifying <em>only</em> a color without any URLs, 1.1080 + the function immediately falls back to representing a solid-color image of the chosen color. 1.1081 + 1.1082 +<pre>background-image: image(rgba(0,0,255,.5)), url("bg-image.png");</pre> 1.1083 +<p> In the above, the background is the image "bg-image.png", 1.1084 + overlaid with partially-transparent blue. 1.1085 + </div> 1.1086 + 1.1087 + 1.1088 +<h4 data-level=3.2.4 id=bidi-images><span class=secno>3.2.4 </span><span class=content> 1.1089 +Bidi-sensitive Images</span><a class=section-link href=#bidi-images>§</a></h4> 1.1090 + 1.1091 +<p> Before listing any <code><image-src>s</code>, 1.1092 + the author may specify a directionality for the image, 1.1093 + similar to adding a <code>dir</code> attribute to an element in HTML. 1.1094 + If a directional image is used on or in an element with opposite <a href=http://www.w3.org/TR/CSS21/visuren.html#propdef-direction>direction</a>, 1.1095 + the image must be flipped in the inline direction 1.1096 + (as if it was transformed by, e.g., <code>scaleX(-1)</code>, if the inline direction is the X axis). 1.1097 + 1.1098 +<p class=note> Note: Absent this declaration, 1.1099 + images default to no directionality at all, 1.1100 + and thus don't care about the directionality of the surrounding element. 1.1101 + 1.1102 + <div class=example> 1.1103 + 1.1104 +<p> A list may use an arrow for a bullet that points into the content. 1.1105 + If the list can contain both LTR and RTL text, 1.1106 + though, the bullet may be on the left or the right, 1.1107 + and an image designed to point into the text on one side will point out of the text on the other side. 1.1108 + This can be fixed with code like: 1.1109 + 1.1110 + <pre> <ul style="list-style-image: image(ltr 'arrow.png');"> 1.1111 + <li dir='ltr'>My bullet is on the left!</li> 1.1112 + <li dir='rtl'>MY BULLET IS ON THE RIGHT!</li> 1.1113 + </ul> 1.1114 +</pre> 1.1115 +<p> This should render something like: 1.1116 + 1.1117 + <pre> ⇒ My bullet is on the left! 1.1118 + !THGIR EHT NO SI TELLUB YM ⇐ 1.1119 +</pre> 1.1120 +<p> In LTR list items, the image will be used as-is. 1.1121 + In the RTL list items, however, 1.1122 + it will be flipped in the inline direction, 1.1123 + so it still points into the content. 1.1124 + 1.1125 + </div> 1.1126 + 1.1127 +<!-- 1.1128 iiii tttt 1.1129 i::::i ttt:::t 1.1130 iiii t:::::t 1.1131 @@ -753,116 +491,103 @@ 1.1132 gggggg 1.1133 --> 1.1134 1.1135 - <h3 id=image-set-notation><span class=secno>3.3. </span> Resolution 1.1136 - Negotiation: the ‘<code class=css>image-set()</code>’ notation</h3> 1.1137 - 1.1138 - <p> Delivering the most appropriate image resolution for a user's device 1.1139 - can be a difficult task. Ideally, images should be in the same resolution 1.1140 - as the device they're being viewed in, which can vary between users. 1.1141 - However, other factors can factor into the decision of which image to 1.1142 - send; for example, if the user is on a slow mobile connection, they may 1.1143 - prefer to receive lower-res images rather than waiting for a large 1.1144 - proper-res image to load. The ‘<code class=css>image-set()</code>’ 1.1145 - function allows an author to ignore most of these issues, simply providing 1.1146 - multiple resolutions of an image and letting the UA decide which is most 1.1147 - appropriate in a given situation. 1.1148 - 1.1149 - <p class=issue> This solution assumes that resolution is a proxy for 1.1150 - filesize, and therefore doesn't appropriately handle multi-resolution sets 1.1151 - of vector images, or mixing vector images with raster ones (e.g. for 1.1152 - icons). For example, use a vector for high-res, pixel-optimized bitmap for 1.1153 - low-res, and same vector again for low-bandwidth (because it's much 1.1154 - smaller, even though it's higher resolution). 1.1155 - 1.1156 - <p> The syntax for ‘<code class=css>image-set()</code>’ is: 1.1157 - 1.1158 - <pre class=prod> 1.1159 + 1.1160 +<h3 data-level=3.3 id=image-set-notation><span class=secno>3.3 </span><span class=content> 1.1161 +Resolution Negotiation: the <a class=css data-link-type=maybe href=#funcdef-image-set>image-set()</a> notation</span><a class=section-link href=#image-set-notation>§</a></h3> 1.1162 + 1.1163 +<p> Delivering the most appropriate image resolution for a user's device can be a difficult task. 1.1164 + Ideally, images should be in the same resolution as the device they're being viewed in, 1.1165 + which can vary between users. 1.1166 + However, other factors can factor into the decision of which image to send; 1.1167 + for example, if the user is on a slow mobile connection, 1.1168 + they may prefer to receive lower-res images 1.1169 + rather than waiting for a large proper-res image to load. 1.1170 + The <a class=css data-link-type=maybe href=#funcdef-image-set>image-set()</a> function allows an author to ignore most of these issues, 1.1171 + simply providing multiple resolutions of an image 1.1172 + and letting the UA decide which is most appropriate in a given situation. 1.1173 + 1.1174 + <p class=issue> 1.1175 + This solution assumes that resolution is a proxy for filesize, 1.1176 + and therefore doesn't appropriately handle multi-resolution sets of vector images, 1.1177 + or mixing vector images with raster ones (e.g. for icons). 1.1178 + For example, use a vector for high-res, 1.1179 + pixel-optimized bitmap for low-res, 1.1180 + and same vector again for low-bandwidth (because it's much smaller, even though it's higher resolution). 1.1181 + 1.1182 +<p> The syntax for <a class=css data-link-type=maybe href=#funcdef-image-set>image-set()</a> is: 1.1183 + 1.1184 + <pre class=prod><dfn data-dfn-type=function id=funcdef-image-set>image-set()</dfn> = image-set( [ <a class=production data-link-type=type href=#typedef-image-set-decl><var><image-set-decl></var></a>, ]* [ <a class=production data-link-type=type href=#typedef-image-set-decl><var><image-set-decl></var></a> | <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-color><var><color></var></a>] ) 1.1185 +<dfn data-dfn-type=type id=typedef-image-set-decl><image-set-decl></dfn> = [ <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type><var><image></var></a> | <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-template-1/#ltstringgt><var><string></var></a> ] <a class=production data-link-type=type href=#typedef-resolution><var><resolution></var></a></pre> 1.1186 +<p> The <a class=css data-link-type=maybe href=#funcdef-image-set>image-set()</a> function can not be nested inside of itself, 1.1187 + either directly 1.1188 + or indirectly 1.1189 + (as an argument to another <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type><var><image></var></a> type). 1.1190 + 1.1191 + <p class=issue> 1.1192 + WebKit's experimental implementation has an <a class=property data-link-type=propdesc title=x>x</a> unit 1.1193 + which is identical to <a class=property data-link-type=propdesc title=dppx>dppx</a>. 1.1194 + Should we add it? 1.1195 + 1.1196 +<p> Each <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-template-1/#ltstringgt><var><string></var></a> or <a class=production data-link-type=type href=http://dev.w3.org/fxtf/masking/#lturlgt><var><url></var></a> inside <a class=css data-link-type=maybe href=#funcdef-image-set>image-set()</a> represents an image, 1.1197 + just like in <a class=css data-link-type=maybe href=#funcdef-image>image()</a>. 1.1198 + 1.1199 +<p> Every <a class=production data-link-type=type href=#typedef-image-set-decl><var><image-set-decl></var></a> in a given <a class=css data-link-type=maybe href=#funcdef-image-set>image-set()</a> must have a different <a class=production data-link-type=type href=#typedef-resolution><var><resolution></var></a>, 1.1200 + or else the function is invalid. 1.1201 + 1.1202 +<p> The value that a given <a class=css data-link-type=maybe href=#funcdef-image-set>image-set()</a> represents is determined by 1.1203 + the UA first ordering the set of <a class=production data-link-type=type href=#typedef-image-set-decl><var><image-set-decl></var></a>s 1.1204 + in a UA-determined order 1.1205 + (which should be based on the <a class=production data-link-type=type href=#typedef-resolution><var><resolution></var></a> of each <a class=production data-link-type=type href=#typedef-image-set-decl><var><image-set-decl></var></a>, 1.1206 + but may include other factors that the UA deems relevant, 1.1207 + such as connection speed). 1.1208 + The function then represents the first such image that is not an <a href=#invalid-image>invalid image</a>. 1.1209 + 1.1210 +<p> If a fallback color was provided, 1.1211 + the UA may decide at any point that the remaining <a class=production data-link-type=type href=#typedef-image-set-decl><var><image-set-decl></var></a>s are unsuitable, 1.1212 + and choose to use the fallback color instead, 1.1213 + in which case the function represents a solid-color image of the given color with no <a href=#intrinsic-dimensions>intrinsic dimensions</a>. 1.1214 + 1.1215 +<p> If <em>all</em> of the <a class=production data-link-type=type href=#typedef-image-set-decl><var><image-set-decl></var></a>s represent <a href=#invalid-image>invalid images</a>, 1.1216 + then if a fallback color was provided, 1.1217 + the function represents a solid-color image of the given color with no <a href=#intrinsic-dimensions>intrinsic dimensions</a>; 1.1218 + otherwise, the function represents an <a href=#invalid-image>invalid image</a>. 1.1219 + 1.1220 + <p class=issue> 1.1221 + HTML currently doesnt' do fallback if the first-chosen image doesn't load. 1.1222 + We should harmonize with HTML, 1.1223 + either by convincing them to do fallback, 1.1224 + or by removing our own fallback. 1.1225 + 1.1226 +<p> If an <a class=production data-link-type=type href=#typedef-image-set-decl><var><image-set-decl></var></a> is chosen and successfully loaded, 1.1227 + the associated <a class=production data-link-type=type href=#typedef-resolution><var><resolution></var></a> is the image's <a href=#intrinsic-resolution>intrinsic resolution</a>. 1.1228 + 1.1229 + <p class=issue> 1.1230 + It's been suggested that we don't need a full <a class=production data-link-type=type href=#typedef-resolution><var><resolution></var></a> here, 1.1231 + and should instead just use the <span class=css data-link-type=maybe>x</span> unit by itself. 1.1232 + This seems silly to me, 1.1233 + since the <span class=css data-link-type=maybe>x</span> unit is just an easier synonym for <span class=css data-link-type=maybe>dppx</span>, 1.1234 + but thoughts? 1.1235 + Beyond theoretical purity considerations, 1.1236 + it seems that <span class=css data-link-type=maybe>dpi</span> can be useful for use-cases involving printing, 1.1237 + where dpi is actually used to talk about images 1.1238 + and having an integer correlation between dots and pixels 1.1239 + is either unnecessary or strictly non-sensical 1.1240 + (as the screening resolution can depend on the colors being used). 1.1241 + 1.1242 + <div class=example> 1.1243 + This example shows how to use <a class=css data-link-type=maybe href=#funcdef-image-set>image-set()</a> to provide an image in three versions: 1.1244 + a "normal" version, 1.1245 + a "high-res" version, 1.1246 + and an extra-high resolution version for use in high-quality printing 1.1247 + (as printers can have <em>extremely</em> high resolution): 1.1248 + 1.1249 + <pre> background-image: image-set( "foo.png" 1x, 1.1250 + "foo-2x.png" 2x, 1.1251 + "foo-print.png" 600dpi ); 1.1252 +</pre> </div> 1.1253 + 1.1254 + 1.1255 <!-- 1.1256 - --><dfn 1.1257 - id=image-set-type><image-set></dfn> = image-set( [ <a 1.1258 - href="#image-set-decl-type"><var><image-set-decl></var></a>, ]* [ <a 1.1259 - href="#image-set-decl-type"><var><image-set-decl></var></a> | <var><color></var>] ) 1.1260 -<!-- 1.1261 - --><dfn 1.1262 - id=image-set-decl-type><image-set-decl></dfn> = [ <a 1.1263 - href="#image-type"><var><image></var></a> | <var><string></var> ] <var><resolution></var></pre> 1.1264 - 1.1265 - <p> The ‘<code class=css>image-set()</code>’ function can not be nested 1.1266 - inside of itself, either directly or indirectly (as an argument to another 1.1267 - <a href="#image-type"><var><image></var></a> type). 1.1268 - 1.1269 - <p class=issue> WebKit's experimental implementation has an ‘<code 1.1270 - class=property>x</code>’ unit which is identical to ‘<code 1.1271 - class=property>dppx</code>’. Should we add it? 1.1272 - 1.1273 - <p> Each ‘<code class=css><string></code>’ or ‘<code 1.1274 - class=css><url></code>’ inside ‘<code 1.1275 - class=css>image-set()</code>’ represents an image, just like in ‘<code 1.1276 - class=css>image()</code>’. 1.1277 - 1.1278 - <p> Every <a href="#image-set-decl-type"><var><image-set-decl></var></a> 1.1279 - in a given ‘<code class=css>image-set()</code>’ must have a different 1.1280 - <var><resolution></var>, or else the function is invalid. 1.1281 - 1.1282 - <p> The value that a given ‘<code class=css>image-set()</code>’ 1.1283 - represents is determined by the UA first ordering the set of <a 1.1284 - href="#image-set-decl-type"><var><image-set-decl></var></a>s in a 1.1285 - UA-determined order (which should be based on the 1.1286 - <var><resolution></var> of each <a 1.1287 - href="#image-set-decl-type"><var><image-set-decl></var></a>, but may 1.1288 - include other factors that the UA deems relevant, such as connection 1.1289 - speed). The function then represents the first such image that is not an 1.1290 - <a href="#invalid-image"><i>invalid image</i></a>. 1.1291 - 1.1292 - <p> If a fallback color was provided, the UA may decide at any point that 1.1293 - the remaining <a 1.1294 - href="#image-set-decl-type"><var><image-set-decl></var></a>s are 1.1295 - unsuitable, and choose to use the fallback color instead, in which case 1.1296 - the function represents a solid-color image of the given color with no <a 1.1297 - href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a>. 1.1298 - 1.1299 - <p> If <em>all</em> of the <a 1.1300 - href="#image-set-decl-type"><var><image-set-decl></var></a>s represent 1.1301 - <a href="#invalid-image"><i>invalid images</i></a>, then if a fallback 1.1302 - color was provided, the function represents a solid-color image of the 1.1303 - given color with no <a href="#intrinsic-dimensions"><i>intrinsic 1.1304 - dimensions</i></a>; otherwise, the function represents an <a 1.1305 - href="#invalid-image"><i>invalid image</i></a>. 1.1306 - 1.1307 - <p class=issue> HTML currently doesnt' do fallback if the first-chosen 1.1308 - image doesn't load. We should harmonize with HTML, either by convincing 1.1309 - them to do fallback, or by removing our own fallback. 1.1310 - 1.1311 - <p> If an <a href="#image-set-decl-type"><var><image-set-decl></var></a> 1.1312 - is chosen and successfully loaded, the associated 1.1313 - <var><resolution></var> is the image's <a 1.1314 - href="#intrinsic-resolution"><i>intrinsic resolution</i></a>. 1.1315 - 1.1316 - <p class=issue> It's been suggested that we don't need a full 1.1317 - <var><resolution></var> here, and should instead just use the ‘<code 1.1318 - class=css>x</code>’ unit by itself. This seems silly to me, since the 1.1319 - ‘<code class=css>x</code>’ unit is just an easier synonym for ‘<code 1.1320 - class=css>dppx</code>’, but thoughts? Beyond theoretical purity 1.1321 - considerations, it seems that ‘<code class=css>dpi</code>’ can be 1.1322 - useful for use-cases involving printing, where dpi is actually used to 1.1323 - talk about images and having an integer correlation between dots and 1.1324 - pixels is either unnecessary or strictly non-sensical (as the screening 1.1325 - resolution can depend on the colors being used). 1.1326 - 1.1327 - <div class=example> 1.1328 - <p> This example shows how to use ‘<code class=css>image-set()</code>’ 1.1329 - to provide an image in three versions: a "normal" version, a "high-res" 1.1330 - version, and an extra-high resolution version for use in high-quality 1.1331 - printing (as printers can have <em>extremely</em> high resolution): 1.1332 - 1.1333 - <pre><!-- 1.1334 - -->background-image: image-set( "foo.png" 1x, 1.1335 -<!-- 1.1336 - --> "foo-2x.png" 2x, 1.1337 -<!-- 1.1338 - --> "foo-print.png" 600dpi );</pre> 1.1339 - </div> 1.1340 - <!-- 1.1341 EEEEEEEEEEEEEEEEEEEEEElllllll tttt 1.1342 E::::::::::::::::::::El:::::l ttt:::t 1.1343 E::::::::::::::::::::El:::::l t:::::t 1.1344 @@ -881,405 +606,306 @@ 1.1345 EEEEEEEEEEEEEEEEEEEEEEllllllll eeeeeeeeeeeeee mmmmmm mmmmmm mmmmmm eeeeeeeeeeeeee nnnnnn nnnnnn ttttttttttt 1.1346 --> 1.1347 1.1348 - <h3 id=element-notation><span class=secno>3.4. </span> Using Elements as 1.1349 - Images: the ‘<code class=css>element()</code>’ notation</h3> 1.1350 - 1.1351 - <p> The ‘<code class=css>element()</code>’ function allows an author to 1.1352 - use an element in the document as an image. As the referenced element 1.1353 - changes appearance, the image changes as well. This can be used, for 1.1354 - example, to create live previews of the next/previous slide in a 1.1355 - slideshow, or to reference a canvas element for a fancy generated gradient 1.1356 - or even an animated background. 1.1357 - 1.1358 - <p class=note> Note that the ‘<code class=css>element()</code>’ 1.1359 - function only reproduces the <em>appearance</em> of the referenced 1.1360 - element, not the actual content and its structure. Authors should only use 1.1361 - this for decorative purposes, and must not use ‘<code 1.1362 - class=css>element()</code>’ to reproduce an element with significant 1.1363 - content across the page. Instead, just insert multiple copies of the 1.1364 - element into the document. 1.1365 - 1.1366 - <p> The syntax for ‘<code class=css>element()</code>’ is: 1.1367 - 1.1368 - <pre class=prod><dfn 1.1369 - id=element-image-type><element-image></dfn> = element( <var><id-selector></var> )</pre> 1.1370 - 1.1371 - <p> where ‘<code class=css><id-selector></code>’ is an ID selector 1.1372 - <a href="#SELECT" rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>. 1.1373 - 1.1374 - <p class=issue> Need to add some syntax + API for referring to an element 1.1375 - that's just in script, not in the document, so you can, say, make an HTML 1.1376 - <code><canvas></code> and just animate it directly. 1.1377 - 1.1378 - <p class=issue> Do we need to be able to refer to elements in external 1.1379 - documents (such as SVG paint servers)? Or is it enough to just use url() 1.1380 - for this? 1.1381 - 1.1382 - <p class=issue> This name conflicts with a somewhat similar function in 1.1383 - GCPM. This needs to be resolved somehow. 1.1384 - 1.1385 - <p class=issue> Want the ability to do "reflections" of an element, either 1.1386 - as a background-image on the element or in a pseudo-element. This needs to 1.1387 - be specially-handled to avoid triggering the cycle-detection. 1.1388 - 1.1389 - <p class=issue> When we have overflow:paged, how can we address a single 1.1390 - page in the view? 1.1391 - 1.1392 - <p> The ‘<code class=css>element()</code>’ function references the 1.1393 - element matched by its argument. If multiple elements are matched, the 1.1394 - function references the first such element. 1.1395 - 1.1396 - <p> The image represented by the ‘<code class=css>element()</code>’ 1.1397 - function can vary based on whether the element is visible in the document: 1.1398 - 1.1399 - <dl> 1.1400 - <dt>an <a href="#element-not-rendered"><i 1.1401 - title=element-not-rendered>element that is rendered</i></a> and is not a 1.1402 - descendant of a replaced element 1.1403 - 1.1404 - <dd> 1.1405 - <p> The function represents an image with its intrinsic size equal to the 1.1406 - <dfn id=decorated-bounding-box>decorated bounding box</dfn> of the 1.1407 - referenced element: 1.1408 - 1.1409 - <ul> 1.1410 - <li> for an element rendered using a CSS rendering model, the <a 1.1411 - href="#decorated-bounding-box"><i>decorated bounding box</i></a> is the 1.1412 - smallest axis-aligned rectangle that contains the <a 1.1413 - href="http://www.w3.org/TR/2011/CR-css3-background-20110215/#border-image-area">border 1.1414 - image areas</a> of all the fragments of the principal box 1.1415 - 1.1416 - <li> for an element rendered using the SVG rendering model, <a 1.1417 - href="http://www.w3.org/TR/SVGTiny12/intro.html#TermDecoratedBoundingBox">the 1.1418 - decorated bounding box is defined by SVG</a> 1.1419 - </ul> 1.1420 - 1.1421 - <p class=note> Note: Because images clip anything outside their bounds by 1.1422 - default, this means that decorations that extend outside the <a 1.1423 - href="#decorated-bounding-box"><i>decorated bounding box</i></a>, like 1.1424 - box shadows, may be clipped. 1.1425 - 1.1426 - <p> The image is constructed by rendering the referenced element and its 1.1427 - descendants (at the same size that they would be in the document) over 1.1428 - an infinite ‘<code class=css>transparent</code>’ canvas, positioned 1.1429 - so that the edges of the <a href="#decorated-bounding-box"><i>decorated 1.1430 - bounding box</i></a> are flush with the edges of the image. 1.1431 - 1.1432 - <p class=issue> Requiring some degree of stacking context on the element 1.1433 - appears to be required for an efficient implementation. Do we need a 1.1434 - full stacking context, or just a pseudo-stacking context? Should it need 1.1435 - to be a stacking context normally, or can we just render it as a 1.1436 - stacking context when rendering it to element()? 1.1437 - 1.1438 - <p> If the referenced element has a transform applied to it or an 1.1439 - ancestor, the transform must be ignored when rendering the element as an 1.1440 - image. <a href="#CSS3-TRANSFORMS" 1.1441 - rel=biblioentry>[CSS3-TRANSFORMS]<!--{{!CSS3-TRANSFORMS}}--></a> 1.1442 - 1.1443 - <p> If the referenced element is broken across pages, the element is 1.1444 - displayed as if the page content areas were joined flush in the 1.1445 - pagination direction, with pages' edges corresponding to the initial 1.1446 - containing block's start edge aligned. <span class=note>Elements broken 1.1447 - across lines or columns are just rendered with their <a 1.1448 - href="#decorated-bounding-box"><i>decorated bounding box</i></a>.</span> 1.1449 - 1.1450 - <p> Implementations may either re-use existing bitmap data generated for 1.1451 - the referenced element or regenerate the display of the element to 1.1452 - maximize quality at the image's size (for example, if the implementation 1.1453 - detects that the referenced element is an SVG fragment); in the latter 1.1454 - case, the layout of the referenced element in the image must not be 1.1455 - changed by the regeneration process. That is, the image must look 1.1456 - identical to the referenced element, modulo rasterization quality. 1.1457 - 1.1458 - <div class=example> 1.1459 - <p> As a somewhat silly example, a <code><p></code> element can be 1.1460 - reused as a background elsewhere in the document: 1.1461 - 1.1462 - <pre><!-- 1.1463 - --><style> 1.1464 + 1.1465 +<h3 data-level=3.4 id=element-notation><span class=secno>3.4 </span><span class=content> 1.1466 +Using Elements as Images: the <a class=css data-link-type=maybe href=#funcdef-element>element()</a> notation</span><a class=section-link href=#element-notation>§</a></h3> 1.1467 + 1.1468 +<p> The <a class=css data-link-type=maybe href=#funcdef-element>element()</a> function allows an author to use an element in the document as an image. 1.1469 + As the referenced element changes appearance, 1.1470 + the image changes as well. 1.1471 + This can be used, for example, 1.1472 + to create live previews of the next/previous slide in a slideshow, 1.1473 + or to reference a canvas element for a fancy generated gradient or even an animated background. 1.1474 + 1.1475 +<p class=note> Note: The <a class=css data-link-type=maybe href=#funcdef-element>element()</a> function only reproduces the <em>appearance</em> of the referenced element, 1.1476 + not the actual content and its structure. 1.1477 + Authors should only use this for decorative purposes, 1.1478 + and must not use <a class=css data-link-type=maybe href=#funcdef-element>element()</a> to reproduce an element with significant content across the page. 1.1479 + Instead, just insert multiple copies of the element into the document. 1.1480 + 1.1481 +<p> The syntax for <a class=css data-link-type=maybe href=#funcdef-element>element()</a> is: 1.1482 + 1.1483 +<pre class=prod><dfn data-dfn-type=function id=funcdef-element>element()</dfn> = element( <a class=production data-link-type=type href=http://dev.w3.org/csswg/selectors-4/#ltid-selector><var><id-selector></var></a> )</pre> 1.1484 +<p> where <a class=production data-link-type=type href=http://dev.w3.org/csswg/selectors-4/#ltid-selector><var><id-selector></var></a> is an ID selector <a data-biblio-type=normative data-link-type=biblio href=#select title=SELECT>[SELECT]</a>. 1.1485 + 1.1486 + <p class=issue> 1.1487 + Need to add some syntax + API for referring to an element that's just in script, 1.1488 + not in the document, 1.1489 + so you can, say, make an HTML <code><canvas></code> and just animate it directly. 1.1490 + 1.1491 + <p class=issue> 1.1492 + Do we need to be able to refer to elements in external documents 1.1493 + (such as SVG paint servers)? 1.1494 + Or is it enough to just use url() for this? 1.1495 + 1.1496 + <p class=issue> 1.1497 + This name conflicts with a somewhat similar function in GCPM. 1.1498 + This needs to be resolved somehow. 1.1499 + 1.1500 + <p class=issue> 1.1501 + Want the ability to do "reflections" of an element, 1.1502 + either as a background-image on the element or in a pseudo-element. 1.1503 + This needs to be specially-handled to avoid triggering the cycle-detection. 1.1504 + 1.1505 + <p class=issue> 1.1506 + When we have overflow:paged, 1.1507 + how can we address a single page in the view? 1.1508 + 1.1509 +<p> The <a class=css data-link-type=maybe href=#funcdef-element>element()</a> function references the element matched by its argument. 1.1510 + If multiple elements are matched, 1.1511 + the function references the first such element. 1.1512 + 1.1513 +<p> The image represented by the <a class=css data-link-type=maybe href=#funcdef-element>element()</a> function can vary based on whether the element is visible in the document: 1.1514 + 1.1515 + <dl> 1.1516 + <dt>an <a href=#element-not-rendered title=element-not-rendered>element that is rendered and is not a descendant of a replaced element 1.1517 + </a><dd><a href=#element-not-rendered title=element-not-rendered> 1.1518 + 1.1519 +<p> The function represents an image with its intrinsic size equal to the <dfn data-dfn-type=dfn id=decorated-bounding-box>decorated bounding box</dfn> of the referenced element: 1.1520 + 1.1521 +<p> <ul> 1.1522 + <li> 1.1523 + for an element rendered using a CSS rendering model, 1.1524 + the <a href=#decorated-bounding-box>decorated bounding box</a> is the smallest axis-aligned rectangle 1.1525 + that contains the <a href=http://www.w3.org/TR/2011/CR-css3-background-20110215/#border-image-area>border image areas</a> of all the fragments of the principal box 1.1526 + 1.1527 + <li> 1.1528 + for an element rendered using the SVG rendering model, 1.1529 + <a href=http://www.w3.org/TR/SVGTiny12/intro.html#TermDecoratedBoundingBox>the decorated bounding box is defined by SVG</a> 1.1530 + </ul> 1.1531 + 1.1532 +<p class=note> Note: Because images clip anything outside their bounds by default, 1.1533 + this means that decorations that extend outside the <a href=#decorated-bounding-box>decorated bounding box</a>, 1.1534 + like box shadows, 1.1535 + may be clipped. 1.1536 + 1.1537 +<p> The image is constructed by rendering the referenced element and its descendants 1.1538 + (at the same size that they would be in the document) 1.1539 + over an infinite <span class=css data-link-type=maybe>transparent</span> canvas, 1.1540 + positioned so that the edges of the <a href=#decorated-bounding-box>decorated bounding box</a> are flush with the edges of the image. 1.1541 + 1.1542 + <p class=issue> 1.1543 + Requiring some degree of stacking context on the element appears to be required for an efficient implementation. 1.1544 + Do we need a full stacking context, or just a pseudo-stacking context? 1.1545 + Should it need to be a stacking context normally, 1.1546 + or can we just render it as a stacking context when rendering it to element()? 1.1547 + 1.1548 +<p> If the referenced element has a transform applied to it or an ancestor, 1.1549 + the transform must be ignored when rendering the element as an image. <a data-biblio-type=normative data-link-type=biblio href=#css3-transforms title=CSS3-TRANSFORMS>[CSS3-TRANSFORMS]</a> 1.1550 + 1.1551 +<p> If the referenced element is broken across pages, 1.1552 + the element is displayed as if the page content areas were joined flush in the pagination direction, 1.1553 + with pages' edges corresponding to the initial containing block's start edge aligned. 1.1554 + <span class=note>Elements broken across lines or columns are just rendered with their <a href=#decorated-bounding-box>decorated bounding box</a>.</span> 1.1555 + 1.1556 +<p> Implementations may either re-use existing bitmap data generated for the referenced element 1.1557 + or regenerate the display of the element to maximize quality at the image's size 1.1558 + (for example, if the implementation detects that the referenced element is an SVG fragment); 1.1559 + in the latter case, the layout of the referenced element in the image must not be changed by the regeneration process. 1.1560 + That is, the image must look identical to the referenced element, 1.1561 + modulo rasterization quality. 1.1562 + 1.1563 + <div class=example> 1.1564 + 1.1565 +<p> As a somewhat silly example, a <code><p></code> element can be reused as a background elsewhere in the document: 1.1566 + 1.1567 + <pre> <style> 1.1568 + #src { color: white; background: lime; width: 300px; height: 40px; } 1.1569 + #dst { color: black; background: element(#src); padding: 20px; margin: 20px 0; } 1.1570 + </style> 1.1571 + <p id='src'>I'm an ordinary element!</p> 1.1572 + <p id='dst'>I'm using the previous element as my background!</p> 1.1573 +</pre> 1.1574 +<p> <img alt="" src=images/element-function.png> 1.1575 + </div> 1.1576 + 1.1577 + 1.1578 + </a><dt><a href=#element-not-rendered title=element-not-rendered>an <a href=#element-not-rendered title=element-not-rendered>element that is not rendered, but which <a href=#paint-source title=paint-source>provides a paint source 1.1579 + </a></a></a><dd><a href=#element-not-rendered title=element-not-rendered><a href=#element-not-rendered title=element-not-rendered><a href=#paint-source title=paint-source> 1.1580 + The function represents an image with the intrinsic size and appearance of the <a href=#paint-source title=paint-source>paint source. 1.1581 + The host language defines the size and appearance of paint sources. 1.1582 + 1.1583 + <div class=example> 1.1584 + For example, the <a class=css data-link-type=maybe href=#funcdef-element>element()</a> function can reference an SVG <code><pattern></code> element in an HTML document: 1.1585 + 1.1586 + <pre> <!DOCTYPE html> 1.1587 + <svg> 1.1588 + <defs> 1.1589 + <pattern id='pattern1'> 1.1590 + <path d='...'> 1.1591 + </pattern> 1.1592 + </defs> 1.1593 + </svg> 1.1594 + <p style="background: element(#pattern1)"> 1.1595 + I'm using the pattern as a background! 1.1596 + If the pattern is changed or animated, 1.1597 + my background will be updated too! 1.1598 + </p> 1.1599 +</pre> 1.1600 +<p> HTML also defines that a handful of elements, 1.1601 + such as <code><canvas></code>, <code><img></code>, and <code><video></code>, 1.1602 + provide a paint source. 1.1603 + This means that CSS can, for example, 1.1604 + reference a canvas that's being drawn into, 1.1605 + but not displayed in the page: 1.1606 + 1.1607 + <pre> <!DOCTYPE html> 1.1608 + <script> 1.1609 + var canvas = document.querySelector('#animated-bullet'); 1.1610 + canvas.width = 20; canvas.height = 20; 1.1611 + drawAnimation(canvas); 1.1612 + </script> 1.1613 + <canvas id='animated-bullet' style='display:none'></canvas> 1.1614 + <ul style="list-style-image: element(#animated-bullet);"> 1.1615 + <li>I'm using the canvas as a bullet!</li> 1.1616 + <li>So am I!</li> 1.1617 + <li>As the canvas is changed over time with Javascript, 1.1618 + we'll all update our bullet image with it!</li> 1.1619 + </ul> 1.1620 +</pre> </div> 1.1621 + 1.1622 + 1.1623 + </a></a></a></a><dt><a href=#element-not-rendered title=element-not-rendered><a href=#element-not-rendered title=element-not-rendered><a href=#paint-source title=paint-source><a href=#paint-source title=paint-source>anything else 1.1624 + </a></a></a></a><dd><a href=#element-not-rendered title=element-not-rendered><a href=#element-not-rendered title=element-not-rendered><a href=#paint-source title=paint-source><a href=#paint-source title=paint-source> 1.1625 + 1.1626 +<p> The function represents an <a href=#invalid-image>invalid image</a>. 1.1627 + 1.1628 + <div class=example> 1.1629 + 1.1630 +<p> For example, all of the following <a class=css data-link-type=maybe href=#funcdef-element>element()</a> uses will result in a transparent background: 1.1631 + 1.1632 + <pre> <!DOCTYPE html> 1.1633 + <p id='one' style="display:none;">one</p> 1.1634 + <iframe src="http://example.com"> 1.1635 + <p id='two'>I'm fallback content!</p> 1.1636 + </iframe> 1.1637 + <ul> 1.1638 + <li style="background: element(#one);"> 1.1639 + A display:none element isn't rendered, and a P element 1.1640 + doesn't provide a paint source. 1.1641 + </li> 1.1642 + <li style="background: element(#two);"> 1.1643 + The descendants of a replaced element like an IFRAME 1.1644 + can't be used in element() either. 1.1645 + </li> 1.1646 + <li style="background: element(#three);"> 1.1647 + There's no element with an id of "three", so this also 1.1648 + gets rendered as a transparent image. 1.1649 + </li> 1.1650 + </ul> 1.1651 +</pre> </div> 1.1652 + 1.1653 + </a></a></a></a></dl><a href=#element-not-rendered title=element-not-rendered><a href=#element-not-rendered title=element-not-rendered><a href=#paint-source title=paint-source><a href=#paint-source title=paint-source> 1.1654 + 1.1655 +<p> An element is <dfn data-dfn-type=dfn id=element-not-rendered title=element-not-rendered>not rendered</dfn> if it does not have an associated box. 1.1656 + This can happen, for example, 1.1657 + if the element or an ancestor is <span class=css data-link-type=maybe>display:none</span>. 1.1658 + Host languages may define additional ways in which an element can be considered not rendered; 1.1659 + for example, in SVG, 1.1660 + any descendant of a <code><defs></code> element is considered to be not rendered. 1.1661 + 1.1662 + <div class=example> 1.1663 + 1.1664 +<p> The <a class=css data-link-type=maybe href=#funcdef-element>element()</a> function can be put to many uses. 1.1665 + For example, it can be used to show a preview of the previous or next slide in a slideshow: 1.1666 + 1.1667 + <pre> <!DOCTYPE html> 1.1668 + <script> 1.1669 + function navigateSlides() { 1.1670 + var currentSlide = ...; 1.1671 + document.querySelector('#prev-slide').id = ''; 1.1672 + document.querySelector('#next-slide').id = ''; 1.1673 + currentSlide.previousElementSibling.id = 'prev-slide'; 1.1674 + currentSlide.nextElementSibling.id = 'next-slide'; 1.1675 + } 1.1676 + </script> 1.1677 + <style> 1.1678 + #prev-preview, #next-preview { 1.1679 + position: fixed; 1.1680 + ... 1.1681 + } 1.1682 + #prev-preview { background: element(#prev-slide); } 1.1683 + #next-preview { background: element(#next-slide); } 1.1684 + </style> 1.1685 + <a id='prev-preview'>Previous Slide</a> 1.1686 + <a id='next-preview'>Next Slide</a> 1.1687 + <section class='slide'>...</section> 1.1688 + <section class='slide current-slide'>...</section> 1.1689 + ... 1.1690 +</pre> 1.1691 +<p> In this example, the <code>navigateSlides</code> function updates the ids of the next and previous slides, 1.1692 + which are then displayed in small floating boxes alongside the slides. 1.1693 + Since you can't interact with the slides through the <a class=css data-link-type=maybe href=#funcdef-element>element()</a> function (it's just an image), 1.1694 + you could even use <code>click</code> handlers on the preview boxes to help navigate through the page. 1.1695 + </div> 1.1696 + 1.1697 +<h4 data-level=3.4.1 id=paint-sources><span class=secno>3.4.1 </span><span class=content> 1.1698 +Paint Sources</span><a class=section-link href=#paint-sources>§</a></h4> 1.1699 + 1.1700 +<p> Host languages may define that some elements provide a <dfn data-dfn-type=dfn id=paint-source title=paint-source>paint source</dfn>. 1.1701 + Paint sources have an intrinsic width, height, and appearance, 1.1702 + separate from the process of rendering, 1.1703 + and so may be used as images even when they're <a href=#element-not-rendered title=element-not-rendered>not rendered. 1.1704 + 1.1705 +</a><p><a href=#element-not-rendered title=element-not-rendered> In HTML, the <code><img></code>, <code><video></code>, and <code><canvas></code> elements provide paint sources 1.1706 + (defined in each element's section in <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/>HTML5</a>). 1.1707 + 1.1708 +</a><p><a href=#element-not-rendered title=element-not-rendered> In SVG, any element that provides a <a href=http://www.w3.org/TR/SVG/pservers.html>paint server</a> provides a paint source. 1.1709 + <span class=note>Note: In SVG1.1, 1.1710 + the <code><linearGradient></code>, 1.1711 + <code><radialGradient></code>, 1.1712 + and <code><pattern></code> elements 1.1713 + provide paint sources.</span> 1.1714 + They are drawn as described in the spec, 1.1715 + with the coordinate systems defined as follows: 1.1716 + 1.1717 + </a><dl><a href=#element-not-rendered title=element-not-rendered> 1.1718 + <dt>objectBoundingBox 1.1719 + <dd> 1.1720 + The coordinate system has its origin at the top left corner of the rectangle defined by the <a href=#concrete-object-size>concrete object size</a> that it's being drawn into, 1.1721 + and the same width and height as the <a href=#concrete-object-size>concrete object size</a>. 1.1722 + A single <a href=http://www.w3.org/TR/SVG/coords.html#Units>user coordinate</a> is the width and height of the <a href=#concrete-object-size>concrete object size</a>. 1.1723 + 1.1724 + <dt>userSpaceOnUse 1.1725 + <dd> 1.1726 + The coordinate system has its origin at the top left corner of the rectangle defined by the <a href=#concrete-object-size>concrete object size</a> that it's being drawn into, 1.1727 + and the same width and height as the <a href=#concrete-object-size>concrete object size</a>. 1.1728 + <a href=http://www.w3.org/TR/SVG/coords.html#Units>User coordinates</a> are sized equivalently to the CSS <span class=css data-link-type=maybe>px</span> unit. 1.1729 + </a></dl><a href=#element-not-rendered title=element-not-rendered> 1.1730 + 1.1731 +<p class=note> Note: It is expected that a future version of this module will define ways to refer to paint sources in external documents, 1.1732 + or ones that are created solely by script and never inserted into a document at all. 1.1733 + 1.1734 +<h4 data-level=3.4.2 id=element-cycles><span class=secno>3.4.2 </span><span class=content> 1.1735 +Cycle Detection</span><a class=section-link href=#element-cycles>§</a></h4> 1.1736 + 1.1737 +<p> The <a class=css data-link-type=maybe href=#funcdef-element>element()</a> function can produce nonsensical circular relationships, 1.1738 + such as an element using itself as its own background. 1.1739 + These relationships can be easily and reliably detected and resolved, however, 1.1740 + by keeping track of a dependency graph and using common cycle-detection algorithms. 1.1741 + 1.1742 +<p> The dependency graph consists of edges such that: 1.1743 + 1.1744 +<p> <ul> 1.1745 + <li> 1.1746 + every element depends on its children 1.1747 + 1.1748 + <li> 1.1749 + for any element A with a property using the <a class=css data-link-type=maybe href=#funcdef-element>element()</a> function pointing to an element B, 1.1750 + A depends on B 1.1751 + 1.1752 + <li> 1.1753 + if a host language defines a way for elements to refer to the rendering of other elements, 1.1754 + the referencing element depends on the referenced element. 1.1755 + For example, in SVG, 1.1756 + a <code><use></code> element depends on the element it referenced. 1.1757 + </ul> 1.1758 + 1.1759 +<p> If the graph contains a cycle, 1.1760 + any <a class=css data-link-type=maybe href=#funcdef-element>element()</a> functions participating in the cycle are <a href=#invalid-image>invalid images</a>. 1.1761 + 1.1762 + 1.1763 <!-- 1.1764 - -->#src { color: white; background: lime; width: 300px; height: 40px; } 1.1765 -<!-- 1.1766 - -->#dst { color: black; background: element(#src); padding: 20px; margin: 20px 0; } 1.1767 -<!-- 1.1768 - --></style> 1.1769 -<!-- 1.1770 - --><p id='src'>I'm an ordinary element!</p> 1.1771 -<!-- 1.1772 - --><p id='dst'>I'm using the previous element as my background!</p></pre> 1.1773 - <img alt="" src="images/element-function.png"></div> 1.1774 - 1.1775 - <dt>an <a href="#element-not-rendered"><i 1.1776 - title=element-not-rendered>element that is not rendered</i></a>, but 1.1777 - which <a href="#paint-source"><i title=paint-source>provides a paint 1.1778 - source</i></a> 1.1779 - 1.1780 - <dd> 1.1781 - <p> The function represents an image with the intrinsic size and 1.1782 - appearance of the <a href="#paint-source"><i title=paint-source>paint 1.1783 - source</i></a>. The host language defines the size and appearance of 1.1784 - paint sources. 1.1785 - 1.1786 - <div class=example> 1.1787 - <p> For example, the ‘<code class=css>element()</code>’ function can 1.1788 - reference an SVG <code><pattern></code> element in an HTML document: 1.1789 - 1.1790 - <pre><!-- 1.1791 - --><!DOCTYPE html> 1.1792 -<!-- 1.1793 - --><svg> 1.1794 -<!-- 1.1795 - --> <defs> 1.1796 -<!-- 1.1797 - --> <pattern id='pattern1'> 1.1798 -<!-- 1.1799 - --> <path d='...'> 1.1800 -<!-- 1.1801 - --> </pattern> 1.1802 -<!-- 1.1803 - --> </defs> 1.1804 -<!-- 1.1805 - --></svg> 1.1806 -<!-- 1.1807 - --><p style="background: element(#pattern1)"> 1.1808 -<!-- 1.1809 - --> I'm using the pattern as a background! 1.1810 -<!-- 1.1811 - --> If the pattern is changed or animated, 1.1812 -<!-- 1.1813 - --> my background will be updated too! 1.1814 -<!-- 1.1815 - --></p></pre> 1.1816 - 1.1817 - <p> HTML also defines that a handful of elements, such as 1.1818 - <code><canvas></code>, <code><img></code>, and 1.1819 - <code><video></code>, provide a paint source. This means that CSS 1.1820 - can, for example, reference a canvas that's being drawn into, but not 1.1821 - displayed in the page: 1.1822 - 1.1823 - <pre><!-- 1.1824 - --><!DOCTYPE html> 1.1825 -<!-- 1.1826 - --><script> 1.1827 -<!-- 1.1828 - --> var canvas = document.querySelector('#animated-bullet'); 1.1829 -<!-- 1.1830 - --> canvas.width = 20; canvas.height = 20; 1.1831 -<!-- 1.1832 - --> drawAnimation(canvas); 1.1833 -<!-- 1.1834 - --></script> 1.1835 -<!-- 1.1836 - --><canvas id='animated-bullet' style='display:none'></canvas> 1.1837 -<!-- 1.1838 - --><ul style="list-style-image: element(#animated-bullet);"> 1.1839 -<!-- 1.1840 - --> <li>I'm using the canvas as a bullet!</li> 1.1841 -<!-- 1.1842 - --> <li>So am I!</li> 1.1843 -<!-- 1.1844 - --> <li>As the canvas is changed over time with Javascript, 1.1845 -<!-- 1.1846 - --> we'll all update our bullet image with it!</li> 1.1847 -<!-- 1.1848 - --></ul></pre> 1.1849 - </div> 1.1850 - 1.1851 - <dt>anything else 1.1852 - 1.1853 - <dd> 1.1854 - <p> The function represents an <a href="#invalid-image"><i>invalid 1.1855 - image</i></a>. 1.1856 - 1.1857 - <div class=example> 1.1858 - <p> For example, all of the following ‘<code 1.1859 - class=css>element()</code>’ uses will result in a transparent 1.1860 - background: 1.1861 - 1.1862 - <pre><!-- 1.1863 - --><!DOCTYPE html> 1.1864 -<!-- 1.1865 - --><p id='one' style="display:none;">one</p> 1.1866 -<!-- 1.1867 - --><iframe src="http://example.com"> 1.1868 -<!-- 1.1869 - --> <p id='two'>I'm fallback content!</p> 1.1870 -<!-- 1.1871 - --></iframe> 1.1872 -<!-- 1.1873 - --><ul> 1.1874 -<!-- 1.1875 - --> <li style="background: element(#one);"> 1.1876 -<!-- 1.1877 - --> A display:none element isn't rendered, and a P element 1.1878 -<!-- 1.1879 - --> doesn't provide a paint source. 1.1880 -<!-- 1.1881 - --> </li> 1.1882 -<!-- 1.1883 - --> <li style="background: element(#two);"> 1.1884 -<!-- 1.1885 - --> The descendants of a replaced element like an IFRAME 1.1886 -<!-- 1.1887 - --> can't be used in element() either. 1.1888 -<!-- 1.1889 - --> </li> 1.1890 -<!-- 1.1891 - --> <li style="background: element(#three);"> 1.1892 -<!-- 1.1893 - --> There's no element with an id of "three", so this also 1.1894 -<!-- 1.1895 - --> gets rendered as a transparent image. 1.1896 -<!-- 1.1897 - --> </li> 1.1898 -<!-- 1.1899 - --></ul></pre> 1.1900 - </div> 1.1901 - </dl> 1.1902 - 1.1903 - <p> An element is <dfn id=element-not-rendered 1.1904 - title=element-not-rendered>not rendered</dfn> if it does not have an 1.1905 - associated box. This can happen, for example, if the element or an 1.1906 - ancestor is ‘<code class=css>display:none</code>’. Host languages may 1.1907 - define additional ways in which an element can be considered not rendered; 1.1908 - for example, in SVG, any descendant of a <code><defs></code> element is 1.1909 - considered to be not rendered. 1.1910 - 1.1911 - <div class=example> 1.1912 - <p> The ‘<code class=css>element()</code>’ function can be put to many 1.1913 - uses. For example, it can be used to show a preview of the previous or 1.1914 - next slide in a slideshow: 1.1915 - 1.1916 - <pre><!-- 1.1917 - --><!DOCTYPE html> 1.1918 -<!-- 1.1919 - --><script> 1.1920 -<!-- 1.1921 - -->function navigateSlides() { 1.1922 -<!-- 1.1923 - --> var currentSlide = ...; 1.1924 -<!-- 1.1925 - --> document.querySelector('#prev-slide').id = ''; 1.1926 -<!-- 1.1927 - --> document.querySelector('#next-slide').id = ''; 1.1928 -<!-- 1.1929 - --> currentSlide.previousElementSibling.id = 'prev-slide'; 1.1930 -<!-- 1.1931 - --> currentSlide.nextElementSibling.id = 'next-slide'; 1.1932 -<!-- 1.1933 - -->} 1.1934 -<!-- 1.1935 - --></script> 1.1936 -<!-- 1.1937 - --><style> 1.1938 -<!-- 1.1939 - -->#prev-preview, #next-preview { 1.1940 -<!-- 1.1941 - --> position: fixed; 1.1942 -<!-- 1.1943 - --> ... 1.1944 -<!-- 1.1945 - -->} 1.1946 -<!-- 1.1947 - -->#prev-preview { background: element(#prev-slide); } 1.1948 -<!-- 1.1949 - -->#next-preview { background: element(#next-slide); } 1.1950 -<!-- 1.1951 - --></style> 1.1952 -<!-- 1.1953 - --><a id='prev-preview'>Previous Slide</a> 1.1954 -<!-- 1.1955 - --><a id='next-preview'>Next Slide</a> 1.1956 -<!-- 1.1957 - --><section class='slide'>...</section> 1.1958 -<!-- 1.1959 - --><section class='slide current-slide'>...</section> 1.1960 -<!-- 1.1961 - -->...</pre> 1.1962 - 1.1963 - <p> In this example, the <code>navigateSlides</code> function updates the 1.1964 - ids of the next and previous slides, which are then displayed in small 1.1965 - floating boxes alongside the slides. Since you can't interact with the 1.1966 - slides through the ‘<code class=css>element()</code>’ function (it's 1.1967 - just an image), you could even use <code>click</code> handlers on the 1.1968 - preview boxes to help navigate through the page. 1.1969 - </div> 1.1970 - 1.1971 - <h4 id=paint-sources><span class=secno>3.4.1. </span> Paint Sources</h4> 1.1972 - 1.1973 - <p> Host languages may define that some elements provide a <dfn 1.1974 - id=paint-source title=paint-source>paint source</dfn>. Paint sources have 1.1975 - an intrinsic width, height, and appearance, separate from the process of 1.1976 - rendering, and so may be used as images even when they're <a 1.1977 - href="#element-not-rendered"><i title=element-not-rendered>not 1.1978 - rendered</i></a>. 1.1979 - 1.1980 - <p> In HTML, the <code><img></code>, <code><video></code>, and 1.1981 - <code><canvas></code> elements provide paint sources (defined in each 1.1982 - element's section in <a 1.1983 - href="http://www.whatwg.org/specs/web-apps/current-work/multipage/">HTML5</a>). 1.1984 - 1.1985 - <p> In SVG, any element that provides a <a 1.1986 - href="http://www.w3.org/TR/SVG/pservers.html">paint server</a> provides a 1.1987 - paint source. <span class=note>Note: In SVG1.1, the 1.1988 - <code><linearGradient></code>, <code><radialGradient></code>, and 1.1989 - <code><pattern></code> elements provide paint sources.</span> They are 1.1990 - drawn as described in the spec, with the coordinate systems defined as 1.1991 - follows: 1.1992 - 1.1993 - <dl> 1.1994 - <dt>objectBoundingBox 1.1995 - 1.1996 - <dd> The coordinate system has its origin at the top left corner of the 1.1997 - rectangle defined by the <a href="#concrete-object-size"><i>concrete 1.1998 - object size</i></a> that it's being drawn into, and the same width and 1.1999 - height as the <a href="#concrete-object-size"><i>concrete object 1.2000 - size</i></a>. A single <a 1.2001 - href="http://www.w3.org/TR/SVG/coords.html#Units">user coordinate</a> is 1.2002 - the width and height of the <a href="#concrete-object-size"><i>concrete 1.2003 - object size</i></a>. 1.2004 - 1.2005 - <dt>userSpaceOnUse 1.2006 - 1.2007 - <dd> The coordinate system has its origin at the top left corner of the 1.2008 - rectangle defined by the <a href="#concrete-object-size"><i>concrete 1.2009 - object size</i></a> that it's being drawn into, and the same width and 1.2010 - height as the <a href="#concrete-object-size"><i>concrete object 1.2011 - size</i></a>. <a href="http://www.w3.org/TR/SVG/coords.html#Units">User 1.2012 - coordinates</a> are sized equivalently to the CSS ‘<code 1.2013 - class=css>px</code>’ unit. 1.2014 - </dl> 1.2015 - 1.2016 - <p class=note> It is expected that a future version of this module will 1.2017 - define ways to refer to paint sources in external documents, or ones that 1.2018 - are created solely by script and never inserted into a document at all. 1.2019 - 1.2020 - <h4 id=element-cycles><span class=secno>3.4.2. </span> Cycle Detection</h4> 1.2021 - 1.2022 - <p> The ‘<code class=css>element()</code>’ function can produce 1.2023 - nonsensical circular relationships, such as an element using itself as its 1.2024 - own background. These relationships can be easily and reliably detected 1.2025 - and resolved, however, by keeping track of a dependency graph and using 1.2026 - common cycle-detection algorithms. 1.2027 - 1.2028 - <p> The dependency graph consists of edges such that: 1.2029 - 1.2030 - <ul> 1.2031 - <li> every element depends on its children 1.2032 - 1.2033 - <li> for any element A with a property using the ‘<code 1.2034 - class=css>element()</code>’ function pointing to an element B, A 1.2035 - depends on B 1.2036 - 1.2037 - <li> if a host language defines a way for elements to refer to the 1.2038 - rendering of other elements, the referencing element depends on the 1.2039 - referenced element. For example, in SVG, a <code><use></code> element 1.2040 - depends on the element it referenced. 1.2041 - </ul> 1.2042 - 1.2043 - <p> If the graph contains a cycle, any ‘<code 1.2044 - class=css>element()</code>’ functions participating in the cycle are <a 1.2045 - href="#invalid-image"><i>invalid images</i></a>. <!-- 1.2046 dddddddd 1.2047 CCCCCCCCCCCCC ffffffffffffffff d::::::d 1.2048 CCC::::::::::::C f::::::::::::::::f d::::::d 1.2049 @@ -1299,55 +925,52 @@ 1.2050 CCCCCCCCCCCCC rrrrrrr ooooooooooo sssssssssss sssssssssss fffffffff aaaaaaaaaa aaaa ddddddddd ddddd eeeeeeeeeeeeee 1.2051 --> 1.2052 1.2053 - <h3 id=cross-fade-function><span class=secno>3.5. </span> Combining images: 1.2054 - the ‘<code class=css>cross-fade()</code>’ notation</h3> 1.2055 - 1.2056 - <p> When transitioning between images, CSS requires a way to explicitly 1.2057 - refer to the intermediate image that is a combination of the start and end 1.2058 - images. This is accomplished with the ‘<code 1.2059 - class=css>cross-fade()</code>’ function, which indicates the two images 1.2060 - to be combined and how far along in the transition the combination is. 1.2061 - 1.2062 - <p class=note> Authors can also use the ‘<code 1.2063 - class=css>cross-fade()</code>’ function for many simple image 1.2064 - manipulations, such as tinting an image with a solid color or highlighting 1.2065 - a particular area of the page by combining an image with a radial 1.2066 - gradient. 1.2067 - 1.2068 - <p> The syntax for ‘<code class=css>cross-fade()</code>’ is defined as: 1.2069 - 1.2070 - <pre class=prod><dfn 1.2071 - id=ltimage-combination><image-combination></dfn> = cross-fade( <var><percentage></var>? <a 1.2072 - href="#image-type"><var><image></var></a> [, <a 1.2073 - href="#image-type"><var><image></var></a> | <var><color></var> ]? )</pre> 1.2074 - 1.2075 - <p> The function represents an image generated by combining two images. 1.2076 - 1.2077 - <p> The <var><percentage></var> represents how much of the first image 1.2078 - is retained when it is blended with the second image. The 1.2079 - <var><percentage></var> must be between ‘<code class=css>0%</code>’ 1.2080 - and ‘<code class=css>100%</code>’ inclusive; any other value is 1.2081 - invalid. If omitted, it defaults to the value ‘<code 1.2082 - class=css>50%</code>’. 1.2083 - 1.2084 - <p> If the last argument is a <var><color></var>, it represents a 1.2085 - solid-color image with the same intrinsic dimensions as the first image. 1.2086 - If omitted, it defaults to the color ‘<code 1.2087 - class=css>transparent</code>’. 1.2088 - 1.2089 - <p> More precisely, given ‘<code class=css>cross-fade(<var>p</var> 1.2090 - <var>A</var>, <var>B</var>)</code>’, where <var>A</var> and <var>B</var> 1.2091 - are images and <var>p</var> is a percentage between 0% and 100%, the 1.2092 - function represents an image with width equal to <code>width<sub>A</sub> 1.2093 - × <var>p</var> + width<sub>B</sub> × (1-<var>p</var>)</code> and height 1.2094 - equal to <code>height<sub>A</sub> × <var>p</var> + height<sub>B</sub> × 1.2095 - (1-<var>p</var>)</code>. The contents of the image must be constructed by 1.2096 - first scaling <var>A</var> and <var>B</var> to the size of the generated 1.2097 - image, then applying <code>dissolve(<var>A</var>,<var>p</var>) plus 1.2098 - dissolve(<var>B</var>,1-<var>p</var>)</code>. The "dissolve()" function 1.2099 - and "plus" compositing operator are defined in the literature by 1.2100 - Porter-Duff. <a href="#PORTERDUFF" 1.2101 - rel=biblioentry>[PORTERDUFF]<!--{{PORTERDUFF}}--></a> <!-- 1.2102 +<h3 data-level=3.5 id=cross-fade-function><span class=secno>3.5 </span><span class=content> 1.2103 +Combining images: the <a class=css data-link-type=maybe href=#funcdef-cross-fade>cross-fade()</a> notation</span><a class=section-link href=#cross-fade-function>§</a></h3> 1.2104 + 1.2105 +<p> When transitioning between images, 1.2106 + CSS requires a way to explicitly refer to the intermediate image 1.2107 + that is a combination of the start and end images. 1.2108 + This is accomplished with the <a class=css data-link-type=maybe href=#funcdef-cross-fade>cross-fade()</a> function, 1.2109 + which indicates the two images to be combined 1.2110 + and how far along in the transition the combination is. 1.2111 + 1.2112 +<p class=note> Note: Authors can also use the <a class=css data-link-type=maybe href=#funcdef-cross-fade>cross-fade()</a> function for many simple image manipulations, 1.2113 + such as tinting an image with a solid color 1.2114 + or highlighting a particular area of the page by combining an image with a radial gradient. 1.2115 + 1.2116 +<p> The syntax for <a class=css data-link-type=maybe href=#funcdef-cross-fade>cross-fade()</a> is defined as: 1.2117 + 1.2118 +<pre class=prod><dfn data-dfn-type=function id=funcdef-cross-fade>cross-fade()</dfn> = cross-fade( <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage><var><percentage></var></a>? <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type><var><image></var></a> [, <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type><var><image></var></a> | <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-color><var><color></var></a> ]? )</pre> 1.2119 +<p> The function represents an image generated by 1.2120 + combining two images. 1.2121 + 1.2122 +<p> The <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage><var><percentage></var></a> represents how much of the first image is retained 1.2123 + when it is blended with the second image. 1.2124 + The <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage><var><percentage></var></a> must be between <span class=css data-link-type=maybe>0%</span> and <span class=css data-link-type=maybe>100%</span> inclusive; 1.2125 + any other value is invalid. 1.2126 + If omitted, 1.2127 + it defaults to the value <span class=css data-link-type=maybe>50%</span>. 1.2128 + 1.2129 +<p> If the last argument is a <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-color><var><color></var></a>, 1.2130 + it represents a solid-color image with the same intrinsic dimensions as the first image. 1.2131 + If omitted, 1.2132 + it defaults to the color <span class=css data-link-type=maybe>transparent</span>. 1.2133 + 1.2134 +<p> More precisely, 1.2135 + given <span class=css data-link-type=maybe>cross-fade(<var>p</var> <var>A</var>, <var>B</var>)</span>, 1.2136 + where <var>A</var> and <var>B</var> are images 1.2137 + and <var>p</var> is a percentage between 0% and 100%, 1.2138 + the function represents an image 1.2139 + with width equal to <code>width<sub>A</sub> × <var>p</var> + width<sub>B</sub> × (1-<var>p</var>)</code> 1.2140 + and height equal to <code>height<sub>A</sub> × <var>p</var> + height<sub>B</sub> × (1-<var>p</var>)</code>. 1.2141 + The contents of the image must be constructed by 1.2142 + first scaling <var>A</var> and <var>B</var> to the size of the generated image, 1.2143 + then applying <code>dissolve(<var>A</var>,<var>p</var>) plus dissolve(<var>B</var>,1-<var>p</var>)</code>. 1.2144 + The "dissolve()" function and "plus" compositing operator are defined in the literature by Porter-Duff. <a data-biblio-type=informative data-link-type=biblio href=#porterduff title=PORTERDUFF>[PORTERDUFF]</a> 1.2145 + 1.2146 + 1.2147 +<!-- 1.2148 dddddddd 1.2149 GGGGGGGGGGGGG d::::::d iiii tttt 1.2150 GGG::::::::::::G d::::::d i::::i ttt:::t 1.2151 @@ -1366,63 +989,51 @@ 1.2152 GGG::::::GGG:::G r:::::r a::::::::::aa:::a d:::::::::ddd::::di::::::i ee:::::::::::::e n::::n n::::n tt:::::::::::tt s:::::::::::ss 1.2153 GGGGGG GGGG rrrrrrr aaaaaaaaaa aaaa ddddddddd dddddiiiiiiii eeeeeeeeeeeeee nnnnnn nnnnnn ttttttttttt sssssssssss 1.2154 1.2155 ---> 1.2156 - 1.2157 - <h2 id=gradients><span class=secno>4. </span> Gradients</h2> 1.2158 - 1.2159 - <p> A gradient is an image that smoothly fades from one color to another. 1.2160 - These are commonly used for subtle shading in background images, buttons, 1.2161 - and many other things. The gradient notations described in this section 1.2162 - allow an author to specify such an image in a terse syntax, so that the UA 1.2163 - can generate the image automatically when rendering the page. The syntax 1.2164 - of a <a href="#gradient-type"><var><gradient></var></a> is: 1.2165 - 1.2166 - <pre class=prod><dfn id=gradient-type><gradient></dfn> = [ 1.2167 +<p>--> 1.2168 + 1.2169 + 1.2170 +<h2 data-level=4 id=gradients><span class=secno>4 </span><span class=content> 1.2171 +Gradients</span><a class=section-link href=#gradients>§</a></h2> 1.2172 + 1.2173 +<p> A gradient is an image that smoothly fades from one color to another. 1.2174 + These are commonly used for subtle shading in background images, buttons, and many other things. 1.2175 + The gradient notations described in this section allow an author to specify such an image in a terse syntax, 1.2176 + so that the UA can generate the image automatically when rendering the page. 1.2177 + The syntax of a <a class=production data-link-type=type href=#gradient-type><var><gradient></var></a> is: 1.2178 + 1.2179 + <pre class=prod> <dfn data-dfn-type=type id=gradient-type><gradient></dfn> = [ 1.2180 + <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-4/#linear-gradient-type><var><linear-gradient></var></a> | <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-4/#repeating-linear-gradient-type><var><repeating-linear-gradient></var></a> | 1.2181 + <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-4/#radial-gradient-type><var><radial-gradient></var></a> | <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-4/#repeating-radial-gradient-type><var><repeating-radial-gradient></var></a> | 1.2182 + <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-4/#conic-gradient-type><var><conic-gradient></var></a> | <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-4/#repeating-conic-gradient-type><var><repeating-conic-gradient></var></a> ] 1.2183 +</pre> 1.2184 + <div class=example> 1.2185 + 1.2186 +<p> As with the other <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type><var><image></var></a> types defined in this specification, 1.2187 + gradients can be used in any property that accepts images. 1.2188 + For example: 1.2189 + 1.2190 +<p> <ul> 1.2191 + <li><code>background: linear-gradient(white, gray);</code> 1.2192 + <li><code>list-style-image: radial-gradient(circle, #006, #00a 90%, #0000af 100%, white 100%)</code> 1.2193 + </ul> 1.2194 + </div> 1.2195 + 1.2196 +<p> A gradient is drawn into a box with the dimensions of the <a href=#concrete-object-size>concrete object size</a>, 1.2197 + referred to as the <dfn data-dfn-type=dfn id=gradient-box>gradient box</dfn>. 1.2198 + However, the gradient itself has no <a href=#intrinsic-dimensions>intrinsic dimensions</a>. 1.2199 + 1.2200 + <div class=example> 1.2201 + For example, if you use a gradient as a background, 1.2202 + by default the gradient will draw into a <a href=#gradient-box>gradient box</a> the size of the element's padding box. 1.2203 + If <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-4/#background-size title=background-size>background-size</a> is explicitly set to a value such as <span class=css data-link-type=maybe>100px 200px</span>, 1.2204 + then the <a href=#gradient-box>gradient box</a> will be 100px wide and 200px tall. 1.2205 + Similarly, for a gradient used as a <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-lists-3/#list-style-image title=list-style-image>list-style-image</a>, 1.2206 + the box would be a 1em square, 1.2207 + which is the <a href=#default-object-size>default object size</a> for that property. 1.2208 + </div> 1.2209 + 1.2210 + 1.2211 <!-- 1.2212 - --> <a 1.2213 - href="#linear-gradient-type"><var><linear-gradient></var></a> | <a 1.2214 - href="#repeating-linear-gradient-type"><var><repeating-linear-gradient></var></a> | 1.2215 -<!-- 1.2216 - --> <a 1.2217 - href="#radial-gradient-type"><var><radial-gradient></var></a> | <a 1.2218 - href="#repeating-radial-gradient-type"><var><repeating-radial-gradient></var></a> | 1.2219 -<!-- 1.2220 - --> <a 1.2221 - href="#conic-gradient-type"><var><conic-gradient></var></a> | <a 1.2222 - href="#repeating-conic-gradient-type"><var><repeating-conic-gradient></var></a> ]</pre> 1.2223 - 1.2224 - <div class=example> 1.2225 - <p> As with the other <a href="#image-type"><var><image></var></a> 1.2226 - types defined in this specification, gradients can be used in any 1.2227 - property that accepts images. For example: 1.2228 - 1.2229 - <ul> 1.2230 - <li><code>background: linear-gradient(white, gray);</code> 1.2231 - 1.2232 - <li><code>list-style-image: radial-gradient(circle, #006, #00a 90%, 1.2233 - #0000af 100%, white 100%)</code> 1.2234 - </ul> 1.2235 - </div> 1.2236 - 1.2237 - <p> A gradient is drawn into a box with the dimensions of the <a 1.2238 - href="#concrete-object-size"><i>concrete object size</i></a>, referred to 1.2239 - as the <dfn id=gradient-box>gradient box</dfn>. However, the gradient 1.2240 - itself has no <a href="#intrinsic-dimensions"><i>intrinsic 1.2241 - dimensions</i></a>. 1.2242 - 1.2243 - <div class=example> 1.2244 - <p> For example, if you use a gradient as a background, by default the 1.2245 - gradient will draw into a <a href="#gradient-box"><i>gradient box</i></a> 1.2246 - the size of the element's padding box. If ‘<code 1.2247 - class=property>background-size</code>’ is explicitly set to a value 1.2248 - such as ‘<code class=css>100px 200px</code>’, then the <a 1.2249 - href="#gradient-box"><i>gradient box</i></a> will be 100px wide and 200px 1.2250 - tall. Similarly, for a gradient used as a ‘<code 1.2251 - class=property>list-style-image</code>’, the box would be a 1em square, 1.2252 - which is the <a href="#default-object-size"><i>default object 1.2253 - size</i></a> for that property. 1.2254 - </div> 1.2255 - <!-- 1.2256 LLLLLLLLLLL iiii 1.2257 L:::::::::L i::::i 1.2258 L:::::::::L iiii 1.2259 @@ -1441,187 +1052,144 @@ 1.2260 LLLLLLLLLLLLLLLLLLLLLLLLiiiiiiii nnnnnn nnnnnn eeeeeeeeeeeeee aaaaaaaaaa aaaarrrrrrr 1.2261 --> 1.2262 1.2263 - <h3 id=linear-gradients><span class=secno>4.1. </span> Linear Gradients: 1.2264 - the ‘<code class=css>linear-gradient()</code>’ notation</h3> 1.2265 - 1.2266 - <p> A linear gradient is created by specifying a gradient line and then 1.2267 - several colors placed along that line. The image is constructed by 1.2268 - creating an infinite canvas and painting it with lines perpendicular to 1.2269 - the gradient line, with the color of the painted line being the color of 1.2270 - the gradient line where the two intersect. This produces a smooth fade 1.2271 - from each color to the next, progressing in the specified direction. 1.2272 - <!-- ====================================================================== --> 1.2273 - 1.2274 - <h4 class=no-toc id=linear-gradient-syntax><span class=secno>4.1.1. </span> 1.2275 - linear-gradient() syntax</h4> 1.2276 - 1.2277 - <p>The linear gradient syntax is: 1.2278 - 1.2279 - <pre class=prod><!-- 1.2280 - --><dfn 1.2281 - id=linear-gradient-type><linear-gradient></dfn> = linear-gradient( 1.2282 + 1.2283 +<h3 data-level=4.1 id=linear-gradients><span class=secno>4.1 </span><span class=content> 1.2284 +Linear Gradients: the <a class=css data-link-type=maybe href=#funcdef-linear-gradient>linear-gradient()</a> notation</span><a class=section-link href=#linear-gradients>§</a></h3> 1.2285 + 1.2286 +<p> A linear gradient is created by specifying a <dfn data-dfn-type=dfn id=gradient-line>gradient line</dfn> 1.2287 + and then several colors placed along that line. 1.2288 + The image is constructed by creating an infinite canvas 1.2289 + and painting it with lines perpendicular to the gradient line, 1.2290 + with the color of the painted line being the color of the gradient line where the two intersect. 1.2291 + This produces a smooth fade from each color to the next, 1.2292 + progressing in the specified direction. 1.2293 + 1.2294 +<h4 class=no-toc data-level=4.1.1 id=linear-gradient-syntax><span class=secno>4.1.1 </span><span class=content> 1.2295 +linear-gradient() syntax</span><a class=section-link href=#linear-gradient-syntax>§</a></h4> 1.2296 + 1.2297 +<p>The linear gradient syntax is: 1.2298 + 1.2299 + <pre class=prod> <dfn data-dfn-type=function id=funcdef-linear-gradient>linear-gradient()</dfn> = linear-gradient( 1.2300 + [ [ <a class=production data-link-type=type href=#typedef-angle><var><angle></var></a> | to <a class=production data-link-type=type href=#typedef-side-or-corner><var><side-or-corner></var></a> ] ,]? 1.2301 + <a class=production data-link-type=type href=#typedef-color-stop-list><var><color-stop-list></var></a> 1.2302 + ) 1.2303 + <dfn data-dfn-type=type id=typedef-side-or-corner><side-or-corner></dfn> = [left | right] || [top | bottom] 1.2304 +</pre> 1.2305 +<p> The first argument to the function specifies the <a href=#gradient-line>gradient line</a>, 1.2306 + which gives the gradient a direction and determines how color-stops are positioned. 1.2307 + It may be omitted; 1.2308 + if so, it defaults to <span class=css data-link-type=maybe>to bottom</span>. 1.2309 + 1.2310 +<p> The <a href=#gradient-line>gradient line's</a> direction may be specified in two ways: 1.2311 + 1.2312 + <dl> 1.2313 + <dt>using angles 1.2314 + <dd> 1.2315 + For the purpose of this argument, 1.2316 + <span class=css data-link-type=maybe>0deg</span> points upward, 1.2317 + and positive angles represent clockwise rotation, 1.2318 + so <span class=css data-link-type=maybe>90deg</span> point toward the right. 1.2319 + 1.2320 + <dt>using keywords 1.2321 + <dd> 1.2322 + If the argument is <span class=css data-link-type=maybe>to top</span>, <span class=css data-link-type=maybe>to right</span>, <span class=css data-link-type=maybe>to bottom</span>, or <span class=css data-link-type=maybe>to left</span>, 1.2323 + the angle of the <a href=#gradient-line>gradient line</a> is <span class=css data-link-type=maybe>0deg</span>, <span class=css data-link-type=maybe>90deg</span>, <span class=css data-link-type=maybe>180deg</span>, or <span class=css data-link-type=maybe>270deg</span>, respectively. 1.2324 + 1.2325 +<p> If the argument instead specifies a corner of the box such as <span class=css data-link-type=maybe>to top left</span>, 1.2326 + the <a href=#gradient-line>gradient line</a> must be angled such that it points into the same quadrant as the specified corner, 1.2327 + and is perpendicular to a line intersecting the two neighboring corners of the <a href=#gradient-box>gradient box</a>. 1.2328 + <span class=note>This causes a color-stop at 50% to intersect the two neighboring corners (see <a href=#corner-gradient-example>example</a>).</span> 1.2329 + </dl> 1.2330 + 1.2331 +<p> Starting from the center of the <a href=#gradient-box>gradient box</a>, 1.2332 + extend a line at the specified angle in both directions. 1.2333 + The ending point is the point on the <a href=#gradient-line>gradient line</a> 1.2334 + where a line drawn perpendicular to the <a href=#gradient-line>gradient line</a> 1.2335 + would intersect the corner of the <a href=#gradient-box>gradient box</a> in the specified direction. 1.2336 + The starting point is determined identically, but in the opposite direction. 1.2337 + 1.2338 +<p class=note> Note: It is expected that the next level of this module will provide the ability to define the gradient's direction relative to the current text direction and writing-mode. 1.2339 + 1.2340 + <div class=example> 1.2341 + <div style="overflow: hidden"> 1.2342 + <img alt="[An image showing a box with a background shading gradually from white in the bottom-left corner to black in the top-right corner. There is a line, illustrating the gradient line, angled at 45 degrees and passing through the center of the box. The starting point and ending point of the gradient line are indicated by the intersection of the gradient line with two additional lines that pass through the bottom-left and top-right corners of the box.]" src=images/gradient-diagram.png style="float: right; margin-left: 1em;"> 1.2343 + 1.2344 +<p> This example illustrates visually how to calculate the <a href=#gradient-line>gradient line</a> from the rules above. 1.2345 + This shows the starting and ending point of the <a href=#gradient-line>gradient line</a>, 1.2346 + long with the actual gradient, 1.2347 + produced by an element with <span class=css data-link-type=maybe>background: linear-gradient(45deg, white, black);</span>. 1.2348 + 1.2349 +<p> Notice how, though the starting point and ending point are outside of the box, 1.2350 + they're positioned precisely right so that the gradient is pure white <em>exactly</em> at the corner, 1.2351 + and pure black <em>exactly</em> at the opposite corner. 1.2352 + That's intentional, and will always be true for linear gradients. 1.2353 + </div> 1.2354 + </div> 1.2355 + 1.2356 +<p> The gradient's color stops are typically placed between the starting point and ending point on the <a href=#gradient-line>gradient line</a>, 1.2357 + but this isn't required - 1.2358 + the <a href=#gradient-line>gradient line</a> extends infinitely in both directions. 1.2359 + The starting point and ending point are merely arbitrary location markers - 1.2360 + the starting point defines where 0%, 0px, etc are located when specifying color-stops, 1.2361 + and the ending point defines where 100% is located. 1.2362 + Color-stops are allowed to have positions before 0% or after 100%. 1.2363 + 1.2364 +<p> The color of the gradient at any point is determined 1.2365 + by finding the unique line passing through that point that is perpendicular to the <a href=#gradient-line>gradient line</a>. 1.2366 + The point's color is the color of the <a href=#gradient-line>gradient line</a> 1.2367 + at the point where this line intersects it. 1.2368 + 1.2369 + 1.2370 +<h4 class=no-toc data-level=4.1.2 id=linear-gradient-examples><span class=secno>4.1.2 </span><span class=content> 1.2371 +Linear Gradient Examples</span><a class=section-link href=#linear-gradient-examples>§</a></h4> 1.2372 + 1.2373 +<p> All of the following <a class=css data-link-type=maybe href=#funcdef-linear-gradient>linear-gradient()</a> examples are presumed to be backgrounds applied to a box that is 200px wide and 100px tall. 1.2374 + 1.2375 + <div class=example> 1.2376 + Below are various ways of specifying a basic vertical gradient: 1.2377 + 1.2378 + <pre> linear-gradient(yellow, blue); 1.2379 + linear-gradient(to bottom, yellow, blue); 1.2380 + linear-gradient(180deg, yellow, blue); 1.2381 + linear-gradient(to top, blue, yellow); 1.2382 + linear-gradient(to bottom, yellow 0%, blue 100%); 1.2383 +</pre> 1.2384 +<p> <img alt="" src=images/linear1.png> 1.2385 + </div> 1.2386 + 1.2387 + <div class=example> 1.2388 + This demonstrates the use of an angle in the gradient. 1.2389 + Note that, though the angle is not exactly the same as the angle between the corners, 1.2390 + the <a href=#gradient-line>gradient line</a> is still sized so as to make the gradient yellow exactly at the upper-left corner, 1.2391 + and blue exactly at the lower-right corner. 1.2392 + 1.2393 + <pre> linear-gradient(135deg, yellow, blue); 1.2394 + linear-gradient(-45deg, blue, yellow); 1.2395 +</pre> 1.2396 +<p> <img alt="" src=images/linear3.png> 1.2397 + </div> 1.2398 + 1.2399 + <div class=example> 1.2400 + 1.2401 +<p> This demonstrates a 3-color gradient, and how to specify the location of a stop explicitly: 1.2402 + 1.2403 +<pre>linear-gradient(yellow, blue 20%, #0f0);</pre> 1.2404 +<p> <img alt="" src=images/linear4.png> 1.2405 + </div> 1.2406 + 1.2407 + <div class=example id=corner-gradient-example> 1.2408 + This demonstrates a corner-to-corner gradient specified with keywords. 1.2409 + Note how the gradient is red and blue exactly in the bottom-left and top-right corners, respectively, 1.2410 + exactly like the second example. 1.2411 + Additionally, the angle of the gradient is automatically computed so that the color at 50% (in this case, white) 1.2412 + stretches across the top-left and bottom-right corners. 1.2413 + 1.2414 +<pre>linear-gradient(to top right, red, white, blue)</pre> 1.2415 + <object data=images/gradient1.svg height=100 width=200>(Image requires SVG)</object> 1.2416 + </div> 1.2417 + 1.2418 + 1.2419 <!-- 1.2420 - --> [ [ <var><angle></var> | to <a 1.2421 - href="#side-or-corner"><var><side-or-corner></var></a> ] ,]? 1.2422 -<!-- 1.2423 - --> <a 1.2424 - href="#ltcolor-stop-list"><var><color-stop-list></var></a> 1.2425 -<!-- 1.2426 - -->) 1.2427 -<!-- 1.2428 - --> 1.2429 -<!-- 1.2430 - --><dfn 1.2431 - id=side-or-corner><side-or-corner></dfn> = [left | right] || [top | bottom]</pre> 1.2432 - 1.2433 - <p> The first argument to the function specifies the <dfn 1.2434 - id=gradient-line>gradient line</dfn>, which gives the gradient a direction 1.2435 - and determines how color-stops are positioned. It may be omitted; if so, 1.2436 - it defaults to ‘<code class=css>to bottom</code>’. 1.2437 - 1.2438 - <p> The <a href="#gradient-line0"><i title="gradient line">gradient 1.2439 - line's</i></a> direction may be specified in two ways: 1.2440 - 1.2441 - <dl> 1.2442 - <dt>using angles 1.2443 - 1.2444 - <dd> For the purpose of this argument, ‘<code class=css>0deg</code>’ 1.2445 - points upward, and positive angles represent clockwise rotation, so 1.2446 - ‘<code class=css>90deg</code>’ point toward the right. 1.2447 - 1.2448 - <dt>using keywords 1.2449 - 1.2450 - <dd> 1.2451 - <p> If the argument is ‘<code class=css>to top</code>’, ‘<code 1.2452 - class=css>to right</code>’, ‘<code class=css>to bottom</code>’, or 1.2453 - ‘<code class=css>to left</code>’, the angle of the <a 1.2454 - href="#gradient-line0"><i>gradient line</i></a> is ‘<code 1.2455 - class=css>0deg</code>’, ‘<code class=css>90deg</code>’, ‘<code 1.2456 - class=css>180deg</code>’, or ‘<code class=css>270deg</code>’, 1.2457 - respectively. 1.2458 - 1.2459 - <p> If the argument instead specifies a corner of the box such as 1.2460 - ‘<code class=css>to top left</code>’, the <a 1.2461 - href="#gradient-line0"><i>gradient line</i></a> must be angled such that 1.2462 - it points into the same quadrant as the specified corner, and is 1.2463 - perpendicular to a line intersecting the two neighboring corners of the 1.2464 - <a href="#gradient-box"><i>gradient box</i></a>. <span class=note>This 1.2465 - causes a color-stop at 50% to intersect the two neighboring corners (see 1.2466 - <a href="#corner-gradient-example">example</a>).</span> 1.2467 - </dl> 1.2468 - 1.2469 - <p> Starting from the center of the <a href="#gradient-box"><i>gradient 1.2470 - box</i></a>, extend a line at the specified angle in both directions. The 1.2471 - ending point is the point on the <a href="#gradient-line0"><i>gradient 1.2472 - line</i></a> where a line drawn perpendicular to the <a 1.2473 - href="#gradient-line0"><i>gradient line</i></a> would intersect the corner 1.2474 - of the <a href="#gradient-box"><i>gradient box</i></a> in the specified 1.2475 - direction. The starting point is determined identically, but in the 1.2476 - opposite direction. 1.2477 - 1.2478 - <p class=note> It is expected that the next level of this module will 1.2479 - provide the ability to define the gradient's direction relative to the 1.2480 - current text direction and writing-mode. 1.2481 - 1.2482 - <div class=example> 1.2483 - <div style="overflow: hidden"> <img 1.2484 - alt="[An image showing a box with a background shading gradually from white in the bottom-left corner to black in the top-right corner. There is a line, illustrating the gradient line, angled at 45 degrees and passing through the center of the box. The starting point and ending point of the gradient line are indicated by the intersection of the gradient line with two additional lines that pass through the bottom-left and top-right corners of the box.]" 1.2485 - src="images/gradient-diagram.png" 1.2486 - style="float: right; margin-left: 1em;"> 1.2487 - <p> This example illustrates visually how to calculate the <a 1.2488 - href="#gradient-line0"><i>gradient line</i></a> from the rules above. 1.2489 - This shows the starting and ending point of the <a 1.2490 - href="#gradient-line0"><i>gradient line</i></a>, long with the actual 1.2491 - gradient, produced by an element with ‘<code class=css>background: 1.2492 - linear-gradient(45deg, white, black);</code>’. 1.2493 - 1.2494 - <p> Notice how, though the starting point and ending point are outside of 1.2495 - the box, they're positioned precisely right so that the gradient is pure 1.2496 - white <em>exactly</em> at the corner, and pure black <em>exactly</em> at 1.2497 - the opposite corner. That's intentional, and will always be true for 1.2498 - linear gradients. 1.2499 - </div> 1.2500 - </div> 1.2501 - 1.2502 - <p> The gradient's color stops are typically placed between the starting 1.2503 - point and ending point on the <a href="#gradient-line0"><i>gradient 1.2504 - line</i></a>, but this isn't required - the <a 1.2505 - href="#gradient-line0"><i>gradient line</i></a> extends infinitely in both 1.2506 - directions. The starting point and ending point are merely arbitrary 1.2507 - location markers - the starting point defines where 0%, 0px, etc are 1.2508 - located when specifying color-stops, and the ending point defines where 1.2509 - 100% is located. Color-stops are allowed to have positions before 0% or 1.2510 - after 100%. 1.2511 - 1.2512 - <p> The color of the gradient at any point is determined by finding the 1.2513 - unique line passing through that point that is perpendicular to the <a 1.2514 - href="#gradient-line0"><i>gradient line</i></a>. The point's color is the 1.2515 - color of the <a href="#gradient-line0"><i>gradient line</i></a> at the 1.2516 - point where this line intersects it. 1.2517 - <!-- ====================================================================== --> 1.2518 - 1.2519 - <h4 class=no-toc id=linear-gradient-examples><span class=secno>4.1.2. 1.2520 - </span> Linear Gradient Examples</h4> 1.2521 - 1.2522 - <p> All of the following ‘<code class=css>linear-gradient()</code>’ 1.2523 - examples are presumed to be backgrounds applied to a box that is 200px 1.2524 - wide and 100px tall. 1.2525 - 1.2526 - <div class=example> 1.2527 - <p> Below are various ways of specifying a basic vertical gradient: 1.2528 - 1.2529 - <pre><!-- 1.2530 - -->linear-gradient(yellow, blue); 1.2531 -<!-- 1.2532 - -->linear-gradient(to bottom, yellow, blue); 1.2533 -<!-- 1.2534 - -->linear-gradient(180deg, yellow, blue); 1.2535 -<!-- 1.2536 - -->linear-gradient(to top, blue, yellow); 1.2537 -<!-- 1.2538 - -->linear-gradient(to bottom, yellow 0%, blue 100%);</pre> 1.2539 - 1.2540 - <p><img alt="" src="images/linear1.png"> 1.2541 - </div> 1.2542 - 1.2543 - <div class=example> 1.2544 - <p> This demonstrates the use of an angle in the gradient. Note that, 1.2545 - though the angle is not exactly the same as the angle between the 1.2546 - corners, the <a href="#gradient-line0"><i>gradient line</i></a> is still 1.2547 - sized so as to make the gradient yellow exactly at the upper-left corner, 1.2548 - and blue exactly at the lower-right corner. 1.2549 - 1.2550 - <pre><!-- 1.2551 - -->linear-gradient(135deg, yellow, blue); 1.2552 -<!-- 1.2553 - -->linear-gradient(-45deg, blue, yellow);</pre> 1.2554 - 1.2555 - <p><img alt="" src="images/linear3.png"> 1.2556 - </div> 1.2557 - 1.2558 - <div class=example> 1.2559 - <p> This demonstrates a 3-color gradient, and how to specify the location 1.2560 - of a stop explicitly: 1.2561 - 1.2562 - <pre>linear-gradient(yellow, blue 20%, #0f0);</pre> 1.2563 - 1.2564 - <p><img alt="" src="images/linear4.png"> 1.2565 - </div> 1.2566 - 1.2567 - <div class=example id=corner-gradient-example> 1.2568 - <p> This demonstrates a corner-to-corner gradient specified with keywords. 1.2569 - Note how the gradient is red and blue exactly in the bottom-left and 1.2570 - top-right corners, respectively, exactly like the second example. 1.2571 - Additionally, the angle of the gradient is automatically computed so that 1.2572 - the color at 50% (in this case, white) stretches across the top-left and 1.2573 - bottom-right corners. 1.2574 - 1.2575 - <pre>linear-gradient(to top right, red, white, blue)</pre> 1.2576 - 1.2577 - <p><object data="images/gradient1.svg" height=100 width=200>(Image 1.2578 - requires SVG)</object> 1.2579 - </div> 1.2580 - <!-- 1.2581 dddddddd 1.2582 RRRRRRRRRRRRRRRRR d::::::d iiii lllllll 1.2583 R::::::::::::::::R d::::::d i::::i l:::::l 1.2584 @@ -1641,343 +1209,270 @@ 1.2585 RRRRRRRR RRRRRRR aaaaaaaaaa aaaa ddddddddd dddddiiiiiiii aaaaaaaaaa aaaallllllll 1.2586 --> 1.2587 1.2588 - <h3 id=radial-gradients><span class=secno>4.2. </span> Radial Gradients: 1.2589 - the ‘<code class=css>radial-gradient()</code>’ notation</h3> 1.2590 - 1.2591 - <p> In a radial gradient, rather than colors smoothly fading from one side 1.2592 - of the <a href="#gradient-box"><i>gradient box</i></a> to the other as 1.2593 - with linear gradients, they instead emerge from a single point and 1.2594 - smoothly spread outward in a circular or elliptical shape. 1.2595 - 1.2596 - <p> A radial gradient is specified by indicating the center of the gradient 1.2597 - (where the 0% ellipse will be) and the size and shape of the <dfn 1.2598 - id=ending-shape>ending shape</dfn> (the 100% ellipse). Color stops are 1.2599 - given as a list, just as for ‘<code 1.2600 - class=css>linear-gradient()</code>’. Starting from the <i>center</i> and 1.2601 - progressing towards (and potentially beyond) the <a 1.2602 - href="#ending-shape"><i>ending shape</i></a> uniformly-scaled concentric 1.2603 - ellipses are drawn and colored according to the specified color stops. 1.2604 - <!-- ====================================================================== --> 1.2605 - 1.2606 - <h4 class=no-toc id=radial-gradient-syntax><span class=secno>4.2.1. </span> 1.2607 - radial-gradient() Syntax</h4> 1.2608 - 1.2609 - <p> The radial gradient syntax is: 1.2610 - 1.2611 - <pre><!-- 1.2612 - --><dfn 1.2613 - id=radial-gradient-type><radial-gradient></dfn> = radial-gradient( 1.2614 + 1.2615 +<h3 data-level=4.2 id=radial-gradients><span class=secno>4.2 </span><span class=content> 1.2616 +Radial Gradients: the <a class=css data-link-type=maybe href=#funcdef-radial-gradient>radial-gradient()</a> notation</span><a class=section-link href=#radial-gradients>§</a></h3> 1.2617 + 1.2618 +<p> In a radial gradient, 1.2619 + rather than colors smoothly fading from one side of the <a href=#gradient-box>gradient box</a> to the other 1.2620 + as with linear gradients, 1.2621 + they instead emerge from a single point 1.2622 + and smoothly spread outward in a circular or elliptical shape. 1.2623 + 1.2624 +<p> A radial gradient is specified by indicating the center of the gradient 1.2625 + (where the 0% ellipse will be) 1.2626 + and the size and shape of the <dfn data-dfn-type=dfn id=ending-shape>ending shape</dfn> 1.2627 + (the 100% ellipse). 1.2628 + Color stops are given as a list, 1.2629 + just as for <a class=css data-link-type=maybe href=#funcdef-linear-gradient>linear-gradient()</a>. 1.2630 + Starting from the <a>center</a> 1.2631 + and progressing towards (and potentially beyond) the <a href=#ending-shape>ending shape</a> 1.2632 + uniformly-scaled concentric ellipses are drawn and colored 1.2633 + according to the specified color stops. 1.2634 + 1.2635 + 1.2636 +<h4 class=no-toc data-level=4.2.1 id=radial-gradient-syntax><span class=secno>4.2.1 </span><span class=content> 1.2637 +radial-gradient() Syntax</span><a class=section-link href=#radial-gradient-syntax>§</a></h4> 1.2638 + 1.2639 +<p> The radial gradient syntax is: 1.2640 + 1.2641 + <pre> <dfn data-dfn-type=function id=funcdef-radial-gradient>radial-gradient()</dfn> = radial-gradient( 1.2642 + [ [ <a class=production data-link-type=type href=#typedef-ending-shape><var><ending-shape></var></a> || <a class=production data-link-type=type href=#typedef-size><var><size></var></a> ] [ at <a class=production data-link-type=type href=#typedef-position><var><position></var></a> ]? , | 1.2643 + at <a class=production data-link-type=type href=#typedef-position><var><position></var></a>, 1.2644 + ]? 1.2645 + <a class=production data-link-type=type href=#typedef-color-stop-list><var><color-stop-list></var></a> 1.2646 + ) 1.2647 +</pre> 1.2648 + <div class=example> 1.2649 + Here is an example of a circular radial gradient 5em wide 1.2650 + and positioned with its center in the top left corner: 1.2651 + 1.2652 +<pre>radial-gradient(5em circle at top left, yellow, blue)</pre> </div> 1.2653 + 1.2654 + <p class=issue> 1.2655 + We should add the ability to move the focus of the gradient, 1.2656 + as in the original -webkit-gradient() function. 1.2657 + See proposal in <a href=http://lists.w3.org/Archives/Public/www-style/2011Nov/0210.html>http://lists.w3.org/Archives/Public/www-style/2011Nov/0210.html</a> 1.2658 + for "from <a class=production data-link-type=type href=#typedef-position><var><position></var></a>" and "from offset <a class=production data-link-type=type><var><offset></var></a>". 1.2659 + 1.2660 +<p> The arguments are defined as follows: 1.2661 + 1.2662 + <dl> 1.2663 + <dt><dfn data-dfn-type=type id=typedef-position><position></dfn> 1.2664 + <dd> 1.2665 + Determines the center of the gradient. 1.2666 + The <a href=http://www.w3.org/TR/css3-values/#position><position></a> value type 1.2667 + (which is also used for <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/colors.html#propdef-background-position title=background-position>background-position</a>) 1.2668 + is defined in <a data-biblio-type=normative data-link-type=biblio href=#css3val title=CSS3VAL>[CSS3VAL]</a>, 1.2669 + and is resolved using the center-point as the object area 1.2670 + and the <a href=#gradient-box>gradient box</a> as the positioning area. 1.2671 + If this argument is omitted, 1.2672 + it defaults to <span class=css data-link-type=maybe>center</span>. 1.2673 + 1.2674 + <dt><dfn data-dfn-type=type id=typedef-ending-shape><ending-shape></dfn> 1.2675 + <dd> 1.2676 + Can be either <span class=css data-link-type=maybe>circle</span> or <span class=css data-link-type=maybe>ellipse</span>; 1.2677 + determines whether the gradient's <a href=#ending-shape>ending shape</a> is a circle or an ellipse, respectively. 1.2678 + If <a class=production data-link-type=type href=#typedef-ending-shape><var><ending-shape></var></a> is omitted, 1.2679 + the <a href=#ending-shape>ending shape</a> defaults to a circle 1.2680 + if the <a class=production data-link-type=type href=#typedef-size><var><size></var></a> is a single <a class=production data-link-type=type href=#typedef-length><var><length></var></a>, 1.2681 + and to an ellipse otherwise. 1.2682 + 1.2683 + <dt><dfn data-dfn-type=type id=typedef-size><size></dfn> 1.2684 + <dd> 1.2685 + Determines the size of the gradient's <a href=#ending-shape>ending shape</a>. 1.2686 + If omitted it defaults to <a class=css data-link-type=maybe href=#farthest-corner>farthest-corner</a>. 1.2687 + It can be given explicitly or by keyword. 1.2688 + For the purpose of the keyword definitions, 1.2689 + consider the <a href=#gradient-box>gradient box</a> edges as extending infinitely in both directions, 1.2690 + rather than being finite line segments. 1.2691 + 1.2692 +<p> If the ending-shape is an ellipse, 1.2693 + its axises are aligned with the horizontal and vertical axises. 1.2694 + 1.2695 +<p> Both <span class=css data-link-type=maybe>circle</span> and <span class=css data-link-type=maybe>ellipse</span> gradients accept the following keywords as their <a class=production data-link-type=type href=#typedef-size><var><size></var></a>: 1.2696 + 1.2697 + <dl> 1.2698 + <dt><dfn data-dfn-type=dfn id=closest-side>closest-side</dfn> 1.2699 + <dd> 1.2700 + The <a href=#ending-shape>ending shape</a> is sized so that 1.2701 + it exactly meets the side of the <a href=#gradient-box>gradient box</a> closest to the gradient's center. 1.2702 + If the shape is an ellipse, 1.2703 + it exactly meets the closest side in each dimension. 1.2704 + 1.2705 + <dt><dfn data-dfn-type=dfn id=farthest-side>farthest-side</dfn> 1.2706 + <dd> 1.2707 + Same as <a class=css data-link-type=maybe href=#closest-side>closest-side</a>, 1.2708 + except the <a href=#ending-shape>ending shape</a> is sized based on the farthest side(s). 1.2709 + 1.2710 + <dt><dfn data-dfn-type=dfn id=closest-corner>closest-corner</dfn> 1.2711 + <dd> 1.2712 + The <a href=#ending-shape>ending shape</a> is sized so that 1.2713 + it passes through the corner of the <a href=#gradient-box>gradient box</a> closest to the gradient's center. 1.2714 + If the shape is an ellipse, 1.2715 + the <a href=#ending-shape>ending shape</a> is given the same aspect-ratio it would have if <a class=css data-link-type=maybe href=#closest-side>closest-side</a> were specified. 1.2716 + 1.2717 + <dt><dfn data-dfn-type=dfn id=farthest-corner>farthest-corner</dfn> 1.2718 + <dd> 1.2719 + Same as <a class=css data-link-type=maybe href=#closest-corner>closest-corner</a>, 1.2720 + except the <a href=#ending-shape>ending shape</a> is sized based on the farthest corner. 1.2721 + If the shape is an ellipse, 1.2722 + the <a href=#ending-shape>ending shape</a> is given the same aspect ratio it would have if <a class=css data-link-type=maybe href=#farthest-side>farthest-side</a> were specified. 1.2723 + </dl> 1.2724 + 1.2725 +<p> If <a class=production data-link-type=type href=#typedef-ending-shape><var><ending-shape></var></a> is specified as <span class=css data-link-type=maybe>circle</span> or is omitted, 1.2726 + the <a class=production data-link-type=type href=#typedef-size><var><size></var></a> may be given explicitly as: 1.2727 + 1.2728 + <dl> 1.2729 + <dt><dfn data-dfn-type=type id=typedef-length><length></dfn> 1.2730 + <dd> 1.2731 + Gives the radius of the circle explicitly. 1.2732 + Negative values are invalid. 1.2733 + 1.2734 +<p class=note> Note: Percentages are <em>not</em> allowed here; 1.2735 + they can only be used to specify the size of an elliptical gradient, 1.2736 + not a circular one. 1.2737 + This restriction exists because there is are multiple reasonable answers as to which dimension the percentage should be relative to. 1.2738 + A future level of this module may provide the ability to size circles with percentages, 1.2739 + perhaps with more explicit controls over which dimension is used. 1.2740 + 1.2741 + </dl> 1.2742 + 1.2743 +<p> If <a class=production data-link-type=type href=#typedef-ending-shape><var><ending-shape></var></a> is specified as <span class=css data-link-type=maybe>ellipse</span> or is omitted, 1.2744 + <a class=production data-link-type=type href=#typedef-size><var><size></var></a> may instead be given explicitly as: 1.2745 + 1.2746 + <dl> 1.2747 + <dt><dfn data-dfn-type=dfn id=-length--percentage-2>[ <a class=production data-link-type=type href=#typedef-length><var><length></var></a> | <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage><var><percentage></var></a> ]{2}</dfn> 1.2748 + <dd> 1.2749 + Gives the size of the ellipse explicitly. 1.2750 + The first value represents the horizontal radius, 1.2751 + the second the vertical radius. 1.2752 + Percentages values are relative to the corresponding dimension of the <a href=#gradient-box>gradient box</a>. 1.2753 + Negative values are invalid. 1.2754 + </dl> 1.2755 + </dl> 1.2756 + 1.2757 + <div class=note> 1.2758 + Expanded with the above definitions, 1.2759 + the grammar becomes: 1.2760 + 1.2761 + <pre> radial-gradient() = radial-gradient( 1.2762 + [ [ circle || <a class=production data-link-type=type href=#typedef-length><var><length></var></a> ] [ at <a class=production data-link-type=type href=#typedef-position><var><position></var></a> ]? , | 1.2763 + [ ellipse || [ <a class=production data-link-type=type href=#typedef-length><var><length></var></a> | <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage><var><percentage></var></a> ]{2} ] [ at <a class=production data-link-type=type href=#typedef-position><var><position></var></a> ]? , | 1.2764 + [ [ circle | ellipse ] || <a class=production data-link-type=type href=#typedef-extent-keyword><var><extent-keyword></var></a> ] [ at <a class=production data-link-type=type href=#typedef-position><var><position></var></a> ]? , | 1.2765 + at <a class=production data-link-type=type href=#typedef-position><var><position></var></a> , 1.2766 + ]? 1.2767 + <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#color-stop-type><var><color-stop></var></a> [ , <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#color-stop-type><var><color-stop></var></a> ]+ 1.2768 + ) 1.2769 + <dfn data-dfn-type=type id=typedef-extent-keyword noexport=""><extent-keyword></dfn> = closest-corner | closest-side | farthest-corner | farthest-side 1.2770 +</pre> </div> 1.2771 + 1.2772 + 1.2773 +<h4 class=no-toc data-level=4.2.2 id=radial-color-stops><span class=secno>4.2.2 </span><span class=content> 1.2774 +Placing Color Stops</span><a class=section-link href=#radial-color-stops>§</a></h4> 1.2775 + 1.2776 +<p> Color-stops are placed on a <a href=#gradient-line>gradient line</a>, 1.2777 + similar to the <a href=#gradient-line>gradient line</a> of linear gradients. 1.2778 + The <a href=#gradient-line>gradient line's</a> <a>start point</a> is at the center of the gradient, 1.2779 + and it extends toward the right, 1.2780 + with the <a href=#ending-point>ending point</a> on the point where the <a href=#gradient-line>gradient line</a> intersects the <a href=#ending-shape>ending shape</a>. 1.2781 + A color-stop can be placed at a location before 0%; 1.2782 + though the negative region of the <a href=#gradient-line>gradient line</a> is never directly consulted for rendering, 1.2783 + color stops placed there can affect the color of non-negative locations on the <a href=#gradient-line>gradient line</a> through interpolation or repetition 1.2784 + (see <a href=#repeating-gradients>repeating gradients</a>). 1.2785 + For example, <span class=css data-link-type=maybe>radial-gradient(red -50px, yellow 100px)</span> produces an elliptical gradient 1.2786 + that starts with a reddish-orange color in the center 1.2787 + (specifically, #f50) 1.2788 + and transitions to yellow. 1.2789 + Locations greater than 100% simply specify a location a correspondingly greater distance from the center of the gradient. 1.2790 + 1.2791 +<p> The color of the gradient at any point is determined by 1.2792 + first finding the unique ellipse passing through that point 1.2793 + with the same center, orientation, and ratio between major and minor axises as the ending-shape. 1.2794 + The point's color is then the color of the positive section of the <a href=#gradient-line>gradient line</a> at the location where this ellipse intersects it. 1.2795 + 1.2796 +<h4 class=no-toc data-level=4.2.3 id=degenerate-radials><span class=secno>4.2.3 </span><span class=content> 1.2797 +Degenerate Radial Gradients</span><a class=section-link href=#degenerate-radials>§</a></h4> 1.2798 + 1.2799 +<p> Some combinations of position, size, and shape 1.2800 + will produce a circle or ellipse with a radius of 0. 1.2801 + This will occur, for example, 1.2802 + if the center is on a <a href=#gradient-box>gradient box</a> edge and <a class=css data-link-type=maybe href=#closest-side>closest-side</a> or <a class=css data-link-type=maybe href=#closest-corner>closest-corner</a> is specified 1.2803 + or if the size and shape are given explicitly and either of the radiuses is zero. 1.2804 + In these degenerate cases, 1.2805 + the gradient must be be rendered as follows: 1.2806 + 1.2807 + <dl> 1.2808 + <dt>If the <a href=#ending-shape>ending shape</a> is a circle with zero radius: 1.2809 + <dd> 1.2810 + Render as if the <a href=#ending-shape>ending shape</a> was 1.2811 + a circle whose radius was an arbitrary very small number greater than zero. 1.2812 + <span class=note>This will make the gradient continue to look like a circle.</span> 1.2813 + 1.2814 + <dt>If the <a href=#ending-shape>ending shape</a> has zero width (regardless of the height): 1.2815 + <dd> 1.2816 + Render as if the <a href=#ending-shape>ending shape</a> was 1.2817 + an ellipse whose height was an arbitrary very large number 1.2818 + and whose width was an arbitrary very small number greater than zero. 1.2819 + <span class=note>This will make the gradient look similar to a horizontal linear gradient 1.2820 + that is mirrored across the center of the ellipse. 1.2821 + It also means that all color-stop positions specified with a percentage resolve to <span class=css data-link-type=maybe>0px</span>.</span> 1.2822 + 1.2823 + <dt>Otherwise, if the <a href=#ending-shape>ending shape</a> has zero height: 1.2824 + <dd> 1.2825 + Render as if the <a href=#ending-shape>ending shape</a> was 1.2826 + an ellipse whose width was an arbitrary very large number 1.2827 + and whose height was an arbitrary very small number greater than zero. 1.2828 + <span class=note>This will make the gradient look like a solid-color image 1.2829 + equal to the color of the last color-stop, 1.2830 + or equal to the average color of the gradient if it's repeating.</span> 1.2831 + </dl> 1.2832 + 1.2833 +<!-- ====================================================================== --> 1.2834 + 1.2835 +<h4 class=no-toc data-level=4.2.4 id=radial-gradient-examples><span class=secno>4.2.4 </span><span class=content> 1.2836 +Radial Gradient Examples</span><a class=section-link href=#radial-gradient-examples>§</a></h4> 1.2837 + 1.2838 +<p> All of the following examples are applied to a box that is 200px wide and 100px tall. 1.2839 + 1.2840 + <div class=example> 1.2841 + These examples demonstrate different ways to write the basic syntax for radial gradients: 1.2842 + 1.2843 + <pre> radial-gradient(yellow, green); 1.2844 + radial-gradient(ellipse at center, yellow 0%, green 100%); 1.2845 + radial-gradient(farthest-corner at 50% 50%, yellow, green); 1.2846 +</pre> 1.2847 +<p> <img alt="" src=images/radial1.png> 1.2848 + 1.2849 +<pre>radial-gradient(circle, yellow, green);</pre> 1.2850 +<p> <img alt="" src=images/radial2.png> 1.2851 + 1.2852 +<pre>radial-gradient(red, yellow, green);</pre> 1.2853 +<p> <img alt="" src=images/radial3.png> 1.2854 + </div> 1.2855 + 1.2856 + <div class=example> 1.2857 + This image shows a gradient originating from somewhere other than the center of the box: 1.2858 + 1.2859 +<pre>radial-gradient(farthest-side at left bottom, red, yellow 50px, green);</pre> 1.2860 +<p> <img alt="" src=images/radial4.png> 1.2861 + </div> 1.2862 + 1.2863 + <div class=example> 1.2864 + Here we illustrate a <a class=property data-link-type=propdesc title=closest-side>closest-side</a> gradient. 1.2865 + 1.2866 + <pre> radial-gradient(closest-side at 20px 30px, red, yellow, green); 1.2867 + radial-gradient(20px 30px at 20px 30px, red, yellow, green); 1.2868 +</pre> 1.2869 +<p> <img alt="" src=images/radial6.png> 1.2870 + 1.2871 + <pre> radial-gradient(closest-side circle at 20px 30px, red, yellow, green); 1.2872 + radial-gradient(20px 20px at 20px 30px, red, yellow, green); 1.2873 +</pre> 1.2874 +<p> <img alt="" src=images/radial7.png> 1.2875 + </div> 1.2876 + 1.2877 <!-- 1.2878 - --> [ [ <a 1.2879 - href="#shape"><var><ending-shape></var></a> || <a 1.2880 - href="#size"><var><size></var></a> ] [ at <a 1.2881 - href="#position"><var><position></var></a> ]? , | 1.2882 -<!-- 1.2883 - --> at <a 1.2884 - href="#position"><var><position></var></a>, 1.2885 -<!-- 1.2886 - --> ]? 1.2887 -<!-- 1.2888 - --> <a 1.2889 - href="#ltcolor-stop-list"><var><color-stop-list></var></a> 1.2890 -<!-- 1.2891 - -->)</pre> 1.2892 - 1.2893 - <div class=example> 1.2894 - <p> Here is an example of a circular radial gradient 5em wide and 1.2895 - positioned with its center in the top left corner: 1.2896 - 1.2897 - <pre>radial-gradient(5em circle at top left, yellow, blue)</pre> 1.2898 - </div> 1.2899 - 1.2900 - <p class=issue> We should add the ability to move the focus of the 1.2901 - gradient, as in the original -webkit-gradient() function. See proposal in 1.2902 - <a 1.2903 - href="http://lists.w3.org/Archives/Public/www-style/2011Nov/0210.html">http://lists.w3.org/Archives/Public/www-style/2011Nov/0210.html</a> 1.2904 - for "from <a href="#position"><var><position></var></a>" and "from 1.2905 - offset <var><offset></var>". 1.2906 - 1.2907 - <p> The arguments are defined as follows: 1.2908 - 1.2909 - <dl> 1.2910 - <dt id=radial-position><dfn id=position><position></dfn> 1.2911 - 1.2912 - <dd> Determines the center of the gradient. The <a 1.2913 - href="http://www.w3.org/TR/css3-values/#position"><position></a> value 1.2914 - type (which is also used for ‘<code 1.2915 - class=property>background-position</code>’) is defined in <a 1.2916 - href="#CSS3VAL" rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>, and is 1.2917 - resolved using the center-point as the object area and the <a 1.2918 - href="#gradient-box"><i>gradient box</i></a> as the positioning area. If 1.2919 - this argument is omitted, it defaults to ‘<code 1.2920 - class=css>center</code>’. 1.2921 - 1.2922 - <dt id=radial-shape><dfn id=shape><ending-shape></dfn> 1.2923 - 1.2924 - <dd> Can be either ‘<code class=css>circle</code>’ or ‘<code 1.2925 - class=css>ellipse</code>’; determines whether the gradient's <a 1.2926 - href="#ending-shape"><i>ending shape</i></a> is a circle or an ellipse, 1.2927 - respectively. If <a href="#shape"><var><ending-shape></var></a> is 1.2928 - omitted, the <a href="#ending-shape"><i>ending shape</i></a> defaults to 1.2929 - a circle if the <a href="#size"><var><size></var></a> is a single <a 1.2930 - href="#radial-size-circle"><var><length></var></a>, and to an ellipse 1.2931 - otherwise. 1.2932 - 1.2933 - <dt id=radial-size><dfn id=size><size></dfn> 1.2934 - 1.2935 - <dd> 1.2936 - <p> Determines the size of the gradient's <a 1.2937 - href="#ending-shape"><i>ending shape</i></a>. If omitted it defaults to 1.2938 - ‘<a href="#radial-farthest-corner"><code 1.2939 - class=css>farthest-corner</code></a>’. It can be given explicitly or 1.2940 - by keyword. For the purpose of the keyword definitions, consider the <a 1.2941 - href="#gradient-box"><i>gradient box</i></a> edges as extending 1.2942 - infinitely in both directions, rather than being finite line segments. 1.2943 - 1.2944 - <p> If the ending-shape is an ellipse, its axises are aligned with the 1.2945 - horizontal and vertical axises. 1.2946 - 1.2947 - <p> Both ‘<code class=css>circle</code>’ and ‘<code 1.2948 - class=css>ellipse</code>’ gradients accept the following keywords as 1.2949 - their <a href="#size"><var><size></var></a>: 1.2950 - 1.2951 - <dl> 1.2952 - <dt><dfn id=radial-closest-side>‘<code 1.2953 - class=css>closest-side</code>’</dfn> 1.2954 - 1.2955 - <dd> The <a href="#ending-shape"><i>ending shape</i></a> is sized so 1.2956 - that it exactly meets the side of the <a 1.2957 - href="#gradient-box"><i>gradient box</i></a> closest to the gradient's 1.2958 - center. If the shape is an ellipse, it exactly meets the closest side 1.2959 - in each dimension. 1.2960 - 1.2961 - <dt><dfn id=radial-farthest-side>‘<code 1.2962 - class=css>farthest-side</code>’</dfn> 1.2963 - 1.2964 - <dd> Same as ‘<a href="#radial-closest-side"><code 1.2965 - class=css>closest-side</code></a>’, except the <a 1.2966 - href="#ending-shape"><i>ending shape</i></a> is sized based on the 1.2967 - farthest side(s). 1.2968 - 1.2969 - <dt><dfn id=radial-closest-corner>‘<code 1.2970 - class=css>closest-corner</code>’</dfn> 1.2971 - 1.2972 - <dd> The <a href="#ending-shape"><i>ending shape</i></a> is sized so 1.2973 - that it passes through the corner of the <a 1.2974 - href="#gradient-box"><i>gradient box</i></a> closest to the gradient's 1.2975 - center. If the shape is an ellipse, the <a 1.2976 - href="#ending-shape"><i>ending shape</i></a> is given the same 1.2977 - aspect-ratio it would have if ‘<a href="#radial-closest-side"><code 1.2978 - class=css>closest-side</code></a>’ were specified. 1.2979 - 1.2980 - <dt><dfn id=radial-farthest-corner>‘<code 1.2981 - class=css>farthest-corner</code>’</dfn> 1.2982 - 1.2983 - <dd> Same as ‘<a href="#radial-closest-corner"><code 1.2984 - class=css>closest-corner</code></a>’, except the <a 1.2985 - href="#ending-shape"><i>ending shape</i></a> is sized based on the 1.2986 - farthest corner. If the shape is an ellipse, the <a 1.2987 - href="#ending-shape"><i>ending shape</i></a> is given the same aspect 1.2988 - ratio it would have if ‘<a href="#radial-farthest-side"><code 1.2989 - class=css>farthest-side</code></a>’ were specified. 1.2990 - </dl> 1.2991 - 1.2992 - <p> If <a href="#shape"><var><ending-shape></var></a> is specified as 1.2993 - ‘<code class=css>circle</code>’ or is omitted, the <a 1.2994 - href="#size"><var><size></var></a> may be given explicitly as: 1.2995 - 1.2996 - <dl> 1.2997 - <dt><dfn id=radial-size-circle><length></dfn> 1.2998 - 1.2999 - <dd> 1.3000 - <p> Gives the radius of the circle explicitly. Negative values are 1.3001 - invalid. 1.3002 - 1.3003 - <p class=note> Note that percentages are <em>not</em> allowed here; 1.3004 - they can only be used to specify the size of an elliptical gradient, 1.3005 - not a circular one. This restriction exists because there is are 1.3006 - multiple reasonable answers as to which dimension the percentage 1.3007 - should be relative to. A future level of this module may provide the 1.3008 - ability to size circles with percentages, perhaps with more explicit 1.3009 - controls over which dimension is used. 1.3010 - </dl> 1.3011 - 1.3012 - <p> If <a href="#shape"><var><ending-shape></var></a> is specified as 1.3013 - ‘<code class=css>ellipse</code>’ or is omitted, <a 1.3014 - href="#size"><var><size></var></a> may instead be given explicitly 1.3015 - as: 1.3016 - 1.3017 - <dl> 1.3018 - <dt><dfn id=radial-size-ellipse>[ <var><length></var> | 1.3019 - <var><percentage></var> ]{2}</dfn> 1.3020 - 1.3021 - <dd> Gives the size of the ellipse explicitly. The first value 1.3022 - represents the horizontal radius, the second the vertical radius. 1.3023 - Percentages values are relative to the corresponding dimension of the 1.3024 - <a href="#gradient-box"><i>gradient box</i></a>. Negative values are 1.3025 - invalid. 1.3026 - </dl> 1.3027 - </dl> 1.3028 - 1.3029 - <div class=note> 1.3030 - <p> Expanded with the above definitions, the grammar becomes: 1.3031 - 1.3032 - <pre><!-- 1.3033 - --><radial-gradient> = radial-gradient( 1.3034 -<!-- 1.3035 - --> [ [ circle || <a 1.3036 - href="#radial-size-circle"><var><length></var></a> ] [ at <a 1.3037 - href="#position"><var><position></var></a> ]? , | 1.3038 -<!-- 1.3039 - --> [ ellipse || [ <a 1.3040 - href="#radial-size-circle"><var><length></var></a> | <var><percentage></var> ]{2} ] [ at <a 1.3041 - href="#position"><var><position></var></a> ]? , | 1.3042 -<!-- 1.3043 - --> [ [ circle | ellipse ] || <var><extent-keyword></var> ] [ at <a 1.3044 - href="#position"><var><position></var></a> ]? , | 1.3045 -<!-- 1.3046 - --> at <a 1.3047 - href="#position"><var><position></var></a> , 1.3048 -<!-- 1.3049 - --> ]? 1.3050 -<!-- 1.3051 - --> <var><color-stop></var> [ , <var><color-stop></var> ]+ 1.3052 -<!-- 1.3053 - -->) 1.3054 -<!-- 1.3055 - --><extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side</pre> 1.3056 - </div> 1.3057 - 1.3058 - <h4 class=no-toc id=radial-color-stops><span class=secno>4.2.2. </span> 1.3059 - Placing Color Stops</h4> 1.3060 - 1.3061 - <p> Color-stops are placed on a <a href="#gradient-line0"><i>gradient 1.3062 - line</i></a>, similar to the <a href="#gradient-line0"><i>gradient 1.3063 - line</i></a> of linear gradients. The <a 1.3064 - href="#gradient-line0"><i>gradient line's</i></a> <i>start point</i> is at 1.3065 - the center of the gradient, and it extends toward the right, with the <a 1.3066 - href="#ending-point"><i>ending point</i></a> on the point where the <a 1.3067 - href="#gradient-line0"><i>gradient line</i></a> intersects the <a 1.3068 - href="#ending-shape"><i>ending shape</i></a>. A color-stop can be placed 1.3069 - at a location before 0%; though the negative region of the <a 1.3070 - href="#gradient-line0"><i>gradient line</i></a> is never directly 1.3071 - consulted for rendering, color stops placed there can affect the color of 1.3072 - non-negative locations on the <a href="#gradient-line0"><i>gradient 1.3073 - line</i></a> through interpolation or repetition (see <a 1.3074 - href="#repeating-gradients">repeating gradients</a>). For example, 1.3075 - ‘<code class=css>radial-gradient(red -50px, yellow 100px)</code>’ 1.3076 - produces an elliptical gradient that starts with a reddish-orange color in 1.3077 - the center (specifically, #f50) and transitions to yellow. Locations 1.3078 - greater than 100% simply specify a location a correspondingly greater 1.3079 - distance from the center of the gradient. 1.3080 - 1.3081 - <p> The color of the gradient at any point is determined by first finding 1.3082 - the unique ellipse passing through that point with the same center, 1.3083 - orientation, and ratio between major and minor axises as the ending-shape. 1.3084 - The point's color is then the color of the positive section of the <a 1.3085 - href="#gradient-line0"><i>gradient line</i></a> at the location where this 1.3086 - ellipse intersects it. 1.3087 - 1.3088 - <h4 class=no-toc id=degenerate-radials><span class=secno>4.2.3. </span> 1.3089 - Degenerate Radial Gradients</h4> 1.3090 - 1.3091 - <p> Some combinations of position, size, and shape will produce a circle or 1.3092 - ellipse with a radius of 0. This will occur, for example, if the center is 1.3093 - on a <a href="#gradient-box"><i>gradient box</i></a> edge and ‘<a 1.3094 - href="#radial-closest-side"><code class=css>closest-side</code></a>’ or 1.3095 - ‘<a href="#radial-closest-corner"><code 1.3096 - class=css>closest-corner</code></a>’ is specified or if the size and 1.3097 - shape are given explicitly and either of the radiuses is zero. In these 1.3098 - degenerate cases, the gradient must be be rendered as follows: 1.3099 - 1.3100 - <dl> 1.3101 - <dt>If the <a href="#ending-shape"><i>ending shape</i></a> is a circle 1.3102 - with zero radius: 1.3103 - 1.3104 - <dd> Render as if the <a href="#ending-shape"><i>ending shape</i></a> was 1.3105 - a circle whose radius was an arbitrary very small number greater than 1.3106 - zero. <span class=note>This will make the gradient continue to look like 1.3107 - a circle.</span> 1.3108 - 1.3109 - <dt>If the <a href="#ending-shape"><i>ending shape</i></a> has zero width 1.3110 - (regardless of the height): 1.3111 - 1.3112 - <dd> Render as if the <a href="#ending-shape"><i>ending shape</i></a> was 1.3113 - an ellipse whose height was an arbitrary very large number and whose 1.3114 - width was an arbitrary very small number greater than zero. <span 1.3115 - class=note>This will make the gradient look similar to a horizontal 1.3116 - linear gradient that is mirrored across the center of the ellipse. It 1.3117 - also means that all color-stop positions specified with a percentage 1.3118 - resolve to ‘<code class=css>0px</code>’.</span> 1.3119 - 1.3120 - <dt>Otherwise, if the <a href="#ending-shape"><i>ending shape</i></a> has 1.3121 - zero height: 1.3122 - 1.3123 - <dd> Render as if the <a href="#ending-shape"><i>ending shape</i></a> was 1.3124 - an ellipse whose width was an arbitrary very large number and whose 1.3125 - height was an arbitrary very small number greater than zero. <span 1.3126 - class=note>This will make the gradient look like a solid-color image 1.3127 - equal to the color of the last color-stop, or equal to the average color 1.3128 - of the gradient if it's repeating.</span> 1.3129 - </dl> 1.3130 - <!-- ====================================================================== --> 1.3131 - 1.3132 - <h4 class=no-toc id=radial-gradient-examples><span class=secno>4.2.4. 1.3133 - </span> Radial Gradient Examples</h4> 1.3134 - 1.3135 - <p> All of the following examples are applied to a box that is 200px wide 1.3136 - and 100px tall. 1.3137 - 1.3138 - <div class=example> 1.3139 - <p> These examples demonstrate different ways to write the basic syntax 1.3140 - for radial gradients: 1.3141 - 1.3142 - <pre><!-- 1.3143 - -->radial-gradient(yellow, green); 1.3144 -<!-- 1.3145 - -->radial-gradient(ellipse at center, yellow 0%, green 100%); 1.3146 -<!-- 1.3147 - -->radial-gradient(farthest-corner at 50% 50%, yellow, green);</pre> 1.3148 - 1.3149 - <p><img alt="" src="images/radial1.png"> 1.3150 - 1.3151 - <pre>radial-gradient(circle, yellow, green);</pre> 1.3152 - 1.3153 - <p><img alt="" src="images/radial2.png"> 1.3154 - 1.3155 - <pre>radial-gradient(red, yellow, green);</pre> 1.3156 - 1.3157 - <p><img alt="" src="images/radial3.png"> 1.3158 - </div> 1.3159 - 1.3160 - <div class=example> 1.3161 - <p> This image shows a gradient originating from somewhere other than the 1.3162 - center of the box: 1.3163 - 1.3164 - <pre>radial-gradient(farthest-side at left bottom, red, yellow 50px, green);</pre> 1.3165 - 1.3166 - <p><img alt="" src="images/radial4.png"> 1.3167 - </div> 1.3168 - 1.3169 - <div class=example> 1.3170 - <p> Here we illustrate a ‘<a href="#radial-closest-side"><code 1.3171 - class=property>closest-side</code></a>’ gradient. 1.3172 - 1.3173 - <pre><!-- 1.3174 - -->radial-gradient(closest-side at 20px 30px, red, yellow, green); 1.3175 -<!-- 1.3176 - -->radial-gradient(20px 30px at 20px 30px, red, yellow, green);</pre> 1.3177 - 1.3178 - <p><img alt="" src="images/radial6.png"> 1.3179 - 1.3180 - <pre><!-- 1.3181 - -->radial-gradient(closest-side circle at 20px 30px, red, yellow, green); 1.3182 -<!-- 1.3183 - -->radial-gradient(20px 20px at 20px 30px, red, yellow, green);</pre> 1.3184 - 1.3185 - <p><img alt="" src="images/radial7.png"> 1.3186 - </div> 1.3187 - <!-- 1.3188 CCCCCCCCCCCCC iiii 1.3189 CCC::::::::::::C i::::i 1.3190 CC:::::::::::::::C iiii 1.3191 @@ -1996,91 +1491,83 @@ 1.3192 CCCCCCCCCCCCC ooooooooooo nnnnnn nnnnnniiiiiiii cccccccccccccccc 1.3193 --> 1.3194 1.3195 - <h3 id=conic-gradients><span class=secno>4.3. </span> Conic Gradients: the 1.3196 - ‘<code class=css>conic-gradient()</code>’ notation</h3> 1.3197 - 1.3198 - <p> A conic gradient starts by specifying the center of a circle, similar 1.3199 - to radial gradients, except that conic gradient color-stops are placed 1.3200 - <em>around</em> the circumference of the circle, rather than on a line 1.3201 - emerging from the center, causing the color to smoothly transition as you 1.3202 - spin around the center, rather than as you progress outward from the 1.3203 - center. 1.3204 - 1.3205 - <p> A conic gradient is specified by indicating the center of the gradient, 1.3206 - and then specifying a list of color-stops. Unlike linear and radial 1.3207 - gradients, whose color-stops are placed by specifying a <a 1.3208 - href="#radial-size-circle"><code><length></code></a>, the color-stops 1.3209 - of a conic gradient are specified with an <code><angle></code>. Rays 1.3210 - are then drawn emerging from the center and pointing in all directions, 1.3211 - with the color of each ray equal to the color of the gradient-line where 1.3212 - they intersect it. 1.3213 - 1.3214 - <p class=note> These gradients are called "conic" or "conical" because, if 1.3215 - the color stops are chosen to be significantly lighter on one side than 1.3216 - the other, it produces a pattern that looks like a cone observed from 1.3217 - above. 1.3218 - 1.3219 - <h4 class=no-toc id=conic-gradient-syntax><span class=secno>4.3.1. </span> 1.3220 - ‘<code class=css>conic-gradient()</code>’ Syntax</h4> 1.3221 - 1.3222 - <p> The syntax for a conic gradient is: 1.3223 - 1.3224 - <pre class=prod><!-- 1.3225 - --><dfn 1.3226 - id=conic-gradient-type><conic-gradient></dfn> = conic-gradient( 1.3227 +<h3 data-level=4.3 id=conic-gradients><span class=secno>4.3 </span><span class=content> 1.3228 +Conic Gradients: the <a class=css data-link-type=maybe href=#funcdef-conic-gradient>conic-gradient()</a> notation</span><a class=section-link href=#conic-gradients>§</a></h3> 1.3229 + 1.3230 +<p> A conic gradient starts by specifying the center of a circle, 1.3231 + similar to radial gradients, 1.3232 + except that conic gradient color-stops are placed <em>around</em> the circumference of the circle, 1.3233 + rather than on a line emerging from the center, 1.3234 + causing the color to smoothly transition as you spin around the center, 1.3235 + rather than as you progress outward from the center. 1.3236 + 1.3237 +<p> A conic gradient is specified by indicating the center of the gradient, 1.3238 + and then specifying a list of color-stops. 1.3239 + Unlike linear and radial gradients, 1.3240 + whose color-stops are placed by specifying a <code><length></code>, 1.3241 + the color-stops of a conic gradient are specified with an <code><angle></code>. 1.3242 + Rays are then drawn emerging from the center and pointing in all directions, 1.3243 + with the color of each ray equal to the color of the gradient-line where they intersect it. 1.3244 + 1.3245 +<p class=note> Note: These gradients are called "conic" or "conical" 1.3246 + because, if the color stops are chosen to be significantly lighter on one side than the other, 1.3247 + it produces a pattern that looks like a cone observed from above. 1.3248 + 1.3249 +<h4 class=no-toc data-level=4.3.1 id=conic-gradient-syntax><span class=secno>4.3.1 </span><span class=content> 1.3250 +<a class=css data-link-type=maybe href=#funcdef-conic-gradient>conic-gradient()</a> Syntax</span><a class=section-link href=#conic-gradient-syntax>§</a></h4> 1.3251 + 1.3252 +<p> The syntax for a conic gradient is: 1.3253 + 1.3254 + <pre class=prod> <dfn data-dfn-type=function id=funcdef-conic-gradient>conic-gradient()</dfn> = conic-gradient( 1.3255 + [ at <a class=production data-link-type=type href=#typedef-position><var><position></var></a> , ]? 1.3256 + <a class=production data-link-type=type href=#typedef-angular-color-stop-list><var><angular-color-stop-list></var></a> 1.3257 + ) 1.3258 +</pre> 1.3259 +<p> The <a class=production data-link-type=type href=#typedef-position><var><position></var></a> argument is defined in [!CSS3VAL], 1.3260 + and is resolved using the center-point as the object area 1.3261 + and the gradient box as the positioning area. 1.3262 + If this argument is omitted, 1.3263 + it defaults to 'at center'. 1.3264 + 1.3265 + <p class=issue> 1.3266 + Anything else that might be useful? Defining the shape of the gradient as elliptical, perhaps? 1.3267 + 1.3268 +<h4 class=no-toc data-level=4.3.2 id=conic-color-stops><span class=secno>4.3.2 </span><span class=content> 1.3269 +Placing Color Stops</span><a class=section-link href=#conic-color-stops>§</a></h4> 1.3270 + 1.3271 +<p> Color stops are placed on a <a href=#gradient-line>gradient line</a> that curves around the center in a circle, 1.3272 + with both the 0% and 100% locations at 0deg. 1.3273 + Just like linear gradients, 1.3274 + 0deg points to the top of the page, 1.3275 + and increasing angles correspond to clockwise movement around the circle. 1.3276 + 1.3277 +<p class=note> Note: It may be more helpful to think of the gradient line as forming a spiral, 1.3278 + where only the segment from 0deg to 360deg is rendered. 1.3279 + This avoids any confusion about "overlap" when you have angles outside of the rendered region. 1.3280 + 1.3281 +<p> A color-stop can be placed at a location before 0% or after 100%; 1.3282 + though these regions are never directly consulted for rendering, 1.3283 + color stops placed there can affect the color of color-stops within the rendered region 1.3284 + through interpolation or repetition (see <a href=#repeating-gradients>repeating gradients</a>). 1.3285 + For example, <span class=css data-link-type=maybe>conic-gradient(red -50%, yellow 150%)</span> produces a conic gradient 1.3286 + that starts with a reddish-orange color at 0deg (specifically, #f50), 1.3287 + and transitions to an orangish-yellow color at 360deg (specifically, #fa0). 1.3288 + 1.3289 +<p> The color of the gradient at any point is determined by first finding the unique ray 1.3290 + anchored at the center of the gradient that passes through the given point. 1.3291 + The point's color is then the color of the <a href=#gradient-line>gradient line</a> at the location where this ray intersects it. 1.3292 + 1.3293 +<h4 class=no-toc data-level=4.3.3 id=conic-gradient-examples><span class=secno>4.3.3 </span><span class=content> 1.3294 +Conic Gradient Examples</span><a class=section-link href=#conic-gradient-examples>§</a></h4> 1.3295 + 1.3296 + <p class=issue> 1.3297 + Produce examples. 1.3298 + Better yet, strike this section, and intermix some examples into the sections above. 1.3299 + Do this for the other two types of gradients as well. 1.3300 + 1.3301 + 1.3302 + 1.3303 <!-- 1.3304 - --> [ at <a 1.3305 - href="#position"><var><position></var></a> , ]? 1.3306 -<!-- 1.3307 - --> <a 1.3308 - href="#ltangular-color-stop-list"><var><angular-color-stop-list></var></a> 1.3309 -<!-- 1.3310 - -->)</pre> 1.3311 - 1.3312 - <p> The <a href="#position"><code><position></code></a> argument is 1.3313 - defined in [!CSS3VAL], and is resolved using the center-point as the 1.3314 - object area and the gradient box as the positioning area. If this argument 1.3315 - is omitted, it defaults to ‘<code class=css>at center</code>’. 1.3316 - 1.3317 - <p class=issue> Anything else that might be useful? Defining the shape of 1.3318 - the gradient as elliptical, perhaps? 1.3319 - 1.3320 - <h4 class=no-toc id=conic-color-stops><span class=secno>4.3.2. </span> 1.3321 - Placing Color Stops</h4> 1.3322 - 1.3323 - <p> Color stops are placed on a <a href="#gradient-line0"><i>gradient 1.3324 - line</i></a> that curves around the center in a circle, with both the 0% 1.3325 - and 100% locations at 0deg. Just like linear gradients, 0deg points to the 1.3326 - top of the page, and increasing angles correspond to clockwise movement 1.3327 - around the circle. 1.3328 - 1.3329 - <p class=note> It may be more helpful to think of the gradient line as 1.3330 - forming a spiral, where only the segment from 0deg to 360deg is rendered. 1.3331 - This avoids any confusion about "overlap" when you have angles outside of 1.3332 - the rendered region. 1.3333 - 1.3334 - <p> A color-stop can be placed at a location before 0% or after 100%; 1.3335 - though these regions are never directly consulted for rendering, color 1.3336 - stops placed there can affect the color of color-stops within the rendered 1.3337 - region through interpolation or repetition (see <a 1.3338 - href="#repeating-gradients">repeating gradients</a>). For example, 1.3339 - ‘<code class=css>conic-gradient(red -50%, yellow 150%)</code>’ 1.3340 - produces a conic gradient that starts with a reddish-orange color at 0deg 1.3341 - (specifically, #f50), and transitions to an orangish-yellow color at 1.3342 - 360deg (specifically, #fa0). 1.3343 - 1.3344 - <p> The color of the gradient at any point is determined by first finding 1.3345 - the unique ray anchored at the center of the gradient that passes through 1.3346 - the given point. The point's color is then the color of the <a 1.3347 - href="#gradient-line0"><i>gradient line</i></a> at the location where this 1.3348 - ray intersects it. 1.3349 - 1.3350 - <h4 class=no-toc id=conic-gradient-examples><span class=secno>4.3.3. 1.3351 - </span> Conic Gradient Examples</h4> 1.3352 - 1.3353 - <p class=issue> Produce examples. Better yet, strike this section, and 1.3354 - intermix some examples into the sections above. Do this for the other two 1.3355 - types of gradients as well. <!-- 1.3356 RRRRRRRRRRRRRRRRR tttt iiii 1.3357 R::::::::::::::::R ttt:::t i::::i 1.3358 R::::::RRRRRR:::::R t:::::t iiii 1.3359 @@ -2104,130 +1591,105 @@ 1.3360 p:::::::p gg:::::::::::::g 1.3361 ppppppppp ggg::::::ggg 1.3362 1.3363 ---> 1.3364 - 1.3365 - <h3 id=repeating-gradients><span class=secno>4.4. </span> Repeating 1.3366 - Gradients: the ‘<code class=css>repeating-linear-gradient()</code>’, 1.3367 - ‘<code class=css>repeating-radial-gradient()</code>’, and ‘<code 1.3368 - class=css>repeating-conic-gradient()</code>’ notations</h3> 1.3369 - 1.3370 - <p> In addition to <a 1.3371 - href="#linear-gradient-type"><var><linear-gradient></var></a>, <a 1.3372 - href="#radial-gradient-type"><var><radial-gradient></var></a>, and <a 1.3373 - href="#conic-gradient-type"><var><conic-gradient></var></a>, this 1.3374 - specification defines <dfn 1.3375 - id=repeating-linear-gradient-type><repeating-linear-gradient></dfn>, 1.3376 - <dfn 1.3377 - id=repeating-radial-gradient-type><repeating-radial-gradient></dfn>, 1.3378 - and <dfn 1.3379 - id=repeating-conic-gradient-type><repeating-conic-gradient></dfn> 1.3380 - values. These notations take the same values and are interpreted the same 1.3381 - as their respective non-repeating siblings defined previously. 1.3382 - 1.3383 - <p> When rendered, however, the color-stops are repeated infinitely in both 1.3384 - directions, with their positions shifted by multiples of the difference 1.3385 - between the last specified color-stop's position and the first specified 1.3386 - color-stop's position. For example, ‘<code 1.3387 - class=css>repeating-linear-gradient(red 10px, blue 50px)</code>’ is 1.3388 - equivalent to ‘<code class=css>linear-gradient(..., red -30px, blue 1.3389 - 10px, red 10px, blue 50px, red 50px, blue 90px, ...)</code>’. Note that 1.3390 - the last color-stop and first color-stop will always coincide at the 1.3391 - boundaries of each group, which will produce sharp transitions if the 1.3392 - gradient does not start and end with the same color. 1.3393 - 1.3394 - <div class=example> 1.3395 - <p> Repeating gradient syntax is identical to that of non-repeating 1.3396 - gradients: 1.3397 - 1.3398 - <pre>repeating-linear-gradient(red, blue 20px, red 40px)</pre> 1.3399 - 1.3400 - <p><img alt="" src="images/repeating1.png"> 1.3401 - 1.3402 - <pre>repeating-radial-gradient(red, blue 20px, red 40px)</pre> 1.3403 - 1.3404 - <p><img alt="" src="images/repeating2.png"> 1.3405 - 1.3406 - <pre>repeating-radial-gradient(circle closest-side at 20px 30px, red, yellow, green 100%, yellow 150%, red 200%)</pre> 1.3407 - 1.3408 - <p><img alt="" src="images/repeating3.png"> 1.3409 - 1.3410 - <pre>repeating-conic-gradient(at 20%, white 0deg, white 20deg, red 20deg, red 40deg)</pre> 1.3411 - 1.3412 - <p class=issue>Insert rendering here. 1.3413 - </div> 1.3414 - 1.3415 - <p> If the gradient has only a single color-stop, it must render as a 1.3416 - solid-color image equal to the color of that color-stop. 1.3417 - 1.3418 - <p> If the distance between the first and last color-stops is non-zero, but 1.3419 - is small enough that the implementation knows that the physical resolution 1.3420 - of the output device is insufficient to faithfully render the gradient, 1.3421 - the implementation must <a href="#find-the-average-color-of-a-gradient"><i 1.3422 - title=gradient-average-color>find the average color of the 1.3423 - gradient</i></a> and render the gradient as a solid-color image equal to 1.3424 - the average color. 1.3425 - 1.3426 - <p> If the distance between the first and last color-stops is zero (or 1.3427 - rounds to zero due to implementation limitations), the implementation must 1.3428 - <a href="#find-the-average-color-of-a-gradient"><i 1.3429 - title=gradient-average-color>find the average color of a gradient</i></a> 1.3430 - with the same number and color of color-stops, but with the first and last 1.3431 - color-stop an arbitrary non-zero distance apart, and the remaining 1.3432 - color-stops equally spaced between them. Then it must render the gradient 1.3433 - as a solid-color image equal to that average color. 1.3434 - 1.3435 - <p> If the width of the ending shape of a repeating radial gradient is 1.3436 - non-zero and the height is zero, or is close enough to zero that the 1.3437 - implementation knows that the physical resolution of the output device is 1.3438 - insufficient to faithfully render the gradient, the implementation must <a 1.3439 - href="#find-the-average-color-of-a-gradient"><i 1.3440 - title=gradient-average-color>find the average color of the 1.3441 - gradient</i></a> and render the gradient as a solid-color image equal to 1.3442 - the average color. 1.3443 - 1.3444 - <p class=note> Note: The <a href="#degenerate-radials">Degenerate Radial 1.3445 - Gradients</a> section describes how the ending shape is adjusted when its 1.3446 - width is zero. 1.3447 - 1.3448 - <p> To <dfn id=find-the-average-color-of-a-gradient 1.3449 - title=gradient-average-color>find the average color of a gradient</dfn>, 1.3450 - run these steps: 1.3451 - 1.3452 - <ol> 1.3453 - <li> Define <var>list</var> as an initially-empty list of premultiplied 1.3454 - RGBA colors, and <var>total-length</var> as the distance between first 1.3455 - and last color stops. 1.3456 - 1.3457 - <li> For each adjacent pair of color-stops, define <var>weight</var> as 1.3458 - half the distance between the two color-stops, divided by 1.3459 - <var>total-length</var>. Add two entries to <var>list</var>, the first 1.3460 - obtained by representing the color of the first color-stop in 1.3461 - premultiplied sRGBA and scaling all of the components by 1.3462 - <var>weight</var>, and the second obtained in the same way with the 1.3463 - second color-stop. 1.3464 - 1.3465 - <li> Sum the entries of <var>list</var> component-wise to produce the 1.3466 - average color, and return it. 1.3467 - </ol> 1.3468 - 1.3469 - <p class=note> As usual, implementations may use whatever algorithm they 1.3470 - wish, so long as it produces the same result as the above. 1.3471 - 1.3472 - <div class=example> 1.3473 - <p> For example, the following gradient is rendered as a solid 1.3474 - light-purple image (equal to <code>rgb(75%,50%,75%)</code>): 1.3475 - 1.3476 - <pre class=css>repeating-linear-gradient(red 0px, white 0px, blue 0px);</pre> 1.3477 - 1.3478 - <p> The following gradient would render the same as the previous under 1.3479 - normal circumstances (because desktop monitors can't faithfully render 1.3480 - color-stops 1/10th of a pixel apart), but would render as a normal 1.3481 - repeating gradient if, for example, the author applied "zoom:100;" to the 1.3482 - element on which the gradient appears: 1.3483 - 1.3484 - <pre class=css>repeating-linear-gradient(red 0px, white .1px, blue .2px);</pre> 1.3485 - </div> 1.3486 - <!-- 1.3487 +<p>--> 1.3488 + 1.3489 + 1.3490 +<h3 data-level=4.4 id=repeating-gradients><span class=secno>4.4 </span><span class=content> 1.3491 +Repeating Gradients: the <a class=css data-link-type=maybe href=#funcdef-repeating-linear-gradient>repeating-linear-gradient()</a>, <a class=css data-link-type=maybe href=#funcdef-repeating-radial-gradient>repeating-radial-gradient()</a>, and <a class=css data-link-type=maybe href=#funcdef-repeating-conic-gradient>repeating-conic-gradient()</a> notations</span><a class=section-link href=#repeating-gradients>§</a></h3> 1.3492 + 1.3493 +<p> In addition to <a class=css data-link-type=maybe href=#funcdef-linear-gradient>linear-gradient()</a>, <a class=css data-link-type=maybe href=#funcdef-radial-gradient>radial-gradient()</a>, and <a class=css data-link-type=maybe href=#funcdef-conic-gradient>conic-gradient()</a>, 1.3494 + this specification defines <dfn data-dfn-type=function id=funcdef-repeating-linear-gradient>repeating-linear-gradient()</dfn>, 1.3495 + <dfn data-dfn-type=function id=funcdef-repeating-radial-gradient>repeating-radial-gradient()</dfn>, 1.3496 + and <dfn data-dfn-type=function id=funcdef-repeating-conic-gradient>repeating-conic-gradient()</dfn> values. 1.3497 + These notations take the same values 1.3498 + and are interpreted the same 1.3499 + as their respective non-repeating siblings defined previously. 1.3500 + 1.3501 +<p> When rendered, however, the color-stops are repeated infinitely in both directions, 1.3502 + with their positions shifted by multiples of the difference between 1.3503 + the last specified color-stop's position 1.3504 + and the first specified color-stop's position. 1.3505 + For example, <span class=css data-link-type=maybe>repeating-linear-gradient(red 10px, blue 50px)</span> 1.3506 + is equivalent to <span class=css data-link-type=maybe>linear-gradient(..., red -30px, blue 10px, red 10px, blue 50px, red 50px, blue 90px, ...)</span>. 1.3507 + Note that the last color-stop and first color-stop will always coincide at the boundaries of each group, 1.3508 + which will produce sharp transitions if the gradient does not start and end with the same color. 1.3509 + 1.3510 + <div class=example> 1.3511 + 1.3512 +<p> Repeating gradient syntax is identical to that of non-repeating gradients: 1.3513 + 1.3514 +<pre>repeating-linear-gradient(red, blue 20px, red 40px)</pre><p> <img alt="" src=images/repeating1.png> 1.3515 + 1.3516 +<pre>repeating-radial-gradient(red, blue 20px, red 40px)</pre><p> <img alt="" src=images/repeating2.png> 1.3517 + 1.3518 +<pre>repeating-radial-gradient(circle closest-side at 20px 30px, red, yellow, green 100%, yellow 150%, red 200%)</pre><p> <img alt="" src=images/repeating3.png> 1.3519 + 1.3520 +<pre>repeating-conic-gradient(at 20%, white 0deg, white 20deg, red 20deg, red 40deg)</pre> <p class=issue>Insert rendering here. 1.3521 + </div> 1.3522 + 1.3523 +<p> If the gradient has only a single color-stop, 1.3524 + it must render as a solid-color image equal to the color of that color-stop. 1.3525 + 1.3526 +<p> If the distance between the first and last color-stops is non-zero, 1.3527 + but is small enough that the implementation knows that the physical resolution of the output device is insufficient to faithfully render the gradient, 1.3528 + the implementation must <a href=#find-the-average-color-of-a-gradient title=gradient-average-color>find the average color of the gradient 1.3529 + and render the gradient as a solid-color image equal to the average color. 1.3530 + 1.3531 +</a><p><a href=#find-the-average-color-of-a-gradient title=gradient-average-color> If the distance between the first and last color-stops is zero 1.3532 + (or rounds to zero due to implementation limitations), 1.3533 + the implementation must <a href=#find-the-average-color-of-a-gradient title=gradient-average-color>find the average color of a gradient 1.3534 + with the same number and color of color-stops, 1.3535 + but with the first and last color-stop an arbitrary non-zero distance apart, 1.3536 + and the remaining color-stops equally spaced between them. 1.3537 + Then it must render the gradient as a solid-color image equal to that average color. 1.3538 + 1.3539 +</a></a><p><a href=#find-the-average-color-of-a-gradient title=gradient-average-color><a href=#find-the-average-color-of-a-gradient title=gradient-average-color> If the width of the ending shape of a repeating radial gradient is non-zero 1.3540 + and the height is zero, 1.3541 + or is close enough to zero that the implementation knows that the physical resolution of the output device is insufficient to faithfully render the gradient, 1.3542 + the implementation must <a href=#find-the-average-color-of-a-gradient title=gradient-average-color>find the average color of the gradient 1.3543 + and render the gradient as a solid-color image equal to the average color. 1.3544 + 1.3545 +</a></a></a><p class=note><a href=#find-the-average-color-of-a-gradient title=gradient-average-color><a href=#find-the-average-color-of-a-gradient title=gradient-average-color><a href=#find-the-average-color-of-a-gradient title=gradient-average-color> Note: The <a href=#degenerate-radials>Degenerate Radial Gradients</a> section 1.3546 + describes how the ending shape is adjusted when its width is zero. 1.3547 + 1.3548 +</a></a></a><p><a href=#find-the-average-color-of-a-gradient title=gradient-average-color><a href=#find-the-average-color-of-a-gradient title=gradient-average-color><a href=#find-the-average-color-of-a-gradient title=gradient-average-color> To <dfn data-dfn-type=dfn id=find-the-average-color-of-a-gradient title=gradient-average-color>find the average color of a gradient</dfn>, 1.3549 + run these steps: 1.3550 + 1.3551 + </a></a></a><ol><a href=#find-the-average-color-of-a-gradient title=gradient-average-color><a href=#find-the-average-color-of-a-gradient title=gradient-average-color><a href=#find-the-average-color-of-a-gradient title=gradient-average-color> 1.3552 + <li> 1.3553 + Define <var>list</var> as an initially-empty list of premultiplied RGBA colors, 1.3554 + and <var>total-length</var> as the distance between first and last color stops. 1.3555 + 1.3556 + <li> 1.3557 + For each adjacent pair of color-stops, 1.3558 + define <var>weight</var> as half the distance between the two color-stops, 1.3559 + divided by <var>total-length</var>. 1.3560 + Add two entries to <var>list</var>, 1.3561 + the first obtained by representing the color of the first color-stop in premultiplied sRGBA 1.3562 + and scaling all of the components by <var>weight</var>, 1.3563 + and the second obtained in the same way with the second color-stop. 1.3564 + 1.3565 + <li> 1.3566 + Sum the entries of <var>list</var> component-wise to produce the average color, 1.3567 + and return it. 1.3568 + </a></a></a></ol><a href=#find-the-average-color-of-a-gradient title=gradient-average-color><a href=#find-the-average-color-of-a-gradient title=gradient-average-color><a href=#find-the-average-color-of-a-gradient title=gradient-average-color> 1.3569 + 1.3570 +<p class=note> Note: As usual, implementations may use whatever algorithm they wish, 1.3571 + so long as it produces the same result as the above. 1.3572 + 1.3573 + <div class=example> 1.3574 + For example, the following gradient is rendered as a solid light-purple image (equal to <code>rgb(75%,50%,75%)</code>): 1.3575 + 1.3576 +<pre class=css>repeating-linear-gradient(red 0px, white 0px, blue 0px);</pre> 1.3577 +<p> The following gradient would render the same as the previous under normal circumstances 1.3578 + (because desktop monitors can't faithfully render color-stops 1/10th of a pixel apart), 1.3579 + but would render as a normal repeating gradient if, for example, 1.3580 + the author applied "zoom:100;" to the element on which the gradient appears: 1.3581 + 1.3582 +<pre class=css>repeating-linear-gradient(red 0px, white .1px, blue .2px);</pre> </div> 1.3583 + 1.3584 + 1.3585 +<!-- 1.3586 SSSSSSSSSSSSSSS tttt 1.3587 SS:::::::::::::::S ttt:::t 1.3588 S:::::SSSSSS::::::S t:::::t 1.3589 @@ -2252,299 +1714,227 @@ 1.3590 ppppppppp 1.3591 --> 1.3592 1.3593 - <h3 id=color-stop-syntax><span class=secno>4.5. </span> Gradient 1.3594 - Color-Stops</h3> 1.3595 - 1.3596 - <pre class=prod> 1.3597 + 1.3598 +<h3 data-level=4.5 id=color-stop-syntax><span class=secno>4.5 </span><span class=content> 1.3599 +Gradient Color-Stops</span><a class=section-link href=#color-stop-syntax>§</a></h3> 1.3600 + 1.3601 + <pre class=prod> <dfn data-dfn-type=type id=typedef-color-stop-list><color-stop-list></dfn> = 1.3602 + <a class=production data-link-type=type href=#typedef-cap-linear-color-stop><var><cap-linear-color-stop></var></a> , [ <a class=production data-link-type=type href=#typedef-linear-color-stop><var><linear-color-stop></var></a># , ]? <a class=production data-link-type=type href=#typedef-cap-linear-color-stop><var><cap-linear-color-stop></var></a> 1.3603 + <dfn data-dfn-type=type id=typedef-cap-linear-color-stop><cap-linear-color-stop></dfn> = <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-color><var><color></var></a> && <a class=production data-link-type=type href=#typedef-color-stop-length><var><color-stop-length></var></a>? 1.3604 + <dfn data-dfn-type=type id=typedef-linear-color-stop><linear-color-stop></dfn> = <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-color><var><color></var></a> || <a class=production data-link-type=type href=#typedef-color-stop-length><var><color-stop-length></var></a> 1.3605 + <dfn data-dfn-type=type id=typedef-color-stop-length><color-stop-length></dfn> = [ <var title=""><length>> | <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage><var><percentage></var></a> ]{1,2} 1.3606 + 1.3607 + <dfn data-dfn-type=type id=typedef-angular-color-stop-list><angular-color-stop-list></dfn> = 1.3608 + <a class=production data-link-type=type href=#typedef-cap-angular-color-stop><var><cap-angular-color-stop></var></a> , [ <a class=production data-link-type=type href=#typedef-angular-color-stop><var><angular-color-stop></var></a># , ]? <a class=production data-link-type=type href=#typedef-cap-angular-color-stop><var><cap-angular-color-stop></var></a> 1.3609 + <dfn data-dfn-type=type id=typedef-cap-angular-color-stop><cap-angular-color-stop></dfn> = <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-color><var><color></var></a> && <a class=production data-link-type=type href=#typedef-color-stop-angle><var><color-stop-angle></var></a>? 1.3610 + <dfn data-dfn-type=type id=typedef-angular-color-stop><angular-color-stop></dfn> = <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-color><var><color></var></a> || <a class=production data-link-type=type href=#typedef-color-stop-angle><var><color-stop-angle></var></a> 1.3611 + <dfn data-dfn-type=type id=typedef-color-stop-angle><color-stop-angle></dfn> = [ <a class=production data-link-type=type href=#typedef-angle><var><angle></var></a> | <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage><var><percentage></var></a> ]{1,2} 1.3612 +</var></pre> 1.3613 + <p class=issue> 1.3614 + This is past the complexity point where it can be easily understood with just prose. 1.3615 + Add a diagram illustrating the possibilities, 1.3616 + preferably for all three kinds of gradients 1.3617 + (to show off the three shapes of gradient lines). 1.3618 + 1.3619 +<p> The colors in gradients are specified using <a href=#color-stop>color stops</a>. 1.3620 + A <dfn data-dfn-type=dfn id=color-stop>color stop</dfn> is a combination of a color and one or two positions. 1.3621 + (Depending on the type of gradient, that position can be a length, angle, or percentage.) 1.3622 + While every color stop conceptually has both of these, 1.3623 + either of them can be omitted when writing a stylesheet. 1.3624 + (The missing parts are automatically filled in by the user agent.) 1.3625 + 1.3626 +<p> Color stops are organized into a <dfn data-dfn-type=dfn id=color-stop-list>color stop list</dfn>, 1.3627 + which is a list of one or more <a href=#color-stop>color stops</a>. 1.3628 + The first and last <a href=#color-stop>color stops</a> in the list 1.3629 + must have a color 1.3630 + (though their position can be omitted). 1.3631 + 1.3632 +<p> <a href=#color-stop>Color stops</a> are placed on a <a href=#gradient-line>gradient line</a>, 1.3633 + which defines the colors at every point of a gradient. 1.3634 + The gradient function defines the shape and length of the <a href=#gradient-line>gradient line</a>, 1.3635 + along with its <dfn data-dfn-type=dfn id=starting-point>starting point</dfn> and <dfn data-dfn-type=dfn id=ending-point>ending point</dfn>. 1.3636 + 1.3637 +<p> <a href=#color-stop>Color stops</a> must be specified in order. 1.3638 + Percentages refer to the length of the <a href=#gradient-line>gradient line</a> between the <a href=#starting-point>starting point</a> and <a href=#ending-point>ending point</a>, 1.3639 + with 0% being at the starting point 1.3640 + and 100% being at the ending point. 1.3641 + Lengths are measured from the <a href=#starting-point>starting point</a> in the direction of the <a href=#ending-point>ending point</a> along the <a href=#gradient-line>gradient line</a>. 1.3642 + Angles are measured with 0deg pointing up, 1.3643 + and positive angles corresponding to clockwise rotations from there. 1.3644 + 1.3645 +<p> <a href=#color-stop>Color stops</a> are usually placed between the <a href=#starting-point>starting point</a> and <a href=#ending-point>ending point</a>, 1.3646 + but that's not required; 1.3647 + the gradient line extends infinitely in both directions, 1.3648 + and a <a href=#color-stop>color stop</a> can be placed at any position on the <a href=#gradient-line>gradient line</a>. 1.3649 + 1.3650 +<p> A <a href=#color-stop>color stop</a> with two locations is mostly equivalent 1.3651 + to specifying two <a href=#color-stop>color stops</a> with the same color, 1.3652 + one for each position. 1.3653 + However, if the color is omitted, 1.3654 + it's treated slightly differently by step 4 in the clean-up algorithm below. 1.3655 + <span class=note>Specifying two locations makes it easier to create solid-color "stripes" in a gradient, 1.3656 + without having to repeat the color twice.</span> 1.3657 + 1.3658 +<p> The position of a <a href=#color-stop>color stop</a> can be omitted. 1.3659 + This causes the <a href=#color-stop>color stop</a> to position itself automatically 1.3660 + between the two surrounding stops. 1.3661 + If multiple stops in a row lack a position, 1.3662 + they space themselves out equally. 1.3663 + 1.3664 +<p> Similarly, the color of a <a href=#color-stop>color stop</a> can be omitted. 1.3665 + The causes the <em>color</em> to be automatically computed 1.3666 + to halfway between the two surrounding stops, 1.3667 + so that the "midpoint" of a transition can be easily adjusted. 1.3668 + If multiple stops in a row lack a color, 1.3669 + they space themselves out equally in "color space", 1.3670 + giving more control over the smoothness of the transition. 1.3671 + 1.3672 +<p> The following steps must be applied <em>in order</em> to process the list of <a href=#color-stop>color stops</a>. 1.3673 + After applying these rules, 1.3674 + all <a href=#color-stop>color stops</a> will have a definite position and color 1.3675 + and they will be in ascending order: 1.3676 + 1.3677 + <ol> 1.3678 + <li> 1.3679 + If the first <a href=#color-stop>color stop</a> does not have a position, 1.3680 + set its position to 0%. 1.3681 + If the last <a href=#color-stop>color stop</a> does not have a position, 1.3682 + set its position to 100%. 1.3683 + 1.3684 + <li> 1.3685 + If a <a href=#color-stop>color stop</a> has a position that is less than the specified position of any <a href=#color-stop>color stop</a> before it in the list, 1.3686 + set its position to be equal to the largest specified position of any <a href=#color-stop>color stop</a> before it. 1.3687 + 1.3688 + <li> 1.3689 + If any <a href=#color-stop>color stop</a> still does not have a position, 1.3690 + then, for each run of adjacent <a href=#color-stop>color stops</a> without positions, 1.3691 + set their positions so that they are evenly spaced between the preceding and following <a href=#color-stop>color stops</a> with positions. 1.3692 + 1.3693 + <li> 1.3694 + If any <a href=#color-stop>color stop</a> does not have a color, 1.3695 + then, for each run of adjacent <a href=#color-stop>color stops</a> without colors, 1.3696 + set their colors to be evenly spaced linear interpolations in premultiplied sRGBA space 1.3697 + between the preceding and following <a href=#color-stop>color stops</a> with colors. 1.3698 + Note that a <a href=#color-stop>color stop</a> with two positions is still counted as a single <a href=#color-stop>color stop</a> by this step, 1.3699 + so both positions will be assigned the same color. 1.3700 + </ol> 1.3701 + 1.3702 + <p class=issue> 1.3703 + This requires us to wait until <em>after</em> layout to do fix-up, 1.3704 + because implied-position stops (set by step 3) 1.3705 + may depend on stops that need layout information to place, 1.3706 + and which may be corrected by step 2. 1.3707 + Swapping steps 2 and 3 would let us interpolate <a href=#color-stop>color stops</a> purely at computed-value time, 1.3708 + which is a nice plus, 1.3709 + at the cost of changing behavior from level 3 for some edge cases that triggered fixup. 1.3710 + Make sure this is handled well in the serialization rules. 1.3711 + 1.3712 +<p> At each <a href=#color-stop>color stop</a> position, 1.3713 + the line is the color of the <a href=#color-stop>color stop</a>. 1.3714 + Between two <a href=#color-stop>color stops</a>, 1.3715 + the line's color is linearly interpolated between the colors of the two <a href=#color-stop>color stops</a>, 1.3716 + with the interpolation taking place in premultiplied RGBA space. 1.3717 + Before the first <a href=#color-stop>color stop</a>, 1.3718 + the line is the color of the first <a href=#color-stop>color stop</a>. 1.3719 + After the last <a href=#color-stop>color stop</a>, the line is the color of the last <a href=#color-stop>color stop</a>. 1.3720 + 1.3721 +<p> If multiple <a href=#color-stop>color stops</a> have the same position, 1.3722 + they produce an infinitesimal transition from the one specified first in the rule 1.3723 + to the one specified last. 1.3724 + In effect, the color suddenly changes at that position rather than smoothly transitioning. 1.3725 + 1.3726 + <div class=example> 1.3727 + Below are several pairs of gradients. 1.3728 + The latter of each pair is a manually "fixed-up" version of the former, 1.3729 + obtained by applying the above rules. 1.3730 + For each pair, both gradients will render identically. 1.3731 + <span class=note>The numbers in each arrow specify which fixup steps are invoked in the transformation.</span> 1.3732 + 1.3733 + <pre> 1. linear-gradient(red, white 20%, blue) 1.3734 + =1=> 1.3735 + linear-gradient(red 0%, white 20%, blue 100%) 1.3736 + 1.3737 + 2. linear-gradient(red 40%, white, black, blue) 1.3738 + =13=> 1.3739 + linear-gradient(red 40%, white 60%, black 80%, blue 100%) 1.3740 + 1.3741 + 3. linear-gradient(red -50%, white, blue) 1.3742 + =13=> 1.3743 + linear-gradient(red -50%, white 25%, blue 100%) 1.3744 + 1.3745 + 4. linear-gradient(red -50px, white, blue) 1.3746 + =13=> 1.3747 + linear-gradient(red -50px, white calc(-25px + 50%), blue 100%) 1.3748 + 1.3749 + 5. linear-gradient(red 20px, white 0px, blue 40px) 1.3750 + =2=> 1.3751 + linear-gradient(red 20px, white 20px, blue 40px) 1.3752 + 1.3753 + 6. linear-gradient(red, white -50%, black 150%, blue) 1.3754 + =12=> 1.3755 + linear-gradient(red 0%, white 0%, black 150%, blue 150%) 1.3756 + 1.3757 + 7. linear-gradient(red 80px, white 0px, black, blue 100px) 1.3758 + =23=> 1.3759 + linear-gradient(red 80px, white 80px, black 90px, blue 100px) 1.3760 + 1.3761 + 8. linear-gradient(red, 25%, white) 1.3762 + =14=> 1.3763 + linear-gradient(red 0%, rgb(100%,50%,50%) 25%, white 100%) 1.3764 +</pre> </div> 1.3765 + 1.3766 + <div class=example> 1.3767 + The following example illustrates the difference between 1.3768 + a gradient transitioning in pre-multiplied sRGBA 1.3769 + and one transitioning (incorrectly) in non-premultiplied. 1.3770 + In both of these example, 1.3771 + the gradient is drawn over a white background. 1.3772 + Both gradients could be written with the following value: 1.3773 + 1.3774 +<pre>linear-gradient(90deg, red, transparent, blue)</pre> 1.3775 +<p> In premultiplied space, 1.3776 + transitions to or from "transparent" always look nice: 1.3777 + 1.3778 + <object data=images/gradient2.svg height=100 width=200>(Image requires SVG)</object> 1.3779 + 1.3780 +<p> On the other hand, 1.3781 + if a gradient were to incorrectly transition in non-premultiplied space, 1.3782 + the colors near "transparent" would noticeably darken to a grayish color, 1.3783 + because "transparent" is actually a shorthand for <span class=css data-link-type=maybe>rgba(0,0,0,0)</span>, or transparent black: 1.3784 + 1.3785 + <object data=images/gradient3.svg height=100 width=200>(Image requires SVG)</object> 1.3786 + </div> 1.3787 + 1.3788 +<p class=note> Note: It is recommended that authors not mix different types of units, 1.3789 + such as px, em, or %, 1.3790 + in a single rule, 1.3791 + as this can cause a <a href=#color-stop>color stop</a> to unintentionally try to move before an earlier one. 1.3792 + For example, the rule <span class=css data-link-type=maybe>background-image: linear-gradient(yellow 100px, blue 50%)</span> 1.3793 + wouldn't require any fix-up as long as the background area is at least 200px tall. 1.3794 + If it was 150px tall, however, 1.3795 + the blue <a href=#color-stop>color stop's</a> position would be equivalent to "75px", 1.3796 + which precedes the yellow <a href=#color-stop>color stop</a>, 1.3797 + and would be corrected to a position of 100px. 1.3798 + 1.3799 +<p class=note> Note: The definition and implications of "premultiplied" color spaces are given elsewhere in the technical literature, 1.3800 + but a quick primer is given here to illuminate the process. 1.3801 + Given a color expressed as an rgba() 4-tuple, 1.3802 + one can convert this to a premultiplied representation 1.3803 + by multiplying the red, green, and blue components by the alpha component. 1.3804 + For example, a partially-transparent blue may be given as rgba(0,0,255,.5), 1.3805 + which would then be expressed as [0, 0, 127.5, .5] in its premultiplied representation. 1.3806 + Interpolating colors using the premultiplied representations 1.3807 + rather than the plain rgba representations 1.3808 + tends to produce more attractive transitions, 1.3809 + particularly when transitioning from a fully opaque color to fully transparent. 1.3810 + Note that transitions where either the transparency or the color are held constant 1.3811 + (for example, transitioning between rgba(255,0,0,100%) and rgba(0,0,255,100%), 1.3812 + or rgba(255,0,0,100%) and rgba(255,0,0,0%)) 1.3813 + have identical results whether the color interpolation is done in premultiplied or non-premultiplied color-space. 1.3814 + Differences only arise when both the color and transparency differ between the two endpoints. 1.3815 + 1.3816 + 1.3817 <!-- 1.3818 - --><dfn 1.3819 - id=ltcolor-stop-list><color-stop-list></dfn> = 1.3820 -<!-- 1.3821 - --> <a 1.3822 - href="#ltcap-linear-color-stop"><var><cap-linear-color-stop></var></a> , [ <a 1.3823 - href="#ltlinear-color-stop"><var><linear-color-stop></var></a># , ]? <a 1.3824 - href="#ltcap-linear-color-stop"><var><cap-linear-color-stop></var></a> 1.3825 -<!-- 1.3826 - --><dfn 1.3827 - id=ltcap-linear-color-stop><cap-linear-color-stop></dfn> = <var><color></var> && <a 1.3828 - href="#color-stop-lenh"><var><color-stop-length></var></a>? 1.3829 -<!-- 1.3830 - --><dfn 1.3831 - id=ltlinear-color-stop><linear-color-stop></dfn> = <var><color></var> || <a 1.3832 - href="#color-stop-lenh"><var><color-stop-length></var></a> 1.3833 -<!-- 1.3834 - --><dfn 1.3835 - id=color-stop-lenh><color-stop-length></dfn> = [ <var 1.3836 - title=""><length></var> | <var><percentage></var> ]{1,2} 1.3837 -<!-- 1.3838 - --> 1.3839 -<!-- 1.3840 - --><dfn 1.3841 - id=ltangular-color-stop-list><angular-color-stop-list></dfn> = 1.3842 -<!-- 1.3843 - --> <a 1.3844 - href="#ltcap-angular-color-stop"><var><cap-angular-color-stop></var></a> , [ <a 1.3845 - href="#ltangular-color-stop"><var><angular-color-stop></var></a># , ]? <a 1.3846 - href="#ltcap-angular-color-stop"><var><cap-angular-color-stop></var></a> 1.3847 -<!-- 1.3848 - --><dfn 1.3849 - id=ltcap-angular-color-stop><cap-angular-color-stop></dfn> = <var><color></var> && <a 1.3850 - href="#ltcolor-stop-angle"><var><color-stop-angle></var></a>? 1.3851 -<!-- 1.3852 - --><dfn 1.3853 - id=ltangular-color-stop><angular-color-stop></dfn> = <var><color></var> || <a 1.3854 - href="#ltcolor-stop-angle"><var><color-stop-angle></var></a> 1.3855 -<!-- 1.3856 - --><dfn 1.3857 - id=ltcolor-stop-angle><color-stop-angle></dfn> = [ <var><angle></var> | <var><percentage></var> ]{1,2}</pre> 1.3858 - 1.3859 - <p class=issue> This is past the complexity point where it can be easily 1.3860 - understood with just prose. Add a diagram illustrating the possibilities, 1.3861 - preferably for all three kinds of gradients (to show off the three shapes 1.3862 - of gradient lines). 1.3863 - 1.3864 - <p> The colors in gradients are specified using <a 1.3865 - href="#color-stop"><i>color stops</i></a>. A <dfn id=color-stop>color 1.3866 - stop</dfn> is a combination of a color and one or two positions. 1.3867 - (Depending on the type of gradient, that position can be a length, angle, 1.3868 - or percentage.) While every color stop conceptually has both of these, 1.3869 - either of them can be omitted when writing a stylesheet. (The missing 1.3870 - parts are automatically filled in by the user agent.) 1.3871 - 1.3872 - <p> Color stops are organized into a <dfn id=color-stop-list>color stop 1.3873 - list</dfn>, which is a list of one or more <a href="#color-stop"><i>color 1.3874 - stops</i></a>. The first and last <a href="#color-stop"><i>color 1.3875 - stops</i></a> in the list must have a color (though their position can be 1.3876 - omitted). 1.3877 - 1.3878 - <p> <a href="#color-stop"><i>Color stops</i></a> are placed on a <dfn 1.3879 - id=gradient-line0>gradient line</dfn>, which defines the colors at every 1.3880 - point of a gradient. The gradient function defines the shape and length of 1.3881 - the <a href="#gradient-line0"><i>gradient line</i></a>, along with its 1.3882 - <dfn id=starting-point>starting point</dfn> and <dfn 1.3883 - id=ending-point>ending point</dfn>. 1.3884 - 1.3885 - <p> <a href="#color-stop"><i>Color stops</i></a> must be specified in 1.3886 - order. Percentages refer to the length of the <a 1.3887 - href="#gradient-line0"><i>gradient line</i></a> between the <a 1.3888 - href="#starting-point"><i>starting point</i></a> and <a 1.3889 - href="#ending-point"><i>ending point</i></a>, with 0% being at the 1.3890 - starting point and 100% being at the ending point. Lengths are measured 1.3891 - from the <a href="#starting-point"><i>starting point</i></a> in the 1.3892 - direction of the <a href="#ending-point"><i>ending point</i></a> along the 1.3893 - <a href="#gradient-line0"><i>gradient line</i></a>. Angles are measured 1.3894 - with 0deg pointing up, and positive angles corresponding to clockwise 1.3895 - rotations from there. 1.3896 - 1.3897 - <p> <a href="#color-stop"><i>Color stops</i></a> are usually placed between 1.3898 - the <a href="#starting-point"><i>starting point</i></a> and <a 1.3899 - href="#ending-point"><i>ending point</i></a>, but that's not required; the 1.3900 - gradient line extends infinitely in both directions, and a <a 1.3901 - href="#color-stop"><i>color stop</i></a> can be placed at any position on 1.3902 - the <a href="#gradient-line0"><i>gradient line</i></a>. 1.3903 - 1.3904 - <p> A <a href="#color-stop"><i>color stop</i></a> with two locations is 1.3905 - mostly equivalent to specifying two <a href="#color-stop"><i>color 1.3906 - stops</i></a> with the same color, one for each position. However, if the 1.3907 - color is omitted, it's treated slightly differently by step 4 in the 1.3908 - clean-up algorithm below. <span class=note>Specifying two locations makes 1.3909 - it easier to create solid-color "stripes" in a gradient, without having to 1.3910 - repeat the color twice.</span> 1.3911 - 1.3912 - <p> The position of a <a href="#color-stop"><i>color stop</i></a> can be 1.3913 - omitted. This causes the <a href="#color-stop"><i>color stop</i></a> to 1.3914 - position itself automatically between the two surrounding stops. If 1.3915 - multiple stops in a row lack a position, they space themselves out 1.3916 - equally. 1.3917 - 1.3918 - <p> Similarly, the color of a <a href="#color-stop"><i>color stop</i></a> 1.3919 - can be omitted. The causes the <em>color</em> to be automatically computed 1.3920 - to halfway between the two surrounding stops, so that the "midpoint" of a 1.3921 - transition can be easily adjusted. If multiple stops in a row lack a 1.3922 - color, they space themselves out equally in "color space", giving more 1.3923 - control over the smoothness of the transition. 1.3924 - 1.3925 - <p> The following steps must be applied <em>in order</em> to process the 1.3926 - list of <a href="#color-stop"><i>color stops</i></a>. After applying these 1.3927 - rules, all <a href="#color-stop"><i>color stops</i></a> will have a 1.3928 - definite position and color and they will be in ascending order: 1.3929 - 1.3930 - <ol> 1.3931 - <li> If the first <a href="#color-stop"><i>color stop</i></a> does not 1.3932 - have a position, set its position to 0%. If the last <a 1.3933 - href="#color-stop"><i>color stop</i></a> does not have a position, set 1.3934 - its position to 100%. 1.3935 - 1.3936 - <li> If a <a href="#color-stop"><i>color stop</i></a> has a position that 1.3937 - is less than the specified position of any <a href="#color-stop"><i>color 1.3938 - stop</i></a> before it in the list, set its position to be equal to the 1.3939 - largest specified position of any <a href="#color-stop"><i>color 1.3940 - stop</i></a> before it. 1.3941 - 1.3942 - <li> If any <a href="#color-stop"><i>color stop</i></a> still does not 1.3943 - have a position, then, for each run of adjacent <a 1.3944 - href="#color-stop"><i>color stops</i></a> without positions, set their 1.3945 - positions so that they are evenly spaced between the preceding and 1.3946 - following <a href="#color-stop"><i>color stops</i></a> with positions. 1.3947 - 1.3948 - <li> If any <a href="#color-stop"><i>color stop</i></a> does not have a 1.3949 - color, then, for each run of adjacent <a href="#color-stop"><i>color 1.3950 - stops</i></a> without colors, set their colors to be evenly spaced linear 1.3951 - interpolations in premultiplied sRGBA space between the preceding and 1.3952 - following <a href="#color-stop"><i>color stops</i></a> with colors. Note 1.3953 - that a <a href="#color-stop"><i>color stop</i></a> with two positions is 1.3954 - still counted as a single <a href="#color-stop"><i>color stop</i></a> by 1.3955 - this step, so both positions will be assigned the same color. 1.3956 - </ol> 1.3957 - 1.3958 - <p class=issue> This requires us to wait until <em>after</em> layout to do 1.3959 - fix-up, because implied-position stops (set by step 3) may depend on stops 1.3960 - that need layout information to place, and which may be corrected by step 1.3961 - 2. Swapping steps 2 and 3 would let us interpolate <a 1.3962 - href="#color-stop"><i>color stops</i></a> purely at computed-value time, 1.3963 - which is a nice plus, at the cost of changing behavior from level 3 for 1.3964 - some edge cases that triggered fixup. Make sure this is handled well in 1.3965 - the serialization rules. 1.3966 - 1.3967 - <p> At each <a href="#color-stop"><i>color stop</i></a> position, the line 1.3968 - is the color of the <a href="#color-stop"><i>color stop</i></a>. Between 1.3969 - two <a href="#color-stop"><i>color stops</i></a>, the line's color is 1.3970 - linearly interpolated between the colors of the two <a 1.3971 - href="#color-stop"><i>color stops</i></a>, with the interpolation taking 1.3972 - place in premultiplied RGBA space. Before the first <a 1.3973 - href="#color-stop"><i>color stop</i></a>, the line is the color of the 1.3974 - first <a href="#color-stop"><i>color stop</i></a>. After the last <a 1.3975 - href="#color-stop"><i>color stop</i></a>, the line is the color of the 1.3976 - last <a href="#color-stop"><i>color stop</i></a>. 1.3977 - 1.3978 - <p> If multiple <a href="#color-stop"><i>color stops</i></a> have the same 1.3979 - position, they produce an infinitesimal transition from the one specified 1.3980 - first in the rule to the one specified last. In effect, the color suddenly 1.3981 - changes at that position rather than smoothly transitioning. 1.3982 - 1.3983 - <div class=example> 1.3984 - <p> Below are several pairs of gradients. The latter of each pair is a 1.3985 - manually "fixed-up" version of the former, obtained by applying the above 1.3986 - rules. For each pair, both gradients will render identically. <span 1.3987 - class=note>The numbers in each arrow specify which fixup steps are 1.3988 - invoked in the transformation.</span> 1.3989 - 1.3990 - <pre><!-- 1.3991 - -->1. linear-gradient(red, white 20%, blue) 1.3992 -<!-- 1.3993 - --> =1=> 1.3994 -<!-- 1.3995 - --> linear-gradient(red 0%, white 20%, blue 100%) 1.3996 -<!-- 1.3997 - --> 1.3998 -<!-- 1.3999 - -->2. linear-gradient(red 40%, white, black, blue) 1.4000 -<!-- 1.4001 - --> =13=> 1.4002 -<!-- 1.4003 - --> linear-gradient(red 40%, white 60%, black 80%, blue 100%) 1.4004 -<!-- 1.4005 - --> 1.4006 -<!-- 1.4007 - -->3. linear-gradient(red -50%, white, blue) 1.4008 -<!-- 1.4009 - --> =13=> 1.4010 -<!-- 1.4011 - --> linear-gradient(red -50%, white 25%, blue 100%) 1.4012 -<!-- 1.4013 - --> 1.4014 -<!-- 1.4015 - -->4. linear-gradient(red -50px, white, blue) 1.4016 -<!-- 1.4017 - --> =13=> 1.4018 -<!-- 1.4019 - --> linear-gradient(red -50px, white calc(-25px + 50%), blue 100%) 1.4020 -<!-- 1.4021 - --> 1.4022 -<!-- 1.4023 - -->5. linear-gradient(red 20px, white 0px, blue 40px) 1.4024 -<!-- 1.4025 - --> =2=> 1.4026 -<!-- 1.4027 - --> linear-gradient(red 20px, white 20px, blue 40px) 1.4028 -<!-- 1.4029 - --> 1.4030 -<!-- 1.4031 - -->6. linear-gradient(red, white -50%, black 150%, blue) 1.4032 -<!-- 1.4033 - --> =12=> 1.4034 -<!-- 1.4035 - --> linear-gradient(red 0%, white 0%, black 150%, blue 150%) 1.4036 -<!-- 1.4037 - --> 1.4038 -<!-- 1.4039 - -->7. linear-gradient(red 80px, white 0px, black, blue 100px) 1.4040 -<!-- 1.4041 - --> =23=> 1.4042 -<!-- 1.4043 - --> linear-gradient(red 80px, white 80px, black 90px, blue 100px) 1.4044 -<!-- 1.4045 - --> 1.4046 -<!-- 1.4047 - -->8. linear-gradient(red, 25%, white) 1.4048 -<!-- 1.4049 - --> =14=> 1.4050 -<!-- 1.4051 - --> linear-gradient(red 0%, rgb(100%,50%,50%) 25%, white 100%)</pre> 1.4052 - </div> 1.4053 - 1.4054 - <div class=example> 1.4055 - <p> The following example illustrates the difference between a gradient 1.4056 - transitioning in pre-multiplied sRGBA and one transitioning (incorrectly) 1.4057 - in non-premultiplied. In both of these example, the gradient is drawn 1.4058 - over a white background. Both gradients could be written with the 1.4059 - following value: 1.4060 - 1.4061 - <pre>linear-gradient(90deg, red, transparent, blue)</pre> 1.4062 - 1.4063 - <p> In premultiplied space, transitions to or from "transparent" always 1.4064 - look nice: 1.4065 - 1.4066 - <p><object data="images/gradient2.svg" height=100 width=200>(Image 1.4067 - requires SVG)</object> 1.4068 - 1.4069 - <p> On the other hand, if a gradient were to incorrectly transition in 1.4070 - non-premultiplied space, the colors near "transparent" would noticeably 1.4071 - darken to a grayish color, because "transparent" is actually a shorthand 1.4072 - for ‘<code class=css>rgba(0,0,0,0)</code>’, or transparent black: 1.4073 - 1.4074 - <p><object data="images/gradient3.svg" height=100 width=200>(Image 1.4075 - requires SVG)</object> 1.4076 - </div> 1.4077 - 1.4078 - <p class=note> Note: It is recommended that authors not mix different types 1.4079 - of units, such as px, em, or %, in a single rule, as this can cause a <a 1.4080 - href="#color-stop"><i>color stop</i></a> to unintentionally try to move 1.4081 - before an earlier one. For example, the rule ‘<code 1.4082 - class=css>background-image: linear-gradient(yellow 100px, blue 1.4083 - 50%)</code>’ wouldn't require any fix-up as long as the background area 1.4084 - is at least 200px tall. If it was 150px tall, however, the blue <a 1.4085 - href="#color-stop"><i>color stop's</i></a> position would be equivalent to 1.4086 - "75px", which precedes the yellow <a href="#color-stop"><i>color 1.4087 - stop</i></a>, and would be corrected to a position of 100px. 1.4088 - 1.4089 - <p class=note> Note: The definition and implications of "premultiplied" 1.4090 - color spaces are given elsewhere in the technical literature, but a quick 1.4091 - primer is given here to illuminate the process. Given a color expressed as 1.4092 - an rgba() 4-tuple, one can convert this to a premultiplied representation 1.4093 - by multiplying the red, green, and blue components by the alpha component. 1.4094 - For example, a partially-transparent blue may be given as 1.4095 - rgba(0,0,255,.5), which would then be expressed as [0, 0, 127.5, .5] in 1.4096 - its premultiplied representation. Interpolating colors using the 1.4097 - premultiplied representations rather than the plain rgba representations 1.4098 - tends to produce more attractive transitions, particularly when 1.4099 - transitioning from a fully opaque color to fully transparent. Note that 1.4100 - transitions where either the transparency or the color are held constant 1.4101 - (for example, transitioning between rgba(255,0,0,100%) and 1.4102 - rgba(0,0,255,100%) or rgba(255,0,0,100%) and rgba(255,0,0,0%)) have 1.4103 - identical results whether the color interpolation is done in premultiplied 1.4104 - or non-premultiplied color-space. Differences only arise when both the 1.4105 - color and transparency differ between the two endpoints. <!-- 1.4106 SSSSSSSSSSSSSSS iiii iiii 1.4107 SS:::::::::::::::S i::::i i::::i 1.4108 S:::::SSSSSS::::::S iiii iiii 1.4109 @@ -2570,565 +1960,378 @@ 1.4110 gggggg 1.4111 --> 1.4112 1.4113 - <h2 id=sizing><span class=secno>5. </span> Sizing Images and Objects in CSS</h2> 1.4114 - 1.4115 - <p> Images used in CSS may come from a number of sources: from binary image 1.4116 - formats (such as gif, jpeg, etc), dedicated markup formats (such as SVG), 1.4117 - and CSS-specific formats (such as the linear-gradient() value type defined 1.4118 - in this specification). As well, a document may contain many other types 1.4119 - of objects, such as video, plugins, or nested documents. These images and 1.4120 - objects (just <dfn id=objects>objects</dfn> hereafter) may offer many 1.4121 - types of sizing information to CSS, or none at all. This section defines 1.4122 - generically the size negotiation model between the object and the CSS 1.4123 - layout algorithms. 1.4124 - <!-- ====================================================================== --> 1.4125 - 1.4126 - <h3 id=sizing-terms><span class=secno>5.1. </span> Object-Sizing 1.4127 - Terminology</h3> 1.4128 - 1.4129 - <p> In order to define this handling, we define a few terms, to make it 1.4130 - easier to refer to various concepts: 1.4131 - 1.4132 - <dl> 1.4133 - <dt><dfn id=intrinsic-dimensions>intrinsic dimensions</dfn> 1.4134 - 1.4135 - <dd> 1.4136 - <p> The term intrinsic dimensions refers to the set of the <dfn 1.4137 - id=intrinsic-height>intrinsic height</dfn>, <dfn 1.4138 - id=intrinsic-width>intrinsic width</dfn>, and <dfn 1.4139 - id=intrinsic-aspect-ratio>intrinsic aspect ratio</dfn> (the ratio 1.4140 - between the width and height), each of which may or may not exist for a 1.4141 - given object. These intrinsic dimensions represent a preferred or 1.4142 - natural size of the object itself; that is, they are not a function of 1.4143 - the context in which the object is used. CSS does not define how the 1.4144 - intrinsic dimensions are found in general. 1.4145 - 1.4146 - <p> Raster images are an example of an object with all three intrinsic 1.4147 - dimensions. SVG images designed to scale might have only an intrinsic 1.4148 - aspect ratio; SVG images can also be created with only an intrinsic 1.4149 - width or height. CSS gradients, defined in this specification, are an 1.4150 - example of an object with no intrinsic dimensions at all. Another 1.4151 - example of this is embedded documents, such as the 1.4152 - <code><iframe></code> element in HTML. An object cannot have only two 1.4153 - intrinsic dimensions, as any two automatically define the third. 1.4154 - 1.4155 - <p> If an object (such as an icon) has multiple sizes, then the largest 1.4156 - size (by area) is taken as its intrinsic size. If it has multiple aspect 1.4157 - ratios at that size, or has multiple aspect ratios and no size, then the 1.4158 - aspect ratio closest to the aspect ratio of the <a 1.4159 - href="#default-object-size"><i>default object size</i></a> is used. 1.4160 - Determine this by seeing which aspect ratio produces the largest area 1.4161 - when fitting it within the <a href="#default-object-size"><i>default 1.4162 - object size</i></a> using a <i>contain</i> fit; if multiple sizes tie 1.4163 - for the largest area, the wider size is chosen as its intrinsic size. 1.4164 - 1.4165 - <dt><dfn id=specified-size>specified size</dfn> 1.4166 - 1.4167 - <dd> The specified size of an object is given by CSS, such as through the 1.4168 - ‘<code class=property>width</code>’ and ‘<code 1.4169 - class=property>height</code>’ or ‘<code 1.4170 - class=property>background-size</code>’ properties. The specified size 1.4171 - can be a definite width and height, a set of constraints, or a 1.4172 - combination thereof. 1.4173 - 1.4174 - <dt><dfn id=concrete-object-size>concrete object size</dfn> 1.4175 - 1.4176 - <dd> The <a href="#concrete-object-size"><i>concrete object size</i></a> 1.4177 - is the result of combining an object's <a 1.4178 - href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a> and <a 1.4179 - href="#specified-size"><i>specified size</i></a> with the <a 1.4180 - href="#default-object-size"><i>default object size</i></a> of the context 1.4181 - it's used in, producing a rectangle with a definite width and height. 1.4182 - 1.4183 - <dt><dfn id=default-object-size>default object size</dfn> 1.4184 - 1.4185 - <dd> 1.4186 - <p> The <a href="#default-object-size"><i>default object size</i></a> is 1.4187 - a rectangle with a definite height and width used to determine the <a 1.4188 - href="#concrete-object-size"><i>concrete object size</i></a> when both 1.4189 - the <a href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a> and 1.4190 - <a href="#specified-size"><i>specified size</i></a> are missing 1.4191 - dimensions. 1.4192 - </dl> 1.4193 - <!-- ====================================================================== --> 1.4194 - 1.4195 - <h3 id=object-negotiation><span class=secno>5.2. </span> CSS⇋Object 1.4196 - Negotiation</h3> 1.4197 - 1.4198 - <p>Objects in CSS are sized and rendered as follows: 1.4199 - 1.4200 - <ol> 1.4201 - <li> When an image or object is specified in a document, such as through a 1.4202 - ‘<code class=css>url()</code>’ value in a ‘<code 1.4203 - class=property>background-image</code>’ property or a <code>src</code> 1.4204 - attribute on an <code><img></code> element, CSS queries the object for 1.4205 - its <a href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a>. 1.4206 - 1.4207 - <li> Using the <a href="#intrinsic-dimensions"><i>intrinsic 1.4208 - dimensions</i></a>, the <a href="#specified-size"><i>specified 1.4209 - size</i></a>, and the <a href="#default-object-size"><i>default object 1.4210 - size</i></a> for the context the image or object is used in, CSS then 1.4211 - computes a <a href="#concrete-object-size"><i>concrete object 1.4212 - size</i></a>. (See the <a href="#default-sizing">following section</a>.) 1.4213 - This defines the size and position of the region the object will render 1.4214 - in. 1.4215 - 1.4216 - <li> CSS asks the object to render itself at the <a 1.4217 - href="#concrete-object-size"><i>concrete object size</i></a>. CSS does 1.4218 - not define how objects render when the <a 1.4219 - href="#concrete-object-size"><i>concrete object size</i></a> is different 1.4220 - from the object's <a href="#intrinsic-dimensions"><i>intrinsic 1.4221 - dimensions</i></a>. The object may adjust itself to match the <a 1.4222 - href="#concrete-object-size"><i>concrete object size</i></a> in some way, 1.4223 - or even render itself larger or smaller than the <a 1.4224 - href="#concrete-object-size"><i>concrete object size</i></a> to satisfy 1.4225 - sizing constraints of its own. 1.4226 - 1.4227 - <li> Unless otherwise specified by CSS, the object is then clipped to the 1.4228 - <a href="#concrete-object-size"><i>concrete object size</i></a>. 1.4229 - </ol> 1.4230 - <!-- ====================================================================== --> 1.4231 - 1.4232 - <h3 id=concrete-size-resolution><span class=secno>5.3. </span> Concrete 1.4233 - Object Size Resolution</h3> 1.4234 - 1.4235 - <p> Currently the rules for sizing objects are described in each context 1.4236 - that such objects are used. This section defines some common sizing 1.4237 - constraints and how to resolve them so that future specs can refer to them 1.4238 - instead of redefining size resolution in each instance. 1.4239 - 1.4240 - <h4 id=default-sizing><span class=secno>5.3.1. </span> Default Sizing 1.4241 - Algorithm</h4> 1.4242 - 1.4243 - <p> The <dfn id=default-sizing-algorithm>default sizing algorithm</dfn> is 1.4244 - a set of rules commonly used to find an object's <a 1.4245 - href="#concrete-object-size"><i>concrete object size</i></a>. It resolves 1.4246 - the simultaneous constraints presented by the object's <a 1.4247 - href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a> and either an 1.4248 - unconstrained <a href="#specified-size"><i>specified size</i></a> or one 1.4249 - consisting of only a definite width and/or height. 1.4250 - 1.4251 - <p> Some object sizing rules (such as those for ‘<code 1.4252 - class=property>list-style-image</code>’) correspond exactly to the <a 1.4253 - href="#default-sizing-algorithm"><i>default sizing algorithm</i></a>. 1.4254 - Others (such as those for ‘<code class=property>border-image</code>’) 1.4255 - invoke the default sizing algorithm but also apply additional sizing rules 1.4256 - before arriving at a final <a href="#concrete-object-size"><i>concrete 1.4257 - object size</i></a>. 1.4258 - 1.4259 - <p> The <a href="#default-sizing-algorithm"><i>default sizing 1.4260 - algorithm</i></a> is defined as follows: 1.4261 - 1.4262 - <ul> 1.4263 - <li> If the <a href="#specified-size"><i>specified size</i></a> is a 1.4264 - definite width and height, the <a 1.4265 - href="#concrete-object-size"><i>concrete object size</i></a> is given 1.4266 - that width and height. 1.4267 - 1.4268 - <li> If the <a href="#specified-size"><i>specified size</i></a> is only a 1.4269 - width or height (but not both) then the <a 1.4270 - href="#concrete-object-size"><i>concrete object size</i></a> is given 1.4271 - that specified width or height. The other dimension is calculated as 1.4272 - follows: 1.4273 - <ol> 1.4274 - <li> If the object has an <a href="#intrinsic-aspect-ratio"><i>intrinsic 1.4275 - aspect ratio</i></a>, the missing dimension of the <a 1.4276 - href="#concrete-object-size"><i>concrete object size</i></a> is 1.4277 - calculated using the <a href="#intrinsic-aspect-ratio"><i>intrinsic 1.4278 - aspect ratio</i></a> and the present dimension. 1.4279 - 1.4280 - <li> Otherwise, if the missing dimension is present in the object's <a 1.4281 - href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a>, the 1.4282 - missing dimension is taken from the object's <a 1.4283 - href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a>. 1.4284 - 1.4285 - <li> Otherwise, the missing dimension of the <a 1.4286 - href="#concrete-object-size"><i>concrete object size</i></a> is taken 1.4287 - from the <a href="#default-object-size"><i>default object size</i></a>. 1.4288 - </ol> 1.4289 - 1.4290 - <li> If the <a href="#specified-size"><i>specified size</i></a> has no 1.4291 - constraints: 1.4292 - <ol> 1.4293 - <li> If the object has an intrinsic height or width, its size is 1.4294 - resolved as if its <i>intrinsic size</i> were given as the <a 1.4295 - href="#specified-size"><i>specified size</i></a>. 1.4296 - 1.4297 - <li> Otherwise, its size is resolved as a <a 1.4298 - href="#contain-constraint"><i>contain constraint</i></a> against the <a 1.4299 - href="#default-object-size"><i>default object size</i></a>. 1.4300 - </ol> 1.4301 - </ul> 1.4302 - 1.4303 - <h4 id=cover-contain><span class=secno>5.3.2. </span> Cover and Contain 1.4304 - Constraint Sizing</h4> 1.4305 - 1.4306 - <p> Two other common specified sizes are the <a 1.4307 - href="#contain-constraint"><i>contain constraint</i></a> and the <a 1.4308 - href="#cover-constraint"><i>cover constraint</i></a>, both of which are 1.4309 - resolved against a specified <dfn id=constraint-rectangle>constraint 1.4310 - rectangle</dfn> using the object's <a 1.4311 - href="#intrinsic-aspect-ratio"><i>intrinsic aspect ratio</i></a>: 1.4312 - 1.4313 - <ul> 1.4314 - <li> A <dfn id=contain-constraint>contain constraint</dfn> is resolved by 1.4315 - setting the <a href="#concrete-object-size"><i>concrete object 1.4316 - size</i></a> to the largest rectangle that has the object's <a 1.4317 - href="#intrinsic-aspect-ratio"><i>intrinsic aspect ratio</i></a> and 1.4318 - additionally has neither width nor height larger than the constraint 1.4319 - rectangle's width and height, respectively. 1.4320 - 1.4321 - <li> A <dfn id=cover-constraint>cover constraint</dfn> is resolved by 1.4322 - setting the <a href="#concrete-object-size"><i>concrete object 1.4323 - size</i></a> to the smallest rectangle that has the object's <a 1.4324 - href="#intrinsic-aspect-ratio"><i>intrinsic aspect ratio</i></a> and 1.4325 - additionally has neither width nor height smaller than the constraint 1.4326 - rectangle's width and height, respectively. 1.4327 - </ul> 1.4328 - 1.4329 - <p> In both cases, if the object doesn't have an intrinsic aspect ratio, 1.4330 - the <a href="#concrete-object-size"><i>concrete object size</i></a> is the 1.4331 - specified constraint rectangle. 1.4332 - 1.4333 - <h3 id=object-sizing-examples><span class=secno>5.4. </span> Examples of 1.4334 - CSS Object Sizing</h3> 1.4335 - 1.4336 - <div class=example> 1.4337 - <p> The following examples show how the <a 1.4338 - href="http://www.w3.org/TR/CSS21/">CSS 2.1</a> and <a 1.4339 - href="http://www.w3.org/TR/css3-background/">CSS3 Backgrounds & 1.4340 - Borders</a> sizing algorithms correspond to concepts defined in this 1.4341 - specification. 1.4342 - 1.4343 - <dl> 1.4344 - <dt><a 1.4345 - href="http://www.w3.org/TR/css3-background/#the-background-image">‘<code 1.4346 - class=property>background-image</code>’</a> 1.4347 - 1.4348 - <dd> The rules for calculating the <a 1.4349 - href="#concrete-object-size"><i>concrete object size</i></a> of a 1.4350 - background are defined in <a 1.4351 - href="http://www.w3.org/TR/CSS21/colors.html#background-properties">CSS2.1§14.2.1</a> 1.4352 - and <a 1.4353 - href="http://www.w3.org/TR/css3-background/#the-background-size">CSS3BG§3.9</a>. 1.4354 - CSS2.1 uses the <a href="#default-sizing-algorithm"><i>default sizing 1.4355 - algorithm</i></a> with no <a href="#specified-size"><i>specified 1.4356 - size</i></a> and the <i>background positioning area</i> as the <a 1.4357 - href="#default-object-size"><i>default object size</i></a>. <a 1.4358 - href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> In CSS3, 1.4359 - ‘<code class=property>background-size</code>’ property can give a 1.4360 - sizing constraint, invoking either the <a 1.4361 - href="#default-sizing-algorithm"><i>default sizing algorithm</i></a> or 1.4362 - one of the <a href="#contain-constraint"><i 1.4363 - title="contain constraint">contain</i></a> or <a 1.4364 - href="#cover-constraint"><i title="cover constraint">cover</i></a> 1.4365 - constraints. The concrete object size is further adjusted in later steps 1.4366 - if ‘<code class=property>background-repeat</code>’ has a ‘<code 1.4367 - class=css>round</code>’ value. <a href="#CSS3BG" 1.4368 - rel=biblioentry>[CSS3BG]<!--{{CSS3BG}}--></a> 1.4369 - 1.4370 - <dt><a 1.4371 - href="http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-image">‘<code 1.4372 - class=property>list-style-image</code>’</a> 1.4373 - 1.4374 - <dd> The rules for calculating the <a 1.4375 - href="#concrete-object-size"><i>concrete object size</i></a> of a 1.4376 - list-style image are defined in <a 1.4377 - href="http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-image">CSS2.1§12.5.1</a>. 1.4378 - They use the <a href="#default-sizing-algorithm"><i>default sizing 1.4379 - algorithm</i></a> with no <a href="#specified-size"><i>specified 1.4380 - size</i></a> and a <a href="#default-object-size"><i>default object 1.4381 - size</i></a> of 1em square. 1.4382 - 1.4383 - <dt><a 1.4384 - href="http://www.w3.org/TR/css3-background/#border-images">‘<code 1.4385 - class=property>border-image</code>’</a> 1.4386 - 1.4387 - <dd> Border images are sized twice: first the entire image is sized to 1.4388 - determine the slice points, then the slices are sized to decorate the 1.4389 - border. The first sizing operation is defined in <a 1.4390 - href="http://www.w3.org/TR/css3-background/#the-border-image-slice">CSS3BG§6.2</a> 1.4391 - and uses the <a href="#default-sizing-algorithm"><i>default sizing 1.4392 - algorithm</i></a> with no <a href="#specified-size"><i>specified 1.4393 - size</i></a>, and the <a 1.4394 - href="http://www.w3.org/TR/css3-background/#border-image-area">border 1.4395 - image area</a> as the <a href="#default-object-size"><i>default object 1.4396 - size</i></a>. The second operation is defined in <a 1.4397 - href="http://www.w3.org/TR/css3-background/#border-image-process">CSS3BG§6.2</a>: 1.4398 - the <a href="#default-sizing-algorithm"><i>default sizing 1.4399 - algorithm</i></a> is used to determine an initial size for each slice 1.4400 - with the corresponding <i>border image area</i> part as the default 1.4401 - object size. By default the <a href="#specified-size"><i>specified 1.4402 - size</i></a> matches this <a href="#default-object-size"><i>default 1.4403 - object size</i></a>; however the ‘<code 1.4404 - class=property>border-image-repeat</code>’ property can drop the 1.4405 - specified size in one or more directions and may also apply an 1.4406 - additional rounding step. <a href="#CSS3BG" 1.4407 - rel=biblioentry>[CSS3BG]<!--{{CSS3BG}}--></a> 1.4408 - 1.4409 - <dt><a href="http://www.w3.org/TR/CSS21/ui.html#cursor-props">‘<code 1.4410 - class=property>cursor</code>’</a> 1.4411 - 1.4412 - <dd> The rules for calculating the <a 1.4413 - href="#concrete-object-size"><i>concrete object size</i></a> of a cursor 1.4414 - are defined in <a 1.4415 - href="http://www.w3.org/TR/CSS21/ui.html#cursor-props">CSS2.1 § 18.1: 1.4416 - Cursors</a>. The <a href="#default-object-size"><i>default object 1.4417 - size</i></a> is a UA-defined size that should be based on the size of a 1.4418 - typical cursor on the UA's operating system. <a href="#CSS21" 1.4419 - rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 1.4420 - 1.4421 - <dt><a href="http://www.w3.org/TR/CSS21/generate.html#content">‘<code 1.4422 - class=property>content</code>’</a> 1.4423 - 1.4424 - <dd> Objects inserted via the CSS2.1 ‘<code 1.4425 - class=property>content</code>’ property are anonymous <a 1.4426 - href="http://www.w3.org/TR/CSS21/conform.html#replaced-element">replaced 1.4427 - elements</a>, and are sized the same way. <a href="#CSS21" 1.4428 - rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> Note that such anonymous 1.4429 - elements have all their non-inherited properties (including ‘<code 1.4430 - class=property>width</code>’, ‘<code 1.4431 - class=property>height</code>’, etc.) set to their initial values. 1.4432 - 1.4433 - <dt><a 1.4434 - href="http://www.w3.org/TR/CSS21/conform.html#replaced-element">replaced 1.4435 - elements</a> 1.4436 - 1.4437 - <dd> <a href="http://www.w3.org/TR/CSS21/">CSS 2.1</a> defines the sizing 1.4438 - of replaced elements (including those inserted as <a 1.4439 - href="http://www.w3.org/TR/CSS21/generate.html#content">generated 1.4440 - content</a> via ‘<code class=property>content</code>’) in sections 1.4441 - <a 1.4442 - href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">10.3.2</a>, 1.4443 - <a 1.4444 - href="http://www.w3.org/TR/CSS2/visudet.html#min-max-widths">10.4</a>, 1.4445 - <a 1.4446 - href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">10.6.2</a>, 1.4447 - and <a 1.4448 - href="http://www.w3.org/TR/CSS2/visudet.html#min-max-heights">10.7</a>. 1.4449 - <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> The ‘<a 1.4450 - href="#object-fit"><code class=property>object-fit</code></a>’ 1.4451 - property defined below defines how the <a 1.4452 - href="#concrete-object-size"><i>concrete object size</i></a> corresponds 1.4453 - to the element's used width and height; by default they coincide. 1.4454 - </dl> 1.4455 - </div> 1.4456 - <!-- ====================================================================== --> 1.4457 - 1.4458 - <h3 id=the-object-fit><span class=secno>5.5. </span> Sizing Objects: the 1.4459 - ‘<a href="#object-fit"><code class=property>object-fit</code></a>’ 1.4460 - property</h3> 1.4461 - 1.4462 - <table class=propdef> 1.4463 - <tbody> 1.4464 - <tr> 1.4465 - <th>Name: 1.4466 - 1.4467 - <td><dfn id=object-fit>object-fit</dfn> 1.4468 - 1.4469 - <tr> 1.4470 - <th><a href="#values">Value:</a> 1.4471 - 1.4472 - <td>fill | contain | cover | none | scale-down 1.4473 - 1.4474 - <tr> 1.4475 - <th>Initial: 1.4476 - 1.4477 - <td>fill 1.4478 - 1.4479 - <tr> 1.4480 - <th>Applies to: 1.4481 - 1.4482 - <td>replaced elements 1.4483 - 1.4484 - <tr> 1.4485 - <th>Inherited: 1.4486 - 1.4487 - <td>no 1.4488 - 1.4489 - <tr> 1.4490 - <th>Percentages: 1.4491 - 1.4492 - <td>N/A 1.4493 - 1.4494 - <tr> 1.4495 - <th>Media: 1.4496 - 1.4497 - <td>visual 1.4498 - 1.4499 - <tr> 1.4500 - <th>Computed value: 1.4501 - 1.4502 - <td>specified value 1.4503 - 1.4504 - <tr> 1.4505 - <th>Animatable: 1.4506 - 1.4507 - <td>no 1.4508 - </table> 1.4509 - 1.4510 - <p> The ‘<a href="#object-fit"><code 1.4511 - class=property>object-fit</code></a>’ property specifies how the 1.4512 - contents of a replaced element should be fitted to the box established by 1.4513 - its used height and width. 1.4514 - 1.4515 - <dl> 1.4516 - <dt>‘<code class=css>fill</code>’ 1.4517 - 1.4518 - <dd> The replaced content is sized to fill the element's content box: the 1.4519 - object's <a href="#concrete-object-size"><i>concrete object size</i></a> 1.4520 - is the element's used width and height. 1.4521 - 1.4522 - <dt>‘<code class=css>contain</code>’ 1.4523 - 1.4524 - <dd> The replaced content is sized to maintain its aspect ratio while 1.4525 - fitting within the element's content box: its <a 1.4526 - href="#concrete-object-size"><i>concrete object size</i></a> is resolved 1.4527 - as a <a href="#contain-constraint"><i>contain constraint</i></a> against 1.4528 - the element's used width and height. 1.4529 - 1.4530 - <dt>‘<code class=css>cover</code>’ 1.4531 - 1.4532 - <dd> The replaced content is sized to maintain its aspect ratio while 1.4533 - filling the element's entire content box: its <a 1.4534 - href="#concrete-object-size"><i>concrete object size</i></a> is resolved 1.4535 - as a <a href="#cover-constraint"><i>cover constraint</i></a> against the 1.4536 - element's used width and height. 1.4537 - 1.4538 - <dt>‘<code class=css>none</code>’ 1.4539 - 1.4540 - <dd> The replaced content is not resized to fit inside the element's 1.4541 - content box: determine the object's <a 1.4542 - href="#concrete-object-size"><i>concrete object size</i></a> using the <a 1.4543 - href="#default-sizing-algorithm"><i>default sizing algorithm</i></a> with 1.4544 - no specified size, and a <a href="#default-object-size"><i>default object 1.4545 - size</i></a> equal to the replaced element's used width and height. 1.4546 - 1.4547 - <dt>‘<code class=css>scale-down</code>’ 1.4548 - 1.4549 - <dd> 1.4550 - <p> Size the content as if ‘<code class=css>none</code>’ or ‘<code 1.4551 - class=css>contain</code>’ were specified, whichever would result in a 1.4552 - smaller <a href="#concrete-object-size"><i>concrete object size</i></a>. 1.4553 - 1.4554 - <p class=note> Note that both ‘<code class=css>none</code>’ and 1.4555 - ‘<code class=css>contain</code>’ respect the content's intrinsic 1.4556 - aspect ratio, so the concept of "smaller" is well-defined. 1.4557 - </dl> 1.4558 - 1.4559 - <p> If the content does not completely fill the replaced element's content 1.4560 - box, the unfilled space shows the replaced element's background. Since 1.4561 - replaced elements always clip their contents to the content box, the 1.4562 - content will never overflow. See the ‘<a href="#object-position"><code 1.4563 - class=property>object-position</code></a>’ property for positioning the 1.4564 - object with respect to the content box. 1.4565 - 1.4566 - <div class=figure> <img alt="" src="images/img_scale.png" 1.4567 - style="border: thin solid black;"> 1.4568 - <p class=caption> An example showing how four of the values of ‘<a 1.4569 - href="#object-fit"><code class=property>object-fit</code></a>’ cause 1.4570 - the replaced element (blue figure) to be scaled to fit its height/width 1.4571 - box (shown with a green background), using the initial value for ‘<a 1.4572 - href="#object-position"><code 1.4573 - class=property>object-position</code></a>’. The fifth value, ‘<code 1.4574 - class=css>scale-down</code>’, in this case looks identical to ‘<code 1.4575 - class=css>contain</code>’. 1.4576 - </div> 1.4577 - 1.4578 - <p class=note> Note: the ‘<a href="#object-fit"><code 1.4579 - class=property>object-fit</code></a>’ property has similar semantics to 1.4580 - the <code>fit</code> attribute in <a href="#SMIL10" 1.4581 - rel=biblioentry>[SMIL10]<!--{{SMIL10}}--></a> and the 1.4582 - <var><meetOrSlice></var> parameter on the <a 1.4583 - href="http://www.w3.org/TR/SVG11/coords.html#PreserveAspectRatioAttribute"><code>preserveAspectRatio</code> 1.4584 - attribute</a> in <a href="#SVG11" 1.4585 - rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>. 1.4586 - 1.4587 - <p class=note> Note: Per the <i title=object-negotiation>CSS⇋Object 1.4588 - Negotiation</i> algorithm, the <a href="#concrete-object-size"><i>concrete 1.4589 - object size</i></a> (or, in this case, the size of the content) does not 1.4590 - directly scale the object itself - it is merely passed to the object as 1.4591 - information about the size of the visible canvas. How to then draw into 1.4592 - that size is up to the image format. In particular, raster images always 1.4593 - scale to the given size, while SVG uses the given size as the size of the 1.4594 - "SVG Viewport" (a term defined by SVG) and then uses the values of several 1.4595 - attributes on the root <code><svg></code> element to determine how to 1.4596 - draw itself. 1.4597 - <!-- ====================================================================== --> 1.4598 - 1.4599 - <h3 id=the-object-position><span class=secno>5.6. </span> Positioning 1.4600 - Objects: the ‘<a href="#object-position"><code 1.4601 - class=property>object-position</code></a>’ property</h3> 1.4602 - 1.4603 - <table class=propdef> 1.4604 - <thead> 1.4605 - <tr> 1.4606 - <th>Name: 1.4607 - 1.4608 - <td><dfn id=object-position>object-position</dfn> 1.4609 - 1.4610 - <tbody> 1.4611 - <tr> 1.4612 - <th><a href="#values">Value:</a> 1.4613 - 1.4614 - <td><position> 1.4615 - 1.4616 - <tr> 1.4617 - <th>Initial: 1.4618 - 1.4619 - <td>50% 50% 1.4620 - 1.4621 - <tr> 1.4622 - <th>Applies to: 1.4623 - 1.4624 - <td>replaced elements 1.4625 - 1.4626 - <tr> 1.4627 - <th>Inherited: 1.4628 - 1.4629 - <td>no 1.4630 - 1.4631 - <tr> 1.4632 - <th>Percentages: 1.4633 - 1.4634 - <td>refer to width and height of box itself 1.4635 - 1.4636 - <tr> 1.4637 - <th>Media: 1.4638 - 1.4639 - <td>visual 1.4640 - 1.4641 - <tr> 1.4642 - <th>Computed value: 1.4643 - 1.4644 - <td>specified value 1.4645 - 1.4646 - <tr> 1.4647 - <th>Animatable: 1.4648 - 1.4649 - <td>yes 1.4650 - 1.4651 - <tr> 1.4652 - <th>Canonical Order: 1.4653 - 1.4654 - <td>the horizontal component of the <a 1.4655 - href="#position"><var><position></var></a>, followed by the vertical 1.4656 - component 1.4657 - </table> 1.4658 - 1.4659 - <p> The ‘<a href="#object-position"><code 1.4660 - class=property>object-position</code></a>’ property determines the 1.4661 - alignment of the replaced element inside its box. The <a 1.4662 - href="http://www.w3.org/TR/css3-values/#position"><position></a> value 1.4663 - type (which is also used for ‘<code 1.4664 - class=property>background-position</code>’) is defined in <a 1.4665 - href="#CSS3VAL" rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>, and is 1.4666 - resolved using the <a href="#concrete-object-size"><i>concrete object 1.4667 - size</i></a> as the object area and the content box as the positioning 1.4668 - area. 1.4669 - 1.4670 - <p class=note> Note that areas of the box not covered by the replaced 1.4671 - element will show the element's background. <!-- 1.4672 + 1.4673 +<h2 data-level=5 id=sizing><span class=secno>5 </span><span class=content> 1.4674 +Sizing Images and Objects in CSS</span><a class=section-link href=#sizing>§</a></h2> 1.4675 + 1.4676 +<p> Images used in CSS may come from a number of sources: 1.4677 + from binary image formats (such as gif, jpeg, etc), 1.4678 + dedicated markup formats (such as SVG), 1.4679 + and CSS-specific formats (such as the linear-gradient() value type defined in this specification). 1.4680 + As well, a document may contain many other types of objects, 1.4681 + such as video, plugins, or nested documents. 1.4682 + These images and objects 1.4683 + (just <dfn data-dfn-type=dfn id=objects>objects</dfn> hereafter) 1.4684 + may offer many types of sizing information to CSS, 1.4685 + or none at all. 1.4686 + This section defines generically the size negotiation model between the object and the CSS layout algorithms. 1.4687 + 1.4688 +<!-- ====================================================================== --> 1.4689 + 1.4690 +<h3 data-level=5.1 id=sizing-terms><span class=secno>5.1 </span><span class=content> 1.4691 +Object-Sizing Terminology</span><a class=section-link href=#sizing-terms>§</a></h3> 1.4692 + 1.4693 +<p> In order to define this handling, 1.4694 + we define a few terms, 1.4695 + to make it easier to refer to various concepts: 1.4696 + 1.4697 + <dl> 1.4698 + <dt><dfn data-dfn-type=dfn id=intrinsic-dimensions>intrinsic dimensions</dfn> 1.4699 + <dd> 1.4700 + The term intrinsic dimensions refers to the set of 1.4701 + the <dfn data-dfn-type=dfn id=intrinsic-height>intrinsic height</dfn>, 1.4702 + <dfn data-dfn-type=dfn id=intrinsic-width>intrinsic width</dfn>, 1.4703 + and <dfn data-dfn-type=dfn id=intrinsic-aspect-ratio>intrinsic aspect ratio</dfn> 1.4704 + (the ratio between the width and height), 1.4705 + each of which may or may not exist for a given object. 1.4706 + These intrinsic dimensions represent a preferred or natural size of the object itself; 1.4707 + that is, they are not a function of the context in which the object is used. 1.4708 + CSS does not define how the intrinsic dimensions are found in general. 1.4709 + 1.4710 +<p> Raster images are an example of an object with all three intrinsic dimensions. 1.4711 + SVG images designed to scale might have only an intrinsic aspect ratio; 1.4712 + SVG images can also be created with only an intrinsic width or height. 1.4713 + CSS gradients, defined in this specification, are an example of an object with no intrinsic dimensions at all. 1.4714 + Another example of this is embedded documents, 1.4715 + such as the <code><iframe></code> element in HTML. 1.4716 + An object cannot have only two intrinsic dimensions, 1.4717 + as any two automatically define the third. 1.4718 + 1.4719 +<p> If an object (such as an icon) has multiple sizes, 1.4720 + then the largest size (by area) is taken as its intrinsic size. 1.4721 + If it has multiple aspect ratios at that size, 1.4722 + or has multiple aspect ratios and no size, 1.4723 + then the aspect ratio closest to the aspect ratio of the <a href=#default-object-size>default object size</a> is used. 1.4724 + Determine this by seeing which aspect ratio produces the largest area 1.4725 + when fitting it within the <a href=#default-object-size>default object size</a> using a <a href=#contain>contain</a> fit; 1.4726 + if multiple sizes tie for the largest area, 1.4727 + the wider size is chosen as its intrinsic size. 1.4728 + 1.4729 + 1.4730 + <dt><dfn data-dfn-type=dfn id=specified-size>specified size</dfn> 1.4731 + <dd> 1.4732 + The specified size of an object is given by CSS, 1.4733 + such as through the <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visudet.html#propdef-width title=width>width</a> and <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visudet.html#propdef-height title=height>height</a> or <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-4/#background-size title=background-size>background-size</a> properties. 1.4734 + The specified size can be a definite width and height, 1.4735 + a set of constraints, 1.4736 + or a combination thereof. 1.4737 + 1.4738 + <dt><dfn data-dfn-type=dfn id=concrete-object-size>concrete object size</dfn> 1.4739 + <dd> 1.4740 + The <a href=#concrete-object-size>concrete object size</a> is the result of combining 1.4741 + an object's <a href=#intrinsic-dimensions>intrinsic dimensions</a> and <a href=#specified-size>specified size</a> 1.4742 + with the <a href=#default-object-size>default object size</a> of the context it's used in, 1.4743 + producing a rectangle with a definite width and height. 1.4744 + 1.4745 + <dt><dfn data-dfn-type=dfn id=default-object-size>default object size</dfn> 1.4746 + <dd> 1.4747 + The <a href=#default-object-size>default object size</a> is a rectangle with a definite height and width 1.4748 + used to determine the <a href=#concrete-object-size>concrete object size</a> 1.4749 + when both the <a href=#intrinsic-dimensions>intrinsic dimensions</a> and <a href=#specified-size>specified size</a> are missing dimensions. 1.4750 + 1.4751 + </dl> 1.4752 + 1.4753 + 1.4754 +<h3 data-level=5.2 id=object-negotiation><span class=secno>5.2 </span><span class=content> 1.4755 +CSS⇋Object Negotiation</span><a class=section-link href=#object-negotiation>§</a></h3> 1.4756 + 1.4757 +<p> Objects in CSS are sized and rendered as follows: 1.4758 + 1.4759 + <ol> 1.4760 + <li> 1.4761 + When an image or object is specified in a document, 1.4762 + such as through a <span class=css data-link-type=maybe>url()</span> value in a <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/colors.html#propdef-background-image title=background-image>background-image</a> property 1.4763 + or a <code>src</code> attribute on an <code><img></code> element, 1.4764 + CSS queries the object for its <a href=#intrinsic-dimensions>intrinsic dimensions</a>. 1.4765 + 1.4766 + <li> 1.4767 + Using the <a href=#intrinsic-dimensions>intrinsic dimensions</a>, 1.4768 + the <a href=#specified-size>specified size</a>, 1.4769 + and the <a href=#default-object-size>default object size</a> for the context the image or object is used in, 1.4770 + CSS then computes a <a href=#concrete-object-size>concrete object size</a>. 1.4771 + (See the <a href=#default-sizing>following section</a>.) 1.4772 + This defines the size and position of the region the object will render in. 1.4773 + 1.4774 + <li> 1.4775 + CSS asks the object to render itself at the <a href=#concrete-object-size>concrete object size</a>. 1.4776 + CSS does not define how objects render when the <a href=#concrete-object-size>concrete object size</a> is different from the object's <a href=#intrinsic-dimensions>intrinsic dimensions</a>. 1.4777 + The object may adjust itself to match the <a href=#concrete-object-size>concrete object size</a> in some way, 1.4778 + or even render itself larger or smaller than the <a href=#concrete-object-size>concrete object size</a> to satisfy sizing constraints of its own. 1.4779 + 1.4780 + <li> 1.4781 + Unless otherwise specified by CSS, 1.4782 + the object is then clipped to the <a href=#concrete-object-size>concrete object size</a>. 1.4783 + </ol> 1.4784 + 1.4785 +<!-- ====================================================================== --> 1.4786 + 1.4787 +<h3 data-level=5.3 id=concrete-size-resolution><span class=secno>5.3 </span><span class=content> 1.4788 +Concrete Object Size Resolution</span><a class=section-link href=#concrete-size-resolution>§</a></h3> 1.4789 + 1.4790 +<p> Currently the rules for sizing objects are described in each context that such objects are used. 1.4791 + This section defines some common sizing constraints 1.4792 + and how to resolve them 1.4793 + so that future specs can refer to them instead of redefining size resolution in each instance. 1.4794 + 1.4795 +<h4 data-level=5.3.1 id=default-sizing><span class=secno>5.3.1 </span><span class=content> 1.4796 +Default Sizing Algorithm</span><a class=section-link href=#default-sizing>§</a></h4> 1.4797 + 1.4798 +<p> The <dfn data-dfn-type=dfn id=default-sizing-algorithm>default sizing algorithm</dfn> is a set of rules commonly used to find an object's <a href=#concrete-object-size>concrete object size</a>. 1.4799 + It resolves the simultaneous constraints presented by the object's <a href=#intrinsic-dimensions>intrinsic dimensions</a> 1.4800 + and either an unconstrained <a href=#specified-size>specified size</a> 1.4801 + or one consisting of only a definite width and/or height. 1.4802 + 1.4803 +<p> Some object sizing rules 1.4804 + (such as those for <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-lists-3/#list-style-image title=list-style-image>list-style-image</a>) 1.4805 + correspond exactly to the <a href=#default-sizing-algorithm>default sizing algorithm</a>. 1.4806 + Others 1.4807 + (such as those for <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-4/#border-image title=border-image>border-image</a>) 1.4808 + invoke the default sizing algorithm 1.4809 + but also apply additional sizing rules before arriving at a final <a href=#concrete-object-size>concrete object size</a>. 1.4810 + 1.4811 +<p> The <a href=#default-sizing-algorithm>default sizing algorithm</a> is defined as follows: 1.4812 + 1.4813 +<p> <ul> 1.4814 + <li> 1.4815 + If the <a href=#specified-size>specified size</a> is a definite width and height, 1.4816 + the <a href=#concrete-object-size>concrete object size</a> is given that width and height. 1.4817 + 1.4818 + <li> 1.4819 + If the <a href=#specified-size>specified size</a> is only a width or height (but not both) 1.4820 + then the <a href=#concrete-object-size>concrete object size</a> is given that specified width or height. 1.4821 + The other dimension is calculated as follows: 1.4822 + 1.4823 + <ol> 1.4824 + <li> 1.4825 + If the object has an <a href=#intrinsic-aspect-ratio>intrinsic aspect ratio</a>, 1.4826 + the missing dimension of the <a href=#concrete-object-size>concrete object size</a> 1.4827 + is calculated using the <a href=#intrinsic-aspect-ratio>intrinsic aspect ratio</a> and the present dimension. 1.4828 + 1.4829 + <li> 1.4830 + Otherwise, if the missing dimension is present in the object's <a href=#intrinsic-dimensions>intrinsic dimensions</a>, 1.4831 + the missing dimension is taken from the object's <a href=#intrinsic-dimensions>intrinsic dimensions</a>. 1.4832 + 1.4833 + <li> 1.4834 + Otherwise, the missing dimension of the <a href=#concrete-object-size>concrete object size</a> is taken from the <a href=#default-object-size>default object size</a>. 1.4835 + </ol> 1.4836 + 1.4837 + 1.4838 + <li> 1.4839 + If the <a href=#specified-size>specified size</a> has no constraints: 1.4840 + 1.4841 + <ol> 1.4842 + <li> 1.4843 + If the object has an intrinsic height or width, 1.4844 + its size is resolved as if its <a>intrinsic size</a> were given as the <a href=#specified-size>specified size</a>. 1.4845 + 1.4846 + <li> 1.4847 + Otherwise, its size is resolved as a <a href=#contain-constraint>contain constraint</a> against the <a href=#default-object-size>default object size</a>. 1.4848 + </ol> 1.4849 + 1.4850 + </ul> 1.4851 + 1.4852 +<h4 data-level=5.3.2 id=cover-contain><span class=secno>5.3.2 </span><span class=content> 1.4853 +Cover and Contain Constraint Sizing</span><a class=section-link href=#cover-contain>§</a></h4> 1.4854 + 1.4855 +<p> Two other common specified sizes are the <a href=#contain-constraint>contain constraint</a> and the <a href=#cover-constraint>cover constraint</a>, 1.4856 + both of which are resolved against a specified <dfn data-dfn-type=dfn id=constraint-rectangle>constraint rectangle</dfn> 1.4857 + using the object's <a href=#intrinsic-aspect-ratio>intrinsic aspect ratio</a>: 1.4858 + 1.4859 +<p> <ul> 1.4860 + <li> 1.4861 + A <dfn data-dfn-type=dfn id=contain-constraint>contain constraint</dfn> is resolved 1.4862 + by setting the <a href=#concrete-object-size>concrete object size</a> to the largest rectangle that has the object's <a href=#intrinsic-aspect-ratio>intrinsic aspect ratio</a> 1.4863 + and additionally has neither width nor height larger than the constraint rectangle's width and height, respectively. 1.4864 + 1.4865 + <li> 1.4866 + A <dfn data-dfn-type=dfn id=cover-constraint>cover constraint</dfn> is resolved 1.4867 + by setting the <a href=#concrete-object-size>concrete object size</a> to the smallest rectangle that has the object's <a href=#intrinsic-aspect-ratio>intrinsic aspect ratio</a> 1.4868 + and additionally has neither width nor height smaller than the constraint rectangle's width and height, respectively. 1.4869 + </ul> 1.4870 + 1.4871 +<p> In both cases, 1.4872 + if the object doesn't have an intrinsic aspect ratio, 1.4873 + the <a href=#concrete-object-size>concrete object size</a> is the specified constraint rectangle. 1.4874 + 1.4875 +<h3 data-level=5.4 id=object-sizing-examples><span class=secno>5.4 </span><span class=content> 1.4876 +Examples of CSS Object Sizing</span><a class=section-link href=#object-sizing-examples>§</a></h3> 1.4877 + 1.4878 + <div class=example> 1.4879 + The following examples show how the <a href=http://www.w3.org/TR/CSS21/>CSS 2.1</a> 1.4880 + and <a href=http://www.w3.org/TR/css3-background/>CSS3 Backgrounds & Borders</a> sizing algorithms 1.4881 + correspond to concepts defined in this specification. 1.4882 + 1.4883 + <dl> 1.4884 + <dt><a href=http://www.w3.org/TR/css3-background/#the-background-image><a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/colors.html#propdef-background-image title=background-image>background-image</a></a> 1.4885 + <dd> 1.4886 + The rules for calculating the <a href=#concrete-object-size>concrete object size</a> of a background 1.4887 + are defined in <a href=http://www.w3.org/TR/CSS21/colors.html#background-properties>CSS2.1§14.2.1</a> 1.4888 + and <a href=http://www.w3.org/TR/css3-background/#the-background-size>CSS3BG§3.9</a>. 1.4889 + CSS2.1 uses the <a href=#default-sizing-algorithm>default sizing algorithm</a> 1.4890 + with no <a href=#specified-size>specified size</a> 1.4891 + and the <a>background positioning area</a> as the <a href=#default-object-size>default object size</a>. <a data-biblio-type=normative data-link-type=biblio href=#css21 title=CSS21>[CSS21]</a> 1.4892 + In CSS3, <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-4/#background-size title=background-size>background-size</a> property can give a sizing constraint, 1.4893 + invoking either the <a href=#default-sizing-algorithm>default sizing algorithm</a> 1.4894 + or one of the <a href=#contain-constraint title="contain constraint">contain or <a href=#cover-constraint title="cover constraint">cover constraints. 1.4895 + The concrete object size is further adjusted in later steps if <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/colors.html#propdef-background-repeat title=background-repeat>background-repeat</a> has a <span class=css data-link-type=maybe>round</span> value. <a data-biblio-type=informative data-link-type=biblio href=#css3bg title=CSS3BG>[CSS3BG]</a> 1.4896 + 1.4897 + </a></a><dt><a href=#contain-constraint title="contain constraint"><a href=#cover-constraint title="cover constraint"><a href=http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-image><a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-lists-3/#list-style-image title=list-style-image>list-style-image</a></a> 1.4898 + </a></a><dd><a href=#contain-constraint title="contain constraint"><a href=#cover-constraint title="cover constraint"> 1.4899 + The rules for calculating the <a href=#concrete-object-size>concrete object size</a> of a list-style image 1.4900 + are defined in <a href=http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-image>CSS2.1§12.5.1</a>. 1.4901 + They use the <a href=#default-sizing-algorithm>default sizing algorithm</a> 1.4902 + with no <a href=#specified-size>specified size</a> 1.4903 + and a <a href=#default-object-size>default object size</a> of 1em square. 1.4904 + 1.4905 + </a></a><dt><a href=#contain-constraint title="contain constraint"><a href=#cover-constraint title="cover constraint"><a href=http://www.w3.org/TR/css3-background/#border-images><a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-4/#border-image title=border-image>border-image</a></a> 1.4906 + </a></a><dd><a href=#contain-constraint title="contain constraint"><a href=#cover-constraint title="cover constraint"> 1.4907 + Border images are sized twice: 1.4908 + first the entire image is sized to determine the slice points, 1.4909 + then the slices are sized to decorate the border. 1.4910 + The first sizing operation is defined in <a href=http://www.w3.org/TR/css3-background/#the-border-image-slice>CSS3BG§6.2</a> 1.4911 + and uses the <a href=#default-sizing-algorithm>default sizing algorithm</a> 1.4912 + with no <a href=#specified-size>specified size</a>, 1.4913 + and the <a href=http://www.w3.org/TR/css3-background/#border-image-area>border image area</a> as the <a href=#default-object-size>default object size</a>. 1.4914 + The second operation is defined in <a href=http://www.w3.org/TR/css3-background/#border-image-process>CSS3BG§6.2</a>: 1.4915 + the <a href=#default-sizing-algorithm>default sizing algorithm</a> is used to determine an initial size for each slice 1.4916 + with the corresponding <a>border image area</a> part as the default object size. 1.4917 + By default the <a href=#specified-size>specified size</a> matches this <a href=#default-object-size>default object size</a>; 1.4918 + however the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-4/#border-image-repeat title=border-image-repeat>border-image-repeat</a> property can drop the specified size in one or more directions 1.4919 + and may also apply an additional rounding step. <a data-biblio-type=informative data-link-type=biblio href=#css3bg title=CSS3BG>[CSS3BG]</a> 1.4920 + 1.4921 + 1.4922 + </a></a><dt><a href=#contain-constraint title="contain constraint"><a href=#cover-constraint title="cover constraint"><a href=http://www.w3.org/TR/CSS21/ui.html#cursor-props><a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-ui-3/#cursor0 title=cursor>cursor</a></a> 1.4923 + </a></a><dd><a href=#contain-constraint title="contain constraint"><a href=#cover-constraint title="cover constraint"> 1.4924 + The rules for calculating the <a href=#concrete-object-size>concrete object size</a> of a cursor 1.4925 + are defined in <a href=http://www.w3.org/TR/CSS21/ui.html#cursor-props>CSS2.1 § 18.1: Cursors</a>. 1.4926 + The <a href=#default-object-size>default object size</a> is a UA-defined size 1.4927 + that should be based on the size of a typical cursor on the UA's operating system. <a data-biblio-type=normative data-link-type=biblio href=#css21 title=CSS21>[CSS21]</a> 1.4928 + 1.4929 + </a></a><dt><a href=#contain-constraint title="contain constraint"><a href=#cover-constraint title="cover constraint"><a href=http://www.w3.org/TR/CSS21/generate.html#content><a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-ui-3/#content title=content>content</a></a> 1.4930 + </a></a><dd><a href=#contain-constraint title="contain constraint"><a href=#cover-constraint title="cover constraint"> 1.4931 + Objects inserted via the CSS2.1 <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-ui-3/#content title=content>content</a> property 1.4932 + are anonymous <a href=http://www.w3.org/TR/CSS21/conform.html#replaced-element>replaced elements</a>, 1.4933 + and are sized the same way. <a data-biblio-type=normative data-link-type=biblio href=#css21 title=CSS21>[CSS21]</a> 1.4934 + Note that such anonymous elements have all their non-inherited properties (including <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visudet.html#propdef-width title=width>width</a>, <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visudet.html#propdef-height title=height>height</a>, etc.) 1.4935 + set to their initial values. 1.4936 + 1.4937 + </a></a><dt><a href=#contain-constraint title="contain constraint"><a href=#cover-constraint title="cover constraint"><a href=http://www.w3.org/TR/CSS21/conform.html#replaced-element>replaced elements</a> 1.4938 + </a></a><dd><a href=#contain-constraint title="contain constraint"><a href=#cover-constraint title="cover constraint"> 1.4939 + <a href=http://www.w3.org/TR/CSS21/>CSS 2.1</a> defines the sizing of replaced elements 1.4940 + (including those inserted as <a href=http://www.w3.org/TR/CSS21/generate.html#content>generated content</a> via <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-ui-3/#content title=content>content</a>) 1.4941 + in sections <a href=http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width>10.3.2</a>, 1.4942 + <a href=http://www.w3.org/TR/CSS2/visudet.html#min-max-widths>10.4</a>, 1.4943 + <a href=http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height>10.6.2</a>, 1.4944 + and <a href=http://www.w3.org/TR/CSS2/visudet.html#min-max-heights>10.7</a>. <a data-biblio-type=normative data-link-type=biblio href=#css21 title=CSS21>[CSS21]</a> 1.4945 + The <a class=property data-link-type=propdesc href=#propdef-object-fit title=object-fit>object-fit</a> property defined below defines how the <a href=#concrete-object-size>concrete object size</a> corresponds to the element's used width and height; 1.4946 + by default they coincide. 1.4947 + </a></a></dl><a href=#contain-constraint title="contain constraint"><a href=#cover-constraint title="cover constraint"> 1.4948 + </a></a></div><a href=#contain-constraint title="contain constraint"><a href=#cover-constraint title="cover constraint"> 1.4949 + 1.4950 + 1.4951 +<h3 data-level=5.5 id=the-object-fit><span class=secno>5.5 </span><span class=content> 1.4952 +Sizing Objects: the <a class=property data-link-type=propdesc href=#propdef-object-fit title=object-fit>object-fit</a> property</span><a class=section-link href=#the-object-fit>§</a></h3> 1.4953 + 1.4954 +<table class=propdef><tr><th>Name:<td><dfn data-dfn-type=property id=propdef-object-fit>object-fit</dfn><tr><th>Value:<td>fill | contain | cover | none | scale-down<tr><th>Initial:<td>fill<tr><th>Applies to:<td>replaced elements<tr><th>Inherited:<td>no<tr><th>Percentages:<td>n/a<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified value<tr><th>Animatable:<td>no</table> 1.4955 +<p> The <a class=property data-link-type=propdesc href=#propdef-object-fit title=object-fit>object-fit</a> property specifies how the contents of a replaced element 1.4956 + should be fitted to the box established by its used height and width. 1.4957 + 1.4958 + <dl data-dfn-for=object-fit data-dfn-type=value> 1.4959 + <dt><dfn data-dfn-type=dfn id=fill>fill</dfn> 1.4960 + <dd> 1.4961 + The replaced content is sized to fill the element's content box: 1.4962 + the object's <a href=#concrete-object-size>concrete object size</a> is the element's used width and height. 1.4963 + 1.4964 + <dt><dfn data-dfn-type=dfn id=contain>contain</dfn> 1.4965 + <dd> 1.4966 + The replaced content is sized to maintain its aspect ratio 1.4967 + while fitting within the element's content box: 1.4968 + its <a href=#concrete-object-size>concrete object size</a> is resolved as a <a href=#contain-constraint>contain constraint</a> 1.4969 + against the element's used width and height. 1.4970 + 1.4971 + <dt><dfn data-dfn-type=dfn id=cover>cover</dfn> 1.4972 + <dd> 1.4973 + The replaced content is sized to maintain its aspect ratio 1.4974 + while filling the element's entire content box: 1.4975 + its <a href=#concrete-object-size>concrete object size</a> is resolved as a <a href=#cover-constraint>cover constraint</a> 1.4976 + against the element's used width and height. 1.4977 + 1.4978 + <dt><dfn data-dfn-type=dfn id=none>none</dfn> 1.4979 + <dd> 1.4980 + The replaced content is not resized to fit inside the element's content box: 1.4981 + determine the object's <a href=#concrete-object-size>concrete object size</a> 1.4982 + using the <a href=#default-sizing-algorithm>default sizing algorithm</a> with no specified size, 1.4983 + and a <a href=#default-object-size>default object size</a> equal to the replaced element's used width and height. 1.4984 + 1.4985 + <dt><dfn data-dfn-type=dfn id=scale-down>scale-down</dfn> 1.4986 + <dd> 1.4987 + Size the content as if <a class=css data-link-type=maybe href=#none>none</a> or <a class=css data-link-type=maybe href=#contain>contain</a> were specified, 1.4988 + whichever would result in a smaller <a href=#concrete-object-size>concrete object size</a>. 1.4989 + 1.4990 +<p class=note> Note: Both <a class=css data-link-type=maybe href=#none>none</a> and <a class=css data-link-type=maybe href=#contain>contain</a> respect the content's intrinsic aspect ratio, 1.4991 + so the concept of "smaller" is well-defined. 1.4992 + </dl> 1.4993 + 1.4994 +<p> If the content does not completely fill the replaced element's content box, 1.4995 + the unfilled space shows the replaced element's background. 1.4996 + Since replaced elements always clip their contents to the content box, 1.4997 + the content will never overflow. 1.4998 + See the <a class=property data-link-type=propdesc href=#propdef-object-position title=object-position>object-position</a> property for positioning the object with respect to the content box. 1.4999 + 1.5000 + </p><figure> 1.5001 + <img alt="" src=images/img_scale.png style="border: thin solid black;"> 1.5002 + 1.5003 + <figcaption> 1.5004 + An example showing how four of the values of <a class=property data-link-type=propdesc href=#propdef-object-fit title=object-fit>object-fit</a> cause the replaced element (blue figure) 1.5005 + to be scaled to fit its height/width box (shown with a green background), 1.5006 + using the initial value for <a class=property data-link-type=propdesc href=#propdef-object-position title=object-position>object-position</a>. 1.5007 + The fifth value, <a class=css data-link-type=maybe href=#scale-down>scale-down</a>, 1.5008 + in this case looks identical to <a class=css data-link-type=maybe href=#contain>contain</a>. 1.5009 + </figcaption> 1.5010 + </figure> 1.5011 + 1.5012 +<p class=note> Note: The <a class=property data-link-type=propdesc href=#propdef-object-fit title=object-fit>object-fit</a> property has similar semantics to 1.5013 + the <code>fit</code> attribute in <a data-biblio-type=informative data-link-type=biblio href=#smil10 title=SMIL10>[SMIL10]</a> 1.5014 + and the <a class=production data-link-type=type><var><meetOrSlice></var></a> parameter 1.5015 + on the <a href=http://www.w3.org/TR/SVG11/coords.html#PreserveAspectRatioAttribute><code>preserveAspectRatio</code> attribute</a> in <a data-biblio-type=informative data-link-type=biblio href=#svg11 title=SVG11>[SVG11]</a>. 1.5016 + 1.5017 +<p class=note> Note: Per the <i title=object-negotiation>CSS⇋Object Negotiation algorithm, 1.5018 + the <a href=#concrete-object-size>concrete object size</a> 1.5019 + (or, in this case, the size of the content) 1.5020 + does not directly scale the object itself - 1.5021 + it is merely passed to the object as information about the size of the visible canvas. 1.5022 + How to then draw into that size is up to the image format. 1.5023 + In particular, raster images always scale to the given size, 1.5024 + while SVG uses the given size as the size of the "SVG Viewport" 1.5025 + (a term defined by SVG) 1.5026 + and then uses the values of several attributes on the root <code><svg></code> element to determine how to draw itself. 1.5027 + 1.5028 + 1.5029 +</i><h3 data-level=5.6 id=the-object-position><span class=secno>5.6 </span><span class=content><i title=object-negotiation> 1.5030 +Positioning Objects: the <a class=property data-link-type=propdesc href=#propdef-object-position title=object-position>object-position</a> property</i></span><a class=section-link href=#the-object-position>§</a></h3><i title=object-negotiation> 1.5031 + 1.5032 +<table class=propdef><tr><th>Name:<td><dfn data-dfn-type=property id=propdef-object-position>object-position</dfn><tr><th>Value:<td><a class=production data-link-type=type href=#typedef-position><var><position></var></a><tr><th>Initial:<td>50% 50%<tr><th>Applies to:<td>replaced elements<tr><th>Inherited:<td>no<tr><th>Percentages:<td>refer to width and height of element itself<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified value<tr><th>Animatable:<td>yes<tr><th>Canonical Order:<td>the horizontal component of the <a class=production data-link-type=type href=#typedef-position><var><position></var></a>, followed by the vertical component</table> 1.5033 +<p> The <a class=property data-link-type=propdesc href=#propdef-object-position title=object-position>object-position</a> property determines the alignment of the replaced element inside its box. 1.5034 + The <a href=http://www.w3.org/TR/css3-values/#position><position></a> value type 1.5035 + (which is also used for <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/colors.html#propdef-background-position title=background-position>background-position</a>) 1.5036 + is defined in <a data-biblio-type=normative data-link-type=biblio href=#css3val title=CSS3VAL>[CSS3VAL]</a>, 1.5037 + and is resolved using the <a href=#concrete-object-size>concrete object size</a> as the object area 1.5038 + and the content box as the positioning area. 1.5039 + 1.5040 +<p class=note> Note: Areas of the box not covered by the replaced element will show the element's background. 1.5041 + 1.5042 + 1.5043 +<!-- 1.5044 IIIIIIIIII 1.5045 I::::::::I 1.5046 I::::::::I 1.5047 @@ -3154,7 +2357,7 @@ 1.5048 gggggg 1.5049 1.5050 1.5051 -PPPPPPPPPPPPPPPPP iiii 1.5052 +<p>PPPPPPPPPPPPPPPPP iiii 1.5053 P::::::::::::::::P i::::i 1.5054 P::::::PPPPPP:::::P iiii 1.5055 PP:::::P P:::::P 1.5056 @@ -3178,420 +2381,270 @@ 1.5057 ggg::::::ggg 1.5058 gggggg 1.5059 1.5060 ---> 1.5061 - 1.5062 - <h2 id=image-processing><span class=secno>6. </span> Image Processing</h2> 1.5063 - 1.5064 - <h3 id=the-image-resolution><span class=secno>6.1. </span> Overriding Image 1.5065 - Resolutions: the ‘<a href="#image-resolution"><code 1.5066 - class=property>image-resolution</code></a>’ property</h3> 1.5067 - 1.5068 - <p> The <i>image resolution</i> is defined as the number of image pixels 1.5069 - per unit length, e.g., pixels per inch. Some image formats can record 1.5070 - information about the resolution of images. This information can be 1.5071 - helpful when determining the actual size of the image in the formatting 1.5072 - process. However, the information can also be wrong, in which case it 1.5073 - should be ignored. By default, CSS assumes a resolution of one image pixel 1.5074 - per CSS ‘<code class=css>px</code>’ unit; however, the ‘<a 1.5075 - href="#image-resolution"><code 1.5076 - class=property>image-resolution</code></a>’ property allows using some 1.5077 - other resolution. 1.5078 - 1.5079 - <table class=propdef> 1.5080 - <tbody> 1.5081 - <tr> 1.5082 - <th>Name: 1.5083 - 1.5084 - <td><dfn id=image-resolution>image-resolution</dfn> 1.5085 - 1.5086 - <tr> 1.5087 - <th><a href="#values">Value:</a> 1.5088 - 1.5089 - <td>[from-image || <var><resolution></var>] && snap? 1.5090 - 1.5091 - <tr> 1.5092 - <th>Initial: 1.5093 - 1.5094 - <td>1dppx 1.5095 - 1.5096 - <tr> 1.5097 - <th>Applies to: 1.5098 - 1.5099 - <td>all elements 1.5100 - 1.5101 - <tr> 1.5102 - <th>Inherited: 1.5103 - 1.5104 - <td>yes 1.5105 - 1.5106 - <tr> 1.5107 - <th>Media: 1.5108 - 1.5109 - <td>visual 1.5110 - 1.5111 - <tr> 1.5112 - <th>Computed value: 1.5113 - 1.5114 - <td>as specified, except with ‘<code 1.5115 - class=css><resolution></code>’ possibly altered by computing for 1.5116 - ‘<code class=css>snap</code>’ (see below) 1.5117 - 1.5118 - <tr> 1.5119 - <th>Animatable: 1.5120 - 1.5121 - <td>no 1.5122 - 1.5123 - <tr> 1.5124 - <th>Canonical Order: 1.5125 - 1.5126 - <td><abbr title="follows order of property value definition">per 1.5127 - grammar</abbr> 1.5128 - </table> 1.5129 - 1.5130 - <p class=issue> The ‘<code class=css>image-set()</code>’ notation can 1.5131 - alter the intrinsic resolution of an image, which ideally would be 1.5132 - automatically honored without having to set this property. How should we 1.5133 - best address this? Change the initial value to ‘<a 1.5134 - href="#image-rendering-auto"><code class=css>auto</code></a>’, meaning 1.5135 - "1dppx, unless CSS says otherwise"? Say that image-resolution has no 1.5136 - effect on images whose resolution was set by something else in CSS? Or 1.5137 - somehow wordsmithing ‘<code class=css>image-set()</code>’ in some way 1.5138 - such that it always produces ‘<code class=css>1dppx</code>’ images 1.5139 - somehow? 1.5140 - 1.5141 - <p> The ‘<a href="#image-resolution"><code 1.5142 - class=property>image-resolution</code></a>’ property specifies the <a 1.5143 - href="#intrinsic-resolution"><i>intrinsic resolution</i></a> of all raster 1.5144 - images used in or on the element. It affects both content images (e.g. 1.5145 - replaced elements and generated content) and decorative images (such as 1.5146 - ‘<code class=property>background-image</code>’). The <dfn 1.5147 - id=intrinsic-resolution>intrinsic resolution</dfn> of an image is used to 1.5148 - determine the image's <a href="#intrinsic-dimensions"><i>intrinsic 1.5149 - dimensions</i></a>. Values have the following meanings: 1.5150 - 1.5151 - <dl> 1.5152 - <dt>‘<code class=css><resolution></code>’ 1.5153 - 1.5154 - <dd> Specifies the intrinsic resolution explicitly. A "dot" in this case 1.5155 - corresponds to a single image pixel. 1.5156 - 1.5157 - <dt>‘<a href="#image-orientation-from-image"><code 1.5158 - class=css>from-image</code></a>’ 1.5159 - 1.5160 - <dd> The image's intrinsic resolution is taken as that specified by the 1.5161 - image format. If the image does not specify its own resolution, the 1.5162 - explicitly specified resolution is used (if given), else it defaults to 1.5163 - ‘<code class=css>1dppx</code>’. 1.5164 - 1.5165 - <dt>‘<code class=css>snap</code>’ 1.5166 - 1.5167 - <dd> If the "snap" keyword is provided, the computed ‘<code 1.5168 - class=css><resolution></code>’ (if any) is the specified resolution 1.5169 - rounded to the nearest value that would map one image pixel to an integer 1.5170 - number of device pixels. If the resolution is taken from the image, then 1.5171 - the used intrinsic resolution is the image's native resolution similarly 1.5172 - adjusted. 1.5173 - </dl> 1.5174 - 1.5175 - <p> As vector formats such as SVG do not have an intrinsic resolution, this 1.5176 - property has no effect on vector images. 1.5177 - 1.5178 - <div class=example> 1.5179 - <p> Printers tend to have substantially higher resolution than computer 1.5180 - monitors; due to this, an image that looks fine on the screen may look 1.5181 - pixellated when printed out. The ‘<a href="#image-resolution"><code 1.5182 - class=property>image-resolution</code></a>’ property can be used to 1.5183 - embed a high-resolution image into the document and maintain an 1.5184 - appropriate size, ensuring attractive display both on screen and on 1.5185 - paper: 1.5186 - 1.5187 - <pre><!-- 1.5188 - -->img.high-res { 1.5189 +<p>--> 1.5190 + 1.5191 + 1.5192 +<h2 data-level=6 id=image-processing><span class=secno>6 </span><span class=content> 1.5193 +Image Processing</span><a class=section-link href=#image-processing>§</a></h2> 1.5194 + 1.5195 +<h3 data-level=6.1 id=the-image-resolution><span class=secno>6.1 </span><span class=content> 1.5196 +Overriding Image Resolutions: the <a class=property data-link-type=propdesc href=#propdef-image-resolution title=image-resolution>image-resolution</a> property</span><a class=section-link href=#the-image-resolution>§</a></h3> 1.5197 + 1.5198 +<p> The <a>image resolution</a> is defined as 1.5199 + the number of image pixels per unit length, 1.5200 + e.g., pixels per inch. 1.5201 + Some image formats can record information about the resolution of images. 1.5202 + This information can be helpful when determining the actual size of the image in the formatting process. 1.5203 + However, the information can also be wrong, 1.5204 + in which case it should be ignored. 1.5205 + By default, CSS assumes a resolution of one image pixel per CSS <span class=css data-link-type=maybe>px</span> unit; 1.5206 + however, the <a class=property data-link-type=propdesc href=#propdef-image-resolution title=image-resolution>image-resolution</a> property allows using some other resolution. 1.5207 + 1.5208 +<table class=propdef><tr><th>Name:<td><dfn data-dfn-type=property id=propdef-image-resolution>image-resolution</dfn><tr><th>Value:<td>[ from-image || <a class=production data-link-type=type href=#typedef-resolution><var><resolution></var></a> ] && snap?<tr><th>Initial:<td>1dppx<tr><th>Applies to:<td>all elements<tr><th>Inherited:<td>yes<tr><th>Media:<td>visual<tr><th>Computed value:<td>as specified, except with <a class=production data-link-type=type href=#typedef-resolution><var><resolution></var></a> possibly altered by computed for <a class=css data-link-type=maybe href=#snap>snap</a> (see below)<tr><th>Animatable:<td>no</table> 1.5209 + <p class=issue> 1.5210 + The <a class=css data-link-type=maybe href=#funcdef-image-set>image-set()</a> notation can alter the intrinsic resolution of an image, 1.5211 + which ideally would be automatically honored without having to set this property. 1.5212 + How should we best address this? 1.5213 + Change the initial value to <a class=css data-link-type=maybe href=#auto>auto</a>, meaning "1dppx, unless CSS says otherwise"? 1.5214 + Say that image-resolution has no effect on images whose resolution was set by something else in CSS? 1.5215 + Or somehow wordsmithing <a class=css data-link-type=maybe href=#funcdef-image-set>image-set()</a> in some way such that it always produces <span class=css data-link-type=maybe>1dppx</span> images somehow? 1.5216 + 1.5217 +<p> The <a class=property data-link-type=propdesc href=#propdef-image-resolution title=image-resolution>image-resolution</a> property specifies the <a href=#intrinsic-resolution>intrinsic resolution</a> of all raster images used in or on the element. 1.5218 + It affects both content images 1.5219 + (e.g. replaced elements and generated content) 1.5220 + and decorative images 1.5221 + (such as <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/colors.html#propdef-background-image title=background-image>background-image</a>). 1.5222 + The <dfn data-dfn-type=dfn id=intrinsic-resolution>intrinsic resolution</dfn> of an image is used to determine the image's <a href=#intrinsic-dimensions>intrinsic dimensions</a>. 1.5223 + Values have the following meanings: 1.5224 + 1.5225 + <dl data-dfn-for=image-resolution data-dfn-type=value> 1.5226 + <dt><dfn data-dfn-type=type id=typedef-resolution><a class=production data-link-type=type href=#typedef-resolution><var><resolution></var></a></dfn> 1.5227 + <dd> 1.5228 + Specifies the intrinsic resolution explicitly. 1.5229 + A "dot" in this case corresponds to a single image pixel. 1.5230 + 1.5231 + <dt><dfn data-dfn-type=dfn id=from-image0>from-image</dfn> 1.5232 + <dd> 1.5233 + The image's intrinsic resolution is taken as that specified by the image format. 1.5234 + If the image does not specify its own resolution, 1.5235 + the explicitly specified resolution is used (if given), 1.5236 + else it defaults to <span class=css data-link-type=maybe>1dppx</span>. 1.5237 + 1.5238 + <dt><dfn data-dfn-type=dfn id=snap>snap</dfn> 1.5239 + <dd> 1.5240 + If the "snap" keyword is provided, 1.5241 + the computed <a class=production data-link-type=type href=#typedef-resolution><var><resolution></var></a> (if any) 1.5242 + is the specified resolution rounded to the nearest value 1.5243 + that would map one image pixel to an integer number of device pixels. 1.5244 + If the resolution is taken from the image, 1.5245 + then the used intrinsic resolution is the image's native resolution similarly adjusted. 1.5246 + </dl> 1.5247 + 1.5248 +<p> As vector formats such as SVG do not have an intrinsic resolution, 1.5249 + this property has no effect on vector images. 1.5250 + 1.5251 + <div class=example> 1.5252 + Printers tend to have substantially higher resolution than computer monitors; 1.5253 + due to this, an image that looks fine on the screen may look pixellated when printed out. 1.5254 + The <a class=property data-link-type=propdesc href=#propdef-image-resolution title=image-resolution>image-resolution</a> property can be used to embed a high-resolution image into the document 1.5255 + and maintain an appropriate size, 1.5256 + ensuring attractive display both on screen and on paper: 1.5257 + 1.5258 + <pre> img.high-res { 1.5259 + image-resolution: 300dpi; 1.5260 + } 1.5261 +</pre> 1.5262 +<p> With this set, an image meant to be 5 inches wide at 300dpi 1.5263 + will actually display as 5in wide; 1.5264 + without this set, 1.5265 + the image would display as approximately 15.6in wide 1.5266 + since the image is 15000 image pixels across, 1.5267 + and by default CSS displays 96 image pixels per inch. 1.5268 + </div> 1.5269 + 1.5270 + 1.5271 + <div class=example> 1.5272 + Some image formats can encode the image resolution into the image data. 1.5273 + This rule specifies that the UA should use the image resolution found in the image itself, 1.5274 + falling back to 1 image pixel per CSS <span class=css data-link-type=maybe>px</span> unit. 1.5275 + 1.5276 +<pre>img { image-resolution: from-image }</pre> 1.5277 +<p> These rules both specify that the UA should use the image resolution found in the image itself, 1.5278 + but if the image has no resolution, 1.5279 + the resolution is set to <span class=css data-link-type=maybe>300dpi</span> instead of the default <span class=css data-link-type=maybe>1dppx</span>. 1.5280 + 1.5281 + <pre> img { image-resolution: from-image 300dpi } 1.5282 + img { image-resolution: 300dpi from-image } 1.5283 +</pre> 1.5284 + </div> 1.5285 + 1.5286 + <div class=example> 1.5287 + 1.5288 +<p> Using this rule, the image resolution is set to 300dpi. 1.5289 + (The resolution in the image, if any, is ignored.) 1.5290 + 1.5291 +<pre>img { image-resolution: 300dpi }</pre> 1.5292 +<p> This rule, on the other hand, 1.5293 + if used when the screen's resolution is 96dpi, 1.5294 + would instead render the image at 288dpi 1.5295 + (so that 3 image pixels map to 1 device pixel): 1.5296 + 1.5297 +<pre>img { image-resolution: 300dpi snap; }</pre> 1.5298 +<p> The <a class=css data-link-type=maybe href=#snap>snap</a> keyword can also be used when the resolution is taken from the image: 1.5299 + 1.5300 +<pre>img { image-resolution: snap from-image; }</pre> 1.5301 +<p> An image declaring itself as 300dpi will, 1.5302 + in the situation above, 1.5303 + display at 288dpi 1.5304 + (3 image pixels per device pixel) 1.5305 + whereas an image declaring 72dpi will render at 96dpi 1.5306 + (1 image pixel per device pixel). 1.5307 + </div> 1.5308 + 1.5309 + 1.5310 + 1.5311 +<h3 data-level=6.2 id=the-image-orientation><span class=secno>6.2 </span><span class=content> 1.5312 +Orienting an Image on the Page: the <a class=property data-link-type=propdesc href=#propdef-image-orientation title=image-orientation>image-orientation</a> property</span><a class=section-link href=#the-image-orientation>§</a></h3> 1.5313 + 1.5314 +<p> If a picture is taken with a camera turned on its side, 1.5315 + or a document isn't positioned correctly within a scanner, 1.5316 + the resultant image may be "sideways" or even upside-down. 1.5317 + The <a class=property data-link-type=propdesc href=#propdef-image-orientation title=image-orientation>image-orientation</a> property provides a way to apply an "out-of-band" rotation to image source data to correctly orient an image. 1.5318 + 1.5319 +<p class=note> Note: This property is not intended to specify layout transformations 1.5320 + such as arbitrary rotation or flipping the image in the horizontal or vertical direction. 1.5321 + (See <a data-biblio-type=informative data-link-type=biblio href=#css3-2d-transforms title=CSS3-2D-TRANSFORMS>[CSS3-2D-TRANSFORMS]</a> for a feature designed to do that.) 1.5322 + It is also not needed to correctly orient an image when printing in landscape versus portrait orientation, 1.5323 + as that rotation is done as part of layout. (See <a data-biblio-type=informative data-link-type=biblio href=#css3page title=CSS3PAGE>[CSS3PAGE]</a>.) 1.5324 + It should only be used to correct incorrectly-oriented images. 1.5325 + 1.5326 +<table class=propdef><tr><th>Name:<td><dfn data-dfn-type=property id=propdef-image-orientation>image-orientation</dfn><tr><th>Value:<td>from-image | <a class=production data-link-type=type href=#typedef-angle><var><angle></var></a> | [ <a class=production data-link-type=type href=#typedef-angle><var><angle></var></a>? flip ]<tr><th>Initial:<td>0deg<tr><th>Applies to:<td>all elements<tr><th>Inherited:<td>yes<tr><th>Media:<td>visual<tr><th>Computed value:<td>an <a class=production data-link-type=type href=#typedef-angle><var><angle></var></a>, rounded and normalized (see text), plus optionally a <span class=css data-link-type=maybe>flip</span> keyword<tr><th>Animatable:<td>no</table> 1.5327 +<p> This property specifies an orthogonal rotation to be applied to an image before it is laid out. 1.5328 + It applies only to content images 1.5329 + (e.g. replaced elements and generated content), 1.5330 + not decorative images 1.5331 + (such as <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/colors.html#propdef-background-image title=background-image>background-image</a>). 1.5332 + CSS layout processing applies to the image <em>after</em> rotation. 1.5333 + This implies, for example: 1.5334 + 1.5335 +<p> <ul> 1.5336 + <li> 1.5337 + The intrinsic height and width are derived from the rotated rather than the original image dimensions. 1.5338 + 1.5339 + <li> 1.5340 + The height (width) property applies to the vertical (horizontal) dimension of the image, 1.5341 + <em>after</em> rotation. 1.5342 + </ul> 1.5343 + 1.5344 +<p> Values have the following meanings: 1.5345 + 1.5346 + <dl data-dfn-for=image-orientation data-dfn-type=value> 1.5347 + <dt><dfn data-dfn-type=dfn id=from-image>from-image</dfn> 1.5348 + <dd> 1.5349 + If the image has an orientation specified in its metadata, 1.5350 + such as EXIF, 1.5351 + this value computes to the angle that the metadata specifies is necessary to correctly orient the image. 1.5352 + If necessary, this angle is then rounded and normalized as described above for an <code><angle></code> value. 1.5353 + If there is no orientation specified in its metadata, 1.5354 + this value computes to <span class=css data-link-type=maybe>0deg</span>. 1.5355 + 1.5356 + <dt><dfn data-dfn-type=type id=typedef-angle><a class=production data-link-type=type href=#typedef-angle><var><angle></var></a></dfn> 1.5357 + <dd> 1.5358 + Positive values cause the image to be rotated to the right 1.5359 + (in a clockwise direction), 1.5360 + while negative values cause a rotation to the left. 1.5361 + The computed value of the property is calculated 1.5362 + by rounding the specified angle to the nearest quarter-turn 1.5363 + (90deg, 100grad, .25turn, etc.), 1.5364 + rounding away from 0 1.5365 + (that is, 45deg is rounded to 90deg, while -45deg is rounded to -90deg), 1.5366 + then moduloing the value by 1 turn (360deg, 400grad, etc.). 1.5367 + 1.5368 + <dt><dfn data-dfn-type=dfn id=angle-flip><a class=production data-link-type=type href=#typedef-angle><var><angle></var></a>? flip</dfn> 1.5369 + <dd> 1.5370 + Identical to the plain <a class=production data-link-type=type href=#typedef-angle><var><angle></var></a> case, 1.5371 + except that after rotation the image is flipped horizontally. 1.5372 + If the <a class=production data-link-type=type href=#typedef-angle><var><angle></var></a> is omitted, 1.5373 + it defaults to <span class=css data-link-type=maybe>0deg</span>. 1.5374 + 1.5375 +<p class=note> Note: This value is only necessary to represent all 8 possible EXIF orientations that <a data-link-for=image-orientation data-link-type=value>from-image</a> can produce. 1.5376 + </dl> 1.5377 + 1.5378 +<p> The <a class=property data-link-type=propdesc href=#propdef-image-orientation title=image-orientation>image-orientation</a> property must be applied before any other transformations, 1.5379 + such as being specified in the <a class=css data-link-type=maybe href=#funcdef-image>image()</a> function with an opposite directionality to its context, 1.5380 + or using CSS Transforms. 1.5381 + 1.5382 + <div class=example> 1.5383 + 1.5384 +<p> The following example rotates the image 90 degrees clockwise: 1.5385 + 1.5386 + <pre> img.ninety { image-orientation: 90deg } 1.5387 + ... 1.5388 + <img class="ninety" src=...> 1.5389 +</pre> 1.5390 +<p> The same effect could be achieved with, for example, 1.5391 + an angle of -270deg or 450deg. 1.5392 + </div> 1.5393 + 1.5394 + 1.5395 +<h3 data-level=6.3 id=the-image-rendering><span class=secno>6.3 </span><span class=content> 1.5396 +Determing How To Scale an Image: the <a class=property data-link-type=propdesc href=#propdef-image-rendering title=image-rendering>image-rendering</a> property</span><a class=section-link href=#the-image-rendering>§</a></h3> 1.5397 + 1.5398 +<table class=propdef><tr><th>Name:<td><dfn data-dfn-type=property id=propdef-image-rendering>image-rendering</dfn><tr><th>Value:<td>auto | crisp-edges | pixelated<tr><th>Initial:<td>auto<tr><th>Applies to:<td>all elements<tr><th>Inherited:<td>yes<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified value<tr><th>Animatable:<td>no</table> 1.5399 +<p> The <a class=property data-link-type=propdesc href=#propdef-image-rendering title=image-rendering>image-rendering</a> property provides a hint to the user-agent 1.5400 + about what aspects of an image are most important to preserve when the image is scaled, 1.5401 + to aid the user-agent in the choice of an appropriate scaling algorithm. 1.5402 + When specified on an element, 1.5403 + it applies to all images given in properties for the element, 1.5404 + such as background images, 1.5405 + list-style images, 1.5406 + or the content of replaced elements when they represent an image that must be scaled. 1.5407 + The values of the <a class=property data-link-type=propdesc href=#propdef-image-rendering title=image-rendering>image-rendering</a> property are interpreted as follows: 1.5408 + 1.5409 + <dl data-dfn-for=image-rendering data-dfn-type=value> 1.5410 + <dt><dfn data-dfn-type=dfn id=auto>auto</dfn> 1.5411 + <dd> 1.5412 + The image should be scaled with an algorithm that maximizes the appearance of the image. 1.5413 + In particular, scaling algorithms that "smooth" colors are acceptable, 1.5414 + such as bilinear interpolation. 1.5415 + This is intended for images such as photos. 1.5416 + 1.5417 + <dt><dfn data-dfn-type=dfn id=crisp-edges>crisp-edges</dfn> 1.5418 + <dd> 1.5419 + The image must be scaled with an algorithm that preserves contrast and edges in the image, 1.5420 + and which does not smooth colors or introduce blur to the image in the process. 1.5421 + This is intended for images such as pixel art. 1.5422 + 1.5423 + <dt><dfn data-dfn-type=dfn id=pixelated>pixelated</dfn> 1.5424 + <dd> 1.5425 + When scaling the image up, the "nearest neighbor" or similar algorithm must be used, 1.5426 + so that the image appears to be simply composed of very large pixels. 1.5427 + When scaling down, 1.5428 + this is the same as <a data-link-for=image-rendering data-link-type=value>auto</a>. 1.5429 + </dl> 1.5430 + 1.5431 + <p class=issue> 1.5432 + Should we move the current <a class=css data-link-type=maybe href=#auto>auto</a> behavior to a well-named keyword (<span class=css data-link-type=maybe>smooth</span>?) 1.5433 + and just define <a class=css data-link-type=maybe href=#auto>auto</a> to be "whatever the UA wants", 1.5434 + which is what <a class=css data-link-type=maybe href=#auto>auto</a> usually means? 1.5435 + 1.5436 +<p> This property does not dictate any particular scaling algorithm to be used. 1.5437 + For example, with <span class=css data-link-type=maybe>image-rendering: auto</span>, 1.5438 + a user agent might scale images with bilinear interpolation by default, 1.5439 + switch to nearest-neighbor interpolation in high-load situations, 1.5440 + and switch to a high-quality scaling algorithm like Lanczos interpolation for static images that aren't moving or changing. 1.5441 + Similarly, with 'image-rendering: crisp-edges', 1.5442 + a user agent might scale images with nearest-neighbor interpolation by default, 1.5443 + and switch to EPX interpolation in low-load situations. 1.5444 + 1.5445 +<p> This property previously accepted the values <a class=property data-link-type=propdesc title=optimizeSpeed>optimizeSpeed</a> and <a class=property data-link-type=propdesc title=optimizeQuality>optimizeQuality</a>. 1.5446 + These are now deprecated; 1.5447 + a user agent must accept them as valid values 1.5448 + but must treat them as having the same behavior as <a data-link-for=image-rendering data-link-type=value>auto</a>, 1.5449 + and authors must not use them. 1.5450 + 1.5451 + 1.5452 <!-- 1.5453 - --> image-resolution: 300dpi; 1.5454 -<!-- 1.5455 - -->}</pre> 1.5456 - 1.5457 - <p> With this set, an image meant to be 5 inches wide at 300dpi will 1.5458 - actually display as 5in wide; without this set, the image would display 1.5459 - as approximately 15.6in wide since the image is 15000 image pixels 1.5460 - across, and by default CSS displays 96 image pixels per inch. 1.5461 - </div> 1.5462 - 1.5463 - <div class=example> 1.5464 - <p> Some image formats can encode the image resolution into the image 1.5465 - data. This rule specifies that the UA should use the image resolution 1.5466 - found in the image itself, falling back to 1 image pixel per CSS ‘<code 1.5467 - class=css>px</code>’ unit. 1.5468 - 1.5469 - <pre>img { image-resolution: from-image }</pre> 1.5470 - 1.5471 - <p> These rules both specify that the UA should use the image resolution 1.5472 - found in the image itself, but if the image has no resolution, the 1.5473 - resolution is set to ‘<code class=css>300dpi</code>’ instead of the 1.5474 - default ‘<code class=css>1dppx</code>’. 1.5475 - 1.5476 - <pre> 1.5477 -<!-- 1.5478 - -->img { image-resolution: from-image 300dpi } 1.5479 -<!-- 1.5480 - -->img { image-resolution: 300dpi from-image }</pre> 1.5481 - </div> 1.5482 - 1.5483 - <div class=example> 1.5484 - <p> Using this rule, the image resolution is set to 300dpi. (The 1.5485 - resolution in the image, if any, is ignored.) 1.5486 - 1.5487 - <pre>img { image-resolution: 300dpi }</pre> 1.5488 - 1.5489 - <p> This rule, on the other hand, if used when the screen's resolution is 1.5490 - 96dpi, would instead render the image at 288dpi (so that 3 image pixels 1.5491 - map to 1 device pixel): 1.5492 - 1.5493 - <pre>img { image-resolution: 300dpi snap; }</pre> 1.5494 - 1.5495 - <p> The ‘<code class=css>snap</code>’ keyword can also be used when 1.5496 - the resolution is taken from the image: 1.5497 - 1.5498 - <pre>img { image-resolution: snap from-image; }</pre> 1.5499 - 1.5500 - <p> An image declaring itself as 300dpi will, in the situation above, 1.5501 - display at 288dpi (3 image pixels per device pixel) whereas an image 1.5502 - declaring 72dpi will render at 96dpi (1 image pixel per device pixel). 1.5503 - </div> 1.5504 - <!-- ====================================================================== --> 1.5505 - 1.5506 - <h3 id=the-image-orientation><span class=secno>6.2. </span> Orienting an 1.5507 - Image on the Page: the ‘<a href="#image-orientation"><code 1.5508 - class=property>image-orientation</code></a>’ property</h3> 1.5509 - 1.5510 - <p> If a picture is taken with a camera turned on its side, or a document 1.5511 - isn't positioned correctly within a scanner, the resultant image may be 1.5512 - "sideways" or even upside-down. The ‘<a href="#image-orientation"><code 1.5513 - class=property>image-orientation</code></a>’ property provides a way to 1.5514 - apply an "out-of-band" rotation to image source data to correctly orient 1.5515 - an image. 1.5516 - 1.5517 - <p class=note> Note that this property is not intended to specify layout 1.5518 - transformations such as arbitrary rotation or flipping the image in the 1.5519 - horizontal or vertical direction. (See <a href="#CSS3-2D-TRANSFORMS" 1.5520 - rel=biblioentry>[CSS3-2D-TRANSFORMS]<!--{{CSS3-2D-TRANSFORMS}}--></a> for 1.5521 - a feature designed to do that.) It is also not needed to correctly orient 1.5522 - an image when printing in landscape versus portrait orientation, as that 1.5523 - rotation is done as part of layout. (See <a href="#CSS3PAGE" 1.5524 - rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a>.) It should only be used 1.5525 - to correct incorrectly-oriented images. 1.5526 - 1.5527 - <table class=propdef> 1.5528 - <tbody> 1.5529 - <tr> 1.5530 - <th>Name: 1.5531 - 1.5532 - <td><dfn id=image-orientation>image-orientation</dfn> 1.5533 - 1.5534 - <tr> 1.5535 - <th><a href="#values">Value:</a> 1.5536 - 1.5537 - <td><angle> | from-image 1.5538 - 1.5539 - <tr> 1.5540 - <th>Initial: 1.5541 - 1.5542 - <td>0deg 1.5543 - 1.5544 - <tr> 1.5545 - <th>Applies to: 1.5546 - 1.5547 - <td>all elements 1.5548 - 1.5549 - <tr> 1.5550 - <th>Inherited: 1.5551 - 1.5552 - <td>yes 1.5553 - 1.5554 - <tr> 1.5555 - <th>Media: 1.5556 - 1.5557 - <td>visual 1.5558 - 1.5559 - <tr> 1.5560 - <th>Computed value: 1.5561 - 1.5562 - <td>an <var><angle></var>, rounded and normalized (see text) 1.5563 - 1.5564 - <tr> 1.5565 - <th>Animatable: 1.5566 - 1.5567 - <td>no 1.5568 - </table> 1.5569 - 1.5570 - <p> This property specifies an orthogonal rotation to be applied to an 1.5571 - image before it is laid out. It applies only to content images (e.g. 1.5572 - replaced elements and generated content), not decorative images (such as 1.5573 - ‘<code class=property>background-image</code>’). CSS layout processing 1.5574 - applies to the image <em>after</em> rotation. This implies, for example: 1.5575 - 1.5576 - <ul> 1.5577 - <li> The intrinsic height and width are derived from the rotated rather 1.5578 - than the original image dimensions. 1.5579 - 1.5580 - <li> The height (width) property applies to the vertical (horizontal) 1.5581 - dimension of the image, <em>after</em> rotation. 1.5582 - </ul> 1.5583 - 1.5584 - <p> Values have the following meanings: 1.5585 - 1.5586 - <dl> 1.5587 - <dt><code><angle></code> 1.5588 - 1.5589 - <dd> Positive values cause the image to be rotated to the right (in a 1.5590 - clockwise direction), while negative values cause a rotation to the left. 1.5591 - The computed value of the property is calculated by rounding the 1.5592 - specified angle to the nearest quarter-turn (90deg, 100grad, .25turn, 1.5593 - etc.), rounding away from 0 (that is, 45deg is rounded to 90deg, while 1.5594 - -45deg is rounded to -90deg), then moduloing the value by 1 turn (360deg, 1.5595 - 400grad, etc.). 1.5596 - 1.5597 - <dt><dfn id=image-orientation-from-image>from-image</dfn> 1.5598 - 1.5599 - <dd> If the image has an orientation specified in its metadata, such as 1.5600 - EXIF, this value computes to the angle that the metadata specifies is 1.5601 - necessary to correctly orient the image. If necessary, this angle is then 1.5602 - rounded and normalized as described above for an <code><angle></code> 1.5603 - value. If there is no orientation specified in its metadata, this value 1.5604 - computes to ‘<code class=css>0deg</code>’. 1.5605 - <p class=issue> Do we need to handle the "unnatural" EXIF orientations? 1.5606 - These might be used by, say, front-facing cameras (that take a picture 1.5607 - of the user and therefore display on the screen mirrored). This would 1.5608 - imply adding a ‘<code class=css>flip</code>’ keyword to go along 1.5609 - with <var><angle></var>. 1.5610 - </dl> 1.5611 - 1.5612 - <p> The ‘<a href="#image-orientation"><code 1.5613 - class=property>image-orientation</code></a>’ property must be applied 1.5614 - before any other transformations, such as being specified in the ‘<code 1.5615 - class=css>image()</code>’ function with an opposite directionality to 1.5616 - its context, or using CSS Transforms. 1.5617 - 1.5618 - <div class=example> 1.5619 - <p> The following example rotates the image 90 degrees clockwise: 1.5620 - 1.5621 - <pre><!-- 1.5622 - -->img.ninety { image-orientation: 90deg } 1.5623 -<!-- 1.5624 - -->... 1.5625 -<!-- 1.5626 - --><img class="ninety" src=... /></pre> 1.5627 - 1.5628 - <p> The same effect could be achieved with, for example, an angle of 1.5629 - -270deg or 450deg. 1.5630 - </div> 1.5631 - 1.5632 - <h3 id=the-image-rendering><span class=secno>6.3. </span> Determing How To 1.5633 - Scale an Image: the ‘<a href="#image-rendering"><code 1.5634 - class=property>image-rendering</code></a>’ property</h3> 1.5635 - 1.5636 - <table class=propdef> 1.5637 - <tbody> 1.5638 - <tr> 1.5639 - <th>Name: 1.5640 - 1.5641 - <td><dfn id=image-rendering>image-rendering</dfn> 1.5642 - 1.5643 - <tr> 1.5644 - <th><a href="#values">Value:</a> 1.5645 - 1.5646 - <td>auto | crisp-edges | pixelated 1.5647 - 1.5648 - <tr> 1.5649 - <th>Initial: 1.5650 - 1.5651 - <td>auto 1.5652 - 1.5653 - <tr> 1.5654 - <th>Applies to: 1.5655 - 1.5656 - <td>all elements 1.5657 - 1.5658 - <tr> 1.5659 - <th>Inherited: 1.5660 - 1.5661 - <td>yes 1.5662 - 1.5663 - <tr> 1.5664 - <th>Media: 1.5665 - 1.5666 - <td>visual 1.5667 - 1.5668 - <tr> 1.5669 - <th>Computed value: 1.5670 - 1.5671 - <td>specified value 1.5672 - 1.5673 - <tr> 1.5674 - <th>Animatable: 1.5675 - 1.5676 - <td>no 1.5677 - </table> 1.5678 - 1.5679 - <p> The ‘<a href="#image-rendering"><code 1.5680 - class=property>image-rendering</code></a>’ property provides a hint to 1.5681 - the user-agent about what aspects of an image are most important to 1.5682 - preserve when the image is scaled, to aid the user-agent in the choice of 1.5683 - an appropriate scaling algorithm. When specified on an element, it applies 1.5684 - to all images given in properties for the element, such as background 1.5685 - images, list-style images, or the content of replaced elements when they 1.5686 - represent an image that must be scaled. The values of the ‘<a 1.5687 - href="#image-rendering"><code class=property>image-rendering</code></a>’ 1.5688 - property are interpreted as follows: 1.5689 - 1.5690 - <dl> 1.5691 - <dt><dfn id=image-rendering-auto>auto</dfn> 1.5692 - 1.5693 - <dd> The image should be scaled with an algorithm that maximizes the 1.5694 - appearance of the image. In particular, scaling algorithms that "smooth" 1.5695 - colors are acceptable, such as bilinear interpolation. This is intended 1.5696 - for images such as photos. 1.5697 - 1.5698 - <dt><dfn id=image-rendering-crisp-edges>crisp-edges</dfn> 1.5699 - 1.5700 - <dd> The image must be scaled with an algorithm that preserves contrast 1.5701 - and edges in the image, and which does not smooth colors or introduce 1.5702 - blur to the image in the process. This is intended for images such as 1.5703 - pixel art. 1.5704 - 1.5705 - <dt><dfn id=image-rendering-pixelated>pixelated</dfn> 1.5706 - 1.5707 - <dd> When scaling the image up, the "nearest neighbor" or similar 1.5708 - algorithm must be used, so that the image appears to be simply composed 1.5709 - of very large pixels. When scaling down, this is the same as <a 1.5710 - href="#image-rendering-auto">‘<code class=css>auto</code>’</a>. 1.5711 - </dl> 1.5712 - 1.5713 - <p class=issue> Should we move the current ‘<a 1.5714 - href="#image-rendering-auto"><code class=css>auto</code></a>’ behavior 1.5715 - to a well-named keyword (‘<code class=css>smooth</code>’?) and just 1.5716 - define ‘<a href="#image-rendering-auto"><code 1.5717 - class=css>auto</code></a>’ to be "whatever the UA wants", which is what 1.5718 - ‘<a href="#image-rendering-auto"><code class=css>auto</code></a>’ 1.5719 - usually means? 1.5720 - 1.5721 - <p> This property does not dictate any particular scaling algorithm to be 1.5722 - used. For example, with ‘<code class=css>image-rendering:auto</code>’, 1.5723 - a user agent might scale images with bilinear interpolation by default, 1.5724 - switch to nearest-neighbor interpolation in high-load situations, and 1.5725 - switch to a high-quality scaling algorithm like Lanczos interpolation for 1.5726 - static images that aren't moving or changing. Similarly, with ‘<code 1.5727 - class=css>image-rendering:crisp-edges</code>’, a user agent might scale 1.5728 - images with nearest-neighbor interpolation by default, and switch to EPX 1.5729 - interpolation in low-load situations. 1.5730 - 1.5731 - <p> This property previously accepted the values ‘<code 1.5732 - class=property>optimizeSpeed</code>’ and ‘<code 1.5733 - class=property>optimizeQuality</code>’. These are now deprecated; a user 1.5734 - agent must accept them as valid values but must treat them as having the 1.5735 - same behavior as <a href="#image-rendering-auto">‘<code 1.5736 - class=css>auto</code>’</a>, and authors must not use them. <!-- 1.5737 IIIIIIIIII tttt 1.5738 I::::::::I ttt:::t 1.5739 I::::::::I t:::::t 1.5740 @@ -3616,139 +2669,150 @@ 1.5741 ppppppppp 1.5742 --> 1.5743 1.5744 - <h2 id=interpolation><span class=secno>7. </span> Interpolation</h2> 1.5745 - 1.5746 - <p> This section describes how to interpolate between new value types 1.5747 - defined in this specification, for use with modules such as CSS 1.5748 - Transitions and CSS Animations. 1.5749 - 1.5750 - <p> If an algorithm below simply states that two values should be 1.5751 - "interpolated" or "transitioned" without further details, then the value 1.5752 - should be interpolated as described by the Transitions spec. Otherwise, 1.5753 - the algorithm may reference a variable "t" in its detailed description of 1.5754 - the interpolation. This is a number which starts at 0% and goes to 100%, 1.5755 - and is set to a value that represents the progress through the transition, 1.5756 - based on the duration of the transition, the elapsed time, and the timing 1.5757 - function in use. For example, with a linear timing function and a 1s 1.5758 - duration, after .3s t is equal to 30%. 1.5759 - 1.5760 - <h3 id=interpolating-images><span class=secno>7.1. </span> Interpolating <a 1.5761 - href="#image-type"><var><image></var></a></h3> 1.5762 - 1.5763 - <p> All images can be interpolated, though some special types of images 1.5764 - (like some gradients) have their own special interpolation rules. In 1.5765 - general terms, images are interpolated by scaling them to the size of the 1.5766 - start image and cross-fading the two while they transition to the size of 1.5767 - the end image. 1.5768 - 1.5769 - <p> In specific terms, at each point in the interpolation the image is 1.5770 - equal to <code>cross-fade( (100% - t) <start image>, <end 1.5771 - image>)</code>. 1.5772 - 1.5773 - <p class=issue> Special-case interpolating to/from no image, like 1.5774 - "background-image: url(foo);" to "background-image: none;". 1.5775 - 1.5776 - <h3 id=interpolating-image-combinations><span class=secno>7.2. </span> 1.5777 - Interpolating <a 1.5778 - href="#ltimage-combination"><var><image-combination></var></a></h3> 1.5779 - 1.5780 - <p> If both the starting and ending images are <a 1.5781 - href="#ltimage-combination"><var><image-combination></var></a>s which 1.5782 - differ only by by their <var><percentage></var>, they must be 1.5783 - interpolated by interpolating their <var><percentage></var>. Otherwise, 1.5784 - they must be interpolated as generic <a 1.5785 - href="#image-type"><var><image></var></a>s. 1.5786 - 1.5787 - <h3 id=interpolating-gradients><span class=secno>7.3. </span> Interpolating 1.5788 - <a href="#gradient-type"><var><gradient></var></a></h3> 1.5789 - 1.5790 - <p class=issue> This section needs review and improvement. In particular, I 1.5791 - believe the handling of linear-gradient() is incomplete - I think we want 1.5792 - to specifically interpolate the "length" of the gradient line (the 1.5793 - distance between 0% and 100%) between the starting and ending positions 1.5794 - explicitly, so it doesn't grow and then shrink over a single animation. 1.5795 - 1.5796 - <p> Gradient images can be interpolated directly in CSS transitions and 1.5797 - animations, smoothly animating from one gradient to another. There are 1.5798 - only a few restrictions on what gradients are allowed to be interpolated: 1.5799 - 1.5800 - <ol> 1.5801 - <li> Both the starting and ending gradient must be expressed with the same 1.5802 - function. (For example, you can transition from a ‘<code 1.5803 - class=css>linear-gradient()</code>’ to a ‘<code 1.5804 - class=css>linear-gradient()</code>’, but not from a ‘<code 1.5805 - class=css>linear-gradient()</code>’ to a ‘<code 1.5806 - class=css>radial-gradient()</code>’ or a ‘<code 1.5807 - class=css>repeating-linear-gradient()</code>’.) 1.5808 - 1.5809 - <li> Both the starting and ending gradient must have the same number of 1.5810 - <var><color-stop></var>s. For this purpose, a repeating gradient is 1.5811 - considered to have infinite <var><color-stop></var>s, and thus all 1.5812 - repeating gradients have the same number of <var><color-stop></var>s. 1.5813 - (Note that one may pad a gradient with additional 1.5814 - <var><color-stop></var>s placed atop each other, if necessary to make 1.5815 - two gradients have the same number of <var><color-stop></var>s.) 1.5816 - </ol> 1.5817 - 1.5818 - <p> If the two gradients satisfy both of those constraints, they must be 1.5819 - interpolated as described below. If not, they must be interpolated as a 1.5820 - generic <a href="#image-type"><var><image></var></a>. 1.5821 - 1.5822 - <ol> 1.5823 - <li> Convert both the start and end gradients to their explicit forms: 1.5824 - <dl> 1.5825 - <dt>For linear gradients: 1.5826 - 1.5827 - <dd> 1.5828 - <ul> 1.5829 - <li> If the direction is specified as an <var><angle></var>, it is 1.5830 - already in its explicit form. 1.5831 - 1.5832 - <li> Otherwise, change its direction to an <var><angle></var> in 1.5833 - [‘<code class=css>0deg</code>’,‘<code 1.5834 - class=css>360deg</code>’) that would produce an equivalent 1.5835 - rendering. 1.5836 - <p> If both the start and end gradients had their direction specified 1.5837 - with keywords, and the absolute difference between the angles their 1.5838 - directions mapped to is greater than 180deg, add 360deg to the 1.5839 - direction of the gradient with the smaller angle. <span 1.5840 - class=note>This ensures that a transition from, for example, "to 1.5841 - left" (270deg) to "to top" (0deg) rotates the gradient a 1.5842 - quarter-turn clockwise, as expected, rather than rotating 1.5843 - three-quarters of a turn counter-clockwise.</span> 1.5844 - </ul> 1.5845 - 1.5846 - <dt>For radial gradients: 1.5847 - 1.5848 - <dd> 1.5849 - <ul> 1.5850 - <li> If the size is specified as two <a 1.5851 - href="#radial-size-circle"><var><length></var></a>s or 1.5852 - <var><percentage></var>s, it is already in its explicit form. 1.5853 - 1.5854 - <li> Otherwise, the size must be changed to a pair of <a 1.5855 - href="#radial-size-circle"><var><length></var></a>s that would 1.5856 - produce an equivalent ending-shape. If the <a 1.5857 - href="#shape"><var><ending-shape></var></a> was specified as 1.5858 - ‘<code class=css>circle</code>’, change it to ‘<code 1.5859 - class=css>ellipse</code>’. 1.5860 - </ul> 1.5861 - </dl> 1.5862 - 1.5863 - <li> Interpolate each component and color-stop of the gradients 1.5864 - independently. For linear gradients, the only component is the angle. For 1.5865 - radial gradients, the components are the horizontal and vertical position 1.5866 - of the center and the horizontal and vertical axis lengths. 1.5867 - 1.5868 - <li> To interpolate a color-stop, first match each color-stop in the start 1.5869 - gradient to the corresponding color-stop at the same index in the end 1.5870 - gradient. For repeating gradients, the first specified color-stop in the 1.5871 - start and end gradients are considered to be at the same index, and all 1.5872 - other color-stops following and preceding are indexed appropriately. 1.5873 - Then, for each pair of color-stops, interpolate the position and color 1.5874 - independently. 1.5875 - </ol> 1.5876 - <!-- 1.5877 +<h2 data-level=7 id=interpolation><span class=secno>7 </span><span class=content> 1.5878 +Interpolation</span><a class=section-link href=#interpolation>§</a></h2> 1.5879 + 1.5880 +<p> This section describes how to interpolate between new value types defined in this specification, 1.5881 + for use with modules such as CSS Transitions and CSS Animations. 1.5882 + 1.5883 +<p> If an algorithm below simply states that two values should be "interpolated" or "transitioned" without further details, 1.5884 + then the value should be interpolated as described by the Transitions spec. 1.5885 + Otherwise, the algorithm may reference a variable "t" in its detailed description of the interpolation. 1.5886 + This is a number which starts at 0% and goes to 100%, 1.5887 + and is set to a value that represents the progress through the transition, 1.5888 + based on the duration of the transition, 1.5889 + the elapsed time, 1.5890 + and the timing function in use. 1.5891 + For example, with a linear timing function and a 1s duration, 1.5892 + after .3s t is equal to 30%. 1.5893 + 1.5894 +<h3 data-level=7.1 id=interpolating-images><span class=secno>7.1 </span><span class=content> 1.5895 +Interpolating <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type><var><image></var></a></span><a class=section-link href=#interpolating-images>§</a></h3> 1.5896 + 1.5897 +<p> All images can be interpolated, 1.5898 + though some special types of images 1.5899 + (like some gradients) 1.5900 + have their own special interpolation rules. 1.5901 + In general terms, 1.5902 + images are interpolated by scaling them to the size of the start image 1.5903 + and cross-fading the two while they transition to the size of the end image. 1.5904 + 1.5905 +<p> In specific terms, 1.5906 + at each point in the interpolation 1.5907 + the image is equal to <code>cross-fade( (100% - t) <start image>, <end image>)</code>. 1.5908 + 1.5909 + <p class=issue> 1.5910 + Special-case interpolating to/from no image, 1.5911 + like "background-image: url(foo);" to "background-image: none;". 1.5912 + 1.5913 + 1.5914 +<h3 data-level=7.2 id=interpolating-image-combinations><span class=secno>7.2 </span><span class=content> 1.5915 +Interpolating <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-4/#ltimage-combination><var><image-combination></var></a></span><a class=section-link href=#interpolating-image-combinations>§</a></h3> 1.5916 + 1.5917 +<p> If both the starting and ending images are <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-4/#ltimage-combination><var><image-combination></var></a>s 1.5918 + which differ only by by their <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage><var><percentage></var></a>, 1.5919 + they must be interpolated by interpolating their <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage><var><percentage></var></a>. 1.5920 + Otherwise, they must be interpolated as generic <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type><var><image></var></a>s. 1.5921 + 1.5922 + 1.5923 +<h3 data-level=7.3 id=interpolating-gradients><span class=secno>7.3 </span><span class=content> 1.5924 +Interpolating <a class=production data-link-type=type href=#gradient-type><var><gradient></var></a></span><a class=section-link href=#interpolating-gradients>§</a></h3> 1.5925 + 1.5926 + <p class=issue> 1.5927 + This section needs review and improvement. 1.5928 + In particular, I believe the handling of linear-gradient() is incomplete - 1.5929 + I think we want to specifically interpolate the "length" of the gradient line 1.5930 + (the distance between 0% and 100%) 1.5931 + between the starting and ending positions explicitly, 1.5932 + so it doesn't grow and then shrink over a single animation. 1.5933 + 1.5934 +<p> Gradient images can be interpolated directly in CSS transitions and animations, 1.5935 + smoothly animating from one gradient to another. 1.5936 + There are only a few restrictions on what gradients are allowed to be interpolated: 1.5937 + 1.5938 + <ol> 1.5939 + <li> 1.5940 + Both the starting and ending gradient must be expressed with the same function. 1.5941 + (For example, you can transition from a <a class=css data-link-type=maybe href=#funcdef-linear-gradient>linear-gradient()</a> to a <a class=css data-link-type=maybe href=#funcdef-linear-gradient>linear-gradient()</a>, 1.5942 + but not from a <a class=css data-link-type=maybe href=#funcdef-linear-gradient>linear-gradient()</a> to a <a class=css data-link-type=maybe href=#funcdef-radial-gradient>radial-gradient()</a> or a <a class=css data-link-type=maybe href=#funcdef-repeating-linear-gradient>repeating-linear-gradient()</a>.) 1.5943 + 1.5944 + <li> 1.5945 + Both the starting and ending gradient must have the same number of <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#color-stop-type><var><color-stop></var></a>s. 1.5946 + For this purpose, a repeating gradient is considered to have infinite <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#color-stop-type><var><color-stop></var></a>s, 1.5947 + and thus all repeating gradients have the same number of <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#color-stop-type><var><color-stop></var></a>s. 1.5948 + (Note that one may pad a gradient with additional <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#color-stop-type><var><color-stop></var></a>s placed atop each other, 1.5949 + if necessary to make two gradients have the same number of <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#color-stop-type><var><color-stop></var></a>s.) 1.5950 + </ol> 1.5951 + 1.5952 +<p> If the two gradients satisfy both of those constraints, 1.5953 + they must be interpolated as described below. 1.5954 + If not, they must be interpolated as a generic <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type><var><image></var></a>. 1.5955 + 1.5956 + <ol> 1.5957 + <li> 1.5958 + Convert both the start and end gradients to their explicit forms: 1.5959 + 1.5960 + <dl> 1.5961 + <dt>For linear gradients: 1.5962 + <dd> 1.5963 + <ul> 1.5964 + <li> 1.5965 + If the direction is specified as an <a class=production data-link-type=type href=#typedef-angle><var><angle></var></a>, 1.5966 + it is already in its explicit form. 1.5967 + 1.5968 + <li> 1.5969 + Otherwise, 1.5970 + change its direction to an <a class=production data-link-type=type href=#typedef-angle><var><angle></var></a> in [<span class=css data-link-type=maybe>0deg</span>,<span class=css data-link-type=maybe>360deg</span>) 1.5971 + that would produce an equivalent rendering. 1.5972 + 1.5973 +<p> If both the start and end gradients had their direction specified with keywords, 1.5974 + and the absolute difference between the angles their directions mapped to is greater than 180deg, 1.5975 + add 360deg to the direction of the gradient with the smaller angle. 1.5976 + <span class=note>This ensures that a transition from, for example, 1.5977 + "to left" (270deg) to "to top" (0deg) 1.5978 + rotates the gradient a quarter-turn clockwise, 1.5979 + as expected, 1.5980 + rather than rotating three-quarters of a turn counter-clockwise.</span> 1.5981 + </ul> 1.5982 + 1.5983 + 1.5984 + <dt>For radial gradients: 1.5985 + <dd> 1.5986 + <ul> 1.5987 + <li> 1.5988 + If the size is specified as two <a class=production data-link-type=type href=#typedef-length><var><length></var></a>s or <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage><var><percentage></var></a>s, 1.5989 + it is already in its explicit form. 1.5990 + 1.5991 + <li> 1.5992 + Otherwise, the size must be changed to a pair of <a class=production data-link-type=type href=#typedef-length><var><length></var></a>s 1.5993 + that would produce an equivalent ending-shape. 1.5994 + If the <a class=production data-link-type=type href=#typedef-ending-shape><var><ending-shape></var></a> was specified as <span class=css data-link-type=maybe>circle</span>, 1.5995 + change it to <span class=css data-link-type=maybe>ellipse</span>. 1.5996 + </ul> 1.5997 + </dl> 1.5998 + 1.5999 + 1.6000 + <li> 1.6001 + Interpolate each component and color-stop of the gradients independently. 1.6002 + For linear gradients, 1.6003 + the only component is the angle. 1.6004 + For radial gradients, 1.6005 + the components are the horizontal and vertical position of the center 1.6006 + and the horizontal and vertical axis lengths. 1.6007 + 1.6008 + <li> 1.6009 + To interpolate a color-stop, 1.6010 + first match each color-stop in the start gradient 1.6011 + to the corresponding color-stop at the same index in the end gradient. 1.6012 + For repeating gradients, 1.6013 + the first specified color-stop in the start and end gradients 1.6014 + are considered to be at the same index, 1.6015 + and all other color-stops following and preceding are indexed appropriately. 1.6016 + Then, for each pair of color-stops, 1.6017 + interpolate the position and color independently. 1.6018 + </ol> 1.6019 + 1.6020 +<!-- 1.6021 SSSSSSSSSSSSSSS iiii lllllll iiii iiii 1.6022 SS:::::::::::::::S i::::i l:::::l i::::i i::::i 1.6023 S:::::SSSSSS::::::S iiii l:::::l iiii iiii 1.6024 @@ -3774,34 +2838,33 @@ 1.6025 gggggg 1.6026 --> 1.6027 1.6028 - <h2 id=serialization><span class=secno>8. </span> Serialization</h2> 1.6029 - 1.6030 - <p> This section describes the serialization of all new properties and 1.6031 - value types introduced in this specification, for the purpose of 1.6032 - interfacing with the CSS Object Model <a href="#CSSOM" 1.6033 - rel=biblioentry>[CSSOM]<!--{{CSSOM}}--></a>. 1.6034 - 1.6035 - <p> To serialize any function defined in this module, serialize it per its 1.6036 - individual grammar, in the order its grammar is written in, omitting 1.6037 - components when possible without changing the meaning, joining 1.6038 - space-separated tokens with a single space, and following each serialized 1.6039 - comma with a single space. 1.6040 - 1.6041 - <p> For ‘<code class=css>cross-fade()</code>’, always serialize the 1.6042 - <var><percentage></var>. 1.6043 - 1.6044 - <div class=example> 1.6045 - <p> For example, a gradient specified as: 1.6046 - 1.6047 - <pre>Linear-Gradient( to bottom, red 0%,yellow,black 100px)</pre> 1.6048 - 1.6049 - <p> ...must serialize as: 1.6050 - 1.6051 - <pre>linear-gradient(red, yellow, black 100px)</pre> 1.6052 - </div> 1.6053 - 1.6054 - <p class=issue> The serialization of <var><color></var> is still 1.6055 - undefined. <!-- 1.6056 +<h2 data-level=8 id=serialization><span class=secno>8 </span><span class=content> 1.6057 +Serialization</span><a class=section-link href=#serialization>§</a></h2> 1.6058 + 1.6059 +<p> This section describes the serialization of all new properties and value types introduced in this specification, 1.6060 + for the purpose of interfacing with the CSS Object Model <a data-biblio-type=informative data-link-type=biblio href=#cssom title=CSSOM>[CSSOM]</a>. 1.6061 + 1.6062 +<p> To serialize any function defined in this module, 1.6063 + serialize it per its individual grammar, 1.6064 + in the order its grammar is written in, 1.6065 + omitting components when possible without changing the meaning, 1.6066 + joining space-separated tokens with a single space, 1.6067 + and following each serialized comma with a single space. 1.6068 + 1.6069 +<p> For <a class=css data-link-type=maybe href=#funcdef-cross-fade>cross-fade()</a>, 1.6070 + always serialize the <a class=production data-link-type=type href=http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage><var><percentage></var></a>. 1.6071 + 1.6072 + <div class=example> 1.6073 + 1.6074 +<p> For example, a gradient specified as: 1.6075 + 1.6076 +<pre>Linear-Gradient( to bottom, red 0%,yellow,black 100px)</pre> 1.6077 +<p> must serialize as: 1.6078 + 1.6079 +<pre>linear-gradient(red, yellow, black 100px)</pre> </div> 1.6080 + 1.6081 + 1.6082 +<!-- 1.6083 dddddddd 1.6084 TTTTTTTTTTTTTTTTTTTTTTThhhhhhh EEEEEEEEEEEEEEEEEEEEEE d::::::d 1.6085 T:::::::::::::::::::::Th:::::h E::::::::::::::::::::E d::::::d 1.6086 @@ -3821,768 +2884,246 @@ 1.6087 TTTTTTTTTTT hhhhhhh hhhhhhh eeeeeeeeeeeeee EEEEEEEEEEEEEEEEEEEEEE nnnnnn nnnnnn ddddddddd ddddd 1.6088 --> 1.6089 1.6090 - <h2 id=changes><span class=secno>9. </span> Changes since Images 3</h2> 1.6091 - 1.6092 - <ul> 1.6093 - <li>added ‘<code class=property>x</code>’ unit (or rather, put in an 1.6094 - issue about adding it as a general alias for dppx) 1.6095 - 1.6096 - <li>restored the ltr/rtl keywords in image(), but in a different place 1.6097 - 1.6098 - <li>added image-set() 1.6099 - 1.6100 - <li>re-added element() 1.6101 - 1.6102 - <li>re-added cross-fade() 1.6103 - <ul> 1.6104 - <li>changed the syntax a bit to allow interesting things 1.6105 - </ul> 1.6106 - 1.6107 - <li>added issue for focus-moving to radial-gradient() 1.6108 - 1.6109 - <li>added conic-gradient() 1.6110 - 1.6111 - <li>added two-position syntax for color-stops 1.6112 - 1.6113 - <li>allowed the color to be omitted from color-stops 1.6114 - 1.6115 - <li>loosened the syntax for color-stops to allow color/length in either 1.6116 - order 1.6117 - 1.6118 - <li>added image-orientation:from-image 1.6119 - 1.6120 - <li>re-added image-rendering 1.6121 - 1.6122 - <li>added interpolation section 1.6123 - 1.6124 - <li>added serialization section 1.6125 - </ul> 1.6126 - 1.6127 - <h2 id=conformance><span class=secno>10. </span> Conformance</h2> 1.6128 - 1.6129 - <h3 id=conventions><span class=secno>10.1. </span> Document Conventions</h3> 1.6130 - 1.6131 - <p>Conformance requirements are expressed with a combination of descriptive 1.6132 - assertions and RFC 2119 terminology. The key words “MUST”, “MUST 1.6133 - NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, 1.6134 - “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the 1.6135 - normative parts of this document are to be interpreted as described in RFC 1.6136 - 2119. However, for readability, these words do not appear in all uppercase 1.6137 - letters in this specification. 1.6138 - 1.6139 - <p>All of the text of this specification is normative except sections 1.6140 - explicitly marked as non-normative, examples, and notes. <a 1.6141 - href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a> 1.6142 - 1.6143 - <p>Examples in this specification are introduced with the words “for 1.6144 - example” or are set apart from the normative text with 1.6145 - <code>class="example"</code>, like this: 1.6146 - 1.6147 - <div class=example> 1.6148 - <p>This is an example of an informative example. 1.6149 - </div> 1.6150 - 1.6151 - <p>Informative notes begin with the word “Note” and are set apart from 1.6152 - the normative text with <code>class="note"</code>, like this: 1.6153 - 1.6154 - <p class=note>Note, this is an informative note. 1.6155 - 1.6156 - <h3 id=conformance-classes><span class=secno>10.2. </span> Conformance 1.6157 - Classes</h3> 1.6158 - 1.6159 - <p>Conformance to CSS Image Values and Replaced Content Module Level 4 is 1.6160 - defined for three conformance classes: 1.6161 - 1.6162 - <dl> 1.6163 - <dt><dfn id=style-sheet title="style sheet!!as conformance class">style 1.6164 - sheet</dfn> 1.6165 - 1.6166 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS 1.6167 - style sheet</a>. 1.6168 - 1.6169 - <dt><dfn id=renderer>renderer</dfn> 1.6170 - 1.6171 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 1.6172 - that interprets the semantics of a style sheet and renders documents that 1.6173 - use them. 1.6174 - 1.6175 - <dt><dfn id=authoring-tool>authoring tool</dfn> 1.6176 - 1.6177 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 1.6178 - that writes a style sheet. 1.6179 - </dl> 1.6180 - 1.6181 - <p>A style sheet is conformant to CSS Image Values and Replaced Content 1.6182 - Module Level 4 if all of its statements that use syntax defined in this 1.6183 - module are valid according to the generic CSS grammar and the individual 1.6184 - grammars of each feature defined in this module. 1.6185 - 1.6186 - <p>A renderer is conformant to CSS Image Values and Replaced Content Module 1.6187 - Level 4 if, in addition to interpreting the style sheet as defined by the 1.6188 - appropriate specifications, it supports all the features defined by CSS 1.6189 - Image Values and Replaced Content Module Level 4 by parsing them correctly 1.6190 - and rendering the document accordingly. However, the inability of a UA to 1.6191 - correctly render a document due to limitations of the device does not make 1.6192 - the UA non-conformant. (For example, a UA is not required to render color 1.6193 - on a monochrome monitor.) 1.6194 - 1.6195 - <p>An authoring tool is conformant to CSS Image Values and Replaced Content 1.6196 - Module Level 4 if it writes style sheets that are syntactically correct 1.6197 - according to the generic CSS grammar and the individual grammars of each 1.6198 - feature in this module, and meet all other conformance requirements of 1.6199 - style sheets as described in this module. 1.6200 - 1.6201 - <h3 id=partial><span class=secno>10.3. </span> Partial Implementations</h3> 1.6202 - 1.6203 - <p>So that authors can exploit the forward-compatible parsing rules to 1.6204 - assign fallback values, CSS renderers <strong>must</strong> treat as 1.6205 - invalid (and <a 1.6206 - href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as 1.6207 - appropriate</a>) any at-rules, properties, property values, keywords, and 1.6208 - other syntactic constructs for which they have no usable level of support. 1.6209 - In particular, user agents <strong>must not</strong> selectively ignore 1.6210 - unsupported component values and honor supported values in a single 1.6211 - multi-value property declaration: if any value is considered invalid (as 1.6212 - unsupported values must be), CSS requires that the entire declaration be 1.6213 - ignored. 1.6214 - 1.6215 - <h3 id=experimental><span class=secno>10.4. </span> Experimental 1.6216 - Implementations</h3> 1.6217 - 1.6218 - <p>To avoid clashes with future CSS features, the CSS2.1 specification 1.6219 - reserves a <a 1.6220 - href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed 1.6221 - syntax</a> for proprietary and experimental extensions to CSS. 1.6222 - 1.6223 - <p>Prior to a specification reaching the Candidate Recommendation stage in 1.6224 - the W3C process, all implementations of a CSS feature are considered 1.6225 - experimental. The CSS Working Group recommends that implementations use a 1.6226 - vendor-prefixed syntax for such features, including those in W3C Working 1.6227 - Drafts. This avoids incompatibilities with future changes in the draft. 1.6228 - 1.6229 - <h3 id=testing><span class=secno>10.5. </span>Non-Experimental 1.6230 - Implementations</h3> 1.6231 - 1.6232 - <p>Once a specification reaches the Candidate Recommendation stage, 1.6233 - non-experimental implementations are possible, and implementors should 1.6234 - release an unprefixed implementation of any CR-level feature they can 1.6235 - demonstrate to be correctly implemented according to spec. 1.6236 - 1.6237 - <p>To establish and maintain the interoperability of CSS across 1.6238 - implementations, the CSS Working Group requests that non-experimental CSS 1.6239 - renderers submit an implementation report (and, if necessary, the 1.6240 - testcases used for that implementation report) to the W3C before releasing 1.6241 - an unprefixed implementation of any CSS features. Testcases submitted to 1.6242 - W3C are subject to review and correction by the CSS Working Group. 1.6243 - 1.6244 - <p>Further information on submitting testcases and implementation reports 1.6245 - can be found from on the CSS Working Group's website at <a 1.6246 - href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. 1.6247 - Questions should be directed to the <a 1.6248 - href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> 1.6249 - mailing list. 1.6250 - 1.6251 - <h3 id=cr-exit-criteria><span class=secno>10.6. </span> CR Exit Criteria</h3> 1.6252 - 1.6253 - <p>For this specification to be advanced to Proposed Recommendation, there 1.6254 - must be at least two independent, interoperable implementations of each 1.6255 - feature. Each feature may be implemented by a different set of products, 1.6256 - there is no requirement that all features be implemented by a single 1.6257 - product. For the purposes of this criterion, we define the following 1.6258 - terms: 1.6259 - 1.6260 - <dl> 1.6261 - <dt>independent 1.6262 - 1.6263 - <dd>each implementation must be developed by a different party and cannot 1.6264 - share, reuse, or derive from code used by another qualifying 1.6265 - implementation. Sections of code that have no bearing on the 1.6266 - implementation of this specification are exempt from this requirement. 1.6267 - 1.6268 - <dt>interoperable 1.6269 - 1.6270 - <dd>passing the respective test case(s) in the official CSS test suite, 1.6271 - or, if the implementation is not a Web browser, an equivalent test. Every 1.6272 - relevant test in the test suite should have an equivalent test created if 1.6273 - such a user agent (UA) is to be used to claim interoperability. In 1.6274 - addition if such a UA is to be used to claim interoperability, then there 1.6275 - must one or more additional UAs which can also pass those equivalent 1.6276 - tests in the same way for the purpose of interoperability. The equivalent 1.6277 - tests must be made publicly available for the purposes of peer review. 1.6278 - 1.6279 - <dt>implementation 1.6280 - 1.6281 - <dd>a user agent which: 1.6282 - <ol class=inline> 1.6283 - <li>implements the specification. 1.6284 - 1.6285 - <li>is available to the general public. The implementation may be a 1.6286 - shipping product or other publicly available version (i.e., beta 1.6287 - version, preview release, or “nightly build”). Non-shipping product 1.6288 - releases must have implemented the feature(s) for a period of at least 1.6289 - one month in order to demonstrate stability. 1.6290 - 1.6291 - <li>is not experimental (i.e., a version specifically designed to pass 1.6292 - the test suite and is not intended for normal usage going forward). 1.6293 - </ol> 1.6294 - </dl> 1.6295 - 1.6296 - <p>The specification will remain Candidate Recommendation for at least six 1.6297 - months. 1.6298 - 1.6299 - <h2 class=no-num id=acknowledgments>Acknowledgments</h2> 1.6300 - 1.6301 - <p>Thanks to the Webkit team, Brad Kemper, Brian Manthos, and Alan Gresley 1.6302 - for their contributions to the definition of gradients; to Melinda Grant 1.6303 - for her work on ‘<a href="#object-fit"><code 1.6304 - class=property>object-fit</code></a>’, ‘<a 1.6305 - href="#object-position"><code 1.6306 - class=property>object-position</code></a>’, and ‘<a 1.6307 - href="#image-orientation"><code 1.6308 - class=property>image-orientation</code></a>’; 1.6309 - <!-- to Robert O'Callahan for the definition of ''element()''; --> to 1.6310 - Michael Day, Håkon Lie, and Shinyu Murakami for ‘<a 1.6311 - href="#image-resolution"><code class=css>image-resolution</code></a>’; 1.6312 - and to L. David Baron, Kang-Hao Lu, Leif Arne Storset, Erik Dahlstrom, and 1.6313 - Øyvind Stenhaug for their careful review, comments, and corrections. 1.6314 - 1.6315 - <h2 class=no-num id=references>References</h2> 1.6316 - 1.6317 - <h3 class=no-num id=normative-references>Normative references</h3> 1.6318 - <!--begin-normative--> 1.6319 - <!-- Sorted by label --> 1.6320 - 1.6321 - <dl class=bibliography> 1.6322 - <dd style="display: none"><!-- keeps the doc valid if the DL is empty --> 1.6323 - <!----> 1.6324 - 1.6325 - <dt id=CSS21>[CSS21] 1.6326 - 1.6327 - <dd>Bert Bos; et al. <a 1.6328 - href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style 1.6329 - Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June 1.6330 - 2011. W3C Recommendation. URL: <a 1.6331 - href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a> 1.6332 - </dd> 1.6333 - <!----> 1.6334 - 1.6335 - <dt id=CSS3-TRANSFORMS>[CSS3-TRANSFORMS] 1.6336 - 1.6337 - <dd>Simon Fraser; et al. <a 1.6338 - href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/"><cite>CSS 1.6339 - Transforms.</cite></a> 11 September 2012. W3C Working Draft. (Work in 1.6340 - progress.) URL: <a 1.6341 - href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/">http://www.w3.org/TR/2012/WD-css3-transforms-20120911/</a> 1.6342 - </dd> 1.6343 - <!----> 1.6344 - 1.6345 - <dt id=CSS3VAL>[CSS3VAL] 1.6346 - 1.6347 - <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a 1.6348 - href="http://www.w3.org/TR/2012/CR-css3-values-20120828/"><cite>CSS 1.6349 - Values and Units Module Level 3.</cite></a> 28 August 2012. W3C Candidate 1.6350 - Recommendation. (Work in progress.) URL: <a 1.6351 - href="http://www.w3.org/TR/2012/CR-css3-values-20120828/">http://www.w3.org/TR/2012/CR-css3-values-20120828/</a> 1.6352 - </dd> 1.6353 - <!----> 1.6354 - 1.6355 - <dt id=MEDIA-FRAGS>[MEDIA-FRAGS] 1.6356 - 1.6357 - <dd>Raphaël Troncy; et al. <a 1.6358 - href="http://www.w3.org/TR/2012/REC-media-frags-20120925/"><cite>Media 1.6359 - Fragments URI 1.0 (basic).</cite></a> 25 September 2012. W3C 1.6360 - Recommendation. URL: <a 1.6361 - href="http://www.w3.org/TR/2012/REC-media-frags-20120925/">http://www.w3.org/TR/2012/REC-media-frags-20120925/</a> 1.6362 - </dd> 1.6363 - <!----> 1.6364 - 1.6365 - <dt id=RFC2119>[RFC2119] 1.6366 - 1.6367 - <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key 1.6368 - words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet 1.6369 - RFC 2119. URL: <a 1.6370 - href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a> 1.6371 - </dd> 1.6372 - <!----> 1.6373 - 1.6374 - <dt id=SELECT>[SELECT] 1.6375 - 1.6376 - <dd>Tantek Çelik; et al. <a 1.6377 - href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/"><cite>Selectors 1.6378 - Level 3.</cite></a> 29 September 2011. W3C Recommendation. URL: <a 1.6379 - href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/">http://www.w3.org/TR/2011/REC-css3-selectors-20110929/</a> 1.6380 - </dd> 1.6381 - <!----> 1.6382 - </dl> 1.6383 - <!--end-normative--> 1.6384 - 1.6385 - <h3 class=no-num id=other-references>Other references</h3> 1.6386 - <!--begin-informative--> 1.6387 - <!-- Sorted by label --> 1.6388 - 1.6389 - <dl class=bibliography> 1.6390 - <dd style="display: none"><!-- keeps the doc valid if the DL is empty --> 1.6391 - <!----> 1.6392 - 1.6393 - <dt id=CSS3-2D-TRANSFORMS>[CSS3-2D-TRANSFORMS] 1.6394 - 1.6395 - <dd>Simon Fraser; et al. <a 1.6396 - href="http://www.w3.org/TR/2011/WD-css3-2d-transforms-20111215/"><cite>CSS 1.6397 - 2D Transforms.</cite></a> 15 December 2011. W3C Working Draft. (Work in 1.6398 - progress.) URL: <a 1.6399 - href="http://www.w3.org/TR/2011/WD-css3-2d-transforms-20111215/">http://www.w3.org/TR/2011/WD-css3-2d-transforms-20111215/</a> 1.6400 - </dd> 1.6401 - <!----> 1.6402 - 1.6403 - <dt id=CSS3BG>[CSS3BG] 1.6404 - 1.6405 - <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a 1.6406 - href="http://www.w3.org/TR/2012/CR-css3-background-20120724/"><cite>CSS 1.6407 - Backgrounds and Borders Module Level 3.</cite></a> 24 July 2012. W3C 1.6408 - Candidate Recommendation. (Work in progress.) URL: <a 1.6409 - href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a> 1.6410 - </dd> 1.6411 - <!----> 1.6412 - 1.6413 - <dt id=CSS3COLOR>[CSS3COLOR] 1.6414 - 1.6415 - <dd>Tantek Çelik; Chris Lilley; L. David Baron. <a 1.6416 - href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS Color 1.6417 - Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: <a 1.6418 - href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a> 1.6419 - </dd> 1.6420 - <!----> 1.6421 - 1.6422 - <dt id=CSS3PAGE>[CSS3PAGE] 1.6423 - 1.6424 - <dd>Melinda Grant; et al. <a 1.6425 - href="http://www.w3.org/TR/2013/WD-css3-page-20130314/"><cite>CSS Paged 1.6426 - Media Module Level 3.</cite></a> 14 March 2013. W3C Working Draft. (Work 1.6427 - in progress.) URL: <a 1.6428 - href="http://www.w3.org/TR/2013/WD-css3-page-20130314/">http://www.w3.org/TR/2013/WD-css3-page-20130314/</a> 1.6429 - </dd> 1.6430 - <!----> 1.6431 - 1.6432 - <dt id=CSSOM>[CSSOM] 1.6433 - 1.6434 - <dd>Anne van Kesteren. <a 1.6435 - href="http://www.w3.org/TR/2011/WD-cssom-20110712/"><cite>CSSOM.</cite></a> 1.6436 - 12 July 2011. W3C Working Draft. (Work in progress.) URL: <a 1.6437 - href="http://www.w3.org/TR/2011/WD-cssom-20110712/">http://www.w3.org/TR/2011/WD-cssom-20110712/</a> 1.6438 - </dd> 1.6439 - <!----> 1.6440 - 1.6441 - <dt id=PORTERDUFF>[PORTERDUFF] 1.6442 - 1.6443 - <dd>Thomas Porter; Tom Duff. “Compositing digital images” in: 1.6444 - <cite>ACM SIGGRAPH Computer Graphics.</cite> Volume 18. Issue 3. pp. 1.6445 - 253–259. ACM. July 1984. New York, NY, USA. ISSN 0097-8930</dd> 1.6446 - <!----> 1.6447 - 1.6448 - <dt id=SMIL10>[SMIL10] 1.6449 - 1.6450 - <dd>Philipp Hoschka. <a 1.6451 - href="http://www.w3.org/TR/1998/REC-smil-19980615"><cite>Synchronized 1.6452 - Multimedia Integration Language (SMIL) 1.0 Specification.</cite></a> 15 1.6453 - June 1998. W3C Recommendation. URL: <a 1.6454 - href="http://www.w3.org/TR/1998/REC-smil-19980615">http://www.w3.org/TR/1998/REC-smil-19980615</a> 1.6455 - </dd> 1.6456 - <!----> 1.6457 - 1.6458 - <dt id=SVG11>[SVG11] 1.6459 - 1.6460 - <dd>Erik Dahlström; et al. <a 1.6461 - href="http://www.w3.org/TR/2011/REC-SVG11-20110816/"><cite>Scalable 1.6462 - Vector Graphics (SVG) 1.1 (Second Edition).</cite></a> 16 August 2011. 1.6463 - W3C Recommendation. URL: <a 1.6464 - href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">http://www.w3.org/TR/2011/REC-SVG11-20110816/</a> 1.6465 - </dd> 1.6466 - <!----> 1.6467 - </dl> 1.6468 - <!--end-informative--> 1.6469 - <!-- 1.6470 -<h3 class="no-num" id="changes">Changes Since Last Call</h3> 1.6471 - 1.6472 - <p>Major changes include: 1.6473 - <ul> 1.6474 - <li>The ''element()'' feature has been deferred to Level 4. 1.6475 - <li>The directional images feature (''ltr''/''rtl'' annotations in ''image()'') 1.6476 - has been deferred to Level 4 to address some design-level feedback. 1.6477 - <li>Images referenced with unsupported URL fragment syntax are now considered 1.6478 - invalid (and trigger fallback) within ''image()''. 1.6479 - <li>The 'object-fit' property no longer resizes the element's content box in 1.6480 - any cases. 1.6481 - <li>The 'image-orientation' property is now inherited. 1.6482 + 1.6483 +<h2 data-level=9 id=changes><span class=secno>9 </span><span class=content> 1.6484 +Changes since Images 3</span><a class=section-link href=#changes>§</a></h2> 1.6485 + 1.6486 +<p> <ul> 1.6487 + <li>added <span class=css data-link-type=maybe>x</span> unit (or rather, put in an issue about adding it as a general alias for <span class=css data-link-type=maybe>dppx</span>) 1.6488 + <li>restored the ltr/rtl keywords in image(), but in a different place 1.6489 + <li>added <a class=css data-link-type=maybe href=#funcdef-image-set>image-set()</a> 1.6490 + <li>re-added <a class=css data-link-type=maybe href=#funcdef-element>element()</a> 1.6491 + <li>re-added <a class=css data-link-type=maybe href=#funcdef-cross-fade>cross-fade()</a> 1.6492 + <ul> 1.6493 + <li>changed the syntax a bit to allow interesting things 1.6494 + </ul> 1.6495 + <li>added issue for focus-moving to <a class=css data-link-type=maybe href=#funcdef-radial-gradient>radial-gradient()</a> 1.6496 + <li>added <a class=css data-link-type=maybe href=#funcdef-conic-gradient>conic-gradient()</a> 1.6497 + <li>added two-position syntax for color-stops 1.6498 + <li>allowed the color to be omitted from color-stops 1.6499 + <li>loosened the syntax for color-stops to allow color/length in either order 1.6500 + <li>added <span class=css data-link-type=maybe>image-orientation:from-image</span> 1.6501 + <li>re-added <a class=property data-link-type=propdesc href=#propdef-image-rendering title=image-rendering>image-rendering</a> 1.6502 + <li>added interpolation section 1.6503 + <li>added serialization section 1.6504 </ul> 1.6505 - 1.6506 - <p>Significant details updated: 1.6507 - 1.6508 - <ul> 1.6509 - <li>There is now a definition for <i>invalid images</i>, which trigger fallback 1.6510 - in the ''image()'' notation. 1.6511 - <li>Clarified that media fragments are only required to be supported within 1.6512 - ''image()'' in order to satisfy the prerequisite for supporting ''image()''. 1.6513 - <li>Defined how to determine the closeness of two aspect ratios (used in 1.6514 - the definition of <i>intrinsic dimensions</i>). 1.6515 - <li>Corrected error in which 'image-orientation' was applied after CSS 1.6516 - transforms. 1.6517 - <li>The 'object-fit' and 'object-position' properties may no longer be 1.6518 - aliased to 'image-fit' and 'image-position'. A future edition of the 1.6519 - <a href="http://www.w3.org/TR/css-print/">CSS Print Profile</a> may allow 1.6520 - this for printer implementations, however. 1.6521 - </ul> 1.6522 - 1.6523 - <p>There were also many clarifications and several sections were rearranged to 1.6524 - make them easier to read. 1.6525 - 1.6526 - <p>The <a href="http://dev.w3.org/csswg/css4-images/issues-lc-2012">Disposition 1.6527 - of Last Call Comments</a> is available. 1.6528 ---> 1.6529 - 1.6530 - <h2 class=no-num id=index>Index</h2> 1.6531 - <!--begin-index--> 1.6532 - 1.6533 - <ul class=indexlist> 1.6534 - <li><angular-color-stop>, <a href="#ltangular-color-stop" 1.6535 - title="section 4.5."><strong>4.5.</strong></a> 1.6536 - 1.6537 - <li><angular-color-stop-list>, <a href="#ltangular-color-stop-list" 1.6538 - title="section 4.5."><strong>4.5.</strong></a> 1.6539 - 1.6540 - <li>authoring tool, <a href="#authoring-tool" 1.6541 - title="section 10.2."><strong>10.2.</strong></a> 1.6542 - 1.6543 - <li>auto, <a href="#image-rendering-auto" 1.6544 - title="section 6.3."><strong>6.3.</strong></a> 1.6545 - 1.6546 - <li><cap-angular-color-stop>, <a href="#ltcap-angular-color-stop" 1.6547 - title="section 4.5."><strong>4.5.</strong></a> 1.6548 - 1.6549 - <li><cap-linear-color-stop>, <a href="#ltcap-linear-color-stop" 1.6550 - title="section 4.5."><strong>4.5.</strong></a> 1.6551 - 1.6552 - <li>‘<code class=css>closest-corner</code>’, <a 1.6553 - href="#radial-closest-corner" 1.6554 - title="section 4.2.1."><strong>4.2.1.</strong></a> 1.6555 - 1.6556 - <li>‘<code class=css>closest-side</code>’, <a 1.6557 - href="#radial-closest-side" 1.6558 - title="section 4.2.1."><strong>4.2.1.</strong></a> 1.6559 - 1.6560 - <li>color stop, <a href="#color-stop" 1.6561 - title="section 4.5."><strong>4.5.</strong></a> 1.6562 - 1.6563 - <li><color-stop-angle>, <a href="#ltcolor-stop-angle" 1.6564 - title="section 4.5."><strong>4.5.</strong></a> 1.6565 - 1.6566 - <li><color-stop-length>, <a href="#color-stop-lenh" 1.6567 - title="section 4.5."><strong>4.5.</strong></a> 1.6568 - 1.6569 - <li><color-stop-list>, <a href="#ltcolor-stop-list" 1.6570 - title="section 4.5."><strong>4.5.</strong></a> 1.6571 - 1.6572 - <li>color stop list, <a href="#color-stop-list" 1.6573 - title="section 4.5."><strong>4.5.</strong></a> 1.6574 - 1.6575 - <li>concrete object size, <a href="#concrete-object-size" 1.6576 - title="section 5.1."><strong>5.1.</strong></a> 1.6577 - 1.6578 - <li><conic-gradient>, <a href="#conic-gradient-type" 1.6579 - title="section 4.3.1."><strong>4.3.1.</strong></a> 1.6580 - 1.6581 - <li>constraint rectangle, <a href="#constraint-rectangle" 1.6582 - title="section 5.3.2."><strong>5.3.2.</strong></a> 1.6583 - 1.6584 - <li>contain constraint, <a href="#contain-constraint" 1.6585 - title="section 5.3.2."><strong>5.3.2.</strong></a> 1.6586 - 1.6587 - <li>cover constraint, <a href="#cover-constraint" 1.6588 - title="section 5.3.2."><strong>5.3.2.</strong></a> 1.6589 - 1.6590 - <li>crisp-edges, <a href="#image-rendering-crisp-edges" 1.6591 - title="section 6.3."><strong>6.3.</strong></a> 1.6592 - 1.6593 - <li>decorated bounding box, <a href="#decorated-bounding-box" 1.6594 - title="section 3.4."><strong>3.4.</strong></a> 1.6595 - 1.6596 - <li>default object size, <a href="#default-object-size" 1.6597 - title="section 5.1."><strong>5.1.</strong></a> 1.6598 - 1.6599 - <li>default sizing algorithm, <a href="#default-sizing-algorithm" 1.6600 - title="section 5.3.1."><strong>5.3.1.</strong></a> 1.6601 - 1.6602 - <li><element-image>, <a href="#element-image-type" 1.6603 - title="section 3.4."><strong>3.4.</strong></a> 1.6604 - 1.6605 - <li>element-not-rendered, <a href="#element-not-rendered" 1.6606 - title="section 3.4."><strong>3.4.</strong></a> 1.6607 - 1.6608 - <li>ending point, <a href="#ending-point" 1.6609 - title="section 4.5."><strong>4.5.</strong></a> 1.6610 - 1.6611 - <li><ending-shape>, <a href="#shape" 1.6612 - title="section 4.2.1."><strong>4.2.1.</strong></a> 1.6613 - 1.6614 - <li>ending shape, <a href="#ending-shape" 1.6615 - title="section 4.2."><strong>4.2.</strong></a> 1.6616 - 1.6617 - <li>‘<code class=css>farthest-corner</code>’, <a 1.6618 - href="#radial-farthest-corner" 1.6619 - title="section 4.2.1."><strong>4.2.1.</strong></a> 1.6620 - 1.6621 - <li>‘<code class=css>farthest-side</code>’, <a 1.6622 - href="#radial-farthest-side" 1.6623 - title="section 4.2.1."><strong>4.2.1.</strong></a> 1.6624 - 1.6625 - <li>from-image, <a href="#image-orientation-from-image" 1.6626 - title="section 6.2."><strong>6.2.</strong></a> 1.6627 - 1.6628 - <li><gradient>, <a href="#gradient-type" 1.6629 - title="section 4."><strong>4.</strong></a> 1.6630 - 1.6631 - <li>gradient-average-color, <a 1.6632 - href="#find-the-average-color-of-a-gradient" 1.6633 - title="section 4.4."><strong>4.4.</strong></a> 1.6634 - 1.6635 - <li>gradient box, <a href="#gradient-box" 1.6636 - title="section 4."><strong>4.</strong></a> 1.6637 - 1.6638 - <li>gradient line, <a href="#gradient-line" 1.6639 - title="section 4.1.1."><strong>4.1.1.</strong></a>, <a 1.6640 - href="#gradient-line0" title="section 4.5."><strong>4.5.</strong></a> 1.6641 - 1.6642 - <li><image>, <a href="#image-type" 1.6643 - title="section 3."><strong>3.</strong></a> 1.6644 - 1.6645 - <li><image-combination>, <a href="#ltimage-combination" 1.6646 - title="section 3.5."><strong>3.5.</strong></a> 1.6647 - 1.6648 - <li><image-list>, <a href="#image-list-type" 1.6649 - title="section 3.2."><strong>3.2.</strong></a> 1.6650 - 1.6651 - <li>image-orientation, <a href="#image-orientation" 1.6652 - title="section 6.2."><strong>6.2.</strong></a> 1.6653 - 1.6654 - <li>image-rendering, <a href="#image-rendering" 1.6655 - title="section 6.3."><strong>6.3.</strong></a> 1.6656 - 1.6657 - <li>image-resolution, <a href="#image-resolution" 1.6658 - title="section 6.1."><strong>6.1.</strong></a> 1.6659 - 1.6660 - <li><image-set>, <a href="#image-set-type" 1.6661 - title="section 3.3."><strong>3.3.</strong></a> 1.6662 - 1.6663 - <li><image-set-decl>, <a href="#image-set-decl-type" 1.6664 - title="section 3.3."><strong>3.3.</strong></a> 1.6665 - 1.6666 - <li><image-src>, <a href="#image-src-type" 1.6667 - title="section 3.2."><strong>3.2.</strong></a> 1.6668 - 1.6669 - <li><image-tags>, <a href="#image-tags-type" 1.6670 - title="section 3.2."><strong>3.2.</strong></a> 1.6671 - 1.6672 - <li>intrinsic aspect ratio, <a href="#intrinsic-aspect-ratio" 1.6673 - title="section 5.1."><strong>5.1.</strong></a> 1.6674 - 1.6675 - <li>intrinsic dimensions, <a href="#intrinsic-dimensions" 1.6676 - title="section 5.1."><strong>5.1.</strong></a> 1.6677 - 1.6678 - <li>intrinsic height, <a href="#intrinsic-height" 1.6679 - title="section 5.1."><strong>5.1.</strong></a> 1.6680 - 1.6681 - <li>intrinsic resolution, <a href="#intrinsic-resolution" 1.6682 - title="section 6.1."><strong>6.1.</strong></a> 1.6683 - 1.6684 - <li>intrinsic width, <a href="#intrinsic-width" 1.6685 - title="section 5.1."><strong>5.1.</strong></a> 1.6686 - 1.6687 - <li>invalid image, <a href="#invalid-image" 1.6688 - title="section 3."><strong>3.</strong></a> 1.6689 - 1.6690 - <li><length>, <a href="#radial-size-circle" 1.6691 - title="section 4.2.1."><strong>4.2.1.</strong></a> 1.6692 - 1.6693 - <li>[ <var><length></var> | <var><percentage></var> ]{2}, <a 1.6694 - href="#radial-size-ellipse" 1.6695 - title="section 4.2.1."><strong>4.2.1.</strong></a> 1.6696 - 1.6697 - <li><linear-color-stop>, <a href="#ltlinear-color-stop" 1.6698 - title="section 4.5."><strong>4.5.</strong></a> 1.6699 - 1.6700 - <li><linear-gradient>, <a href="#linear-gradient-type" 1.6701 - title="section 4.1.1."><strong>4.1.1.</strong></a> 1.6702 - 1.6703 - <li>object-fit, <a href="#object-fit" 1.6704 - title="section 5.5."><strong>5.5.</strong></a> 1.6705 - 1.6706 - <li>object-position, <a href="#object-position" 1.6707 - title="section 5.6."><strong>5.6.</strong></a> 1.6708 - 1.6709 - <li>objects, <a href="#objects" title="section 5."><strong>5.</strong></a> 1.6710 - 1.6711 - <li>paint-source, <a href="#paint-source" 1.6712 - title="section 3.4.1."><strong>3.4.1.</strong></a> 1.6713 - 1.6714 - <li>pixelated, <a href="#image-rendering-pixelated" 1.6715 - title="section 6.3."><strong>6.3.</strong></a> 1.6716 - 1.6717 - <li><position>, <a href="#position" 1.6718 - title="section 4.2.1."><strong>4.2.1.</strong></a> 1.6719 - 1.6720 - <li><radial-gradient>, <a href="#radial-gradient-type" 1.6721 - title="section 4.2.1."><strong>4.2.1.</strong></a> 1.6722 - 1.6723 - <li>renderer, <a href="#renderer" 1.6724 - title="section 10.2."><strong>10.2.</strong></a> 1.6725 - 1.6726 - <li><repeating-conic-gradient>, <a 1.6727 - href="#repeating-conic-gradient-type" 1.6728 - title="section 4.4."><strong>4.4.</strong></a> 1.6729 - 1.6730 - <li><repeating-linear-gradient>, <a 1.6731 - href="#repeating-linear-gradient-type" 1.6732 - title="section 4.4."><strong>4.4.</strong></a> 1.6733 - 1.6734 - <li><repeating-radial-gradient>, <a 1.6735 - href="#repeating-radial-gradient-type" 1.6736 - title="section 4.4."><strong>4.4.</strong></a> 1.6737 - 1.6738 - <li><side-or-corner>, <a href="#side-or-corner" 1.6739 - title="section 4.1.1."><strong>4.1.1.</strong></a> 1.6740 - 1.6741 - <li><size>, <a href="#size" 1.6742 - title="section 4.2.1."><strong>4.2.1.</strong></a> 1.6743 - 1.6744 - <li>specified size, <a href="#specified-size" 1.6745 - title="section 5.1."><strong>5.1.</strong></a> 1.6746 - 1.6747 - <li>starting point, <a href="#starting-point" 1.6748 - title="section 4.5."><strong>4.5.</strong></a> 1.6749 - 1.6750 - <li>style sheet 1.6751 - <ul> 1.6752 - <li>as conformance class, <a href="#style-sheet" 1.6753 - title="section 10.2."><strong>10.2.</strong></a> 1.6754 - </ul> 1.6755 - </ul> 1.6756 - <!--end-index--> 1.6757 - 1.6758 - <h2 class=no-num id=property-index>Property index</h2> 1.6759 - <!--begin-properties--> 1.6760 - 1.6761 - <table class=proptable> 1.6762 - <thead> 1.6763 - <tr> 1.6764 - <th>Property 1.6765 - 1.6766 - <th>Values 1.6767 - 1.6768 - <th>Initial 1.6769 - 1.6770 - <th>Applies to 1.6771 - 1.6772 - <th>Inh. 1.6773 - 1.6774 - <th>Percentages 1.6775 - 1.6776 - <th>Media 1.6777 - 1.6778 - <tbody> 1.6779 - <tr> 1.6780 - <th><a class=property href="#image-orientation">image-orientation</a> 1.6781 - 1.6782 - <td><angle> | from-image 1.6783 - 1.6784 - <td>0deg 1.6785 - 1.6786 - <td>all elements 1.6787 - 1.6788 - <td>yes 1.6789 - 1.6790 - <td> 1.6791 - 1.6792 - <td>visual 1.6793 - 1.6794 - <tr> 1.6795 - <th><a class=property href="#image-rendering">image-rendering</a> 1.6796 - 1.6797 - <td>auto | crisp-edges | pixelated 1.6798 - 1.6799 - <td>auto 1.6800 - 1.6801 - <td>all elements 1.6802 - 1.6803 - <td>yes 1.6804 - 1.6805 - <td> 1.6806 - 1.6807 - <td>visual 1.6808 - 1.6809 - <tr> 1.6810 - <th><a class=property href="#image-resolution">image-resolution</a> 1.6811 - 1.6812 - <td>[from-image || <resolution>] && snap? 1.6813 - 1.6814 - <td>1dppx 1.6815 - 1.6816 - <td>all elements 1.6817 - 1.6818 - <td>yes 1.6819 - 1.6820 - <td> 1.6821 - 1.6822 - <td>visual 1.6823 - 1.6824 - <tr> 1.6825 - <th><a class=property href="#object-fit">object-fit</a> 1.6826 - 1.6827 - <td>fill | contain | cover | none | scale-down 1.6828 - 1.6829 - <td>fill 1.6830 - 1.6831 - <td>replaced elements 1.6832 - 1.6833 - <td>no 1.6834 - 1.6835 - <td>N/A 1.6836 - 1.6837 - <td>visual 1.6838 - 1.6839 - <tr> 1.6840 - <th><a class=property href="#object-position">object-position</a> 1.6841 - 1.6842 - <td><position> 1.6843 - 1.6844 - <td>50% 50% 1.6845 - 1.6846 - <td>replaced elements 1.6847 - 1.6848 - <td>no 1.6849 - 1.6850 - <td>refer to width and height of box itself 1.6851 - 1.6852 - <td>visual 1.6853 - </table> 1.6854 - <!--end-properties--> 1.6855 -</html> 1.6856 -<!-- Keep this comment at the end of the file 1.6857 -Local variables: 1.6858 -mode: sgml 1.6859 -sgml-declaration:"~/SGML/HTML4.decl" 1.6860 -sgml-default-doctype-name:"html" 1.6861 -sgml-minimize-attributes:t 1.6862 -sgml-nofill-elements:("pre" "style" "br") 1.6863 -sgml-live-element-indicator:t 1.6864 -sgml-omittag:nil 1.6865 -sgml-shorttag:nil 1.6866 -sgml-namecase-general:t 1.6867 -sgml-general-insert-case:lower 1.6868 -sgml-always-quote-attributes:t 1.6869 -sgml-indent-step:nil 1.6870 -sgml-indent-data:t 1.6871 -sgml-parent-document:nil 1.6872 -sgml-exposed-tags:nil 1.6873 -sgml-local-catalogs:nil 1.6874 -sgml-local-ecat-files:nil 1.6875 -End: 1.6876 ---> 1.6877 +<h2 class="no-ref no-num" id=conformance><span class=content> 1.6878 +Conformance</span><a class=section-link href=#conformance>§</a></h2> 1.6879 + 1.6880 +<h3 class=no-ref id=conventions><span class=content> 1.6881 +Document conventions</span><a class=section-link href=#conventions>§</a></h3> 1.6882 + 1.6883 + <p>Conformance requirements are expressed with a combination of 1.6884 + descriptive assertions and RFC 2119 terminology. The key words "MUST", 1.6885 + "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", 1.6886 + "RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this 1.6887 + document are to be interpreted as described in RFC 2119. 1.6888 + However, for readability, these words do not appear in all uppercase 1.6889 + letters in this specification. 1.6890 + 1.6891 + <p>All of the text of this specification is normative except sections 1.6892 + explicitly marked as non-normative, examples, and notes. <a data-biblio-type=normative data-link-type=biblio href=#rfc2119 title=RFC2119>[RFC2119]</a></p> 1.6893 + 1.6894 + <p>Examples in this specification are introduced with the words "for example" 1.6895 + or are set apart from the normative text with <code>class="example"</code>, 1.6896 + like this: 1.6897 + 1.6898 + <div class=example> 1.6899 + <p>This is an example of an informative example.</p> 1.6900 + </div> 1.6901 + 1.6902 + <p>Informative notes begin with the word "Note" and are set apart from the 1.6903 + normative text with <code>class="note"</code>, like this: 1.6904 + 1.6905 + <p class=note>Note, this is an informative note.</p> 1.6906 + 1.6907 +<h3 class=no-ref id=conformance-classes><span class=content> 1.6908 +Conformance classes</span><a class=section-link href=#conformance-classes>§</a></h3> 1.6909 + 1.6910 + <p>Conformance to this specification 1.6911 + is defined for three conformance classes: 1.6912 + <dl> 1.6913 + <dt>style sheet 1.6914 + <dd>A <a href=http://www.w3.org/TR/CSS21/conform.html#style-sheet>CSS 1.6915 + style sheet</a>. 1.6916 + <dt>renderer 1.6917 + <dd>A <a href=http://www.w3.org/TR/CSS21/conform.html#user-agent>UA</a> 1.6918 + that interprets the semantics of a style sheet and renders 1.6919 + documents that use them. 1.6920 + <dt>authoring tool 1.6921 + <dd>A <a href=http://www.w3.org/TR/CSS21/conform.html#user-agent>UA</a> 1.6922 + that writes a style sheet. 1.6923 + </dl> 1.6924 + 1.6925 + <p>A style sheet is conformant to this specification 1.6926 + if all of its statements that use syntax defined in this module are valid 1.6927 + according to the generic CSS grammar and the individual grammars of each 1.6928 + feature defined in this module. 1.6929 + 1.6930 + <p>A renderer is conformant to this specification 1.6931 + if, in addition to interpreting the style sheet as defined by the 1.6932 + appropriate specifications, it supports all the features defined 1.6933 + by this specification by parsing them correctly 1.6934 + and rendering the document accordingly. However, the inability of a 1.6935 + UA to correctly render a document due to limitations of the device 1.6936 + does not make the UA non-conformant. (For example, a UA is not 1.6937 + required to render color on a monochrome monitor.) 1.6938 + 1.6939 + <p>An authoring tool is conformant to this specification 1.6940 + if it writes style sheets that are syntactically correct according to the 1.6941 + generic CSS grammar and the individual grammars of each feature in 1.6942 + this module, and meet all other conformance requirements of style sheets 1.6943 + as described in this module. 1.6944 + 1.6945 +<h3 class=no-ref id=partial><span class=content> 1.6946 +Partial implementations</span><a class=section-link href=#partial>§</a></h3> 1.6947 + 1.6948 + <p>So that authors can exploit the forward-compatible parsing rules to 1.6949 + assign fallback values, CSS renderers <strong>must</strong> 1.6950 + treat as invalid (and <a href=http://www.w3.org/TR/CSS21/conform.html#ignore>ignore 1.6951 + as appropriate</a>) any at-rules, properties, property values, keywords, 1.6952 + and other syntactic constructs for which they have no usable level of 1.6953 + support. In particular, user agents <strong>must not</strong> selectively 1.6954 + ignore unsupported component values and honor supported values in a single 1.6955 + multi-value property declaration: if any value is considered invalid 1.6956 + (as unsupported values must be), CSS requires that the entire declaration 1.6957 + be ignored.</p> 1.6958 + 1.6959 +<h3 class=no-ref id=experimental><span class=content> 1.6960 +Experimental implementations</span><a class=section-link href=#experimental>§</a></h3> 1.6961 + 1.6962 + <p>To avoid clashes with future CSS features, the CSS2.1 specification 1.6963 + reserves a <a href=http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords>prefixed 1.6964 + syntax</a> for proprietary and experimental extensions to CSS. 1.6965 + 1.6966 + <p>Prior to a specification reaching the Candidate Recommendation stage 1.6967 + in the W3C process, all implementations of a CSS feature are considered 1.6968 + experimental. The CSS Working Group recommends that implementations 1.6969 + use a vendor-prefixed syntax for such features, including those in 1.6970 + W3C Working Drafts. This avoids incompatibilities with future changes 1.6971 + in the draft. 1.6972 + </p> 1.6973 + 1.6974 +<h3 class=no-ref id=testing><span class=content> 1.6975 +Non-experimental implementations</span><a class=section-link href=#testing>§</a></h3> 1.6976 + 1.6977 + <p>Once a specification reaches the Candidate Recommendation stage, 1.6978 + non-experimental implementations are possible, and implementors should 1.6979 + release an unprefixed implementation of any CR-level feature they 1.6980 + can demonstrate to be correctly implemented according to spec. 1.6981 + 1.6982 + <p>To establish and maintain the interoperability of CSS across 1.6983 + implementations, the CSS Working Group requests that non-experimental 1.6984 + CSS renderers submit an implementation report (and, if necessary, the 1.6985 + testcases used for that implementation report) to the W3C before 1.6986 + releasing an unprefixed implementation of any CSS features. Testcases 1.6987 + submitted to W3C are subject to review and correction by the CSS 1.6988 + Working Group. 1.6989 + 1.6990 + <p>Further information on submitting testcases and implementation reports 1.6991 + can be found from on the CSS Working Group's website at 1.6992 + <a href=http://www.w3.org/Style/CSS/Test/>http://www.w3.org/Style/CSS/Test/</a>. 1.6993 + Questions should be directed to the 1.6994 + <a href=http://lists.w3.org/Archives/Public/public-css-testsuite>public-css-testsuite@w3.org</a> 1.6995 + mailing list. 1.6996 + 1.6997 +<h2 class="no-num no-ref" id=references><span class=content> 1.6998 +References</span><a class=section-link href=#references>§</a></h2> 1.6999 + 1.7000 +<h3 class="no-num no-ref" id=normative><span class=content> 1.7001 +Normative References</span><a class=section-link href=#normative>§</a></h3> 1.7002 +<div data-fill-with=normative-references><dl><dt id=css21 title=CSS21>[CSS21]<dd>Bert Bos; et al. <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607/>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607/>http://www.w3.org/TR/2011/REC-CSS2-20110607/</a><dt id=css3-transforms title=CSS3-TRANSFORMS>[CSS3-TRANSFORMS]<dd>Simon Fraser; et al. <a href=http://www.w3.org/TR/2012/WD-css3-transforms-20120911/>CSS Transforms</a>. 11 September 2012. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/WD-css3-transforms-20120911/>http://www.w3.org/TR/2012/WD-css3-transforms-20120911/</a><dt id=css3val title=CSS3VAL>[CSS3VAL]<dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a href=http://www.w3.org/TR/2012/CR-css3-values-20120828/>CSS Values and Units Module Level 3</a>. 28 August 2012. W3C Candidate Recommendation. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/CR-css3-values-20120828/>http://www.w3.org/TR/2012/CR-css3-values-20120828/</a><dt id=media-frags title=MEDIA-FRAGS>[MEDIA-FRAGS]<dd>Raphaël Troncy; et al. <a href=http://www.w3.org/TR/2012/REC-media-frags-20120925/>Media Fragments URI 1.0 (basic)</a>. 25 September 2012. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2012/REC-media-frags-20120925/>http://www.w3.org/TR/2012/REC-media-frags-20120925/</a><dt id=rfc2119 title=RFC2119>[RFC2119]<dd>S. Bradner. <a href=http://www.ietf.org/rfc/rfc2119.txt>Key words for use in RFCs to Indicate Requirement Levels</a>. URL: <a href=http://www.ietf.org/rfc/rfc2119.txt>http://www.ietf.org/rfc/rfc2119.txt</a><dt id=select title=SELECT>[SELECT]<dd>Tantek Çelik; et al. <a href=http://www.w3.org/TR/2011/REC-css3-selectors-20110929/>Selectors Level 3</a>. 29 September 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-css3-selectors-20110929/>http://www.w3.org/TR/2011/REC-css3-selectors-20110929/</a></dl></div> 1.7003 + 1.7004 +<h3 class="no-num no-ref" id=informative><span class=content> 1.7005 +Informative References</span><a class=section-link href=#informative>§</a></h3> 1.7006 +<div data-fill-with=informative-references><dl><dt id=css3-2d-transforms title=CSS3-2D-TRANSFORMS>[CSS3-2D-TRANSFORMS]<dd>Simon Fraser; et al. <a href=http://www.w3.org/TR/2011/WD-css3-2d-transforms-20111215/>CSS 2D Transforms</a>. 15 December 2011. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2011/WD-css3-2d-transforms-20111215/>http://www.w3.org/TR/2011/WD-css3-2d-transforms-20111215/</a><dt id=css3bg title=CSS3BG>[CSS3BG]<dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a href=http://www.w3.org/TR/2012/CR-css3-background-20120724/>CSS Backgrounds and Borders Module Level 3</a>. 24 July 2012. W3C Candidate Recommendation. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/CR-css3-background-20120724/>http://www.w3.org/TR/2012/CR-css3-background-20120724/</a><dt id=css3color title=CSS3COLOR>[CSS3COLOR]<dd>Tantek Çelik; Chris Lilley; L. David Baron. <a href=http://www.w3.org/TR/2011/REC-css3-color-20110607>CSS Color Module Level 3</a>. 7 June 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-css3-color-20110607>http://www.w3.org/TR/2011/REC-css3-color-20110607</a><dt id=css3page title=CSS3PAGE>[CSS3PAGE]<dd>Håkon Wium Lie; Melinda Grant. <a href=http://www.w3.org/TR/2006/WD-css3-page-20061010>CSS3 Module: Paged Media</a>. 10 October 2006. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2006/WD-css3-page-20061010>http://www.w3.org/TR/2006/WD-css3-page-20061010</a><dt id=cssom title=CSSOM>[CSSOM]<dd>Anne van Kesteren. <a href=http://www.w3.org/TR/2011/WD-cssom-20110712/>CSSOM</a>. 12 July 2011. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2011/WD-cssom-20110712/>http://www.w3.org/TR/2011/WD-cssom-20110712/</a><dt id=porterduff title=PORTERDUFF>[PORTERDUFF]<dd>Thomas Porter; Tom Duff. <a href=None>Compositing digital images</a>. July 1984. ISSN 0097-8930 URL: <a href=None>None</a><dt id=smil10 title=SMIL10>[SMIL10]<dd>Philipp Hoschka. <a href=http://www.w3.org/TR/1998/REC-smil-19980615>Synchronized Multimedia Integration Language (SMIL) 1.0 Specification</a>. 15 June 1998. W3C Recommendation. URL: <a href=http://www.w3.org/TR/1998/REC-smil-19980615>http://www.w3.org/TR/1998/REC-smil-19980615</a><dt id=svg11 title=SVG11>[SVG11]<dd>Erik Dahlström; et al. <a href=http://www.w3.org/TR/2011/REC-SVG11-20110816/>Scalable Vector Graphics (SVG) 1.1 (Second Edition)</a>. 16 August 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-SVG11-20110816/>http://www.w3.org/TR/2011/REC-SVG11-20110816/</a></dl></div> 1.7007 + 1.7008 +<h2 class="no-num no-ref" id=index><span class=content> 1.7009 +Index</span><a class=section-link href=#index>§</a></h2> 1.7010 +<div data-fill-with=index><ul class=indexlist> 1.7011 +<li><angle>, <a href=#typedef-angle title="section 6.2">6.2</a> 1.7012 +<li><angle>? flip, <a href=#angle-flip title="section 6.2">6.2</a> 1.7013 +<li><angular-color-stop>, <a href=#typedef-angular-color-stop title="section 4.5">4.5</a> 1.7014 +<li><angular-color-stop-list>, <a href=#typedef-angular-color-stop-list title="section 4.5">4.5</a> 1.7015 +<li>auto, <a href=#auto title="section 6.3">6.3</a> 1.7016 +<li><cap-angular-color-stop>, <a href=#typedef-cap-angular-color-stop title="section 4.5">4.5</a> 1.7017 +<li><cap-linear-color-stop>, <a href=#typedef-cap-linear-color-stop title="section 4.5">4.5</a> 1.7018 +<li>closest-corner, <a href=#closest-corner title="section 4.2.1">4.2.1</a> 1.7019 +<li>closest-side, <a href=#closest-side title="section 4.2.1">4.2.1</a> 1.7020 +<li>color stop, <a href=#color-stop title="section 4.5">4.5</a> 1.7021 +<li><color-stop-angle>, <a href=#typedef-color-stop-angle title="section 4.5">4.5</a> 1.7022 +<li><color-stop-length>, <a href=#typedef-color-stop-length title="section 4.5">4.5</a> 1.7023 +<li><color-stop-list>, <a href=#typedef-color-stop-list title="section 4.5">4.5</a> 1.7024 +<li>color stop list, <a href=#color-stop-list title="section 4.5">4.5</a> 1.7025 +<li>concrete object size, <a href=#concrete-object-size title="section 5.1">5.1</a> 1.7026 +<li>conic-gradient(), <a href=#funcdef-conic-gradient title="section 4.3.1">4.3.1</a> 1.7027 +<li>constraint rectangle, <a href=#constraint-rectangle title="section 5.3.2">5.3.2</a> 1.7028 +<li>contain, <a href=#contain title="section 5.5">5.5</a> 1.7029 +<li>contain constraint, <a href=#contain-constraint title="section 5.3.2">5.3.2</a> 1.7030 +<li>cover, <a href=#cover title="section 5.5">5.5</a> 1.7031 +<li>cover constraint, <a href=#cover-constraint title="section 5.3.2">5.3.2</a> 1.7032 +<li>crisp-edges, <a href=#crisp-edges title="section 6.3">6.3</a> 1.7033 +<li>cross-fade(), <a href=#funcdef-cross-fade title="section 3.5">3.5</a> 1.7034 +<li>decorated bounding box, <a href=#decorated-bounding-box title="section 3.4">3.4</a> 1.7035 +<li>default object size, <a href=#default-object-size title="section 5.1">5.1</a> 1.7036 +<li>default sizing algorithm, <a href=#default-sizing-algorithm title="section 5.3.1">5.3.1</a> 1.7037 +<li>element(), <a href=#funcdef-element title="section 3.4">3.4</a> 1.7038 +<li>element-not-rendered, <a href=#element-not-rendered title="section 3.4">3.4</a> 1.7039 +<li>ending point, <a href=#ending-point title="section 4.5">4.5</a> 1.7040 +<li>ending shape, <a href=#ending-shape title="section 4.2">4.2</a> 1.7041 +<li><ending-shape>, <a href=#typedef-ending-shape title="section 4.2.1">4.2.1</a> 1.7042 +<li><extent-keyword>, <a href=#typedef-extent-keyword title="section 4.2.1">4.2.1</a> 1.7043 +<li>farthest-corner, <a href=#farthest-corner title="section 4.2.1">4.2.1</a> 1.7044 +<li>farthest-side, <a href=#farthest-side title="section 4.2.1">4.2.1</a> 1.7045 +<li>fill, <a href=#fill title="section 5.5">5.5</a> 1.7046 +<li>from-image, <a href=#from-image0 title="section 6.1">6.1</a> 1.7047 +<li>from-image, <a href=#from-image title="section 6.2">6.2</a> 1.7048 +<li><gradient>, <a href=#gradient-type title="section 4">4</a> 1.7049 +<li>gradient-average-color, <a href=#find-the-average-color-of-a-gradient title="section 4.4">4.4</a> 1.7050 +<li>gradient box, <a href=#gradient-box title="section 4">4</a> 1.7051 +<li>gradient line, <a href=#gradient-line title="section 4.1">4.1</a> 1.7052 +<li><image>, <a href=#typedef-image title="section 3">3</a> 1.7053 +<li>image(), <a href=#funcdef-image title="section 3.2">3.2</a> 1.7054 +<li>image-set(), <a href=#funcdef-image-set title="section 3.3">3.3</a> 1.7055 +<li><image-set-decl>, <a href=#typedef-image-set-decl title="section 3.3">3.3</a> 1.7056 +<li><image-src>, <a href=#typedef-image-src title="section 3.2">3.2</a> 1.7057 +<li><image-tags>, <a href=#typedef-image-tags title="section 3.2">3.2</a> 1.7058 +<li>intrinsic aspect ratio, <a href=#intrinsic-aspect-ratio title="section 5.1">5.1</a> 1.7059 +<li>intrinsic dimensions, <a href=#intrinsic-dimensions title="section 5.1">5.1</a> 1.7060 +<li>intrinsic height, <a href=#intrinsic-height title="section 5.1">5.1</a> 1.7061 +<li>intrinsic resolution, <a href=#intrinsic-resolution title="section 6.1">6.1</a> 1.7062 +<li>intrinsic width, <a href=#intrinsic-width title="section 5.1">5.1</a> 1.7063 +<li>invalid image, <a href=#invalid-image title="section 3">3</a> 1.7064 +<li><length>, <a href=#typedef-length title="section 4.2.1">4.2.1</a> 1.7065 +<li>[ <length> | <percentage> ]{2}, <a href=#-length--percentage-2 title="section 4.2.1">4.2.1</a> 1.7066 +<li><linear-color-stop>, <a href=#typedef-linear-color-stop title="section 4.5">4.5</a> 1.7067 +<li>linear-gradient(), <a href=#funcdef-linear-gradient title="section 4.1.1">4.1.1</a> 1.7068 +<li>none, <a href=#none title="section 5.5">5.5</a> 1.7069 +<li>objects, <a href=#objects title="section 5">5</a> 1.7070 +<li>paint-source, <a href=#paint-source title="section 3.4.1">3.4.1</a> 1.7071 +<li>pixelated, <a href=#pixelated title="section 6.3">6.3</a> 1.7072 +<li><position>, <a href=#typedef-position title="section 4.2.1">4.2.1</a> 1.7073 +<li>radial-gradient(), <a href=#funcdef-radial-gradient title="section 4.2.1">4.2.1</a> 1.7074 +<li>repeating-conic-gradient(), <a href=#funcdef-repeating-conic-gradient title="section 4.4">4.4</a> 1.7075 +<li>repeating-linear-gradient(), <a href=#funcdef-repeating-linear-gradient title="section 4.4">4.4</a> 1.7076 +<li>repeating-radial-gradient(), <a href=#funcdef-repeating-radial-gradient title="section 4.4">4.4</a> 1.7077 +<li><resolution>, <a href=#typedef-resolution title="section 6.1">6.1</a> 1.7078 +<li>scale-down, <a href=#scale-down title="section 5.5">5.5</a> 1.7079 +<li><side-or-corner>, <a href=#typedef-side-or-corner title="section 4.1.1">4.1.1</a> 1.7080 +<li><size>, <a href=#typedef-size title="section 4.2.1">4.2.1</a> 1.7081 +<li>snap, <a href=#snap title="section 6.1">6.1</a> 1.7082 +<li>specified size, <a href=#specified-size title="section 5.1">5.1</a> 1.7083 +<li>starting point, <a href=#starting-point title="section 4.5">4.5</a> 1.7084 +</ul></div> 1.7085 + 1.7086 +<h2 class="no-num no-ref" id=property-index><span class=content> 1.7087 +Property index</span><a class=section-link href=#property-index>§</a></h2> 1.7088 +<div data-fill-with=property-index><table class=proptable><thead><tr><th scope=col>Name<th scope=col>Value<th scope=col>Initial<th scope=col>Applies To<th scope=col>Inh.<th scope=col>%ages<th scope=col>Media<th scope=col>Animatable<th scope=col>Applies to<th scope=col>Canonical Order<th scope=col>Computed value<tbody> 1.7089 +<tr><th scope=row><a data-property="">object-fit</a><td>fill | contain | cover | none | scale-down<td>fill<td><td>no<td>n/a<td>visual<td>no<td>replaced elements<td><td>specified value 1.7090 +<tr><th scope=row><a data-property="">object-position</a><td><a class=production data-link-type=type href=#typedef-position><var><position></var></a><td>50% 50%<td><td>no<td>refer to width and height of element itself<td>visual<td>yes<td>replaced elements<td>the horizontal component of the <a class=production data-link-type=type href=#typedef-position><var><position></var></a>, followed by the vertical component<td>specified value 1.7091 +<tr><th scope=row><a data-property="">image-resolution</a><td>[ from-image || <a class=production data-link-type=type href=#typedef-resolution><var><resolution></var></a> ] && snap?<td>1dppx<td><td>yes<td><td>visual<td>no<td>all elements<td><td>as specified, except with <a class=production data-link-type=type href=#typedef-resolution><var><resolution></var></a> possibly altered by computed for <a class=css data-link-type=maybe href=#snap>snap</a> (see below) 1.7092 +<tr><th scope=row><a data-property="">image-orientation</a><td>from-image | <a class=production data-link-type=type href=#typedef-angle><var><angle></var></a> | [ <a class=production data-link-type=type href=#typedef-angle><var><angle></var></a>? flip ]<td>0deg<td><td>yes<td><td>visual<td>no<td>all elements<td><td>an <a class=production data-link-type=type href=#typedef-angle><var><angle></var></a>, rounded and normalized (see text), plus optionally a <span class=css data-link-type=maybe>flip</span> keyword 1.7093 +<tr><th scope=row><a data-property="">image-rendering</a><td>auto | crisp-edges | pixelated<td>auto<td><td>yes<td><td>visual<td>no<td>all elements<td><td>specified value</table></div> 1.7094 + 1.7095 + 1.7096 +</i></a></a></a></a></a></a></a></a></a></a> 1.7097 \ No newline at end of file
2.1 --- a/css-images/Overview.src.html Fri Aug 09 14:37:49 2013 +0200 2.2 +++ b/css-images/Overview.src.html Fri Aug 09 10:34:13 2013 -0700 2.3 @@ -1,145 +1,66 @@ 2.4 -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2.5 -<html lang="en"> 2.6 -<head profile="http://www.w3.org/2006/03/hcard"> 2.7 - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 2.8 - <title>CSS Image Values and Replaced Content Module Level 4</title> 2.9 - <link rel="stylesheet" type="text/css" href="../default.css"> 2.10 - <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon"> 2.11 - <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css"> 2.12 -</head> 2.13 - 2.14 -<div class="head"> 2.15 -<!--logo--> 2.16 - 2.17 <h1>CSS Image Values and Replaced Content Module Level 4</h1> 2.18 2.19 - <h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2> 2.20 - <dl> 2.21 - <dt>This Version: 2.22 - <dd><a href="http://dev.w3.org/csswg/css4-images/">http://dev.w3.org/csswg/css4-images/</a> 2.23 - <!-- <dd><a href="[VERSION]">http://www.w3.org/TR/[YEAR]/WD-css4-images-[CDATE]/</a>--> 2.24 - 2.25 - <dt>Latest Version: 2.26 - <dd><a href="http://www.w3.org/TR/css4-images/">http://www.w3.org/TR/css4-images/</a> 2.27 - 2.28 - <dt>Editor's Draft: 2.29 - <dd><a href="http://dev.w3.org/csswg/css4-images/">http://dev.w3.org/csswg/css4-images/</a> 2.30 - 2.31 - <dt>Previous Version: 2.32 - <dd><a href="http://www.w3.org/TR/2012/WD-css4-images-20120911/">http://www.w3.org/TR/2012/WD-css4-images-20120911/</a> 2.33 - 2.34 - <dt>Issue Tracking: 2.35 - <dd><a href="http://www.w3.org/Style/CSS/Tracker/products/27">http://www.w3.org/Style/CSS/Tracker/products/27</a> 2.36 - 2.37 - <dt>Feedback:</dt> 2.38 - <dd><a href="mailto:www-style@w3.org?subject=%5Bcss-images%5D%20feedback" 2.39 - >www-style@w3.org</a> 2.40 - with subject line “<kbd>[css-images] 2.41 - <var>… message topic …</var></kbd>” 2.42 - (<a rel="discussion" href="http://lists.w3.org/Archives/Public/www-style/" 2.43 - >archives</a>) 2.44 - 2.45 - <dt>Editors: 2.46 - <dd class='vcard'> 2.47 - <a class='url fn' href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a> (<span class='org'>Mozilla</span>) 2.48 - <dd class='vcard'> 2.49 - <a class='url fn' href="http://www.xanthir.com/contact/">Tab Atkins Jr.</a> (<span class='org'>Google</span>) 2.50 - </dl> 2.51 - 2.52 -<!--copyright--> 2.53 - 2.54 -<hr title="Separator for header"> 2.55 -</div> 2.56 - 2.57 -<details class=obsolete open> 2.58 - <summary>Not Ready For Implementation</summary> 2.59 - <p> 2.60 - This spec is not yet ready for implementation. 2.61 - It exists in this repository to record the ideas and promote discussion. 2.62 - 2.63 - <p> 2.64 - Before attempting to implement this spec, 2.65 - please contact the CSSWG at www-style@w3.org. 2.66 -</details> 2.67 - 2.68 -<h2 class="no-num no-toc" id="abstract">Abstract</h2> 2.69 - 2.70 - <p> 2.71 - CSS is a language for describing the rendering of structured documents 2.72 - (such as HTML and XML) 2.73 - on screen, on paper, in speech, etc. 2.74 - This module contains the features of CSS level 4 2.75 - relating to the <var><image></var> type 2.76 - and replaced elements. 2.77 - It includes and extends the functionality of CSS Image Values and Replaced Content Module Level 3. 2.78 - The main extensions compared to level 3 are 2.79 - several additions to the ''<image>'' type, 2.80 - additions to the ''<gradient>'' type, 2.81 - extentions to the ''image()'' function, 2.82 - definitions for interpolating several ''<image>'' types, 2.83 - and several properties controlling the interaction of replaced elements and CSS's layout models. 2.84 - 2.85 -<h2 class="no-num no-toc" id="status">Status of this document</h2> 2.86 - 2.87 -<!--status--> 2.88 - 2.89 -<h2 class="no-num no-toc" id="contents">Table of contents</h2> 2.90 - 2.91 -<!--toc--> 2.92 +<pre class='metadata'> 2.93 +Status: ED 2.94 +Shortname: css-images 2.95 +Level: 4 2.96 +ED: http://dev.w3.org/csswg/css-images-4/ 2.97 +TR: http://www.w3.org/TR/css4-images/ 2.98 +Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/ 2.99 +Editor: fantasai, Mozilla, http://fantasai.inkedblade.net/contact 2.100 +Abstract: This module contains the features of CSS level 4 relating to the <<image>> type and replaced elements. It includes and extends the functionality of CSS Image Values and Replaced Content Module Level 3. The main extensions compared to level 3 are several additions to the <<image>> type, additions to the <<gradient>> type, extentions to the ''image()'' function, definitions for interpolating several <<image>> types, and several properties controlling the interaction of replaced elements and CSS's layout models. 2.101 +Warning: Not Ready 2.102 +Issue Tracking: <a href="http://www.w3.org/Style/CSS/Tracker/products/27">http://www.w3.org/Style/CSS/Tracker/products/27</a> 2.103 +Previous Version: http://www.w3.org/TR/2012/WD-css4-images-20120911/ 2.104 +</pre> 2.105 2.106 <h2 id="intro"> 2.107 Introduction</h2> 2.108 2.109 - <p><em>This section is not normative.</em> 2.110 - 2.111 - <p> 2.112 - In CSS Levels 1 and 2, 2.113 - image values, such as those used in the 'background-image' property, 2.114 - could only be given by a single URL value. 2.115 - This module introduces additional ways of representing 2D images, 2.116 - for example as <a href="#image-notation">a list of URIs denoting fallbacks</a>, 2.117 - as <a href="#element-image-type">a reference to an element</a>, 2.118 - or as <a href="#gradients">a gradient</a>. 2.119 - 2.120 - <p> 2.121 - This module also defines several properties for <a href="#image-processing">manipulating raster images</a> 2.122 - and for <a href="#object-fit">sizing</a> 2.123 - or <a href="#object-position">positioning</a> 2.124 - replaced elements such as images within the box determined by the CSS layout algorithms. 2.125 - It also defines in a generic way CSS's <a href="#sizing">sizing algorithm</a> for images and other replaced elements. 2.126 + <em>This section is not normative.</em> 2.127 + 2.128 + In CSS Levels 1 and 2, 2.129 + image values, such as those used in the 'background-image' property, 2.130 + could only be given by a single URL value. 2.131 + This module introduces additional ways of representing 2D images, 2.132 + for example as <a href="#image-notation">a list of URIs denoting fallbacks</a>, 2.133 + as <a href="#element-image-type">a reference to an element</a>, 2.134 + or as <a href="#gradients">a gradient</a>. 2.135 + 2.136 + This module also defines several properties for <a href="#image-processing">manipulating raster images</a> 2.137 + and for <a href="#object-fit">sizing</a> 2.138 + or <a href="#object-position">positioning</a> 2.139 + replaced elements such as images within the box determined by the CSS layout algorithms. 2.140 + It also defines in a generic way CSS's <a href="#sizing">sizing algorithm</a> for images and other replaced elements. 2.141 2.142 <h3 id="placement"> 2.143 Module Interactions</h3> 2.144 2.145 - <p> 2.146 - This module defines and extends the ''<image>'' value type defined in [[!CSS3VAL]]. 2.147 - Furthermore it replaces the ''<url>'' type 2.148 - in the 'background-image' and 'list-style-image' definitions in CSS1 and CSS2 2.149 - and adds ''<image>'' as an alternative to ''<url>'' in the 'content' property's value. 2.150 - It is presumed that CSS specifications beyond CSS2.1 will use the ''<image>'' notation 2.151 - in place of ''<url>'' where 2D images are expected. (See e.g. [[CSS3BG]].) 2.152 - 2.153 - <p> 2.154 - Of the properties defined in this module, 2.155 - only 'image-resolution' 2.156 - applies to <code>::first-line</code> and <code>::first-letter</code>. 2.157 + This module defines and extends the <<image>> value type defined in [[!CSS3VAL]]. 2.158 + Furthermore it replaces the <<url>> type 2.159 + in the 'background-image' and 'list-style-image' definitions in CSS1 and CSS2 2.160 + and adds <<image>> as an alternative to <<url>> in the 'content' property's value. 2.161 + It is presumed that CSS specifications beyond CSS2.1 will use the <<image>> notation 2.162 + in place of <<url>> where 2D images are expected. (See e.g. [[CSS3BG]].) 2.163 + 2.164 + Of the properties defined in this module, 2.165 + only 'image-resolution' 2.166 + applies to <code>::first-line</code> and <code>::first-letter</code>. 2.167 2.168 <h3 id="values"> 2.169 Values</h3> 2.170 2.171 - <p> 2.172 - This specification follows the <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property definition conventions</a> from [[!CSS21]]. 2.173 - Value types not defined in this specification 2.174 - are defined in CSS Level 2 Revision 1 [[!CSS21]]. 2.175 - Other CSS modules may expand the definitions of these value types: 2.176 - for example [[CSS3COLOR]], 2.177 - when combined with this module, 2.178 - expands the definition of the <var><color></var> value type as used in this specification. 2.179 - 2.180 - <p> 2.181 - In addition to the property-specific values listed in their definitions, 2.182 - all properties defined in this specification also accept the <a href="http://www.w3.org/TR/css3-values/">global keywords</a> as their property value. 2.183 - For readability they has not been repeated explicitly. 2.184 + This specification follows the <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property definition conventions</a> from [[!CSS21]]. 2.185 + Value types not defined in this specification 2.186 + are defined in CSS Level 2 Revision 1 [[!CSS21]]. 2.187 + Other CSS modules may expand the definitions of these value types: 2.188 + for example [[CSS3COLOR]], 2.189 + when combined with this module, 2.190 + expands the definition of the <<color>> value type as used in this specification. 2.191 + 2.192 + In addition to the property-specific values listed in their definitions, 2.193 + all properties defined in this specification also accept the <a href="http://www.w3.org/TR/css3-values/">global keywords</a> as their property value. 2.194 + For readability they has not been repeated explicitly. 2.195 2.196 2.197 <h2>Planned Features</h2> 2.198 @@ -151,35 +72,32 @@ 2.199 2.200 <li>More interpolation modes for gradients: <a href="http://lists.w3.org/Archives/Public/www-style/2012Jan/0635.html">http://lists.w3.org/Archives/Public/www-style/2012Jan/0635.html</a> 2.201 2.202 - <li>Ability to reference an SVG paint server via url (maybe as element(<string>)?) 2.203 + <li>Ability to reference an SVG paint server via url (maybe as element(<<string>>)?) 2.204 </ol> 2.205 2.206 <!-- ====================================================================== --> 2.207 2.208 <h2 id="image-values"> 2.209 -Image Values: the <var><image></var> type</h2> 2.210 - 2.211 - <p> 2.212 - The ''<image>'' value type denotes a 2D image. It can be a 2.213 - <a href="#url-notation">url reference</a>, 2.214 - <a href="#image-notation">image notation</a>, 2.215 - <!-- <a href="#element-image">element reference</a>, --> 2.216 - or <a href="#gradients">gradient notation</a>. 2.217 - Its syntax is: 2.218 - 2.219 - <pre class="prod"><dfn id='image-type'><image></dfn> = <var><url></var> | <var><image-list></var> | <var><image-set></var> | <var><gradient></var></pre> 2.220 - 2.221 - <p> 2.222 - An ''<image>'' can be used in many CSS properties, 2.223 - including the 'background-image', 'list-style-image', 'cursor' properties [[!CSS21]] 2.224 - (where it replaces the ''<url>'' component in the property's value). 2.225 - 2.226 - <p> 2.227 - In some cases, an image is invalid, 2.228 - such as a ''<url>'' pointing to a resource that is not a valid image format. 2.229 - An <dfn>invalid image</dfn> is rendered as a solid-color ''transparent'' image with no intrinsic dimensions. 2.230 - However, <i>invalid images</i> have special behavior in some contexts, 2.231 - such as the ''image()'' notation. 2.232 +Image Values: the <<image>> type</h2> 2.233 + 2.234 + The <<image>> value type denotes a 2D image. It can be a 2.235 + <a href="#url-notation">url reference</a>, 2.236 + <a href="#image-notation">image notation</a>, 2.237 + <!-- <a href="#element-image">element reference</a>, --> 2.238 + or <a href="#gradients">gradient notation</a>. 2.239 + Its syntax is: 2.240 + 2.241 + <pre class="prod"><dfn><image></dfn> = <<url>> | image() | image-set() | element() | cross-fade() | <<gradient>></pre> 2.242 + 2.243 + An <<image>> can be used in many CSS properties, 2.244 + including the 'background-image', 'list-style-image', 'cursor' properties [[!CSS21]] 2.245 + (where it replaces the <<url>> component in the property's value). 2.246 + 2.247 + In some cases, an image is invalid, 2.248 + such as a <<url>> pointing to a resource that is not a valid image format. 2.249 + An <dfn>invalid image</dfn> is rendered as a solid-color ''transparent'' image with no intrinsic dimensions. 2.250 + However, <a>invalid images</a> have special behavior in some contexts, 2.251 + such as the ''image()'' notation. 2.252 2.253 2.254 <!-- 2.255 @@ -203,22 +121,20 @@ 2.256 2.257 2.258 <h3 id="url-notation"> 2.259 -Image References and Image Slices: the ''<url>'' type and ''url()'' notation</h3> 2.260 - 2.261 - <p> 2.262 - The simplest way to indicate an image is to reference an image file by URL. 2.263 - This can be done with the <a href="http://www.w3.org/TR/CSS21/syndata.html#uri">''url()'' notation</a>, defined in [[!CSS21]]. 2.264 +Image References and Image Slices: the <<url>> type and ''url()'' notation</h3> 2.265 + 2.266 + The simplest way to indicate an image is to reference an image file by URL. 2.267 + This can be done with the <a href="http://www.w3.org/TR/CSS21/syndata.html#uri">>url()'' notation</a>, defined in [[!CSS21]]. 2.268 2.269 <div class="example"> 2.270 - <p> 2.271 - In the example below, a background image is specified with ''url()''syntax: 2.272 + 2.273 + In the example below, a background image is specified with ''url()''syntax: 2.274 2.275 <pre>background-image: url(wavy.png);</pre> 2.276 </div> 2.277 2.278 - <p> 2.279 - If the UA cannot download, parse, or otherwise successfully display the contents at the URL as an image, 2.280 - it must be treated as an <i>invalid image</i>. 2.281 + If the UA cannot download, parse, or otherwise successfully display the contents at the URL as an image, 2.282 + it must be treated as an <a>invalid image</a>. 2.283 2.284 2.285 <!-- 2.286 @@ -251,8 +167,7 @@ 2.287 <h3 id="image-notation"> 2.288 Image Fallbacks and Annotations: the ''image()'' notation</h3> 2.289 2.290 - <p> 2.291 - The ''image()'' function allows an author to: 2.292 + The ''image()'' function allows an author to: 2.293 2.294 <ul> 2.295 <li> 2.296 @@ -265,33 +180,31 @@ 2.297 use a solid color as an image 2.298 </ul> 2.299 2.300 - <p> 2.301 - The ''image()'' notation is defined as: 2.302 - 2.303 - <pre class='prod'><br><!-- 2.304 - --><dfn id='image-list-type'><image-list></dfn> = image( <var><image-tags></var>? [ <var><image-src></var> , ]* [ <var><image-src></var> | <var><color></var> ] )<br><!-- 2.305 - --><dfn id='image-tags-type'><image-tags></dfn> = [ ltr | rtl ]
<!-- 2.306 - --><dfn id='image-src-type'><image-src></dfn> = [ <var><url></var> | <var><string></var> ]</pre> 2.307 - 2.308 - <p> 2.309 - Each ''<string>'' or ''<url>'' inside ''image()'' represents an image, 2.310 - just as if the <a href="#url-notation">''url()'' notation</a> had been used. 2.311 - As usual for URLs in CSS, 2.312 - relative URLs are resolved to an absolute URL 2.313 - (as described in Values & Units [[!CSS3VAL]]) 2.314 - when a specified ''image()'' value is computed. 2.315 + The ''image()'' notation is defined as: 2.316 + 2.317 + <pre class='prod'> 2.318 + <dfn>image()</dfn> = image( <<image-tags>>? [ <<image-src>> , ]* [ <<image-src>> | <<color>> ] ) 2.319 + <dfn><image-tags></dfn> = [ ltr | rtl ] 2.320 + <dfn><image-src></dfn> = [ <<url>> | <<string>> ] 2.321 + </pre> 2.322 + 2.323 + Each <<string>> or <<url>> inside ''image()'' represents an image, 2.324 + just as if the <a href="#url-notation">>url()'' notation</a> had been used. 2.325 + As usual for URLs in CSS, 2.326 + relative URLs are resolved to an absolute URL 2.327 + (as described in Values & Units [[!CSS3VAL]]) 2.328 + when a specified ''image()'' value is computed. 2.329 2.330 <h4 id="image-fragments"> 2.331 Image Fragments</h4> 2.332 2.333 - <p> 2.334 - When a URL specified in ''image()'' represents a portion of a resource 2.335 - (e.g. by the use of <a href="http://www.w3.org/TR/media-frags/#naming-space">media fragment identifiers</a>) 2.336 - that portion is clipped out of its context and used as a standalone image. 2.337 + When a URL specified in ''image()'' represents a portion of a resource 2.338 + (e.g. by the use of <a href="http://www.w3.org/TR/media-frags/#naming-space">media fragment identifiers</a>) 2.339 + that portion is clipped out of its context and used as a standalone image. 2.340 2.341 <div class="example"> 2.342 - <p> 2.343 - For example, given the following image and CSS: 2.344 + 2.345 + For example, given the following image and CSS: 2.346 2.347 <a href="images/sprites.svg"> 2.348 <img src="images/sprites.svg" height="20" width="180" alt="[9 circles, with 0 to 8 eighths filled in]"> 2.349 @@ -299,105 +212,100 @@ 2.350 2.351 <pre>background-image: image('sprites.svg#xywh=40,0,20,20')</pre> 2.352 2.353 - <p> 2.354 - ...the background of the element will be the portion of the image that starts at (40px,0px) and is 20px wide and tall, 2.355 - which is just the circle with a quarter filled in. 2.356 + ...the background of the element will be the portion of the image that starts at (40px,0px) and is 20px wide and tall, 2.357 + which is just the circle with a quarter filled in. 2.358 </div> 2.359 2.360 - <p> 2.361 - So that authors can take advantage of CSS's forwards-compatible parsing rules to provide a fallback for image slices, 2.362 - implementations that support the ''image()'' notation 2.363 - <em>must</em> support the <code>xywh=#,#,#,#</code> form of media fragment identifiers 2.364 - for images specified via ''image()''. [[!MEDIA-FRAGS]] 2.365 + So that authors can take advantage of CSS's forwards-compatible parsing rules to provide a fallback for image slices, 2.366 + implementations that support the ''image()'' notation 2.367 + <em>must</em> support the <code>xywh=#,#,#,#</code> form of media fragment identifiers 2.368 + for images specified via ''image()''. [[!MEDIA-FRAGS]] 2.369 2.370 <div class='example'> 2.371 - <p> 2.372 - Note that image fragments can also be used with the ''url()'' notation. 2.373 - However, a legacy UA that doesn't understand the media fragments notation 2.374 - will ignore the fragment and simply display the entirety of the image. 2.375 - 2.376 - <p> 2.377 - Since the ''image()'' notation requires UAs to support media fragments, 2.378 - authors can take advantage of CSS's forward-compatible parsing rules 2.379 - to provide a fallback when using an image fragment URL: 2.380 - 2.381 - <pre><!-- 2.382 - -->background-image: url('swirl.png'); /* old UAs */
<!-- 2.383 - -->background-image: image('sprites.png#xywh=10,30,60,20'); /* new UAs */</pre> 2.384 + Note that image fragments can also be used with the ''url()'' notation. 2.385 + However, a legacy UA that doesn't understand the media fragments notation 2.386 + will ignore the fragment and simply display the entirety of the image. 2.387 + 2.388 + Since the ''image()'' notation requires UAs to support media fragments, 2.389 + authors can take advantage of CSS's forward-compatible parsing rules 2.390 + to provide a fallback when using an image fragment URL: 2.391 + 2.392 + <pre> 2.393 + background-image: url('swirl.png'); /* old UAs */ 2.394 + background-image: image('sprites.png#xywh=10,30,60,20'); /* new UAs */ 2.395 + </pre> 2.396 </div> 2.397 2.398 <h4 id="image-fallbacks"> 2.399 Image Fallbacks</h4> 2.400 2.401 - <p> 2.402 - Multiple ''<image-src>s'' can be given separated by commas, 2.403 - in which case the function represents the first image that's not an <i>invalid image</i>. 2.404 - The final argument can specify a ''<color>'' to serve as an ultimate fallback; 2.405 - this can be used, e.g. for 'background-image', 2.406 - to ensure adequate contrast if none of the preceding ''<image-src>s'' can be used. 2.407 - If the final argument is a ''<color>'', 2.408 - it represents a solid-color image of the given color with no <i>intrinsic dimensions</i>. 2.409 - If all of the provided ''<image-src>s'' are <i>invalid images</i> 2.410 - and a fallback color was not provided as the last argument, 2.411 - the entire ''image()'' function must be treated as an <i>invalid image</i>. 2.412 + Multiple <<image-src>>s can be given separated by commas, 2.413 + in which case the function represents the first image that's not an <a>invalid image</a>. 2.414 + The final argument can specify a <<color>> to serve as an ultimate fallback; 2.415 + this can be used, e.g. for 'background-image', 2.416 + to ensure adequate contrast if none of the preceding <<image-src>>s can be used. 2.417 + If the final argument is a <<color>>, 2.418 + it represents a solid-color image of the given color with no <a>intrinsic dimensions</a>. 2.419 + If all of the provided <<image-src>>s are <a>invalid images</a> 2.420 + and a fallback color was not provided as the last argument, 2.421 + the entire ''image()'' function must be treated as an <a>invalid image</a>. 2.422 2.423 <div class="example"> 2.424 - <p> 2.425 - The rule below would tell the UA to load ''wavy.svg'' if it can; 2.426 - failing that to load ''wavy.png''; 2.427 - and failing that to display ''wavy.gif''. 2.428 - For example, the browser might not understand how to render SVG images, 2.429 - and the PNG may be temporarily 404 2.430 - (returning an HTML 404 page, which the browser can't decode as an image) 2.431 - due to a server move, 2.432 - so the GIF is used until one of the previous problems corrects itself. 2.433 - 2.434 - <pre>background-image: image("wavy.svg", 'wavy.png' , "wavy.gif");</pre> 2.435 + 2.436 + The rule below would tell the UA to load "wavy.svg" if it can; 2.437 + failing that to load "wavy.png"; 2.438 + and failing that to display "wavy.gif". 2.439 + For example, the browser might not understand how to render SVG images, 2.440 + and the PNG may be temporarily 404 2.441 + (returning an HTML 404 page, which the browser can't decode as an image) 2.442 + due to a server move, 2.443 + so the GIF is used until one of the previous problems corrects itself. 2.444 + 2.445 + <pre>background-image: image("wavy.svg", "wavy.png" , "wavy.gif");</pre> 2.446 </div> 2.447 2.448 <div class='example'> 2.449 - <p> 2.450 - The fallback color can be used to ensure that text is still readable 2.451 - even when the image fails to load. 2.452 - For example, the following code works fine if the image is rectangular and has no transparency: 2.453 - 2.454 - <pre><!-- 2.455 - -->body { color: black; background: white; }
<!-- 2.456 - -->p.special { color: white; background: url("dark.png") black; }</pre> 2.457 - 2.458 - <p> 2.459 - When the image doesn't load, 2.460 - the background color is still there to ensure that the white text is readable. 2.461 - However, if the image has some transparency, 2.462 - the black will be visible behind it, 2.463 - which is probably not desired. 2.464 - The ''image()'' function addresses this: 2.465 - 2.466 - <pre><!-- 2.467 - -->body { color: black; background: white; }
<!-- 2.468 - -->p.special { color: white; background: image("dark.png", black); }</pre> 2.469 - 2.470 - <p> 2.471 - Now, the black won't show at all if the image loads, 2.472 - but if for whatever reason the image fails, 2.473 - it'll pop in and prevent the white text from being set against a white background. 2.474 + 2.475 + The fallback color can be used to ensure that text is still readable 2.476 + even when the image fails to load. 2.477 + For example, the following code works fine if the image is rectangular and has no transparency: 2.478 + 2.479 + <pre> 2.480 + body { color: black; background: white; } 2.481 + p.special { color: white; background: url("dark.png") black; } 2.482 + </pre> 2.483 + 2.484 + When the image doesn't load, 2.485 + the background color is still there to ensure that the white text is readable. 2.486 + However, if the image has some transparency, 2.487 + the black will be visible behind it, 2.488 + which is probably not desired. 2.489 + The ''image()'' function addresses this: 2.490 + 2.491 + <pre> 2.492 + body { color: black; background: white; } 2.493 + p.special { color: white; background: image("dark.png", black); } 2.494 + </pre> 2.495 + 2.496 + Now, the black won't show at all if the image loads, 2.497 + but if for whatever reason the image fails, 2.498 + it'll pop in and prevent the white text from being set against a white background. 2.499 </div> 2.500 2.501 - <p> 2.502 If a URL uses a fragment identifier syntax that the implementation does not understand, 2.503 or does not consider valid for that type of image, 2.504 - the URL must be treated as representing an <i>invalid image</i>. 2.505 + the URL must be treated as representing an <a>invalid image</a>. 2.506 <span class='note'>This error-handling is limited to image(), 2.507 - and not in the definition of URL, 2.508 - for legacy compat reasons.</span> 2.509 + and not in the definition of URL, 2.510 + for legacy compat reasons.</span> 2.511 2.512 <div class='example'> 2.513 - <p> 2.514 - For example, if a future specification defined a way to refer to a specific frame of an animated GIF with a fragment identifier, 2.515 - an author could write the following to get newer browsers to use the GIF's frame, 2.516 - and older browsers to instead download the fallback image: 2.517 - 2.518 - <pre>background-image: image('cat_meme.gif#frame=5', 'lolcat.png');</pre> 2.519 + 2.520 + For example, if a future specification defined a way to refer to a specific frame of an animated GIF with a fragment identifier, 2.521 + an author could write the following to get newer browsers to use the GIF's frame, 2.522 + and older browsers to instead download the fallback image: 2.523 + 2.524 + <pre>background-image: image("cat_meme.gif#frame=5", "lolcat.png");</pre> 2.525 </div> 2.526 2.527 <!-- XXX SVG fragment example with spriting / fallbacks (once SVG can provide this) --> 2.528 @@ -406,62 +314,60 @@ 2.529 Solid-color Images</h4> 2.530 2.531 <div class='example'> 2.532 - <p> 2.533 - At times, one may need a solid-color image for a property or function that does not accept the ''<color>'' type directly. 2.534 - The ''image()'' function can be used for this: 2.535 - by specifying <em>only</em> a color without any URLs, 2.536 - the function immediately falls back to representing a solid-color image of the chosen color. 2.537 + 2.538 + At times, one may need a solid-color image for a property or function that does not accept the <<color>> type directly. 2.539 + The ''image()'' function can be used for this: 2.540 + by specifying <em>only</em> a color without any URLs, 2.541 + the function immediately falls back to representing a solid-color image of the chosen color. 2.542 2.543 <pre>background-image: image(rgba(0,0,255,.5)), url("bg-image.png");</pre> 2.544 2.545 - <p> 2.546 - In the above, the background is the image "bg-image.png", 2.547 - overlaid with partially-transparent blue. 2.548 + In the above, the background is the image "bg-image.png", 2.549 + overlaid with partially-transparent blue. 2.550 </div> 2.551 2.552 2.553 <h4 id='bidi-images'> 2.554 Bidi-sensitive Images</h4> 2.555 2.556 - <p> 2.557 - Before listing any <code><image-src>s</code>, 2.558 - the author may specify a directionality for the image, 2.559 - similar to adding a <code>dir</code> attribute to an element in HTML. 2.560 - If a directional image is used on or in an element with opposite <a href="http://www.w3.org/TR/CSS21/visuren.html#propdef-direction">direction</a>, 2.561 - the image must be flipped in the inline direction 2.562 - (as if it was transformed by, e.g., <code>scaleX(-1)</code>, if the inline direction is the X axis). 2.563 - 2.564 - <p class='note'> 2.565 - Note that, absent this declaration, 2.566 - images default to no directionality at all, 2.567 - and thus don't care about the directionality of the surrounding element. 2.568 + Before listing any <code><image-src>s</code>, 2.569 + the author may specify a directionality for the image, 2.570 + similar to adding a <code>dir</code> attribute to an element in HTML. 2.571 + If a directional image is used on or in an element with opposite <a href="http://www.w3.org/TR/CSS21/visuren.html#propdef-direction">direction</a>, 2.572 + the image must be flipped in the inline direction 2.573 + (as if it was transformed by, e.g., <code>scaleX(-1)</code>, if the inline direction is the X axis). 2.574 + 2.575 + Note: Absent this declaration, 2.576 + images default to no directionality at all, 2.577 + and thus don't care about the directionality of the surrounding element. 2.578 2.579 <div class='example'> 2.580 - <p> 2.581 - A list may use an arrow for a bullet that points into the content. 2.582 - If the list can contain both LTR and RTL text, 2.583 - though, the bullet may be on the left or the right, 2.584 - and an image designed to point into the text on one side will point out of the text on the other side. 2.585 - This can be fixed with code like: 2.586 - 2.587 - <pre><!-- 2.588 - --><ul style="list-style-image: image(ltr 'arrow.png');">
<!-- 2.589 - --> <li dir='ltr'>My bullet is on the left!</li>
<!-- 2.590 - --> <li dir='rtl'>MY BULLET IS ON THE RIGHT!</li>
<!-- 2.591 - --></ul></pre> 2.592 - 2.593 - <p> 2.594 + 2.595 + A list may use an arrow for a bullet that points into the content. 2.596 + If the list can contain both LTR and RTL text, 2.597 + though, the bullet may be on the left or the right, 2.598 + and an image designed to point into the text on one side will point out of the text on the other side. 2.599 + This can be fixed with code like: 2.600 + 2.601 + <pre> 2.602 + <ul style="list-style-image: image(ltr 'arrow.png');"> 2.603 + <li dir='ltr'>My bullet is on the left!</li> 2.604 + <li dir='rtl'>MY BULLET IS ON THE RIGHT!</li> 2.605 + </ul> 2.606 + </pre> 2.607 + 2.608 This should render something like: 2.609 2.610 - <pre><!-- 2.611 - -->⇒ My bullet is on the left!
<!-- 2.612 - --> !THGIR EHT NO SI TELLUB YM ⇐</pre> 2.613 - 2.614 - <p> 2.615 - In LTR list items, the image will be used as-is. 2.616 - In the RTL list items, however, 2.617 - it will be flipped in the inline direction, 2.618 - so it still points into the content. 2.619 + <pre> 2.620 + ⇒ My bullet is on the left! 2.621 + !THGIR EHT NO SI TELLUB YM ⇐ 2.622 + </pre> 2.623 + 2.624 + In LTR list items, the image will be used as-is. 2.625 + In the RTL list items, however, 2.626 + it will be flipped in the inline direction, 2.627 + so it still points into the content. 2.628 + 2.629 </div> 2.630 2.631 <!-- 2.632 @@ -494,17 +400,16 @@ 2.633 <h3 id='image-set-notation'> 2.634 Resolution Negotiation: the ''image-set()'' notation</h3> 2.635 2.636 - <p> 2.637 - Delivering the most appropriate image resolution for a user's device can be a difficult task. 2.638 - Ideally, images should be in the same resolution as the device they're being viewed in, 2.639 - which can vary between users. 2.640 - However, other factors can factor into the decision of which image to send; 2.641 - for example, if the user is on a slow mobile connection, 2.642 - they may prefer to receive lower-res images 2.643 - rather than waiting for a large proper-res image to load. 2.644 - The ''image-set()'' function allows an author to ignore most of these issues, 2.645 - simply providing multiple resolutions of an image 2.646 - and letting the UA decide which is most appropriate in a given situation. 2.647 + Delivering the most appropriate image resolution for a user's device can be a difficult task. 2.648 + Ideally, images should be in the same resolution as the device they're being viewed in, 2.649 + which can vary between users. 2.650 + However, other factors can factor into the decision of which image to send; 2.651 + for example, if the user is on a slow mobile connection, 2.652 + they may prefer to receive lower-res images 2.653 + rather than waiting for a large proper-res image to load. 2.654 + The ''image-set()'' function allows an author to ignore most of these issues, 2.655 + simply providing multiple resolutions of an image 2.656 + and letting the UA decide which is most appropriate in a given situation. 2.657 2.658 <p class='issue'> 2.659 This solution assumes that resolution is a proxy for filesize, 2.660 @@ -514,52 +419,45 @@ 2.661 pixel-optimized bitmap for low-res, 2.662 and same vector again for low-bandwidth (because it's much smaller, even though it's higher resolution). 2.663 2.664 - <p> 2.665 - The syntax for ''image-set()'' is: 2.666 - 2.667 - <pre class='prod'>
<!-- 2.668 - --><dfn id='image-set-type'><image-set></dfn> = image-set( [ <var><image-set-decl></var>, ]* [ <var><image-set-decl></var> | <var><color></var>] )
<!-- 2.669 - --><dfn id='image-set-decl-type'><image-set-decl></dfn> = [ <var><image></var> | <var><string></var> ] <var><resolution></var></pre> 2.670 - 2.671 - <p> 2.672 - The ''image-set()'' function can not be nested inside of itself, 2.673 - either directly 2.674 - or indirectly 2.675 - (as an argument to another <var><image></var> type). 2.676 + The syntax for ''image-set()'' is: 2.677 + 2.678 + <pre class='prod'> 2.679 + <dfn>image-set()</dfn> = image-set( [ <<image-set-decl>>, ]* [ <<image-set-decl>> | <<color>>] ) 2.680 + <dfn><image-set-decl></dfn> = [ <<image>> | <<string>> ] <<resolution>></pre> 2.681 + 2.682 + The ''image-set()'' function can not be nested inside of itself, 2.683 + either directly 2.684 + or indirectly 2.685 + (as an argument to another <<image>> type). 2.686 2.687 <p class='issue'> 2.688 - WebKit's experimental implementation has an 'x' unit 2.689 - which is identical to 'dppx'. 2.690 + WebKit's experimental implementation has an ''x'' unit 2.691 + which is identical to ''dppx''. 2.692 Should we add it? 2.693 2.694 - <p> 2.695 - Each ''<string>'' or ''<url>'' inside ''image-set()'' represents an image, 2.696 - just like in ''image()''. 2.697 - 2.698 - <p> 2.699 - Every <var><image-set-decl></var> in a given ''image-set()'' must have a different <var><resolution></var>, 2.700 - or else the function is invalid. 2.701 - 2.702 - <p> 2.703 - The value that a given ''image-set()'' represents is determined by 2.704 - the UA first ordering the set of <var><image-set-decl></var>s 2.705 - in a UA-determined order 2.706 - (which should be based on the <var><resolution></var> of each <var><image-set-decl></var>, 2.707 - but may include other factors that the UA deems relevant, 2.708 - such as connection speed). 2.709 - The function then represents the first such image that is not an <i>invalid image</i>. 2.710 - 2.711 - <p> 2.712 - If a fallback color was provided, 2.713 - the UA may decide at any point that the remaining <var><image-set-decl></var>s are unsuitable, 2.714 - and choose to use the fallback color instead, 2.715 - in which case the function represents a solid-color image of the given color with no <i>intrinsic dimensions</i>. 2.716 - 2.717 - <p> 2.718 - If <em>all</em> of the <var><image-set-decl></var>s represent <i>invalid images</i>, 2.719 - then if a fallback color was provided, 2.720 - the function represents a solid-color image of the given color with no <i>intrinsic dimensions</i>; 2.721 - otherwise, the function represents an <i>invalid image</i>. 2.722 + Each <<string>> or <<url>> inside ''image-set()'' represents an image, 2.723 + just like in ''image()''. 2.724 + 2.725 + Every <<image-set-decl>> in a given ''image-set()'' must have a different <<resolution>>, 2.726 + or else the function is invalid. 2.727 + 2.728 + The value that a given ''image-set()'' represents is determined by 2.729 + the UA first ordering the set of <<image-set-decl>>s 2.730 + in a UA-determined order 2.731 + (which should be based on the <<resolution>> of each <<image-set-decl>>, 2.732 + but may include other factors that the UA deems relevant, 2.733 + such as connection speed). 2.734 + The function then represents the first such image that is not an <a>invalid image</a>. 2.735 + 2.736 + If a fallback color was provided, 2.737 + the UA may decide at any point that the remaining <<image-set-decl>>s are unsuitable, 2.738 + and choose to use the fallback color instead, 2.739 + in which case the function represents a solid-color image of the given color with no <a>intrinsic dimensions</a>. 2.740 + 2.741 + If <em>all</em> of the <<image-set-decl>>s represent <a>invalid images</a>, 2.742 + then if a fallback color was provided, 2.743 + the function represents a solid-color image of the given color with no <a>intrinsic dimensions</a>; 2.744 + otherwise, the function represents an <a>invalid image</a>. 2.745 2.746 <p class='issue'> 2.747 HTML currently doesnt' do fallback if the first-chosen image doesn't load. 2.748 @@ -567,12 +465,11 @@ 2.749 either by convincing them to do fallback, 2.750 or by removing our own fallback. 2.751 2.752 - <p> 2.753 - If an <var><image-set-decl></var> is chosen and successfully loaded, 2.754 - the associated <var><resolution></var> is the image's <i>intrinsic resolution</i>. 2.755 + If an <<image-set-decl>> is chosen and successfully loaded, 2.756 + the associated <<resolution>> is the image's <a>intrinsic resolution</a>. 2.757 2.758 <p class='issue'> 2.759 - It's been suggested that we don't need a full <var><resolution></var> here, 2.760 + It's been suggested that we don't need a full <<resolution>> here, 2.761 and should instead just use the ''x'' unit by itself. 2.762 This seems silly to me, 2.763 since the ''x'' unit is just an easier synonym for ''dppx'', 2.764 @@ -585,17 +482,17 @@ 2.765 (as the screening resolution can depend on the colors being used). 2.766 2.767 <div class='example'> 2.768 - <p> 2.769 - This example shows how to use ''image-set()'' to provide an image in three versions: 2.770 - a "normal" version, 2.771 - a "high-res" version, 2.772 - and an extra-high resolution version for use in high-quality printing 2.773 - (as printers can have <em>extremely</em> high resolution): 2.774 - 2.775 - <pre><!-- 2.776 - -->background-image: image-set( "foo.png" 1x,
<!-- 2.777 - --> "foo-2x.png" 2x,
<!-- 2.778 - --> "foo-print.png" 600dpi );</pre> 2.779 + This example shows how to use ''image-set()'' to provide an image in three versions: 2.780 + a "normal" version, 2.781 + a "high-res" version, 2.782 + and an extra-high resolution version for use in high-quality printing 2.783 + (as printers can have <em>extremely</em> high resolution): 2.784 + 2.785 + <pre> 2.786 + background-image: image-set( "foo.png" 1x, 2.787 + "foo-2x.png" 2x, 2.788 + "foo-print.png" 600dpi ); 2.789 + </pre> 2.790 </div> 2.791 2.792 2.793 @@ -622,28 +519,24 @@ 2.794 <h3 id='element-notation'> 2.795 Using Elements as Images: the ''element()'' notation</h3> 2.796 2.797 - <p> 2.798 - The ''element()'' function allows an author to use an element in the document as an image. 2.799 - As the referenced element changes appearance, 2.800 - the image changes as well. 2.801 - This can be used, for example, 2.802 - to create live previews of the next/previous slide in a slideshow, 2.803 - or to reference a canvas element for a fancy generated gradient or even an animated background. 2.804 - 2.805 - <p class='note'> 2.806 - Note that the ''element()'' function only reproduces the <em>appearance</em> of the referenced element, 2.807 - not the actual content and its structure. 2.808 - Authors should only use this for decorative purposes, 2.809 - and must not use ''element()'' to reproduce an element with significant content across the page. 2.810 - Instead, just insert multiple copies of the element into the document. 2.811 - 2.812 - <p> 2.813 - The syntax for ''element()'' is: 2.814 - 2.815 - <pre class=prod><dfn id='element-image-type'><element-image></dfn> = element( <var><id-selector></var> )</pre> 2.816 - 2.817 - <p> 2.818 - where ''<id-selector>'' is an ID selector [[!SELECT]]. 2.819 + The ''element()'' function allows an author to use an element in the document as an image. 2.820 + As the referenced element changes appearance, 2.821 + the image changes as well. 2.822 + This can be used, for example, 2.823 + to create live previews of the next/previous slide in a slideshow, 2.824 + or to reference a canvas element for a fancy generated gradient or even an animated background. 2.825 + 2.826 + Note: The ''element()'' function only reproduces the <em>appearance</em> of the referenced element, 2.827 + not the actual content and its structure. 2.828 + Authors should only use this for decorative purposes, 2.829 + and must not use ''element()'' to reproduce an element with significant content across the page. 2.830 + Instead, just insert multiple copies of the element into the document. 2.831 + 2.832 + The syntax for ''element()'' is: 2.833 + 2.834 + <pre class=prod><dfn>element()</dfn> = element( <<id-selector>> )</pre> 2.835 + 2.836 + where <<id-selector>> is an ID selector [[!SELECT]]. 2.837 2.838 <p class='issue'> 2.839 Need to add some syntax + API for referring to an element that's just in script, 2.840 @@ -668,24 +561,22 @@ 2.841 When we have overflow:paged, 2.842 how can we address a single page in the view? 2.843 2.844 - <p> 2.845 The ''element()'' function references the element matched by its argument. 2.846 If multiple elements are matched, 2.847 the function references the first such element. 2.848 2.849 - <p> 2.850 The image represented by the ''element()'' function can vary based on whether the element is visible in the document: 2.851 2.852 <dl> 2.853 - <dt>an <i title="element-not-rendered">element that is rendered</i> and is not a descendant of a replaced element 2.854 + <dt>an <a title="element-not-rendered">element that is rendered</a> and is not a descendant of a replaced element 2.855 <dd> 2.856 - <p> 2.857 - The function represents an image with its intrinsic size equal to the <dfn>decorated bounding box</dfn> of the referenced element: 2.858 + 2.859 + The function represents an image with its intrinsic size equal to the <dfn>decorated bounding box</dfn> of the referenced element: 2.860 2.861 <ul> 2.862 <li> 2.863 for an element rendered using a CSS rendering model, 2.864 - the <i>decorated bounding box</i> is the smallest axis-aligned rectangle 2.865 + the <a>decorated bounding box</a> is the smallest axis-aligned rectangle 2.866 that contains the <a href="http://www.w3.org/TR/2011/CR-css3-background-20110215/#border-image-area">border image areas</a> of all the fragments of the principal box 2.867 2.868 <li> 2.869 @@ -693,17 +584,15 @@ 2.870 <a href="http://www.w3.org/TR/SVGTiny12/intro.html#TermDecoratedBoundingBox">the decorated bounding box is defined by SVG</a> 2.871 </ul> 2.872 2.873 - <p class=note> 2.874 - Note: Because images clip anything outside their bounds by default, 2.875 - this means that decorations that extend outside the <i>decorated bounding box</i>, 2.876 - like box shadows, 2.877 - may be clipped. 2.878 - 2.879 - <p> 2.880 - The image is constructed by rendering the referenced element and its descendants 2.881 - (at the same size that they would be in the document) 2.882 - over an infinite ''transparent'' canvas, 2.883 - positioned so that the edges of the <i>decorated bounding box</i> are flush with the edges of the image. 2.884 + Note: Because images clip anything outside their bounds by default, 2.885 + this means that decorations that extend outside the <a>decorated bounding box</a>, 2.886 + like box shadows, 2.887 + may be clipped. 2.888 + 2.889 + The image is constructed by rendering the referenced element and its descendants 2.890 + (at the same size that they would be in the document) 2.891 + over an infinite ''transparent'' canvas, 2.892 + positioned so that the edges of the <a>decorated bounding box</a> are flush with the edges of the image. 2.893 2.894 <p class='issue'> 2.895 Requiring some degree of stacking context on the element appears to be required for an efficient implementation. 2.896 @@ -711,220 +600,211 @@ 2.897 Should it need to be a stacking context normally, 2.898 or can we just render it as a stacking context when rendering it to element()? 2.899 2.900 - <p> 2.901 - If the referenced element has a transform applied to it or an ancestor, 2.902 - the transform must be ignored when rendering the element as an image. [[!CSS3-TRANSFORMS]] 2.903 - 2.904 - <p> 2.905 - If the referenced element is broken across pages, 2.906 - the element is displayed as if the page content areas were joined flush in the pagination direction, 2.907 - with pages' edges corresponding to the initial containing block's start edge aligned. 2.908 - <span class='note'>Elements broken across lines or columns are just rendered with their <i>decorated bounding box</i>.</span> 2.909 - 2.910 - <p> 2.911 - Implementations may either re-use existing bitmap data generated for the referenced element 2.912 - or regenerate the display of the element to maximize quality at the image's size 2.913 - (for example, if the implementation detects that the referenced element is an SVG fragment); 2.914 - in the latter case, the layout of the referenced element in the image must not be changed by the regeneration process. 2.915 - That is, the image must look identical to the referenced element, 2.916 - modulo rasterization quality. 2.917 + If the referenced element has a transform applied to it or an ancestor, 2.918 + the transform must be ignored when rendering the element as an image. [[!CSS3-TRANSFORMS]] 2.919 + 2.920 + If the referenced element is broken across pages, 2.921 + the element is displayed as if the page content areas were joined flush in the pagination direction, 2.922 + with pages' edges corresponding to the initial containing block's start edge aligned. 2.923 + <span class='note'>Elements broken across lines or columns are just rendered with their <a>decorated bounding box</a>.</span> 2.924 + 2.925 + Implementations may either re-use existing bitmap data generated for the referenced element 2.926 + or regenerate the display of the element to maximize quality at the image's size 2.927 + (for example, if the implementation detects that the referenced element is an SVG fragment); 2.928 + in the latter case, the layout of the referenced element in the image must not be changed by the regeneration process. 2.929 + That is, the image must look identical to the referenced element, 2.930 + modulo rasterization quality. 2.931 2.932 <div class='example'> 2.933 - <p> 2.934 - As a somewhat silly example, a <code><p></code> element can be reused as a background elsewhere in the document: 2.935 - 2.936 - <pre><!-- 2.937 - --><style>
<!-- 2.938 - -->#src { color: white; background: lime; width: 300px; height: 40px; }
<!-- 2.939 - -->#dst { color: black; background: element(#src); padding: 20px; margin: 20px 0; }
<!-- 2.940 - --></style>
<!-- 2.941 - --><p id='src'>I'm an ordinary element!</p>
<!-- 2.942 - --><p id='dst'>I'm using the previous element as my background!</p></pre> 2.943 + 2.944 + As a somewhat silly example, a <code><p></code> element can be reused as a background elsewhere in the document: 2.945 + 2.946 + <pre> 2.947 + <style> 2.948 + #src { color: white; background: lime; width: 300px; height: 40px; } 2.949 + #dst { color: black; background: element(#src); padding: 20px; margin: 20px 0; } 2.950 + </style> 2.951 + <p id='src'>I'm an ordinary element!</p> 2.952 + <p id='dst'>I'm using the previous element as my background!</p> 2.953 + </pre> 2.954 2.955 <img src="images/element-function.png" alt=""> 2.956 </div> 2.957 2.958 2.959 - <dt>an <i title='element-not-rendered'>element that is not rendered</i>, but which <i title='paint-source'>provides a paint source</i> 2.960 + <dt>an <a title='element-not-rendered'>element that is not rendered</a>, but which <a title='paint-source'>provides a paint source</a> 2.961 <dd> 2.962 - <p> 2.963 - The function represents an image with the intrinsic size and appearance of the <i title=paint-source>paint source</i>. 2.964 - The host language defines the size and appearance of paint sources. 2.965 + The function represents an image with the intrinsic size and appearance of the <a title=paint-source>paint source</a>. 2.966 + The host language defines the size and appearance of paint sources. 2.967 2.968 <div class='example'> 2.969 - <p> 2.970 - For example, the ''element()'' function can reference an SVG <code><pattern></code> element in an HTML document: 2.971 - 2.972 - <pre><!-- 2.973 - --><!DOCTYPE html>
<!-- 2.974 - --><svg>
<!-- 2.975 - --> <defs>
<!-- 2.976 - --> <pattern id='pattern1'>
<!-- 2.977 - --> <path d='...'>
<!-- 2.978 - --> </pattern>
<!-- 2.979 - --> </defs>
<!-- 2.980 - --></svg>
<!-- 2.981 - --><p style="background: element(#pattern1)">
<!-- 2.982 - --> I'm using the pattern as a background!
<!-- 2.983 - --> If the pattern is changed or animated, 
<!-- 2.984 - --> my background will be updated too!
<!-- 2.985 - --></p></pre> 2.986 - 2.987 - <p> 2.988 - HTML also defines that a handful of elements, 2.989 - such as <code><canvas></code>, <code><img></code>, and <code><video></code>, 2.990 - provide a paint source. 2.991 - This means that CSS can, for example, 2.992 - reference a canvas that's being drawn into, 2.993 - but not displayed in the page: 2.994 - 2.995 - <pre><!-- 2.996 - --><!DOCTYPE html>
<!-- 2.997 - --><script>
<!-- 2.998 - --> var canvas = document.querySelector('#animated-bullet');
<!-- 2.999 - --> canvas.width = 20; canvas.height = 20;
<!-- 2.1000 - --> drawAnimation(canvas);
<!-- 2.1001 - --></script>
<!-- 2.1002 - --><canvas id='animated-bullet' style='display:none'></canvas>
<!-- 2.1003 - --><ul style="list-style-image: element(#animated-bullet);">
<!-- 2.1004 - --> <li>I'm using the canvas as a bullet!</li>
<!-- 2.1005 - --> <li>So am I!</li>
<!-- 2.1006 - --> <li>As the canvas is changed over time with Javascript,
<!-- 2.1007 - --> we'll all update our bullet image with it!</li>
<!-- 2.1008 - --></ul></pre> 2.1009 + For example, the ''element()'' function can reference an SVG <code><pattern></code> element in an HTML document: 2.1010 + 2.1011 + <pre> 2.1012 + <!DOCTYPE html> 2.1013 + <svg> 2.1014 + <defs> 2.1015 + <pattern id='pattern1'> 2.1016 + <path d='...'> 2.1017 + </pattern> 2.1018 + </defs> 2.1019 + </svg> 2.1020 + <p style="background: element(#pattern1)"> 2.1021 + I'm using the pattern as a background! 2.1022 + If the pattern is changed or animated, 2.1023 + my background will be updated too! 2.1024 + </p> 2.1025 + </pre> 2.1026 + 2.1027 + HTML also defines that a handful of elements, 2.1028 + such as <code><canvas></code>, <code><img></code>, and <code><video></code>, 2.1029 + provide a paint source. 2.1030 + This means that CSS can, for example, 2.1031 + reference a canvas that's being drawn into, 2.1032 + but not displayed in the page: 2.1033 + 2.1034 + <pre> 2.1035 + <!DOCTYPE html> 2.1036 + <script> 2.1037 + var canvas = document.querySelector('#animated-bullet'); 2.1038 + canvas.width = 20; canvas.height = 20; 2.1039 + drawAnimation(canvas); 2.1040 + </script> 2.1041 + <canvas id='animated-bullet' style='display:none'></canvas> 2.1042 + <ul style="list-style-image: element(#animated-bullet);"> 2.1043 + <li>I'm using the canvas as a bullet!</li> 2.1044 + <li>So am I!</li> 2.1045 + <li>As the canvas is changed over time with Javascript, 2.1046 + we'll all update our bullet image with it!</li> 2.1047 + </ul> 2.1048 + </pre> 2.1049 </div> 2.1050 2.1051 2.1052 <dt>anything else 2.1053 <dd> 2.1054 - <p> 2.1055 - The function represents an <i>invalid image</i>. 2.1056 + 2.1057 + The function represents an <a>invalid image</a>. 2.1058 2.1059 <div class='example'> 2.1060 - <p> 2.1061 - For example, all of the following ''element()'' uses will result in a transparent background: 2.1062 - 2.1063 - <pre><!-- 2.1064 - --><!DOCTYPE html>
<!-- 2.1065 - --><p id='one' style="display:none;">one</p>
<!-- 2.1066 - --><iframe src="http://example.com">
<!-- 2.1067 - --> <p id='two'>I'm fallback content!</p>
<!-- 2.1068 - --></iframe>
<!-- 2.1069 - --><ul>
<!-- 2.1070 - --> <li style="background: element(#one);">
<!-- 2.1071 - --> A display:none element isn't rendered, and a P element
<!-- 2.1072 - --> doesn't provide a paint source.
<!-- 2.1073 - --> </li>
<!-- 2.1074 - --> <li style="background: element(#two);">
<!-- 2.1075 - --> The descendants of a replaced element like an IFRAME
<!-- 2.1076 - --> can't be used in element() either.
<!-- 2.1077 - --> </li>
<!-- 2.1078 - --> <li style="background: element(#three);">
<!-- 2.1079 - --> There's no element with an id of "three", so this also
<!-- 2.1080 - --> gets rendered as a transparent image.
<!-- 2.1081 - --> </li>
<!-- 2.1082 - --></ul></pre> 2.1083 + 2.1084 + For example, all of the following ''element()'' uses will result in a transparent background: 2.1085 + 2.1086 + <pre> 2.1087 + <!DOCTYPE html> 2.1088 + <p id='one' style="display:none;">one</p> 2.1089 + <iframe src="http://example.com"> 2.1090 + <p id='two'>I'm fallback content!</p> 2.1091 + </iframe> 2.1092 + <ul> 2.1093 + <li style="background: element(#one);"> 2.1094 + A display:none element isn't rendered, and a P element 2.1095 + doesn't provide a paint source. 2.1096 + </li> 2.1097 + <li style="background: element(#two);"> 2.1098 + The descendants of a replaced element like an IFRAME 2.1099 + can't be used in element() either. 2.1100 + </li> 2.1101 + <li style="background: element(#three);"> 2.1102 + There's no element with an id of "three", so this also 2.1103 + gets rendered as a transparent image. 2.1104 + </li> 2.1105 + </ul> 2.1106 + </pre> 2.1107 </div> 2.1108 2.1109 </dl> 2.1110 2.1111 - <p> 2.1112 - An element is <dfn id='element-not-rendered' title='element-not-rendered'>not rendered</dfn> if it does not have an associated box. 2.1113 - This can happen, for example, 2.1114 - if the element or an ancestor is ''display:none''. 2.1115 - Host languages may define additional ways in which an element can be considered not rendered; 2.1116 - for example, in SVG, 2.1117 - any descendant of a <code><defs></code> element is considered to be not rendered. 2.1118 + An element is <dfn id='element-not-rendered' title='element-not-rendered'>not rendered</dfn> if it does not have an associated box. 2.1119 + This can happen, for example, 2.1120 + if the element or an ancestor is ''display:none''. 2.1121 + Host languages may define additional ways in which an element can be considered not rendered; 2.1122 + for example, in SVG, 2.1123 + any descendant of a <code><defs></code> element is considered to be not rendered. 2.1124 2.1125 <div class='example'> 2.1126 - <p> 2.1127 - The ''element()'' function can be put to many uses. 2.1128 - For example, it can be used to show a preview of the previous or next slide in a slideshow: 2.1129 - 2.1130 - <pre><!-- 2.1131 - --><!DOCTYPE html>
<!-- 2.1132 - --><script>
<!-- 2.1133 - -->function navigateSlides() {
<!-- 2.1134 - --> var currentSlide = ...;
<!-- 2.1135 - --> document.querySelector('#prev-slide').id = '';
<!-- 2.1136 - --> document.querySelector('#next-slide').id = '';
<!-- 2.1137 - --> currentSlide.previousElementSibling.id = 'prev-slide';
<!-- 2.1138 - --> currentSlide.nextElementSibling.id = 'next-slide';
<!-- 2.1139 - -->}
<!-- 2.1140 - --></script>
<!-- 2.1141 - --><style>
<!-- 2.1142 - -->#prev-preview, #next-preview { 
<!-- 2.1143 - --> position: fixed;
<!-- 2.1144 - --> ...
<!-- 2.1145 - -->}
<!-- 2.1146 - -->#prev-preview { background: element(#prev-slide); }
<!-- 2.1147 - -->#next-preview { background: element(#next-slide); }
<!-- 2.1148 - --></style>
<!-- 2.1149 - --><a id='prev-preview'>Previous Slide</a>
<!-- 2.1150 - --><a id='next-preview'>Next Slide</a>
<!-- 2.1151 - --><section class='slide'>...</section>
<!-- 2.1152 - --><section class='slide current-slide'>...</section>
<!-- 2.1153 - -->...</pre> 2.1154 - 2.1155 - <p> 2.1156 - In this example, the <code>navigateSlides</code> function updates the ids of the next and previous slides, 2.1157 - which are then displayed in small floating boxes alongside the slides. 2.1158 - Since you can't interact with the slides through the ''element()'' function (it's just an image), 2.1159 - you could even use <code>click</code> handlers on the preview boxes to help navigate through the page. 2.1160 + 2.1161 + The ''element()'' function can be put to many uses. 2.1162 + For example, it can be used to show a preview of the previous or next slide in a slideshow: 2.1163 + 2.1164 + <pre> 2.1165 + <!DOCTYPE html> 2.1166 + <script> 2.1167 + function navigateSlides() { 2.1168 + var currentSlide = ...; 2.1169 + document.querySelector('#prev-slide').id = ''; 2.1170 + document.querySelector('#next-slide').id = ''; 2.1171 + currentSlide.previousElementSibling.id = 'prev-slide'; 2.1172 + currentSlide.nextElementSibling.id = 'next-slide'; 2.1173 + } 2.1174 + </script> 2.1175 + <style> 2.1176 + #prev-preview, #next-preview { 2.1177 + position: fixed; 2.1178 + ... 2.1179 + } 2.1180 + #prev-preview { background: element(#prev-slide); } 2.1181 + #next-preview { background: element(#next-slide); } 2.1182 + </style> 2.1183 + <a id='prev-preview'>Previous Slide</a> 2.1184 + <a id='next-preview'>Next Slide</a> 2.1185 + <section class='slide'>...</section> 2.1186 + <section class='slide current-slide'>...</section> 2.1187 + ... 2.1188 + </pre> 2.1189 + 2.1190 + In this example, the <code>navigateSlides</code> function updates the ids of the next and previous slides, 2.1191 + which are then displayed in small floating boxes alongside the slides. 2.1192 + Since you can't interact with the slides through the ''element()'' function (it's just an image), 2.1193 + you could even use <code>click</code> handlers on the preview boxes to help navigate through the page. 2.1194 </div> 2.1195 2.1196 <h4 id='paint-sources'> 2.1197 Paint Sources</h4> 2.1198 2.1199 - <p> 2.1200 - Host languages may define that some elements provide a <dfn title="paint-source">paint source</dfn>. 2.1201 - Paint sources have an intrinsic width, height, and appearance, 2.1202 - separate from the process of rendering, 2.1203 - and so may be used as images even when they're <i title='element-not-rendered'>not rendered</i>. 2.1204 - 2.1205 - <p> 2.1206 - In HTML, the <code><img></code>, <code><video></code>, and <code><canvas></code> elements provide paint sources 2.1207 - (defined in each element's section in <a href='http://www.whatwg.org/specs/web-apps/current-work/multipage/'>HTML5</a>). 2.1208 - 2.1209 - <p> 2.1210 - In SVG, any element that provides a <a href='http://www.w3.org/TR/SVG/pservers.html'>paint server</a> provides a paint source. 2.1211 - <span class='note'>Note: In SVG1.1, 2.1212 - the <code><linearGradient></code>, 2.1213 - <code><radialGradient></code>, 2.1214 - and <code><pattern></code> elements 2.1215 - provide paint sources.</span> 2.1216 - They are drawn as described in the spec, 2.1217 - with the coordinate systems defined as follows: 2.1218 + Host languages may define that some elements provide a <dfn title="paint-source">paint source</dfn>. 2.1219 + Paint sources have an intrinsic width, height, and appearance, 2.1220 + separate from the process of rendering, 2.1221 + and so may be used as images even when they're <a title='element-not-rendered'>not rendered</a>. 2.1222 + 2.1223 + In HTML, the <code><img></code>, <code><video></code>, and <code><canvas></code> elements provide paint sources 2.1224 + (defined in each element's section in <a href='http://www.whatwg.org/specs/web-apps/current-work/multipage/'>HTML5</a>). 2.1225 + 2.1226 + In SVG, any element that provides a <a href='http://www.w3.org/TR/SVG/pservers.html'>paint server</a> provides a paint source. 2.1227 + <span class='note'>Note: In SVG1.1, 2.1228 + the <code><linearGradient></code>, 2.1229 + <code><radialGradient></code>, 2.1230 + and <code><pattern></code> elements 2.1231 + provide paint sources.</span> 2.1232 + They are drawn as described in the spec, 2.1233 + with the coordinate systems defined as follows: 2.1234 2.1235 <dl> 2.1236 <dt>objectBoundingBox 2.1237 <dd> 2.1238 - The coordinate system has its origin at the top left corner of the rectangle defined by the <i>concrete object size</i> that it's being drawn into, 2.1239 - and the same width and height as the <i>concrete object size</i>. 2.1240 - A single <a href="http://www.w3.org/TR/SVG/coords.html#Units">user coordinate</a> is the width and height of the <i>concrete object size</i>. 2.1241 + The coordinate system has its origin at the top left corner of the rectangle defined by the <a>concrete object size</a> that it's being drawn into, 2.1242 + and the same width and height as the <a>concrete object size</a>. 2.1243 + A single <a href="http://www.w3.org/TR/SVG/coords.html#Units">user coordinate</a> is the width and height of the <a>concrete object size</a>. 2.1244 2.1245 <dt>userSpaceOnUse 2.1246 <dd> 2.1247 - The coordinate system has its origin at the top left corner of the rectangle defined by the <i>concrete object size</i> that it's being drawn into, 2.1248 - and the same width and height as the <i>concrete object size</i>. 2.1249 + The coordinate system has its origin at the top left corner of the rectangle defined by the <a>concrete object size</a> that it's being drawn into, 2.1250 + and the same width and height as the <a>concrete object size</a>. 2.1251 <a href="http://www.w3.org/TR/SVG/coords.html#Units">User coordinates</a> are sized equivalently to the CSS ''px'' unit. 2.1252 </dl> 2.1253 2.1254 - <p class='note'> 2.1255 - It is expected that a future version of this module will define ways to refer to paint sources in external documents, 2.1256 - or ones that are created solely by script and never inserted into a document at all. 2.1257 + Note: It is expected that a future version of this module will define ways to refer to paint sources in external documents, 2.1258 + or ones that are created solely by script and never inserted into a document at all. 2.1259 2.1260 <h4 id='element-cycles'> 2.1261 Cycle Detection</h4> 2.1262 2.1263 - <p> 2.1264 - The ''element()'' function can produce nonsensical circular relationships, 2.1265 - such as an element using itself as its own background. 2.1266 - These relationships can be easily and reliably detected and resolved, however, 2.1267 - by keeping track of a dependency graph and using common cycle-detection algorithms. 2.1268 - 2.1269 - <p> 2.1270 - The dependency graph consists of edges such that: 2.1271 + The ''element()'' function can produce nonsensical circular relationships, 2.1272 + such as an element using itself as its own background. 2.1273 + These relationships can be easily and reliably detected and resolved, however, 2.1274 + by keeping track of a dependency graph and using common cycle-detection algorithms. 2.1275 + 2.1276 + The dependency graph consists of edges such that: 2.1277 2.1278 <ul> 2.1279 <li> 2.1280 @@ -941,9 +821,8 @@ 2.1281 a <code><use></code> element depends on the element it referenced. 2.1282 </ul> 2.1283 2.1284 - <p> 2.1285 - If the graph contains a cycle, 2.1286 - any ''element()'' functions participating in the cycle are <i>invalid images</i>. 2.1287 + If the graph contains a cycle, 2.1288 + any ''element()'' functions participating in the cycle are <a>invalid images</a>. 2.1289 2.1290 2.1291 <!-- 2.1292 @@ -969,54 +848,47 @@ 2.1293 <h3 id='cross-fade-function'> 2.1294 Combining images: the ''cross-fade()'' notation</h3> 2.1295 2.1296 - <p> 2.1297 - When transitioning between images, 2.1298 - CSS requires a way to explicitly refer to the intermediate image 2.1299 - that is a combination of the start and end images. 2.1300 - This is accomplished with the ''cross-fade()'' function, 2.1301 - which indicates the two images to be combined 2.1302 - and how far along in the transition the combination is. 2.1303 - 2.1304 - <p class="note"> 2.1305 - Authors can also use the ''cross-fade()'' function for many simple image manipulations, 2.1306 - such as tinting an image with a solid color 2.1307 - or highlighting a particular area of the page by combining an image with a radial gradient. 2.1308 - 2.1309 - <p> 2.1310 - The syntax for ''cross-fade()'' is defined as: 2.1311 - 2.1312 - <pre class=prod><dfn><image-combination></dfn> = cross-fade( <var><percentage></var>? <var><image></var> [, <var><image></var> | <var><color></var> ]? )</pre> 2.1313 - 2.1314 - <p> 2.1315 - The function represents an image generated by 2.1316 - combining two images. 2.1317 - 2.1318 - <p> 2.1319 - The <var><percentage></var> represents how much of the first image is retained 2.1320 - when it is blended with the second image. 2.1321 - The <var><percentage></var> must be between ''0%'' and ''100%'' inclusive; 2.1322 - any other value is invalid. 2.1323 - If omitted, 2.1324 - it defaults to the value ''50%''. 2.1325 - 2.1326 - <p> 2.1327 - If the last argument is a <var><color></var>, 2.1328 - it represents a solid-color image with the same intrinsic dimensions as the first image. 2.1329 - If omitted, 2.1330 - it defaults to the color ''transparent''. 2.1331 - 2.1332 - <p> 2.1333 - More precisely, 2.1334 - given ''cross-fade(<var>p</var> <var>A</var>, <var>B</var>)'', 2.1335 - where <var>A</var> and <var>B</var> are images 2.1336 - and <var>p</var> is a percentage between 0% and 100%, 2.1337 - the function represents an image 2.1338 - with width equal to <code>width<sub>A</sub> × <var>p</var> + width<sub>B</sub> × (1-<var>p</var>)</code> 2.1339 - and height equal to <code>height<sub>A</sub> × <var>p</var> + height<sub>B</sub> × (1-<var>p</var>)</code>. 2.1340 - The contents of the image must be constructed by 2.1341 - first scaling <var>A</var> and <var>B</var> to the size of the generated image, 2.1342 - then applying <code>dissolve(<var>A</var>,<var>p</var>) plus dissolve(<var>B</var>,1-<var>p</var>)</code>. 2.1343 - The "dissolve()" function and "plus" compositing operator are defined in the literature by Porter-Duff. [[PORTERDUFF]] 2.1344 + When transitioning between images, 2.1345 + CSS requires a way to explicitly refer to the intermediate image 2.1346 + that is a combination of the start and end images. 2.1347 + This is accomplished with the ''cross-fade()'' function, 2.1348 + which indicates the two images to be combined 2.1349 + and how far along in the transition the combination is. 2.1350 + 2.1351 + Note: Authors can also use the ''cross-fade()'' function for many simple image manipulations, 2.1352 + such as tinting an image with a solid color 2.1353 + or highlighting a particular area of the page by combining an image with a radial gradient. 2.1354 + 2.1355 + The syntax for ''cross-fade()'' is defined as: 2.1356 + 2.1357 + <pre class=prod><dfn>cross-fade()</dfn> = cross-fade( <<percentage>>? <<image>> [, <<image>> | <<color>> ]? )</pre> 2.1358 + 2.1359 + The function represents an image generated by 2.1360 + combining two images. 2.1361 + 2.1362 + The <<percentage>> represents how much of the first image is retained 2.1363 + when it is blended with the second image. 2.1364 + The <<percentage>> must be between ''0%'' and ''100%'' inclusive; 2.1365 + any other value is invalid. 2.1366 + If omitted, 2.1367 + it defaults to the value ''50%''. 2.1368 + 2.1369 + If the last argument is a <<color>>, 2.1370 + it represents a solid-color image with the same intrinsic dimensions as the first image. 2.1371 + If omitted, 2.1372 + it defaults to the color ''transparent''. 2.1373 + 2.1374 + More precisely, 2.1375 + given ''cross-fade(<var>p</var> <var>A</var>, <var>B</var>)'', 2.1376 + where <var>A</var> and <var>B</var> are images 2.1377 + and <var>p</var> is a percentage between 0% and 100%, 2.1378 + the function represents an image 2.1379 + with width equal to <code>width<sub>A</sub> × <var>p</var> + width<sub>B</sub> × (1-<var>p</var>)</code> 2.1380 + and height equal to <code>height<sub>A</sub> × <var>p</var> + height<sub>B</sub> × (1-<var>p</var>)</code>. 2.1381 + The contents of the image must be constructed by 2.1382 + first scaling <var>A</var> and <var>B</var> to the size of the generated image, 2.1383 + then applying <code>dissolve(<var>A</var>,<var>p</var>) plus dissolve(<var>B</var>,1-<var>p</var>)</code>. 2.1384 + The "dissolve()" function and "plus" compositing operator are defined in the literature by Porter-Duff. [[PORTERDUFF]] 2.1385 2.1386 2.1387 <!-- 2.1388 @@ -1044,23 +916,24 @@ 2.1389 <h2 id="gradients"> 2.1390 Gradients</h2> 2.1391 2.1392 - <p> 2.1393 - A gradient is an image that smoothly fades from one color to another. 2.1394 - These are commonly used for subtle shading in background images, buttons, and many other things. 2.1395 - The gradient notations described in this section allow an author to specify such an image in a terse syntax, 2.1396 - so that the UA can generate the image automatically when rendering the page. 2.1397 - The syntax of a <var><gradient></var> is: 2.1398 - 2.1399 - <pre class=prod><dfn id='gradient-type'><gradient></dfn> = [ 
<!-- 2.1400 - --> <var><linear-gradient></var> | <var><repeating-linear-gradient></var> | 
<!-- 2.1401 - --> <var><radial-gradient></var> | <var><repeating-radial-gradient></var> | 
<!-- 2.1402 - --> <var><conic-gradient></var> | <var><repeating-conic-gradient></var> ]</pre> 2.1403 + A gradient is an image that smoothly fades from one color to another. 2.1404 + These are commonly used for subtle shading in background images, buttons, and many other things. 2.1405 + The gradient notations described in this section allow an author to specify such an image in a terse syntax, 2.1406 + so that the UA can generate the image automatically when rendering the page. 2.1407 + The syntax of a <<gradient>> is: 2.1408 + 2.1409 + <pre class=prod> 2.1410 + <dfn id='gradient-type'><gradient></dfn> = [ 2.1411 + <<linear-gradient>> | <<repeating-linear-gradient>> | 2.1412 + <<radial-gradient>> | <<repeating-radial-gradient>> | 2.1413 + <<conic-gradient>> | <<repeating-conic-gradient>> ] 2.1414 + </pre> 2.1415 2.1416 <div class=example> 2.1417 - <p> 2.1418 - As with the other <var><image></var> types defined in this specification, 2.1419 - gradients can be used in any property that accepts images. 2.1420 - For example: 2.1421 + 2.1422 + As with the other <<image>> types defined in this specification, 2.1423 + gradients can be used in any property that accepts images. 2.1424 + For example: 2.1425 2.1426 <ul> 2.1427 <li><code>background: linear-gradient(white, gray);</code> 2.1428 @@ -1068,20 +941,18 @@ 2.1429 </ul> 2.1430 </div> 2.1431 2.1432 - <p> 2.1433 - A gradient is drawn into a box with the dimensions of the <i>concrete object size</i>, 2.1434 - referred to as the <dfn>gradient box</dfn>. 2.1435 - However, the gradient itself has no <i>intrinsic dimensions</i>. 2.1436 + A gradient is drawn into a box with the dimensions of the <a>concrete object size</a>, 2.1437 + referred to as the <dfn>gradient box</dfn>. 2.1438 + However, the gradient itself has no <a>intrinsic dimensions</a>. 2.1439 2.1440 <div class='example'> 2.1441 - <p> 2.1442 - For example, if you use a gradient as a background, 2.1443 - by default the gradient will draw into a <i>gradient box</i> the size of the element's padding box. 2.1444 - If 'background-size' is explicitly set to a value such as ''100px 200px'', 2.1445 - then the <i>gradient box</i> will be 100px wide and 200px tall. 2.1446 - Similarly, for a gradient used as a 'list-style-image', 2.1447 - the box would be a 1em square, 2.1448 - which is the <i>default object size</i> for that property. 2.1449 + For example, if you use a gradient as a background, 2.1450 + by default the gradient will draw into a <a>gradient box</a> the size of the element's padding box. 2.1451 + If 'background-size' is explicitly set to a value such as ''100px 200px'', 2.1452 + then the <a>gradient box</a> will be 100px wide and 200px tall. 2.1453 + Similarly, for a gradient used as a 'list-style-image', 2.1454 + the box would be a 1em square, 2.1455 + which is the <a>default object size</a> for that property. 2.1456 </div> 2.1457 2.1458 2.1459 @@ -1108,38 +979,33 @@ 2.1460 <h3 id='linear-gradients'> 2.1461 Linear Gradients: the ''linear-gradient()'' notation</h3> 2.1462 2.1463 - <p> 2.1464 - A linear gradient is created by specifying a gradient line 2.1465 - and then several colors placed along that line. 2.1466 - The image is constructed by creating an infinite canvas 2.1467 - and painting it with lines perpendicular to the gradient line, 2.1468 - with the color of the painted line being the color of the gradient line where the two intersect. 2.1469 - This produces a smooth fade from each color to the next, 2.1470 - progressing in the specified direction. 2.1471 - 2.1472 -<!-- ====================================================================== --> 2.1473 + A linear gradient is created by specifying a <dfn>gradient line</dfn> 2.1474 + and then several colors placed along that line. 2.1475 + The image is constructed by creating an infinite canvas 2.1476 + and painting it with lines perpendicular to the gradient line, 2.1477 + with the color of the painted line being the color of the gradient line where the two intersect. 2.1478 + This produces a smooth fade from each color to the next, 2.1479 + progressing in the specified direction. 2.1480 2.1481 <h4 class='no-toc' id='linear-gradient-syntax'> 2.1482 linear-gradient() syntax</h4> 2.1483 2.1484 - <p>The linear gradient syntax is: 2.1485 - 2.1486 - <pre class=prod><!-- 2.1487 - --><dfn id='linear-gradient-type'><linear-gradient></dfn> = linear-gradient(
<!-- 2.1488 - --> [ [ <var><angle></var> | to <var><side-or-corner></var> ] ,]? 
<!-- 2.1489 - --> <var><color-stop-list></var>
<!-- 2.1490 - -->)
<!-- 2.1491 - -->
<!-- 2.1492 - --><dfn id='side-or-corner'><side-or-corner></dfn> = [left | right] || [top | bottom]</pre> 2.1493 - 2.1494 - <p> 2.1495 - The first argument to the function specifies the <dfn>gradient line</dfn>, 2.1496 - which gives the gradient a direction and determines how color-stops are positioned. 2.1497 - It may be omitted; 2.1498 - if so, it defaults to ''to bottom''. 2.1499 - 2.1500 - <p> 2.1501 - The <i title="gradient line">gradient line's</i> direction may be specified in two ways: 2.1502 +The linear gradient syntax is: 2.1503 + 2.1504 + <pre class=prod> 2.1505 + <dfn>linear-gradient()</dfn> = linear-gradient( 2.1506 + [ [ <<angle>> | to <<side-or-corner>> ] ,]? 2.1507 + <<color-stop-list>> 2.1508 + ) 2.1509 + <dfn><side-or-corner></dfn> = [left | right] || [top | bottom] 2.1510 + </pre> 2.1511 + 2.1512 + The first argument to the function specifies the <a>gradient line</a>, 2.1513 + which gives the gradient a direction and determines how color-stops are positioned. 2.1514 + It may be omitted; 2.1515 + if so, it defaults to ''to bottom''. 2.1516 + 2.1517 + The <a>gradient line's</a> direction may be specified in two ways: 2.1518 2.1519 <dl> 2.1520 <dt>using angles 2.1521 @@ -1151,117 +1017,106 @@ 2.1522 2.1523 <dt>using keywords 2.1524 <dd> 2.1525 - <p> 2.1526 - If the argument is ''to top'', ''to right'', ''to bottom'', or ''to left'', 2.1527 - the angle of the <i>gradient line</i> is ''0deg'', ''90deg'', ''180deg'', or ''270deg'', respectively. 2.1528 - <p> 2.1529 - If the argument instead specifies a corner of the box such as ''to top left'', 2.1530 - the <i>gradient line</i> must be angled such that it points into the same quadrant as the specified corner, 2.1531 - and is perpendicular to a line intersecting the two neighboring corners of the <i>gradient box</i>. 2.1532 - <span class='note'>This causes a color-stop at 50% to intersect the two neighboring corners (see <a href='#corner-gradient-example'>example</a>).</span> 2.1533 - 2.1534 + If the argument is ''to top'', ''to right'', ''to bottom'', or ''to left'', 2.1535 + the angle of the <a>gradient line</a> is ''0deg'', ''90deg'', ''180deg'', or ''270deg'', respectively. 2.1536 + 2.1537 + If the argument instead specifies a corner of the box such as ''to top left'', 2.1538 + the <a>gradient line</a> must be angled such that it points into the same quadrant as the specified corner, 2.1539 + and is perpendicular to a line intersecting the two neighboring corners of the <a>gradient box</a>. 2.1540 + <span class='note'>This causes a color-stop at 50% to intersect the two neighboring corners (see <a href='#corner-gradient-example'>example</a>).</span> 2.1541 </dl> 2.1542 2.1543 - <p> 2.1544 - Starting from the center of the <i>gradient box</i>, 2.1545 - extend a line at the specified angle in both directions. 2.1546 - The ending point is the point on the <i>gradient line</i> 2.1547 - where a line drawn perpendicular to the <i>gradient line</i> 2.1548 - would intersect the corner of the <i>gradient box</i> in the specified direction. 2.1549 - The starting point is determined identically, but in the opposite direction. 2.1550 - 2.1551 - <p class='note'> 2.1552 - It is expected that the next level of this module will provide the ability to define the gradient's direction relative to the current text direction and writing-mode. 2.1553 + Starting from the center of the <a>gradient box</a>, 2.1554 + extend a line at the specified angle in both directions. 2.1555 + The ending point is the point on the <a>gradient line</a> 2.1556 + where a line drawn perpendicular to the <a>gradient line</a> 2.1557 + would intersect the corner of the <a>gradient box</a> in the specified direction. 2.1558 + The starting point is determined identically, but in the opposite direction. 2.1559 + 2.1560 + Note: It is expected that the next level of this module will provide the ability to define the gradient's direction relative to the current text direction and writing-mode. 2.1561 2.1562 <div class=example> 2.1563 <div style="overflow: hidden"> 2.1564 <img style="float: right; margin-left: 1em;" src='images/gradient-diagram.png' alt="[An image showing a box with a background shading gradually from white in the bottom-left corner to black in the top-right corner. There is a line, illustrating the gradient line, angled at 45 degrees and passing through the center of the box. The starting point and ending point of the gradient line are indicated by the intersection of the gradient line with two additional lines that pass through the bottom-left and top-right corners of the box.]"> 2.1565 - 2.1566 - <p> 2.1567 - This example illustrates visually how to calculate the <i>gradient line</i> from the rules above. 2.1568 - This shows the starting and ending point of the <i>gradient line</i>, 2.1569 - long with the actual gradient, 2.1570 - produced by an element with ''background: linear-gradient(45deg, white, black);''. 2.1571 - 2.1572 - <p> 2.1573 - Notice how, though the starting point and ending point are outside of the box, 2.1574 - they're positioned precisely right so that the gradient is pure white <em>exactly</em> at the corner, 2.1575 - and pure black <em>exactly</em> at the opposite corner. 2.1576 - That's intentional, and will always be true for linear gradients. 2.1577 + 2.1578 + This example illustrates visually how to calculate the <a>gradient line</a> from the rules above. 2.1579 + This shows the starting and ending point of the <a>gradient line</a>, 2.1580 + long with the actual gradient, 2.1581 + produced by an element with ''background: linear-gradient(45deg, white, black);''. 2.1582 + 2.1583 + Notice how, though the starting point and ending point are outside of the box, 2.1584 + they're positioned precisely right so that the gradient is pure white <em>exactly</em> at the corner, 2.1585 + and pure black <em>exactly</em> at the opposite corner. 2.1586 + That's intentional, and will always be true for linear gradients. 2.1587 </div> 2.1588 </div> 2.1589 2.1590 - <p> 2.1591 - The gradient's color stops are typically placed between the starting point and ending point on the <i>gradient line</i>, 2.1592 - but this isn't required - 2.1593 - the <i>gradient line</i> extends infinitely in both directions. 2.1594 - The starting point and ending point are merely arbitrary location markers - 2.1595 - the starting point defines where 0%, 0px, etc are located when specifying color-stops, 2.1596 - and the ending point defines where 100% is located. 2.1597 - Color-stops are allowed to have positions before 0% or after 100%. 2.1598 - 2.1599 - <p> 2.1600 - The color of the gradient at any point is determined 2.1601 - by finding the unique line passing through that point that is perpendicular to the <i>gradient line</i>. 2.1602 - The point's color is the color of the <i>gradient line</i> 2.1603 - at the point where this line intersects it. 2.1604 - 2.1605 -<!-- ====================================================================== --> 2.1606 + The gradient's color stops are typically placed between the starting point and ending point on the <a>gradient line</a>, 2.1607 + but this isn't required - 2.1608 + the <a>gradient line</a> extends infinitely in both directions. 2.1609 + The starting point and ending point are merely arbitrary location markers - 2.1610 + the starting point defines where 0%, 0px, etc are located when specifying color-stops, 2.1611 + and the ending point defines where 100% is located. 2.1612 + Color-stops are allowed to have positions before 0% or after 100%. 2.1613 + 2.1614 + The color of the gradient at any point is determined 2.1615 + by finding the unique line passing through that point that is perpendicular to the <a>gradient line</a>. 2.1616 + The point's color is the color of the <a>gradient line</a> 2.1617 + at the point where this line intersects it. 2.1618 + 2.1619 2.1620 <h4 class='no-toc' id='linear-gradient-examples'> 2.1621 Linear Gradient Examples</h4> 2.1622 2.1623 - <p> 2.1624 - All of the following ''linear-gradient()'' examples are presumed to be backgrounds applied to a box that is 200px wide and 100px tall. 2.1625 + All of the following ''linear-gradient()'' examples are presumed to be backgrounds applied to a box that is 200px wide and 100px tall. 2.1626 2.1627 <div class=example> 2.1628 - <p> 2.1629 - Below are various ways of specifying a basic vertical gradient: 2.1630 - 2.1631 - <pre><!-- 2.1632 - -->linear-gradient(yellow, blue);
<!-- 2.1633 - -->linear-gradient(to bottom, yellow, blue);
<!-- 2.1634 - -->linear-gradient(180deg, yellow, blue);
<!-- 2.1635 - -->linear-gradient(to top, blue, yellow);
<!-- 2.1636 - -->linear-gradient(to bottom, yellow 0%, blue 100%);</pre> 2.1637 - 2.1638 - <p><img src="images/linear1.png" alt="" > 2.1639 + Below are various ways of specifying a basic vertical gradient: 2.1640 + 2.1641 + <pre> 2.1642 + linear-gradient(yellow, blue); 2.1643 + linear-gradient(to bottom, yellow, blue); 2.1644 + linear-gradient(180deg, yellow, blue); 2.1645 + linear-gradient(to top, blue, yellow); 2.1646 + linear-gradient(to bottom, yellow 0%, blue 100%); 2.1647 + </pre> 2.1648 + 2.1649 + <img src="images/linear1.png" alt="" > 2.1650 </div> 2.1651 2.1652 <div class=example> 2.1653 - <p> 2.1654 - This demonstrates the use of an angle in the gradient. 2.1655 - Note that, though the angle is not exactly the same as the angle between the corners, 2.1656 - the <i>gradient line</i> is still sized so as to make the gradient yellow exactly at the upper-left corner, 2.1657 - and blue exactly at the lower-right corner. 2.1658 - 2.1659 - <pre><!-- 2.1660 - -->linear-gradient(135deg, yellow, blue);
<!-- 2.1661 - -->linear-gradient(-45deg, blue, yellow);</pre> 2.1662 - 2.1663 - <p><img src="images/linear3.png" alt="" > 2.1664 + This demonstrates the use of an angle in the gradient. 2.1665 + Note that, though the angle is not exactly the same as the angle between the corners, 2.1666 + the <a>gradient line</a> is still sized so as to make the gradient yellow exactly at the upper-left corner, 2.1667 + and blue exactly at the lower-right corner. 2.1668 + 2.1669 + <pre> 2.1670 + linear-gradient(135deg, yellow, blue); 2.1671 + linear-gradient(-45deg, blue, yellow); 2.1672 + </pre> 2.1673 + 2.1674 + <img src="images/linear3.png" alt="" > 2.1675 </div> 2.1676 2.1677 <div class=example> 2.1678 - <p> 2.1679 - This demonstrates a 3-color gradient, and how to specify the location of a stop explicitly: 2.1680 + 2.1681 + This demonstrates a 3-color gradient, and how to specify the location of a stop explicitly: 2.1682 2.1683 <pre>linear-gradient(yellow, blue 20%, #0f0);</pre> 2.1684 - 2.1685 - <p><img src="images/linear4.png" alt="" > 2.1686 + 2.1687 + <img src="images/linear4.png" alt="" > 2.1688 </div> 2.1689 2.1690 <div class=example id='corner-gradient-example'> 2.1691 - <p> 2.1692 - This demonstrates a corner-to-corner gradient specified with keywords. 2.1693 - Note how the gradient is red and blue exactly in the bottom-left and top-right corners, respectively, 2.1694 - exactly like the second example. 2.1695 - Additionally, the angle of the gradient is automatically computed so that the color at 50% (in this case, white) 2.1696 - stretches across the top-left and bottom-right corners. 2.1697 + This demonstrates a corner-to-corner gradient specified with keywords. 2.1698 + Note how the gradient is red and blue exactly in the bottom-left and top-right corners, respectively, 2.1699 + exactly like the second example. 2.1700 + Additionally, the angle of the gradient is automatically computed so that the color at 50% (in this case, white) 2.1701 + stretches across the top-left and bottom-right corners. 2.1702 2.1703 <pre>linear-gradient(to top right, red, white, blue)</pre> 2.1704 - 2.1705 - <p><object data="images/gradient1.svg" width="200" height="100">(Image requires SVG)</object> 2.1706 + 2.1707 + <object data="images/gradient1.svg" width="200" height="100">(Image requires SVG)</object> 2.1708 </div> 2.1709 2.1710 2.1711 @@ -1289,45 +1144,41 @@ 2.1712 <h3 id='radial-gradients'> 2.1713 Radial Gradients: the ''radial-gradient()'' notation</h3> 2.1714 2.1715 - <p> 2.1716 - In a radial gradient, 2.1717 - rather than colors smoothly fading from one side of the <i>gradient box</i> to the other 2.1718 - as with linear gradients, 2.1719 - they instead emerge from a single point 2.1720 - and smoothly spread outward in a circular or elliptical shape. 2.1721 - 2.1722 - <p> 2.1723 - A radial gradient is specified by indicating the center of the gradient 2.1724 - (where the 0% ellipse will be) 2.1725 - and the size and shape of the <dfn>ending shape</dfn> 2.1726 - (the 100% ellipse). 2.1727 - Color stops are given as a list, 2.1728 - just as for ''linear-gradient()''. 2.1729 - Starting from the <i>center</i> 2.1730 - and progressing towards (and potentially beyond) the <i>ending shape</i> 2.1731 - uniformly-scaled concentric ellipses are drawn and colored 2.1732 - according to the specified color stops. 2.1733 - 2.1734 -<!-- ====================================================================== --> 2.1735 + In a radial gradient, 2.1736 + rather than colors smoothly fading from one side of the <a>gradient box</a> to the other 2.1737 + as with linear gradients, 2.1738 + they instead emerge from a single point 2.1739 + and smoothly spread outward in a circular or elliptical shape. 2.1740 + 2.1741 + A radial gradient is specified by indicating the center of the gradient 2.1742 + (where the 0% ellipse will be) 2.1743 + and the size and shape of the <dfn>ending shape</dfn> 2.1744 + (the 100% ellipse). 2.1745 + Color stops are given as a list, 2.1746 + just as for ''linear-gradient()''. 2.1747 + Starting from the <a>gradient center</a> 2.1748 + and progressing towards (and potentially beyond) the <a>ending shape</a> 2.1749 + uniformly-scaled concentric ellipses are drawn and colored 2.1750 + according to the specified color stops. 2.1751 + 2.1752 2.1753 <h4 class='no-toc' id='radial-gradient-syntax'> 2.1754 radial-gradient() Syntax</h4> 2.1755 2.1756 - <p> 2.1757 - The radial gradient syntax is: 2.1758 - 2.1759 - <pre><!-- 2.1760 - --><dfn id='radial-gradient-type'><radial-gradient></dfn> = radial-gradient(
<!-- 2.1761 - --> [ [ <var><ending-shape></var> || <var><size></var> ] [ at <var><position></var> ]? , |
<!-- 2.1762 - --> at <var><position></var>, 
<!-- 2.1763 - --> ]?
<!-- 2.1764 - --> <var><color-stop-list></var>
<!-- 2.1765 - -->)</pre> 2.1766 + The radial gradient syntax is: 2.1767 + 2.1768 + <pre> 2.1769 + <dfn>radial-gradient()</dfn> = radial-gradient( 2.1770 + [ [ <<ending-shape>> || <<size>> ] [ at <<position>> ]? , | 2.1771 + at <<position>>, 2.1772 + ]? 2.1773 + <<color-stop-list>> 2.1774 + ) 2.1775 + </pre> 2.1776 2.1777 <div class=example> 2.1778 - <p> 2.1779 - Here is an example of a circular radial gradient 5em wide 2.1780 - and positioned with its center in the top left corner: 2.1781 + Here is an example of a circular radial gradient 5em wide 2.1782 + and positioned with its center in the top left corner: 2.1783 2.1784 <pre>radial-gradient(5em circle at top left, yellow, blue)</pre> 2.1785 </div> 2.1786 @@ -1336,193 +1187,181 @@ 2.1787 We should add the ability to move the focus of the gradient, 2.1788 as in the original -webkit-gradient() function. 2.1789 See proposal in <a href="http://lists.w3.org/Archives/Public/www-style/2011Nov/0210.html">http://lists.w3.org/Archives/Public/www-style/2011Nov/0210.html</a> 2.1790 - for "from <var><position></var>" and "from offset <var><offset></var>". 2.1791 - 2.1792 - <p> 2.1793 - The arguments are defined as follows: 2.1794 + for "from <<position>>" and "from offset <<offset>>". 2.1795 + 2.1796 + The arguments are defined as follows: 2.1797 2.1798 <dl> 2.1799 - 2.1800 - <dt id='radial-position'><dfn id='position'><position></dfn> 2.1801 + <dt><dfn><position></dfn> 2.1802 <dd> 2.1803 - Determines the center of the gradient. 2.1804 + Determines the <dfn>gradient center</dfn> of the gradient. 2.1805 The <a href="http://www.w3.org/TR/css3-values/#position"><position></a> value type 2.1806 (which is also used for 'background-position') 2.1807 is defined in [[!CSS3VAL]], 2.1808 and is resolved using the center-point as the object area 2.1809 - and the <i>gradient box</i> as the positioning area. 2.1810 + and the <a>gradient box</a> as the positioning area. 2.1811 If this argument is omitted, 2.1812 it defaults to ''center''. 2.1813 2.1814 - <dt id='radial-shape'><dfn id='shape'><ending-shape></dfn> 2.1815 + <dt><dfn><ending-shape></dfn> 2.1816 <dd> 2.1817 Can be either ''circle'' or ''ellipse''; 2.1818 - determines whether the gradient's <i>ending shape</i> is a circle or an ellipse, respectively. 2.1819 - If <var><ending-shape></var> is omitted, 2.1820 - the <i>ending shape</i> defaults to a circle 2.1821 - if the <var><size></var> is a single <var><length></var>, 2.1822 + determines whether the gradient's <a>ending shape</a> is a circle or an ellipse, respectively. 2.1823 + If <<ending-shape>> is omitted, 2.1824 + the <a>ending shape</a> defaults to a circle 2.1825 + if the <<size>> is a single <<length>>, 2.1826 and to an ellipse otherwise. 2.1827 2.1828 - <dt id='radial-size'><dfn id='size'><size></dfn> 2.1829 + <dt><dfn><size></dfn> 2.1830 <dd> 2.1831 - <p> 2.1832 - Determines the size of the gradient's <i>ending shape</i>. 2.1833 - If omitted it defaults to ''farthest-corner''. 2.1834 - It can be given explicitly or by keyword. 2.1835 - For the purpose of the keyword definitions, 2.1836 - consider the <i>gradient box</i> edges as extending infinitely in both directions, 2.1837 - rather than being finite line segments. 2.1838 - 2.1839 - <p> 2.1840 - If the ending-shape is an ellipse, 2.1841 - its axises are aligned with the horizontal and vertical axises. 2.1842 - 2.1843 - <p> 2.1844 - Both ''circle'' and ''ellipse'' gradients accept the following keywords as their <var><size></var>: 2.1845 + Determines the size of the gradient's <a>ending shape</a>. 2.1846 + If omitted it defaults to ''farthest-corner''. 2.1847 + It can be given explicitly or by keyword. 2.1848 + For the purpose of the keyword definitions, 2.1849 + consider the <a>gradient box</a> edges as extending infinitely in both directions, 2.1850 + rather than being finite line segments. 2.1851 + 2.1852 + If the ending-shape is an ellipse, 2.1853 + its axises are aligned with the horizontal and vertical axises. 2.1854 + 2.1855 + Both ''circle'' and ''ellipse'' gradients accept the following keywords as their <<size>>: 2.1856 2.1857 <dl> 2.1858 - <dt><dfn id='radial-closest-side'>''closest-side''</dfn> 2.1859 + <dt><dfn>closest-side</dfn> 2.1860 <dd> 2.1861 - The <i>ending shape</i> is sized so that 2.1862 - it exactly meets the side of the <i>gradient box</i> closest to the gradient's center. 2.1863 + The <a>ending shape</a> is sized so that 2.1864 + it exactly meets the side of the <a>gradient box</a> closest to the gradient's center. 2.1865 If the shape is an ellipse, 2.1866 it exactly meets the closest side in each dimension. 2.1867 2.1868 - <dt><dfn id='radial-farthest-side'>''farthest-side''</dfn> 2.1869 + <dt><dfn>farthest-side</dfn> 2.1870 <dd> 2.1871 Same as ''closest-side'', 2.1872 - except the <i>ending shape</i> is sized based on the farthest side(s). 2.1873 - 2.1874 - <dt><dfn id='radial-closest-corner'>''closest-corner''</dfn> 2.1875 + except the <a>ending shape</a> is sized based on the farthest side(s). 2.1876 + 2.1877 + <dt><dfn>closest-corner</dfn> 2.1878 <dd> 2.1879 - The <i>ending shape</i> is sized so that 2.1880 - it passes through the corner of the <i>gradient box</i> closest to the gradient's center. 2.1881 + The <a>ending shape</a> is sized so that 2.1882 + it passes through the corner of the <a>gradient box</a> closest to the gradient's center. 2.1883 If the shape is an ellipse, 2.1884 - the <i>ending shape</i> is given the same aspect-ratio it would have if ''closest-side'' were specified. 2.1885 - 2.1886 - <dt><dfn id='radial-farthest-corner'>''farthest-corner''</dfn> 2.1887 + the <a>ending shape</a> is given the same aspect-ratio it would have if ''closest-side'' were specified. 2.1888 + 2.1889 + <dt><dfn>farthest-corner</dfn> 2.1890 <dd> 2.1891 Same as ''closest-corner'', 2.1892 - except the <i>ending shape</i> is sized based on the farthest corner. 2.1893 + except the <a>ending shape</a> is sized based on the farthest corner. 2.1894 If the shape is an ellipse, 2.1895 - the <i>ending shape</i> is given the same aspect ratio it would have if ''farthest-side'' were specified. 2.1896 + the <a>ending shape</a> is given the same aspect ratio it would have if ''farthest-side'' were specified. 2.1897 </dl> 2.1898 2.1899 - <p> 2.1900 - If <var><ending-shape></var> is specified as ''circle'' or is omitted, 2.1901 - the <var><size></var> may be given explicitly as: 2.1902 + If <<ending-shape>> is specified as ''circle'' or is omitted, 2.1903 + the <<size>> may be given explicitly as: 2.1904 2.1905 <dl> 2.1906 - <dt><dfn id='radial-size-circle'><length></dfn> 2.1907 + <dt><dfn><length></dfn> 2.1908 <dd> 2.1909 - <p> 2.1910 - Gives the radius of the circle explicitly. 2.1911 - Negative values are invalid. 2.1912 + Gives the radius of the circle explicitly. 2.1913 + Negative values are invalid. 2.1914 2.1915 - <p class='note'> 2.1916 - Note that percentages are <em>not</em> allowed here; 2.1917 - they can only be used to specify the size of an elliptical gradient, 2.1918 - not a circular one. 2.1919 - This restriction exists because there is are multiple reasonable answers as to which dimension the percentage should be relative to. 2.1920 - A future level of this module may provide the ability to size circles with percentages, 2.1921 - perhaps with more explicit controls over which dimension is used. 2.1922 + Note: Percentages are <em>not</em> allowed here; 2.1923 + they can only be used to specify the size of an elliptical gradient, 2.1924 + not a circular one. 2.1925 + This restriction exists because there is are multiple reasonable answers as to which dimension the percentage should be relative to. 2.1926 + A future level of this module may provide the ability to size circles with percentages, 2.1927 + perhaps with more explicit controls over which dimension is used. 2.1928 2.1929 </dl> 2.1930 2.1931 - <p> 2.1932 - If <var><ending-shape></var> is specified as ''ellipse'' or is omitted, 2.1933 - <var><size></var> may instead be given explicitly as: 2.1934 + If <<ending-shape>> is specified as ''ellipse'' or is omitted, 2.1935 + <<size>> may instead be given explicitly as: 2.1936 2.1937 <dl> 2.1938 - <dt><dfn id='radial-size-ellipse'>[ <var><length></var> | <var><percentage></var> ]{2}</dfn> 2.1939 + <dt><dfn>[ <<length>> | <<percentage>> ]{2}</dfn> 2.1940 <dd> 2.1941 Gives the size of the ellipse explicitly. 2.1942 The first value represents the horizontal radius, 2.1943 the second the vertical radius. 2.1944 - Percentages values are relative to the corresponding dimension of the <i>gradient box</i>. 2.1945 + Percentages values are relative to the corresponding dimension of the <a>gradient box</a>. 2.1946 Negative values are invalid. 2.1947 </dl> 2.1948 </dl> 2.1949 2.1950 <div class='note'> 2.1951 - <p> 2.1952 - Expanded with the above definitions, 2.1953 - the grammar becomes: 2.1954 - 2.1955 - <pre><!-- 2.1956 - --><radial-gradient> = radial-gradient(
<!-- 2.1957 - --> [ [ circle || <var><length></var> ] [ at <var><position></var> ]? , | 
<!-- 2.1958 - --> [ ellipse || [ <var><length></var> | <var><percentage></var> ]{2} ] [ at <var><position></var> ]? , |
<!-- 2.1959 - --> [ [ circle | ellipse ] || <var><extent-keyword></var> ] [ at <var><position></var> ]? , |
<!-- 2.1960 - --> at <var><position></var> ,
<!-- 2.1961 - --> ]?
<!-- 2.1962 - --> <var><color-stop></var> [ , <var><color-stop></var> ]+
<!-- 2.1963 - -->)
<!-- 2.1964 - --><extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side</pre> 2.1965 + Expanded with the above definitions, 2.1966 + the grammar becomes: 2.1967 + 2.1968 + <pre> 2.1969 + radial-gradient() = radial-gradient( 2.1970 + [ [ circle || <<length>> ] [ at <<position>> ]? , | 2.1971 + [ ellipse || [ <<length>> | <<percentage>> ]{2} ] [ at <<position>> ]? , | 2.1972 + [ [ circle | ellipse ] || <<extent-keyword>> ] [ at <<position>> ]? , | 2.1973 + at <<position>> , 2.1974 + ]? 2.1975 + <<color-stop>> [ , <<color-stop>> ]+ 2.1976 + ) 2.1977 + <dfn noexport><extent-keyword></dfn> = closest-corner | closest-side | farthest-corner | farthest-side 2.1978 + </pre> 2.1979 </div> 2.1980 2.1981 2.1982 <h4 class="no-toc" id="radial-color-stops"> 2.1983 Placing Color Stops</h4> 2.1984 2.1985 - <p> 2.1986 - Color-stops are placed on a <i>gradient line</i>, 2.1987 - similar to the <i>gradient line</i> of linear gradients. 2.1988 - The <i>gradient line's</i> <i>start point</i> is at the center of the gradient, 2.1989 - and it extends toward the right, 2.1990 - with the <i>ending point</i> on the point where the <i>gradient line</i> intersects the <i>ending shape</i>. 2.1991 - A color-stop can be placed at a location before 0%; 2.1992 - though the negative region of the <i>gradient line</i> is never directly consulted for rendering, 2.1993 - color stops placed there can affect the color of non-negative locations on the <i>gradient line</i> through interpolation or repetition 2.1994 - (see <a href='#repeating-gradients'>repeating gradients</a>). 2.1995 - For example, ''radial-gradient(red -50px, yellow 100px)'' produces an elliptical gradient 2.1996 - that starts with a reddish-orange color in the center 2.1997 - (specifically, #f50) 2.1998 - and transitions to yellow. 2.1999 - Locations greater than 100% simply specify a location a correspondingly greater distance from the center of the gradient. 2.2000 - 2.2001 - <p> 2.2002 - The color of the gradient at any point is determined by 2.2003 - first finding the unique ellipse passing through that point 2.2004 - with the same center, orientation, and ratio between major and minor axises as the ending-shape. 2.2005 - The point's color is then the color of the positive section of the <i>gradient line</i> at the location where this ellipse intersects it. 2.2006 + Color-stops are placed on a <a>gradient line</a>, 2.2007 + similar to the <a>gradient line</a> of linear gradients. 2.2008 + The <a>gradient line's</a> <a>start point</a> is at the center of the gradient, 2.2009 + and it extends toward the right, 2.2010 + with the <a>ending point</a> on the point where the <a>gradient line</a> intersects the <a>ending shape</a>. 2.2011 + A color-stop can be placed at a location before 0%; 2.2012 + though the negative region of the <a>gradient line</a> is never directly consulted for rendering, 2.2013 + color stops placed there can affect the color of non-negative locations on the <a>gradient line</a> through interpolation or repetition 2.2014 + (see <a href='#repeating-gradients'>repeating gradients</a>). 2.2015 + For example, ''radial-gradient(red -50px, yellow 100px)'' produces an elliptical gradient 2.2016 + that starts with a reddish-orange color in the center 2.2017 + (specifically, #f50) 2.2018 + and transitions to yellow. 2.2019 + Locations greater than 100% simply specify a location a correspondingly greater distance from the center of the gradient. 2.2020 + 2.2021 + The color of the gradient at any point is determined by 2.2022 + first finding the unique ellipse passing through that point 2.2023 + with the same center, orientation, and ratio between major and minor axises as the ending-shape. 2.2024 + The point's color is then the color of the positive section of the <a>gradient line</a> at the location where this ellipse intersects it. 2.2025 2.2026 <h4 class="no-toc" id="degenerate-radials"> 2.2027 Degenerate Radial Gradients</h4> 2.2028 2.2029 - <p> 2.2030 - Some combinations of position, size, and shape 2.2031 - will produce a circle or ellipse with a radius of 0. 2.2032 - This will occur, for example, 2.2033 - if the center is on a <i>gradient box</i> edge and ''closest-side'' or ''closest-corner'' is specified 2.2034 - or if the size and shape are given explicitly and either of the radiuses is zero. 2.2035 - In these degenerate cases, 2.2036 - the gradient must be be rendered as follows: 2.2037 + Some combinations of position, size, and shape 2.2038 + will produce a circle or ellipse with a radius of 0. 2.2039 + This will occur, for example, 2.2040 + if the center is on a <a>gradient box</a> edge and ''closest-side'' or ''closest-corner'' is specified 2.2041 + or if the size and shape are given explicitly and either of the radiuses is zero. 2.2042 + In these degenerate cases, 2.2043 + the gradient must be be rendered as follows: 2.2044 2.2045 <dl> 2.2046 - <dt>If the <i>ending shape</i> is a circle with zero radius: 2.2047 + <dt>If the <a>ending shape</a> is a circle with zero radius: 2.2048 <dd> 2.2049 - Render as if the <i>ending shape</i> was 2.2050 + Render as if the <a>ending shape</a> was 2.2051 a circle whose radius was an arbitrary very small number greater than zero. 2.2052 <span class='note'>This will make the gradient continue to look like a circle.</span> 2.2053 2.2054 - <dt>If the <i>ending shape</i> has zero width (regardless of the height): 2.2055 + <dt>If the <a>ending shape</a> has zero width (regardless of the height): 2.2056 <dd> 2.2057 - Render as if the <i>ending shape</i> was 2.2058 + Render as if the <a>ending shape</a> was 2.2059 an ellipse whose height was an arbitrary very large number 2.2060 and whose width was an arbitrary very small number greater than zero. 2.2061 <span class='note'>This will make the gradient look similar to a horizontal linear gradient 2.2062 - that is mirrored across the center of the ellipse. 2.2063 - It also means that all color-stop positions specified with a percentage resolve to ''0px''.</span> 2.2064 - 2.2065 - <dt>Otherwise, if the <i>ending shape</i> has zero height: 2.2066 + that is mirrored across the center of the ellipse. 2.2067 + It also means that all color-stop positions specified with a percentage resolve to ''0px''.</span> 2.2068 + 2.2069 + <dt>Otherwise, if the <a>ending shape</a> has zero height: 2.2070 <dd> 2.2071 - Render as if the <i>ending shape</i> was 2.2072 + Render as if the <a>ending shape</a> was 2.2073 an ellipse whose width was an arbitrary very large number 2.2074 and whose height was an arbitrary very small number greater than zero. 2.2075 <span class='note'>This will make the gradient look like a solid-color image 2.2076 - equal to the color of the last color-stop, 2.2077 - or equal to the average color of the gradient if it's repeating.</span> 2.2078 + equal to the color of the last color-stop, 2.2079 + or equal to the average color of the gradient if it's repeating.</span> 2.2080 </dl> 2.2081 2.2082 <!-- ====================================================================== --> 2.2083 @@ -1530,47 +1369,52 @@ 2.2084 <h4 class='no-toc' id='radial-gradient-examples'> 2.2085 Radial Gradient Examples</h4> 2.2086 2.2087 - <p> 2.2088 - All of the following examples are applied to a box that is 200px wide and 100px tall. 2.2089 + All of the following examples are applied to a box that is 200px wide and 100px tall. 2.2090 2.2091 <div class=example> 2.2092 - <p> 2.2093 - These examples demonstrate different ways to write the basic syntax for radial gradients: 2.2094 - 2.2095 - <pre><!-- 2.2096 - -->radial-gradient(yellow, green);
<!-- 2.2097 - -->radial-gradient(ellipse at center, yellow 0%, green 100%);
<!-- 2.2098 - -->radial-gradient(farthest-corner at 50% 50%, yellow, green);</pre> 2.2099 - <p><img src="images/radial1.png" alt="" > 2.2100 + These examples demonstrate different ways to write the basic syntax for radial gradients: 2.2101 + 2.2102 + <pre> 2.2103 + radial-gradient(yellow, green); 2.2104 + radial-gradient(ellipse at center, yellow 0%, green 100%); 2.2105 + radial-gradient(farthest-corner at 50% 50%, yellow, green); 2.2106 + </pre> 2.2107 + 2.2108 + <img src="images/radial1.png" alt="" > 2.2109 2.2110 <pre>radial-gradient(circle, yellow, green);</pre> 2.2111 - <p><img src="images/radial2.png" alt="" > 2.2112 + 2.2113 + <img src="images/radial2.png" alt="" > 2.2114 2.2115 <pre>radial-gradient(red, yellow, green);</pre> 2.2116 - <p><img src="images/radial3.png" alt="" > 2.2117 + 2.2118 + <img src="images/radial3.png" alt="" > 2.2119 </div> 2.2120 2.2121 <div class=example> 2.2122 - <p> 2.2123 - This image shows a gradient originating from somewhere other than the center of the box: 2.2124 + This image shows a gradient originating from somewhere other than the center of the box: 2.2125 2.2126 <pre>radial-gradient(farthest-side at left bottom, red, yellow 50px, green);</pre> 2.2127 - <p><img src="images/radial4.png" alt="" > 2.2128 + 2.2129 + <img src="images/radial4.png" alt="" > 2.2130 </div> 2.2131 2.2132 <div class=example> 2.2133 - <p> 2.2134 - Here we illustrate a 'closest-side' gradient. 2.2135 - 2.2136 - <pre><!-- 2.2137 - -->radial-gradient(closest-side at 20px 30px, red, yellow, green);
<!-- 2.2138 - -->radial-gradient(20px 30px at 20px 30px, red, yellow, green);</pre> 2.2139 - <p><img src="images/radial6.png" alt="" > 2.2140 - 2.2141 - <pre><!-- 2.2142 - -->radial-gradient(closest-side circle at 20px 30px, red, yellow, green);
<!-- 2.2143 - -->radial-gradient(20px 20px at 20px 30px, red, yellow, green);</pre> 2.2144 - <p><img src="images/radial7.png" alt="" > 2.2145 + Here we illustrate a 'closest-side' gradient. 2.2146 + 2.2147 + <pre> 2.2148 + radial-gradient(closest-side at 20px 30px, red, yellow, green); 2.2149 + radial-gradient(20px 30px at 20px 30px, red, yellow, green); 2.2150 + </pre> 2.2151 + 2.2152 + <img src="images/radial6.png" alt="" > 2.2153 + 2.2154 + <pre> 2.2155 + radial-gradient(closest-side circle at 20px 30px, red, yellow, green); 2.2156 + radial-gradient(20px 20px at 20px 30px, red, yellow, green); 2.2157 + </pre> 2.2158 + 2.2159 + <img src="images/radial7.png" alt="" > 2.2160 </div> 2.2161 2.2162 <!-- 2.2163 @@ -1595,46 +1439,42 @@ 2.2164 <h3 id='conic-gradients'> 2.2165 Conic Gradients: the ''conic-gradient()'' notation</h3> 2.2166 2.2167 - <p> 2.2168 - A conic gradient starts by specifying the center of a circle, 2.2169 - similar to radial gradients, 2.2170 - except that conic gradient color-stops are placed <em>around</em> the circumference of the circle, 2.2171 - rather than on a line emerging from the center, 2.2172 - causing the color to smoothly transition as you spin around the center, 2.2173 - rather than as you progress outward from the center. 2.2174 - 2.2175 - <p> 2.2176 - A conic gradient is specified by indicating the center of the gradient, 2.2177 - and then specifying a list of color-stops. 2.2178 - Unlike linear and radial gradients, 2.2179 - whose color-stops are placed by specifying a <code><length></code>, 2.2180 - the color-stops of a conic gradient are specified with an <code><angle></code>. 2.2181 - Rays are then drawn emerging from the center and pointing in all directions, 2.2182 - with the color of each ray equal to the color of the gradient-line where they intersect it. 2.2183 - 2.2184 - <p class='note'> 2.2185 - These gradients are called "conic" or "conical" 2.2186 - because, if the color stops are chosen to be significantly lighter on one side than the other, 2.2187 - it produces a pattern that looks like a cone observed from above. 2.2188 + A conic gradient starts by specifying the center of a circle, 2.2189 + similar to radial gradients, 2.2190 + except that conic gradient color-stops are placed <em>around</em> the circumference of the circle, 2.2191 + rather than on a line emerging from the center, 2.2192 + causing the color to smoothly transition as you spin around the center, 2.2193 + rather than as you progress outward from the center. 2.2194 + 2.2195 + A conic gradient is specified by indicating the center of the gradient, 2.2196 + and then specifying a list of color-stops. 2.2197 + Unlike linear and radial gradients, 2.2198 + whose color-stops are placed by specifying a <code><length></code>, 2.2199 + the color-stops of a conic gradient are specified with an <code><angle></code>. 2.2200 + Rays are then drawn emerging from the center and pointing in all directions, 2.2201 + with the color of each ray equal to the color of the gradient-line where they intersect it. 2.2202 + 2.2203 + Note: These gradients are called "conic" or "conical" 2.2204 + because, if the color stops are chosen to be significantly lighter on one side than the other, 2.2205 + it produces a pattern that looks like a cone observed from above. 2.2206 2.2207 <h4 id='conic-gradient-syntax' class='no-toc'> 2.2208 ''conic-gradient()'' Syntax</h4> 2.2209 2.2210 - <p> 2.2211 - The syntax for a conic gradient is: 2.2212 - 2.2213 - <pre class='prod'><!-- 2.2214 - --><dfn id='conic-gradient-type'><conic-gradient></dfn> = conic-gradient(
<!-- 2.2215 - --> [ at <var><position></var> , ]?
<!-- 2.2216 - --> <var><angular-color-stop-list></var>
<!-- 2.2217 - -->)</pre> 2.2218 - 2.2219 - <p> 2.2220 - The <code><position></code> argument is defined in [!CSS3VAL], 2.2221 - and is resolved using the center-point as the object area 2.2222 - and the gradient box as the positioning area. 2.2223 - If this argument is omitted, 2.2224 - it defaults to 'at center'. 2.2225 + The syntax for a conic gradient is: 2.2226 + 2.2227 + <pre class='prod'> 2.2228 + <dfn>conic-gradient()</dfn> = conic-gradient( 2.2229 + [ at <<position>> , ]? 2.2230 + <<angular-color-stop-list>> 2.2231 + ) 2.2232 + </pre> 2.2233 + 2.2234 + The <<position>> argument is defined in [!CSS3VAL], 2.2235 + and is resolved using the center-point as the object area 2.2236 + and the gradient box as the positioning area. 2.2237 + If this argument is omitted, 2.2238 + it defaults to 'at center'. 2.2239 2.2240 <p class='issue'> 2.2241 Anything else that might be useful? Defining the shape of the gradient as elliptical, perhaps? 2.2242 @@ -1642,31 +1482,27 @@ 2.2243 <h4 id='conic-color-stops' class='no-toc'> 2.2244 Placing Color Stops</h4> 2.2245 2.2246 - <p> 2.2247 - Color stops are placed on a <i>gradient line</i> that curves around the center in a circle, 2.2248 - with both the 0% and 100% locations at 0deg. 2.2249 - Just like linear gradients, 2.2250 - 0deg points to the top of the page, 2.2251 - and increasing angles correspond to clockwise movement around the circle. 2.2252 - 2.2253 - <p class='note'> 2.2254 - It may be more helpful to think of the gradient line as forming a spiral, 2.2255 - where only the segment from 0deg to 360deg is rendered. 2.2256 - This avoids any confusion about "overlap" when you have angles outside of the rendered region. 2.2257 - 2.2258 - <p> 2.2259 - A color-stop can be placed at a location before 0% or after 100%; 2.2260 - though these regions are never directly consulted for rendering, 2.2261 - color stops placed there can affect the color of color-stops within the rendered region 2.2262 - through interpolation or repetition (see <a href="#repeating-gradients">repeating gradients</a>). 2.2263 - For example, ''conic-gradient(red -50%, yellow 150%)'' produces a conic gradient 2.2264 - that starts with a reddish-orange color at 0deg (specifically, #f50), 2.2265 - and transitions to an orangish-yellow color at 360deg (specifically, #fa0). 2.2266 - 2.2267 - <p> 2.2268 - The color of the gradient at any point is determined by first finding the unique ray 2.2269 - anchored at the center of the gradient that passes through the given point. 2.2270 - The point's color is then the color of the <i>gradient line</i> at the location where this ray intersects it. 2.2271 + Color stops are placed on a <a>gradient line</a> that curves around the center in a circle, 2.2272 + with both the 0% and 100% locations at 0deg. 2.2273 + Just like linear gradients, 2.2274 + 0deg points to the top of the page, 2.2275 + and increasing angles correspond to clockwise movement around the circle. 2.2276 + 2.2277 + Note: It may be more helpful to think of the gradient line as forming a spiral, 2.2278 + where only the segment from 0deg to 360deg is rendered. 2.2279 + This avoids any confusion about "overlap" when you have angles outside of the rendered region. 2.2280 + 2.2281 + A color-stop can be placed at a location before 0% or after 100%; 2.2282 + though these regions are never directly consulted for rendering, 2.2283 + color stops placed there can affect the color of color-stops within the rendered region 2.2284 + through interpolation or repetition (see <a href="#repeating-gradients">repeating gradients</a>). 2.2285 + For example, ''conic-gradient(red -50%, yellow 150%)'' produces a conic gradient 2.2286 + that starts with a reddish-orange color at 0deg (specifically, #f50), 2.2287 + and transitions to an orangish-yellow color at 360deg (specifically, #fa0). 2.2288 + 2.2289 + The color of the gradient at any point is determined by first finding the unique ray 2.2290 + anchored at the center of the gradient that passes through the given point. 2.2291 + The point's color is then the color of the <a>gradient line</a> at the location where this ray intersects it. 2.2292 2.2293 <h4 id='conic-gradient-examples' class='no-toc'> 2.2294 Conic Gradient Examples</h4> 2.2295 @@ -1708,75 +1544,67 @@ 2.2296 <h3 id='repeating-gradients'> 2.2297 Repeating Gradients: the ''repeating-linear-gradient()'', ''repeating-radial-gradient()'', and ''repeating-conic-gradient()'' notations</h3> 2.2298 2.2299 - <p> 2.2300 - In addition to <var><linear-gradient></var>, <var><radial-gradient></var>, and <var><conic-gradient></var>, 2.2301 - this specification defines <dfn id='repeating-linear-gradient-type'><repeating-linear-gradient></dfn>, 2.2302 - <dfn id='repeating-radial-gradient-type'><repeating-radial-gradient></dfn>, 2.2303 - and <dfn id='repeating-conic-gradient-type'><repeating-conic-gradient></dfn> values. 2.2304 - These notations take the same values 2.2305 - and are interpreted the same 2.2306 - as their respective non-repeating siblings defined previously. 2.2307 - 2.2308 - <p> 2.2309 - When rendered, however, the color-stops are repeated infinitely in both directions, 2.2310 - with their positions shifted by multiples of the difference between 2.2311 - the last specified color-stop's position 2.2312 - and the first specified color-stop's position. 2.2313 - For example, ''repeating-linear-gradient(red 10px, blue 50px)'' 2.2314 - is equivalent to ''linear-gradient(..., red -30px, blue 10px, red 10px, blue 50px, red 50px, blue 90px, ...)''. 2.2315 - Note that the last color-stop and first color-stop will always coincide at the boundaries of each group, 2.2316 - which will produce sharp transitions if the gradient does not start and end with the same color. 2.2317 + In addition to ''linear-gradient()'', ''radial-gradient()'', and ''conic-gradient()'', 2.2318 + this specification defines <dfn>repeating-linear-gradient()</dfn>, 2.2319 + <dfn>repeating-radial-gradient()</dfn>, 2.2320 + and <dfn>repeating-conic-gradient()</dfn> values. 2.2321 + These notations take the same values 2.2322 + and are interpreted the same 2.2323 + as their respective non-repeating siblings defined previously. 2.2324 + 2.2325 + When rendered, however, the color-stops are repeated infinitely in both directions, 2.2326 + with their positions shifted by multiples of the difference between 2.2327 + the last specified color-stop's position 2.2328 + and the first specified color-stop's position. 2.2329 + For example, ''repeating-linear-gradient(red 10px, blue 50px)'' 2.2330 + is equivalent to ''linear-gradient(..., red -30px, blue 10px, red 10px, blue 50px, red 50px, blue 90px, ...)''. 2.2331 + Note that the last color-stop and first color-stop will always coincide at the boundaries of each group, 2.2332 + which will produce sharp transitions if the gradient does not start and end with the same color. 2.2333 2.2334 <div class=example> 2.2335 - <p> 2.2336 + 2.2337 Repeating gradient syntax is identical to that of non-repeating gradients: 2.2338 2.2339 <pre>repeating-linear-gradient(red, blue 20px, red 40px)</pre> 2.2340 - <p><img src="images/repeating1.png" alt=""> 2.2341 + <img src="images/repeating1.png" alt=""> 2.2342 2.2343 <pre>repeating-radial-gradient(red, blue 20px, red 40px)</pre> 2.2344 - <p><img src="images/repeating2.png" alt=""> 2.2345 + <img src="images/repeating2.png" alt=""> 2.2346 2.2347 <pre>repeating-radial-gradient(circle closest-side at 20px 30px, red, yellow, green 100%, yellow 150%, red 200%)</pre> 2.2348 - <p><img src="images/repeating3.png" alt=""> 2.2349 + <img src="images/repeating3.png" alt=""> 2.2350 2.2351 <pre>repeating-conic-gradient(at 20%, white 0deg, white 20deg, red 20deg, red 40deg)</pre> 2.2352 <p class='issue'>Insert rendering here. 2.2353 </div> 2.2354 2.2355 - <p> 2.2356 - If the gradient has only a single color-stop, 2.2357 - it must render as a solid-color image equal to the color of that color-stop. 2.2358 - 2.2359 - <p> 2.2360 - If the distance between the first and last color-stops is non-zero, 2.2361 - but is small enough that the implementation knows that the physical resolution of the output device is insufficient to faithfully render the gradient, 2.2362 - the implementation must <i title="gradient-average-color">find the average color of the gradient</i> 2.2363 - and render the gradient as a solid-color image equal to the average color. 2.2364 - 2.2365 - <p> 2.2366 - If the distance between the first and last color-stops is zero 2.2367 - (or rounds to zero due to implementation limitations), 2.2368 - the implementation must <i title="gradient-average-color">find the average color of a gradient</i> 2.2369 - with the same number and color of color-stops, 2.2370 - but with the first and last color-stop an arbitrary non-zero distance apart, 2.2371 - and the remaining color-stops equally spaced between them. 2.2372 - Then it must render the gradient as a solid-color image equal to that average color. 2.2373 - 2.2374 - <p> 2.2375 - If the width of the ending shape of a repeating radial gradient is non-zero 2.2376 - and the height is zero, 2.2377 - or is close enough to zero that the implementation knows that the physical resolution of the output device is insufficient to faithfully render the gradient, 2.2378 - the implementation must <i title="gradient-average-color">find the average color of the gradient</i> 2.2379 - and render the gradient as a solid-color image equal to the average color. 2.2380 - 2.2381 - <p class='note'> 2.2382 - Note: The <a href="#degenerate-radials">Degenerate Radial Gradients</a> section 2.2383 - describes how the ending shape is adjusted when its width is zero. 2.2384 - 2.2385 - <p> 2.2386 - To <dfn title="gradient-average-color">find the average color of a gradient</dfn>, 2.2387 - run these steps: 2.2388 + If the gradient has only a single color-stop, 2.2389 + it must render as a solid-color image equal to the color of that color-stop. 2.2390 + 2.2391 + If the distance between the first and last color-stops is non-zero, 2.2392 + but is small enough that the implementation knows that the physical resolution of the output device is insufficient to faithfully render the gradient, 2.2393 + the implementation must <a title="gradient-average-color">find the average color of the gradient</a> 2.2394 + and render the gradient as a solid-color image equal to the average color. 2.2395 + 2.2396 + If the distance between the first and last color-stops is zero 2.2397 + (or rounds to zero due to implementation limitations), 2.2398 + the implementation must <a title="gradient-average-color">find the average color of a gradient</a> 2.2399 + with the same number and color of color-stops, 2.2400 + but with the first and last color-stop an arbitrary non-zero distance apart, 2.2401 + and the remaining color-stops equally spaced between them. 2.2402 + Then it must render the gradient as a solid-color image equal to that average color. 2.2403 + 2.2404 + If the width of the ending shape of a repeating radial gradient is non-zero 2.2405 + and the height is zero, 2.2406 + or is close enough to zero that the implementation knows that the physical resolution of the output device is insufficient to faithfully render the gradient, 2.2407 + the implementation must <a title="gradient-average-color">find the average color of the gradient</a> 2.2408 + and render the gradient as a solid-color image equal to the average color. 2.2409 + 2.2410 + Note: The <a href="#degenerate-radials">Degenerate Radial Gradients</a> section 2.2411 + describes how the ending shape is adjusted when its width is zero. 2.2412 + 2.2413 + To <dfn title="gradient-average-color">find the average color of a gradient</dfn>, 2.2414 + run these steps: 2.2415 2.2416 <ol> 2.2417 <li> 2.2418 @@ -1797,21 +1625,18 @@ 2.2419 and return it. 2.2420 </ol> 2.2421 2.2422 - <p class='note'> 2.2423 - As usual, implementations may use whatever algorithm they wish, 2.2424 - so long as it produces the same result as the above. 2.2425 + Note: As usual, implementations may use whatever algorithm they wish, 2.2426 + so long as it produces the same result as the above. 2.2427 2.2428 <div class='example'> 2.2429 - <p> 2.2430 - For example, the following gradient is rendered as a solid light-purple image (equal to <code>rgb(75%,50%,75%)</code>): 2.2431 + For example, the following gradient is rendered as a solid light-purple image (equal to <code>rgb(75%,50%,75%)</code>): 2.2432 2.2433 <pre class="css">repeating-linear-gradient(red 0px, white 0px, blue 0px);</pre> 2.2434 2.2435 - <p> 2.2436 - The following gradient would render the same as the previous under normal circumstances 2.2437 - (because desktop monitors can't faithfully render color-stops 1/10th of a pixel apart), 2.2438 - but would render as a normal repeating gradient if, for example, 2.2439 - the author applied "zoom:100;" to the element on which the gradient appears: 2.2440 + The following gradient would render the same as the previous under normal circumstances 2.2441 + (because desktop monitors can't faithfully render color-stops 1/10th of a pixel apart), 2.2442 + but would render as a normal repeating gradient if, for example, 2.2443 + the author applied "zoom:100;" to the element on which the gradient appears: 2.2444 2.2445 <pre class="css">repeating-linear-gradient(red 0px, white .1px, blue .2px);</pre> 2.2446 </div> 2.2447 @@ -1846,18 +1671,19 @@ 2.2448 <h3 id='color-stop-syntax'> 2.2449 Gradient Color-Stops</h3> 2.2450 2.2451 - <pre class=prod>
<!-- 2.2452 - --><dfn><color-stop-list></dfn> = 
<!-- 2.2453 - --> <var><cap-linear-color-stop></var> , [ <var><linear-color-stop></var># , ]? <var><cap-linear-color-stop></var>
<!-- 2.2454 - --><dfn><cap-linear-color-stop></dfn> = <var><color></var> && <var><color-stop-length></var>?
<!-- 2.2455 - --><dfn><linear-color-stop></dfn> = <var><color></var> || <var><color-stop-length></var>
<!-- 2.2456 - --><dfn><color-stop-length></dfn> = [ <var title=''><length></var> | <var><percentage></var> ]{1,2}
<!-- 2.2457 - -->
<!-- 2.2458 - --><dfn><angular-color-stop-list></dfn> = 
<!-- 2.2459 - --> <var><cap-angular-color-stop></var> , [ <var><angular-color-stop></var># , ]? <var><cap-angular-color-stop></var>
<!-- 2.2460 - --><dfn><cap-angular-color-stop></dfn> = <var><color></var> && <var><color-stop-angle></var>?
<!-- 2.2461 - --><dfn><angular-color-stop></dfn> = <var><color></var> || <var><color-stop-angle></var>
<!-- 2.2462 - --><dfn><color-stop-angle></dfn> = [ <var><angle></var> | <var><percentage></var> ]{1,2}</pre> 2.2463 + <pre class=prod> 2.2464 + <dfn><color-stop-list></dfn> = 2.2465 + <<cap-linear-color-stop>> , [ <<linear-color-stop>># , ]? <<cap-linear-color-stop>> 2.2466 + <dfn><cap-linear-color-stop></dfn> = <<color>> && <<color-stop-length>>? 2.2467 + <dfn><linear-color-stop></dfn> = <<color>> || <<color-stop-length>> 2.2468 + <dfn><color-stop-length></dfn> = [ <var title=''><length>> | <<percentage>> ]{1,2} 2.2469 + 2.2470 + <dfn><angular-color-stop-list></dfn> = 2.2471 + <<cap-angular-color-stop>> , [ <<angular-color-stop>># , ]? <<cap-angular-color-stop>> 2.2472 + <dfn><cap-angular-color-stop></dfn> = <<color>> && <<color-stop-angle>>? 2.2473 + <dfn><angular-color-stop></dfn> = <<color>> || <<color-stop-angle>> 2.2474 + <dfn><color-stop-angle></dfn> = [ <<angle>> | <<percentage>> ]{1,2} 2.2475 + </pre> 2.2476 2.2477 <p class='issue'> 2.2478 This is past the complexity point where it can be easily understood with just prose. 2.2479 @@ -1865,95 +1691,86 @@ 2.2480 preferably for all three kinds of gradients 2.2481 (to show off the three shapes of gradient lines). 2.2482 2.2483 - <p> 2.2484 - The colors in gradients are specified using <i>color stops</i>. 2.2485 - A <dfn>color stop</dfn> is a combination of a color and one or two positions. 2.2486 - (Depending on the type of gradient, that position can be a length, angle, or percentage.) 2.2487 - While every color stop conceptually has both of these, 2.2488 - either of them can be omitted when writing a stylesheet. 2.2489 - (The missing parts are automatically filled in by the user agent.) 2.2490 - 2.2491 - <p> 2.2492 - Color stops are organized into a <dfn>color stop list</dfn>, 2.2493 - which is a list of one or more <i>color stops</i>. 2.2494 - The first and last <i>color stops</i> in the list 2.2495 - must have a color 2.2496 - (though their position can be omitted). 2.2497 - 2.2498 - <p> 2.2499 - <i>Color stops</i> are placed on a <dfn>gradient line</dfn>, 2.2500 - which defines the colors at every point of a gradient. 2.2501 - The gradient function defines the shape and length of the <i>gradient line</i>, 2.2502 - along with its <dfn>starting point</dfn> and <dfn>ending point</dfn>. 2.2503 - 2.2504 - <p> 2.2505 - <i>Color stops</i> must be specified in order. 2.2506 - Percentages refer to the length of the <i>gradient line</i> between the <i>starting point</i> and <i>ending point</i>, 2.2507 - with 0% being at the starting point 2.2508 - and 100% being at the ending point. 2.2509 - Lengths are measured from the <i>starting point</i> in the direction of the <i>ending point</i> along the <i>gradient line</i>. 2.2510 - Angles are measured with 0deg pointing up, 2.2511 - and positive angles corresponding to clockwise rotations from there. 2.2512 - 2.2513 - <p> 2.2514 - <i>Color stops</i> are usually placed between the <i>starting point</i> and <i>ending point</i>, 2.2515 - but that's not required; 2.2516 - the gradient line extends infinitely in both directions, 2.2517 - and a <i>color stop</i> can be placed at any position on the <i>gradient line</i>. 2.2518 - 2.2519 - <p> 2.2520 - A <i>color stop</i> with two locations is mostly equivalent 2.2521 - to specifying two <i>color stops</i> with the same color, 2.2522 - one for each position. 2.2523 - However, if the color is omitted, 2.2524 - it's treated slightly differently by step 4 in the clean-up algorithm below. 2.2525 - <span class='note'>Specifying two locations makes it easier to create solid-color "stripes" in a gradient, 2.2526 - without having to repeat the color twice.</span> 2.2527 - 2.2528 - <p> 2.2529 - The position of a <i>color stop</i> can be omitted. 2.2530 - This causes the <i>color stop</i> to position itself automatically 2.2531 - between the two surrounding stops. 2.2532 - If multiple stops in a row lack a position, 2.2533 - they space themselves out equally. 2.2534 - 2.2535 - <p> 2.2536 - Similarly, the color of a <i>color stop</i> can be omitted. 2.2537 - The causes the <em>color</em> to be automatically computed 2.2538 - to halfway between the two surrounding stops, 2.2539 - so that the "midpoint" of a transition can be easily adjusted. 2.2540 - If multiple stops in a row lack a color, 2.2541 - they space themselves out equally in "color space", 2.2542 - giving more control over the smoothness of the transition. 2.2543 - 2.2544 - <p> 2.2545 - The following steps must be applied <em>in order</em> to process the list of <i>color stops</i>. 2.2546 - After applying these rules, 2.2547 - all <i>color stops</i> will have a definite position and color 2.2548 - and they will be in ascending order: 2.2549 + The colors in gradients are specified using <a>color stops</a>. 2.2550 + A <dfn>color stop</dfn> is a combination of a color and one or two positions. 2.2551 + (Depending on the type of gradient, that position can be a length, angle, or percentage.) 2.2552 + While every color stop conceptually has both of these, 2.2553 + either of them can be omitted when writing a stylesheet. 2.2554 + (The missing parts are automatically filled in by the user agent.) 2.2555 + 2.2556 + Color stops are organized into a <dfn>color stop list</dfn>, 2.2557 + which is a list of one or more <a>color stops</a>. 2.2558 + The first and last <a>color stops</a> in the list 2.2559 + must have a color 2.2560 + (though their position can be omitted). 2.2561 + 2.2562 + <a>Color stops</a> are placed on a <a>gradient line</a>, 2.2563 + which defines the colors at every point of a gradient. 2.2564 + The gradient function defines the shape and length of the <a>gradient line</a>, 2.2565 + along with its <dfn>starting point</dfn> and <dfn>ending point</dfn>. 2.2566 + 2.2567 + <a>Color stops</a> must be specified in order. 2.2568 + Percentages refer to the length of the <a>gradient line</a> between the <a>starting point</a> and <a>ending point</a>, 2.2569 + with 0% being at the starting point 2.2570 + and 100% being at the ending point. 2.2571 + Lengths are measured from the <a>starting point</a> in the direction of the <a>ending point</a> along the <a>gradient line</a>. 2.2572 + Angles are measured with 0deg pointing up, 2.2573 + and positive angles corresponding to clockwise rotations from there. 2.2574 + 2.2575 + <a>Color stops</a> are usually placed between the <a>starting point</a> and <a>ending point</a>, 2.2576 + but that's not required; 2.2577 + the gradient line extends infinitely in both directions, 2.2578 + and a <a>color stop</a> can be placed at any position on the <a>gradient line</a>. 2.2579 + 2.2580 + A <a>color stop</a> with two locations is mostly equivalent 2.2581 + to specifying two <a>color stops</a> with the same color, 2.2582 + one for each position. 2.2583 + However, if the color is omitted, 2.2584 + it's treated slightly differently by step 4 in the clean-up algorithm below. 2.2585 + <span class='note'>Specifying two locations makes it easier to create solid-color "stripes" in a gradient, 2.2586 + without having to repeat the color twice.</span> 2.2587 + 2.2588 + The position of a <a>color stop</a> can be omitted. 2.2589 + This causes the <a>color stop</a> to position itself automatically 2.2590 + between the two surrounding stops. 2.2591 + If multiple stops in a row lack a position, 2.2592 + they space themselves out equally. 2.2593 + 2.2594 + Similarly, the color of a <a>color stop</a> can be omitted. 2.2595 + The causes the <em>color</em> to be automatically computed 2.2596 + to halfway between the two surrounding stops, 2.2597 + so that the "midpoint" of a transition can be easily adjusted. 2.2598 + If multiple stops in a row lack a color, 2.2599 + they space themselves out equally in "color space", 2.2600 + giving more control over the smoothness of the transition. 2.2601 + 2.2602 + The following steps must be applied <em>in order</em> to process the list of <a>color stops</a>. 2.2603 + After applying these rules, 2.2604 + all <a>color stops</a> will have a definite position and color 2.2605 + and they will be in ascending order: 2.2606 2.2607 <ol> 2.2608 <li> 2.2609 - If the first <i>color stop</i> does not have a position, 2.2610 + If the first <a>color stop</a> does not have a position, 2.2611 set its position to 0%. 2.2612 - If the last <i>color stop</i> does not have a position, 2.2613 + If the last <a>color stop</a> does not have a position, 2.2614 set its position to 100%. 2.2615 2.2616 <li> 2.2617 - If a <i>color stop</i> has a position that is less than the specified position of any <i>color stop</i> before it in the list, 2.2618 - set its position to be equal to the largest specified position of any <i>color stop</i> before it. 2.2619 + If a <a>color stop</a> has a position that is less than the specified position of any <a>color stop</a> before it in the list, 2.2620 + set its position to be equal to the largest specified position of any <a>color stop</a> before it. 2.2621 2.2622 <li> 2.2623 - If any <i>color stop</i> still does not have a position, 2.2624 - then, for each run of adjacent <i>color stops</i> without positions, 2.2625 - set their positions so that they are evenly spaced between the preceding and following <i>color stops</i> with positions. 2.2626 + If any <a>color stop</a> still does not have a position, 2.2627 + then, for each run of adjacent <a>color stops</a> without positions, 2.2628 + set their positions so that they are evenly spaced between the preceding and following <a>color stops</a> with positions. 2.2629 2.2630 <li> 2.2631 - If any <i>color stop</i> does not have a color, 2.2632 - then, for each run of adjacent <i>color stops</i> without colors, 2.2633 + If any <a>color stop</a> does not have a color, 2.2634 + then, for each run of adjacent <a>color stops</a> without colors, 2.2635 set their colors to be evenly spaced linear interpolations in premultiplied sRGBA space 2.2636 - between the preceding and following <i>color stops</i> with colors. 2.2637 - Note that a <i>color stop</i> with two positions is still counted as a single <i>color stop</i> by this step, 2.2638 + between the preceding and following <a>color stops</a> with colors. 2.2639 + Note that a <a>color stop</a> with two positions is still counted as a single <a>color stop</a> by this step, 2.2640 so both positions will be assigned the same color. 2.2641 </ol> 2.2642 2.2643 @@ -1962,125 +1779,117 @@ 2.2644 because implied-position stops (set by step 3) 2.2645 may depend on stops that need layout information to place, 2.2646 and which may be corrected by step 2. 2.2647 - Swapping steps 2 and 3 would let us interpolate <i>color stops</i> purely at computed-value time, 2.2648 + Swapping steps 2 and 3 would let us interpolate <a>color stops</a> purely at computed-value time, 2.2649 which is a nice plus, 2.2650 at the cost of changing behavior from level 3 for some edge cases that triggered fixup. 2.2651 Make sure this is handled well in the serialization rules. 2.2652 2.2653 - <p> 2.2654 - At each <i>color stop</i> position, 2.2655 - the line is the color of the <i>color stop</i>. 2.2656 - Between two <i>color stops</i>, 2.2657 - the line's color is linearly interpolated between the colors of the two <i>color stops</i>, 2.2658 - with the interpolation taking place in premultiplied RGBA space. 2.2659 - Before the first <i>color stop</i>, 2.2660 - the line is the color of the first <i>color stop</i>. 2.2661 - After the last <i>color stop</i>, the line is the color of the last <i>color stop</i>. 2.2662 - 2.2663 - <p> 2.2664 - If multiple <i>color stops</i> have the same position, 2.2665 - they produce an infinitesimal transition from the one specified first in the rule 2.2666 - to the one specified last. 2.2667 - In effect, the color suddenly changes at that position rather than smoothly transitioning. 2.2668 + At each <a>color stop</a> position, 2.2669 + the line is the color of the <a>color stop</a>. 2.2670 + Between two <a>color stops</a>, 2.2671 + the line's color is linearly interpolated between the colors of the two <a>color stops</a>, 2.2672 + with the interpolation taking place in premultiplied RGBA space. 2.2673 + Before the first <a>color stop</a>, 2.2674 + the line is the color of the first <a>color stop</a>. 2.2675 + After the last <a>color stop</a>, the line is the color of the last <a>color stop</a>. 2.2676 + 2.2677 + If multiple <a>color stops</a> have the same position, 2.2678 + they produce an infinitesimal transition from the one specified first in the rule 2.2679 + to the one specified last. 2.2680 + In effect, the color suddenly changes at that position rather than smoothly transitioning. 2.2681 2.2682 <div class=example> 2.2683 - <p> 2.2684 - Below are several pairs of gradients. 2.2685 - The latter of each pair is a manually "fixed-up" version of the former, 2.2686 - obtained by applying the above rules. 2.2687 - For each pair, both gradients will render identically. 2.2688 - <span class='note'>The numbers in each arrow specify which fixup steps are invoked in the transformation.</span> 2.2689 - 2.2690 - <pre><!-- 2.2691 - -->1. linear-gradient(red, white 20%, blue)
<!-- 2.2692 - --> =1=>
<!-- 2.2693 - --> linear-gradient(red 0%, white 20%, blue 100%)
<!-- 2.2694 - -->
<!-- 2.2695 - -->2. linear-gradient(red 40%, white, black, blue)
<!-- 2.2696 - --> =13=>
<!-- 2.2697 - --> linear-gradient(red 40%, white 60%, black 80%, blue 100%)
<!-- 2.2698 - -->
<!-- 2.2699 - -->3. linear-gradient(red -50%, white, blue)
<!-- 2.2700 - --> =13=>
<!-- 2.2701 - --> linear-gradient(red -50%, white 25%, blue 100%)
<!-- 2.2702 - -->
<!-- 2.2703 - -->4. linear-gradient(red -50px, white, blue)
<!-- 2.2704 - --> =13=>
<!-- 2.2705 - --> linear-gradient(red -50px, white calc(-25px + 50%), blue 100%)
<!-- 2.2706 - -->
<!-- 2.2707 - -->5. linear-gradient(red 20px, white 0px, blue 40px)
<!-- 2.2708 - --> =2=>
<!-- 2.2709 - --> linear-gradient(red 20px, white 20px, blue 40px)
<!-- 2.2710 - -->
<!-- 2.2711 - -->6. linear-gradient(red, white -50%, black 150%, blue)
<!-- 2.2712 - --> =12=>
<!-- 2.2713 - --> linear-gradient(red 0%, white 0%, black 150%, blue 150%)
<!-- 2.2714 - -->
<!-- 2.2715 - -->7. linear-gradient(red 80px, white 0px, black, blue 100px)
<!-- 2.2716 - --> =23=>
<!-- 2.2717 - --> linear-gradient(red 80px, white 80px, black 90px, blue 100px)
<!-- 2.2718 - -->
<!-- 2.2719 - -->8. linear-gradient(red, 25%, white)
<!-- 2.2720 - --> =14=>
<!-- 2.2721 - --> linear-gradient(red 0%, rgb(100%,50%,50%) 25%, white 100%)</pre> 2.2722 + Below are several pairs of gradients. 2.2723 + The latter of each pair is a manually "fixed-up" version of the former, 2.2724 + obtained by applying the above rules. 2.2725 + For each pair, both gradients will render identically. 2.2726 + <span class='note'>The numbers in each arrow specify which fixup steps are invoked in the transformation.</span> 2.2727 + 2.2728 + <pre> 2.2729 + 1. linear-gradient(red, white 20%, blue) 2.2730 + =1=> 2.2731 + linear-gradient(red 0%, white 20%, blue 100%) 2.2732 + 2.2733 + 2. linear-gradient(red 40%, white, black, blue) 2.2734 + =13=> 2.2735 + linear-gradient(red 40%, white 60%, black 80%, blue 100%) 2.2736 + 2.2737 + 3. linear-gradient(red -50%, white, blue) 2.2738 + =13=> 2.2739 + linear-gradient(red -50%, white 25%, blue 100%) 2.2740 + 2.2741 + 4. linear-gradient(red -50px, white, blue) 2.2742 + =13=> 2.2743 + linear-gradient(red -50px, white calc(-25px + 50%), blue 100%) 2.2744 + 2.2745 + 5. linear-gradient(red 20px, white 0px, blue 40px) 2.2746 + =2=> 2.2747 + linear-gradient(red 20px, white 20px, blue 40px) 2.2748 + 2.2749 + 6. linear-gradient(red, white -50%, black 150%, blue) 2.2750 + =12=> 2.2751 + linear-gradient(red 0%, white 0%, black 150%, blue 150%) 2.2752 + 2.2753 + 7. linear-gradient(red 80px, white 0px, black, blue 100px) 2.2754 + =23=> 2.2755 + linear-gradient(red 80px, white 80px, black 90px, blue 100px) 2.2756 + 2.2757 + 8. linear-gradient(red, 25%, white) 2.2758 + =14=> 2.2759 + linear-gradient(red 0%, rgb(100%,50%,50%) 25%, white 100%) 2.2760 + </pre> 2.2761 </div> 2.2762 2.2763 <div class=example> 2.2764 - <p> 2.2765 - The following example illustrates the difference between 2.2766 - a gradient transitioning in pre-multiplied sRGBA 2.2767 - and one transitioning (incorrectly) in non-premultiplied. 2.2768 - In both of these example, 2.2769 - the gradient is drawn over a white background. 2.2770 - Both gradients could be written with the following value: 2.2771 + The following example illustrates the difference between 2.2772 + a gradient transitioning in pre-multiplied sRGBA 2.2773 + and one transitioning (incorrectly) in non-premultiplied. 2.2774 + In both of these example, 2.2775 + the gradient is drawn over a white background. 2.2776 + Both gradients could be written with the following value: 2.2777 2.2778 <pre>linear-gradient(90deg, red, transparent, blue)</pre> 2.2779 2.2780 - <p> 2.2781 - In premultiplied space, 2.2782 - transitions to or from "transparent" always look nice: 2.2783 - 2.2784 - <p><object data="images/gradient2.svg" width="200" 2.2785 - height="100">(Image requires SVG)</object> 2.2786 - 2.2787 - <p> 2.2788 - On the other hand, 2.2789 - if a gradient were to incorrectly transition in non-premultiplied space, 2.2790 - the colors near "transparent" would noticeably darken to a grayish color, 2.2791 - because "transparent" is actually a shorthand for ''rgba(0,0,0,0)'', or transparent black: 2.2792 - 2.2793 - <p><object data="images/gradient3.svg" width="200" 2.2794 - height="100">(Image requires SVG)</object> 2.2795 + In premultiplied space, 2.2796 + transitions to or from "transparent" always look nice: 2.2797 + 2.2798 + <object data="images/gradient2.svg" width="200"height="100">(Image requires SVG)</object> 2.2799 + 2.2800 + On the other hand, 2.2801 + if a gradient were to incorrectly transition in non-premultiplied space, 2.2802 + the colors near "transparent" would noticeably darken to a grayish color, 2.2803 + because "transparent" is actually a shorthand for ''rgba(0,0,0,0)'', or transparent black: 2.2804 + 2.2805 + <object data="images/gradient3.svg" width="200"height="100">(Image requires SVG)</object> 2.2806 </div> 2.2807 2.2808 - <p class=note> 2.2809 - Note: It is recommended that authors not mix different types of units, 2.2810 - such as px, em, or %, 2.2811 - in a single rule, 2.2812 - as this can cause a <i>color stop</i> to unintentionally try to move before an earlier one. 2.2813 - For example, the rule ''background-image: linear-gradient(yellow 100px, blue 50%)'' 2.2814 - wouldn't require any fix-up as long as the background area is at least 200px tall. 2.2815 - If it was 150px tall, however, 2.2816 - the blue <i>color stop's</i> position would be equivalent to "75px", 2.2817 - which precedes the yellow <i>color stop</i>, 2.2818 - and would be corrected to a position of 100px. 2.2819 - 2.2820 - <p class=note> 2.2821 - Note: The definition and implications of "premultiplied" color spaces are given elsewhere in the technical literature, 2.2822 - but a quick primer is given here to illuminate the process. 2.2823 - Given a color expressed as an rgba() 4-tuple, 2.2824 - one can convert this to a premultiplied representation 2.2825 - by multiplying the red, green, and blue components by the alpha component. 2.2826 - For example, a partially-transparent blue may be given as rgba(0,0,255,.5), 2.2827 - which would then be expressed as [0, 0, 127.5, .5] in its premultiplied representation. 2.2828 - Interpolating colors using the premultiplied representations 2.2829 - rather than the plain rgba representations 2.2830 - tends to produce more attractive transitions, 2.2831 - particularly when transitioning from a fully opaque color to fully transparent. 2.2832 - Note that transitions where either the transparency or the color are held constant 2.2833 - (for example, transitioning between rgba(255,0,0,100%) and rgba(0,0,255,100%) or rgba(255,0,0,100%) and rgba(255,0,0,0%)) 2.2834 - have identical results whether the color interpolation is done in premultiplied or non-premultiplied color-space. 2.2835 - Differences only arise when both the color and transparency differ between the two endpoints. 2.2836 + Note: It is recommended that authors not mix different types of units, 2.2837 + such as px, em, or %, 2.2838 + in a single rule, 2.2839 + as this can cause a <a>color stop</a> to unintentionally try to move before an earlier one. 2.2840 + For example, the rule ''background-image: linear-gradient(yellow 100px, blue 50%)'' 2.2841 + wouldn't require any fix-up as long as the background area is at least 200px tall. 2.2842 + If it was 150px tall, however, 2.2843 + the blue <a>color stop's</a> position would be equivalent to "75px", 2.2844 + which precedes the yellow <a>color stop</a>, 2.2845 + and would be corrected to a position of 100px. 2.2846 + 2.2847 + Note: The definition and implications of "premultiplied" color spaces are given elsewhere in the technical literature, 2.2848 + but a quick primer is given here to illuminate the process. 2.2849 + Given a color expressed as an rgba() 4-tuple, 2.2850 + one can convert this to a premultiplied representation 2.2851 + by multiplying the red, green, and blue components by the alpha component. 2.2852 + For example, a partially-transparent blue may be given as rgba(0,0,255,.5), 2.2853 + which would then be expressed as [0, 0, 127.5, .5] in its premultiplied representation. 2.2854 + Interpolating colors using the premultiplied representations 2.2855 + rather than the plain rgba representations 2.2856 + tends to produce more attractive transitions, 2.2857 + particularly when transitioning from a fully opaque color to fully transparent. 2.2858 + Note that transitions where either the transparency or the color are held constant 2.2859 + (for example, transitioning between rgba(255,0,0,100%) and rgba(0,0,255,100%), 2.2860 + or rgba(255,0,0,100%) and rgba(255,0,0,0%)) 2.2861 + have identical results whether the color interpolation is done in premultiplied or non-premultiplied color-space. 2.2862 + Differences only arise when both the color and transparency differ between the two endpoints. 2.2863 2.2864 2.2865 <!-- 2.2866 @@ -2113,63 +1922,58 @@ 2.2867 <h2 id="sizing"> 2.2868 Sizing Images and Objects in CSS</h2> 2.2869 2.2870 - <p> 2.2871 - Images used in CSS may come from a number of sources: 2.2872 - from binary image formats (such as gif, jpeg, etc), 2.2873 - dedicated markup formats (such as SVG), 2.2874 - and CSS-specific formats (such as the linear-gradient() value type defined in this specification). 2.2875 - As well, a document may contain many other types of objects, 2.2876 - such as video, plugins, or nested documents. 2.2877 - These images and objects 2.2878 - (just <dfn>objects</dfn> hereafter) 2.2879 - may offer many types of sizing information to CSS, 2.2880 - or none at all. 2.2881 - This section defines generically the size negotiation model between the object and the CSS layout algorithms. 2.2882 + Images used in CSS may come from a number of sources: 2.2883 + from binary image formats (such as gif, jpeg, etc), 2.2884 + dedicated markup formats (such as SVG), 2.2885 + and CSS-specific formats (such as the linear-gradient() value type defined in this specification). 2.2886 + As well, a document may contain many other types of objects, 2.2887 + such as video, plugins, or nested documents. 2.2888 + These images and objects 2.2889 + (just <dfn>objects</dfn> hereafter) 2.2890 + may offer many types of sizing information to CSS, 2.2891 + or none at all. 2.2892 + This section defines generically the size negotiation model between the object and the CSS layout algorithms. 2.2893 2.2894 <!-- ====================================================================== --> 2.2895 2.2896 <h3 id="sizing-terms"> 2.2897 Object-Sizing Terminology</h3> 2.2898 2.2899 - <p> 2.2900 - In order to define this handling, 2.2901 - we define a few terms, 2.2902 - to make it easier to refer to various concepts: 2.2903 + In order to define this handling, 2.2904 + we define a few terms, 2.2905 + to make it easier to refer to various concepts: 2.2906 2.2907 <dl> 2.2908 <dt><dfn>intrinsic dimensions</dfn> 2.2909 <dd> 2.2910 - <p> 2.2911 - The term intrinsic dimensions refers to the set of 2.2912 - the <dfn>intrinsic height</dfn>, 2.2913 - <dfn>intrinsic width</dfn>, 2.2914 - and <dfn>intrinsic aspect ratio</dfn> 2.2915 - (the ratio between the width and height), 2.2916 - each of which may or may not exist for a given object. 2.2917 - These intrinsic dimensions represent a preferred or natural size of the object itself; 2.2918 - that is, they are not a function of the context in which the object is used. 2.2919 - CSS does not define how the intrinsic dimensions are found in general. 2.2920 - 2.2921 - <p> 2.2922 - Raster images are an example of an object with all three intrinsic dimensions. 2.2923 - SVG images designed to scale might have only an intrinsic aspect ratio; 2.2924 - SVG images can also be created with only an intrinsic width or height. 2.2925 - CSS gradients, defined in this specification, are an example of an object with no intrinsic dimensions at all. 2.2926 - Another example of this is embedded documents, 2.2927 - such as the <code><iframe></code> element in HTML. 2.2928 - An object cannot have only two intrinsic dimensions, 2.2929 - as any two automatically define the third. 2.2930 - 2.2931 - <p> 2.2932 - If an object (such as an icon) has multiple sizes, 2.2933 - then the largest size (by area) is taken as its intrinsic size. 2.2934 - If it has multiple aspect ratios at that size, 2.2935 - or has multiple aspect ratios and no size, 2.2936 - then the aspect ratio closest to the aspect ratio of the <i>default object size</i> is used. 2.2937 - Determine this by seeing which aspect ratio produces the largest area 2.2938 - when fitting it within the <i>default object size</i> using a <i>contain</i> fit; 2.2939 - if multiple sizes tie for the largest area, 2.2940 - the wider size is chosen as its intrinsic size. 2.2941 + The term intrinsic dimensions refers to the set of 2.2942 + the <dfn>intrinsic height</dfn>, 2.2943 + <dfn>intrinsic width</dfn>, 2.2944 + and <dfn>intrinsic aspect ratio</dfn> 2.2945 + (the ratio between the width and height), 2.2946 + each of which may or may not exist for a given object. 2.2947 + These intrinsic dimensions represent a preferred or natural size of the object itself; 2.2948 + that is, they are not a function of the context in which the object is used. 2.2949 + CSS does not define how the intrinsic dimensions are found in general. 2.2950 + 2.2951 + Raster images are an example of an object with all three intrinsic dimensions. 2.2952 + SVG images designed to scale might have only an intrinsic aspect ratio; 2.2953 + SVG images can also be created with only an intrinsic width or height. 2.2954 + CSS gradients, defined in this specification, are an example of an object with no intrinsic dimensions at all. 2.2955 + Another example of this is embedded documents, 2.2956 + such as the <code><iframe></code> element in HTML. 2.2957 + An object cannot have only two intrinsic dimensions, 2.2958 + as any two automatically define the third. 2.2959 + 2.2960 + If an object (such as an icon) has multiple sizes, 2.2961 + then the largest size (by area) is taken as its intrinsic size. 2.2962 + If it has multiple aspect ratios at that size, 2.2963 + or has multiple aspect ratios and no size, 2.2964 + then the aspect ratio closest to the aspect ratio of the <a>default object size</a> is used. 2.2965 + Determine this by seeing which aspect ratio produces the largest area 2.2966 + when fitting it within the <a>default object size</a> using a <a>contain</a> fit; 2.2967 + if multiple sizes tie for the largest area, 2.2968 + the wider size is chosen as its intrinsic size. 2.2969 2.2970 2.2971 <dt><dfn>specified size</dfn> 2.2972 @@ -2182,51 +1986,49 @@ 2.2973 2.2974 <dt><dfn>concrete object size</dfn> 2.2975 <dd> 2.2976 - The <i>concrete object size</i> is the result of combining 2.2977 - an object's <i>intrinsic dimensions</i> and <i>specified size</i> 2.2978 - with the <i>default object size</i> of the context it's used in, 2.2979 + The <a>concrete object size</a> is the result of combining 2.2980 + an object's <a>intrinsic dimensions</a> and <a>specified size</a> 2.2981 + with the <a>default object size</a> of the context it's used in, 2.2982 producing a rectangle with a definite width and height. 2.2983 2.2984 <dt><dfn>default object size</dfn> 2.2985 <dd> 2.2986 - <p> 2.2987 - The <i>default object size</i> is a rectangle with a definite height and width 2.2988 - used to determine the <i>concrete object size</i> 2.2989 - when both the <i>intrinsic dimensions</i> and <i>specified size</i> are missing dimensions. 2.2990 + The <a>default object size</a> is a rectangle with a definite height and width 2.2991 + used to determine the <a>concrete object size</a> 2.2992 + when both the <a>intrinsic dimensions</a> and <a>specified size</a> are missing dimensions. 2.2993 2.2994 </dl> 2.2995 2.2996 -<!-- ====================================================================== --> 2.2997 2.2998 <h3 id="object-negotiation"> 2.2999 -CSS⇋Object Negotiation</h3> 2.3000 - 2.3001 - <p>Objects in CSS are sized and rendered as follows: 2.3002 +CSS⇋Object Negotiation</h3> 2.3003 + 2.3004 + Objects in CSS are sized and rendered as follows: 2.3005 2.3006 <ol> 2.3007 <li> 2.3008 When an image or object is specified in a document, 2.3009 such as through a ''url()'' value in a 'background-image' property 2.3010 or a <code>src</code> attribute on an <code><img></code> element, 2.3011 - CSS queries the object for its <i>intrinsic dimensions</i>. 2.3012 + CSS queries the object for its <a>intrinsic dimensions</a>. 2.3013 2.3014 <li> 2.3015 - Using the <i>intrinsic dimensions</i>, 2.3016 - the <i>specified size</i>, 2.3017 - and the <i>default object size</i> for the context the image or object is used in, 2.3018 - CSS then computes a <i>concrete object size</i>. 2.3019 + Using the <a>intrinsic dimensions</a>, 2.3020 + the <a>specified size</a>, 2.3021 + and the <a>default object size</a> for the context the image or object is used in, 2.3022 + CSS then computes a <a>concrete object size</a>. 2.3023 (See the <a href="#default-sizing">following section</a>.) 2.3024 This defines the size and position of the region the object will render in. 2.3025 2.3026 <li> 2.3027 - CSS asks the object to render itself at the <i>concrete object size</i>. 2.3028 - CSS does not define how objects render when the <i>concrete object size</i> is different from the object's <i>intrinsic dimensions</i>. 2.3029 - The object may adjust itself to match the <i>concrete object size</i> in some way, 2.3030 - or even render itself larger or smaller than the <i>concrete object size</i> to satisfy sizing constraints of its own. 2.3031 + CSS asks the object to render itself at the <a>concrete object size</a>. 2.3032 + CSS does not define how objects render when the <a>concrete object size</a> is different from the object's <a>intrinsic dimensions</a>. 2.3033 + The object may adjust itself to match the <a>concrete object size</a> in some way, 2.3034 + or even render itself larger or smaller than the <a>concrete object size</a> to satisfy sizing constraints of its own. 2.3035 2.3036 <li> 2.3037 Unless otherwise specified by CSS, 2.3038 - the object is then clipped to the <i>concrete object size</i>. 2.3039 + the object is then clipped to the <a>concrete object size</a>. 2.3040 </ol> 2.3041 2.3042 <!-- ====================================================================== --> 2.3043 @@ -2234,68 +2036,64 @@ 2.3044 <h3 id="concrete-size-resolution"> 2.3045 Concrete Object Size Resolution</h3> 2.3046 2.3047 - <p> 2.3048 - Currently the rules for sizing objects are described in each context that such objects are used. 2.3049 - This section defines some common sizing constraints 2.3050 - and how to resolve them 2.3051 - so that future specs can refer to them instead of redefining size resolution in each instance. 2.3052 + Currently the rules for sizing objects are described in each context that such objects are used. 2.3053 + This section defines some common sizing constraints 2.3054 + and how to resolve them 2.3055 + so that future specs can refer to them instead of redefining size resolution in each instance. 2.3056 2.3057 <h4 id="default-sizing"> 2.3058 Default Sizing Algorithm</h4> 2.3059 2.3060 - <p> 2.3061 - The <dfn>default sizing algorithm</dfn> is a set of rules commonly used to find an object's <i>concrete object size</i>. 2.3062 - It resolves the simultaneous constraints presented by the object's <i>intrinsic dimensions</i> 2.3063 - and either an unconstrained <i>specified size</i> 2.3064 - or one consisting of only a definite width and/or height. 2.3065 - 2.3066 - <p> 2.3067 - Some object sizing rules 2.3068 - (such as those for 'list-style-image') 2.3069 - correspond exactly to the <i>default sizing algorithm</i>. 2.3070 - Others 2.3071 - (such as those for 'border-image') 2.3072 - invoke the default sizing algorithm 2.3073 - but also apply additional sizing rules before arriving at a final <i>concrete object size</i>. 2.3074 - 2.3075 - <p> 2.3076 - The <i>default sizing algorithm</i> is defined as follows: 2.3077 + The <dfn>default sizing algorithm</dfn> is a set of rules commonly used to find an object's <a>concrete object size</a>. 2.3078 + It resolves the simultaneous constraints presented by the object's <a>intrinsic dimensions</a> 2.3079 + and either an unconstrained <a>specified size</a> 2.3080 + or one consisting of only a definite width and/or height. 2.3081 + 2.3082 + Some object sizing rules 2.3083 + (such as those for 'list-style-image') 2.3084 + correspond exactly to the <a>default sizing algorithm</a>. 2.3085 + Others 2.3086 + (such as those for 'border-image') 2.3087 + invoke the default sizing algorithm 2.3088 + but also apply additional sizing rules before arriving at a final <a>concrete object size</a>. 2.3089 + 2.3090 + The <a>default sizing algorithm</a> is defined as follows: 2.3091 2.3092 <ul> 2.3093 <li> 2.3094 - If the <i>specified size</i> is a definite width and height, 2.3095 - the <i>concrete object size</i> is given that width and height. 2.3096 + If the <a>specified size</a> is a definite width and height, 2.3097 + the <a>concrete object size</a> is given that width and height. 2.3098 2.3099 <li> 2.3100 - If the <i>specified size</i> is only a width or height (but not both) 2.3101 - then the <i>concrete object size</i> is given that specified width or height. 2.3102 + If the <a>specified size</a> is only a width or height (but not both) 2.3103 + then the <a>concrete object size</a> is given that specified width or height. 2.3104 The other dimension is calculated as follows: 2.3105 2.3106 <ol> 2.3107 <li> 2.3108 - If the object has an <i>intrinsic aspect ratio</i>, 2.3109 - the missing dimension of the <i>concrete object size</i> 2.3110 - is calculated using the <i>intrinsic aspect ratio</i> and the present dimension. 2.3111 + If the object has an <a>intrinsic aspect ratio</a>, 2.3112 + the missing dimension of the <a>concrete object size</a> 2.3113 + is calculated using the <a>intrinsic aspect ratio</a> and the present dimension. 2.3114 2.3115 <li> 2.3116 - Otherwise, if the missing dimension is present in the object's <i>intrinsic dimensions</i>, 2.3117 - the missing dimension is taken from the object's <i>intrinsic dimensions</i>. 2.3118 + Otherwise, if the missing dimension is present in the object's <a>intrinsic dimensions</a>, 2.3119 + the missing dimension is taken from the object's <a>intrinsic dimensions</a>. 2.3120 2.3121 <li> 2.3122 - Otherwise, the missing dimension of the <i>concrete object size</i> is taken from the <i>default object size</i>. 2.3123 + Otherwise, the missing dimension of the <a>concrete object size</a> is taken from the <a>default object size</a>. 2.3124 </ol> 2.3125 2.3126 2.3127 <li> 2.3128 - If the <i>specified size</i> has no constraints: 2.3129 + If the <a>specified size</a> has no constraints: 2.3130 2.3131 <ol> 2.3132 <li> 2.3133 If the object has an intrinsic height or width, 2.3134 - its size is resolved as if its <i>intrinsic size</i> were given as the <i>specified size</i>. 2.3135 + its size is resolved as if its <a>intrinsic size</a> were given as the <a>specified size</a>. 2.3136 2.3137 <li> 2.3138 - Otherwise, its size is resolved as a <i>contain constraint</i> against the <i>default object size</i>. 2.3139 + Otherwise, its size is resolved as a <a>contain constraint</a> against the <a>default object size</a>. 2.3140 </ol> 2.3141 2.3142 </ul> 2.3143 @@ -2303,58 +2101,55 @@ 2.3144 <h4 id="cover-contain"> 2.3145 Cover and Contain Constraint Sizing</h4> 2.3146 2.3147 - <p> 2.3148 - Two other common specified sizes are the <i>contain constraint</i> and the <i>cover constraint</i>, 2.3149 - both of which are resolved against a specified <dfn>constraint rectangle</dfn> 2.3150 - using the object's <i>intrinsic aspect ratio</i>: 2.3151 + Two other common specified sizes are the <a>contain constraint</a> and the <a>cover constraint</a>, 2.3152 + both of which are resolved against a specified <dfn>constraint rectangle</dfn> 2.3153 + using the object's <a>intrinsic aspect ratio</a>: 2.3154 2.3155 <ul> 2.3156 <li> 2.3157 A <dfn>contain constraint</dfn> is resolved 2.3158 - by setting the <i>concrete object size</i> to the largest rectangle that has the object's <i>intrinsic aspect ratio</i> 2.3159 + by setting the <a>concrete object size</a> to the largest rectangle that has the object's <a>intrinsic aspect ratio</a> 2.3160 and additionally has neither width nor height larger than the constraint rectangle's width and height, respectively. 2.3161 2.3162 <li> 2.3163 A <dfn>cover constraint</dfn> is resolved 2.3164 - by setting the <i>concrete object size</i> to the smallest rectangle that has the object's <i>intrinsic aspect ratio</i> 2.3165 + by setting the <a>concrete object size</a> to the smallest rectangle that has the object's <a>intrinsic aspect ratio</a> 2.3166 and additionally has neither width nor height smaller than the constraint rectangle's width and height, respectively. 2.3167 </ul> 2.3168 2.3169 - <p> 2.3170 - In both cases, 2.3171 - if the object doesn't have an intrinsic aspect ratio, 2.3172 - the <i>concrete object size</i> is the specified constraint rectangle. 2.3173 + In both cases, 2.3174 + if the object doesn't have an intrinsic aspect ratio, 2.3175 + the <a>concrete object size</a> is the specified constraint rectangle. 2.3176 2.3177 <h3 id='object-sizing-examples'> 2.3178 Examples of CSS Object Sizing</h3> 2.3179 2.3180 <div class="example"> 2.3181 - <p> 2.3182 - The following examples show how the <a href="http://www.w3.org/TR/CSS21/">CSS 2.1</a> 2.3183 - and <a href="http://www.w3.org/TR/css3-background/">CSS3 Backgrounds & Borders</a> sizing algorithms 2.3184 - correspond to concepts defined in this specification. 2.3185 + The following examples show how the <a href="http://www.w3.org/TR/CSS21/">CSS 2.1</a> 2.3186 + and <a href="http://www.w3.org/TR/css3-background/">CSS3 Backgrounds & Borders</a> sizing algorithms 2.3187 + correspond to concepts defined in this specification. 2.3188 2.3189 <dl> 2.3190 <dt><a href="http://www.w3.org/TR/css3-background/#the-background-image">'background-image'</a> 2.3191 <dd> 2.3192 - The rules for calculating the <i>concrete object size</i> of a background 2.3193 + The rules for calculating the <a>concrete object size</a> of a background 2.3194 are defined in <a href="http://www.w3.org/TR/CSS21/colors.html#background-properties">CSS2.1§14.2.1</a> 2.3195 and <a href="http://www.w3.org/TR/css3-background/#the-background-size">CSS3BG§3.9</a>. 2.3196 - CSS2.1 uses the <i>default sizing algorithm</i> 2.3197 - with no <i>specified size</i> 2.3198 - and the <i>background positioning area</i> as the <i>default object size</i>. [[!CSS21]] 2.3199 + CSS2.1 uses the <a>default sizing algorithm</a> 2.3200 + with no <a>specified size</a> 2.3201 + and the <a>background positioning area</a> as the <a>default object size</a>. [[!CSS21]] 2.3202 In CSS3, 'background-size' property can give a sizing constraint, 2.3203 - invoking either the <i>default sizing algorithm</i> 2.3204 - or one of the <i title="contain constraint">contain</i> or <i title="cover constraint">cover</i> constraints. 2.3205 + invoking either the <a>default sizing algorithm</a> 2.3206 + or one of the <a title="contain constraint">contain</a> or <a title="cover constraint">cover</a> constraints. 2.3207 The concrete object size is further adjusted in later steps if 'background-repeat' has a ''round'' value. [[CSS3BG]] 2.3208 2.3209 <dt><a href="http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-image">'list-style-image'</a> 2.3210 <dd> 2.3211 - The rules for calculating the <i>concrete object size</i> of a list-style image 2.3212 + The rules for calculating the <a>concrete object size</a> of a list-style image 2.3213 are defined in <a href="http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-image">CSS2.1§12.5.1</a>. 2.3214 - They use the <i>default sizing algorithm</i> 2.3215 - with no <i>specified size</i> 2.3216 - and a <i>default object size</i> of 1em square. 2.3217 + They use the <a>default sizing algorithm</a> 2.3218 + with no <a>specified size</a> 2.3219 + and a <a>default object size</a> of 1em square. 2.3220 2.3221 <dt><a href="http://www.w3.org/TR/css3-background/#border-images">'border-image'</a> 2.3222 <dd> 2.3223 @@ -2362,22 +2157,22 @@ 2.3224 first the entire image is sized to determine the slice points, 2.3225 then the slices are sized to decorate the border. 2.3226 The first sizing operation is defined in <a href="http://www.w3.org/TR/css3-background/#the-border-image-slice">CSS3BG§6.2</a> 2.3227 - and uses the <i>default sizing algorithm</i> 2.3228 - with no <i>specified size</i>, 2.3229 - and the <a href="http://www.w3.org/TR/css3-background/#border-image-area">border image area</a> as the <i>default object size</i>. 2.3230 + and uses the <a>default sizing algorithm</a> 2.3231 + with no <a>specified size</a>, 2.3232 + and the <a href="http://www.w3.org/TR/css3-background/#border-image-area">border image area</a> as the <a>default object size</a>. 2.3233 The second operation is defined in <a href="http://www.w3.org/TR/css3-background/#border-image-process">CSS3BG§6.2</a>: 2.3234 - the <i>default sizing algorithm</i> is used to determine an initial size for each slice 2.3235 - with the corresponding <i>border image area</i> part as the default object size. 2.3236 - By default the <i>specified size</i> matches this <i>default object size</i>; 2.3237 + the <a>default sizing algorithm</a> is used to determine an initial size for each slice 2.3238 + with the corresponding <a>border image area</a> part as the default object size. 2.3239 + By default the <a>specified size</a> matches this <a>default object size</a>; 2.3240 however the 'border-image-repeat' property can drop the specified size in one or more directions 2.3241 and may also apply an additional rounding step. [[CSS3BG]] 2.3242 2.3243 2.3244 <dt><a href="http://www.w3.org/TR/CSS21/ui.html#cursor-props">'cursor'</a> 2.3245 <dd> 2.3246 - The rules for calculating the <i>concrete object size</i> of a cursor 2.3247 + The rules for calculating the <a>concrete object size</a> of a cursor 2.3248 are defined in <a href="http://www.w3.org/TR/CSS21/ui.html#cursor-props">CSS2.1 § 18.1: Cursors</a>. 2.3249 - The <i>default object size</i> is a UA-defined size 2.3250 + The <a>default object size</a> is a UA-defined size 2.3251 that should be based on the size of a typical cursor on the UA's operating system. [[!CSS21]] 2.3252 2.3253 <dt><a href="http://www.w3.org/TR/CSS21/generate.html#content">'content'</a> 2.3254 @@ -2396,177 +2191,125 @@ 2.3255 <a href="http://www.w3.org/TR/CSS2/visudet.html#min-max-widths">10.4</a>, 2.3256 <a href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">10.6.2</a>, 2.3257 and <a href="http://www.w3.org/TR/CSS2/visudet.html#min-max-heights">10.7</a>. [[!CSS21]] 2.3258 - The 'object-fit' property defined below defines how the <i>concrete object size</i> corresponds to the element's used width and height; 2.3259 + The 'object-fit' property defined below defines how the <a>concrete object size</a> corresponds to the element's used width and height; 2.3260 by default they coincide. 2.3261 </dl> 2.3262 </div> 2.3263 2.3264 -<!-- ====================================================================== --> 2.3265 2.3266 <h3 id="the-object-fit"> 2.3267 Sizing Objects: the 'object-fit' property</h3> 2.3268 2.3269 - <table class="propdef"> 2.3270 - <tr> 2.3271 - <th>Name: 2.3272 - <td><dfn>object-fit</dfn> 2.3273 - <tr> 2.3274 - <th><a href="#values">Value:</a> 2.3275 - <td>fill | contain | cover | none | scale-down 2.3276 - <tr> 2.3277 - <th>Initial: 2.3278 - <td>fill 2.3279 - <tr> 2.3280 - <th>Applies to: 2.3281 - <td>replaced elements 2.3282 - <tr> 2.3283 - <th>Inherited: 2.3284 - <td>no 2.3285 - <tr> 2.3286 - <th>Percentages: 2.3287 - <td>N/A 2.3288 - <tr> 2.3289 - <th>Media: 2.3290 - <td>visual 2.3291 - <tr> 2.3292 - <th>Computed value: 2.3293 - <td>specified value 2.3294 - <tr> 2.3295 - <th>Animatable: 2.3296 - <td>no 2.3297 - </table> 2.3298 - 2.3299 - <p> 2.3300 - The 'object-fit' property specifies how the contents of a replaced element 2.3301 - should be fitted to the box established by its used height and width. 2.3302 - 2.3303 - <dl> 2.3304 - <dt>''fill'' 2.3305 + <pre class='propdef'> 2.3306 + Name: object-fit 2.3307 + Value: fill | contain | cover | none | scale-down 2.3308 + Initial: fill 2.3309 + Applies to: replaced elements 2.3310 + Inherited: no 2.3311 + Percentages: n/a 2.3312 + Media: visual 2.3313 + Computed value: specified value 2.3314 + Animatable: no 2.3315 + </pre> 2.3316 + 2.3317 + The 'object-fit' property specifies how the contents of a replaced element 2.3318 + should be fitted to the box established by its used height and width. 2.3319 + 2.3320 + <dl dfn-type=value dfn-for=object-fit> 2.3321 + <dt><dfn>fill</dfn> 2.3322 <dd> 2.3323 The replaced content is sized to fill the element's content box: 2.3324 - the object's <i>concrete object size</i> is the element's used width and height. 2.3325 - 2.3326 - <dt>''contain'' 2.3327 + the object's <a>concrete object size</a> is the element's used width and height. 2.3328 + 2.3329 + <dt><dfn>contain</dfn> 2.3330 <dd> 2.3331 The replaced content is sized to maintain its aspect ratio 2.3332 while fitting within the element's content box: 2.3333 - its <i>concrete object size</i> is resolved as a <i>contain constraint</i> 2.3334 + its <a>concrete object size</a> is resolved as a <a>contain constraint</a> 2.3335 against the element's used width and height. 2.3336 2.3337 - <dt>''cover'' 2.3338 + <dt><dfn>cover</dfn> 2.3339 <dd> 2.3340 The replaced content is sized to maintain its aspect ratio 2.3341 while filling the element's entire content box: 2.3342 - its <i>concrete object size</i> is resolved as a <i>cover constraint</i> 2.3343 + its <a>concrete object size</a> is resolved as a <a>cover constraint</a> 2.3344 against the element's used width and height. 2.3345 2.3346 - <dt>''none'' 2.3347 + <dt><dfn>none</dfn> 2.3348 <dd> 2.3349 The replaced content is not resized to fit inside the element's content box: 2.3350 - determine the object's <i>concrete object size</i> 2.3351 - using the <i>default sizing algorithm</i> with no specified size, 2.3352 - and a <i>default object size</i> equal to the replaced element's used width and height. 2.3353 - 2.3354 - <dt>''scale-down'' 2.3355 + determine the object's <a>concrete object size</a> 2.3356 + using the <a>default sizing algorithm</a> with no specified size, 2.3357 + and a <a>default object size</a> equal to the replaced element's used width and height. 2.3358 + 2.3359 + <dt><dfn>scale-down</dfn> 2.3360 <dd> 2.3361 - <p> 2.3362 - Size the content as if ''none'' or ''contain'' were specified, 2.3363 - whichever would result in a smaller <i>concrete object size</i>. 2.3364 - 2.3365 - <p class=note> 2.3366 - Note that both ''none'' and ''contain'' respect the content's intrinsic aspect ratio, 2.3367 - so the concept of "smaller" is well-defined. 2.3368 - 2.3369 + Size the content as if ''none'' or ''contain'' were specified, 2.3370 + whichever would result in a smaller <a>concrete object size</a>. 2.3371 + 2.3372 + Note: Both ''none'' and ''contain'' respect the content's intrinsic aspect ratio, 2.3373 + so the concept of "smaller" is well-defined. 2.3374 </dl> 2.3375 2.3376 - <p> 2.3377 - If the content does not completely fill the replaced element's content box, 2.3378 - the unfilled space shows the replaced element's background. 2.3379 - Since replaced elements always clip their contents to the content box, 2.3380 - the content will never overflow. 2.3381 - See the 'object-position' property for positioning the object with respect to the content box. 2.3382 - 2.3383 - <div class=figure> 2.3384 + If the content does not completely fill the replaced element's content box, 2.3385 + the unfilled space shows the replaced element's background. 2.3386 + Since replaced elements always clip their contents to the content box, 2.3387 + the content will never overflow. 2.3388 + See the 'object-position' property for positioning the object with respect to the content box. 2.3389 + 2.3390 + <figure> 2.3391 <img src="images/img_scale.png" style="border: thin solid black;" alt=""> 2.3392 2.3393 - <p class=caption> 2.3394 + <figcaption> 2.3395 An example showing how four of the values of 'object-fit' cause the replaced element (blue figure) 2.3396 to be scaled to fit its height/width box (shown with a green background), 2.3397 using the initial value for 'object-position'. 2.3398 The fifth value, ''scale-down'', 2.3399 in this case looks identical to ''contain''. 2.3400 - </p> 2.3401 - </div> 2.3402 - 2.3403 - <p class="note"> 2.3404 - Note: the 'object-fit' property has similar semantics to 2.3405 - the <code>fit</code> attribute in [[SMIL10]] 2.3406 - and the <var><meetOrSlice></var> parameter 2.3407 - on the <a href="http://www.w3.org/TR/SVG11/coords.html#PreserveAspectRatioAttribute"><code>preserveAspectRatio</code> attribute</a> in [[SVG11]]. 2.3408 - 2.3409 - <p class=note> 2.3410 - Note: Per the <i title=object-negotiation>CSS⇋Object Negotiation</i> algorithm, 2.3411 - the <i>concrete object size</i> 2.3412 - (or, in this case, the size of the content) 2.3413 - does not directly scale the object itself - 2.3414 - it is merely passed to the object as information about the size of the visible canvas. 2.3415 - How to then draw into that size is up to the image format. 2.3416 - In particular, raster images always scale to the given size, 2.3417 - while SVG uses the given size as the size of the "SVG Viewport" 2.3418 - (a term defined by SVG) 2.3419 - and then uses the values of several attributes on the root <code><svg></code> element to determine how to draw itself. 2.3420 - 2.3421 -<!-- ====================================================================== --> 2.3422 + </figcaption> 2.3423 + </figure> 2.3424 + 2.3425 + Note: The 'object-fit' property has similar semantics to 2.3426 + the <code>fit</code> attribute in [[SMIL10]] 2.3427 + and the <<meetOrSlice>> parameter 2.3428 + on the <a href="http://www.w3.org/TR/SVG11/coords.html#PreserveAspectRatioAttribute"><code>preserveAspectRatio</code> attribute</a> in [[SVG11]]. 2.3429 + 2.3430 + Note: Per the <a title=object-negotiation>CSS⇋Object Negotiation</a> algorithm, 2.3431 + the <a>concrete object size</a> 2.3432 + (or, in this case, the size of the content) 2.3433 + does not directly scale the object itself - 2.3434 + it is merely passed to the object as information about the size of the visible canvas. 2.3435 + How to then draw into that size is up to the image format. 2.3436 + In particular, raster images always scale to the given size, 2.3437 + while SVG uses the given size as the size of the "SVG Viewport" 2.3438 + (a term defined by SVG) 2.3439 + and then uses the values of several attributes on the root <code><svg></code> element to determine how to draw itself. 2.3440 + 2.3441 2.3442 <h3 id="the-object-position"> 2.3443 Positioning Objects: the 'object-position' property</h3> 2.3444 2.3445 - <table class="propdef"> 2.3446 - <thead> 2.3447 - <tr> 2.3448 - <th>Name: 2.3449 - <td><dfn>object-position</dfn> 2.3450 - <tbody> 2.3451 - <tr> 2.3452 - <th><a href="#values">Value:</a> 2.3453 - <td><position> 2.3454 - <tr> 2.3455 - <th>Initial: 2.3456 - <td>50% 50% 2.3457 - <tr> 2.3458 - <th>Applies to: 2.3459 - <td>replaced elements 2.3460 - <tr> 2.3461 - <th>Inherited: 2.3462 - <td>no 2.3463 - <tr> 2.3464 - <th>Percentages: 2.3465 - <td>refer to width and height of box itself 2.3466 - <tr> 2.3467 - <th>Media: 2.3468 - <td>visual 2.3469 - <tr> 2.3470 - <th>Computed value: 2.3471 - <td>specified value 2.3472 - <tr> 2.3473 - <th>Animatable: 2.3474 - <td>yes 2.3475 - <tr> 2.3476 - <th>Canonical Order: 2.3477 - <td>the horizontal component of the <var><position></var>, 2.3478 - followed by the vertical component 2.3479 - </table> 2.3480 - 2.3481 - <p> 2.3482 - The 'object-position' property determines the alignment of the replaced element inside its box. 2.3483 - The <a href="http://www.w3.org/TR/css3-values/#position"><position></a> value type 2.3484 - (which is also used for 'background-position') 2.3485 - is defined in [[!CSS3VAL]], 2.3486 - and is resolved using the <i>concrete object size</i> as the object area 2.3487 - and the content box as the positioning area. 2.3488 - 2.3489 - <p class="note"> 2.3490 - Note that areas of the box not covered by the replaced element will show the element's background. 2.3491 + <pre class='propdef'> 2.3492 + Name: object-position 2.3493 + Value: <<position>> 2.3494 + Initial: 50% 50% 2.3495 + Applies to: replaced elements 2.3496 + Inherited: no 2.3497 + Percentages: refer to width and height of element itself 2.3498 + Media: visual 2.3499 + Computed value: specified value 2.3500 + Animatable: yes 2.3501 + Canonical Order: the horizontal component of the <<position>>, followed by the vertical component 2.3502 + </pre> 2.3503 + 2.3504 + The 'object-position' property determines the alignment of the replaced element inside its box. 2.3505 + The <a href="http://www.w3.org/TR/css3-values/#position"><position></a> value type 2.3506 + (which is also used for 'background-position') 2.3507 + is defined in [[!CSS3VAL]], 2.3508 + and is resolved using the <a>concrete object size</a> as the object area 2.3509 + and the content box as the positioning area. 2.3510 + 2.3511 + Note: Areas of the box not covered by the replaced element will show the element's background. 2.3512 2.3513 2.3514 <!-- 2.3515 @@ -2628,46 +2371,26 @@ 2.3516 <h3 id="the-image-resolution"> 2.3517 Overriding Image Resolutions: the 'image-resolution' property</h3> 2.3518 2.3519 - <p> 2.3520 - The <i>image resolution</i> is defined as 2.3521 - the number of image pixels per unit length, 2.3522 - e.g., pixels per inch. 2.3523 - Some image formats can record information about the resolution of images. 2.3524 - This information can be helpful when determining the actual size of the image in the formatting process. 2.3525 - However, the information can also be wrong, 2.3526 - in which case it should be ignored. 2.3527 - By default, CSS assumes a resolution of one image pixel per CSS ''px'' unit; 2.3528 - however, the 'image-resolution' property allows using some other resolution. 2.3529 - 2.3530 - <table class="propdef"> 2.3531 - <tr> 2.3532 - <th>Name: 2.3533 - <td><dfn>image-resolution</dfn> 2.3534 - <tr> 2.3535 - <th><a href="#values">Value:</a> 2.3536 - <td>[from-image || <var><resolution></var>] && snap? 2.3537 - <tr> 2.3538 - <th>Initial: 2.3539 - <td>1dppx 2.3540 - <tr> 2.3541 - <th>Applies to: 2.3542 - <td>all elements 2.3543 - <tr> 2.3544 - <th>Inherited: 2.3545 - <td>yes 2.3546 - <tr> 2.3547 - <th>Media: 2.3548 - <td>visual 2.3549 - <tr> 2.3550 - <th>Computed value: 2.3551 - <td>as specified, except with ''<resolution>'' possibly altered by computing for ''snap'' (see below) 2.3552 - <tr> 2.3553 - <th>Animatable: 2.3554 - <td>no 2.3555 - <tr> 2.3556 - <th>Canonical Order: 2.3557 - <td><abbr title="follows order of property value definition">per grammar</abbr> 2.3558 - </table> 2.3559 + The <a>image resolution</a> is defined as 2.3560 + the number of image pixels per unit length, 2.3561 + e.g., pixels per inch. 2.3562 + Some image formats can record information about the resolution of images. 2.3563 + This information can be helpful when determining the actual size of the image in the formatting process. 2.3564 + However, the information can also be wrong, 2.3565 + in which case it should be ignored. 2.3566 + By default, CSS assumes a resolution of one image pixel per CSS ''px'' unit; 2.3567 + however, the 'image-resolution' property allows using some other resolution. 2.3568 + 2.3569 + <pre class='propdef'> 2.3570 + Name: image-resolution 2.3571 + Value: [ from-image || <<resolution>> ] && snap? 2.3572 + Initial: 1dppx 2.3573 + Applies to: all elements 2.3574 + Inherited: yes 2.3575 + Media: visual 2.3576 + Computed value: as specified, except with <<resolution>> possibly altered by computed for ''snap'' (see below) 2.3577 + Animatable: no 2.3578 + </pre> 2.3579 2.3580 <p class='issue'> 2.3581 The ''image-set()'' notation can alter the intrinsic resolution of an image, 2.3582 @@ -2677,168 +2400,141 @@ 2.3583 Say that image-resolution has no effect on images whose resolution was set by something else in CSS? 2.3584 Or somehow wordsmithing ''image-set()'' in some way such that it always produces ''1dppx'' images somehow? 2.3585 2.3586 - <p> 2.3587 - The 'image-resolution' property specifies the <i>intrinsic resolution</i> of all raster images used in or on the element. 2.3588 - It affects both content images 2.3589 - (e.g. replaced elements and generated content) 2.3590 - and decorative images 2.3591 - (such as 'background-image'). 2.3592 - The <dfn>intrinsic resolution</dfn> of an image is used to determine the image's <i>intrinsic dimensions</i>. 2.3593 - Values have the following meanings: 2.3594 - 2.3595 - <dl> 2.3596 - <dt>''<resolution>'' 2.3597 + The 'image-resolution' property specifies the <a>intrinsic resolution</a> of all raster images used in or on the element. 2.3598 + It affects both content images 2.3599 + (e.g. replaced elements and generated content) 2.3600 + and decorative images 2.3601 + (such as 'background-image'). 2.3602 + The <dfn>intrinsic resolution</dfn> of an image is used to determine the image's <a>intrinsic dimensions</a>. 2.3603 + Values have the following meanings: 2.3604 + 2.3605 + <dl dfn-type=value dfn-for=image-resolution> 2.3606 + <dt><dfn><<resolution>></dfn> 2.3607 <dd> 2.3608 Specifies the intrinsic resolution explicitly. 2.3609 A "dot" in this case corresponds to a single image pixel. 2.3610 2.3611 - <dt>''from-image'' 2.3612 + <dt><dfn>from-image</dfn> 2.3613 <dd> 2.3614 The image's intrinsic resolution is taken as that specified by the image format. 2.3615 If the image does not specify its own resolution, 2.3616 the explicitly specified resolution is used (if given), 2.3617 else it defaults to ''1dppx''. 2.3618 2.3619 - <dt>''snap'' 2.3620 + <dt><dfn>snap</dfn> 2.3621 <dd> 2.3622 If the "snap" keyword is provided, 2.3623 - the computed ''<resolution>'' (if any) 2.3624 + the computed <<resolution>> (if any) 2.3625 is the specified resolution rounded to the nearest value 2.3626 that would map one image pixel to an integer number of device pixels. 2.3627 If the resolution is taken from the image, 2.3628 then the used intrinsic resolution is the image's native resolution similarly adjusted. 2.3629 </dl> 2.3630 2.3631 - <p> 2.3632 - As vector formats such as SVG do not have an intrinsic resolution, 2.3633 - this property has no effect on vector images. 2.3634 + As vector formats such as SVG do not have an intrinsic resolution, 2.3635 + this property has no effect on vector images. 2.3636 2.3637 <div class='example'> 2.3638 - <p> 2.3639 - Printers tend to have substantially higher resolution than computer monitors; 2.3640 - due to this, an image that looks fine on the screen may look pixellated when printed out. 2.3641 - The 'image-resolution' property can be used to embed a high-resolution image into the document 2.3642 - and maintain an appropriate size, 2.3643 - ensuring attractive display both on screen and on paper: 2.3644 - 2.3645 - <pre><!-- 2.3646 - -->img.high-res {
<!-- 2.3647 - --> image-resolution: 300dpi;
<!-- 2.3648 - -->}</pre> 2.3649 - 2.3650 - <p> 2.3651 - With this set, an image meant to be 5 inches wide at 300dpi 2.3652 - will actually display as 5in wide; 2.3653 - without this set, 2.3654 - the image would display as approximately 15.6in wide 2.3655 - since the image is 15000 image pixels across, 2.3656 - and by default CSS displays 96 image pixels per inch. 2.3657 + Printers tend to have substantially higher resolution than computer monitors; 2.3658 + due to this, an image that looks fine on the screen may look pixellated when printed out. 2.3659 + The 'image-resolution' property can be used to embed a high-resolution image into the document 2.3660 + and maintain an appropriate size, 2.3661 + ensuring attractive display both on screen and on paper: 2.3662 + 2.3663 + <pre> 2.3664 + img.high-res { 2.3665 + image-resolution: 300dpi; 2.3666 + } 2.3667 + </pre> 2.3668 + 2.3669 + With this set, an image meant to be 5 inches wide at 300dpi 2.3670 + will actually display as 5in wide; 2.3671 + without this set, 2.3672 + the image would display as approximately 15.6in wide 2.3673 + since the image is 15000 image pixels across, 2.3674 + and by default CSS displays 96 image pixels per inch. 2.3675 </div> 2.3676 2.3677 2.3678 <div class="example"> 2.3679 - <p> 2.3680 - Some image formats can encode the image resolution into the image data. 2.3681 - This rule specifies that the UA should use the image resolution found in the image itself, 2.3682 - falling back to 1 image pixel per CSS ''px'' unit. 2.3683 + Some image formats can encode the image resolution into the image data. 2.3684 + This rule specifies that the UA should use the image resolution found in the image itself, 2.3685 + falling back to 1 image pixel per CSS ''px'' unit. 2.3686 2.3687 <pre>img { image-resolution: from-image }</pre> 2.3688 2.3689 - <p> 2.3690 - These rules both specify that the UA should use the image resolution found in the image itself, 2.3691 - but if the image has no resolution, 2.3692 - the resolution is set to ''300dpi'' instead of the default ''1dppx''. 2.3693 - 2.3694 - <pre>
<!-- 2.3695 - -->img { image-resolution: from-image 300dpi }
<!-- 2.3696 - -->img { image-resolution: 300dpi from-image }</pre> 2.3697 + These rules both specify that the UA should use the image resolution found in the image itself, 2.3698 + but if the image has no resolution, 2.3699 + the resolution is set to ''300dpi'' instead of the default ''1dppx''. 2.3700 + 2.3701 + <pre> 2.3702 + img { image-resolution: from-image 300dpi } 2.3703 + img { image-resolution: 300dpi from-image } 2.3704 + </pre> 2.3705 2.3706 </div> 2.3707 2.3708 <div class="example"> 2.3709 - <p> 2.3710 - Using this rule, the image resolution is set to 300dpi. 2.3711 - (The resolution in the image, if any, is ignored.) 2.3712 + 2.3713 + Using this rule, the image resolution is set to 300dpi. 2.3714 + (The resolution in the image, if any, is ignored.) 2.3715 2.3716 <pre>img { image-resolution: 300dpi }</pre> 2.3717 2.3718 - <p> 2.3719 - This rule, on the other hand, 2.3720 - if used when the screen's resolution is 96dpi, 2.3721 - would instead render the image at 288dpi 2.3722 - (so that 3 image pixels map to 1 device pixel): 2.3723 + This rule, on the other hand, 2.3724 + if used when the screen's resolution is 96dpi, 2.3725 + would instead render the image at 288dpi 2.3726 + (so that 3 image pixels map to 1 device pixel): 2.3727 2.3728 <pre>img { image-resolution: 300dpi snap; }</pre> 2.3729 2.3730 - <p> 2.3731 - The ''snap'' keyword can also be used when the resolution is taken from the image: 2.3732 + The ''snap'' keyword can also be used when the resolution is taken from the image: 2.3733 2.3734 <pre>img { image-resolution: snap from-image; }</pre> 2.3735 2.3736 - <p> 2.3737 - An image declaring itself as 300dpi will, 2.3738 - in the situation above, 2.3739 - display at 288dpi 2.3740 - (3 image pixels per device pixel) 2.3741 - whereas an image declaring 72dpi will render at 96dpi 2.3742 - (1 image pixel per device pixel). 2.3743 + An image declaring itself as 300dpi will, 2.3744 + in the situation above, 2.3745 + display at 288dpi 2.3746 + (3 image pixels per device pixel) 2.3747 + whereas an image declaring 72dpi will render at 96dpi 2.3748 + (1 image pixel per device pixel). 2.3749 </div> 2.3750 2.3751 2.3752 -<!-- ====================================================================== --> 2.3753 2.3754 <h3 id="the-image-orientation"> 2.3755 Orienting an Image on the Page: the 'image-orientation' property</h3> 2.3756 2.3757 - <p> 2.3758 - If a picture is taken with a camera turned on its side, 2.3759 - or a document isn't positioned correctly within a scanner, 2.3760 - the resultant image may be "sideways" or even upside-down. 2.3761 - The 'image-orientation' property provides a way to apply an "out-of-band" rotation to image source data to correctly orient an image. 2.3762 - 2.3763 - <p class="note"> 2.3764 - Note that this property is not intended to specify layout transformations 2.3765 - such as arbitrary rotation or flipping the image in the horizontal or vertical direction. 2.3766 - (See [[CSS3-2D-TRANSFORMS]] for a feature designed to do that.) 2.3767 - It is also not needed to correctly orient an image when printing in landscape versus portrait orientation, 2.3768 - as that rotation is done as part of layout. (See [[CSS3PAGE]].) 2.3769 - It should only be used to correct incorrectly-oriented images. 2.3770 - 2.3771 - <table class="propdef"> 2.3772 - <tr> 2.3773 - <th>Name: 2.3774 - <td><dfn>image-orientation</dfn> 2.3775 - <tr> 2.3776 - <th><a href="#values">Value:</a> 2.3777 - <td><angle> | from-image 2.3778 - <tr> 2.3779 - <th>Initial: 2.3780 - <td>0deg 2.3781 - <tr> 2.3782 - <th>Applies to: 2.3783 - <td>all elements 2.3784 - <tr> 2.3785 - <th>Inherited: 2.3786 - <td>yes 2.3787 - <tr> 2.3788 - <th>Media: 2.3789 - <td>visual 2.3790 - <tr> 2.3791 - <th>Computed value: 2.3792 - <td>an <var><angle></var>, rounded and normalized (see text) 2.3793 - <tr> 2.3794 - <th>Animatable: 2.3795 - <td>no 2.3796 - </table> 2.3797 - 2.3798 - <p> 2.3799 - This property specifies an orthogonal rotation to be applied to an image before it is laid out. 2.3800 - It applies only to content images 2.3801 - (e.g. replaced elements and generated content), 2.3802 - not decorative images 2.3803 - (such as 'background-image'). 2.3804 - CSS layout processing applies to the image <em>after</em> rotation. 2.3805 - This implies, for example: 2.3806 + If a picture is taken with a camera turned on its side, 2.3807 + or a document isn't positioned correctly within a scanner, 2.3808 + the resultant image may be "sideways" or even upside-down. 2.3809 + The 'image-orientation' property provides a way to apply an "out-of-band" rotation to image source data to correctly orient an image. 2.3810 + 2.3811 + Note: This property is not intended to specify layout transformations 2.3812 + such as arbitrary rotation or flipping the image in the horizontal or vertical direction. 2.3813 + (See [[CSS3-2D-TRANSFORMS]] for a feature designed to do that.) 2.3814 + It is also not needed to correctly orient an image when printing in landscape versus portrait orientation, 2.3815 + as that rotation is done as part of layout. (See [[CSS3PAGE]].) 2.3816 + It should only be used to correct incorrectly-oriented images. 2.3817 + 2.3818 + <pre class='propdef'> 2.3819 + Name: image-orientation 2.3820 + Value: from-image | <<angle>> | [ <<angle>>? flip ] 2.3821 + Initial: 0deg 2.3822 + Applies to: all elements 2.3823 + Inherited: yes 2.3824 + Media: visual 2.3825 + Computed value: an <<angle>>, rounded and normalized (see text), plus optionally a ''flip'' keyword 2.3826 + Animatable: no 2.3827 + </pre> 2.3828 + 2.3829 + This property specifies an orthogonal rotation to be applied to an image before it is laid out. 2.3830 + It applies only to content images 2.3831 + (e.g. replaced elements and generated content), 2.3832 + not decorative images 2.3833 + (such as 'background-image'). 2.3834 + CSS layout processing applies to the image <em>after</em> rotation. 2.3835 + This implies, for example: 2.3836 2.3837 <ul> 2.3838 <li> 2.3839 @@ -2849,11 +2545,19 @@ 2.3840 <em>after</em> rotation. 2.3841 </ul> 2.3842 2.3843 - <p> 2.3844 - Values have the following meanings: 2.3845 - 2.3846 - <dl> 2.3847 - <dt><code><angle></code> 2.3848 + Values have the following meanings: 2.3849 + 2.3850 + <dl dfn-type=value dfn-for=image-orientation> 2.3851 + <dt><dfn>from-image</dfn> 2.3852 + <dd> 2.3853 + If the image has an orientation specified in its metadata, 2.3854 + such as EXIF, 2.3855 + this value computes to the angle that the metadata specifies is necessary to correctly orient the image. 2.3856 + If necessary, this angle is then rounded and normalized as described above for an <code><angle></code> value. 2.3857 + If there is no orientation specified in its metadata, 2.3858 + this value computes to ''0deg''. 2.3859 + 2.3860 + <dt><dfn><<angle>></dfn> 2.3861 <dd> 2.3862 Positive values cause the image to be rotated to the right 2.3863 (in a clockwise direction), 2.3864 @@ -2865,103 +2569,79 @@ 2.3865 (that is, 45deg is rounded to 90deg, while -45deg is rounded to -90deg), 2.3866 then moduloing the value by 1 turn (360deg, 400grad, etc.). 2.3867 2.3868 - <dt><dfn id='image-orientation-from-image'>from-image</dfn> 2.3869 + <dt><dfn><<angle>>? flip</dfn> 2.3870 <dd> 2.3871 - If the image has an orientation specified in its metadata, 2.3872 - such as EXIF, 2.3873 - this value computes to the angle that the metadata specifies is necessary to correctly orient the image. 2.3874 - If necessary, this angle is then rounded and normalized as described above for an <code><angle></code> value. 2.3875 - If there is no orientation specified in its metadata, 2.3876 - this value computes to ''0deg''. 2.3877 - 2.3878 - <p class='issue'> 2.3879 - Do we need to handle the "unnatural" EXIF orientations? 2.3880 - These might be used by, say, front-facing cameras 2.3881 - (that take a picture of the user and therefore display on the screen mirrored). 2.3882 - This would imply adding a ''flip'' keyword to go along with <var><angle></var>. 2.3883 + Identical to the plain <<angle>> case, 2.3884 + except that after rotation the image is flipped horizontally. 2.3885 + If the <<angle>> is omitted, 2.3886 + it defaults to ''0deg''. 2.3887 + 2.3888 + Note: This value is only necessary to represent all 8 possible EXIF orientations that <a value for=image-orientation>from-image</a> can produce. 2.3889 </dl> 2.3890 2.3891 - <p> 2.3892 - The 'image-orientation' property must be applied before any other transformations, 2.3893 - such as being specified in the ''image()'' function with an opposite directionality to its context, 2.3894 - or using CSS Transforms. 2.3895 + The 'image-orientation' property must be applied before any other transformations, 2.3896 + such as being specified in the ''image()'' function with an opposite directionality to its context, 2.3897 + or using CSS Transforms. 2.3898 2.3899 <div class="example"> 2.3900 - <p> 2.3901 - The following example rotates the image 90 degrees clockwise: 2.3902 - 2.3903 - <pre><!-- 2.3904 - -->img.ninety { image-orientation: 90deg }
<!-- 2.3905 - -->...
<!-- 2.3906 - --><img class="ninety" src=... /></pre> 2.3907 - 2.3908 - <p> 2.3909 - The same effect could be achieved with, for example, 2.3910 - an angle of -270deg or 450deg. 2.3911 + 2.3912 + The following example rotates the image 90 degrees clockwise: 2.3913 + 2.3914 + <pre> 2.3915 + img.ninety { image-orientation: 90deg } 2.3916 + ... 2.3917 + <img class="ninety" src=...> 2.3918 + </pre> 2.3919 + 2.3920 + The same effect could be achieved with, for example, 2.3921 + an angle of -270deg or 450deg. 2.3922 </div> 2.3923 2.3924 2.3925 <h3 id='the-image-rendering'> 2.3926 Determing How To Scale an Image: the 'image-rendering' property</h3> 2.3927 2.3928 - <table class="propdef"> 2.3929 - <tr> 2.3930 - <th>Name: 2.3931 - <td><dfn>image-rendering</dfn> 2.3932 - <tr> 2.3933 - <th><a href="#values">Value:</a> 2.3934 - <td>auto | crisp-edges | pixelated 2.3935 - <tr> 2.3936 - <th>Initial: 2.3937 - <td>auto 2.3938 - <tr> 2.3939 - <th>Applies to: 2.3940 - <td>all elements 2.3941 - <tr> 2.3942 - <th>Inherited: 2.3943 - <td>yes 2.3944 - <tr> 2.3945 - <th>Media: 2.3946 - <td>visual 2.3947 - <tr> 2.3948 - <th>Computed value: 2.3949 - <td>specified value 2.3950 - <tr> 2.3951 - <th>Animatable: 2.3952 - <td>no 2.3953 - </table> 2.3954 - 2.3955 - <p> 2.3956 - The 'image-rendering' property provides a hint to the user-agent 2.3957 - about what aspects of an image are most important to preserve when the image is scaled, 2.3958 - to aid the user-agent in the choice of an appropriate scaling algorithm. 2.3959 - When specified on an element, 2.3960 - it applies to all images given in properties for the element, 2.3961 - such as background images, 2.3962 - list-style images, 2.3963 - or the content of replaced elements when they represent an image that must be scaled. 2.3964 - The values of the 'image-rendering' property are interpreted as follows: 2.3965 - 2.3966 - <dl> 2.3967 - <dt><dfn id='image-rendering-auto'>auto</dfn> 2.3968 + <pre class='propdef'> 2.3969 + Name: image-rendering 2.3970 + Value: auto | crisp-edges | pixelated 2.3971 + Initial: auto 2.3972 + Applies to: all elements 2.3973 + Inherited: yes 2.3974 + Media: visual 2.3975 + Computed value: specified value 2.3976 + Animatable: no 2.3977 + </pre> 2.3978 + 2.3979 + The 'image-rendering' property provides a hint to the user-agent 2.3980 + about what aspects of an image are most important to preserve when the image is scaled, 2.3981 + to aid the user-agent in the choice of an appropriate scaling algorithm. 2.3982 + When specified on an element, 2.3983 + it applies to all images given in properties for the element, 2.3984 + such as background images, 2.3985 + list-style images, 2.3986 + or the content of replaced elements when they represent an image that must be scaled. 2.3987 + The values of the 'image-rendering' property are interpreted as follows: 2.3988 + 2.3989 + <dl dfn-type=value dfn-for=image-rendering> 2.3990 + <dt><dfn>auto</dfn> 2.3991 <dd> 2.3992 The image should be scaled with an algorithm that maximizes the appearance of the image. 2.3993 In particular, scaling algorithms that "smooth" colors are acceptable, 2.3994 such as bilinear interpolation. 2.3995 This is intended for images such as photos. 2.3996 2.3997 - <dt><dfn id='image-rendering-crisp-edges'>crisp-edges</dfn> 2.3998 + <dt><dfn>crisp-edges</dfn> 2.3999 <dd> 2.4000 The image must be scaled with an algorithm that preserves contrast and edges in the image, 2.4001 and which does not smooth colors or introduce blur to the image in the process. 2.4002 This is intended for images such as pixel art. 2.4003 2.4004 - <dt><dfn id='image-rendering-pixelated'>pixelated</dfn> 2.4005 + <dt><dfn>pixelated</dfn> 2.4006 <dd> 2.4007 When scaling the image up, the "nearest neighbor" or similar algorithm must be used, 2.4008 so that the image appears to be simply composed of very large pixels. 2.4009 When scaling down, 2.4010 - this is the same as <a href="#image-rendering-auto">''auto''</a>. 2.4011 + this is the same as <a value for=image-rendering>auto</a>. 2.4012 </dl> 2.4013 2.4014 <p class='issue'> 2.4015 @@ -2969,22 +2649,20 @@ 2.4016 and just define ''auto'' to be "whatever the UA wants", 2.4017 which is what ''auto'' usually means? 2.4018 2.4019 - <p> 2.4020 - This property does not dictate any particular scaling algorithm to be used. 2.4021 - For example, with ''image-rendering:auto'', 2.4022 - a user agent might scale images with bilinear interpolation by default, 2.4023 - switch to nearest-neighbor interpolation in high-load situations, 2.4024 - and switch to a high-quality scaling algorithm like Lanczos interpolation for static images that aren't moving or changing. 2.4025 - Similarly, with 'image-rendering:crisp-edges', 2.4026 - a user agent might scale images with nearest-neighbor interpolation by default, 2.4027 - and switch to EPX interpolation in low-load situations. 2.4028 - 2.4029 - <p> 2.4030 - This property previously accepted the values 'optimizeSpeed' and 'optimizeQuality'. 2.4031 - These are now deprecated; 2.4032 - a user agent must accept them as valid values 2.4033 - but must treat them as having the same behavior as <a href="#image-rendering-auto">''auto''</a>, 2.4034 - and authors must not use them. 2.4035 + This property does not dictate any particular scaling algorithm to be used. 2.4036 + For example, with ''image-rendering: auto'', 2.4037 + a user agent might scale images with bilinear interpolation by default, 2.4038 + switch to nearest-neighbor interpolation in high-load situations, 2.4039 + and switch to a high-quality scaling algorithm like Lanczos interpolation for static images that aren't moving or changing. 2.4040 + Similarly, with 'image-rendering: crisp-edges', 2.4041 + a user agent might scale images with nearest-neighbor interpolation by default, 2.4042 + and switch to EPX interpolation in low-load situations. 2.4043 + 2.4044 + This property previously accepted the values 'optimizeSpeed' and 'optimizeQuality'. 2.4045 + These are now deprecated; 2.4046 + a user agent must accept them as valid values 2.4047 + but must treat them as having the same behavior as <a value for=image-rendering>auto</a>, 2.4048 + and authors must not use them. 2.4049 2.4050 2.4051 <!-- 2.4052 @@ -3015,38 +2693,34 @@ 2.4053 <h2 id='interpolation'> 2.4054 Interpolation</h2> 2.4055 2.4056 - <p> 2.4057 - This section describes how to interpolate between new value types defined in this specification, 2.4058 - for use with modules such as CSS Transitions and CSS Animations. 2.4059 - 2.4060 - <p> 2.4061 - If an algorithm below simply states that two values should be "interpolated" or "transitioned" without further details, 2.4062 - then the value should be interpolated as described by the Transitions spec. 2.4063 - Otherwise, the algorithm may reference a variable "t" in its detailed description of the interpolation. 2.4064 - This is a number which starts at 0% and goes to 100%, 2.4065 - and is set to a value that represents the progress through the transition, 2.4066 - based on the duration of the transition, 2.4067 - the elapsed time, 2.4068 - and the timing function in use. 2.4069 - For example, with a linear timing function and a 1s duration, 2.4070 - after .3s t is equal to 30%. 2.4071 + This section describes how to interpolate between new value types defined in this specification, 2.4072 + for use with modules such as CSS Transitions and CSS Animations. 2.4073 + 2.4074 + If an algorithm below simply states that two values should be "interpolated" or "transitioned" without further details, 2.4075 + then the value should be interpolated as described by the Transitions spec. 2.4076 + Otherwise, the algorithm may reference a variable "t" in its detailed description of the interpolation. 2.4077 + This is a number which starts at 0% and goes to 100%, 2.4078 + and is set to a value that represents the progress through the transition, 2.4079 + based on the duration of the transition, 2.4080 + the elapsed time, 2.4081 + and the timing function in use. 2.4082 + For example, with a linear timing function and a 1s duration, 2.4083 + after .3s t is equal to 30%. 2.4084 2.4085 <h3 id='interpolating-images'> 2.4086 -Interpolating <var><image></var></h3> 2.4087 - 2.4088 - <p> 2.4089 - All images can be interpolated, 2.4090 - though some special types of images 2.4091 - (like some gradients) 2.4092 - have their own special interpolation rules. 2.4093 - In general terms, 2.4094 - images are interpolated by scaling them to the size of the start image 2.4095 - and cross-fading the two while they transition to the size of the end image. 2.4096 - 2.4097 - <p> 2.4098 - In specific terms, 2.4099 - at each point in the interpolation 2.4100 - the image is equal to <code>cross-fade( (100% - t) <start image>, <end image>)</code>. 2.4101 +Interpolating <<image>></h3> 2.4102 + 2.4103 + All images can be interpolated, 2.4104 + though some special types of images 2.4105 + (like some gradients) 2.4106 + have their own special interpolation rules. 2.4107 + In general terms, 2.4108 + images are interpolated by scaling them to the size of the start image 2.4109 + and cross-fading the two while they transition to the size of the end image. 2.4110 + 2.4111 + In specific terms, 2.4112 + at each point in the interpolation 2.4113 + the image is equal to <code>cross-fade( (100% - t) <start image>, <end image>)</code>. 2.4114 2.4115 <p class='issue'> 2.4116 Special-case interpolating to/from no image, 2.4117 @@ -3054,17 +2728,16 @@ 2.4118 2.4119 2.4120 <h3 id='interpolating-image-combinations'> 2.4121 -Interpolating <var><image-combination></var></h3> 2.4122 - 2.4123 - <p> 2.4124 - If both the starting and ending images are <var><image-combination></var>s 2.4125 - which differ only by by their <var><percentage></var>, 2.4126 - they must be interpolated by interpolating their <var><percentage></var>. 2.4127 - Otherwise, they must be interpolated as generic <var><image></var>s. 2.4128 +Interpolating <<image-combination>></h3> 2.4129 + 2.4130 + If both the starting and ending images are <<image-combination>>s 2.4131 + which differ only by by their <<percentage>>, 2.4132 + they must be interpolated by interpolating their <<percentage>>. 2.4133 + Otherwise, they must be interpolated as generic <<image>>s. 2.4134 2.4135 2.4136 <h3 id='interpolating-gradients'> 2.4137 -Interpolating <var><gradient></var></h3> 2.4138 +Interpolating <<gradient>></h3> 2.4139 2.4140 <p class='issue'> 2.4141 This section needs review and improvement. 2.4142 @@ -3074,10 +2747,9 @@ 2.4143 between the starting and ending positions explicitly, 2.4144 so it doesn't grow and then shrink over a single animation. 2.4145 2.4146 - <p> 2.4147 - Gradient images can be interpolated directly in CSS transitions and animations, 2.4148 - smoothly animating from one gradient to another. 2.4149 - There are only a few restrictions on what gradients are allowed to be interpolated: 2.4150 + Gradient images can be interpolated directly in CSS transitions and animations, 2.4151 + smoothly animating from one gradient to another. 2.4152 + There are only a few restrictions on what gradients are allowed to be interpolated: 2.4153 2.4154 <ol> 2.4155 <li> 2.4156 @@ -3086,17 +2758,16 @@ 2.4157 but not from a ''linear-gradient()'' to a ''radial-gradient()'' or a ''repeating-linear-gradient()''.) 2.4158 2.4159 <li> 2.4160 - Both the starting and ending gradient must have the same number of <var><color-stop></var>s. 2.4161 - For this purpose, a repeating gradient is considered to have infinite <var><color-stop></var>s, 2.4162 - and thus all repeating gradients have the same number of <var><color-stop></var>s. 2.4163 - (Note that one may pad a gradient with additional <var><color-stop></var>s placed atop each other, 2.4164 - if necessary to make two gradients have the same number of <var><color-stop></var>s.) 2.4165 + Both the starting and ending gradient must have the same number of <<color-stop>>s. 2.4166 + For this purpose, a repeating gradient is considered to have infinite <<color-stop>>s, 2.4167 + and thus all repeating gradients have the same number of <<color-stop>>s. 2.4168 + (Note that one may pad a gradient with additional <<color-stop>>s placed atop each other, 2.4169 + if necessary to make two gradients have the same number of <<color-stop>>s.) 2.4170 </ol> 2.4171 2.4172 - <p> 2.4173 - If the two gradients satisfy both of those constraints, 2.4174 - they must be interpolated as described below. 2.4175 - If not, they must be interpolated as a generic <var><image></var>. 2.4176 + If the two gradients satisfy both of those constraints, 2.4177 + they must be interpolated as described below. 2.4178 + If not, they must be interpolated as a generic <<image>>. 2.4179 2.4180 <ol> 2.4181 <li> 2.4182 @@ -3107,23 +2778,22 @@ 2.4183 <dd> 2.4184 <ul> 2.4185 <li> 2.4186 - If the direction is specified as an <var><angle></var>, 2.4187 + If the direction is specified as an <<angle>>, 2.4188 it is already in its explicit form. 2.4189 2.4190 <li> 2.4191 Otherwise, 2.4192 - change its direction to an <var><angle></var> in [''0deg'',''360deg'') 2.4193 + change its direction to an <<angle>> in [''0deg'',''360deg'') 2.4194 that would produce an equivalent rendering. 2.4195 2.4196 - <p> 2.4197 - If both the start and end gradients had their direction specified with keywords, 2.4198 - and the absolute difference between the angles their directions mapped to is greater than 180deg, 2.4199 - add 360deg to the direction of the gradient with the smaller angle. 2.4200 - <span class='note'>This ensures that a transition from, for example, 2.4201 - "to left" (270deg) to "to top" (0deg) 2.4202 - rotates the gradient a quarter-turn clockwise, 2.4203 - as expected, 2.4204 - rather than rotating three-quarters of a turn counter-clockwise.</span> 2.4205 + If both the start and end gradients had their direction specified with keywords, 2.4206 + and the absolute difference between the angles their directions mapped to is greater than 180deg, 2.4207 + add 360deg to the direction of the gradient with the smaller angle. 2.4208 + <span class='note'>This ensures that a transition from, for example, 2.4209 + "to left" (270deg) to "to top" (0deg) 2.4210 + rotates the gradient a quarter-turn clockwise, 2.4211 + as expected, 2.4212 + rather than rotating three-quarters of a turn counter-clockwise.</span> 2.4213 </ul> 2.4214 2.4215 2.4216 @@ -3131,13 +2801,13 @@ 2.4217 <dd> 2.4218 <ul> 2.4219 <li> 2.4220 - If the size is specified as two <var><length></var>s or <var><percentage></var>s, 2.4221 + If the size is specified as two <<length>>s or <<percentage>>s, 2.4222 it is already in its explicit form. 2.4223 2.4224 <li> 2.4225 - Otherwise, the size must be changed to a pair of <var><length></var>s 2.4226 + Otherwise, the size must be changed to a pair of <<length>>s 2.4227 that would produce an equivalent ending-shape. 2.4228 - If the <var><ending-shape></var> was specified as ''circle'', 2.4229 + If the <<ending-shape>> was specified as ''circle'', 2.4230 change it to ''ellipse''. 2.4231 </ul> 2.4232 </dl> 2.4233 @@ -3192,37 +2862,30 @@ 2.4234 <h2 id='serialization'> 2.4235 Serialization</h2> 2.4236 2.4237 - <p> 2.4238 - This section describes the serialization of all new properties and value types introduced in this specification, 2.4239 - for the purpose of interfacing with the CSS Object Model [[CSSOM]]. 2.4240 - 2.4241 - <p> 2.4242 - To serialize any function defined in this module, 2.4243 - serialize it per its individual grammar, 2.4244 - in the order its grammar is written in, 2.4245 - omitting components when possible without changing the meaning, 2.4246 - joining space-separated tokens with a single space, 2.4247 - and following each serialized comma with a single space. 2.4248 - 2.4249 - <p> 2.4250 - For ''cross-fade()'', 2.4251 - always serialize the <var><percentage></var>. 2.4252 + This section describes the serialization of all new properties and value types introduced in this specification, 2.4253 + for the purpose of interfacing with the CSS Object Model [[CSSOM]]. 2.4254 + 2.4255 + To serialize any function defined in this module, 2.4256 + serialize it per its individual grammar, 2.4257 + in the order its grammar is written in, 2.4258 + omitting components when possible without changing the meaning, 2.4259 + joining space-separated tokens with a single space, 2.4260 + and following each serialized comma with a single space. 2.4261 + 2.4262 + For ''cross-fade()'', 2.4263 + always serialize the <<percentage>>. 2.4264 2.4265 <div class='example'> 2.4266 - <p> 2.4267 - For example, a gradient specified as: 2.4268 + 2.4269 + For example, a gradient specified as: 2.4270 2.4271 <pre>Linear-Gradient( to bottom, red 0%,yellow,black 100px)</pre> 2.4272 2.4273 - <p> 2.4274 - ...must serialize as: 2.4275 + must serialize as: 2.4276 2.4277 <pre>linear-gradient(red, yellow, black 100px)</pre> 2.4278 </div> 2.4279 2.4280 - <p class='issue'> 2.4281 - The serialization of <var><color></var> is still undefined. 2.4282 - 2.4283 2.4284 <!-- 2.4285 dddddddd 2.4286 @@ -3249,276 +2912,21 @@ 2.4287 Changes since Images 3</h2> 2.4288 2.4289 <ul> 2.4290 - <li>added 'x' unit (or rather, put in an issue about adding it as a 2.4291 - general alias for dppx) 2.4292 + <li>added ''x'' unit (or rather, put in an issue about adding it as a general alias for ''dppx'') 2.4293 <li>restored the ltr/rtl keywords in image(), but in a different place 2.4294 - <li>added image-set() 2.4295 - <li>re-added element() 2.4296 - <li>re-added cross-fade() 2.4297 + <li>added ''image-set()'' 2.4298 + <li>re-added ''element()'' 2.4299 + <li>re-added ''cross-fade()'' 2.4300 <ul> 2.4301 <li>changed the syntax a bit to allow interesting things 2.4302 </ul> 2.4303 - <li>added issue for focus-moving to radial-gradient() 2.4304 - <li>added conic-gradient() 2.4305 + <li>added issue for focus-moving to ''radial-gradient()'' 2.4306 + <li>added ''conic-gradient()'' 2.4307 <li>added two-position syntax for color-stops 2.4308 <li>allowed the color to be omitted from color-stops 2.4309 <li>loosened the syntax for color-stops to allow color/length in either order 2.4310 - <li>added image-orientation:from-image 2.4311 - <li>re-added image-rendering 2.4312 + <li>added ''image-orientation:from-image'' 2.4313 + <li>re-added 'image-rendering' 2.4314 <li>added interpolation section 2.4315 <li>added serialization section 2.4316 - </ul> 2.4317 - 2.4318 - 2.4319 - 2.4320 -<h2 id="conformance"> 2.4321 -Conformance</h2> 2.4322 - 2.4323 -<h3 id="conventions"> 2.4324 -Document Conventions</h3> 2.4325 - 2.4326 - <p>Conformance requirements are expressed with a combination of 2.4327 - descriptive assertions and RFC 2119 terminology. The key words “MUST”, 2.4328 - “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, 2.4329 - “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this 2.4330 - document are to be interpreted as described in RFC 2119. 2.4331 - However, for readability, these words do not appear in all uppercase 2.4332 - letters in this specification. 2.4333 - 2.4334 - <p>All of the text of this specification is normative except sections 2.4335 - explicitly marked as non-normative, examples, and notes. [[!RFC2119]] 2.4336 - 2.4337 - <p>Examples in this specification are introduced with the words “for example” 2.4338 - or are set apart from the normative text with <code>class="example"</code>, 2.4339 - like this: 2.4340 - 2.4341 - <div class="example"> 2.4342 - <p>This is an example of an informative example. 2.4343 - </div> 2.4344 - 2.4345 - <p>Informative notes begin with the word “Note” and are set apart from the 2.4346 - normative text with <code>class="note"</code>, like this: 2.4347 - 2.4348 - <p class="note">Note, this is an informative note. 2.4349 - 2.4350 -<h3 id="conformance-classes"> 2.4351 -Conformance Classes</h3> 2.4352 - 2.4353 - <p>Conformance to CSS Image Values and Replaced Content Module Level 4 2.4354 - is defined for three conformance classes: 2.4355 - <dl> 2.4356 - <dt><dfn title="style sheet!!as conformance class">style sheet</dfn> 2.4357 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS 2.4358 - style sheet</a>. 2.4359 - <dt><dfn>renderer</dfn> 2.4360 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 2.4361 - that interprets the semantics of a style sheet and renders 2.4362 - documents that use them. 2.4363 - <dt><dfn id="authoring-tool">authoring tool</dfn> 2.4364 - <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 2.4365 - that writes a style sheet. 2.4366 - </dl> 2.4367 - 2.4368 - <p>A style sheet is conformant to CSS Image Values and Replaced Content Module Level 4 if all of its statements that use syntax defined in this module are valid according to the generic CSS grammar and the individual grammars of each feature defined in this module. 2.4369 - 2.4370 - <p>A renderer is conformant to CSS Image Values and Replaced Content Module Level 4 2.4371 - if, in addition to interpreting the style sheet as defined by the 2.4372 - appropriate specifications, it supports all the features defined 2.4373 - by CSS Image Values and Replaced Content Module Level 4 by parsing them correctly 2.4374 - and rendering the document accordingly. However, the inability of a 2.4375 - UA to correctly render a document due to limitations of the device 2.4376 - does not make the UA non-conformant. (For example, a UA is not 2.4377 - required to render color on a monochrome monitor.) 2.4378 - 2.4379 - <p>An authoring tool is conformant to CSS Image Values and Replaced Content Module Level 4 2.4380 - if it writes style sheets that are syntactically correct according to the 2.4381 - generic CSS grammar and the individual grammars of each feature in 2.4382 - this module, and meet all other conformance requirements of style sheets 2.4383 - as described in this module. 2.4384 - 2.4385 -<h3 id="partial"> 2.4386 -Partial Implementations</h3> 2.4387 - 2.4388 - <p>So that authors can exploit the forward-compatible parsing rules to 2.4389 - assign fallback values, CSS renderers <strong>must</strong> 2.4390 - treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore 2.4391 - as appropriate</a>) any at-rules, properties, property values, keywords, 2.4392 - and other syntactic constructs for which they have no usable level of 2.4393 - support. In particular, user agents <strong>must not</strong> selectively 2.4394 - ignore unsupported component values and honor supported values in a single 2.4395 - multi-value property declaration: if any value is considered invalid 2.4396 - (as unsupported values must be), CSS requires that the entire declaration 2.4397 - be ignored. 2.4398 - 2.4399 -<h3 id="experimental"> 2.4400 -Experimental Implementations</h3> 2.4401 - 2.4402 - <p>To avoid clashes with future CSS features, the CSS2.1 specification 2.4403 - reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed 2.4404 - syntax</a> for proprietary and experimental extensions to CSS. 2.4405 - 2.4406 - <p>Prior to a specification reaching the Candidate Recommendation stage 2.4407 - in the W3C process, all implementations of a CSS feature are considered 2.4408 - experimental. The CSS Working Group recommends that implementations 2.4409 - use a vendor-prefixed syntax for such features, including those in 2.4410 - W3C Working Drafts. This avoids incompatibilities with future changes 2.4411 - in the draft. 2.4412 - 2.4413 - 2.4414 -<h3 id="testing">Non-Experimental Implementations</h3> 2.4415 - 2.4416 - <p>Once a specification reaches the Candidate Recommendation stage, 2.4417 - non-experimental implementations are possible, and implementors should 2.4418 - release an unprefixed implementation of any CR-level feature they 2.4419 - can demonstrate to be correctly implemented according to spec. 2.4420 - 2.4421 - <p>To establish and maintain the interoperability of CSS across 2.4422 - implementations, the CSS Working Group requests that non-experimental 2.4423 - CSS renderers submit an implementation report (and, if necessary, the 2.4424 - testcases used for that implementation report) to the W3C before 2.4425 - releasing an unprefixed implementation of any CSS features. Testcases 2.4426 - submitted to W3C are subject to review and correction by the CSS 2.4427 - Working Group. 2.4428 - 2.4429 - <p>Further information on submitting testcases and implementation reports 2.4430 - can be found from on the CSS Working Group's website at 2.4431 - <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. 2.4432 - Questions should be directed to the 2.4433 - <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> 2.4434 - mailing list. 2.4435 - 2.4436 -<h3 id="cr-exit-criteria"> 2.4437 -CR Exit Criteria</h3> 2.4438 - 2.4439 - <p>For this specification to be advanced to Proposed Recommendation, 2.4440 - there must be at least two independent, interoperable implementations 2.4441 - of each feature. Each feature may be implemented by a different set of 2.4442 - products, there is no requirement that all features be implemented by 2.4443 - a single product. For the purposes of this criterion, we define the 2.4444 - following terms: 2.4445 - 2.4446 - <dl> 2.4447 - <dt>independent <dd>each implementation must be developed by a 2.4448 - different party and cannot share, reuse, or derive from code 2.4449 - used by another qualifying implementation. Sections of code that 2.4450 - have no bearing on the implementation of this specification are 2.4451 - exempt from this requirement. 2.4452 - 2.4453 - <dt>interoperable <dd>passing the respective test case(s) in the 2.4454 - official CSS test suite, or, if the implementation is not a Web 2.4455 - browser, an equivalent test. Every relevant test in the test 2.4456 - suite should have an equivalent test created if such a user 2.4457 - agent (UA) is to be used to claim interoperability. In addition 2.4458 - if such a UA is to be used to claim interoperability, then there 2.4459 - must one or more additional UAs which can also pass those 2.4460 - equivalent tests in the same way for the purpose of 2.4461 - interoperability. The equivalent tests must be made publicly 2.4462 - available for the purposes of peer review. 2.4463 - 2.4464 - <dt>implementation <dd>a user agent which: 2.4465 - 2.4466 - <ol class=inline> 2.4467 - <li>implements the specification. 2.4468 - 2.4469 - <li>is available to the general public. The implementation may 2.4470 - be a shipping product or other publicly available version 2.4471 - (i.e., beta version, preview release, or “nightly build”). 2.4472 - Non-shipping product releases must have implemented the 2.4473 - feature(s) for a period of at least one month in order to 2.4474 - demonstrate stability. 2.4475 - 2.4476 - <li>is not experimental (i.e., a version specifically designed 2.4477 - to pass the test suite and is not intended for normal usage 2.4478 - going forward). 2.4479 - </ol> 2.4480 - </dl> 2.4481 - 2.4482 - <p>The specification will remain Candidate Recommendation for at least 2.4483 - six months. 2.4484 - 2.4485 -<h2 class=no-num id="acknowledgments">Acknowledgments</h2> 2.4486 - 2.4487 - <p>Thanks to the Webkit team, Brad Kemper, Brian Manthos, and Alan Gresley for their contributions to the definition of gradients; 2.4488 - to Melinda Grant for her work on 'object-fit', 'object-position', and 'image-orientation'; 2.4489 - <!-- to Robert O'Callahan for the definition of ''element()''; --> 2.4490 - to Michael Day, Håkon Lie, and Shinyu Murakami for ''image-resolution''; 2.4491 - and to L. David Baron, Kang-Hao Lu, Leif Arne Storset, Erik Dahlstrom, and Øyvind Stenhaug for their careful review, comments, and corrections. 2.4492 - 2.4493 -<h2 class=no-num id="references">References</h2> 2.4494 - 2.4495 - 2.4496 -<h3 class="no-num" id="normative-references">Normative references</h3> 2.4497 -<!--normative--> 2.4498 - 2.4499 -<h3 class="no-num" id="other-references">Other references</h3> 2.4500 -<!--informative--> 2.4501 - 2.4502 -<!-- 2.4503 -<h3 class="no-num" id="changes">Changes Since Last Call</h3> 2.4504 - 2.4505 - <p>Major changes include: 2.4506 - <ul> 2.4507 - <li>The ''element()'' feature has been deferred to Level 4. 2.4508 - <li>The directional images feature (''ltr''/''rtl'' annotations in ''image()'') 2.4509 - has been deferred to Level 4 to address some design-level feedback. 2.4510 - <li>Images referenced with unsupported URL fragment syntax are now considered 2.4511 - invalid (and trigger fallback) within ''image()''. 2.4512 - <li>The 'object-fit' property no longer resizes the element's content box in 2.4513 - any cases. 2.4514 - <li>The 'image-orientation' property is now inherited. 2.4515 - </ul> 2.4516 - 2.4517 - <p>Significant details updated: 2.4518 - 2.4519 - <ul> 2.4520 - <li>There is now a definition for <i>invalid images</i>, which trigger fallback 2.4521 - in the ''image()'' notation. 2.4522 - <li>Clarified that media fragments are only required to be supported within 2.4523 - ''image()'' in order to satisfy the prerequisite for supporting ''image()''. 2.4524 - <li>Defined how to determine the closeness of two aspect ratios (used in 2.4525 - the definition of <i>intrinsic dimensions</i>). 2.4526 - <li>Corrected error in which 'image-orientation' was applied after CSS 2.4527 - transforms. 2.4528 - <li>The 'object-fit' and 'object-position' properties may no longer be 2.4529 - aliased to 'image-fit' and 'image-position'. A future edition of the 2.4530 - <a href="http://www.w3.org/TR/css-print/">CSS Print Profile</a> may allow 2.4531 - this for printer implementations, however. 2.4532 - </ul> 2.4533 - 2.4534 - <p>There were also many clarifications and several sections were rearranged to 2.4535 - make them easier to read. 2.4536 - 2.4537 - <p>The <a href="http://dev.w3.org/csswg/css4-images/issues-lc-2012">Disposition 2.4538 - of Last Call Comments</a> is available. 2.4539 ---> 2.4540 - 2.4541 -<h2 class="no-num" id="index">Index</h2> 2.4542 -<!--index--> 2.4543 - 2.4544 - 2.4545 -<h2 class="no-num" id="property-index">Property index</h2> 2.4546 -<!-- properties --> 2.4547 -</body> 2.4548 -</html> 2.4549 -<!-- Keep this comment at the end of the file 2.4550 -Local variables: 2.4551 -mode: sgml 2.4552 -sgml-declaration:"~/SGML/HTML4.decl" 2.4553 -sgml-default-doctype-name:"html" 2.4554 -sgml-minimize-attributes:t 2.4555 -sgml-nofill-elements:("pre" "style" "br") 2.4556 -sgml-live-element-indicator:t 2.4557 -sgml-omittag:nil 2.4558 -sgml-shorttag:nil 2.4559 -sgml-namecase-general:t 2.4560 -sgml-general-insert-case:lower 2.4561 -sgml-always-quote-attributes:t 2.4562 -sgml-indent-step:nil 2.4563 -sgml-indent-data:t 2.4564 -sgml-parent-document:nil 2.4565 -sgml-exposed-tags:nil 2.4566 -sgml-local-catalogs:nil 2.4567 -sgml-local-ecat-files:nil 2.4568 -End: 2.4569 ---> 2.4570 - 2.4571 + </ul> 2.4572 \ No newline at end of file
3.1 --- a/css-syntax/Overview.html Fri Aug 09 14:37:49 2013 +0200 3.2 +++ b/css-syntax/Overview.html Fri Aug 09 10:34:13 2013 -0700 3.3 @@ -12,14 +12,14 @@ 3.4 </a></p> 3.5 <h1 class="p-name no-ref" id=title>CSS Syntax Module Level 3</h1> 3.6 <h2 class="no-num no-toc no-ref" id=subtitle><span class=content>Editor's Draft, 3.7 - <span class=dt-updated><span class=value-title title=20130725>25 July 2013</span></span></span></h2> 3.8 + <span class=dt-updated><span class=value-title title=20130809>9 August 2013</span></span></span></h2> 3.9 <div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-syntax>http://dev.w3.org/csswg/css-syntax</a><dt>Editor's Draft:<dd><a href=http://dev.w3.org/csswg/css-syntax>http://dev.w3.org/csswg/css-syntax</a> 3.10 <dt>Feedback:</dt> 3.11 <dd><a href="mailto:www-style@w3.org?subject=%5Bcss-syntax%5D%20feedback">www-style@w3.org</a> 3.12 with subject line 3.13 “<kbd>[css-syntax] <var>… message topic …</var></kbd>” 3.14 (<a href=http://lists.w3.org/Archives/Public/www-style/ rel=discussion>archives</a>)<dt>Test Suite:<dd>None Yet<dt>Editors: 3.15 -<dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://xanthir.com/contact/>Tab Atkins Jr.</a> (<span class="p-org org">Google</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://exyr.org/about/>Simon Sapin</a> (<span class="p-org org">Mozilla</span>)</dl></div> 3.16 +<dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://xanthir.com/contact/>Tab Atkins Jr.</a> (<span class="p-org org">Google</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://exyr.org/about/>Simon Sapin</a> (<span class="p-org org">Mozilla</span>)<dt>Ignored Properties:<dd>color, animation-timing-function, text-decoration</dl></div> 3.17 <div data-fill-with=warning></div> 3.18 <p class=copyright data-fill-with=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> 3.19 <hr title="Separator for header"> 3.20 @@ -116,10 +116,10 @@ 3.21 Informal Syntax Description</a><li><a href=#the-anb-type><span class=secno>6.2</span> 3.22 The <code><an+b></code> type</a></ul><li><a href=#rule-defs><span class=secno>7</span> 3.23 Defining Grammars for Rules and Other Values</a><ul class=toc><li><a href=#declaration-rule-list><span class=secno>7.1</span> 3.24 -Defining Block Contents: the <span class=production data-autolink=link><var><declaration-list></var></span>, <span class=production data-autolink=link><var><rule-list></var></span>, and <span class=production data-autolink=link><var><stylesheet></var></span> productions</a></ul><li><a href=#css-stylesheets><span class=secno>8</span> 3.25 +Defining Block Contents: the <span class=production data-link-type=type><var><declaration-list></var></span>, <span class=production data-link-type=type><var><rule-list></var></span>, and <span class=production data-link-type=type><var><stylesheet></var></span> productions</a></ul><li><a href=#css-stylesheets><span class=secno>8</span> 3.26 CSS stylesheets</a><ul class=toc><li><a href=#style-rules><span class=secno>8.1</span> 3.27 Style rules</a><li><a href=#the-charset-rule><span class=secno>8.2</span> 3.28 -The <span class=css data-autolink=maybe>@charset</span> Rule</a></ul><li><a href=#serialization><span class=secno>9</span> 3.29 +The <span class=css data-link-type=maybe>@charset</span> Rule</a></ul><li><a href=#serialization><span class=secno>9</span> 3.30 Serialization</a><ul class=toc><li><a href=#serializing-anb><span class=secno>9.1</span> 3.31 Serializing <var><an+b></var></a></ul><li><a href=#changes><span class=secno>10</span>Changes from CSS 2.1 and Selectors Level 3</a><li><a href=#acknowledgments><span class=secno></span> 3.32 Acknowledgments</a><li><a href=#conformance><span class=secno></span> 3.33 @@ -193,8 +193,8 @@ 3.34 3.35 <p> "<code>color: blue;</code>" is a declaration specifying that, 3.36 for the elements that match the selector, 3.37 - their <a class=property data-autolink=property title=color>color</a> property should have the value <span class=css data-autolink=maybe>blue</span>. 3.38 - Similiarly, their <a class=property data-autolink=property title=text-decoration>text-decoration</a> property should have the value <span class=css data-autolink=maybe>underline</span>. 3.39 + their <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/colors.html#propdef-color title=color>color</a> property should have the value <span class=css data-link-type=maybe>blue</span>. 3.40 + Similiarly, their <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-text-4/#text-decoration0 title=text-decoration>text-decoration</a> property should have the value <span class=css data-link-type=maybe>underline</span>. 3.41 </div> 3.42 3.43 <p> At-rules are all different, but they have a basic structure in common. 3.44 @@ -215,15 +215,15 @@ 3.45 <p> Here are several examples of <a href=#at-rule>at-rules</a> that illustrate the varied syntax they may contain. 3.46 3.47 <pre>@import "my-styles.css";</pre> 3.48 -<p> The <span class=css data-autolink=maybe>@import</span> <a href=#at-rule>at-rule</a> is a simple statement. 3.49 - After its name, it takes a single string or <span class=css data-autolink=maybe>url()</span> function to indicate the stylesheet that it should import. 3.50 +<p> The <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-cascade-3/#at-ruledef-import>@import</a> <a href=#at-rule>at-rule</a> is a simple statement. 3.51 + After its name, it takes a single string or <span class=css data-link-type=maybe>url()</span> function to indicate the stylesheet that it should import. 3.52 3.53 <pre> @page :left { 3.54 margin-left: 4cm; 3.55 margin-right: 3cm; 3.56 } 3.57 </pre> 3.58 -<p> The <span class=css data-autolink=maybe>@page</span> <a href=#at-rule>at-rule</a> consists of an optional page selector (the <span class=css data-autolink=maybe>:left</span> pseudoclass), 3.59 +<p> The <span class=css data-link-type=maybe>@page</span> <a href=#at-rule>at-rule</a> consists of an optional page selector (the <span class=css data-link-type=maybe>:left</span> pseudoclass), 3.60 followed by a block of properties that apply to the page when printed. 3.61 In this way, it's very similar to a normal style rule, 3.62 except that its properties don't apply to any "element", 3.63 @@ -233,10 +233,10 @@ 3.64 body { font-size: 10pt } 3.65 } 3.66 </pre> 3.67 -<p> The <span class=css data-autolink=maybe>@media</span> <a href=#at-rule>at-rule</a> begins with a media type 3.68 +<p> The <span class=css data-link-type=maybe>@media</span> <a href=#at-rule>at-rule</a> begins with a media type 3.69 and a list of optional media queries. 3.70 Its block contains entire rules, 3.71 - which are only applied when the <span class=css data-autolink=maybe>@media</span>s conditions are fulfilled. 3.72 + which are only applied when the <span class=css data-link-type=maybe>@media</span>s conditions are fulfilled. 3.73 </div> 3.74 3.75 <p> Property names and <a href=#at-rule>at-rule</a> names are always <b>identifiers</b>, 3.76 @@ -256,7 +256,7 @@ 3.77 <p> <em>This section is not normative.</em> 3.78 3.79 <p> Any Unicode character can be included in an identifier or quoted string 3.80 - by <dfn data-dfn-type=link id=escaping0>escaping</dfn> it. 3.81 + by <dfn data-dfn-type=dfn id=escaping0>escaping</dfn> it. 3.82 CSS escape sequences start with a backslash (\), and continue with: 3.83 3.84 <p> <ul> 3.85 @@ -272,7 +272,7 @@ 3.86 3.87 <p class=example> 3.88 An identifier with the value "&B" 3.89 - could be written as <span class=css data-autolink=maybe>\26 B</span> or <span class=css data-autolink=maybe>\000026B</span>. 3.90 + could be written as <span class=css data-link-type=maybe>\26 B</span> or <span class=css data-link-type=maybe>\000026B</span>. 3.91 3.92 <p class=note> 3.93 A "real" space after the escape sequence must be doubled. 3.94 @@ -346,7 +346,7 @@ 3.95 3.96 <p> This specification defines the parsing rules for CSS documents, 3.97 whether they are syntactically correct or not. 3.98 - Certain points in the parsing algorithm are said to be a <dfn data-dfn-type=link id=parse-errors title="parse error">parse errors</dfn>. 3.99 + Certain points in the parsing algorithm are said to be a <dfn data-dfn-type=dfn id=parse-errors title="parse error">parse errors</dfn>. 3.100 The error handling for parse errors is well-defined: 3.101 user agents must either act as described below when encountering such problems, 3.102 or must abort processing at the first error that they encounter for which they do not wish to apply the rules described below. 3.103 @@ -382,11 +382,11 @@ 3.104 <p> To decode the stream of bytes into a stream of characters, 3.105 UAs must follow these steps. 3.106 3.107 -<p> The algorithms to <a href=http://encoding.spec.whatwg.org/#concept-encoding-get><dfn data-dfn-type=link id=get-an-encoding>get an encoding</dfn></a> 3.108 - and <a href=http://encoding.spec.whatwg.org/#decode><dfn data-dfn-type=link id=decode>decode</dfn></a> 3.109 +<p> The algorithms to <a href=http://encoding.spec.whatwg.org/#concept-encoding-get><dfn data-dfn-type=dfn id=get-an-encoding>get an encoding</dfn></a> 3.110 + and <a href=http://encoding.spec.whatwg.org/#decode><dfn data-dfn-type=dfn id=decode>decode</dfn></a> 3.111 are defined in the <a href=http://encoding.spec.whatwg.org/>Encoding Standard</a>. 3.112 3.113 -<p> First, <dfn data-dfn-type=link id=determine-the-fallback-encoding>determine the fallback encoding</dfn>: 3.114 +<p> First, <dfn data-dfn-type=dfn id=determine-the-fallback-encoding>determine the fallback encoding</dfn>: 3.115 3.116 <ol> 3.117 <li> 3.118 @@ -528,7 +528,7 @@ 3.119 〈unicode-range〉 tokens have a range of characters. 3.120 </ul> 3.121 3.122 -<p class=note> Note: The type flag of hash tokens is used in the Selectors syntax <a data-autolink=biblio data-biblio-type=informative href=#select title=SELECT>[SELECT]</a>. 3.123 +<p class=note> Note: The type flag of hash tokens is used in the Selectors syntax <a data-biblio-type=informative data-link-type=biblio href=#select title=SELECT>[SELECT]</a>. 3.124 Only hash tokens with the "id" type are valid <a href=http://www.w3.org/TR/selectors/#id-selectors>ID selectors</a>. 3.125 3.126 <p class=note> Note: As a technical note, 3.127 @@ -642,73 +642,73 @@ 3.128 <p> This section defines several terms used during the tokenization phase. 3.129 3.130 <dl> 3.131 - <dt><dfn data-dfn-type=link id=next-input-character>next input character</dfn> 3.132 + <dt><dfn data-dfn-type=dfn id=next-input-character>next input character</dfn> 3.133 <dd> 3.134 The first character in the input stream that has not yet been consumed. 3.135 3.136 - <dt><dfn data-dfn-type=link id=current-input-character>current input character</dfn> 3.137 + <dt><dfn data-dfn-type=dfn id=current-input-character>current input character</dfn> 3.138 <dd> 3.139 The last character to have been consumed. 3.140 3.141 - <dt><dfn data-dfn-type=link id=reconsume-the-current-input-character>reconsume the current input character</dfn> 3.142 + <dt><dfn data-dfn-type=dfn id=reconsume-the-current-input-character>reconsume the current input character</dfn> 3.143 <dd> 3.144 Push the <a href=#current-input-character>current input character</a> back onto the front of the input stream, 3.145 so that the next time you are instructed to consume the next input character, 3.146 it will instead reconsume the <a href=#current-input-character>current input character</a>. 3.147 3.148 - <dt><dfn data-dfn-type=link id=eof-character>EOF character</dfn> 3.149 + <dt><dfn data-dfn-type=dfn id=eof-character>EOF character</dfn> 3.150 <dd> 3.151 A conceptual character representing the end of the input stream. 3.152 Whenever the input stream is empty, 3.153 the <a href=#next-input-character>next input character</a> is always an EOF character. 3.154 3.155 - <dt><dfn data-dfn-type=link id=digit>digit</dfn> 3.156 + <dt><dfn data-dfn-type=dfn id=digit>digit</dfn> 3.157 <dd> 3.158 A character between U+0030 DIGIT ZERO (0) and U+0039 DIGIT NINE (9). 3.159 3.160 - <dt><dfn data-dfn-type=link id=hex-digit>hex digit</dfn> 3.161 + <dt><dfn data-dfn-type=dfn id=hex-digit>hex digit</dfn> 3.162 <dd> 3.163 A <a href=#digit>digit</a>, 3.164 or a character between U+0041 LATIN CAPITAL LETTER A (A) and U+0046 LATIN CAPITAL LETTER F (F), 3.165 or a character between U+0061 LATIN SMALL LETTER A (a) and U+0066 LATIN SMALL LETTER F (f). 3.166 3.167 - <dt><dfn data-dfn-type=link id=uppercase-letter>uppercase letter</dfn> 3.168 + <dt><dfn data-dfn-type=dfn id=uppercase-letter>uppercase letter</dfn> 3.169 <dd> 3.170 A character between U+0041 LATIN CAPITAL LETTER A (A) and U+005A LATIN CAPITAL LETTER Z (Z). 3.171 3.172 - <dt><dfn data-dfn-type=link id=lowercase-letter>lowercase letter</dfn> 3.173 + <dt><dfn data-dfn-type=dfn id=lowercase-letter>lowercase letter</dfn> 3.174 <dd> 3.175 A character between U+0061 LATIN SMALL LETTER A (a) and U+007A LATIN SMALL LETTER Z (z). 3.176 3.177 - <dt><dfn data-dfn-type=link id=letter>letter</dfn> 3.178 + <dt><dfn data-dfn-type=dfn id=letter>letter</dfn> 3.179 <dd> 3.180 An <a href=#uppercase-letter>uppercase letter</a> 3.181 or a <a href=#lowercase-letter>lowercase letter</a>. 3.182 3.183 - <dt><dfn data-dfn-type=link id=non-ascii-character>non-ASCII character</dfn> 3.184 + <dt><dfn data-dfn-type=dfn id=non-ascii-character>non-ASCII character</dfn> 3.185 <dd> 3.186 A character with a codepoint equal to or greater than U+0080 <control>. 3.187 3.188 - <dt><dfn data-dfn-type=link id=name-start-character>name-start character</dfn> 3.189 + <dt><dfn data-dfn-type=dfn id=name-start-character>name-start character</dfn> 3.190 <dd> 3.191 A <a href=#letter>letter</a>, 3.192 a <a href=#non-ascii-character>non-ASCII character</a>, 3.193 or U+005F LOW LINE (_). 3.194 3.195 - <dt><dfn data-dfn-type=link id=name-character>name character</dfn> 3.196 + <dt><dfn data-dfn-type=dfn id=name-character>name character</dfn> 3.197 <dd> 3.198 A <a href=#name-start-character>name-start character</a>, 3.199 A <a href=#digit>digit</a>, 3.200 or U+002D HYPHEN-MINUS (-). 3.201 3.202 - <dt><dfn data-dfn-type=link id=non-printable-character>non-printable character</dfn> 3.203 + <dt><dfn data-dfn-type=dfn id=non-printable-character>non-printable character</dfn> 3.204 <dd> 3.205 A character between U+0000 NULL and U+0008 BACKSPACE, 3.206 or U+000B LINE TABULATION, 3.207 or a character between U+000E SHIFT OUT and U+001F INFORMATION SEPARATOR ONE, 3.208 or U+007F DELETE. 3.209 3.210 - <dt><dfn data-dfn-type=link id=newline>newline</dfn> 3.211 + <dt><dfn data-dfn-type=dfn id=newline>newline</dfn> 3.212 <dd> 3.213 U+000A LINE FEED. 3.214 <span class=note> 3.215 @@ -716,10 +716,10 @@ 3.216 as they are converted to U+000A LINE FEED during <a href=#preprocessing-the-input-stream>preprocessing</a>. 3.217 </span> 3.218 3.219 - <dt><dfn data-dfn-type=link id=whitespace>whitespace</dfn> 3.220 + <dt><dfn data-dfn-type=dfn id=whitespace>whitespace</dfn> 3.221 <dd>A <a href=#newline>newline</a>, U+0009 CHARACTER TABULATION, or U+0020 SPACE. 3.222 3.223 - <dt><dfn data-dfn-type=link id=maximum-allowed-codepoint>maximum allowed codepoint</dfn> 3.224 + <dt><dfn data-dfn-type=dfn id=maximum-allowed-codepoint>maximum allowed codepoint</dfn> 3.225 <dd>The greatest codepoint defined by Unicode. This is currently U+10FFFF. 3.226 3.227 </dl> 3.228 @@ -730,7 +730,7 @@ 3.229 <p> The algorithms defined in this section transform a stream of characters into a stream of tokens. 3.230 3.231 <h4 data-level=4.3.1 id=consume-a-token><span class=secno>4.3.1 </span><span class=content> 3.232 -<dfn data-dfn-type=link id=consume-a-token0>Consume a token</dfn></span><a class=section-link href=#consume-a-token>§</a></h4> 3.233 +<dfn data-dfn-type=dfn id=consume-a-token0>Consume a token</dfn></span><a class=section-link href=#consume-a-token>§</a></h4> 3.234 3.235 <p> This section describes how to <a href=#consume-a-token0>consume a token</a> from a stream of characters. 3.236 It will return a single token of any type. 3.237 @@ -1018,7 +1018,7 @@ 3.238 3.239 3.240 <h4 data-level=4.3.2 id=consume-a-numeric-token><span class=secno>4.3.2 </span><span class=content> 3.241 -<dfn data-dfn-type=link id=consume-a-numeric-token0>Consume a numeric token</dfn></span><a class=section-link href=#consume-a-numeric-token>§</a></h4> 3.242 +<dfn data-dfn-type=dfn id=consume-a-numeric-token0>Consume a numeric token</dfn></span><a class=section-link href=#consume-a-numeric-token>§</a></h4> 3.243 3.244 <p> This section describes how to <a href=#consume-a-numeric-token0>consume a numeric token</a> from a stream of characters. 3.245 It returns either a 〈number〉, 〈percentage〉, or 〈dimension〉. 3.246 @@ -1050,7 +1050,7 @@ 3.247 3.248 3.249 <h4 data-level=4.3.3 id=consume-an-ident-like-token><span class=secno>4.3.3 </span><span class=content> 3.250 -<dfn data-dfn-type=link id=consume-an-ident-like-token0>Consume an ident-like token</dfn></span><a class=section-link href=#consume-an-ident-like-token>§</a></h4> 3.251 +<dfn data-dfn-type=dfn id=consume-an-ident-like-token0>Consume an ident-like token</dfn></span><a class=section-link href=#consume-an-ident-like-token>§</a></h4> 3.252 3.253 <p> This section describes how to <a href=#consume-an-ident-like-token0>consume an ident-like token</a> from a stream of characters. 3.254 It returns an 〈ident〉, 〈function〉, 〈url〉, or 〈bad-url〉. 3.255 @@ -1077,7 +1077,7 @@ 3.256 3.257 3.258 <h4 data-level=4.3.4 id=consume-a-string-token><span class=secno>4.3.4 </span><span class=content> 3.259 -<dfn data-dfn-type=link id=consume-a-string-token0>Consume a string token</dfn></span><a class=section-link href=#consume-a-string-token>§</a></h4> 3.260 +<dfn data-dfn-type=dfn id=consume-a-string-token0>Consume a string token</dfn></span><a class=section-link href=#consume-a-string-token>§</a></h4> 3.261 3.262 <p> This section describes how to <a href=#consume-a-string-token0>consume a string token</a> from a stream of characters. 3.263 It returns either a 〈string〉 or 〈bad-string〉. 3.264 @@ -1122,7 +1122,7 @@ 3.265 3.266 3.267 <h4 data-level=4.3.5 id=consume-a-url-token><span class=secno>4.3.5 </span><span class=content> 3.268 -<dfn data-dfn-type=link id=consume-a-url-token0>Consume a url token</dfn></span><a class=section-link href=#consume-a-url-token>§</a></h4> 3.269 +<dfn data-dfn-type=dfn id=consume-a-url-token0>Consume a url token</dfn></span><a class=section-link href=#consume-a-url-token>§</a></h4> 3.270 3.271 <p> This section describes how to <a href=#consume-a-url-token0>consume a url token</a> from a stream of characters. 3.272 It returns either a 〈url〉 or a 〈bad-url〉. 3.273 @@ -1221,7 +1221,7 @@ 3.274 3.275 3.276 <h4 data-level=4.3.6 id=consume-a-unicode-range-token><span class=secno>4.3.6 </span><span class=content> 3.277 -<dfn data-dfn-type=link id=consume-a-unicode-range-token0>Consume a unicode-range token</dfn></span><a class=section-link href=#consume-a-unicode-range-token>§</a></h4> 3.278 +<dfn data-dfn-type=dfn id=consume-a-unicode-range-token0>Consume a unicode-range token</dfn></span><a class=section-link href=#consume-a-unicode-range-token>§</a></h4> 3.279 3.280 <p> This section describes how to <a href=#consume-a-unicode-range-token0>consume a unicode-range token</a>. 3.281 It returns a 〈unicode-range〉 token. 3.282 @@ -1286,7 +1286,7 @@ 3.283 3.284 3.285 <h4 data-level=4.3.7 id=consume-an-escaped-character><span class=secno>4.3.7 </span><span class=content> 3.286 -<dfn data-dfn-type=link id=consume-an-escaped-character0>Consume an escaped character</dfn></span><a class=section-link href=#consume-an-escaped-character>§</a></h4> 3.287 +<dfn data-dfn-type=dfn id=consume-an-escaped-character0>Consume an escaped character</dfn></span><a class=section-link href=#consume-an-escaped-character>§</a></h4> 3.288 3.289 <p> This section describes how to <a href=#consume-an-escaped-character0>consume an escaped character</a>. 3.290 It assumes that the U+005C REVERSE SOLIDUS (\) has already been consumed 3.291 @@ -1321,7 +1321,7 @@ 3.292 3.293 3.294 <h4 data-level=4.3.8 id=check-if-two-characters-are-a-valid-escape><span class=secno>4.3.8 </span><span class=content> 3.295 -<dfn data-dfn-type=link id=check-if-two-characters-are-a-valid-escape0 title="check if two characters are a valid escape|are a valid escape|starts with a valid escape">Check if two characters are a valid escape</dfn></span><a class=section-link href=#check-if-two-characters-are-a-valid-escape>§</a></h4> 3.296 +<dfn data-dfn-type=dfn id=check-if-two-characters-are-a-valid-escape0 title="check if two characters are a valid escape|are a valid escape|starts with a valid escape">Check if two characters are a valid escape</dfn></span><a class=section-link href=#check-if-two-characters-are-a-valid-escape>§</a></h4> 3.297 3.298 <p> This section describes how to <a href=#check-if-two-characters-are-a-valid-escape0>check if two characters are a valid escape</a>. 3.299 The algorithm described here can be called explicitly with two characters, 3.300 @@ -1344,7 +1344,7 @@ 3.301 3.302 3.303 <h4 data-level=4.3.9 id=check-if-three-characters-would-start-an-identifier><span class=secno>4.3.9 </span><span class=content> 3.304 -<dfn data-dfn-type=link id=check-if-three-characters-would-start-an-identifier0 title="check if three characters would start an identifier|starts with an identifier|start with an identifier|would start an identifier">Check if three characters would start an identifier</dfn></span><a class=section-link href=#check-if-three-characters-would-start-an-identifier>§</a></h4> 3.305 +<dfn data-dfn-type=dfn id=check-if-three-characters-would-start-an-identifier0 title="check if three characters would start an identifier|starts with an identifier|start with an identifier|would start an identifier">Check if three characters would start an identifier</dfn></span><a class=section-link href=#check-if-three-characters-would-start-an-identifier>§</a></h4> 3.306 3.307 <p> This section describes how to <a href=#check-if-three-characters-would-start-an-identifier0>check if three characters would start an identifier</a>. 3.308 The algorithm described here can be called explicitly with three characters, 3.309 @@ -1378,7 +1378,7 @@ 3.310 </dl> 3.311 3.312 <h4 data-level=4.3.10 id=check-if-three-characters-would-start-a-number><span class=secno>4.3.10 </span><span class=content> 3.313 -<dfn data-dfn-type=link id=check-if-three-characters-would-start-a-number0 title="check if three characters would start a number|starts with a number|start with a number|would start a number">Check if three characters would start a number</dfn></span><a class=section-link href=#check-if-three-characters-would-start-a-number>§</a></h4> 3.314 +<dfn data-dfn-type=dfn id=check-if-three-characters-would-start-a-number0 title="check if three characters would start a number|starts with a number|start with a number|would start a number">Check if three characters would start a number</dfn></span><a class=section-link href=#check-if-three-characters-would-start-a-number>§</a></h4> 3.315 3.316 <p> This section describes how to <a href=#check-if-three-characters-would-start-a-number0>check if three characters would start a number</a>. 3.317 The algorithm described here can be called explicitly with three characters, 3.318 @@ -1427,7 +1427,7 @@ 3.319 3.320 3.321 <h4 data-level=4.3.11 id=consume-a-name><span class=secno>4.3.11 </span><span class=content> 3.322 -<dfn data-dfn-type=link id=consume-a-name0>Consume a name</dfn></span><a class=section-link href=#consume-a-name>§</a></h4> 3.323 +<dfn data-dfn-type=dfn id=consume-a-name0>Consume a name</dfn></span><a class=section-link href=#consume-a-name>§</a></h4> 3.324 3.325 <p> This section describes how to <a href=#consume-a-name0>consume a name</a> from a stream of characters. 3.326 It returns a string containing 3.327 @@ -1460,7 +1460,7 @@ 3.328 3.329 3.330 <h4 data-level=4.3.12 id=consume-a-number><span class=secno>4.3.12 </span><span class=content> 3.331 -<dfn data-dfn-type=link id=consume-a-number0>Consume a number</dfn></span><a class=section-link href=#consume-a-number>§</a></h4> 3.332 +<dfn data-dfn-type=dfn id=consume-a-number0>Consume a number</dfn></span><a class=section-link href=#consume-a-number>§</a></h4> 3.333 3.334 <p> This section describes how to <a href=#consume-a-number0>consume a number</a> from a stream of characters. 3.335 It returns a 3-tuple of 3.336 @@ -1524,7 +1524,7 @@ 3.337 3.338 3.339 <h4 data-level=4.3.13 id=convert-a-string-to-a-number><span class=secno>4.3.13 </span><span class=content> 3.340 -<dfn data-dfn-type=link id=convert-a-string-to-a-number0>Convert a string to a number</dfn></span><a class=section-link href=#convert-a-string-to-a-number>§</a></h4> 3.341 +<dfn data-dfn-type=dfn id=convert-a-string-to-a-number0>Convert a string to a number</dfn></span><a class=section-link href=#convert-a-string-to-a-number>§</a></h4> 3.342 3.343 <p> This section describes how to <a href=#convert-a-string-to-a-number0>convert a string to a number</a>. 3.344 It returns a number. 3.345 @@ -1581,7 +1581,7 @@ 3.346 3.347 3.348 <h4 data-level=4.3.14 id=consume-the-remnants-of-a-bad-url><span class=secno>4.3.14 </span><span class=content> 3.349 -<dfn data-dfn-type=link id=consume-the-remnants-of-a-bad-url0>Consume the remnants of a bad url</dfn></span><a class=section-link href=#consume-the-remnants-of-a-bad-url>§</a></h4> 3.350 +<dfn data-dfn-type=dfn id=consume-the-remnants-of-a-bad-url0>Consume the remnants of a bad url</dfn></span><a class=section-link href=#consume-the-remnants-of-a-bad-url>§</a></h4> 3.351 3.352 <p> This section describes how to <a href=#consume-the-remnants-of-a-bad-url0>consume the remnants of a bad url</a> from a stream of characters, 3.353 "cleaning up" after the tokenizer realizes that it's in the middle of a 〈bad-url〉 rather than a 〈url〉. 3.354 @@ -1609,14 +1609,14 @@ 3.355 </dl> 3.356 3.357 <h4 data-level=4.3.15 id=set-the-unicode-ranges-range><span class=secno>4.3.15 </span><span class=content> 3.358 -<dfn data-dfn-type=link id=set-the-unicode-ranges-range0>Set the 〈unicode-range〉’s range</dfn></span><a class=section-link href=#set-the-unicode-ranges-range>§</a></h4> 3.359 +<dfn data-dfn-type=dfn id=set-the-unicode-ranges-range0>Set the 〈unicode-range〉’s range</dfn></span><a class=section-link href=#set-the-unicode-ranges-range>§</a></h4> 3.360 3.361 <p> This section describes how to set a 〈unicode-range〉’s range 3.362 so that the range it describes 3.363 is within the supported range of unicode characters. 3.364 3.365 -<p> It assumes that the <dfn data-dfn-type=link id=start-of-the-range>start of the range</dfn> has been defined, 3.366 - the <dfn data-dfn-type=link id=end-of-the-range>end of the range</dfn> might be defined, 3.367 +<p> It assumes that the <dfn data-dfn-type=dfn id=start-of-the-range>start of the range</dfn> has been defined, 3.368 + the <dfn data-dfn-type=dfn id=end-of-the-range>end of the range</dfn> might be defined, 3.369 and both are non-negative integers. 3.370 3.371 <p> If the <a href=#start-of-the-range>start of the range</a> is greater than 3.372 @@ -1680,7 +1680,7 @@ 3.373 <p> The items that can appear in the tree are: 3.374 3.375 <dl> 3.376 - <dt><dfn data-dfn-type=link id=at-rule>at-rule</dfn> 3.377 + <dt><dfn data-dfn-type=dfn id=at-rule>at-rule</dfn> 3.378 <dd> 3.379 An at-rule has a name, 3.380 a prelude consisting of a list of component values, 3.381 @@ -1692,17 +1692,17 @@ 3.382 how to parse it 3.383 (preferably using one of the parser algorithms or entry points defined in this specification). 3.384 3.385 - <dt><dfn data-dfn-type=link id=qualified-rule>qualified rule</dfn> 3.386 + <dt><dfn data-dfn-type=dfn id=qualified-rule>qualified rule</dfn> 3.387 <dd> 3.388 A qualified rule has 3.389 a prelude consisting of a list of component values, 3.390 and a block consisting of a simple {} block. 3.391 3.392 <p class=note> Note: Most qualified rules will be style rules, 3.393 - where the prelude is a selector <a data-autolink=biblio data-biblio-type=informative href=#select title=SELECT>[SELECT]</a> 3.394 + where the prelude is a selector <a data-biblio-type=informative data-link-type=biblio href=#select title=SELECT>[SELECT]</a> 3.395 and the block a <a href=#parse-a-list-of-declarations0 title="parse a list of declarations">list of declarations</a>. 3.396 3.397 - <dt><dfn data-dfn-type=link id=declaration>declaration</dfn> 3.398 + <dt><dfn data-dfn-type=dfn id=declaration>declaration</dfn> 3.399 <dd> 3.400 A declaration has a name, 3.401 a value consisting of a list of component values, 3.402 @@ -1719,13 +1719,13 @@ 3.403 instead, it is a product of where the declaration appears, 3.404 and is defined by the respective specifications defining the given rule.) 3.405 3.406 - <dt><dfn data-dfn-type=link id=component-value>component value</dfn> 3.407 + <dt><dfn data-dfn-type=dfn id=component-value>component value</dfn> 3.408 <dd> 3.409 A component value is one of the preserved tokens, 3.410 a function, 3.411 or a simple block. 3.412 3.413 - <dt><dfn data-dfn-type=link id=preserved-tokens>preserved tokens</dfn> 3.414 + <dt><dfn data-dfn-type=dfn id=preserved-tokens>preserved tokens</dfn> 3.415 <dd> 3.416 Any token produced by the tokenizer 3.417 except for 〈function〉s, 3.418 @@ -1743,12 +1743,12 @@ 3.419 to define more fine-grainted error-handling 3.420 than just dropping an entire declaration or block. 3.421 3.422 - <dt><dfn data-dfn-type=link id=function>function</dfn> 3.423 + <dt><dfn data-dfn-type=dfn id=function>function</dfn> 3.424 <dd> 3.425 A function has a name 3.426 and a value consisting of a list of component values. 3.427 3.428 - <dt><dfn data-dfn-type=link id=simple-block>simple block</dfn> 3.429 + <dt><dfn data-dfn-type=dfn id=simple-block>simple block</dfn> 3.430 <dd> 3.431 A simple block has an associated token (either a 〈[〉, 〈(〉, or 〈{〉) 3.432 and a value consisting of a list of component values. 3.433 @@ -1821,34 +1821,34 @@ 3.434 Definitions</span><a class=section-link href=#definitions>§</a></h3> 3.435 3.436 <dl> 3.437 - <dt><dfn data-dfn-type=link id=current-input-token>current input token</dfn> 3.438 + <dt><dfn data-dfn-type=dfn id=current-input-token>current input token</dfn> 3.439 <dd> 3.440 The token or <a href=#component-value>component value</a> currently being operated on, from the list of tokens produced by the tokenizer. 3.441 3.442 - <dt><dfn data-dfn-type=link id=next-input-token>next input token</dfn> 3.443 + <dt><dfn data-dfn-type=dfn id=next-input-token>next input token</dfn> 3.444 <dd> 3.445 The token or <a href=#component-value>component value</a> following the <a href=#current-input-token>current input token</a> in the list of tokens produced by the tokenizer. 3.446 If there isn't a token following the <a href=#current-input-token>current input token</a>, 3.447 the <a href=#next-input-token>next input token</a> is an 〈EOF〉. 3.448 3.449 - <dt><dfn data-dfn-type=link id=eof>〈EOF〉</dfn> 3.450 + <dt><dfn data-dfn-type=token id=tokendef-eof>〈EOF〉</dfn> 3.451 <dd> 3.452 A conceptual token representing the end of the list of tokens. 3.453 Whenever the list of tokens is empty, 3.454 the <a href=#next-input-token>next input token</a> is always an 〈EOF〉. 3.455 3.456 - <dt><dfn data-dfn-type=link id=consume-the-next-input-token>consume the next input token</dfn> 3.457 + <dt><dfn data-dfn-type=dfn id=consume-the-next-input-token>consume the next input token</dfn> 3.458 <dd> 3.459 Let the <a href=#current-input-token>current input token</a> be the current <a href=#next-input-token>next input token</a>, 3.460 adjusting the <a href=#next-input-token>next input token</a> accordingly. 3.461 3.462 - <dt><dfn data-dfn-type=link id=reconsume-the-current-input-token>reconsume the current input token</dfn> 3.463 + <dt><dfn data-dfn-type=dfn id=reconsume-the-current-input-token>reconsume the current input token</dfn> 3.464 <dd> 3.465 The next time an algorithm instructs you to <a href=#consume-the-next-input-token>consume the next input token</a>, 3.466 instead do nothing 3.467 (retain the <a href=#current-input-token>current input token</a> unchanged). 3.468 3.469 - <dt><dfn data-dfn-type=link id=ascii-case-insensitive>ASCII case-insensitive</dfn> 3.470 + <dt><dfn data-dfn-type=dfn id=ascii-case-insensitive>ASCII case-insensitive</dfn> 3.471 <dd> 3.472 When two strings are to be matched ASCII case-insensitively, 3.473 temporarily convert both of them to ASCII lower-case form 3.474 @@ -1892,7 +1892,7 @@ 3.475 for parsing stylesheets. 3.476 3.477 <li> 3.478 - "<a href=#parse-a-list-of-rules0>Parse a list of rules</a>" is intended for the content of at-rules such as <span class=css data-autolink=maybe>@media</span>. 3.479 + "<a href=#parse-a-list-of-rules0>Parse a list of rules</a>" is intended for the content of at-rules such as <span class=css data-link-type=maybe>@media</span>. 3.480 It differs from "<a href=#parse-a-stylesheet0>Parse a stylesheet</a>" in the handling of 〈CDO〉 and 〈CDC〉. 3.481 3.482 <li> 3.483 @@ -1901,7 +1901,7 @@ 3.484 which parse text into a single rule. 3.485 3.486 <li> 3.487 - "<a href=#parse-a-declaration0>Parse a declaration</a>" is used in <span class=css data-autolink=maybe>@supports</span> conditions. <a data-autolink=biblio data-biblio-type=informative href=#css3-conditional title=CSS3-CONDITIONAL>[CSS3-CONDITIONAL]</a> 3.488 + "<a href=#parse-a-declaration0>Parse a declaration</a>" is used in <span class=css data-link-type=maybe>@supports</span> conditions. <a data-biblio-type=informative data-link-type=biblio href=#css3-conditional title=CSS3-CONDITIONAL>[CSS3-CONDITIONAL]</a> 3.489 3.490 <li> 3.491 "<a href=#parse-a-list-of-declarations0>Parse a list of declarations</a>" is for the contents of a <code>style</code> attribute, 3.492 @@ -1909,12 +1909,12 @@ 3.493 3.494 <li> 3.495 "<a href=#parse-a-component-value0>Parse a component value</a>" is for things that need to consume a single value, 3.496 - like the parsing rules for <span class=css data-autolink=maybe>attr()</span>. 3.497 + like the parsing rules for <span class=css data-link-type=maybe>attr()</span>. 3.498 3.499 <li> 3.500 "<a href=#parse-a-list-of-component-values0>Parse a list of component values</a>" is for the contents of presentational attributes, 3.501 which parse text into a single declaration's value, 3.502 - or for parsing a stand-alone selector <a data-autolink=biblio data-biblio-type=informative href=#select title=SELECT>[SELECT]</a> or list of Media Queries <a data-autolink=biblio data-biblio-type=informative href=#mediaq title=MEDIAQ>[MEDIAQ]</a>, 3.503 + or for parsing a stand-alone selector <a data-biblio-type=informative data-link-type=biblio href=#select title=SELECT>[SELECT]</a> or list of Media Queries <a data-biblio-type=informative data-link-type=biblio href=#mediaq title=MEDIAQ>[MEDIAQ]</a>, 3.504 as in <a href=http://www.w3.org/TR/selectors-api/>Selectors API</a> 3.505 or the <code>media</code> HTML attribute. 3.506 </ul> 3.507 @@ -1925,7 +1925,7 @@ 3.508 3.509 3.510 <h4 data-level=5.3.1 id=parse-a-stylesheet><span class=secno>5.3.1 </span><span class=content> 3.511 -<dfn data-dfn-type=link id=parse-a-stylesheet0>Parse a stylesheet</dfn></span><a class=section-link href=#parse-a-stylesheet>§</a></h4> 3.512 +<dfn data-dfn-type=dfn id=parse-a-stylesheet0>Parse a stylesheet</dfn></span><a class=section-link href=#parse-a-stylesheet>§</a></h4> 3.513 3.514 <p> To <a href=#parse-a-stylesheet0>parse a stylesheet</a> from a stream of tokens: 3.515 3.516 @@ -1944,7 +1944,7 @@ 3.517 </ol> 3.518 3.519 <h4 data-level=5.3.2 id=parse-a-list-of-rules><span class=secno>5.3.2 </span><span class=content> 3.520 -<dfn data-dfn-type=link id=parse-a-list-of-rules0>Parse a list of rules</dfn></span><a class=section-link href=#parse-a-list-of-rules>§</a></h4> 3.521 +<dfn data-dfn-type=dfn id=parse-a-list-of-rules0>Parse a list of rules</dfn></span><a class=section-link href=#parse-a-list-of-rules>§</a></h4> 3.522 3.523 <p> To <a href=#parse-a-list-of-rules0>parse a list of rules</a> from a stream of tokens: 3.524 3.525 @@ -1957,7 +1957,7 @@ 3.526 </ol> 3.527 3.528 <h4 data-level=5.3.3 id=parse-a-rule><span class=secno>5.3.3 </span><span class=content> 3.529 -<dfn data-dfn-type=link id=parse-a-rule0>Parse a rule</dfn></span><a class=section-link href=#parse-a-rule>§</a></h4> 3.530 +<dfn data-dfn-type=dfn id=parse-a-rule0>Parse a rule</dfn></span><a class=section-link href=#parse-a-rule>§</a></h4> 3.531 3.532 <p> To <a href=#parse-a-rule0>parse a rule</a> from a stream of tokens: 3.533 3.534 @@ -1993,7 +1993,7 @@ 3.535 </ol> 3.536 3.537 <h4 data-level=5.3.4 id=parse-a-declaration><span class=secno>5.3.4 </span><span class=content> 3.538 -<dfn data-dfn-type=link id=parse-a-declaration0>Parse a declaration</dfn></span><a class=section-link href=#parse-a-declaration>§</a></h4> 3.539 +<dfn data-dfn-type=dfn id=parse-a-declaration0>Parse a declaration</dfn></span><a class=section-link href=#parse-a-declaration>§</a></h4> 3.540 3.541 <p class=note> Note: Unlike "<a href=#parse-a-list-of-declarations0>Parse a list of declarations</a>", 3.542 this parses only a declaration and not an at-rule. 3.543 @@ -2015,11 +2015,11 @@ 3.544 </ol> 3.545 3.546 <h4 data-level=5.3.5 id=parse-a-list-of-declarations><span class=secno>5.3.5 </span><span class=content> 3.547 -<dfn data-dfn-type=link id=parse-a-list-of-declarations0>Parse a list of declarations</dfn></span><a class=section-link href=#parse-a-list-of-declarations>§</a></h4> 3.548 +<dfn data-dfn-type=dfn id=parse-a-list-of-declarations0>Parse a list of declarations</dfn></span><a class=section-link href=#parse-a-list-of-declarations>§</a></h4> 3.549 3.550 <p class=note> Note: Despite the name, 3.551 this actually parses a mixed list of declarations and at-rules, 3.552 - as CSS 2.1 does for <a href=http://www.w3.org/TR/CSS21/page.html#page-box><span class=css data-autolink=maybe>@page</span></a>. 3.553 + as CSS 2.1 does for <a href=http://www.w3.org/TR/CSS21/page.html#page-box><span class=css data-link-type=maybe>@page</span></a>. 3.554 Unexpected at-rules (which could be all of them, in a given context) 3.555 are invalid and should be ignored by the consumer. 3.556 3.557 @@ -2034,7 +2034,7 @@ 3.558 </ol> 3.559 3.560 <h4 data-level=5.3.6 id=parse-a-component-value><span class=secno>5.3.6 </span><span class=content> 3.561 -<dfn data-dfn-type=link id=parse-a-component-value0>Parse a component value</dfn></span><a class=section-link href=#parse-a-component-value>§</a></h4> 3.562 +<dfn data-dfn-type=dfn id=parse-a-component-value0>Parse a component value</dfn></span><a class=section-link href=#parse-a-component-value>§</a></h4> 3.563 3.564 <p> To <a href=#parse-a-component-value0>parse a component value</a>: 3.565 3.566 @@ -2068,7 +2068,7 @@ 3.567 </ol> 3.568 3.569 <h4 data-level=5.3.7 id=parse-a-list-of-component-values><span class=secno>5.3.7 </span><span class=content> 3.570 -<dfn data-dfn-type=link id=parse-a-list-of-component-values0>Parse a list of component values</dfn></span><a class=section-link href=#parse-a-list-of-component-values>§</a></h4> 3.571 +<dfn data-dfn-type=dfn id=parse-a-list-of-component-values0>Parse a list of component values</dfn></span><a class=section-link href=#parse-a-list-of-component-values>§</a></h4> 3.572 3.573 <p> To <a href=#parse-a-list-of-component-values0>parse a list of component values</a>: 3.574 3.575 @@ -2099,7 +2099,7 @@ 3.576 3.577 3.578 <h4 data-level=5.4.1 id=consume-a-list-of-rules><span class=secno>5.4.1 </span><span class=content> 3.579 -<dfn data-dfn-type=link id=consume-a-list-of-rules0>Consume a list of rules</dfn></span><a class=section-link href=#consume-a-list-of-rules>§</a></h4> 3.580 +<dfn data-dfn-type=dfn id=consume-a-list-of-rules0>Consume a list of rules</dfn></span><a class=section-link href=#consume-a-list-of-rules>§</a></h4> 3.581 3.582 <p> Create an initially empty list of rules. 3.583 3.584 @@ -2117,7 +2117,7 @@ 3.585 <dt>〈CDO〉 3.586 <dt>〈CDC〉 3.587 <dd> 3.588 - If the <dfn data-dfn-type=link id=top-level-flag><var>top-level flag</var></dfn> is set, 3.589 + If the <dfn data-dfn-type=dfn id=top-level-flag><var>top-level flag</var></dfn> is set, 3.590 do nothing. 3.591 3.592 <p> Otherwise, 3.593 @@ -2143,7 +2143,7 @@ 3.594 3.595 3.596 <h4 data-level=5.4.2 id=consume-an-at-rule><span class=secno>5.4.2 </span><span class=content> 3.597 -<dfn data-dfn-type=link id=consume-an-at-rule0>Consume an at-rule</dfn></span><a class=section-link href=#consume-an-at-rule>§</a></h4> 3.598 +<dfn data-dfn-type=dfn id=consume-an-at-rule0>Consume an at-rule</dfn></span><a class=section-link href=#consume-an-at-rule>§</a></h4> 3.599 3.600 <p> Create a new at-rule 3.601 with its name set to the value of the <a href=#current-input-token>current input token</a>, 3.602 @@ -2178,7 +2178,7 @@ 3.603 3.604 3.605 <h4 data-level=5.4.3 id=consume-a-qualified-rule><span class=secno>5.4.3 </span><span class=content> 3.606 -<dfn data-dfn-type=link id=consume-a-qualified-rule0>Consume a qualified rule</dfn></span><a class=section-link href=#consume-a-qualified-rule>§</a></h4> 3.607 +<dfn data-dfn-type=dfn id=consume-a-qualified-rule0>Consume a qualified rule</dfn></span><a class=section-link href=#consume-a-qualified-rule>§</a></h4> 3.608 3.609 <p> Create a new qualified rule 3.610 with its prelude initially set to an empty list, 3.611 @@ -2212,7 +2212,7 @@ 3.612 3.613 3.614 <h4 data-level=5.4.4 id=consume-a-list-of-declarations><span class=secno>5.4.4 </span><span class=content> 3.615 -<dfn data-dfn-type=link id=consume-a-list-of-declarations0>Consume a list of declarations</dfn></span><a class=section-link href=#consume-a-list-of-declarations>§</a></h4> 3.616 +<dfn data-dfn-type=dfn id=consume-a-list-of-declarations0>Consume a list of declarations</dfn></span><a class=section-link href=#consume-a-list-of-declarations>§</a></h4> 3.617 3.618 <p> Create an initially empty list of declarations. 3.619 3.620 @@ -2253,7 +2253,7 @@ 3.621 3.622 3.623 <h4 data-level=5.4.5 id=consume-a-declaration><span class=secno>5.4.5 </span><span class=content> 3.624 -<dfn data-dfn-type=link id=consume-a-declaration0>Consume a declaration</dfn></span><a class=section-link href=#consume-a-declaration>§</a></h4> 3.625 +<dfn data-dfn-type=dfn id=consume-a-declaration0>Consume a declaration</dfn></span><a class=section-link href=#consume-a-declaration>§</a></h4> 3.626 3.627 <p> Create a new declaration 3.628 with its name set to the value of the <a href=#current-input-token>current input token</a> 3.629 @@ -2292,7 +2292,7 @@ 3.630 3.631 3.632 <h4 data-level=5.4.6 id=consume-a-component-value><span class=secno>5.4.6 </span><span class=content> 3.633 -<dfn data-dfn-type=link id=consume-a-component-value0>Consume a component value</dfn></span><a class=section-link href=#consume-a-component-value>§</a></h4> 3.634 +<dfn data-dfn-type=dfn id=consume-a-component-value0>Consume a component value</dfn></span><a class=section-link href=#consume-a-component-value>§</a></h4> 3.635 3.636 <p> This section describes how to <a href=#consume-a-component-value0>consume a component value</a>. 3.637 3.638 @@ -2312,11 +2312,11 @@ 3.639 3.640 3.641 <h4 data-level=5.4.7 id=consume-a-simple-block><span class=secno>5.4.7 </span><span class=content> 3.642 -<dfn data-dfn-type=link id=consume-a-simple-block0>Consume a simple block</dfn></span><a class=section-link href=#consume-a-simple-block>§</a></h4> 3.643 +<dfn data-dfn-type=dfn id=consume-a-simple-block0>Consume a simple block</dfn></span><a class=section-link href=#consume-a-simple-block>§</a></h4> 3.644 3.645 <p> This section describes how to <a href=#consume-a-simple-block0>consume a simple block</a>. 3.646 3.647 -<p> The <dfn data-dfn-type=link id=ending-token>ending token</dfn> is the mirror variant of the <a href=#current-input-token>current input token</a>. 3.648 +<p> The <dfn data-dfn-type=dfn id=ending-token>ending token</dfn> is the mirror variant of the <a href=#current-input-token>current input token</a>. 3.649 (E.g. if it was called with 〈[〉, the <a href=#ending-token>ending token</a> is 〈]〉.) 3.650 3.651 <p> Create a <a href=#simple-block>simple block</a> with its associated token set to the <a href=#current-input-token>current input token</a> 3.652 @@ -2339,7 +2339,7 @@ 3.653 3.654 3.655 <h4 data-level=5.4.8 id=consume-a-function><span class=secno>5.4.8 </span><span class=content> 3.656 -<dfn data-dfn-type=link id=consume-a-function0>Consume a function</dfn></span><a class=section-link href=#consume-a-function>§</a></h4> 3.657 +<dfn data-dfn-type=dfn id=consume-a-function0>Consume a function</dfn></span><a class=section-link href=#consume-a-function>§</a></h4> 3.658 3.659 <p> This section describes how to <a href=#consume-a-function0>consume a function</a>. 3.660 3.661 @@ -2368,13 +2368,13 @@ 3.662 The <var>An+B</var> microsyntax</span><a class=section-link href=#anb>§</a></h2> 3.663 3.664 <p> Several things in CSS, 3.665 - such as the <span class=css data-autolink=maybe>:nth-child()</span> pseudoclass, 3.666 + such as the <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/selectors-4/#nth-child-pseudo>:nth-child()</a> pseudoclass, 3.667 need to indicate indexes in a list. 3.668 The <var>An+B</var> microsyntax is useful for this, 3.669 allowing an author to easily indicate single elements 3.670 or all elements at regularly-spaced intervals in a list. 3.671 3.672 -<p> The <dfn data-dfn-type=link id=anb0>An+B</dfn> notation defines an integer step (<dfn data-dfn-type=link id=a>A</dfn>) and offset (<dfn data-dfn-type=link id=b>B</dfn>), 3.673 +<p> The <dfn data-dfn-type=dfn id=anb0>An+B</dfn> notation defines an integer step (<dfn data-dfn-type=dfn id=a>A</dfn>) and offset (<dfn data-dfn-type=dfn id=b>B</dfn>), 3.674 and represents the <var>An+B</var>th elements in a list, 3.675 for every positive integer or zero value of <var>n</var>, 3.676 with the first element in the list having index 1 (not 0). 3.677 @@ -2384,8 +2384,8 @@ 3.678 (the last group taking the remainder), 3.679 and selecting the <var>B</var>th element of each group. 3.680 3.681 -<p> The <var>An+B</var> notation also accepts the <span class=css data-autolink=maybe>even</span> and <span class=css data-autolink=maybe>odd</span> keywords, 3.682 - which have the same meaning as <span class=css data-autolink=maybe>2n</span> and <span class=css data-autolink=maybe>2n+1</span>, respectively. 3.683 +<p> The <var>An+B</var> notation also accepts the <span class=css data-link-type=maybe>even</span> and <span class=css data-link-type=maybe>odd</span> keywords, 3.684 + which have the same meaning as <span class=css data-link-type=maybe>2n</span> and <span class=css data-link-type=maybe>2n+1</span>, respectively. 3.685 3.686 <div class=example> 3.687 <p>Examples: 3.688 @@ -2417,7 +2417,7 @@ 3.689 (unless the <var>B</var> part is already omitted). 3.690 When <var>An</var> is not included 3.691 and <var>B</var> is non-negative, 3.692 - the <span class=css data-autolink=maybe>+</span> sign before <var>B</var> (when allowed) 3.693 + the <span class=css data-link-type=maybe>+</span> sign before <var>B</var> (when allowed) 3.694 may also be omitted. 3.695 In this case the syntax simplifies to just <var>B</var>. 3.696 3.697 @@ -2453,7 +2453,7 @@ 3.698 <!-- 3.699 -->2n /* same */</pre> </div> 3.700 3.701 -<p> Whitespace is permitted on either side of the <span class=css data-autolink=maybe>+</span> or <span class=css data-autolink=maybe>-</span> 3.702 +<p> Whitespace is permitted on either side of the <span class=css data-link-type=maybe>+</span> or <span class=css data-link-type=maybe>-</span> 3.703 that separates the <var>An</var> and <var>B</var> parts when both are present. 3.704 3.705 <div class=example> 3.706 @@ -2487,7 +2487,7 @@ 3.707 (using the <a href=http://www.w3.org/TR/css3-values/#value-defs>Value Definition Syntax in the Values & Units spec</a>) 3.708 as: 3.709 3.710 - <pre class=prod> <dfn data-dfn-type=production id=anb-production><an+b></dfn> = 3.711 + <pre class=prod> <dfn data-dfn-type=type id=anb-production><an+b></dfn> = 3.712 odd | even | 3.713 <var><integer></var> | 3.714 3.715 @@ -2507,16 +2507,19 @@ 3.716 '+'?<sup><a href=#anb-plus>†</a></sup> n ['+' | '-'] <var><signless-integer></var> | 3.717 -n ['+' | '-'] <var><signless-integer></var> 3.718 </pre> 3.719 + <p class=issue> 3.720 + Ugh, I'm missing cases like "n- 5". 3.721 + 3.722 <p> where: 3.723 3.724 <p> <ul> 3.725 - <li><dfn data-dfn-type=production id=n-dimension><code><n-dimension></code></dfn> is a 〈dimension〉 with its type flag set to "integer", and a unit that is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for "n" 3.726 - <li><dfn data-dfn-type=production id=ndashdigit-dimension><code><ndashdigit-dimension></code></dfn> is a 〈dimension〉 with its type flag set to "integer", and a unit that is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for "n-*", where "*" is a series of one or more <a href=#digit>digits</a> 3.727 - <li><dfn data-dfn-type=production id=ndashdigit-ident><code><ndashdigit-ident></code></dfn> is an 〈ident〉 whose value is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for "n-*", where "*" is a series of one or more <a href=#digit>digits</a> 3.728 - <li><dfn data-dfn-type=production id=dashndashdigit-ident><code><dashndashdigit-ident></code></dfn> is an 〈ident〉 whose value is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for "-n-*", where "*" is a series of one or more <a href=#digit>digits</a> 3.729 - <li><dfn data-dfn-type=production id=integer><code><integer></code></dfn> is a 〈number〉 with its type flag set to "integer" 3.730 - <li><dfn data-dfn-type=production id=signed-integer><code><signed-integer></code></dfn> is a 〈number〉 with its type flag set to "integer", and whose representation starts with "+" or "-" 3.731 - <li><dfn data-dfn-type=production id=signless-integer><code><signless-integer></code></dfn> is a 〈number〉 with its type flag set to "integer", and whose representation start with a <a href=#digit>digit</a> 3.732 + <li><dfn data-dfn-type=type id=typedef-n-dimension><code><n-dimension></code></dfn> is a 〈dimension〉 with its type flag set to "integer", and a unit that is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for "n" 3.733 + <li><dfn data-dfn-type=type id=typedef-ndashdigit-dimension><code><ndashdigit-dimension></code></dfn> is a 〈dimension〉 with its type flag set to "integer", and a unit that is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for "n-*", where "*" is a series of one or more <a href=#digit>digits</a> 3.734 + <li><dfn data-dfn-type=type id=typedef-ndashdigit-ident><code><ndashdigit-ident></code></dfn> is an 〈ident〉 whose value is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for "n-*", where "*" is a series of one or more <a href=#digit>digits</a> 3.735 + <li><dfn data-dfn-type=type id=typedef-dashndashdigit-ident><code><dashndashdigit-ident></code></dfn> is an 〈ident〉 whose value is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for "-n-*", where "*" is a series of one or more <a href=#digit>digits</a> 3.736 + <li><dfn data-dfn-type=type id=typedef-integer><code><integer></code></dfn> is a 〈number〉 with its type flag set to "integer" 3.737 + <li><dfn data-dfn-type=type id=typedef-signed-integer><code><signed-integer></code></dfn> is a 〈number〉 with its type flag set to "integer", and whose representation starts with "+" or "-" 3.738 + <li><dfn data-dfn-type=type id=typedef-signless-integer><code><signless-integer></code></dfn> is a 〈number〉 with its type flag set to "integer", and whose representation start with a <a href=#digit>digit</a> 3.739 </ul> 3.740 3.741 <p id=anb-plus> 3.742 @@ -2527,11 +2530,11 @@ 3.743 <p> The clauses of the production are interpreted as follows: 3.744 3.745 <dl> 3.746 - <dt><span class=css data-autolink=maybe>odd</span> 3.747 + <dt><span class=css data-link-type=maybe>odd</span> 3.748 <dd> 3.749 <var>A</var> is 2, <var>B</var> is 1. 3.750 3.751 - <dt><span class=css data-autolink=maybe>even</span> 3.752 + <dt><span class=css data-link-type=maybe>even</span> 3.753 <dd> 3.754 <var>A</var> is 2, <var>B</var> is 0. 3.755 3.756 @@ -2592,7 +2595,7 @@ 3.757 <p> Several types of tokens are written literally, without quotes: 3.758 3.759 <p> <ul> 3.760 - <li>〈ident〉s (such as <span class=css data-autolink=maybe>auto</span>, <span class=css data-autolink=maybe>disc</span>, etc), which are simply written as their value. 3.761 + <li>〈ident〉s (such as <span class=css data-link-type=maybe>auto</span>, <span class=css data-link-type=maybe>disc</span>, etc), which are simply written as their value. 3.762 <li>〈at-keyword〉s, which are written as an @ character followed by the token's value, like "@media". 3.763 <li>〈function〉s, which are written as the function name followed by a ( character, like "translate(". 3.764 <li>The 〈colon〉 (written as <code>:</code>), 〈comma〉 (written as <code>,</code>), 〈semicolon〉 (written as <code>;</code>), 〈(〉, 〈)〉, 〈{〉, and 〈}〉s. 3.765 @@ -2623,9 +2626,9 @@ 3.766 it still matches. 3.767 3.768 <div class=example> 3.769 - For example, the syntax of the <span class=css data-autolink=maybe>translateX()</span> function is: 3.770 - 3.771 -<pre>translateX( <a class=production data-autolink=link><var><translation-value></var></a> )</pre> 3.772 + For example, the syntax of the <span class=css data-link-type=maybe>translateX()</span> function is: 3.773 + 3.774 +<pre>translateX( <a class=production data-link-type=type><var><translation-value></var></a> )</pre> 3.775 <p> However, the stylesheet may end with the function unclosed, like: 3.776 3.777 <pre>.foo { transform: translate(50px</pre> 3.778 @@ -2639,49 +2642,49 @@ 3.779 </div> 3.780 3.781 <h3 data-level=7.1 id=declaration-rule-list><span class=secno>7.1 </span><span class=content> 3.782 -Defining Block Contents: the <a class=production data-autolink=link href=#declaration-list><var><declaration-list></var></a>, <a class=production data-autolink=link href=#rule-list><var><rule-list></var></a>, and <a class=production data-autolink=link href=#stylesheet><var><stylesheet></var></a> productions</span><a class=section-link href=#declaration-rule-list>§</a></h3> 3.783 +Defining Block Contents: the <a class=production data-link-type=type href=#typedef-declaration-list><var><declaration-list></var></a>, <a class=production data-link-type=type href=#typedef-rule-list><var><rule-list></var></a>, and <a class=production data-link-type=type href=#typedef-stylesheet><var><stylesheet></var></a> productions</span><a class=section-link href=#declaration-rule-list>§</a></h3> 3.784 3.785 <p> The CSS parser is agnostic as to the contents of blocks, 3.786 such as those that come at the end of some at-rules. 3.787 Defining the generic grammar of the blocks in terms of tokens is non-trivial, 3.788 but there are dedicated and unambiguous algorithms defined for parsing this. 3.789 3.790 -<p> The <dfn data-dfn-type=production id=declaration-list><declaration-list></dfn> production represents a list of declarations. 3.791 +<p> The <dfn data-dfn-type=type id=typedef-declaration-list><declaration-list></dfn> production represents a list of declarations. 3.792 It may only be used in grammars as the sole value in a block, 3.793 and represents that the contents of the block must be parsed using the <a href=#consume-a-list-of-declarations0>consume a list of declarations</a> algorithm. 3.794 3.795 -<p> Similarly, the <dfn data-dfn-type=production id=rule-list><rule-list></dfn> production represents a list of rules, 3.796 +<p> Similarly, the <dfn data-dfn-type=type id=typedef-rule-list><rule-list></dfn> production represents a list of rules, 3.797 and may only be used in grammars as the sole value in a block. 3.798 It represents that the contents of the block must be parsed using the <a href=#consume-a-list-of-rules0>consume a list of rules</a> algorithm. 3.799 3.800 -<p> Finally, the <dfn data-dfn-type=production id=stylesheet><stylesheet></dfn> production represents a list of rules. 3.801 - It is identical to <a class=production data-autolink=link href=#rule-list><var><rule-list></var></a>, 3.802 +<p> Finally, the <dfn data-dfn-type=type id=typedef-stylesheet><stylesheet></dfn> production represents a list of rules. 3.803 + It is identical to <a class=production data-link-type=type href=#typedef-rule-list><var><rule-list></var></a>, 3.804 except that blocks using it default to accepting all rules 3.805 that aren't otherwise limited to a particular context. 3.806 3.807 <div class=example> 3.808 - For example, the <span class=css data-autolink=maybe>@font-face</span> rule is defined to have an empty prelude, 3.809 + For example, the <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-fonts-3/#at-font-face-rule>@font-face</a> rule is defined to have an empty prelude, 3.810 and to contain a list of declarations. 3.811 This is expressed with the following grammar: 3.812 3.813 -<pre>@font-face { <a class=production data-autolink=link href=#declaration-list><var><declaration-list></var></a> }</pre> 3.814 +<pre>@font-face { <a class=production data-link-type=type href=#typedef-declaration-list><var><declaration-list></var></a> }</pre> 3.815 <p> This is a complete and sufficient definition of the rule's grammar. 3.816 3.817 <p> For another example, 3.818 - <span class=css data-autolink=maybe>@keyframes</span> rules are more complex, 3.819 + <span class=css data-link-type=maybe>@keyframes</span> rules are more complex, 3.820 interpreting their prelude as a name and containing keyframes rules in their block 3.821 Their grammar is: 3.822 3.823 -<pre>@keyframes <a class=production data-autolink=link><var><keyframes-name></var></a> { <a class=production data-autolink=link href=#rule-list><var><rule-list></var></a> }</pre> </div> 3.824 - 3.825 -<p> For rules that use <a class=production data-autolink=link href=#declaration-list><var><declaration-list></var></a>, 3.826 +<pre>@keyframes <a class=production data-link-type=type><var><keyframes-name></var></a> { <a class=production data-link-type=type href=#typedef-rule-list><var><rule-list></var></a> }</pre> </div> 3.827 + 3.828 +<p> For rules that use <a class=production data-link-type=type href=#typedef-declaration-list><var><declaration-list></var></a>, 3.829 the spec for the rule must define which properties, descriptors, and/or at-rules are valid inside the rule; 3.830 this may be as simple as saying "The @foo rule accepts the properties/descriptors defined in this specification/section.", 3.831 and extension specs may simply say "The @foo rule additionally accepts the following properties/descriptors.". 3.832 Any declarations or at-rules found inside the block that are not defined as valid 3.833 must be removed from the rule's value. 3.834 3.835 -<p> Within a <a class=production data-autolink=link href=#declaration-list><var><declaration-list></var></a>, 3.836 +<p> Within a <a class=production data-link-type=type href=#typedef-declaration-list><var><declaration-list></var></a>, 3.837 <code>!important</code> is automatically invalid on any descriptors. 3.838 If the rule accepts properties, 3.839 the spec for the rule must define whether the properties interact with the cascade, 3.840 @@ -2691,40 +2694,40 @@ 3.841 otherwise using <code>!important</code> is valid and has its usual effect on the cascade origin of the property. 3.842 3.843 <div class=example> 3.844 - For example, the grammar for <span class=css data-autolink=maybe>@font-face</span> in the previous example must, 3.845 + For example, the grammar for <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-fonts-3/#at-font-face-rule>@font-face</a> in the previous example must, 3.846 in addition to what is written there, 3.847 define that the allowed declarations are the descriptors defined in the Fonts spec. 3.848 </div> 3.849 3.850 -<p> For rules that use <a class=production data-autolink=link href=#rule-list><var><rule-list></var></a>, 3.851 +<p> For rules that use <a class=production data-link-type=type href=#typedef-rule-list><var><rule-list></var></a>, 3.852 the spec for the rule must define what types of rules are valid inside the rule, 3.853 - same as <a class=production data-autolink=link href=#declaration-list><var><declaration-list></var></a>, 3.854 + same as <a class=production data-link-type=type href=#typedef-declaration-list><var><declaration-list></var></a>, 3.855 and unrecognized rules must similarly be removed from the rule's value. 3.856 3.857 <div class=example> 3.858 - For example, the grammar for <span class=css data-autolink=maybe>@keyframes</span> in the previous example must, 3.859 + For example, the grammar for <span class=css data-link-type=maybe>@keyframes</span> in the previous example must, 3.860 in addition to what is written there, 3.861 - define that the only allowed rules are <a class=production data-autolink=link><var><keyframe-rule></var></a>s, 3.862 + define that the only allowed rules are <a class=production data-link-type=type><var><keyframe-rule></var></a>s, 3.863 which are defined as: 3.864 3.865 -<pre><a class=production data-autolink=link><var><keyframe-rule></var></a> = <a class=production data-autolink=link><var><keyframe-selector></var></a> { <a class=production data-autolink=link href=#declaration-list><var><declaration-list></var></a> }</pre> 3.866 +<pre><a class=production data-link-type=type><var><keyframe-rule></var></a> = <a class=production data-link-type=type><var><keyframe-selector></var></a> { <a class=production data-link-type=type href=#typedef-declaration-list><var><declaration-list></var></a> }</pre> 3.867 <p> Keyframe rules, then, 3.868 must further define that they accept as declarations all animatable CSS properties, 3.869 - plus the <a class=property data-autolink=property title=animation-timing-function>animation-timing-function</a> property, 3.870 + plus the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-animations-1/#animation-timing-function title=animation-timing-function>animation-timing-function</a> property, 3.871 but that they do not interact with the cascade. 3.872 </div> 3.873 3.874 -<p> For rules that use <a class=production data-autolink=link href=#stylesheet><var><stylesheet></var></a>, 3.875 +<p> For rules that use <a class=production data-link-type=type href=#typedef-stylesheet><var><stylesheet></var></a>, 3.876 all rules are allowed by default, 3.877 but the spec for the rule may define what types of rules are <em>invalid</em> inside the rule. 3.878 3.879 <div class=example> 3.880 - For example, the <span class=css data-autolink=maybe>@media</span> rule accepts anything that can be placed in a stylesheet, 3.881 - except more <span class=css data-autolink=maybe>@media</span> rules. 3.882 + For example, the <span class=css data-link-type=maybe>@media</span> rule accepts anything that can be placed in a stylesheet, 3.883 + except more <span class=css data-link-type=maybe>@media</span> rules. 3.884 As such, its grammar is: 3.885 3.886 -<pre>@media <a class=production data-autolink=link><var><media-query-list></var></a> { <a class=production data-autolink=link href=#stylesheet><var><stylesheet></var></a> }</pre> 3.887 -<p> It additionally defines a restriction that the <a class=production data-autolink=link href=#stylesheet><var><stylesheet></var></a> can not contain <span class=css data-autolink=maybe>@media</span> rules, 3.888 +<pre>@media <a class=production data-link-type=type><var><media-query-list></var></a> { <a class=production data-link-type=type href=#typedef-stylesheet><var><stylesheet></var></a> }</pre> 3.889 +<p> It additionally defines a restriction that the <a class=production data-link-type=type href=#typedef-stylesheet><var><stylesheet></var></a> can not contain <span class=css data-link-type=maybe>@media</span> rules, 3.890 which causes them to be dropped from the outer rule's value if they appear. 3.891 </div> 3.892 3.893 @@ -2744,12 +2747,12 @@ 3.894 <h3 data-level=8.1 id=style-rules><span class=secno>8.1 </span><span class=content> 3.895 Style rules</span><a class=section-link href=#style-rules>§</a></h3> 3.896 3.897 -<p> A <dfn data-dfn-type=link id=style-rule>style rule</dfn> is a <a href=#qualified-rule>qualified rule</a> 3.898 - that associates a <a href=http://dev.w3.org/csswg/selectors4/#selector-list>selector list</a> <a data-autolink=biblio data-biblio-type=normative href=#select title=SELECT>[SELECT]</a> 3.899 +<p> A <dfn data-dfn-type=dfn id=style-rule>style rule</dfn> is a <a href=#qualified-rule>qualified rule</a> 3.900 + that associates a <a href=http://dev.w3.org/csswg/selectors4/#selector-list>selector list</a> <a data-biblio-type=normative data-link-type=biblio href=#select title=SELECT>[SELECT]</a> 3.901 with a list of property declarations. 3.902 They are also called 3.903 - <a href=http://www.w3.org/TR/CSS21/syndata.html#rule-sets>rule sets</a> in <a data-autolink=biblio data-biblio-type=normative href=#css21 title=CSS21>[CSS21]</a>. 3.904 - CSS Cascading and Inheritance <a data-autolink=biblio data-biblio-type=normative href=#css3cascade title=CSS3CASCADE>[CSS3CASCADE]</a> defines how the declarations inside of style rules participate in the cascade. 3.905 + <a href=http://www.w3.org/TR/CSS21/syndata.html#rule-sets>rule sets</a> in <a data-biblio-type=normative data-link-type=biblio href=#css21 title=CSS21>[CSS21]</a>. 3.906 + CSS Cascading and Inheritance <a data-biblio-type=normative data-link-type=biblio href=#css3cascade title=CSS3CASCADE>[CSS3CASCADE]</a> defines how the declarations inside of style rules participate in the cascade. 3.907 3.908 <p> The prelude of the qualified rule is parsed as a 3.909 <a href=http://dev.w3.org/csswg/selectors4/#selector-list>selector list</a>. 3.910 @@ -2767,36 +2770,36 @@ 3.911 The validity of the style rule’s contents have no effect on the validity of the style rule itself. 3.912 Unless otherwise specified, property names are <a href=#ascii-case-insensitive>ASCII case-insensitive</a>. 3.913 3.914 -<p class=note> Note: The names of Custom Properties <a data-autolink=biblio data-biblio-type=informative href=#css-variables title=CSS-VARIABLES>[CSS-VARIABLES]</a> are case-sensitive. 3.915 +<p class=note> Note: The names of Custom Properties <a data-biblio-type=informative data-link-type=biblio href=#css-variables title=CSS-VARIABLES>[CSS-VARIABLES]</a> are case-sensitive. 3.916 3.917 <p> <a href=#qualified-rule>Qualified rules</a> at the top-level of a CSS stylesheet are style rules. 3.918 Qualified rules in other contexts may or may not be style rules, 3.919 as defined by the context. 3.920 3.921 <p class=example> 3.922 - For example, qualified rules inside <span class=css data-autolink=maybe>@media</span> rules <a data-autolink=biblio data-biblio-type=informative href=#css3-conditional title=CSS3-CONDITIONAL>[CSS3-CONDITIONAL]</a> are style rules, 3.923 - but qualified rules inside <span class=css data-autolink=maybe>@keyframes</span> rules are not <a data-autolink=biblio data-biblio-type=informative href=#css3-animations title=CSS3-ANIMATIONS>[CSS3-ANIMATIONS]</a>. 3.924 + For example, qualified rules inside <span class=css data-link-type=maybe>@media</span> rules <a data-biblio-type=informative data-link-type=biblio href=#css3-conditional title=CSS3-CONDITIONAL>[CSS3-CONDITIONAL]</a> are style rules, 3.925 + but qualified rules inside <span class=css data-link-type=maybe>@keyframes</span> rules are not <a data-biblio-type=informative data-link-type=biblio href=#css3-animations title=CSS3-ANIMATIONS>[CSS3-ANIMATIONS]</a>. 3.926 3.927 <h3 data-level=8.2 id=the-charset-rule><span class=secno>8.2 </span><span class=content> 3.928 -The <a class=css data-autolink=maybe href=#charset>@charset</a> Rule</span><a class=section-link href=#the-charset-rule>§</a></h3> 3.929 - 3.930 -<p> The <dfn data-dfn-type=at-rule id=charset><a class=css data-autolink=maybe href=#charset>@charset</a></dfn> rule is a very special <a href=#at-rule>at-rule</a> associated with determining the character encoding of the stylesheet. 3.931 +The <a class=css data-link-type=maybe href=#at-ruledef-charset>@charset</a> Rule</span><a class=section-link href=#the-charset-rule>§</a></h3> 3.932 + 3.933 +<p> The <dfn data-dfn-type=at-rule id=at-ruledef-charset><a class=css data-link-type=maybe href=#at-ruledef-charset>@charset</a></dfn> rule is a very special <a href=#at-rule>at-rule</a> associated with determining the character encoding of the stylesheet. 3.934 In general, its grammar is: 3.935 3.936 -<pre class=prod><dfn data-dfn-type=production id=at-charset-rule><at-charset-rule></dfn> = @charset <a class=production data-autolink=link><var><string></var></a>;</pre> 3.937 -<p> Additionally, an <a class=css data-autolink=maybe href=#charset>@charset</a> rule is invalid if it is not at the top-level of a stylesheet, 3.938 +<pre class=prod><dfn data-dfn-type=type id=typedef-at-charset-rule><at-charset-rule></dfn> = @charset <a class=production data-link-type=type><var><string></var></a>;</pre> 3.939 +<p> Additionally, an <a class=css data-link-type=maybe href=#at-ruledef-charset>@charset</a> rule is invalid if it is not at the top-level of a stylesheet, 3.940 or if it is not the very first rule of a stylesheet. 3.941 3.942 -<p> <a class=css data-autolink=maybe href=#charset>@charset</a> rules have an <dfn data-dfn-type=link id=encoding>encoding</dfn>, 3.943 - given by the value of the <a class=production data-autolink=link><var><string></var></a>. 3.944 - 3.945 -<p> The <a class=css data-autolink=maybe href=#charset>@charset</a> rule has <strong>no effect on a stylesheet</strong>. 3.946 +<p> <a class=css data-link-type=maybe href=#at-ruledef-charset>@charset</a> rules have an <dfn data-dfn-type=dfn id=encoding>encoding</dfn>, 3.947 + given by the value of the <a class=production data-link-type=type><var><string></var></a>. 3.948 + 3.949 +<p> The <a class=css data-link-type=maybe href=#at-ruledef-charset>@charset</a> rule has <strong>no effect on a stylesheet</strong>. 3.950 3.951 <p class=note> Note: However, the algorithm to <a href=#determine-the-fallback-encoding>determine the fallback encoding</a> 3.952 looks at the first several bytes of the stylesheet 3.953 to see if they're a match for the ASCII characters <code>@charset "XXX";</code>, 3.954 where XXX is a sequence of bytes other than 22 (ASCII for <code>"</code>). 3.955 - While this resembles an <a class=css data-autolink=maybe href=#charset>@charset</a> rule, 3.956 + While this resembles an <a class=css data-link-type=maybe href=#at-ruledef-charset>@charset</a> rule, 3.957 it's not actually the same thing. 3.958 For example, the necessary sequence of bytes will spell out something entirely different 3.959 if the stylesheet is in an encoding that's not ASCII-compatible, 3.960 @@ -2898,10 +2901,10 @@ 3.961 3.962 <p> <ul> 3.963 <li> 3.964 - Only detect <a class=css data-autolink=maybe href=#charset>@charset</a> rules in ASCII-compatible byte patterns. 3.965 + Only detect <a class=css data-link-type=maybe href=#at-ruledef-charset>@charset</a> rules in ASCII-compatible byte patterns. 3.966 3.967 <li> 3.968 - Ignore <a class=css data-autolink=maybe href=#charset>@charset</a> rules that specify an ASCII-incompatible encoding, 3.969 + Ignore <a class=css data-link-type=maybe href=#at-ruledef-charset>@charset</a> rules that specify an ASCII-incompatible encoding, 3.970 as that would cause the rule itself to not decode properly. 3.971 3.972 <li> 3.973 @@ -2917,7 +2920,7 @@ 3.974 Any U+0000 NULL character in the CSS source is replaced with U+FFFD REPLACEMENT CHARACTER. 3.975 3.976 <li> 3.977 - Any hexadecimal escape sequence such as <span class=css data-autolink=maybe>\0</span> that evaluate to zero 3.978 + Any hexadecimal escape sequence such as <span class=css data-link-type=maybe>\0</span> that evaluate to zero 3.979 produce U+FFFD REPLACEMENT CHARACTER rather than U+0000 NULL. 3.980 <!-- 3.981 This covers a security issue: 3.982 @@ -2984,7 +2987,7 @@ 3.983 3.984 <p> <ul> 3.985 <li> 3.986 - Any list of declaration now also accepts at-rules, like <span class=css data-autolink=maybe>@page</span>, 3.987 + Any list of declaration now also accepts at-rules, like <span class=css data-link-type=maybe>@page</span>, 3.988 per WG resolution. 3.989 This makes a difference in error handling 3.990 even if no such at-rules are defined yet: 3.991 @@ -3013,7 +3016,7 @@ 3.992 3.993 </ul> 3.994 3.995 -<p> <var>An+B</var> changes from Selectors Level 3 <a data-autolink=biblio data-biblio-type=informative href=#select title=SELECT>[SELECT]</a>: 3.996 +<p> <var>An+B</var> changes from Selectors Level 3 <a data-biblio-type=informative data-link-type=biblio href=#select title=SELECT>[SELECT]</a>: 3.997 3.998 <p> <ul> 3.999 <li> 3.1000 @@ -3052,7 +3055,7 @@ 3.1001 letters in this specification. 3.1002 3.1003 <p>All of the text of this specification is normative except sections 3.1004 - explicitly marked as non-normative, examples, and notes. <a data-autolink=biblio data-biblio-type=normative href=#rfc2119 title=RFC2119>[RFC2119]</a></p> 3.1005 + explicitly marked as non-normative, examples, and notes. <a data-biblio-type=normative data-link-type=biblio href=#rfc2119 title=RFC2119>[RFC2119]</a></p> 3.1006 3.1007 <p>Examples in this specification are introduced with the words "for example" 3.1008 or are set apart from the normative text with <code>class="example"</code>, 3.1009 @@ -3176,10 +3179,10 @@ 3.1010 <li><an+b>, <a href=#anb-production title="section 6.2">6.2</a> 3.1011 <li>are a valid escape, <a href=#check-if-two-characters-are-a-valid-escape0 title="section 4.3.8">4.3.8</a> 3.1012 <li>ASCII case-insensitive, <a href=#ascii-case-insensitive title="section 5.2">5.2</a> 3.1013 -<li><at-charset-rule>, <a href=#at-charset-rule title="section 8.2">8.2</a> 3.1014 +<li><at-charset-rule>, <a href=#typedef-at-charset-rule title="section 8.2">8.2</a> 3.1015 <li>at-rule, <a href=#at-rule title="section 5">5</a> 3.1016 <li>B, <a href=#b title="section 6">6</a> 3.1017 -<li>@charset, <a href=#charset title="section 8.2">8.2</a> 3.1018 +<li>@charset, <a href=#at-ruledef-charset title="section 8.2">8.2</a> 3.1019 <li>check if three characters would start an identifier, <a href=#check-if-three-characters-would-start-an-identifier0 title="section 4.3.9">4.3.9</a> 3.1020 <li>check if three characters would start a number, <a href=#check-if-three-characters-would-start-a-number0 title="section 4.3.10">4.3.10</a> 3.1021 <li>check if two characters are a valid escape, <a href=#check-if-two-characters-are-a-valid-escape0 title="section 4.3.8">4.3.8</a> 3.1022 @@ -3206,30 +3209,30 @@ 3.1023 <li>Convert a string to a number, <a href=#convert-a-string-to-a-number0 title="section 4.3.13">4.3.13</a> 3.1024 <li>current input character, <a href=#current-input-character title="section 4.2">4.2</a> 3.1025 <li>current input token, <a href=#current-input-token title="section 5.2">5.2</a> 3.1026 -<li><dashndashdigit-ident>, <a href=#dashndashdigit-ident title="section 6.2">6.2</a> 3.1027 +<li><dashndashdigit-ident>, <a href=#typedef-dashndashdigit-ident title="section 6.2">6.2</a> 3.1028 <li>declaration, <a href=#declaration title="section 5">5</a> 3.1029 -<li><declaration-list>, <a href=#declaration-list title="section 7.1">7.1</a> 3.1030 +<li><declaration-list>, <a href=#typedef-declaration-list title="section 7.1">7.1</a> 3.1031 <li>decode, <a href=#decode title="section 3.2">3.2</a> 3.1032 <li>determine the fallback encoding, <a href=#determine-the-fallback-encoding title="section 3.2">3.2</a> 3.1033 <li>digit, <a href=#digit title="section 4.2">4.2</a> 3.1034 <li>encoding, <a href=#encoding title="section 8.2">8.2</a> 3.1035 <li>ending token, <a href=#ending-token title="section 5.4.7">5.4.7</a> 3.1036 <li>end of the range, <a href=#end-of-the-range title="section 4.3.15">4.3.15</a> 3.1037 -<li>〈EOF〉, <a href=#eof title="section 5.2">5.2</a> 3.1038 +<li>〈EOF〉, <a href=#tokendef-eof title="section 5.2">5.2</a> 3.1039 <li>EOF character, <a href=#eof-character title="section 4.2">4.2</a> 3.1040 <li>escaping, <a href=#escaping0 title="section 2.1">2.1</a> 3.1041 <li>function, <a href=#function title="section 5">5</a> 3.1042 <li>get an encoding, <a href=#get-an-encoding title="section 3.2">3.2</a> 3.1043 <li>hex digit, <a href=#hex-digit title="section 4.2">4.2</a> 3.1044 -<li><integer>, <a href=#integer title="section 6.2">6.2</a> 3.1045 +<li><integer>, <a href=#typedef-integer title="section 6.2">6.2</a> 3.1046 <li>letter, <a href=#letter title="section 4.2">4.2</a> 3.1047 <li>lowercase letter, <a href=#lowercase-letter title="section 4.2">4.2</a> 3.1048 <li>maximum allowed codepoint, <a href=#maximum-allowed-codepoint title="section 4.2">4.2</a> 3.1049 <li>name character, <a href=#name-character title="section 4.2">4.2</a> 3.1050 <li>name-start character, <a href=#name-start-character title="section 4.2">4.2</a> 3.1051 -<li><ndashdigit-dimension>, <a href=#ndashdigit-dimension title="section 6.2">6.2</a> 3.1052 -<li><ndashdigit-ident>, <a href=#ndashdigit-ident title="section 6.2">6.2</a> 3.1053 -<li><n-dimension>, <a href=#n-dimension title="section 6.2">6.2</a> 3.1054 +<li><ndashdigit-dimension>, <a href=#typedef-ndashdigit-dimension title="section 6.2">6.2</a> 3.1055 +<li><ndashdigit-ident>, <a href=#typedef-ndashdigit-ident title="section 6.2">6.2</a> 3.1056 +<li><n-dimension>, <a href=#typedef-n-dimension title="section 6.2">6.2</a> 3.1057 <li>newline, <a href=#newline title="section 4.2">4.2</a> 3.1058 <li>next input character, <a href=#next-input-character title="section 4.2">4.2</a> 3.1059 <li>next input token, <a href=#next-input-token title="section 5.2">5.2</a> 3.1060 @@ -3247,10 +3250,10 @@ 3.1061 <li>qualified rule, <a href=#qualified-rule title="section 5">5</a> 3.1062 <li>reconsume the current input character, <a href=#reconsume-the-current-input-character title="section 4.2">4.2</a> 3.1063 <li>reconsume the current input token, <a href=#reconsume-the-current-input-token title="section 5.2">5.2</a> 3.1064 -<li><rule-list>, <a href=#rule-list title="section 7.1">7.1</a> 3.1065 +<li><rule-list>, <a href=#typedef-rule-list title="section 7.1">7.1</a> 3.1066 <li>Set the 〈unicode-range〉’s range, <a href=#set-the-unicode-ranges-range0 title="section 4.3.15">4.3.15</a> 3.1067 -<li><signed-integer>, <a href=#signed-integer title="section 6.2">6.2</a> 3.1068 -<li><signless-integer>, <a href=#signless-integer title="section 6.2">6.2</a> 3.1069 +<li><signed-integer>, <a href=#typedef-signed-integer title="section 6.2">6.2</a> 3.1070 +<li><signless-integer>, <a href=#typedef-signless-integer title="section 6.2">6.2</a> 3.1071 <li>simple block, <a href=#simple-block title="section 5">5</a> 3.1072 <li>start of the range, <a href=#start-of-the-range title="section 4.3.15">4.3.15</a> 3.1073 <li>starts with an identifier, <a href=#check-if-three-characters-would-start-an-identifier0 title="section 4.3.9">4.3.9</a> 3.1074 @@ -3259,7 +3262,7 @@ 3.1075 <li>start with an identifier, <a href=#check-if-three-characters-would-start-an-identifier0 title="section 4.3.9">4.3.9</a> 3.1076 <li>start with a number, <a href=#check-if-three-characters-would-start-a-number0 title="section 4.3.10">4.3.10</a> 3.1077 <li>style rule, <a href=#style-rule title="section 8.1">8.1</a> 3.1078 -<li><stylesheet>, <a href=#stylesheet title="section 7.1">7.1</a> 3.1079 +<li><stylesheet>, <a href=#typedef-stylesheet title="section 7.1">7.1</a> 3.1080 <li>top-level flag, <a href=#top-level-flag title="section 5.4.1">5.4.1</a> 3.1081 <li>uppercase letter, <a href=#uppercase-letter title="section 4.2">4.2</a> 3.1082 <li>whitespace, <a href=#whitespace title="section 4.2">4.2</a>
4.1 --- a/css-syntax/Overview.src.html Fri Aug 09 14:37:49 2013 +0200 4.2 +++ b/css-syntax/Overview.src.html Fri Aug 09 10:34:13 2013 -0700 4.3 @@ -2388,6 +2388,9 @@ 4.4 -n ['+' | '-'] <var><signless-integer></var> 4.5 </pre> 4.6 4.7 + <p class='issue'> 4.8 + Ugh, I'm missing cases like "n- 5". 4.9 + 4.10 where: 4.11 4.12 <ul>
