[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
whatwg · Nov 13, 2013 · d8a633a · d8a633a
1 parent d49c431
commit d8a633a
Show file tree

Hide file tree

Showing 3 changed files with 217 additions and 104 deletions.
diff --git a/complete.html b/complete.html
@@ -94263,41 +94263,76 @@ <h4 id=embedded-content-2><span class=secno>14.4.1 </span>Embedded content</h4>
 
   <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

diff --git a/index b/index
@@ -94263,41 +94263,76 @@ iframe[seamless] { display: block; }
 
   <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