Skip to content

Commit 2a4b446

Browse files
committed
Remove the issue raised by Brad, as I've decided to reject the proposal and the decision seems supported by others.
1 parent 6cdeaff commit 2a4b446

2 files changed

Lines changed: 53 additions & 61 deletions

File tree

css3-images/Overview.html

Lines changed: 53 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,11 @@
1717

1818
<h1>CSS Image Values and Replaced Content Module Level 3</h1>
1919

20-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 19 September
21-
2011</h2>
20+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 3 October 2011</h2>
2221

2322
<dl>
2423
<dt>This Version:</dt>
25-
<!--<dd><a href="http://www.w3.org/TR/2011/ED-css3-images-20110919/">http://www.w3.org/TR/2011/WD-css3-images-20110919/</a>-->
24+
<!--<dd><a href="http://www.w3.org/TR/2011/ED-css3-images-20111003/">http://www.w3.org/TR/2011/WD-css3-images-20111003/</a>-->
2625

2726
<dd><a
2827
href="http://dev.w3.org/csswg/css3-images/">http://dev.w3.org/csswg/css3-images/</a>
@@ -64,13 +63,13 @@ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 19 September
6463
<p class=copyright><a
6564
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
6665
rel=license>Copyright</a> &copy; 2011 <a
67-
href="http://www.w3.org/"><acronym title="World Wide Web
68-
Consortium">W3C</acronym></a><sup>&reg;</sup> (<a
69-
href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
70-
of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym
71-
title="European Research Consortium for Informatics and
72-
Mathematics">ERCIM</acronym></a>, <a
73-
href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
66+
href="http://www.w3.org/"><acronym
67+
title="World Wide Web Consortium">W3C</acronym></a><sup>&reg;</sup> (<a
68+
href="http://www.csail.mit.edu/"><acronym
69+
title="Massachusetts Institute of Technology">MIT</acronym></a>, <a
70+
href="http://www.ercim.eu/"><acronym
71+
title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>,
72+
<a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
7473
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
7574
<a
7675
href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
@@ -367,8 +366,8 @@ <h2 id=image><span class=secno>4. </span> Image Values: the &lt;image> type</h2>
367366

368367
<p>The &lt;image> value type denotes a 2D image. It is defined as
369368

370-
<pre
371-
class=prod><dfn id=ltimage>&lt;image></dfn> = &lt;url> | &lt;image-list> | &lt;element-reference> | &lt;image-combination> | &lt;gradient></pre>
369+
<pre class=prod><dfn
370+
id=ltimage>&lt;image></dfn> = &lt;url> | &lt;image-list> | &lt;element-reference> | &lt;image-combination> | &lt;gradient></pre>
372371

373372
<p>Image values can be used in many CSS properties, including the
374373
&lsquo;<code class=property>background-image</code>&rsquo;, &lsquo;<code
@@ -529,8 +528,8 @@ <h3 id=element-reference><span class=secno>4.3. </span> Using Elements as
529528
or even an animated background. The syntax for &lsquo;<code
530529
class=css>element()</code>&rsquo; is:
531530

532-
<pre
533-
class=prod><dfn id=ltelement-reference>&lt;element-reference></dfn> = element( [&lt;id-selector> | &lt;identifier> ] )</pre>
531+
<pre class=prod><dfn
532+
id=ltelement-reference>&lt;element-reference></dfn> = element( [&lt;id-selector> | &lt;identifier> ] )</pre>
534533

535534
<p>where &lt;id-selector> is an ID selector <a href="#SELECT"
536535
rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>, and &lt;identifier> is an
@@ -647,8 +646,8 @@ <h2 id=gradients><span class=secno>5. </span> Gradients</h2>
647646
generate the image automatically when rendering the page. The syntax of a
648647
<a href="#ltgradient"><i>&lt;gradient></i></a> is:
649648

650-
<pre
651-
class=prod><dfn id=ltgradient>&lt;gradient></dfn> = [ &lt;linear-gradient> | &lt;radial-gradient> | &lt;repeating-linear-gradient> | &lt;repeating-radial-gradient> ]</pre>
649+
<pre class=prod><dfn
650+
id=ltgradient>&lt;gradient></dfn> = [ &lt;linear-gradient> | &lt;radial-gradient> | &lt;repeating-linear-gradient> | &lt;repeating-radial-gradient> ]</pre>
652651

653652
<p>where <a href="#ltlinear-gradient"><i>&lt;linear-gradient></i></a>, <a
654653
href="#ltradial-gradient"><i>&lt;radial-gradient></i></a>, <a
@@ -703,13 +702,14 @@ <h3 id=linear-gradients><span class=secno>5.1. </span> Linear Gradients</h3>
703702
<h4 class=no-toc id=linear-gradient-syntax><span class=secno>5.1.1. </span>
704703
linear-gradient() syntax</h4>
705704

706-
<pre
707-
class=prod><code><dfn id=ltlinear-gradient>&lt;linear-gradient></dfn> = linear-gradient(
705+
<pre class=prod><code><dfn
706+
id=ltlinear-gradient>&lt;linear-gradient></dfn> = linear-gradient(
708707
[ [ &lt;angle> | [ to &lt;side-or-corner> ] ] ,]?
709708
&lt;color-stop>[, &lt;color-stop>]+
710709
)
711710

712-
<dfn id=side-or-corner>&lt;side-or-corner></dfn> = [left | right] || [top | bottom]</code></pre>
711+
<dfn
712+
id=side-or-corner>&lt;side-or-corner></dfn> = [left | right] || [top | bottom]</code></pre>
713713

714714
<p>The first argument to the function specifies the <dfn
715715
id=gradient-line>gradient-line</dfn>, which gives the gradient a direction
@@ -748,14 +748,9 @@ <h4 class=no-toc id=linear-gradient-syntax><span class=secno>5.1.1. </span>
748748
<p>
749749

750750
<div class=example>
751-
<div style="overflow: hidden"> <img alt="[An image showing a box with a
752-
background shading gradually from white in the bottom-left corner to
753-
black in the top-right corner. There is a line, illustrating the
754-
gradient-line, angled at 45 degrees and passing through the center of the
755-
box. The starting-point and ending-point of the gradient-line are
756-
indicated by the intersection of the gradient-line with two additional
757-
lines that pass through the bottom-left and top-right corners of the
758-
box.]" src=gradient-diagram.png style="float: right; margin-left: 1em;">
751+
<div style="overflow: hidden"> <img
752+
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.]"
753+
src=gradient-diagram.png style="float: right; margin-left: 1em;">
759754
<p>This example illustrates visually how to calculate the <a
760755
href="#gradient-line"><i>gradient-line</i></a> from the rules above.
761756
This shows the starting and ending-point of the <a
@@ -860,7 +855,8 @@ <h4 class=no-toc id=radial-gradient-syntax><span class=secno>5.2.1. </span>
860855
radial-gradient() Syntax</h4>
861856

862857
<pre class=prod>
863-
<dfn id=ltradial-gradient>&lt;radial-gradient></dfn> = radial-gradient(
858+
<dfn
859+
id=ltradial-gradient>&lt;radial-gradient></dfn> = radial-gradient(
864860
[&lt;position&gt;,]?
865861
[[
866862
[&lt;shape&gt; || &lt;size&gt;]
@@ -912,7 +908,8 @@ <h4 class=no-toc id=radial-gradient-syntax><span class=secno>5.2.1. </span>
912908

913909
<p>The <a href="#ltsize"><i>&lt;size></i></a> keyword is defined as:</p>
914910

915-
<pre><code><dfn id=ltsize>&lt;size></dfn> = closest-side | closest-corner | farthest-side | farthest-corner | contain | cover</code></pre>
911+
<pre><code><dfn
912+
id=ltsize>&lt;size></dfn> = closest-side | closest-corner | farthest-side | farthest-corner | contain | cover</code></pre>
916913

917914
<p>Its values are defined in the list below. For the purpose of these
918915
definitions, consider the box edges as extending infinitely in both
@@ -1063,12 +1060,7 @@ <h4 class=no-toc id=radial-gradient-syntax><span class=secno>5.2.1. </span>
10631060
<p>When drawing the concentric ellipses of the gradient, the color of each
10641061
ellipse is the color of the <a
10651062
href="#gradient-ray"><i>gradient-ray</i></a> at the point where the
1066-
ellipse intersects the ray.
1067-
1068-
<p class=issue>Brad suggests that we could drop the position/sizing
1069-
arguments and just use background-position and background-size. This would
1070-
force all non-background uses of radial gradient to be centered and
1071-
box-filling. Is this acceptable or not?</p>
1063+
ellipse intersects the ray.</p>
10721064
<!-- ====================================================================== -->
10731065

10741066
<h4 class=no-toc id=radial-gradient-examples><span class=secno>5.2.2.
@@ -1131,13 +1123,15 @@ <h3 id=repeating-gradients><span class=secno>5.3. </span> Repeating
11311123
functions. These two functions take the same values and are interpreted
11321124
the same as their respective non-repeating siblings defined previously:
11331125

1134-
<pre
1135-
class=prod><code><dfn id=ltrepeating-linear-gradient>&lt;repeating-linear-gradient></dfn> = repeating-linear-gradient(
1136-
[ [ &lt;angle> | [ to <a href="#side-or-corner"><code>&lt;side-or-corner></code></a> ] ] ,]?
1126+
<pre class=prod><code><dfn
1127+
id=ltrepeating-linear-gradient>&lt;repeating-linear-gradient></dfn> = repeating-linear-gradient(
1128+
[ [ &lt;angle> | [ to <a
1129+
href="#side-or-corner"><code>&lt;side-or-corner></code></a> ] ] ,]?
11371130
&lt;color-stop>[, &lt;color-stop>]+
11381131
)
11391132

1140-
<dfn id=ltrepeating-radial-gradient>&lt;repeating-radial-gradient></dfn> = repeating-radial-gradient(
1133+
<dfn
1134+
id=ltrepeating-radial-gradient>&lt;repeating-radial-gradient></dfn> = repeating-radial-gradient(
11411135
[&lt;'background-position'&gt;,]?
11421136
[[
11431137
[&lt;shape&gt; || &lt;size&gt;]
@@ -1243,8 +1237,8 @@ <h3 id=repeating-gradients><span class=secno>5.3. </span> Repeating
12431237
<h3 id=color-stop-syntax><span class=secno>5.4. </span> Gradient
12441238
Color-Stops</h3>
12451239

1246-
<pre
1247-
class=prod><code><dfn id=ltcolor-stop>&lt;color-stop></dfn> = &lt;color> [ &lt;percentage> | &lt;length> ]?</code></pre>
1240+
<pre class=prod><code><dfn
1241+
id=ltcolor-stop>&lt;color-stop></dfn> = &lt;color> [ &lt;percentage> | &lt;length> ]?</code></pre>
12481242

12491243
<p>Color-stops are points placed along the line defined by the <a
12501244
href="#gradient-line"><i>gradient-line</i></a> at the beginning of the
@@ -2099,10 +2093,10 @@ <h3 class=no-num id=normative-references>Normative references</h3>
20992093
<dt id=CSS21>[CSS21]
21002094

21012095
<dd>Bert Bos; et al. <a
2102-
href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
2096+
href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading Style
21032097
Sheets Level 2 Revision 1 (CSS&#160;2.1) Specification.</cite></a> 7 June
21042098
2011. W3C Recommendation. URL: <a
2105-
href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
2099+
href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a>
21062100
</dd>
21072101
<!---->
21082102

@@ -2273,8 +2267,8 @@ <h2 class=no-num id=index>Index</h2>
22732267
<li>&lt;color-stop>, <a href="#ltcolor-stop"
22742268
title="&lt;color-stop>"><strong>5.4.</strong></a>
22752269

2276-
<li>concrete object size, <a href="#concrete-object-size" title="concrete
2277-
object size"><strong>6.1.</strong></a>
2270+
<li>concrete object size, <a href="#concrete-object-size"
2271+
title="concrete object size"><strong>6.1.</strong></a>
22782272

22792273
<li>contain, <a href="#radial-contain"
22802274
title=contain><strong>5.2.1.</strong></a>
@@ -2283,17 +2277,17 @@ <h2 class=no-num id=index>Index</h2>
22832277

22842278

22852279
<li>CSS element reference identifier, <a
2286-
href="#css-element-reference-identifier" title="CSS element reference
2287-
identifier"><strong>4.3.</strong></a>
2280+
href="#css-element-reference-identifier"
2281+
title="CSS element reference identifier"><strong>4.3.</strong></a>
22882282

22892283
<li>CSSOM-capable, <a href="#cssom-capable"
22902284
title=CSSOM-capable><strong>2.</strong></a>
22912285

2292-
<li>default object size, <a href="#default-object-size" title="default
2293-
object size"><strong>6.1.</strong></a>
2286+
<li>default object size, <a href="#default-object-size"
2287+
title="default object size"><strong>6.1.</strong></a>
22942288

2295-
<li>degenerate shape, <a href="#degenerate-shape" title="degenerate
2296-
shape"><strong>5.2.1.</strong></a>
2289+
<li>degenerate shape, <a href="#degenerate-shape"
2290+
title="degenerate shape"><strong>5.2.1.</strong></a>
22972291

22982292
<li>dpcm, <a href="#dpcm" title=dpcm><strong>3.</strong></a>
22992293

@@ -2344,14 +2338,14 @@ <h2 class=no-num id=index>Index</h2>
23442338
<li>intrinsic aspect ratio, <a href="#intrinsic-aspect-ratio"
23452339
title="intrinsic aspect ratio"><strong>6.1.</strong></a>
23462340

2347-
<li>intrinsic dimensions, <a href="#intrinsic-dimensions" title="intrinsic
2348-
dimensions"><strong>6.1.</strong></a>
2341+
<li>intrinsic dimensions, <a href="#intrinsic-dimensions"
2342+
title="intrinsic dimensions"><strong>6.1.</strong></a>
23492343

2350-
<li>intrinsic height, <a href="#intrinsic-height" title="intrinsic
2351-
height"><strong>6.1.</strong></a>
2344+
<li>intrinsic height, <a href="#intrinsic-height"
2345+
title="intrinsic height"><strong>6.1.</strong></a>
23522346

2353-
<li>intrinsic width, <a href="#intrinsic-width" title="intrinsic
2354-
width"><strong>6.1.</strong></a>
2347+
<li>intrinsic width, <a href="#intrinsic-width"
2348+
title="intrinsic width"><strong>6.1.</strong></a>
23552349

23562350
<li>&lt;linear-gradient>, <a href="#ltlinear-gradient"
23572351
title="&lt;linear-gradient>"><strong>5.1.1.</strong></a>
@@ -2393,8 +2387,8 @@ <h2 class=no-num id=index>Index</h2>
23932387
<li>&lt;size>, <a href="#ltsize"
23942388
title="&lt;size>"><strong>5.2.1.</strong></a>
23952389

2396-
<li>specified size, <a href="#specified-size" title="specified
2397-
size"><strong>6.1.</strong></a>
2390+
<li>specified size, <a href="#specified-size"
2391+
title="specified size"><strong>6.1.</strong></a>
23982392

23992393
<li>transition-capable, <a href="#transition-capable"
24002394
title=transition-capable><strong>2.</strong></a>

css3-images/Overview.src.html

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -645,8 +645,6 @@ <h4 class='no-toc' id='radial-gradient-syntax'>
645645

646646
<p>When drawing the concentric ellipses of the gradient, the color of each ellipse is the color of the <i>gradient-ray</i> at the point where the ellipse intersects the ray.</p>
647647

648-
<p class=issue>Brad suggests that we could drop the position/sizing arguments and just use background-position and background-size. This would force all non-background uses of radial gradient to be centered and box-filling. Is this acceptable or not?</p>
649-
650648
<!-- ====================================================================== -->
651649

652650
<h4 class='no-toc' id='radial-gradient-examples'>

0 commit comments

Comments
 (0)