8000 [css-images-3] Clarify that 'scaling up' means in at least one dimens… · w3c/csswg-drafts@3fc26b8 · GitHub
Skip to content

Commit 3fc26b8

Browse files
tabatkinstabatkins
committed
[css-images-3] Clarify that 'scaling up' means in at least one dimension.
1 parent c9cd147 commit 3fc26b8

2 files changed

Lines changed: 7 additions & 56 deletions

File tree

‎css-images-3/Overview.bs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1936,9 +1936,9 @@ Determing How To Scale an Image: the 'image-rendering' property</h3>
19361936

19371937
<dt><dfn>pixelated</dfn>
19381938
<dd>
1939-
When scaling the image up, the "nearest neighbor" or similar algorithm must be used,
1939+
When scaling the image up in at least one dimension, the "nearest neighbor" or similar algorithm must be used,
19401940
so that the image appears to be simply composed of very large pixels.
1941-
When scaling down,
1941+
Otherwise,
19421942
this is the same as <a value for=image-rendering>auto</a>.
19431943
</dl>
19441944

‎css-images-3/Overview.html‎

Lines changed: 5 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
</p>
5555
<h1 class="p-name no-ref" id=title>CSS Image Values and Replaced Content Module Level 4</h1>
5656
<h2 class="no-num no-toc no-ref heading settled" id=subtitle><span class=content>Editor’s Draft,
57-
<span class=dt-updated><span class=value-title title=20140922>22 September 2014</span></span></span></h2>
57+
<span class=dt-updated><span class=value-title title=20140923>23 September 2014</span></span></span></h2>
5858
<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>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><dt>Feedback:<dd><span><a href="mailto:www-style@w3.org?subject=[css-images] feedback">www-style@w3.org</a> with subject line “<kbd>[css-images] <var>… message topic …</var></kbd>” (<a href=http://lists.w3.org/Archives/Public/www-style/ rel=discussion>archives</a>)</span><dt>Editors:<dd><div 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>)</div><dd><div 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>)</div><dt>Issue Tracking:<dd><span><a href=http://www.w3.org/Style/CSS/Tracker/products/27>http://www.w3.org/Style/CSS/Tracker/products/27</a></span></dl></div>
5959
<div data-fill-with=warning></div>
6060
<p class=copyright data-fill-with=copyright><a href=http://www.w3.org/Consortium/Legal/ipr-notice#Copyright>Copyright</a> © 2014 <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.
@@ -170,8 +170,6 @@ <h2 class="heading settled" data-level=1 id=intro><span class=secno>1 </span><sp
170170
It also defines in a generic way CSS’s <a href=#sizing>sizing algorithm</a> for images and other replaced elements.</p>
171171

172172

173-
174-
175173
<h2 class="heading settled" data-level=2 id=image-values><span class=secno>2 </span><span class=content>
176174
Image Values: the <a class="production css" data-link-type=type href=#typedef-image title="<image>">&lt;image&gt;</a> type</span><a class=self-link href=#image-values></a></h2>
177175

@@ -194,9 +192,6 @@ <h2 class="heading settled" data-level=2 id=image-values><span class=secno>2 </s
194192
such as the <a class=css data-link-type=maybe href=#funcdef-image title=image()>image()</a> notation.</p>
195193

196194

197-
198-
199-
200195
<h3 class="heading settled" data-level=2.1 id=url-notation><span class=secno>2.1 </span><span class=content>
201196
Image References and Image Slices: the <a class="production css" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#url-value title="<url>">&lt;url&gt;</a> type and <span class=css>url()</span> notation</span><a class=self-link href=#url-notation></a></h3>
202197

@@ -213,9 +208,6 @@ <h3 class="heading settled" data-level=2.1 id=url-notation><span class=secno>2.1
213208
it must be treated as an <a data-link-type=dfn href=#invalid-image title="invalid image">invalid image</a>.</p>
214209

215210

216-
217-
218-
219211
<h3 class="heading settled" data-level=2.2 id=image-notation><span class=secno>2.2 </span><span class=content>
220212
Image Fallbacks and Annotations: the <a class=css data-link-type=maybe href=#funcdef-image title=image()>image()</a> notation</span><a class=self-link href=#image-notation></a></h3>
221213

@@ -276,8 +268,6 @@ <h4 class="heading settled" data-level=2.2.1 id=image-fallbacks><span class=secn
276268
it’ll pop in and prevent the white text from being set against a white background.</p>
277269
</div>
278270

279-
280-
281271
<h4 class="heading settled" data-level=2.2.2 id=image-fragments><span class=secno>2.2.2 </span><span class=content>
282272
Image Fragments</span><a class=self-link href=#image-fragments></a></h4>
283273

@@ -344,9 +334,6 @@ <h4 class="heading settled" data-level=2.2.3 id=color-images><span class=secno>2
344334
</div>
345335

346336

347-
348-
349-
350337
<h3 class="heading settled" data-level=2.3 id=image-set-notation><span class=secno>2.3 </span><span class=content>
351338
Resolution Negotiation: the <a class=css data-link-type=maybe href=#funcdef-image-set title=image-set()>image-set()</a> notation</span><a class=self-link href=#image-set-notation></a></h3>
352339

@@ -413,8 +400,6 @@ <h3 class="heading settled" data-level=2.3 id=image-set-notation><span class=sec
413400

414401

415402

416-
417-
418403
<h3 class="heading settled" data-level=2.4 id=cross-fade-function><span class=secno>2.4 </span><span class=content>
419404
Combining images: the <a class=css data-link-type=maybe href=#funcdef-cross-fade title=cross-fade()>cross-fade()</a> notation</span><a class=self-link href=#cross-fade-function></a></h3>
420405

@@ -432,7 +417,7 @@ <h3 class="heading settled" data-level=2.4 id=cross-fade-function><span class=se
432417
<p>The syntax for <a class=css data-link-type=maybe href=#funcdef-cross-fade title=cross-fade()>cross-fade()</a> is defined as:</p>
433418

434419
<pre class=prod><dfn data-dfn-type=function data-export="" id=funcdef-cross-fade>cross-fade()<a class=self-link href=#funcdef-cross-fade></a></dfn> = cross-fade( <a class=production data-link-type=type href=#typedef-cf-mixing-image title="<cf-mixing-image>">&lt;cf-mixing-image&gt;</a> <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-comma title=,>,</a> <a class=production data-link-type=type href=#typedef-cf-final-image title="<cf-final-image>">&lt;cf-final-image&gt;</a><a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#mult-opt title=?>?</a> )
435-
<dfn data-dfn-type=type data-export="" id=typedef-cf-mixing-image>&lt;cf-mixing-image&gt;<a class=self-link href=#typedef-cf-mixing-image></a></dfn> = <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#percentage-value title="<percentage>">&lt;percentage&gt;</a><a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#mult-opt title=?>?</a> <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-all title=&amp;&amp;>&amp;&amp;</a> <a class=production data-link-type=type href=#typedef-image title="<image>">&lt;image&gt;</a>
420+
<dfn data-dfn-type=type data-export="" id=typedef-cf-mixing-image>&lt;cf-mixing-image&gt;<a class=self-link href=#typedef-cf-mixing-image></a></dfn> = <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#percentage-value title="<percentage>">&lt;percentage&gt;</a><a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#mult-opt title=?>?</a> &amp;&amp; <a class=production data-link-type=type href=#typedef-image title="<image>">&lt;image&gt;</a>
436421
<dfn data-dfn-type=type data-export="" id=typedef-cf-final-image>&lt;cf-final-image&gt;<a class=self-link href=#typedef-cf-final-image></a></dfn> = <a class=production data-link-type=type href=#typedef-image title="<image>">&lt;image&gt;</a> <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> <a class=production data-link-type=type href=http://dev.w3.org/csswg/css-color-3/#valuea-def-color title="<color>">&lt;color&gt;</a>
437422
</pre>
438423

@@ -465,9 +450,6 @@ <h3 class="heading settled" data-level=2.4 id=cross-fade-function><span class=se
465450
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=#biblio-porterduff title=PORTERDUFF>[PORTERDUFF]</a></p>
466451

467452

468-
469-
470-
471453
<h2 class="heading settled" data-level=3 id=gradients><span class=secno> 8097 ;3 </span><span class=content>
472454
Gradients</span><a class=self-link href=#gradients></a></h2>
473455

@@ -517,9 +499,6 @@ <h2 class="heading settled" data-level=3 id=gradients><span class=secno>3 </span
517499
and then each type of gradient defines how to use the color of the <a data-link-type=dfn href=#gradient-line title="gradient line">gradient line</a> to produce the actual gradient.</p>
518500

519501

520-
521-
522-
523502
<h3 class="heading settled" data-level=3.1 id=linear-gradients><span class=secno>3.1 </span><span class=content>
524503
Linear Gradients: the <a class=css data-link-type=maybe href=#funcdef-linear-gradient title=linear-gradient()>linear-gradient()</a> notation</span><a class=self-link href=#linear-gradients></a></h3>
525504

@@ -690,9 +669,6 @@ <h4 class="no-toc heading settled" data-level=3.1.2 id=linear-gradient-examples>
690669
</div>
691670

692671

693-
694-
695-
696672
<h3 class="heading settled" data-level=3.2 id=radial-gradients><span class=secno>3.2 </span><span class=content>
697673
Radial Gradients: the <a class=css data-link-type=maybe href=#funcdef-radial-gradient title=radial-gradient()>radial-gradient()</a> notation</span><a class=self-link href=#radial-gradients></a></h3>
698674

@@ -962,8 +938,6 @@ <h4 class="no-toc heading settled" data-level=3.2.4 id=radial-gradient-examples>
962938
<p><img alt="" src=images/radial7.png></p>
963939
</div>
964940

965-
966-
967941
<h3 class="heading settled" data-level=3.3 id=repeating-gradients><span class=secno>3.3 </span><span class=content>
968942
Repeating Gradients: the <a class=css data-link-type=maybe href=#funcdef-repeating-linear-gradient title=repeating-linear-gradient()>repeating-linear-gradient()</a>, <a class=css data-link-type=maybe href=#funcdef-repeating-radial-gradient title=repeating-radial-gradient()>repeating-radial-gradient()</a>, and <span class=css>repeating-conic-gradient()</span> notations</span><a class=self-link href=#repeating-gradients></a></h3>
969943

@@ -1061,9 +1035,6 @@ <h3 class="heading settled" data-level=3.3 id=repeating-gradients><span class=se
10611035
</div>
10621036

10631037

1064-
1065-
1066-
10671038
<h3 class="heading settled" data-level=3.4 id=color-stop-syntax><span class=secno>3.4 </span><span class=content>
10681039
Gradient Color-Stops</span><a class=self-link href=#color-stop-syntax></a></h3>
10691040

@@ -1235,9 +1206,6 @@ <h3 class="heading settled" data-level=3.4 id=color-stop-syntax><span class=secn
12351206
Differences only arise when both the color and transparency differ between the two endpoints.</p>
12361207

12371208

1238-
1239-
1240-
12411209
<h2 class="heading settled" data-level=4 id=sizing><span class=secno>4 </span><span class=content>
12421210
Sizing Images and Objects in CSS</span><a class=self-link href=#sizing></a></h2>
12431211

@@ -1513,8 +1481,6 @@ <h3 class="heading settled" data-level=4.4 id=object-sizing-examples><span class
15131481
</dl>
15141482
</div>
15151483

1516-
1517-
15181484
<h3 class="heading settled" data-level=4.5 id=the-object-fit><span class=secno>4.5 </span><span class=content>
15191485
Sizing Objects: the <a class=property data-link-type=propdesc href=#propdef-object-fit title=object-fit>object-fit</a> property</span><a class=self-link href=#the-object-fit></a></h3>
15201486

@@ -1593,8 +1559,6 @@ <h3 class="heading settled" data-level=4.5 id=the-object-fit><span class=secno>4
15931559
(a term defined by SVG)
15941560
and then uses the values of several attributes on the root <code>&lt;svg&gt;</code> element to determine how to draw itself.</p>
15951561

1596-
1597-
15981562
<h3 class="heading settled" data-level=4.6 id=the-object-position><span class=secno>4.6 </span><span class=content>
15991563
Positioning Objects: the <a class=property data-link-type=propdesc href=#propdef-object-position title=object-position>object-position</a> property</span><a class=self-link href=#the-object-position></a></h3>
16001564

@@ -1614,8 +1578,6 @@ <h3 class="heading settled" data-level=4.6 id=the-object-position><span class=se
16141578
<h2 class="heading settled" data-level=5 id=image-processing><span class=secno>5 </span><span class=content>
16151579
Image Processing</span><a class=self-link href=#image-processing></a></h2>
16161580

1617-
1618-
16191581
<h3 class="heading settled" data-level=5.1 id=the-image-resolution><span class=secno>5.1 </span><span class=content>
16201582
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=self-link href=#the-image-resolution></a></h3>
16211583

@@ -1629,7 +1591,7 @@ <h3 class="heading settled" data-level=5.1 id=the-image-resolution><span class=s
16291591
By default, CSS assumes a resolution of one image pixel per CSS <span class=css>px</span> unit;
16301592
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.</p>
16311593

1632-
<table class="definition propdef"><tr><th>Name:<td><dfn class=css data-dfn-type=property data-export="" id=propdef-image-resolution>image-resolution<a class=self-link href=#propdef-image-resolution></a></dfn><tr><th>Value:<td class=prod>[ from-image <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-any title=||>||</a> <a class="production css" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#resolution-value title="<resolution>">&lt;resolution&gt;</a> ] <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-all title=&amp;&amp;>&amp;&amp;</a> snap<a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#mult-opt title=?>?</a><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 css" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#resolution-value title="<resolution>">&lt;resolution&gt;</a> possibly altered by computed for <a class=css data-link-type=maybe href=#valdef-image-resolution-snap title=snap>snap</a> (see below)<tr><th>Animatable:<td>no</table>
1594+
<table class="definition propdef"><tr><th>Name:<td><dfn class=css data-dfn-type=property data-export="" id=propdef-image-resolution>image-resolution<a class=self-link href=#propdef-image-resolution></a></dfn><tr><th>Value:<td class=prod>[ from-image <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-any title=||>||</a> <a class="production css" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#resolution-value title="<resolution>">&lt;resolution&gt;</a> ] &amp;&amp; snap<a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#mult-opt title=?>?</a><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 css" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#resolution-value title="<resolution>">&lt;resolution&gt;</a> possibly altered by computed for <a class=css data-link-type=maybe href=#valdef-image-resolution-snap title=snap>snap</a> (see below)<tr><th>Animatable:<td>no</table>
16331595

16341596
<p class=issue id=issue-21efe18d><a class=self-link href=#issue-21efe18d></a>
16351597
The <a class=css data-link-type=maybe href=#funcdef-image-set title=image-set()>image-set()</a> notation can alter the intrinsic resolution of an image,
@@ -1737,8 +1699,6 @@ <h3 class="heading settled" data-level=5.1 id=the-image-resolution><span class=s
17371699
(1 image pixel per device pixel).</p>
17381700
</div>
17391701

1740-
1741-
17421702
<h3 class="heading settled" data-level=5.2 id=the-image-orientation><span class=secno>5.2 </span><span class=content>
17431703
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=self-link href=#the-image-orientation></a></h3>
17441704

@@ -1827,8 +1787,6 @@ <h3 class="heading settled" data-level=5.2 id=the-image-orientation><span class=
18271787
an angle of -270deg or 450deg.</p>
18281788
</div>
18291789

1830-
1831-
18321790
<h3 class="heading settled" data-level=5.3 id=the-image-rendering><span class=secno>5.3 </span><span class=content>
18331791
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=self-link href=#the-image-rendering></a></h3>
18341792

@@ -1860,9 +1818,9 @@ <h3 class="heading settled" data-level=5.3 id=the-image-rendering><span class=se
18601818

18611819
<dt><dfn class=css data-dfn-for=image-rendering data-dfn-type=value data-export="" id=valdef-image-rendering-pixelated>pixelated<a class=self-link href=#valdef-image-rendering-pixelated></a></dfn>
18621820
<dd>
1863-
When scaling the image up, the "nearest neighbor" or similar algorithm must be used,
1821+
When scaling the image up in at least one dimension, the "nearest neighbor" or similar algorithm must be used,
18641822
so that the image appears to be simply composed of very large pixels.
1865-
When scaling down,
1823+
Otherwise,
18661824
this is the same as <a class=css data-link-for=image-rendering data-link-type=value href=#valdef-image-rendering-auto title=auto>auto</a>.
18671825
</dl>
18681826

@@ -1887,8 +1845,6 @@ <h3 class="heading settled" data-level=5.3 id=the-image-rendering><span class=se
18871845
and authors must not use them.</p>
18881846

18891847

1890-
1891-
18921848
<h2 class="heading settled" data-level=6 id=interpolation><span class=secno>6 </span><span class=content>
18931849
Interpolation</span><a class=self-link href=#interpolation></a></h2>
18941850

@@ -2034,8 +1990,6 @@ <h3 class="heading settled" data-level=6.3 id=interpolating-gradients><span clas
20341990
interpolate the position and color independently.
20351991
</ol>
20361992

2037-
2038-
20391993
<h2 class="heading settled" data-level=7 id=serialization><span class=secno>7 </span><span class=content>
20401994
Serialization</span><a class=self-link href=#serialization></a></h2>
20411995

@@ -2064,9 +2018,6 @@ <h2 class="heading settled" data-level=7 id=serialization><span class=secno>7 </
20642018
</div>
20652019

20662020

2067-
2068-
2069-
20702021
<h2 class="heading settled" data-level=8 id=changes><span class=secno>8 </span><span class=content>
20712022
Changes since Images 3</span><a class=self-link href=#changes></a></h2>
20722023

0 commit comments

Comments
 (0)