[html5] r8280 - [e] (0) Reframe the <img> rendering section for clarity Fixing https://www.w3.or [...]

[whatwg at whatwg.org]

Author: ianh
Date: 2013-11-13 14:36:22 -0800 (Wed, 13 Nov 2013)
New Revision: 8280

Modified:
   complete.html
   index
   source
Log:
[e] (0) Reframe the <img> rendering section for clarity
Fixing https://www.w3.org/Bugs/Public/show_bug.cgi?id=23443
Affected topics: Rendering

Modified: complete.html
===================================================================
--- complete.html	2013-11-13 22:08:52 UTC (rev 8279)
+++ complete.html	2013-11-13 22:36:22 UTC (rev 8280)
@@ -94263,41 +94263,76 @@
 
   <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>
 
-  <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>
+  <dl class=switch><dt>If the element <a href=#represents>represents</a> an image</dt>
 
-  <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>
+   <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>
 
-  <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 -->
+   <dt>
 
-  <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>
+    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:
 
-  <p>The icons mentioned above are expected to be relatively small so as not to disrupt most text
+    <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>
+
+  </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

Modified: index
===================================================================
--- index	2013-11-13 22:08:52 UTC (rev 8279)
+++ index	2013-11-13 22:36:22 UTC (rev 8280)
@@ -94263,41 +94263,76 @@
 
   <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>
 
-  <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>
+  <dl class=switch><dt>If the element <a href=#represents>represents</a> an image</dt>
 
-  <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>
+   <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>
 
-  <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 -->
+   <dt>
 
-  <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>
+    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:
 
-  <p>The icons mentioned above are expected to be relatively small so as not to disrupt most text
+    <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>
+
+  </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

Modified: source
===================================================================
--- source	2013-11-13 22:08:52 UTC (rev 8279)
+++ source	2013-11-13 22:36:22 UTC (rev 8280)
@@ -104843,45 +104843,88 @@
 
   <h4>Images</h4>
 
-  <p>When an <code>img</code> element or an <code>input</code> element when its <code
-  data-x="attr-input-type">type</code> attribute is in the <span data-x="attr-input-type-image">Image
-  Button</span> state <span>represents</span> an image, it is expected to be treated as a replaced
-  element.</p>
+  <p>User agents are expected to render <code>img</code> elements and <code>input</code> elements
+  whose <code data-x="attr-input-type">type</code> attributes are in the <span
+  data-x="attr-input-type-image">Image Button</span> state, according to the first applicable rules
+  from the following list:</p>
 
-  <p>When an <code>img</code> element or an <code>input</code> element when its <code
-  data-x="attr-input-type">type</code> attribute is in the <span data-x="attr-input-type-image">Image
-  Button</span> state does not <span data-x="represents">represent</span> an image, but the element
-  already has intrinsic dimensions (e.g. from the <span>dimension attributes</span> or CSS rules),
-  and either the user agent has reason to believe that the image will become <i
-  data-x="img-available">available</i><!--input-img-available also--> and be rendered in due course
-  or the <code>Document</code> is in <span>quirks mode</span>, 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>input</code> elements,
-  the text is expected to appear button-like to indicate that the element is a <span
-  data-x="concept-button">button</span>.</p>
+  <dl class="switch">
 
-  <p>When an <code>img</code> element <span>represents</span> 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>img</code> element <span>represents</span> nothing and the user agent does not
-  expect this to change, the element is expected to not be rendered at all.</p>
+   <dt>If the element <span>represents</span> an image</dt>
 
-  <p>When an <code>img</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 -->
+   <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>
 
-  <p>When an <code>input</code> element whose <code data-x="attr-input-type">type</code> attribute is
-  in the <span data-x="attr-input-type-image">Image Button</span> state does not <span
-  data-x="represents">represent</span> 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>
 
+   <dt>
+
+    If the element does not <span data-x="represents">represent</span> an image, but the element
+    already has intrinsic dimensions (e.g. from the <span>dimension attributes</span> or CSS rules),
+    and either:
+
+    <ul>
+
+     <li>the <code>Document</code> is in <span>quirks mode</span>, or
+
+<!--
+     <li>the element is an <code>img</code> element and has no <code
+     data-x="attr-img-alt">alt</code> attribute, or
+
+     <li>the element is an <code>input</code> element and has no <code
+     data-x="attr-input-alt">alt</code> attribute, or
+-->
+
+     <li>the user agent has reason to believe that the image will become <i
+     data-x="img-available">available</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>input</code> elements, the element is expected to
+   appear button-like to indicate that the element is a <span
+   data-x="concept-button">button</span>.</dd>
+
+
+   <dt>If the element is an <code>img</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>img</code> element that <span>represents</span> 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>img</code> element that <span>represents</span> 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>input</code> element that does not <span
+   data-x="represents">represent</span> 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>
+
+  </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