[html5] r4754 - / images
whatwg at whatwg.org
whatwg at whatwg.org
Tue Feb 16 23:39:10 PST 2010
Author: ianh
Date: 2010-02-16 23:39:08 -0800 (Tue, 16 Feb 2010)
New Revision: 4754
Modified:
complete.html
images/content-venn.svg
index
source
Log:
[e] (0) Make the content venn diagram interactive.
Modified: complete.html
===================================================================
--- complete.html 2010-02-17 05:07:49 UTC (rev 4753)
+++ complete.html 2010-02-17 07:39:08 UTC (rev 4754)
@@ -8733,7 +8733,7 @@
<p>These categories are related as follows:</p>
- <p><object data=images/content-venn.svg height=288 width=512><img alt="Sectioning content, heading content, phrasing content, and
+ <p><object data=images/content-venn.svg height=288 width=1000><img alt="Sectioning content, heading content, phrasing content, and
embedded content are all types of flow content. Embedded content is
also a type of phrasing content." src=images/content-venn.png></object></p>
Modified: images/content-venn.svg
===================================================================
--- images/content-venn.svg 2010-02-17 05:07:49 UTC (rev 4753)
+++ images/content-venn.svg 2010-02-17 07:39:08 UTC (rev 4754)
@@ -1,36 +1,272 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-250 -150 512 288" width="512" height="288">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-250 -150 1024 288" width="1000" height="288">
<style type="text/css">
@import url(/style/svg-color-scheme.css);
svg { font: bold 18px sans-serif; text-anchor: middle; }
ellipse { fill: #005a9c; stroke: #000000; opacity: 0.67; }
- text { fill: #ffffff; }
+ text { fill: #ffffff; pointer-events: none; }
+ ellipse:hover { stroke-width: 5px; }
+ ellipse:not(:hover) + foreignObject { display: none; }
+ div { font: 14px sans-serif; }
+ h1 { margin: 0 0 0.25em 0; padding: 0; font: 900 27px sans-serif; text-shadow: 0.15em 0.15em 0.2em gray; }
+ ul { margin: 0; padding: 0 0 0 1em; }
+ li { display: inline; margin: 0; padding: 0; line-height: 1.5; }
+ li:not(:last-child):after { content: ', '; }
+ span { font: italic 14px sans-serif; }
+ code { font: 1em monospace; color: orangered; }
+ p { margin: 0.75em 0 0 0; padding: 0 0 0 1em; font: italic 14px sans-serif; }
</style>
- <g class="a" transform="translate(0, 0)">
- <ellipse cx="2" cy="-3" rx="244" ry="132"/>
- <text y="-97" x="12">Flow</text>
+ <g class="a" transform="translate(2, -3)">
+ <ellipse rx="244" ry="132"/>
+ <foreignObject x="250" y="-150" width="500" transform="translate(-2, 3)">
+ <div xmlns="http://www.w3.org/1999/xhtml">
+ <h1>Flow content</h1>
+ <ul>
+ <li><code>a</code></li>
+ <li><code>abbr</code></li>
+ <li><code>address</code></li>
+ <li><code>area</code>*</li>
+ <li><code>article</code></li>
+ <li><code>aside</code></li>
+ <li><code>audio</code></li>
+ <li><code>b</code></li>
+ <li><code>bdo</code></li>
+ <li><code>blockquote</code></li>
+ <li><code>br</code></li>
+ <li><code>button</code></li>
+ <li><code>canvas</code></li>
+ <li><code>cite</code></li>
+ <li><code>code</code></li>
+ <li><code>command</code></li>
+ <li><code>datalist</code></li>
+ <li><code>del</code></li>
+ <li><code>details</code></li>
+ <li><code>dfn</code></li>
+ <li><code>div</code></li>
+ <li><code>dl</code></li>
+ <li><code>em</code></li>
+ <li><code>embed</code></li>
+ <li><code>fieldset</code></li>
+ <li><code>figure</code></li>
+ <li><code>footer</code></li>
+ <li><code>form</code></li>
+ <li><code>h1</code></li>
+ <li><code>h2</code></li>
+ <li><code>h3</code></li>
+ <li><code>h4</code></li>
+ <li><code>h5</code></li>
+ <li><code>h6</code></li>
+ <li><code>header</code></li>
+ <li><code>hgroup</code></li>
+ <li><code>hr</code></li>
+ <li><code>i</code></li>
+ <li><code>iframe</code></li>
+ <li><code>img</code></li>
+ <li><code>input</code></li>
+ <li><code>ins</code></li>
+ <li><code>kbd</code></li>
+ <li><code>keygen</code></li>
+ <li><code>label</code></li>
+ <li><code>link</code>*</li>
+ <li><code>map</code></li>
+ <li><code>mark</code></li>
+ <li><code>math</code></li>
+ <li><code>menu</code></li>
+ <li><code>meta</code>*</li>
+ <li><code>meter</code></li>
+ <li><code>nav</code></li>
+ <li><code>noscript</code></li>
+ <li><code>object</code></li>
+ <li><code>ol</code></li>
+ <li><code>output</code></li>
+ <li><code>p</code></li>
+ <li><code>pre</code></li>
+ <li><code>progress</code></li>
+ <li><code>q</code></li>
+ <li><code>ruby</code></li>
+ <li><code>samp</code></li>
+ <li><code>script</code></li>
+ <li><code>section</code></li>
+ <li><code>select</code></li>
+ <li><code>small</code></li>
+ <li><code>span</code></li>
+ <li><code>strong</code></li>
+ <li><code>style</code>*</li>
+ <li><code>sub</code></li>
+ <li><code>sup</code></li>
+ <li><code>svg</code></li>
+ <li><code>table</code></li>
+ <li><code>textarea</code></li>
+ <li><code>time</code></li>
+ <li><code>ul</code></li>
+ <li><code>var</code></li>
+ <li><code>video</code></li>
+ <li><span>Text*</span></li>
+ </ul>
+ <p>* Under certain circumstances (see prose).</p>
+ </div>
+ </foreignObject>
+ <text x="10" y="-94">Flow</text>
</g>
<g class="b" transform="translate(127, -48.5)">
<ellipse rx="75" ry="42.5"/>
+ <foreignObject x="250" y="-150" width="500" transform="translate(-127, 48.5)">
+ <div xmlns="http://www.w3.org/1999/xhtml">
+ <h1>Heading content</h1>
+ <ul>
+ <li><code>h1</code></li>
+ <li><code>h2</code></li>
+ <li><code>h3</code></li>
+ <li><code>h4</code></li>
+ <li><code>h5</code></li>
+ <li><code>h6</code></li>
+ <li><code>hgroup</code></li>
+ </ul>
+ </div>
+ </foreignObject>
<text x="2" y="6">Heading</text>
</g>
<g class="c" transform="translate(125, 42)">
<ellipse rx="75" ry="42.5"/>
+ <foreignObject x="250" y="-150" width="500" transform="translate(-125, -42)">
+ <div xmlns="http://www.w3.org/1999/xhtml">
+ <h1>Sectioning content</h1>
+ <ul>
+ <li><code>article</code></li>
+ <li><code>aside</code></li>
+ <li><code>nav</code></li>
+ <li><code>section</code></li>
+ </ul>
+ </div>
+ </foreignObject>
<text x="1" y="5">Sectioning</text>
</g>
<g class="d" transform="translate(-113, 78)">
<ellipse rx="117" ry="47" transform="rotate(-15)"/>
+ <foreignObject x="250" y="-150" width="500" transform="translate(113, -78)">
+ <div xmlns="http://www.w3.org/1999/xhtml">
+ <h1>Metadata content</h1>
+ <ul>
+ <li><code>base</code></li>
+ <li><code>command</code></li>
+ <li><code>link</code></li>
+ <li><code>meta</code></li>
+ <li><code>noscript</code></li>
+ <li><code>script</code></li>
+ <li><code>style</code></li>
+ <li><code>title</code></li>
+ </ul>
+ </div>
+ </foreignObject>
<text x="-4" y="8">Metadata</text>
</g>
<g class="e" transform="translate(-128, -34)">
<ellipse rx="94" ry="51"/>
+ <foreignObject x="250" y="-150" width="500" transform="translate(128, 34)">
+ <div xmlns="http://www.w3.org/1999/xhtml">
+ <h1>Interactive content</h1>
+ <ul>
+ <li><code>a</code></li>
+ <li><code>audio</code>*</li>
+ <li><code>button</code></li>
+ <li><code>details</code></li>
+ <li><code>embed</code></li>
+ <li><code>iframe</code></li>
+ <li><code>img</code>*</li>
+ <li><code>input</code>*</li>
+ <li><code>keygen</code></li>
+ <li><code>label</code></li>
+ <li><code>menu</code>*</li>
+ <li><code>object</code>*</li>
+ <li><code>select</code></li>
+ <li><code>textarea</code></li>
+ <li><code>video</code>*</li>
+ </ul>
+ <p>* Under certain circumstances.</p>
+ </div>
+ </foreignObject>
<text x="-36" y="5">Interactive</text>
</g>
<g class="f" transform="translate(-40.5, -5)">
<ellipse rx="76.5" ry="80"/>
+ <foreignObject x="250" y="-150" width="500" transform="translate(40.5, 5)">
+ <div xmlns="http://www.w3.org/1999/xhtml">
+ <h1>Phrasing content</h1>
+ <ul>
+ <li><code>a</code>*</li>
+ <li><code>abbr</code></li>
+ <li><code>area</code>*</li>
+ <li><code>audio</code></li>
+ <li><code>b</code></li>
+ <li><code>bdo</code></li>
+ <li><code>br</code></li>
+ <li><code>button</code></li>
+ <li><code>canvas</code></li>
+ <li><code>cite</code></li>
+ <li><code>code</code></li>
+ <li><code>command</code></li>
+ <li><code>datalist</code></li>
+ <li><code>del</code>*</li>
+ <li><code>dfn</code></li>
+ <li><code>em</code></li>
+ <li><code>embed</code></li>
+ <li><code>i</code></li>
+ <li><code>iframe</code></li>
+ <li><code>img</code></li>
+ <li><code>input</code></li>
+ <li><code>ins</code>*</li>
+ <li><code>kbd</code></li>
+ <li><code>keygen</code></li>
+ <li><code>label</code></li>
+ <li><code>link</code>*</li>
+ <li><code>map</code>*</li>
+ <li><code>mark</code></li>
+ <li><code>math</code></li>
+ <li><code>meta</code>*</li>
+ <li><code>meter</code></li>
+ <li><code>noscript</code></li>
+ <li><code>object</code></li>
+ <li><code>output</code></li>
+ <li><code>progress</code></li>
+ <li><code>q</code></li>
+ <li><code>ruby</code></li>
+ <li><code>samp</code></li>
+ <li><code>script</code></li>
+ <li><code>select</code></li>
+ <li><code>small</code></li>
+ <li><code>span</code></li>
+ <li><code>strong</code></li>
+ <li><code>sub</code></li>
+ <li><code>sup</code></li>
+ <li><code>svg</code></li>
+ <li><code>textarea</code></li>
+ <li><code>time</code></li>
+ <li><code>var</code></li>
+ <li><code>video</code></li>
+ <li><span title="text content">Text</span>*</li>
+ </ul>
+ <p>* Under certain circumstances; see prose.</p>
+ </div>
+ </foreignObject>
<text x="0" y="-39.5">Phrasing</text>
</g>
<g class="g" transform="translate(-42, -7)">
<ellipse rx="68" ry="22.5"/>
+ <foreignObject x="250" y="-150" width="500" transform="translate(42, 7)">
+ <div xmlns="http://www.w3.org/1999/xhtml">
+ <h1>Embedded content</h1>
+ <ul>
+ <li><code>audio</code></li>
+ <li><code>canvas</code></li>
+ <li><code>embed</code></li>
+ <li><code>iframe</code></li>
+ <li><code>img</code></li>
+ <li><code>math</code></li>
+ <li><code>object</code></li>
+ <li><code>svg</code></li>
+ <li><code>video</code></li>
+ </ul>
+ </div>
+ </foreignObject>
<text x="0" y="7">Embedded</text>
</g>
</svg>
\ No newline at end of file
Modified: index
===================================================================
--- index 2010-02-17 05:07:49 UTC (rev 4753)
+++ index 2010-02-17 07:39:08 UTC (rev 4754)
@@ -8632,7 +8632,7 @@
<p>These categories are related as follows:</p>
- <p><object data=images/content-venn.svg height=288 width=512><img alt="Sectioning content, heading content, phrasing content, and
+ <p><object data=images/content-venn.svg height=288 width=1000><img alt="Sectioning content, heading content, phrasing content, and
embedded content are all types of flow content. Embedded content is
also a type of phrasing content." src=images/content-venn.png></object></p>
Modified: source
===================================================================
--- source 2010-02-17 05:07:49 UTC (rev 4753)
+++ source 2010-02-17 07:39:08 UTC (rev 4754)
@@ -1,3 +1,14 @@
+<!-- EDITOR NOTES
+ !
+ ! Adding a new element involves editing the following sections:
+ ! - description of the element's categories
+ ! - images/content-venn.svg
+ ! - element, attribute, and interface indexes
+ ! - parser
+ ! - rendering
+ ! - obsolete section
+ !
+ !-->
<!--START validation-->
<!--START complete-->
<!--START html--><!--START w3c-html-->
@@ -8765,7 +8776,7 @@
<p>These categories are related as follows:</p>
- <p><object width="512" height="288"
+ <p><object width="1000" height="288"
data="images/content-venn.svg"><img src="images/content-venn.png"
alt="Sectioning content, heading content, phrasing content, and
embedded content are all types of flow content. Embedded content is
More information about the Commit-Watchers
mailing list