[] (0) Filling in the rendering section: embedded content section.

git-svn-id: http://svn.whatwg.org/webapps@2757 340c8d12-0b0e-0410-8428-c7bf67bfef74

index

@@ -34,7 +34,7 @@
  <div class=head>
   <p><a class=logo href=http://www.whatwg.org/ rel=home><img alt=WHATWG src=/images/logo></a></p>
   <h1>HTML 5</h1>
   <h2 class="no-num no-toc" id=draft-recommendation-&mdash;-date:-01-jan-1901>Draft Recommendation &mdash; 4 February 2009</h2>
   <h2 class="no-num no-toc" id=draft-recommendation-&mdash;-date:-01-jan-1901>Draft Recommendation &mdash; 5 February 2009</h2>
   <p>You can take part in this work. <a href=http://www.whatwg.org/mailing-list>Join the working group's discussion list.</a></p>
   <p><strong>Web designers!</strong> We have a <a href=http://blog.whatwg.org/faq/>FAQ</a>, a <a href=http://forums.whatwg.org/>forum</a>, and a <a href=http://www.whatwg.org/mailing-list#help>help mailing list</a> for you!</p>
   <dl><dt>Multiple-page version:</dt>
  <p class=note>Basically, the dimension attributes can't be used to
  stretch the image.</p>

  <p>To parse the attributes, user agents must use the <a href=#rules-for-parsing-dimension-values>rules for
  parsing dimension values</a>. This will return either an integer
  length, a percentage value, or nothing. The user agent requirements
  for processing the values obtained from parsing these attributes are
  described <a href=#sizing-of-embedded-content title="sizing of embedded content">in the rendering
  section</a><!-- XXX xref -->. If one of these attributes, when
  parsing, returns no value, it must be treated, for the purposes of
  those requirements, as if it was not specified.</p>

  <p>The <dfn id=dom-dim-width title=dom-dim-width><code>width</code></dfn> and <dfn id=dom-dim-height title=dom-dim-height><code>height</code></dfn> DOM attributes on
  the <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-object-element>object</a></code>,
  and <code><a href=#video>video</a></code> elements must <a href=#reflect>reflect</a> the
  respective content attributes of the same name.</p>
  respective content attributes of the same name.</p> <!-- XXX check
  that this is defined right in the face of percentages -->



  elements that have corresponding <a href=#concept-cell title=concept-cell>cells</a> in the <a href=#concept-table title=concept-table>table</a> corresponding to the
  <code><a href=#the-table-element>table</a></code> element.</p>

  <p>The <code><a href=#the-table-element>table</a></code> element's <code title=attr-table-hspace>hspace</code> attribute <a href=#maps-to-the-pixel-length-property title="maps
  to the pixel length property">maps to the pixel length properties</a>
  <p>The <code><a href=#the-table-element>table</a></code> element's <code title=attr-table-hspace>hspace</code> attribute <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 <code><a href=#the-table-element>table</a></code>
  element.</p>

  <p>The <code><a href=#the-table-element>table</a></code> element's <code title=attr-table-vspace>vspace</code> attribute <a href=#maps-to-the-pixel-length-property title="maps
  to the pixel length property">maps to the pixel length properties</a>
  <p>The <code><a href=#the-table-element>table</a></code> element's <code title=attr-table-vspace>vspace</code> attribute <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 <code><a href=#the-table-element>table</a></code>
  element.</p>


  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

form { margin-bottom: 1em; }
img[align=left] { margin-right: 3px; }
img[align=right] { margin-left: 3px; }</pre>
form { margin-bottom: 1em; }</pre>

  <p>When a <code>Document</code> is in <a href=#quirks-mode>quirks mode</a>,
  margins on <a href=#html-elements>HTML elements</a> that collapse with the top or

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

table[align=left], img[align=left] { float: left; }
table[align=right], img[align=right] { float: right; }
table[align=left] { float: left; }
table[align=right] { float: right; }
table[align=center], table[align=abscenter],
table[align=abdmiddle], table[align=middle] {
  margin-left: auto; margin-right: auto;
       <td>xx-large
       <td>
      <tr><td>7
       <td>xxx-large
       <td>x<!---->xx-large
       <td><i>see below</i>
    </table><p>The 'xxx-large' value is a non-CSS value used here to indicate
    a font size one "step" larger than 'xx-large'.</p>
    </table><p>The 'x<!---->xx-large' value is a non-CSS value used here to
    indicate a font size one "step" larger than 'xx-large'.</p>

   </li>

  list-style-type: square;
}

iframe { border: 2px inset; }
table { border-style: outset; }
td, th { border-style: inset; }


  <h4 id=embedded-content-1><span class=secno>10.4.1 </span>Embedded content</h4>

  <p class=XXX>...</p>
  <p>The <code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-canvas-element>canvas</a></code>, <code><a href=#the-embed-element>embed</a></code>,
  <code><a href=#the-iframe-element>iframe</a></code>, and <code><a href=#video>video</a></code> elements are expected to
  be treated as replaced elements.</p>

  <hr><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 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>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 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 instrinsic 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>available</i> and be rendered in due course or the
  <code>Document</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 an inline element whose content is the
  text, optionally with an icon indicating that an image is
  missing.</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 an inline 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
  -->

  <!-- applet, canvas, embed, iframe, img, input type=image, object, video -->
  <!-- <code>input</code> elements whose <code title="attr-input-type">type</code> attribute is in the <span title="attr-input-type-image">Image Button</span> state -->
  <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 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 but be easily clickable, for instance 16
  pixels by 16 pixels square, or 1em by 1em if the images are
  scalable. The images are intended to indicate to the user that they
  can be used to get to whatever options the UA provides for images,
  and, where appropriate, are expected to provide access to the
  context menu that would have come up if the user interacted with the
  actual image.</p>

  <hr><p>An <code><a href=#the-object-element>object</a></code> element that <a href=#represents>represents</a> an
  image, plugin, or <a href=#nested-browsing-context>nested browsing context</a> is expected
  to be treated as a replaced element. Other <code><a href=#the-object-element>object</a></code>
  elements are expected to be treated as ordinary elements in the
  rendering model.</p>

  <hr><p>The <code><a href=#audio>audio</a></code> element, when it has a <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code> attribute, is expected
  to be treated as a replaced element about one line high, as wide as
  is necessary to expose the user agent's user interface features.</p>

  <hr><p>The following CSS rules are expected to apply:</p>

  <!--
      iframe:
        width, height = as <img>; frameborder, scrolling=as <frame>; align=as <img>; marginheight, marginwidth (int/%) (=?)
      img, input type=image, object:
        width, height (int/%); hspace, vspace => margins (int/%); border (int>=0) => border-width, with border-style: solid;
        align (left=float:left|right=float:right|top=v-a:t|bottom/baseline=v-a:b|center/middle=[1]|texttop=v-a:tt|absmiddle/abscenter=v-a:m|absbottom=v-a:b)
        [1] = position vertical middle with parent baseline
    -->
  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

  <!--
    img - how to handle alt text, img in link (no border)... Define
    that either the src="" is shown (as an image) or the alt="" is
    shown (inline) but should not ever have both at once.
  -->
iframe { border: 2px inset; }</pre>

  <hr><p>The following CSS rules are expected to apply as
  <a href=#presentational-hints>presentational hints</a>:</p>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

iframe[frameborder=0], iframe[frameborder=no] { border: none; }

applet[align=left], embed[align=left], iframe[align=left],
img[align=left], input[type=image][align=left], object[align=left] {
  float: left;
}

applet[align=right], embed[align=right], iframe[align=right],
img[align=right], input[type=image][align=right], object[align=right] {
  float: right;
}

applet[align=top], embed[align=top], iframe[align=top],
img[align=top], input[type=image][align=top], object[align=top] {
  vertical-align: top;
}

applet[align=bottom], embed[align=bottom], iframe[align=bottom],
img[align=bottom], input[type=image][align=bottom], object[align=bottom],
applet[align=baseline], embed[align=baseline], iframe[align=baseline],
img[align=baseline], input[type=image][align=baseline], object[align=baseline] {
  vertical-align: baseline;
}

applet[align=texttop], embed[align=texttop], iframe[align=texttop],
img[align=texttop], input[type=image][align=texttop], object[align=texttop] {
  vertical-align: text-top;
}

applet[align=absmiddle], embed[align=absmiddle], iframe[align=absmiddle],
img[align=absmiddle], input[type=image][align=absmiddle], object[align=absmiddle],
applet[align=abscenter], embed[align=abscenter], iframe[align=abscenter],
img[align=abscenter], input[type=image][align=abscenter], object[align=abscenter] {
  vertical-align: middle;
}

applet[align=bottom], embed[align=bottom], iframe[align=bottom],
img[align=bottom], input[type=image][align=bottom],
object[align=bottom] {
  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 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 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 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
  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 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
  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 title=attr-input-type-image>Image Button</a> state is contained
  within a <a href=#hyperlink>hyperlink</a> and 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 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>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-img-element>img</a></code>, <code><a href=#the-object-element>object</a></code> or <code><a href=#video>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 title=attr-input-type-image>Image Button</a> state, <a href=#maps-to-the-pixel-length-property title="maps to the pixel length property">map to the dimension
  properties</a> 'width' and 'height' on the element
  respectively.</p>

  <p class=XXX>Terms that need to be defined include: <dfn id=sizing-of-embedded-content>sizing
  of embedded content</dfn></p>
  <hr><p>The following CSS rules are expected to apply when the
  <code>Document</code> is in <a href=#quirks-mode>quirks mode</a>:</p>

  <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

img[align=left] { margin-right: 3px; }
img[align=right] { margin-left: 3px; }</pre>

  <!-- audio -->


  <h4 id=fragment-identifiers><span class=secno>10.4.2 </span>Fragment identifiers</h4>

  <p class=XXX>...</p>
  <!-- <frame>: bordercolor; frameborder (yes/1|no/0); marginwidth, marginheight (int/%); scrolling (yes/on/scroll|no/off/noscroll|auto) -->
  <!-- <frame>, <iframe>: scrolling (yes/on/scroll|no/off/noscroll|auto) -->