Skip to content
Permalink
Browse files

[e] (0) Reframe the <img> rendering section for clarity

Fixing https://www.w3.org/Bugs/Public/show_bug.cgi?id=23443
Affected topics: Rendering

git-svn-id: http://svn.whatwg.org/webapps@8280 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
Hixie committed Nov 13, 2013
1 parent d49c431 commit d8a633a65b9354bcca1fd7e0a0b9bfaea46ecdbd
Showing with 217 additions and 104 deletions.
  1. +69 −34 complete.html
  2. +69 −34 index
  3. +79 −36 source

<h4 id=images-0><span class=secno>14.4.2 </span>Images</h4>

<p>When an <code><a href=#the-img-element>img</a></code> element or an <code><a href=#the-input-element>input</a></code> element when its <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href="#image-button-state-(type=image)" title=attr-input-type-image>Image
Button</a> state <a href=#represents>represents</a> an image, it is expected to be treated as a replaced
element.</p>
<p>User agents are expected to render <code><a href=#the-img-element>img</a></code> elements and <code><a href=#the-input-element>input</a></code> elements
whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attributes are in the <a href="#image-button-state-(type=image)" title=attr-input-type-image>Image Button</a> state, according to the first applicable rules
from the following list:</p>

<dl class=switch><dt>If the element <a href=#represents>represents</a> an image</dt>

<dd>The user agent is expected to treat the element as a replaced element and render the image
according to the rules for doing so defined in CSS.</dd>


<dt>

If the element does not <a href=#represents title=represents>represent</a> an image, but the element
already has intrinsic dimensions (e.g. from the <a href=#dimension-attributes>dimension attributes</a> or CSS rules),
and either:

<ul><li>the <code><a href=#document>Document</a></code> is in <a href=#quirks-mode>quirks mode</a>, or

<!--
<li>the element is an <code>img</code> element and has no <code
title="attr-img-alt">alt</code> attribute, or

<li>the element is an <code>input</code> element and has no <code
title="attr-input-alt">alt</code> attribute, or
-->

<li>the user agent has reason to believe that the image will become <i title=img-available><a href=#img-available>available</a></i><!--input-img-available also--> and be rendered in due
course.

</ul></dt>

<dd>The user agent is expected to treat the element as a replaced element whose content is the
text that the element represents, if any, optionally alongside an icon indicating that the image
is being obtained (if applicable). For <code><a href=#the-input-element>input</a></code> elements, the element is expected to
appear button-like to indicate that the element is a <a href=#concept-button title=concept-button>button</a>.</dd>


<dt>If the element is an <code><a href=#the-img-element>img</a></code> element that might be a key part of the content, but
neither the image nor any kind of alternative text is available, and the user agent does not
expect this to change</dt>

<dd>The user agent is expected to treat the element as a non-replaced phrasing element whose
content is an icon indicating that an image is missing.<!-- there's also a should requirement for
this case in the <img> section itself --></dd>


<dt>If the element is an <code><a href=#the-img-element>img</a></code> element that <a href=#represents>represents</a> some text and the
user agent does not expect this to change</dt>

<dd>The user agent is expected to treat the element as a non-replaced phrasing element whose
content is the text, optionally with an icon indicating that an image is missing, so that the
user can request the image be displayed or investigate why it is not rendering. In non-graphical
contexts, such an icon should be omitted.</dd>


<dt>If the element is an <code><a href=#the-img-element>img</a></code> element that <a href=#represents>represents</a> nothing and the
user agent does not expect this to change</dt>

<dd>The user agent is expected to treat the element as an empty inline element. (In the absence
of further styles, this will cause the element to essentially not be rendered.)</dd>


<dt>If the element is an <code><a href=#the-input-element>input</a></code> element that does not <a href=#represents title=represents>represent</a> an image and the user agent does not expect this to change</dt>

<dd>The user agent is expected to treat the element as a replaced element consisting of a button
whose content is the element's alternative text. The intrinsic dimensions of the button are
expected to be about one line in height and whatever width is necessary to render the text on one
line.</dd>

<p>When an <code><a href=#the-img-element>img</a></code> element or an <code><a href=#the-input-element>input</a></code> element when its <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href="#image-button-state-(type=image)" title=attr-input-type-image>Image
Button</a> state does not <a href=#represents title=represents>represent</a> an image, but the element
already has intrinsic dimensions (e.g. from the <a href=#dimension-attributes>dimension attributes</a> or CSS rules),
and either the user agent has reason to believe that the image will become <i title=img-available><a href=#img-available>available</a></i><!--input-img-available also--> and be rendered in due course
or the <code><a href=#document>Document</a></code> is in <a href=#quirks-mode>quirks mode</a>, the element is expected to be treated
as a replaced element whose content is the text that the element represents, if any, optionally
alongside an icon indicating that the image is being obtained. For <code><a href=#the-input-element>input</a></code> elements,
the text is expected to appear button-like to indicate that the element is a <a href=#concept-button title=concept-button>button</a>.</p>

<p>When an <code><a href=#the-img-element>img</a></code> element <a href=#represents>represents</a> some text and the user agent does not
expect this to change, the element is expected to be treated as a non-replaced phrasing element
whose content is the text, optionally with an icon indicating that an image is missing, so that
the user can request the image be displayed or investigate why it is not rendering. In
non-graphical contexts, such an icon should be omitted.</p>

<p>When an <code><a href=#the-img-element>img</a></code> element <a href=#represents>represents</a> nothing and the user agent does not
expect this to change, the element is expected to not be rendered at all.</p>

<p>When an <code><a href=#the-img-element>img</a></code> element might be a key part of the content, but neither the image nor
any kind of alternative text is available, and the user agent does not expect this to change, the
element is expected to be treated as a non-replaced phrasing element whose content is an icon
indicating that an image is missing.</p> <!-- there's also a should requirement for this case in
the <img> section itself -->

<p>When an <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is
in the <a href="#image-button-state-(type=image)" title=attr-input-type-image>Image Button</a> state does not <a href=#represents title=represents>represent</a> an image and the user agent does not expect this to change,
the element is expected to be treated as a replaced element consisting of a button whose content
is the element's alternative text. The intrinsic dimensions of the button are expected to be about
one line in height and whatever width is necessary to render the text on one line.</p>

<p>The icons mentioned above are expected to be relatively small so as not to disrupt most text
</dl><p>The icons mentioned above are expected to be relatively small so as not to disrupt most text
but be easily clickable. In a visual environment, for instance, icons could be 16 pixels by 16
pixels square, or 1em by 1em if the images are scalable. In an audio environment, the icon could
be a short bleep. The icons are intended to indicate to the user that they can be used to get to
103 index

<h4 id=images-0><span class=secno>14.4.2 </span>Images</h4>

<p>When an <code><a href=#the-img-element>img</a></code> element or an <code><a href=#the-input-element>input</a></code> element when its <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href="#image-button-state-(type=image)" title=attr-input-type-image>Image
Button</a> state <a href=#represents>represents</a> an image, it is expected to be treated as a replaced
element.</p>
<p>User agents are expected to render <code><a href=#the-img-element>img</a></code> elements and <code><a href=#the-input-element>input</a></code> elements
whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attributes are in the <a href="#image-button-state-(type=image)" title=attr-input-type-image>Image Button</a> state, according to the first applicable rules
from the following list:</p>

<dl class=switch><dt>If the element <a href=#represents>represents</a> an image</dt>

<dd>The user agent is expected to treat the element as a replaced element and render the image
according to the rules for doing so defined in CSS.</dd>


<dt>

If the element does not <a href=#represents title=represents>represent</a> an image, but the element
already has intrinsic dimensions (e.g. from the <a href=#dimension-attributes>dimension attributes</a> or CSS rules),
and either:

<ul><li>the <code><a href=#document>Document</a></code> is in <a href=#quirks-mode>quirks mode</a>, or

<!--
<li>the element is an <code>img</code> element and has no <code
title="attr-img-alt">alt</code> attribute, or

<li>the element is an <code>input</code> element and has no <code
title="attr-input-alt">alt</code> attribute, or
-->

<li>the user agent has reason to believe that the image will become <i title=img-available><a href=#img-available>available</a></i><!--input-img-available also--> and be rendered in due
course.

</ul></dt>

<dd>The user agent is expected to treat the element as a replaced element whose content is the
text that the element represents, if any, optionally alongside an icon indicating that the image
is being obtained (if applicable). For <code><a href=#the-input-element>input</a></code> elements, the element is expected to
appear button-like to indicate that the element is a <a href=#concept-button title=concept-button>button</a>.</dd>


<dt>If the element is an <code><a href=#the-img-element>img</a></code> element that might be a key part of the content, but
neither the image nor any kind of alternative text is available, and the user agent does not
expect this to change</dt>

<dd>The user agent is expected to treat the element as a non-replaced phrasing element whose
content is an icon indicating that an image is missing.<!-- there's also a should requirement for
this case in the <img> section itself --></dd>


<dt>If the element is an <code><a href=#the-img-element>img</a></code> element that <a href=#represents>represents</a> some text and the
user agent does not expect this to change</dt>

<dd>The user agent is expected to treat the element as a non-replaced phrasing element whose
content is the text, optionally with an icon indicating that an image is missing, so that the
user can request the image be displayed or investigate why it is not rendering. In non-graphical
contexts, such an icon should be omitted.</dd>


<dt>If the element is an <code><a href=#the-img-element>img</a></code> element that <a href=#represents>represents</a> nothing and the
user agent does not expect this to change</dt>

<dd>The user agent is expected to treat the element as an empty inline element. (In the absence
of further styles, this will cause the element to essentially not be rendered.)</dd>


<dt>If the element is an <code><a href=#the-input-element>input</a></code> element that does not <a href=#represents title=represents>represent</a> an image and the user agent does not expect this to change</dt>

<dd>The user agent is expected to treat the element as a replaced element consisting of a button
whose content is the element's alternative text. The intrinsic dimensions of the button are
expected to be about one line in height and whatever width is necessary to render the text on one
line.</dd>

<p>When an <code><a href=#the-img-element>img</a></code> element or an <code><a href=#the-input-element>input</a></code> element when its <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href="#image-button-state-(type=image)" title=attr-input-type-image>Image
Button</a> state does not <a href=#represents title=represents>represent</a> an image, but the element
already has intrinsic dimensions (e.g. from the <a href=#dimension-attributes>dimension attributes</a> or CSS rules),
and either the user agent has reason to believe that the image will become <i title=img-available><a href=#img-available>available</a></i><!--input-img-available also--> and be rendered in due course
or the <code><a href=#document>Document</a></code> is in <a href=#quirks-mode>quirks mode</a>, the element is expected to be treated
as a replaced element whose content is the text that the element represents, if any, optionally
alongside an icon indicating that the image is being obtained. For <code><a href=#the-input-element>input</a></code> elements,
the text is expected to appear button-like to indicate that the element is a <a href=#concept-button title=concept-button>button</a>.</p>

<p>When an <code><a href=#the-img-element>img</a></code> element <a href=#represents>represents</a> some text and the user agent does not
expect this to change, the element is expected to be treated as a non-replaced phrasing element
whose content is the text, optionally with an icon indicating that an image is missing, so that
the user can request the image be displayed or investigate why it is not rendering. In
non-graphical contexts, such an icon should be omitted.</p>

<p>When an <code><a href=#the-img-element>img</a></code> element <a href=#represents>represents</a> nothing and the user agent does not
expect this to change, the element is expected to not be rendered at all.</p>

<p>When an <code><a href=#the-img-element>img</a></code> element might be a key part of the content, but neither the image nor
any kind of alternative text is available, and the user agent does not expect this to change, the
element is expected to be treated as a non-replaced phrasing element whose content is an icon
indicating that an image is missing.</p> <!-- there's also a should requirement for this case in
the <img> section itself -->

<p>When an <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is
in the <a href="#image-button-state-(type=image)" title=attr-input-type-image>Image Button</a> state does not <a href=#represents title=represents>represent</a> an image and the user agent does not expect this to change,
the element is expected to be treated as a replaced element consisting of a button whose content
is the element's alternative text. The intrinsic dimensions of the button are expected to be about
one line in height and whatever width is necessary to render the text on one line.</p>

<p>The icons mentioned above are expected to be relatively small so as not to disrupt most text
</dl><p>The icons mentioned above are expected to be relatively small so as not to disrupt most text
but be easily clickable. In a visual environment, for instance, icons could be 16 pixels by 16
pixels square, or 1em by 1em if the images are scalable. In an audio environment, the icon could
be a short bleep. The icons are intended to indicate to the user that they can be used to get to

0 comments on commit d8a633a

Please sign in to comment.
You can’t perform that action at this time.