Skip to content
Permalink
Browse files
[ac] (0) Make <wbr> valid.
Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=9350

git-svn-id: http://svn.whatwg.org/webapps@4956 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
Hixie committed Apr 2, 2010
1 parent 176a9f5 commit 33fc385dc0248f1464af8d8286da1cb55d52eb9c
Showing with 222 additions and 57 deletions.
  1. +79 −27 complete.html
  2. +2 −0 images/content-venn.svg
  3. +79 −27 index
  4. +62 −3 source
@@ -435,17 +435,18 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
<li><a href=#the-p-element><span class=secno>4.5.1 </span>The <code>p</code> element</a></li>
<li><a href=#the-hr-element><span class=secno>4.5.2 </span>The <code>hr</code> element</a></li>
<li><a href=#the-br-element><span class=secno>4.5.3 </span>The <code>br</code> element</a></li>
<li><a href=#the-pre-element><span class=secno>4.5.4 </span>The <code>pre</code> element</a></li>
<li><a href=#the-blockquote-element><span class=secno>4.5.5 </span>The <code>blockquote</code> element</a></li>
<li><a href=#the-ol-element><span class=secno>4.5.6 </span>The <code>ol</code> element</a></li>
<li><a href=#the-ul-element><span class=secno>4.5.7 </span>The <code>ul</code> element</a></li>
<li><a href=#the-li-element><span class=secno>4.5.8 </span>The <code>li</code> element</a></li>
<li><a href=#the-dl-element><span class=secno>4.5.9 </span>The <code>dl</code> element</a></li>
<li><a href=#the-dt-element><span class=secno>4.5.10 </span>The <code>dt</code> element</a></li>
<li><a href=#the-dd-element><span class=secno>4.5.11 </span>The <code>dd</code> element</a></li>
<li><a href=#the-figure-element><span class=secno>4.5.12 </span>The <code>figure</code> element</a></li>
<li><a href=#the-figcaption-element><span class=secno>4.5.13 </span>The <code>figcaption</code> element</a></li>
<li><a href=#the-div-element><span class=secno>4.5.14 </span>The <code>div</code> element</a></ol></li>
<li><a href=#the-wbr-element><span class=secno>4.5.4 </span>The <code>wbr</code> element</a></li>
<li><a href=#the-pre-element><span class=secno>4.5.5 </span>The <code>pre</code> element</a></li>
<li><a href=#the-blockquote-element><span class=secno>4.5.6 </span>The <code>blockquote</code> element</a></li>
<li><a href=#the-ol-element><span class=secno>4.5.7 </span>The <code>ol</code> element</a></li>
<li><a href=#the-ul-element><span class=secno>4.5.8 </span>The <code>ul</code> element</a></li>
<li><a href=#the-li-element><span class=secno>4.5.9 </span>The <code>li</code> element</a></li>
<li><a href=#the-dl-element><span class=secno>4.5.10 </span>The <code>dl</code> element</a></li>
<li><a href=#the-dt-element><span class=secno>4.5.11 </span>The <code>dt</code> element</a></li>
<li><a href=#the-dd-element><span class=secno>4.5.12 </span>The <code>dd</code> element</a></li>
<li><a href=#the-figure-element><span class=secno>4.5.13 </span>The <code>figure</code> element</a></li>
<li><a href=#the-figcaption-element><span class=secno>4.5.14 </span>The <code>figcaption</code> element</a></li>
<li><a href=#the-div-element><span class=secno>4.5.15 </span>The <code>div</code> element</a></ol></li>
<li><a href=#text-level-semantics><span class=secno>4.6 </span>Text-level semantics</a>
<ol>
<li><a href=#the-a-element><span class=secno>4.6.1 </span>The <code>a</code> element</a></li>
@@ -9610,6 +9611,7 @@ <h6 id=flow-content-0><span class=secno>3.2.5.1.2 </span>Flow content</h6>
<li><code><a href=#the-ul-element>ul</a></code></li>
<li><code><a href=#the-var-element>var</a></code></li>
<li><code><a href=#video>video</a></code></li>
<li><code><a href=#the-wbr-element>wbr</a></code></li>
<li><a href=#text-content title="text content">Text</a></li>
</ul><p>As a general rule, elements whose content model allows any
<a href=#flow-content>flow content</a> should have either at least one descendant
@@ -9721,6 +9723,7 @@ <h6 id=heading-content-0><span class=secno>3.2.5.1.4 </span>Heading content</h6>
<li><code><a href=#the-time-element>time</a></code></li>
<li><code><a href=#the-var-element>var</a></code></li>
<li><code><a href=#video>video</a></code></li>
<li><code><a href=#the-wbr-element>wbr</a></code></li>
<li><a href=#text-content title="text content">Text</a></li>
</ul><p>As a general rule, elements whose content model allows any
<a href=#phrasing-content>phrasing content</a> should have either at least one
@@ -16050,7 +16053,44 @@ <h4 id=the-br-element><span class=secno>4.5.3 </span>The <dfn><code>br</code></d
</div>


<h4 id=the-pre-element><span class=secno>4.5.4 </span>The <dfn><code>pre</code></dfn> element</h4>
<h4 id=the-wbr-element><span class=secno>4.5.4 </span>The <dfn><code>wbr</code></dfn> element</h4>

<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
<dd><a href=#phrasing-content>Phrasing content</a>.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
<dt>Content model:</dt>
<dd>Empty.</dd>
<dt>Content attributes:</dt>
<dd><a href=#global-attributes>Global attributes</a></dd>
<dt>DOM interface:</dt>
<dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
</dl><p>The <code><a href=#the-wbr-element>wbr</a></code> element <a href=#represents>represents</a> a line break
opportunity.</p>

<div class=example>

<p>In the following example, someone is quoted as saying something
which, for effect, is written as one long word. However, to ensure
that the text can be wrapped in a readable fashion, the individual
words in the quote are separated using a <code><a href=#the-wbr-element>wbr</a></code>
element.</p>

<pre>&lt;p&gt;So then he pointed at the tiger and screamed
"there&lt;wbr&gt;is&lt;wbr&gt;no&lt;wbr&gt;way&lt;wbr&gt;you&lt;wbr&gt;are&lt;wbr&gt;ever&lt;wbr&gt;going&lt;wbr&gt;to&lt;wbr&gt;catch&lt;wbr&gt;me"!&lt;/p&gt;</pre>

</div>

<div class=impl>

<p>Any content inside <code><a href=#the-wbr-element>wbr</a></code> elements must not be
considered part of the surrounding text.</p>

</div>


<h4 id=the-pre-element><span class=secno>4.5.5 </span>The <dfn><code>pre</code></dfn> element</h4>

<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -16155,7 +16195,7 @@ <h4 id=the-pre-element><span class=secno>4.5.4 </span>The <dfn><code>pre</code><



<h4 id=the-blockquote-element><span class=secno>4.5.5 </span>The <dfn><code>blockquote</code></dfn> element</h4>
<h4 id=the-blockquote-element><span class=secno>4.5.6 </span>The <dfn><code>blockquote</code></dfn> element</h4>

<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -16264,7 +16304,7 @@ <h4 id=the-blockquote-element><span class=secno>4.5.5 </span>The <dfn><code>bloc



<h4 id=the-ol-element><span class=secno>4.5.6 </span>The <dfn><code>ol</code></dfn> element</h4>
<h4 id=the-ol-element><span class=secno>4.5.7 </span>The <dfn><code>ol</code></dfn> element</h4>

<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -16366,7 +16406,7 @@ <h4 id=the-ol-element><span class=secno>4.5.6 </span>The <dfn><code>ol</code></d
</div>


<h4 id=the-ul-element><span class=secno>4.5.7 </span>The <dfn><code>ul</code></dfn> element</h4>
<h4 id=the-ul-element><span class=secno>4.5.8 </span>The <dfn><code>ul</code></dfn> element</h4>

<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -16421,7 +16461,7 @@ <h4 id=the-ul-element><span class=secno>4.5.7 </span>The <dfn><code>ul</code></d
</div>


<h4 id=the-li-element><span class=secno>4.5.8 </span>The <dfn><code>li</code></dfn> element</h4>
<h4 id=the-li-element><span class=secno>4.5.9 </span>The <dfn><code>li</code></dfn> element</h4>

<dl class=element><dt>Categories</dt>
<dd>None.</dd>
@@ -16519,7 +16559,7 @@ <h4 id=the-li-element><span class=secno>4.5.8 </span>The <dfn><code>li</code></d



<h4 id=the-dl-element><span class=secno>4.5.9 </span>The <dfn><code>dl</code></dfn> element</h4>
<h4 id=the-dl-element><span class=secno>4.5.10 </span>The <dfn><code>dl</code></dfn> element</h4>

<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -16670,7 +16710,7 @@ <h4 id=the-dl-element><span class=secno>4.5.9 </span>The <dfn><code>dl</code></d



<h4 id=the-dt-element><span class=secno>4.5.10 </span>The <dfn><code>dt</code></dfn> element</h4>
<h4 id=the-dt-element><span class=secno>4.5.11 </span>The <dfn><code>dt</code></dfn> element</h4>

<dl class=element><dt>Categories</dt>
<dd>None.</dd>
@@ -16713,7 +16753,7 @@ <h4 id=the-dt-element><span class=secno>4.5.10 </span>The <dfn><code>dt</code></



<h4 id=the-dd-element><span class=secno>4.5.11 </span>The <dfn><code>dd</code></dfn> element</h4>
<h4 id=the-dd-element><span class=secno>4.5.12 </span>The <dfn><code>dd</code></dfn> element</h4>

<dl class=element><dt>Categories</dt>
<dd>None.</dd>
@@ -16751,7 +16791,7 @@ <h4 id=the-dd-element><span class=secno>4.5.11 </span>The <dfn><code>dd</code></
</div>


<h4 id=the-figure-element><span class=secno>4.5.12 </span>The <dfn><code>figure</code></dfn> element</h4>
<h4 id=the-figure-element><span class=secno>4.5.13 </span>The <dfn><code>figure</code></dfn> element</h4>

<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -16881,7 +16921,7 @@ <h4 id=the-figure-element><span class=secno>4.5.12 </span>The <dfn><code>figure<
</div>


<h4 id=the-figcaption-element><span class=secno>4.5.13 </span>The <dfn><code>figcaption</code></dfn> element</h4>
<h4 id=the-figcaption-element><span class=secno>4.5.14 </span>The <dfn><code>figcaption</code></dfn> element</h4>

<dl class=element><dt>Categories</dt>
<dd>None.</dd>
@@ -16900,7 +16940,7 @@ <h4 id=the-figcaption-element><span class=secno>4.5.13 </span>The <dfn><code>fig



<h4 id=the-div-element><span class=secno>4.5.14 </span>The <dfn><code>div</code></dfn> element</h4>
<h4 id=the-div-element><span class=secno>4.5.15 </span>The <dfn><code>div</code></dfn> element</h4>

<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -72795,7 +72835,7 @@ <h4 id=elements-0><span class=secno>12.1.2 </span>Elements</h4>
<code><a href=#the-col-element>col</a></code>, <code><a href=#the-command>command</a></code>, <code><a href=#the-embed-element>embed</a></code>,
<code><a href=#the-hr-element>hr</a></code>, <code><a href=#the-img-element>img</a></code>, <code><a href=#the-input-element>input</a></code>,
<code><a href=#the-keygen-element>keygen</a></code>, <code><a href=#the-link-element>link</a></code>, <code><a href=#meta>meta</a></code>,
<code><a href=#the-param-element>param</a></code>, <code><a href=#the-source-element>source</a></code></dd>
<code><a href=#the-param-element>param</a></code>, <code><a href=#the-source-element>source</a></code>, <code><a href=#the-wbr-element>wbr</a></code></dd>

<dt><dfn id=raw-text-elements>Raw text elements</dfn></dt>

@@ -74581,7 +74621,7 @@ <h5 id=the-insertion-mode><span class=secno>12.2.3.1 </span>The insertion mode</
<code><a href=#the-select-element>select</a></code>, <code><a href=#the-style-element>style</a></code>, <code><a href=#the-tbody-element>tbody</a></code>,
<code><a href=#the-textarea-element>textarea</a></code>, <code><a href=#the-tfoot-element>tfoot</a></code>, <code><a href=#the-thead-element>thead</a></code>,
<code><a href=#the-title-element-0>title</a></code>, <code><a href=#the-tr-element>tr</a></code>, <code><a href=#the-ul-element>ul</a></code>,
<code><a href=#wbr>wbr</a></code>, and <code><a href=#xmp>xmp</a></code>.</dd>
<code><a href=#the-wbr-element>wbr</a></code>, and <code><a href=#xmp>xmp</a></code>.</dd>

<dt><dfn id=scoping>Scoping</dfn></dt>
<dd><p>The following HTML elements introduce new <a href=#has-an-element-in-scope title="has
@@ -81058,7 +81098,7 @@ <h3 id=serializing-html-fragments><span class=secno>12.3 </span>Serializing HTML
<code><a href=#the-embed-element>embed</a></code>, <code><a href=#frame>frame</a></code>, <code><a href=#the-hr-element>hr</a></code>,
<code><a href=#the-img-element>img</a></code>, <code><a href=#the-input-element>input</a></code>, <code><a href=#the-keygen-element>keygen</a></code>,
<code><a href=#the-link-element>link</a></code>, <code><a href=#meta>meta</a></code>, <code><a href=#the-param-element>param</a></code>, or
<code><a href=#wbr>wbr</a></code> element, then continue on to the next child
<code><a href=#the-wbr-element>wbr</a></code> element, then continue on to the next child
node at this point.</p> <!-- also, i guess: image and isindex,
but we don't list those because we don't consider those
"elements", more "macros", and thus we should never serialize
@@ -82568,7 +82608,7 @@ <h4 id=punctuation-and-decorations><span class=secno>14.2.6 </span>Punctuation a
error, a default value of 1px is expected to be used for that
property instead.</p>

<p>The <code><a href=#wbr>wbr</a></code> element is expected to override the
<p>The <code><a href=#the-wbr-element>wbr</a></code> element is expected to override the
'white-space' property and always provide a line-breaking
opportunity.</p>

@@ -84191,7 +84231,6 @@ <h3 id=non-conforming-features><span class=secno>15.2 </span>Non-conforming feat
<dt><dfn id=strike><code>strike</code></dfn></dt>
<dt><dfn id=tt><code>tt</code></dfn></dt>
<dt><dfn id=u><code>u</code></dfn></dt>
<dt><dfn id=wbr><code>wbr</code></dfn></dt>

<dd>

@@ -87186,6 +87225,14 @@ <h3 class=no-num id=elements-1>Elements</h3>
<code title=attr-dim-width><a href=#attr-dim-width>width</a></code>;
<code title=attr-dim-height><a href=#attr-dim-height>height</a></code></td>
<td><code><a href=#htmlvideoelement>HTMLVideoElement</a></code></td>
<tr><th><code><a href=#the-wbr-element>wbr</a></code></th>
<td>Line breaking opportunity</td>
<td><a href=#flow-content title="Flow content">flow</a>;
<a href=#phrasing-content title="Phrasing content">phrasing</a></td>
<td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
<td>empty</td>
<td><a href=#global-attributes title="global attributes">globals</a></td>
<td><code><a href=#htmlelement>HTMLElement</a></code></td>
</table><p>An asterisk (*) in a cell indicates that the actual rules are more complicated than indicated in the table above.</p>


@@ -87292,6 +87339,7 @@ <h3 class=no-num id=element-content-categories>Element content categories</h3>
<code><a href=#the-ul-element>ul</a></code>;
<code><a href=#the-var-element>var</a></code>;
<code><a href=#video>video</a></code>;
<code><a href=#the-wbr-element>wbr</a></code>;
<a href=#text-content title="text content">Text</a>
<td>
<code><a href=#the-area-element>area</a></code> (if it is a descendant of a <code><a href=#the-map-element>map</a></code> element);
@@ -87367,6 +87415,7 @@ <h3 class=no-num id=element-content-categories>Element content categories</h3>
<code><a href=#the-time-element>time</a></code>;
<code><a href=#the-var-element>var</a></code>;
<code><a href=#video>video</a></code>;
<code><a href=#the-wbr-element>wbr</a></code>;
<a href=#text-content title="text content">Text</a>
<td>
<code><a href=#the-a-element>a</a></code> (if it contains only <a href=#phrasing-content>phrasing content</a>);
@@ -88863,6 +88912,9 @@ <h3 class="no-num">Reflecting IDL attributes</h3>
<tr><td> <code><a href=#video>video</a></code>
<td> <code><a href=#htmlvideoelement>HTMLVideoElement</a></code> : <code><a href=#htmlmediaelement>HTMLMediaElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>

<tr><td> <code><a href=#the-wbr-element>wbr</a></code>
<td> <code><a href=#htmlelement>HTMLElement</a></code>

</table><h2 class=no-num id=references>References</h2><!--REFS-->

<p>All references are normative unless marked "Non-normative".</p>
@@ -100,6 +100,7 @@
<li><code>ul</code></li>
<li><code>var</code></li>
<li><code>video</code></li>
<li><code>wbr</code></li>
<li><span>Text*</span></li>
</ul>
<p>* Under certain circumstances (see prose).</p>
@@ -242,6 +243,7 @@
<li><code>time</code></li>
<li><code>var</code></li>
<li><code>video</code></li>
<li><code>wbr</code></li>
<li><span title="text content">Text</span>*</li>
</ul>
<p>* Under certain circumstances; see prose.</p>

0 comments on commit 33fc385

Please sign in to comment.