Skip to content

Commit 5abb382

Browse files
fantasaifantasai
committed
Give 'content'-generated images their own item in the examples list
1 parent 8ce3a60 commit 5abb382

2 files changed

Lines changed: 119 additions & 35 deletions

File tree

‎css3-images/Overview.html‎

Lines changed: 111 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,14 @@
1616

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

19-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 24 March 2012</h2>
19+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 27 March 2012</h2>
2020

2121
<dl>
2222
<dt>This Version:
2323

2424
<dd><a
2525
href="http://dev.w3.org/csswg/css3-images/">http://dev.w3.org/csswg/css3-images/</a>
26-
<!-- <dd><a href="http://www.w3.org/TR/2012/ED-css3-images-20120324/">http://www.w3.org/TR/2012/WD-css3-images-20120324/</a>-->
26+
<!-- <dd><a href="http://www.w3.org/TR/2012/ED-css3-images-20120327/">http://www.w3.org/TR/2012/WD-css3-images-20120327/</a>-->
2727

2828

2929
<dt>Latest Version:
@@ -167,8 +167,7 @@ <h2 class="no-num no-toc" id=status>Status of this document</h2>
167167
<p>The following features are at risk: &hellip;
168168

169169
<ol>
170-
<li>The <a href="#image-notation">image()</a> and <a
171-
href="#element-reference">element()</a> notations
170+
<li>The <a href="#image-notation">image()</a> notation
172171

173172
<li>The &lsquo;<a href="#object-fit0"><code
174173
class=property>object-fit</code></a>&rsquo;, &lsquo;<a
@@ -307,6 +306,8 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
307306
references</a>
308307

309308
<li class=no-num><a href="#other-references">Other references</a>
309+
310+
<li class=no-num><a href="#changes">Changes Since Last Call</a>
310311
</ul>
311312

312313
<li class=no-num><a href="#index">Index</a>
@@ -1810,7 +1811,7 @@ <h4 id=default-sizing><span class=secno>5.3.1. </span> Default Sizing
18101811
constraints:
18111812
<ol>
18121813
<li>If the object has an intrinsic height or width, its size is resolved
1813-
as if its <i>intrinsic size</i> were the <a
1814+
as if its <i>intrinsic size</i> were given as the <a
18141815
href="#specified-size"><i>specified size</i></a>.
18151816

18161817
<li>Otherwise, its size is resolved as a <a
@@ -1930,12 +1931,24 @@ <h3 id=object-sizing-examples><span class=secno>5.4. </span> Examples of
19301931
typical cursor on the UA's operating system. <a href="#CSS21"
19311932
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
19321933

1934+
<dt>&lsquo;<code class=property>content</code>&rsquo;
1935+
1936+
<dd>Objects inserted via the CSS2.1 &lsquo;<code
1937+
class=property>content</code>&rsquo; property are anonymous <a
1938+
href="http://www.w3.org/TR/CSS21/conform.html#replaced-element">replaced
1939+
elements</a>, and are sized the same way. <a href="#CSS21"
1940+
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> Note that such anonymous
1941+
elements have all their non-inherited properties (including &lsquo;<code
1942+
class=property>width</code>&rsquo;, &lsquo;<code
1943+
class=property>height</code>&rsquo;, etc.) set to their initial values.
1944+
19331945
<dt>replaced elements
19341946

19351947
<dd><a href="http://www.w3.org/TR/CSS21/">CSS 2.1</a> defines the sizing
19361948
of replaced elements (including those inserted as <a
19371949
href="http://www.w3.org/TR/CSS21/generate.html#content">generated
1938-
content</a>) in sections <a
1950+
content</a> via &lsquo;<code class=property>content</code>&rsquo;) in
1951+
sections <a
19391952
href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">10.3.2</a>,
19401953
<a
19411954
href="http://www.w3.org/TR/CSS2/visudet.html#min-max-widths">10.4</a>,
@@ -2737,6 +2750,69 @@ <h3 class=no-num id=other-references>Other references</h3>
27372750
</dl>
27382751
<!--end-informative-->
27392752

2753+
<h3 class=no-num id=changes>Changes Since Last Call</h3>
2754+
2755+
<p>Major changes include:
2756+
2757+
<ul>
2758+
<li>The &lsquo;<code class=css>element()</code>&rsquo; feature has been
2759+
deferred to Level 4.
2760+
2761+
<li>The directional images feature (&lsquo;<code
2762+
class=css>ltr</code>&rsquo;/&lsquo;<code class=css>rtl</code>&rsquo;
2763+
annotations in &lsquo;<code class=css>image()</code>&rsquo;) has been
2764+
deferred to Level 4 to address some design-level feedback.
2765+
2766+
<li>Images referenced with unsupported URL fragment syntax are now
2767+
considered invalid (and trigger fallback) within &lsquo;<code
2768+
class=css>image()</code>&rsquo;.
2769+
2770+
<li>The &lsquo;<a href="#object-fit0"><code
2771+
class=property>object-fit</code></a>&rsquo; property no longer resizes
2772+
the element's content box in any cases.
2773+
2774+
<li>The &lsquo;<a href="#image-orientation0"><code
2775+
class=property>image-orientation</code></a>&rsquo; property is now
2776+
inherited.
2777+
</ul>
2778+
2779+
<p>Significant details updated:
2780+
2781+
<ul>
2782+
<li>There is now a definition for <a href="#invalid-image"><i>invalid
2783+
images</i></a>, which trigger fallback in the &lsquo;<code
2784+
class=css>image()</code>&rsquo; notation.
2785+
2786+
<li>Clarified that media fragments are only required to be supported
2787+
within &lsquo;<code class=css>image()</code>&rsquo; in order to satisfy
2788+
the prerequisite for supporting &lsquo;<code
2789+
class=css>image()</code>&rsquo;.
2790+
2791+
<li>Defined how to determine the closeness of two aspect ratios (used in
2792+
the definition of <a href="#intrinsic-dimensions"><i>intrinsic
2793+
dimensions</i></a>).
2794+
2795+
<li>Corrected error in which &lsquo;<a href="#image-orientation0"><code
2796+
class=property>image-orientation</code></a>&rsquo; was applied after CSS
2797+
transforms.
2798+
2799+
<li>The &lsquo;<a href="#object-fit0"><code
2800+
class=property>object-fit</code></a>&rsquo; and &lsquo;<a
2801+
href="#object-position0"><code
2802+
class=property>object-position</code></a>&rsquo; properties may no longer
2803+
be aliased to &lsquo;<code class=property>image-fit</code>&rsquo; and
2804+
&lsquo;<code class=property>image-position</code>&rsquo;. A future
2805+
edition of the <a href="http://www.w3.org/TR/css-print/">CSS Print
2806+
Profile</a> may allow this for printer implementations, however.
2807+
</ul>
2808+
2809+
<p>There were also many clarifications and several sections were rearranged
2810+
to make them easier to read.
2811+
2812+
<p>The <a
2813+
href="http://dev.w3.org/csswg/css3-images/issues-lc-2012">Disposition of
2814+
Last Call Comments</a> is available.
2815+
27402816
<h2 class=no-num id=index>Index</h2>
27412817
<!--begin-index-->
27422818

@@ -2921,64 +2997,65 @@ <h2 class=no-num id=property-index>Property index</h2>
29212997

29222998
<tbody>
29232999
<tr>
2924-
<th><span class=property>Name:</span>
3000+
<th><a class=property href="#image-orientation0">image-orientation</a>
29253001

2926-
<td>Value:
3002+
<td>&lt;angle>
29273003

2928-
<td>Initial:
3004+
<td>0deg
29293005

2930-
<td>Applies to:
3006+
<td>all elements
29313007

2932-
<td>Inherited:
3008+
<td>yes
29333009

2934-
<td>Media:
3010+
<td>visual
29353011

2936-
<td>Computed value:
3012+
<td>specified value, rounded and normalized (see text)
29373013

29383014
<tr>
2939-
<th><span class=property>Name:</span>
3015+
<th><a class=property href="#image-resolution0">image-resolution</a>
29403016

2941-
<td>Value:
3017+
<td>[from-image || &lt;resolution>] && snap?
29423018

2943-
<td>Initial:
3019+
<td>1dppx
29443020

2945-
<td>Applies to:
3021+
<td>all elements
29463022

2947-
<td>Inherited:
3023+
<td>yes
29483024

2949-
<td>Media:
3025+
<td>visual
29503026

2951-
<td>Computed value:
3027+
<td>as specified, except with &lsquo;&lt;resolution>&rsquo; possibly
3028+
altered by computing for &lsquo;snap&rsquo; (see below)
29523029

29533030
<tr>
2954-
<th><span class=property>Name:</span>
3031+
<th><a class=property href="#object-fit0">object-fit</a>
29553032

2956-
<td>Value:
3033+
<td>fill | contain | cover | none | scale-down
29573034

2958-
<td>Initial:
3035+
<td>fill
29593036

2960-
<td>Applies to:
3037+
<td>replaced elements
29613038

2962-
<td>Inherited:
3039+
<td>no
29633040

2964-
<td>Percentages:
3041+
<td>N/A
29653042

2966-
<td>Media:
3043+
<td>visual
29673044

29683045
<tr>
2969-
<th><span class=property>Name:</span>
3046+
<th><a class=property href="#object-position0">object-position</a>
29703047

2971-
<td>Value:
3048+
<td>&lt;position>
29723049

2973-
<td>Initial:
3050+
<td>50% 50%
29743051

2975-
<td>Applies to:
3052+
<td>replaced elements
29763053

2977-
<td>Inherited:
3054+
<td>no
29783055

2979-
<td>Percentages:
3056+
<td>refer to width and height of box itself
29803057

2981-
<td>Media:
3058+
<td>visual
29823059
</table>
29833060
<!--end-properties-->
29843061
</html>

‎css3-images/Overview.src.html‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1209,8 +1209,15 @@ <h3 id='object-sizing-examples'>
12091209
<dd>The rules for calculating the <i>concrete object size</i> of a cursor are defined in
12101210
<a href="http://www.w3.org/TR/CSS21/ui.html#cursor-props">CSS2.1 § 18.1: Cursors</a>. The <i>default object size</i> is a UA-defined size that should be based on the size of a typical cursor on the UA's operating system. [[!CSS21]]</dd>
12111211

1212+
<dt>'content'</dt>
1213+
<dd>Objects inserted via the CSS2.1 'content' property are anonymous
1214+
<a href="http://www.w3.org/TR/CSS21/conform.html#replaced-element">replaced
1215+
elements</a>, and are sized the same way. [[!CSS21]] Note that such
1216+
anonymous elements have all their non-inherited properties (including
1217+
'width', 'height', etc.) set to their initial values.
1218+
12121219
<dt>replaced elements</dt>
1213-
<dd><a href="http://www.w3.org/TR/CSS21/">CSS 2.1</a> defines the sizing of replaced elements (including those inserted as <a href="http://www.w3.org/TR/CSS21/generate.html#content">generated content</a>) in sections <a href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">10.3.2</a>, <a href="http://www.w3.org/TR/CSS2/visudet.html#min-max-widths">10.4</a>, <a href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">10.6.2</a>, and <a href="http://www.w3.org/TR/CSS2/visudet.html#min-max-heights">10.7</a>. [[!CSS21]] The 'object-fit' property defined below defines how the <i>concrete object size</i> corresponds to the element's used width and height; by default they coincide.</dd>
1220+
<dd><a href="http://www.w3.org/TR/CSS21/">CSS 2.1</a> defines the sizing of replaced elements (including those inserted as <a href="http://www.w3.org/TR/CSS21/generate.html#content">generated content</a> via 'content') in sections <a href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">10.3.2</a>, <a href="http://www.w3.org/TR/CSS2/visudet.html#min-max-widths">10.4</a>, <a href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">10.6.2</a>, and <a href="http://www.w3.org/TR/CSS2/visudet.html#min-max-heights">10.7</a>. [[!CSS21]] The 'object-fit' property defined below defines how the <i>concrete object size</i> corresponds to the element's used width and height; by default they coincide.</dd>
12141221
</dl>
12151222
</div>
12161223

0 commit comments

Comments
 (0)