Skip to content

Commit

Permalink
[] (0) Filling in the rendering section: embedded content section.
Browse files Browse the repository at this point in the history 
git-svn-id: http://svn.whatwg.org/webapps@2757 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Feb 5, 2009
1 parent 0967892 commit 345fd5f
Show file tree
Hide file tree
Showing 2 changed files with 395 additions and 82 deletions.
226 changes: 183 additions & 43 deletions index
View file
Expand Up @@ -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>
Expand Down Expand Up @@ -22246,19 +22246,11 @@ function AddCloud(data, x, y) { ... }</pre>
<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 -->



Expand Down Expand Up @@ -56048,13 +56040,13 @@ td, th { padding: 1px; }</pre>
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>

Expand Down Expand Up @@ -56087,9 +56079,7 @@ td, th { padding: 1px; }</pre>

<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
Expand All @@ -56112,8 +56102,8 @@ th { text-align: center; }</pre>

<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;
Expand Down Expand Up @@ -56482,10 +56472,10 @@ table[frames=border] &gt; tfoot &gt; tr &gt; td, table[frames=border] &gt; tfoot
<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>

Expand Down Expand Up @@ -56536,7 +56526,6 @@ ul ul dl, ul ul menu, ul ul ul {
list-style-type: square;
}

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

Expand Down Expand Up @@ -56702,30 +56691,180 @@ table {

<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>
Expand All @@ -56742,6 +56881,7 @@ table {

<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) -->



Expand Down

0 comments on commit 345fd5f

Please sign in to comment.