[html5] r8281 - [giow] (3) Adjust the rules on rendering images without 'alt' attributes. Fixing [...]
whatwg at whatwg.org
whatwg at whatwg.org
Wed Nov 13 14:42:22 PST 2013
Author: ianh
Date: 2013-11-13 14:42:18 -0800 (Wed, 13 Nov 2013)
New Revision: 8281
Modified:
complete.html
index
source
Log:
[giow] (3) Adjust the rules on rendering images without 'alt' attributes.
Fixing https://www.w3.org/Bugs/Public/show_bug.cgi?id=23443
Affected topics: Rendering
Modified: complete.html
===================================================================
--- complete.html 2013-11-13 22:36:22 UTC (rev 8280)
+++ complete.html 2013-11-13 22:42:18 UTC (rev 8281)
@@ -1386,35 +1386,28 @@
<ol>
<li><a href=#embedded-content-2><span class=secno>14.4.1 </span>Embedded content</a></li>
<li><a href=#images-0><span class=secno>14.4.2 </span>Images</a></li>
- <li><a href=#attributes-for-embedded-content-and-images><span class=secno>14.4.3 </span>Attributes for embedded content and images</a></li>
- <li><a href=#image-maps-0><span class=secno>14.4.4 </span>Image maps</a></ol></li>
- <li><a href=#bindings><span class=secno>14.5 </span>Bindings</a>
+ <li><a href=#the-input-element-as-a-text-entry-widget><span class=secno>14.4.3 </span>The <code>input</code> element as a text entry widget</a></li>
+ <li><a href=#the-input-element-as-domain-specific-widgets><span class=secno>14.4.4 </span>The <code>input</code> element as domain-specific widgets</a></li>
+ <li><a href=#the-input-element-as-a-range-control><span class=secno>14.4.5 </span>The <code>input</code> element as a range control</a></li>
+ <li><a href=#the-input-element-as-a-color-well><span class=secno>14.4.6 </span>The <code>input</code> element as a color well</a></li>
+ <li><a href=#the-input-element-as-a-checkbox-and-radio-button-widgets><span class=secno>14.4.7 </span>The <code>input</code> element as a checkbox and radio button widgets</a></li>
+ <li><a href=#the-input-element-as-a-file-upload-control><span class=secno>14.4.8 </span>The <code>input</code> element as a file upload control</a></li>
+ <li><a href=#the-input-element-as-a-button><span class=secno>14.4.9 </span>The <code>input</code> element as a button</a></li>
+ <li><a href=#the-marquee-element-0><span class=secno>14.4.10 </span>The <code>marquee</code> element</a></li>
+ <li><a href=#the-meter-element-0><span class=secno>14.4.11 </span>The <code>meter</code> element</a></li>
+ <li><a href=#the-progress-element-0><span class=secno>14.4.12 </span>The <code>progress</code> element</a></li>
+ <li><a href=#the-select-element-0><span class=secno>14.4.13 </span>The <code>select</code> element</a></li>
+ <li><a href=#the-textarea-element-0><span class=secno>14.4.14 </span>The <code>textarea</code> element</a></li>
+ <li><a href=#the-keygen-element-0><span class=secno>14.4.15 </span>The <code>keygen</code> element</a></ol></li>
+ <li><a href=#frames-and-framesets><span class=secno>14.5 </span>Frames and framesets</a></li>
+ <li><a href=#interactive-media><span class=secno>14.6 </span>Interactive media</a>
<ol>
- <li><a href=#introduction-14><span class=secno>14.5.1 </span>Introduction</a></li>
- <li><a href=#the-button-element-0><span class=secno>14.5.2 </span>The <code>button</code> element</a></li>
- <li><a href=#the-details-element-0><span class=secno>14.5.3 </span>The <code>details</code> element</a></li>
- <li><a href=#the-input-element-as-a-text-entry-widget><span class=secno>14.5.4 </span>The <code>input</code> element as a text entry widget</a></li>
- <li><a href=#the-input-element-as-domain-specific-widgets><span class=secno>14.5.5 </span>The <code>input</code> element as domain-specific widgets</a></li>
- <li><a href=#the-input-element-as-a-range-control><span class=secno>14.5.6 </span>The <code>input</code> element as a range control</a></li>
- <li><a href=#the-input-element-as-a-color-well><span class=secno>14.5.7 </span>The <code>input</code> element as a color well</a></li>
- <li><a href=#the-input-element-as-a-checkbox-and-radio-button-widgets><span class=secno>14.5.8 </span>The <code>input</code> element as a checkbox and radio button widgets</a></li>
- <li><a href=#the-input-element-as-a-file-upload-control><span class=secno>14.5.9 </span>The <code>input</code> element as a file upload control</a></li>
- <li><a href=#the-input-element-as-a-button><span class=secno>14.5.10 </span>The <code>input</code> element as a button</a></li>
- <li><a href=#the-marquee-element-0><span class=secno>14.5.11 </span>The <code>marquee</code> element</a></li>
- <li><a href=#the-meter-element-0><span class=secno>14.5.12 </span>The <code>meter</code> element</a></li>
- <li><a href=#the-progress-element-0><span class=secno>14.5.13 </span>The <code>progress</code> element</a></li>
- <li><a href=#the-select-element-0><span class=secno>14.5.14 </span>The <code>select</code> element</a></li>
- <li><a href=#the-textarea-element-0><span class=secno>14.5.15 </span>The <code>textarea</code> element</a></li>
- <li><a href=#the-keygen-element-0><span class=secno>14.5.16 </span>The <code>keygen</code> element</a></ol></li>
- <li><a href=#frames-and-framesets><span class=secno>14.6 </span>Frames and framesets</a></li>
- <li><a href=#interactive-media><span class=secno>14.7 </span>Interactive media</a>
- <ol>
- <li><a href=#links,-forms,-and-navigation><span class=secno>14.7.1 </span>Links, forms, and navigation</a></li>
- <li><a href=#the-title-attribute-0><span class=secno>14.7.2 </span>The <code title=attr-title>title</code> attribute</a></li>
- <li><a href=#editing-hosts><span class=secno>14.7.3 </span>Editing hosts</a></li>
- <li><a href=#text-rendered-in-native-user-interfaces><span class=secno>14.7.4 </span>Text rendered in native user interfaces</a></ol></li>
- <li><a href=#print-media><span class=secno>14.8 </span>Print media</a></li>
- <li><a href=#unstyled-xml-documents><span class=secno>14.9 </span>Unstyled XML documents</a></ol></li>
+ <li><a href=#links,-forms,-and-navigation><span class=secno>14.6.1 </span>Links, forms, and navigation</a></li>
+ <li><a href=#the-title-attribute-0><span class=secno>14.6.2 </span>The <code title=attr-title>title</code> attribute</a></li>
+ <li><a href=#editing-hosts><span class=secno>14.6.3 </span>Editing hosts</a></li>
+ <li><a href=#text-rendered-in-native-user-interfaces><span class=secno>14.6.4 </span>Text rendered in native user interfaces</a></ol></li>
+ <li><a href=#print-media><span class=secno>14.7 </span>Print media</a></li>
+ <li><a href=#unstyled-xml-documents><span class=secno>14.8 </span>Unstyled XML documents</a></ol></li>
<li><a href=#obsolete><span class=secno>15 </span>Obsolete features</a>
<ol>
<li><a href=#obsolete-but-conforming-features><span class=secno>15.1 </span>Obsolete but conforming features</a>
@@ -94279,19 +94272,13 @@
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
+ <ul><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, 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 has no <code title="">alt</code> attribute<!-- attr-img-alt, attr-input-alt -->, or
- <li>the element is an <code>input</code> element and has no <code
- title="attr-input-alt">alt</code> attribute, or
--->
+ <li>the <code><a href=#document>Document</a></code> is in <a href=#quirks-mode>quirks mode</a>
- <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
@@ -94300,16 +94287,8 @@
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
+ <!-- no-quirks and limited-quirks modes only->
+ <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
@@ -94318,21 +94297,26 @@
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
+ <!-- no-quirks and limited-quirks modes only->
+ <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><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>
+ <!-- no-quirks and limited-quirks modes only->
+ <dt>If the element is an <code>input</code> element that does not <span
+ title="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
+ </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
@@ -94340,32 +94324,36 @@
access to the context menu that would have come up if the user interacted with the actual
image.</p>
- <hr><p>All animated images with the same <a href=#absolute-url>absolute URL</a> and the same image data are
+ <hr>
+
+ <p>All animated images with the same <span>absolute URL</span> and the same image data are
expected to be rendered synchronized to the same timeline as a group, with the timeline starting
at the time of the most recent addition to the group.</p>
- <p class=note>In other words, the animation loop of an animated image is restarted each time
- another image with the same <a href=#absolute-url>absolute URL</a> and image data begins to animate, e.g. after
+ <p class="note">In other words, the animation loop of an animated image is restarted each time
+ another image with the same <span>absolute URL</span> and image data begins to animate, e.g. after
being inserted into the document.</p>
- <hr><p>The following CSS rules are expected to apply when the <code><a href=#document>Document</a></code> is in <a href=#quirks-mode>quirks
- mode</a>:</p>
+ <hr>
- <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
+ <p>The following CSS rules are expected to apply when the <code>Document</code> is in <span>quirks
+ mode</span>:</p>
+ <pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
+
img[align=left i] { margin-right: 3px; }
img[align=right i] { margin-left: 3px; }</pre>
</div>
- <div class=impl>
+ <div class="impl">
- <h4 id=attributes-for-embedded-content-and-images><span class=secno>14.4.3 </span>Attributes for embedded content and images</h4>
+ <h4>Attributes for embedded content and images</h4>
- <p>The following CSS rules are expected to apply as <a href=#presentational-hints>presentational hints</a>:</p>
+ <p>The following CSS rules are expected to apply as <span>presentational hints</span>:</p>
- <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
+ <pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
iframe[frameborder=0], iframe[frameborder=no i] { border: none; }
@@ -94407,76 +94395,83 @@
vertical-align: bottom;
}</pre>
- <p>When an <code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-img-element>img</a></code>, or
- <code><a href=#the-object-element>object</a></code> element, or 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, has an <code title=attr-dim-align>align</code> attribute whose value is an
- <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code title="">center</code>" or the
+ <p>When an <code>applet</code>, <code>embed</code>, <code>iframe</code>, <code>img</code>, or
+ <code>object</code> element, or an <code>input</code> element whose <code
+ title="attr-input-type">type</code> attribute is in the <span title="attr-input-type-image">Image
+ Button</span> state, has an <code title="attr-dim-align">align</code> attribute whose value is an
+ <span>ASCII case-insensitive</span> match for the string "<code title="">center</code>" or the
string "<code title="">middle</code>", the user agent is expected to act as if the element's
'vertical-align' property was set to a value that aligns the vertical middle of the element with
the parent element's baseline.</p>
- <p>The <code title=attr-dim-hspace>hspace</code> attribute of <code><a href=#the-applet-element>applet</a></code>,
- <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-img-element>img</a></code>, or <code><a href=#the-object-element>object</a></code> elements, and
- <code><a href=#the-input-element>input</a></code> elements with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the
- <a href="#image-button-state-(type=image)" title=attr-input-type-image>Image Button</a> state, <a href=#maps-to-the-dimension-property title="maps to the dimension
- property">maps to the dimension properties</a> 'margin-left' and 'margin-right' on the
+ <p>The <code title="attr-dim-hspace">hspace</code> attribute of <code>applet</code>,
+ <code>embed</code>, <code>iframe</code>, <code>img</code>, or <code>object</code> elements, and
+ <code>input</code> elements with a <code title="attr-input-type">type</code> attribute in the
+ <span title="attr-input-type-image">Image Button</span> state, <span title="maps to the dimension
+ property">maps to the dimension properties</span> 'margin-left' and 'margin-right' on the
element.</p>
- <p>The <code title=attr-dim-vspace>vspace</code> attribute of <code><a href=#the-applet-element>applet</a></code>,
- <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-img-element>img</a></code>, or <code><a href=#the-object-element>object</a></code> elements, and
- <code><a href=#the-input-element>input</a></code> elements with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the
- <a href="#image-button-state-(type=image)" title=attr-input-type-image>Image Button</a> state, <a href=#maps-to-the-dimension-property title="maps to the dimension
- property">maps to the dimension properties</a> 'margin-top' and 'margin-bottom' on the
+ <p>The <code title="attr-dim-vspace">vspace</code> attribute of <code>applet</code>,
+ <code>embed</code>, <code>iframe</code>, <code>img</code>, or <code>object</code> elements, and
+ <code>input</code> elements with a <code title="attr-input-type">type</code> attribute in the
+ <span title="attr-input-type-image">Image Button</span> state, <span title="maps to the dimension
+ property">maps to the dimension properties</span> 'margin-top' and 'margin-bottom' on the
element.</p>
- <p>When an <code><a href=#the-img-element>img</a></code> element, <code><a href=#the-object-element>object</a></code> element, or <code><a href=#the-input-element>input</a></code> element
- with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href="#image-button-state-(type=image)" title=attr-input-type-image>Image Button</a> state has a <code title=attr-dim-border>border</code> attribute whose value, when parsed using the <a href=#rules-for-parsing-non-negative-integers>rules for
- parsing non-negative integers</a>, is found to be a number greater than zero, the user agent is
- expected to use the parsed value for eight <a href=#presentational-hints>presentational hints</a>: four setting the
+ <p>When an <code>img</code> element, <code>object</code> element, or <code>input</code> element
+ with a <code title="attr-input-type">type</code> attribute in the <span
+ title="attr-input-type-image">Image Button</span> state has a <code
+ title="attr-dim-border">border</code> attribute whose value, when parsed using the <span>rules for
+ parsing non-negative integers</span>, is found to be a number greater than zero, the user agent is
+ expected to use the parsed value for eight <span>presentational hints</span>: four setting the
parsed value as a pixel length for the element's 'border-top-width', 'border-right-width',
'border-bottom-width', and 'border-left-width' properties, and four setting the element's
'border-top-style', 'border-right-style', 'border-bottom-style', and 'border-left-style'
properties to the value 'solid'.</p>
- <p id=dimRendering>The <code title=attr-dim-width><a href=#attr-dim-width>width</a></code> and <code title=attr-dim-height><a href=#attr-dim-height>height</a></code> attributes on <code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-embed-element>embed</a></code>,
- <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-object-element>object</a></code> or <code><a href=#the-video-element>video</a></code> elements, and <code><a href=#the-input-element>input</a></code>
- elements with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href="#image-button-state-(type=image)" title=attr-input-type-image>Image Button</a> state and that either represents an image or
- that the user expects will eventually represent an image, <a href=#maps-to-the-dimension-property title="maps to the dimension
- property">map to the dimension properties</a> 'width' and 'height' on the element
+ <p id="dimRendering">The <code title="attr-dim-width">width</code> and <code
+ title="attr-dim-height">height</code> attributes on <code>applet</code>, <code>embed</code>,
+ <code>iframe</code>, <code>object</code> or <code>video</code> elements, and <code>input</code>
+ elements with a <code title="attr-input-type">type</code> attribute in the <span
+ title="attr-input-type-image">Image Button</span> state and that either represents an image or
+ that the user expects will eventually represent an image, <span title="maps to the dimension
+ property">map to the dimension properties</span> 'width' and 'height' on the element
respectively.</p>
</div>
- <div class=impl>
+ <div class="impl">
- <h4 id=image-maps-0><span class=secno>14.4.4 </span>Image maps</h4>
+ <h4>Image maps</h4>
- <p>Shapes on an <a href=#image-map>image map</a> are expected to act, for the purpose of the CSS cascade, as
- elements independent of the original <code><a href=#the-area-element>area</a></code> element that happen to match the same style
- rules but inherit from the <code><a href=#the-img-element>img</a></code> or <code><a href=#the-object-element>object</a></code> element.</p>
+ <p>Shapes on an <span>image map</span> are expected to act, for the purpose of the CSS cascade, as
+ elements independent of the original <code>area</code> element that happen to match the same style
+ rules but inherit from the <code>img</code> or <code>object</code> element.</p>
<p>For the purposes of the rendering, only the 'cursor' property is expected to have any effect on
the shape.</p>
- <p class=example>Thus, for example, if an <code><a href=#the-area-element>area</a></code> element has a <code title=attr-style><a href=#the-style-attribute>style</a></code> attribute that sets the 'cursor' property to 'help', then when the
+ <p class="example">Thus, for example, if an <code>area</code> element has a <code
+ title="attr-style">style</code> attribute that sets the 'cursor' property to 'help', then when the
user designates that shape, the cursor would change to a Help cursor.</p>
- <p class=example>Similarly, if an <code><a href=#the-area-element>area</a></code> element had a CSS rule that set its 'cursor'
+ <p class="example">Similarly, if an <code>area</code> element had a CSS rule that set its 'cursor'
property to 'inherit' (or if no rule setting the 'cursor' property matched the element at all),
- the shape's cursor would be inherited from the <code><a href=#the-img-element>img</a></code> or <code><a href=#the-object-element>object</a></code> element of
- the <a href=#image-map>image map</a>, not from the parent of the <code><a href=#the-area-element>area</a></code> element.</p>
+ the shape's cursor would be inherited from the <code>img</code> or <code>object</code> element of
+ the <span>image map</span>, not from the parent of the <code>area</code> element.</p>
</div>
- <div class=impl>
+ <div class="impl">
- <h3 id=bindings><span class=secno>14.5 </span>Bindings</h3>
+ <h3>Bindings</h3>
- <h4 id=introduction-14><span class=secno>14.5.1 </span>Introduction</h4>
+ <h4>Introduction</h4>
- <p>A number of elements have their rendering defined in terms of the 'binding' property. <a href=#refsBECSS>[BECSS]</a></p>
+ <p>A number of elements have their rendering defined in terms of the 'binding' property. <a
+ href="#refsBECSS">[BECSS]</a></p>
<p>The CSS snippets below set the 'binding' property to a user-agent-defined value, represented
below by keywords like <code title=""><i title="">button</i></code>. The rules then described for
@@ -94486,63 +94481,63 @@
<p>Exactly how the bindings are implemented is not specified by this specification. User agents
are encouraged to make their bindings set the 'appearance' CSS property appropriately to achieve
platform-native appearances for widgets, and are expected to implement any relevant animations,
- etc, that are appropriate for the platform. <a href=#refsCSSUI>[CSSUI]</a></p>
+ etc, that are appropriate for the platform. <a href="#refsCSSUI">[CSSUI]</a></p>
</div>
- <div class=impl>
+ <div class="impl">
- <h4 id=the-button-element-0><span class=secno>14.5.2 </span>The <code><a href=#the-button-element>button</a></code> element</h4>
+ <h4>The <code>button</code> element</h4>
- <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
+ <pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
button { binding: <i title="">button</i>; }</pre>
- <p>When the <i title="">button</i> binding applies to a <code><a href=#the-button-element>button</a></code> element, the element
+ <p>When the <i title="">button</i> binding applies to a <code>button</code> element, the element
is expected to render as an 'inline-block' box rendered as a button whose contents are the
contents of the element.</p>
- <p>When the <code><a href=#the-button-element>button</a></code> element's <code title=attr-button-type><a href=#attr-button-type>type</a></code> attribute is
- in the <a href=#attr-button-type-menu-state title=attr-button-type-menu-state>Menu</a> state, the user agent is expected to
+ <p>When the <code>button</code> element's <code title="attr-button-type">type</code> attribute is
+ in the <span title="attr-button-type-menu-state">Menu</span> state, the user agent is expected to
indicate that activating the element will display a menu, e.g. by displaying a down-pointing
triangle after the button's label.</p>
</div>
- <div class=impl>
+ <div class="impl">
- <h4 id=the-details-element-0><span class=secno>14.5.3 </span>The <code><a href=#the-details-element>details</a></code> element</h4>
+ <h4>The <code>details</code> element</h4>
- <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
+ <pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
details { binding: <i title="">details</i>; }</pre>
- <p>When the <i title="">details</i> binding applies to a <code><a href=#the-details-element>details</a></code> element, the element
+ <p>When the <i title="">details</i> binding applies to a <code>details</code> element, the element
is expected to render as a 'block' box with its 'padding-left' property set to '40px' for
- left-to-right elements (<a href=#ltr-specific>LTR-specific</a>) and with its 'padding-right' property set to
+ left-to-right elements (<span>LTR-specific</span>) and with its 'padding-right' property set to
'40px' for right-to-left elements. The element's shadow tree is expected to take the element's
- first child <code><a href=#the-summary-element>summary</a></code> element, if any, and place it in a first 'block' box container,
+ first child <code>summary</code> element, if any, and place it in a first 'block' box container,
and then take the element's remaining descendants, if any, and place them in a second 'block' box
container.</p>
<p>The first container is expected to contain at least one line box, and that line box is expected
to contain a disclosure widget (typically a triangle), horizontally positioned within the left
- padding of the <code><a href=#the-details-element>details</a></code> element. That widget is expected to allow the user to request
+ padding of the <code>details</code> element. That widget is expected to allow the user to request
that the details be shown or hidden.</p>
<p>The second container is expected to have its 'overflow' property set to 'hidden'. When the
- <code><a href=#the-details-element>details</a></code> element does not have an <code title=attr-details-open><a href=#attr-details-open>open</a></code>
+ <code>details</code> element does not have an <code title="attr-details-open">open</code>
attribute, this second container is expected to be removed from the rendering.</p>
<!-- http://mail.gnome.org/archives/usability/2006-June/msg00015.html -->
- </div>
+ </dl></div>
<div class=impl>
- <h4 id=the-input-element-as-a-text-entry-widget><span class=secno>14.5.4 </span>The <code><a href=#the-input-element>input</a></code> element as a text entry widget</h4>
+ <h4 id=the-input-element-as-a-text-entry-widget><span class=secno>14.4.3 </span>The <code><a href=#the-input-element>input</a></code> element as a text entry widget</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
@@ -94584,7 +94579,7 @@
<div class=impl>
- <h4 id=the-input-element-as-domain-specific-widgets><span class=secno>14.5.5 </span>The <code><a href=#the-input-element>input</a></code> element as domain-specific widgets</h4>
+ <h4 id=the-input-element-as-domain-specific-widgets><span class=secno>14.4.4 </span>The <code><a href=#the-input-element>input</a></code> element as domain-specific widgets</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
@@ -94632,7 +94627,7 @@
<div class=impl>
- <h4 id=the-input-element-as-a-range-control><span class=secno>14.5.6 </span>The <code><a href=#the-input-element>input</a></code> element as a range control</h4>
+ <h4 id=the-input-element-as-a-range-control><span class=secno>14.4.5 </span>The <code><a href=#the-input-element>input</a></code> element as a range control</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
@@ -94660,7 +94655,7 @@
<div class=impl>
- <h4 id=the-input-element-as-a-color-well><span class=secno>14.5.7 </span>The <code><a href=#the-input-element>input</a></code> element as a color well</h4>
+ <h4 id=the-input-element-as-a-color-well><span class=secno>14.4.6 </span>The <code><a href=#the-input-element>input</a></code> element as a color well</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
@@ -94680,7 +94675,7 @@
<div class=impl>
- <h4 id=the-input-element-as-a-checkbox-and-radio-button-widgets><span class=secno>14.5.8 </span>The <code><a href=#the-input-element>input</a></code> element as a checkbox and radio button widgets</h4>
+ <h4 id=the-input-element-as-a-checkbox-and-radio-button-widgets><span class=secno>14.4.7 </span>The <code><a href=#the-input-element>input</a></code> element as a checkbox and radio button widgets</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
@@ -94700,7 +94695,7 @@
<div class=impl>
- <h4 id=the-input-element-as-a-file-upload-control><span class=secno>14.5.9 </span>The <code><a href=#the-input-element>input</a></code> element as a file upload control</h4>
+ <h4 id=the-input-element-as-a-file-upload-control><span class=secno>14.4.8 </span>The <code><a href=#the-input-element>input</a></code> element as a file upload control</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
@@ -94716,7 +94711,7 @@
<div class=impl>
- <h4 id=the-input-element-as-a-button><span class=secno>14.5.10 </span>The <code><a href=#the-input-element>input</a></code> element as a button</h4>
+ <h4 id=the-input-element-as-a-button><span class=secno>14.4.9 </span>The <code><a href=#the-input-element>input</a></code> element as a button</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
@@ -94737,7 +94732,7 @@
<div class=impl>
- <h4 id=the-marquee-element-0><span class=secno>14.5.11 </span>The <code><a href=#the-marquee-element>marquee</a></code> element</h4>
+ <h4 id=the-marquee-element-0><span class=secno>14.4.10 </span>The <code><a href=#the-marquee-element>marquee</a></code> element</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
@@ -94875,7 +94870,7 @@
<div class=impl>
- <h4 id=the-meter-element-0><span class=secno>14.5.12 </span>The <code><a href=#the-meter-element>meter</a></code> element</h4>
+ <h4 id=the-meter-element-0><span class=secno>14.4.11 </span>The <code><a href=#the-meter-element>meter</a></code> element</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
@@ -94901,7 +94896,7 @@
<div class=impl>
- <h4 id=the-progress-element-0><span class=secno>14.5.13 </span>The <code><a href=#the-progress-element>progress</a></code> element</h4>
+ <h4 id=the-progress-element-0><span class=secno>14.4.12 </span>The <code><a href=#the-progress-element>progress</a></code> element</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
@@ -94939,7 +94934,7 @@
<div class=impl>
- <h4 id=the-select-element-0><span class=secno>14.5.14 </span>The <code><a href=#the-select-element>select</a></code> element</h4>
+ <h4 id=the-select-element-0><span class=secno>14.4.13 </span>The <code><a href=#the-select-element>select</a></code> element</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
@@ -94992,7 +94987,7 @@
<div class=impl>
- <h4 id=the-textarea-element-0><span class=secno>14.5.15 </span>The <code><a href=#the-textarea-element>textarea</a></code> element</h4>
+ <h4 id=the-textarea-element-0><span class=secno>14.4.14 </span>The <code><a href=#the-textarea-element>textarea</a></code> element</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
@@ -95037,7 +95032,7 @@
<div class=impl>
- <h4 id=the-keygen-element-0><span class=secno>14.5.16 </span>The <code><a href=#the-keygen-element>keygen</a></code> element</h4>
+ <h4 id=the-keygen-element-0><span class=secno>14.4.15 </span>The <code><a href=#the-keygen-element>keygen</a></code> element</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
@@ -95053,7 +95048,7 @@
<div class=impl>
- <h3 id=frames-and-framesets><span class=secno>14.6 </span>Frames and framesets</h3>
+ <h3 id=frames-and-framesets><span class=secno>14.5 </span>Frames and framesets</h3>
<p>User agent are expected to render <code><a href=#frameset>frameset</a></code> elements as a box with the height and
width of the viewport, with a surface rendered according to the following layout algorithm:</p>
@@ -95292,9 +95287,9 @@
<div class=impl>
- <h3 id=interactive-media><span class=secno>14.7 </span>Interactive media</h3>
+ <h3 id=interactive-media><span class=secno>14.6 </span>Interactive media</h3>
- <h4 id=links,-forms,-and-navigation><span class=secno>14.7.1 </span>Links, forms, and navigation</h4>
+ <h4 id=links,-forms,-and-navigation><span class=secno>14.6.1 </span>Links, forms, and navigation</h4>
<p>User agents are expected to allow the user to control aspects of <a href=#hyperlink>hyperlink</a>
activation and <a href=#form-submission>form submission</a>, such as which <a href=#browsing-context>browsing context</a> is to be
@@ -95323,7 +95318,7 @@
- <h4 id=the-title-attribute-0><span class=secno>14.7.2 </span>The <code title=attr-title><a href=#attr-title>title</a></code> attribute</h4>
+ <h4 id=the-title-attribute-0><span class=secno>14.6.2 </span>The <code title=attr-title><a href=#attr-title>title</a></code> attribute</h4>
<p>User agents are expected to expose the <a href=#advisory-information>advisory information</a> of elements upon user
request, and to make the user aware of the presence of such information.</p>
@@ -95357,7 +95352,7 @@
</div>
- <h4 id=editing-hosts><span class=secno>14.7.3 </span>Editing hosts</h4>
+ <h4 id=editing-hosts><span class=secno>14.6.3 </span>Editing hosts</h4>
<p>The current text editing caret (i.e. the <a href=#active-range>active range</a>, if it is empty and in an
<a href=#editing-host>editing host</a>), if any, is expected to act like an inline replaced element with the
@@ -95369,7 +95364,7 @@
- <h4 id=text-rendered-in-native-user-interfaces><span class=secno>14.7.4 </span>Text rendered in native user interfaces</h4>
+ <h4 id=text-rendered-in-native-user-interfaces><span class=secno>14.6.4 </span>Text rendered in native user interfaces</h4>
<p>User agents are expected to honor the Unicode semantics of text that is exposed in user
interfaces, for example supporting the bidirectional algorithm in text shown in dialogs, title
@@ -95492,7 +95487,7 @@
- <h3 id=print-media><span class=secno>14.8 </span>Print media</h3>
+ <h3 id=print-media><span class=secno>14.7 </span>Print media</h3>
<p>User agents are expected to allow the user to request the opportunity to <dfn id=obtain-a-physical-form>obtain a physical
form</dfn> (or a representation of a physical form) of a <code><a href=#document>Document</a></code>. For example,
@@ -95504,7 +95499,7 @@
- <h3 id=unstyled-xml-documents><span class=secno>14.9 </span>Unstyled XML documents</h3>
+ <h3 id=unstyled-xml-documents><span class=secno>14.8 </span>Unstyled XML documents</h3>
<!-- http://hixie.ch/tests/evil/xml/ -->
Modified: index
===================================================================
--- index 2013-11-13 22:36:22 UTC (rev 8280)
+++ index 2013-11-13 22:42:18 UTC (rev 8281)
@@ -1386,35 +1386,28 @@
<ol>
<li><a href=#embedded-content-2><span class=secno>14.4.1 </span>Embedded content</a></li>
<li><a href=#images-0><span class=secno>14.4.2 </span>Images</a></li>
- <li><a href=#attributes-for-embedded-content-and-images><span class=secno>14.4.3 </span>Attributes for embedded content and images</a></li>
- <li><a href=#image-maps-0><span class=secno>14.4.4 </span>Image maps</a></ol></li>
- <li><a href=#bindings><span class=secno>14.5 </span>Bindings</a>
+ <li><a href=#the-input-element-as-a-text-entry-widget><span class=secno>14.4.3 </span>The <code>input</code> element as a text entry widget</a></li>
+ <li><a href=#the-input-element-as-domain-specific-widgets><span class=secno>14.4.4 </span>The <code>input</code> element as domain-specific widgets</a></li>
+ <li><a href=#the-input-element-as-a-range-control><span class=secno>14.4.5 </span>The <code>input</code> element as a range control</a></li>
+ <li><a href=#the-input-element-as-a-color-well><span class=secno>14.4.6 </span>The <code>input</code> element as a color well</a></li>
+ <li><a href=#the-input-element-as-a-checkbox-and-radio-button-widgets><span class=secno>14.4.7 </span>The <code>input</code> element as a checkbox and radio button widgets</a></li>
+ <li><a href=#the-input-element-as-a-file-upload-control><span class=secno>14.4.8 </span>The <code>input</code> element as a file upload control</a></li>
+ <li><a href=#the-input-element-as-a-button><span class=secno>14.4.9 </span>The <code>input</code> element as a button</a></li>
+ <li><a href=#the-marquee-element-0><span class=secno>14.4.10 </span>The <code>marquee</code> element</a></li>
+ <li><a href=#the-meter-element-0><span class=secno>14.4.11 </span>The <code>meter</code> element</a></li>
+ <li><a href=#the-progress-element-0><span class=secno>14.4.12 </span>The <code>progress</code> element</a></li>
+ <li><a href=#the-select-element-0><span class=secno>14.4.13 </span>The <code>select</code> element</a></li>
+ <li><a href=#the-textarea-element-0><span class=secno>14.4.14 </span>The <code>textarea</code> element</a></li>
+ <li><a href=#the-keygen-element-0><span class=secno>14.4.15 </span>The <code>keygen</code> element</a></ol></li>
+ <li><a href=#frames-and-framesets><span class=secno>14.5 </span>Frames and framesets</a></li>
+ <li><a href=#interactive-media><span class=secno>14.6 </span>Interactive media</a>
<ol>
- <li><a href=#introduction-14><span class=secno>14.5.1 </span>Introduction</a></li>
- <li><a href=#the-button-element-0><span class=secno>14.5.2 </span>The <code>button</code> element</a></li>
- <li><a href=#the-details-element-0><span class=secno>14.5.3 </span>The <code>details</code> element</a></li>
- <li><a href=#the-input-element-as-a-text-entry-widget><span class=secno>14.5.4 </span>The <code>input</code> element as a text entry widget</a></li>
- <li><a href=#the-input-element-as-domain-specific-widgets><span class=secno>14.5.5 </span>The <code>input</code> element as domain-specific widgets</a></li>
- <li><a href=#the-input-element-as-a-range-control><span class=secno>14.5.6 </span>The <code>input</code> element as a range control</a></li>
- <li><a href=#the-input-element-as-a-color-well><span class=secno>14.5.7 </span>The <code>input</code> element as a color well</a></li>
- <li><a href=#the-input-element-as-a-checkbox-and-radio-button-widgets><span class=secno>14.5.8 </span>The <code>input</code> element as a checkbox and radio button widgets</a></li>
- <li><a href=#the-input-element-as-a-file-upload-control><span class=secno>14.5.9 </span>The <code>input</code> element as a file upload control</a></li>
- <li><a href=#the-input-element-as-a-button><span class=secno>14.5.10 </span>The <code>input</code> element as a button</a></li>
- <li><a href=#the-marquee-element-0><span class=secno>14.5.11 </span>The <code>marquee</code> element</a></li>
- <li><a href=#the-meter-element-0><span class=secno>14.5.12 </span>The <code>meter</code> element</a></li>
- <li><a href=#the-progress-element-0><span class=secno>14.5.13 </span>The <code>progress</code> element</a></li>
- <li><a href=#the-select-element-0><span class=secno>14.5.14 </span>The <code>select</code> element</a></li>
- <li><a href=#the-textarea-element-0><span class=secno>14.5.15 </span>The <code>textarea</code> element</a></li>
- <li><a href=#the-keygen-element-0><span class=secno>14.5.16 </span>The <code>keygen</code> element</a></ol></li>
- <li><a href=#frames-and-framesets><span class=secno>14.6 </span>Frames and framesets</a></li>
- <li><a href=#interactive-media><span class=secno>14.7 </span>Interactive media</a>
- <ol>
- <li><a href=#links,-forms,-and-navigation><span class=secno>14.7.1 </span>Links, forms, and navigation</a></li>
- <li><a href=#the-title-attribute-0><span class=secno>14.7.2 </span>The <code title=attr-title>title</code> attribute</a></li>
- <li><a href=#editing-hosts><span class=secno>14.7.3 </span>Editing hosts</a></li>
- <li><a href=#text-rendered-in-native-user-interfaces><span class=secno>14.7.4 </span>Text rendered in native user interfaces</a></ol></li>
- <li><a href=#print-media><span class=secno>14.8 </span>Print media</a></li>
- <li><a href=#unstyled-xml-documents><span class=secno>14.9 </span>Unstyled XML documents</a></ol></li>
+ <li><a href=#links,-forms,-and-navigation><span class=secno>14.6.1 </span>Links, forms, and navigation</a></li>
+ <li><a href=#the-title-attribute-0><span class=secno>14.6.2 </span>The <code title=attr-title>title</code> attribute</a></li>
+ <li><a href=#editing-hosts><span class=secno>14.6.3 </span>Editing hosts</a></li>
+ <li><a href=#text-rendered-in-native-user-interfaces><span class=secno>14.6.4 </span>Text rendered in native user interfaces</a></ol></li>
+ <li><a href=#print-media><span class=secno>14.7 </span>Print media</a></li>
+ <li><a href=#unstyled-xml-documents><span class=secno>14.8 </span>Unstyled XML documents</a></ol></li>
<li><a href=#obsolete><span class=secno>15 </span>Obsolete features</a>
<ol>
<li><a href=#obsolete-but-conforming-features><span class=secno>15.1 </span>Obsolete but conforming features</a>
@@ -94279,19 +94272,13 @@
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
+ <ul><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, 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 has no <code title="">alt</code> attribute<!-- attr-img-alt, attr-input-alt -->, or
- <li>the element is an <code>input</code> element and has no <code
- title="attr-input-alt">alt</code> attribute, or
--->
+ <li>the <code><a href=#document>Document</a></code> is in <a href=#quirks-mode>quirks mode</a>
- <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
@@ -94300,16 +94287,8 @@
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
+ <!-- no-quirks and limited-quirks modes only->
+ <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
@@ -94318,21 +94297,26 @@
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
+ <!-- no-quirks and limited-quirks modes only->
+ <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><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>
+ <!-- no-quirks and limited-quirks modes only->
+ <dt>If the element is an <code>input</code> element that does not <span
+ title="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
+ </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
@@ -94340,32 +94324,36 @@
access to the context menu that would have come up if the user interacted with the actual
image.</p>
- <hr><p>All animated images with the same <a href=#absolute-url>absolute URL</a> and the same image data are
+ <hr>
+
+ <p>All animated images with the same <span>absolute URL</span> and the same image data are
expected to be rendered synchronized to the same timeline as a group, with the timeline starting
at the time of the most recent addition to the group.</p>
- <p class=note>In other words, the animation loop of an animated image is restarted each time
- another image with the same <a href=#absolute-url>absolute URL</a> and image data begins to animate, e.g. after
+ <p class="note">In other words, the animation loop of an animated image is restarted each time
+ another image with the same <span>absolute URL</span> and image data begins to animate, e.g. after
being inserted into the document.</p>
- <hr><p>The following CSS rules are expected to apply when the <code><a href=#document>Document</a></code> is in <a href=#quirks-mode>quirks
- mode</a>:</p>
+ <hr>
- <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
+ <p>The following CSS rules are expected to apply when the <code>Document</code> is in <span>quirks
+ mode</span>:</p>
+ <pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
+
img[align=left i] { margin-right: 3px; }
img[align=right i] { margin-left: 3px; }</pre>
</div>
- <div class=impl>
+ <div class="impl">
- <h4 id=attributes-for-embedded-content-and-images><span class=secno>14.4.3 </span>Attributes for embedded content and images</h4>
+ <h4>Attributes for embedded content and images</h4>
- <p>The following CSS rules are expected to apply as <a href=#presentational-hints>presentational hints</a>:</p>
+ <p>The following CSS rules are expected to apply as <span>presentational hints</span>:</p>
- <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
+ <pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
iframe[frameborder=0], iframe[frameborder=no i] { border: none; }
@@ -94407,76 +94395,83 @@
vertical-align: bottom;
}</pre>
- <p>When an <code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-img-element>img</a></code>, or
- <code><a href=#the-object-element>object</a></code> element, or 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, has an <code title=attr-dim-align>align</code> attribute whose value is an
- <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code title="">center</code>" or the
+ <p>When an <code>applet</code>, <code>embed</code>, <code>iframe</code>, <code>img</code>, or
+ <code>object</code> element, or an <code>input</code> element whose <code
+ title="attr-input-type">type</code> attribute is in the <span title="attr-input-type-image">Image
+ Button</span> state, has an <code title="attr-dim-align">align</code> attribute whose value is an
+ <span>ASCII case-insensitive</span> match for the string "<code title="">center</code>" or the
string "<code title="">middle</code>", the user agent is expected to act as if the element's
'vertical-align' property was set to a value that aligns the vertical middle of the element with
the parent element's baseline.</p>
- <p>The <code title=attr-dim-hspace>hspace</code> attribute of <code><a href=#the-applet-element>applet</a></code>,
- <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-img-element>img</a></code>, or <code><a href=#the-object-element>object</a></code> elements, and
- <code><a href=#the-input-element>input</a></code> elements with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the
- <a href="#image-button-state-(type=image)" title=attr-input-type-image>Image Button</a> state, <a href=#maps-to-the-dimension-property title="maps to the dimension
- property">maps to the dimension properties</a> 'margin-left' and 'margin-right' on the
+ <p>The <code title="attr-dim-hspace">hspace</code> attribute of <code>applet</code>,
+ <code>embed</code>, <code>iframe</code>, <code>img</code>, or <code>object</code> elements, and
+ <code>input</code> elements with a <code title="attr-input-type">type</code> attribute in the
+ <span title="attr-input-type-image">Image Button</span> state, <span title="maps to the dimension
+ property">maps to the dimension properties</span> 'margin-left' and 'margin-right' on the
element.</p>
- <p>The <code title=attr-dim-vspace>vspace</code> attribute of <code><a href=#the-applet-element>applet</a></code>,
- <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-img-element>img</a></code>, or <code><a href=#the-object-element>object</a></code> elements, and
- <code><a href=#the-input-element>input</a></code> elements with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the
- <a href="#image-button-state-(type=image)" title=attr-input-type-image>Image Button</a> state, <a href=#maps-to-the-dimension-property title="maps to the dimension
- property">maps to the dimension properties</a> 'margin-top' and 'margin-bottom' on the
+ <p>The <code title="attr-dim-vspace">vspace</code> attribute of <code>applet</code>,
+ <code>embed</code>, <code>iframe</code>, <code>img</code>, or <code>object</code> elements, and
+ <code>input</code> elements with a <code title="attr-input-type">type</code> attribute in the
+ <span title="attr-input-type-image">Image Button</span> state, <span title="maps to the dimension
+ property">maps to the dimension properties</span> 'margin-top' and 'margin-bottom' on the
element.</p>
- <p>When an <code><a href=#the-img-element>img</a></code> element, <code><a href=#the-object-element>object</a></code> element, or <code><a href=#the-input-element>input</a></code> element
- with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href="#image-button-state-(type=image)" title=attr-input-type-image>Image Button</a> state has a <code title=attr-dim-border>border</code> attribute whose value, when parsed using the <a href=#rules-for-parsing-non-negative-integers>rules for
- parsing non-negative integers</a>, is found to be a number greater than zero, the user agent is
- expected to use the parsed value for eight <a href=#presentational-hints>presentational hints</a>: four setting the
+ <p>When an <code>img</code> element, <code>object</code> element, or <code>input</code> element
+ with a <code title="attr-input-type">type</code> attribute in the <span
+ title="attr-input-type-image">Image Button</span> state has a <code
+ title="attr-dim-border">border</code> attribute whose value, when parsed using the <span>rules for
+ parsing non-negative integers</span>, is found to be a number greater than zero, the user agent is
+ expected to use the parsed value for eight <span>presentational hints</span>: four setting the
parsed value as a pixel length for the element's 'border-top-width', 'border-right-width',
'border-bottom-width', and 'border-left-width' properties, and four setting the element's
'border-top-style', 'border-right-style', 'border-bottom-style', and 'border-left-style'
properties to the value 'solid'.</p>
- <p id=dimRendering>The <code title=attr-dim-width><a href=#attr-dim-width>width</a></code> and <code title=attr-dim-height><a href=#attr-dim-height>height</a></code> attributes on <code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-embed-element>embed</a></code>,
- <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-object-element>object</a></code> or <code><a href=#the-video-element>video</a></code> elements, and <code><a href=#the-input-element>input</a></code>
- elements with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href="#image-button-state-(type=image)" title=attr-input-type-image>Image Button</a> state and that either represents an image or
- that the user expects will eventually represent an image, <a href=#maps-to-the-dimension-property title="maps to the dimension
- property">map to the dimension properties</a> 'width' and 'height' on the element
+ <p id="dimRendering">The <code title="attr-dim-width">width</code> and <code
+ title="attr-dim-height">height</code> attributes on <code>applet</code>, <code>embed</code>,
+ <code>iframe</code>, <code>object</code> or <code>video</code> elements, and <code>input</code>
+ elements with a <code title="attr-input-type">type</code> attribute in the <span
+ title="attr-input-type-image">Image Button</span> state and that either represents an image or
+ that the user expects will eventually represent an image, <span title="maps to the dimension
+ property">map to the dimension properties</span> 'width' and 'height' on the element
respectively.</p>
</div>
- <div class=impl>
+ <div class="impl">
- <h4 id=image-maps-0><span class=secno>14.4.4 </span>Image maps</h4>
+ <h4>Image maps</h4>
- <p>Shapes on an <a href=#image-map>image map</a> are expected to act, for the purpose of the CSS cascade, as
- elements independent of the original <code><a href=#the-area-element>area</a></code> element that happen to match the same style
- rules but inherit from the <code><a href=#the-img-element>img</a></code> or <code><a href=#the-object-element>object</a></code> element.</p>
+ <p>Shapes on an <span>image map</span> are expected to act, for the purpose of the CSS cascade, as
+ elements independent of the original <code>area</code> element that happen to match the same style
+ rules but inherit from the <code>img</code> or <code>object</code> element.</p>
<p>For the purposes of the rendering, only the 'cursor' property is expected to have any effect on
the shape.</p>
- <p class=example>Thus, for example, if an <code><a href=#the-area-element>area</a></code> element has a <code title=attr-style><a href=#the-style-attribute>style</a></code> attribute that sets the 'cursor' property to 'help', then when the
+ <p class="example">Thus, for example, if an <code>area</code> element has a <code
+ title="attr-style">style</code> attribute that sets the 'cursor' property to 'help', then when the
user designates that shape, the cursor would change to a Help cursor.</p>
- <p class=example>Similarly, if an <code><a href=#the-area-element>area</a></code> element had a CSS rule that set its 'cursor'
+ <p class="example">Similarly, if an <code>area</code> element had a CSS rule that set its 'cursor'
property to 'inherit' (or if no rule setting the 'cursor' property matched the element at all),
- the shape's cursor would be inherited from the <code><a href=#the-img-element>img</a></code> or <code><a href=#the-object-element>object</a></code> element of
- the <a href=#image-map>image map</a>, not from the parent of the <code><a href=#the-area-element>area</a></code> element.</p>
+ the shape's cursor would be inherited from the <code>img</code> or <code>object</code> element of
+ the <span>image map</span>, not from the parent of the <code>area</code> element.</p>
</div>
- <div class=impl>
+ <div class="impl">
- <h3 id=bindings><span class=secno>14.5 </span>Bindings</h3>
+ <h3>Bindings</h3>
- <h4 id=introduction-14><span class=secno>14.5.1 </span>Introduction</h4>
+ <h4>Introduction</h4>
- <p>A number of elements have their rendering defined in terms of the 'binding' property. <a href=#refsBECSS>[BECSS]</a></p>
+ <p>A number of elements have their rendering defined in terms of the 'binding' property. <a
+ href="#refsBECSS">[BECSS]</a></p>
<p>The CSS snippets below set the 'binding' property to a user-agent-defined value, represented
below by keywords like <code title=""><i title="">button</i></code>. The rules then described for
@@ -94486,63 +94481,63 @@
<p>Exactly how the bindings are implemented is not specified by this specification. User agents
are encouraged to make their bindings set the 'appearance' CSS property appropriately to achieve
platform-native appearances for widgets, and are expected to implement any relevant animations,
- etc, that are appropriate for the platform. <a href=#refsCSSUI>[CSSUI]</a></p>
+ etc, that are appropriate for the platform. <a href="#refsCSSUI">[CSSUI]</a></p>
</div>
- <div class=impl>
+ <div class="impl">
- <h4 id=the-button-element-0><span class=secno>14.5.2 </span>The <code><a href=#the-button-element>button</a></code> element</h4>
+ <h4>The <code>button</code> element</h4>
- <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
+ <pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
button { binding: <i title="">button</i>; }</pre>
- <p>When the <i title="">button</i> binding applies to a <code><a href=#the-button-element>button</a></code> element, the element
+ <p>When the <i title="">button</i> binding applies to a <code>button</code> element, the element
is expected to render as an 'inline-block' box rendered as a button whose contents are the
contents of the element.</p>
- <p>When the <code><a href=#the-button-element>button</a></code> element's <code title=attr-button-type><a href=#attr-button-type>type</a></code> attribute is
- in the <a href=#attr-button-type-menu-state title=attr-button-type-menu-state>Menu</a> state, the user agent is expected to
+ <p>When the <code>button</code> element's <code title="attr-button-type">type</code> attribute is
+ in the <span title="attr-button-type-menu-state">Menu</span> state, the user agent is expected to
indicate that activating the element will display a menu, e.g. by displaying a down-pointing
triangle after the button's label.</p>
</div>
- <div class=impl>
+ <div class="impl">
- <h4 id=the-details-element-0><span class=secno>14.5.3 </span>The <code><a href=#the-details-element>details</a></code> element</h4>
+ <h4>The <code>details</code> element</h4>
- <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
+ <pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
details { binding: <i title="">details</i>; }</pre>
- <p>When the <i title="">details</i> binding applies to a <code><a href=#the-details-element>details</a></code> element, the element
+ <p>When the <i title="">details</i> binding applies to a <code>details</code> element, the element
is expected to render as a 'block' box with its 'padding-left' property set to '40px' for
- left-to-right elements (<a href=#ltr-specific>LTR-specific</a>) and with its 'padding-right' property set to
+ left-to-right elements (<span>LTR-specific</span>) and with its 'padding-right' property set to
'40px' for right-to-left elements. The element's shadow tree is expected to take the element's
- first child <code><a href=#the-summary-element>summary</a></code> element, if any, and place it in a first 'block' box container,
+ first child <code>summary</code> element, if any, and place it in a first 'block' box container,
and then take the element's remaining descendants, if any, and place them in a second 'block' box
container.</p>
<p>The first container is expected to contain at least one line box, and that line box is expected
to contain a disclosure widget (typically a triangle), horizontally positioned within the left
- padding of the <code><a href=#the-details-element>details</a></code> element. That widget is expected to allow the user to request
+ padding of the <code>details</code> element. That widget is expected to allow the user to request
that the details be shown or hidden.</p>
<p>The second container is expected to have its 'overflow' property set to 'hidden'. When the
- <code><a href=#the-details-element>details</a></code> element does not have an <code title=attr-details-open><a href=#attr-details-open>open</a></code>
+ <code>details</code> element does not have an <code title="attr-details-open">open</code>
attribute, this second container is expected to be removed from the rendering.</p>
<!-- http://mail.gnome.org/archives/usability/2006-June/msg00015.html -->
- </div>
+ </dl></div>
<div class=impl>
- <h4 id=the-input-element-as-a-text-entry-widget><span class=secno>14.5.4 </span>The <code><a href=#the-input-element>input</a></code> element as a text entry widget</h4>
+ <h4 id=the-input-element-as-a-text-entry-widget><span class=secno>14.4.3 </span>The <code><a href=#the-input-element>input</a></code> element as a text entry widget</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
@@ -94584,7 +94579,7 @@
<div class=impl>
- <h4 id=the-input-element-as-domain-specific-widgets><span class=secno>14.5.5 </span>The <code><a href=#the-input-element>input</a></code> element as domain-specific widgets</h4>
+ <h4 id=the-input-element-as-domain-specific-widgets><span class=secno>14.4.4 </span>The <code><a href=#the-input-element>input</a></code> element as domain-specific widgets</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
@@ -94632,7 +94627,7 @@
<div class=impl>
- <h4 id=the-input-element-as-a-range-control><span class=secno>14.5.6 </span>The <code><a href=#the-input-element>input</a></code> element as a range control</h4>
+ <h4 id=the-input-element-as-a-range-control><span class=secno>14.4.5 </span>The <code><a href=#the-input-element>input</a></code> element as a range control</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
@@ -94660,7 +94655,7 @@
<div class=impl>
- <h4 id=the-input-element-as-a-color-well><span class=secno>14.5.7 </span>The <code><a href=#the-input-element>input</a></code> element as a color well</h4>
+ <h4 id=the-input-element-as-a-color-well><span class=secno>14.4.6 </span>The <code><a href=#the-input-element>input</a></code> element as a color well</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
@@ -94680,7 +94675,7 @@
<div class=impl>
- <h4 id=the-input-element-as-a-checkbox-and-radio-button-widgets><span class=secno>14.5.8 </span>The <code><a href=#the-input-element>input</a></code> element as a checkbox and radio button widgets</h4>
+ <h4 id=the-input-element-as-a-checkbox-and-radio-button-widgets><span class=secno>14.4.7 </span>The <code><a href=#the-input-element>input</a></code> element as a checkbox and radio button widgets</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
@@ -94700,7 +94695,7 @@
<div class=impl>
- <h4 id=the-input-element-as-a-file-upload-control><span class=secno>14.5.9 </span>The <code><a href=#the-input-element>input</a></code> element as a file upload control</h4>
+ <h4 id=the-input-element-as-a-file-upload-control><span class=secno>14.4.8 </span>The <code><a href=#the-input-element>input</a></code> element as a file upload control</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
@@ -94716,7 +94711,7 @@
<div class=impl>
- <h4 id=the-input-element-as-a-button><span class=secno>14.5.10 </span>The <code><a href=#the-input-element>input</a></code> element as a button</h4>
+ <h4 id=the-input-element-as-a-button><span class=secno>14.4.9 </span>The <code><a href=#the-input-element>input</a></code> element as a button</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
@@ -94737,7 +94732,7 @@
<div class=impl>
- <h4 id=the-marquee-element-0><span class=secno>14.5.11 </span>The <code><a href=#the-marquee-element>marquee</a></code> element</h4>
+ <h4 id=the-marquee-element-0><span class=secno>14.4.10 </span>The <code><a href=#the-marquee-element>marquee</a></code> element</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
@@ -94875,7 +94870,7 @@
<div class=impl>
- <h4 id=the-meter-element-0><span class=secno>14.5.12 </span>The <code><a href=#the-meter-element>meter</a></code> element</h4>
+ <h4 id=the-meter-element-0><span class=secno>14.4.11 </span>The <code><a href=#the-meter-element>meter</a></code> element</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
@@ -94901,7 +94896,7 @@
<div class=impl>
- <h4 id=the-progress-element-0><span class=secno>14.5.13 </span>The <code><a href=#the-progress-element>progress</a></code> element</h4>
+ <h4 id=the-progress-element-0><span class=secno>14.4.12 </span>The <code><a href=#the-progress-element>progress</a></code> element</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
@@ -94939,7 +94934,7 @@
<div class=impl>
- <h4 id=the-select-element-0><span class=secno>14.5.14 </span>The <code><a href=#the-select-element>select</a></code> element</h4>
+ <h4 id=the-select-element-0><span class=secno>14.4.13 </span>The <code><a href=#the-select-element>select</a></code> element</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
@@ -94992,7 +94987,7 @@
<div class=impl>
- <h4 id=the-textarea-element-0><span class=secno>14.5.15 </span>The <code><a href=#the-textarea-element>textarea</a></code> element</h4>
+ <h4 id=the-textarea-element-0><span class=secno>14.4.14 </span>The <code><a href=#the-textarea-element>textarea</a></code> element</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
@@ -95037,7 +95032,7 @@
<div class=impl>
- <h4 id=the-keygen-element-0><span class=secno>14.5.16 </span>The <code><a href=#the-keygen-element>keygen</a></code> element</h4>
+ <h4 id=the-keygen-element-0><span class=secno>14.4.15 </span>The <code><a href=#the-keygen-element>keygen</a></code> element</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
@@ -95053,7 +95048,7 @@
<div class=impl>
- <h3 id=frames-and-framesets><span class=secno>14.6 </span>Frames and framesets</h3>
+ <h3 id=frames-and-framesets><span class=secno>14.5 </span>Frames and framesets</h3>
<p>User agent are expected to render <code><a href=#frameset>frameset</a></code> elements as a box with the height and
width of the viewport, with a surface rendered according to the following layout algorithm:</p>
@@ -95292,9 +95287,9 @@
<div class=impl>
- <h3 id=interactive-media><span class=secno>14.7 </span>Interactive media</h3>
+ <h3 id=interactive-media><span class=secno>14.6 </span>Interactive media</h3>
- <h4 id=links,-forms,-and-navigation><span class=secno>14.7.1 </span>Links, forms, and navigation</h4>
+ <h4 id=links,-forms,-and-navigation><span class=secno>14.6.1 </span>Links, forms, and navigation</h4>
<p>User agents are expected to allow the user to control aspects of <a href=#hyperlink>hyperlink</a>
activation and <a href=#form-submission>form submission</a>, such as which <a href=#browsing-context>browsing context</a> is to be
@@ -95323,7 +95318,7 @@
- <h4 id=the-title-attribute-0><span class=secno>14.7.2 </span>The <code title=attr-title><a href=#attr-title>title</a></code> attribute</h4>
+ <h4 id=the-title-attribute-0><span class=secno>14.6.2 </span>The <code title=attr-title><a href=#attr-title>title</a></code> attribute</h4>
<p>User agents are expected to expose the <a href=#advisory-information>advisory information</a> of elements upon user
request, and to make the user aware of the presence of such information.</p>
@@ -95357,7 +95352,7 @@
</div>
- <h4 id=editing-hosts><span class=secno>14.7.3 </span>Editing hosts</h4>
+ <h4 id=editing-hosts><span class=secno>14.6.3 </span>Editing hosts</h4>
<p>The current text editing caret (i.e. the <a href=#active-range>active range</a>, if it is empty and in an
<a href=#editing-host>editing host</a>), if any, is expected to act like an inline replaced element with the
@@ -95369,7 +95364,7 @@
- <h4 id=text-rendered-in-native-user-interfaces><span class=secno>14.7.4 </span>Text rendered in native user interfaces</h4>
+ <h4 id=text-rendered-in-native-user-interfaces><span class=secno>14.6.4 </span>Text rendered in native user interfaces</h4>
<p>User agents are expected to honor the Unicode semantics of text that is exposed in user
interfaces, for example supporting the bidirectional algorithm in text shown in dialogs, title
@@ -95492,7 +95487,7 @@
- <h3 id=print-media><span class=secno>14.8 </span>Print media</h3>
+ <h3 id=print-media><span class=secno>14.7 </span>Print media</h3>
<p>User agents are expected to allow the user to request the opportunity to <dfn id=obtain-a-physical-form>obtain a physical
form</dfn> (or a representation of a physical form) of a <code><a href=#document>Document</a></code>. For example,
@@ -95504,7 +95499,7 @@
- <h3 id=unstyled-xml-documents><span class=secno>14.9 </span>Unstyled XML documents</h3>
+ <h3 id=unstyled-xml-documents><span class=secno>14.8 </span>Unstyled XML documents</h3>
<!-- http://hixie.ch/tests/evil/xml/ -->
Modified: source
===================================================================
--- source 2013-11-13 22:36:22 UTC (rev 8280)
+++ source 2013-11-13 22:42:18 UTC (rev 8281)
@@ -104865,20 +104865,14 @@
<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.
+ course, or
+ <li>the element has no <code data-x="">alt</code> attribute<!-- attr-img-alt, attr-input-alt -->, or
+
+ <li>the <code>Document</code> is in <span>quirks mode</span>
+
</ul>
</dt>
@@ -104890,15 +104884,7 @@
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>
-
-
+ <!-- no-quirks and limited-quirks modes only->
<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>
@@ -104908,6 +104894,7 @@
contexts, such an icon should be omitted.</dd>
+ <!-- no-quirks and limited-quirks modes only->
<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>
@@ -104915,6 +104902,7 @@
of further styles, this will cause the element to essentially not be rendered.)</dd>
+ <!-- no-quirks and limited-quirks modes only->
<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>
More information about the Commit-Watchers
mailing list