relative to other specifications can be best summed up as
follows:</p>
- <p><img alt="It consists of everything else, above such core technologies as HTTP, URI/IRIs, DOM Core, XML, Unicode, and ECMAScript; below presentation-layer technologies like CSS, XBL, and the NPAPI; and to the side of technologies like Geolocation, SVG, MathML, and XHR." height=359 src=http://images.whatwg.org/abstract.png width=398></p>
+ <p><img alt="It consists of everything else, above such core technologies as HTTP, URI/IRIs, DOM Core, XML, Unicode, and ECMAScript; below presentation-layer technologies like CSS, XBL, and the NPAPI; and to the side of technologies like Geolocation, SVG, MathML, and XHR." height=359 src=greenbox.png width=398></p>
<i>start edge</i> of the paragraph, the resulting rendering could
be as follows:</p>
- <p><img alt="Each paragraph rendered as a separate block, with the paragraphs left-aligned except the second paragraph and the last one, which would be right aligned, with the usernames ('Student' and 'Teacher' in this example) flush right, with a colon to their left, and the text first to the left of that." src=http://images.whatwg.org/im.png></p>
+ <p><img alt="Each paragraph rendered as a separate block, with the paragraphs left-aligned except the second paragraph and the last one, which would be right aligned, with the usernames ('Student' and 'Teacher' in this example) flush right, with a colon to their left, and the text first to the left of that." src=greenbox.png></p>
<p>As noted earlier, the <code title=attr-dir-auto><a href=#attr-dir-auto>auto</a></code>
value is not a panacea. The final paragraph in this example is
<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=http://images.whatwg.org/content-venn.png></object></p>
+ also a type of phrasing content." src=greenbox.png></object></p>
<p>Other categories are also used for specific purposes, e.g. form
controls are specified using a number of categories to define common
<p>This might be rendered as:</p>
- <p><img alt="The two main ideographs, each with its annotation in hiragana rendered in a smaller font above it." height=78 src=http://images.whatwg.org/sample-ruby-ja.png width=171></p>
+ <p><img alt="The two main ideographs, each with its annotation in hiragana rendered in a smaller font above it." height=78 src=greenbox.png width=171></p>
</div>
<p>This might be rendered as:</p>
- <p><img alt="The two main ideographs, each with its bopomofo annotation rendered in a smaller font next to it." height=100 src=http://images.whatwg.org/sample-ruby-bopomofo.png width=78></p>
+ <p><img alt="The two main ideographs, each with its bopomofo annotation rendered in a smaller font next to it." height=100 src=greenbox.png width=78></p>
</div>
<p>This might be rendered as:</p>
- <p><img alt="The two main ideographs, each with its pinyin annotation rendered in a smaller font above it." height=79 src=http://images.whatwg.org/sample-ruby-pinyin.png width=173></p>
+ <p><img alt="The two main ideographs, each with its pinyin annotation rendered in a smaller font above it." height=79 src=greenbox.png width=173></p>
</div>
<!-- this is filler to make sure the TCP packet boundary doesn't fall in the middle of one of the NCRs below -->
<!-- (because otherwise the parser in anolis screws it up) -->
- <p><img alt="The top of the em square is roughly at the top of the glyphs in a font, the hanging baseline is where some glyphs like आ are anchored, the middle is half-way between the top of the em square and the bottom of the em square, the alphabetic baseline is where characters like Á, ÿ, f, and Ω are anchored, the ideographic baseline is where glyphs like 私 and 達 are anchored, and the bottom of the em square is roughly at the bottom of the glyphs in a font. The top and bottom of the bounding box can be far from these baselines, due to glyphs extending far outside the em square." height=300 src=http://images.whatwg.org/baselines.png width=738></p>
+ <p><img alt="The top of the em square is roughly at the top of the glyphs in a font, the hanging baseline is where some glyphs like आ are anchored, the middle is half-way between the top of the em square and the bottom of the em square, the alphabetic baseline is where characters like Á, ÿ, f, and Ω are anchored, the ideographic baseline is where glyphs like 私 and 達 are anchored, and the bottom of the em square is roughly at the bottom of the glyphs in a font. The top and bottom of the bounding box can be far from these baselines, due to glyphs extending far outside the em square." height=300 src=greenbox.png width=738></p>
<p>The keywords map to these alignment points as follows:</p>
<p>Draws the given image onto the canvas. The arguments are
interpreted as follows:</p>
- <p><img alt="The sx and sy parameters give the x and y coordinates of the source rectangle; the sw and sh arguments give the width and height of the source rectangle; the dx and dy give the x and y coordinates of the destination rectangle; and the dw and dh arguments give the width and height of the destination rectangle." height=356 src=http://images.whatwg.org/drawImage.png width=356></p>
+ <p><img alt="The sx and sy parameters give the x and y coordinates of the source rectangle; the sw and sh arguments give the width and height of the source rectangle; the dx and dy give the x and y coordinates of the destination rectangle; and the dw and dh arguments give the width and height of the destination rectangle." height=356 src=greenbox.png width=356></p>
<p>If the first argument isn't an <code><a href=#the-img-element>img</a></code>,
<code><a href=#the-canvas-element>canvas</a></code>, or <code><a href=#the-video-element>video</a></code> element, throws a
<p>Consider an image that looks as follows:</p>
- <p><img alt="A line with four shapes in it, equally spaced: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star." height=150 src=http://images.whatwg.org/sample-usemap.png width=600></p>
+ <p><img alt="A line with four shapes in it, equally spaced: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star." height=150 src=greenbox.png width=600></p>
<p>If we wanted just the colored areas to be clickable, we could
do it as follows:</p>
them.</p>
<!-- image source: http://software.hixie.ch/utilities/js/live-dom-viewer/saved/151 -->
- <img alt="" height=256 src=http://images.whatwg.org/table-scope-diagram.png width=459><!-- (alt is empty because the diagram is completely described by the previous paragraphs) --></div>
+ <img alt="" height=256 src=greenbox.png width=459><!-- (alt is empty because the diagram is completely described by the previous paragraphs) --></div>
<code>http://www.w3.org/TR/XForms/</code> in the recent past, then
the rendering might look like this:</p>
- <p><img alt='A text box with an icon on the left followed by the text "www.w3" and a cursor, with a drop down button on the right hand side; with, below, a drop down box containing a list of six URLs on the left, with the first four having grayed out labels on the right; and a scroll bar to the right of the drow down box, indicating further values are available.' height=134 src=http://images.whatwg.org/sample-url.png width=472></p>
+ <p><img alt='A text box with an icon on the left followed by the text "www.w3" and a cursor, with a drop down button on the right hand side; with, below, a drop down box containing a list of six URLs on the left, with the first four having grayed out labels on the right; and a scroll bar to the right of the drow down box, indicating further values are available.' height=134 src=greenbox.png width=472></p>
<p>The first four URLs in this sample consist of the four URLs in
the author-specified list that match the text the user has entered,
<p>...might render as:</p>
- <p><img alt="A vertical slider control whose primary color is black and whose background color is beige, with the slider having five tick marks, one long one at each extremity, and three short ones clustered around the midpoint." height=75 src=http://images.whatwg.org/sample-range.png width=49><p>Note how the UA determined the orientation of the control from
+ <p><img alt="A vertical slider control whose primary color is black and whose background color is beige, with the slider having five tick marks, one long one at each extremity, and three short ones clustered around the midpoint." height=75 src=greenbox.png width=49><p>Note how the UA determined the orientation of the control from
the ratio of the style-sheet-specified height and width properties.
The colors were similiarly derived from the style sheet. The tick
marks, however, were derived from the markup. In particular, the
<p>A user agent could display in a variety of ways, for instance:</p>
- <p><img alt="As a dial." height=57 src=http://images.whatwg.org/sample-range-2a.png width=231></p>
+ <p><img alt="As a dial." height=57 src=greenbox.png width=231></p>
<p>Or, alternatively, for instance:</p>
- <p><img alt="As a long horizontal slider with tick marks." height=56 src=http://images.whatwg.org/sample-range-2b.png width=445></p>
+ <p><img alt="As a long horizontal slider with tick marks." height=56 src=greenbox.png width=445></p>
<p>The user agent could pick which one to display based on the
dimensions given in the style sheet. This would allow it to
user agent might suggest these two e-mail addresses to the
user.</p>
- <p><img alt="" height=140 src=http://images.whatwg.org/sample-email-1.png width=500></p>
+ <p><img alt="" height=140 src=greenbox.png width=500></p>
<p>The page could also link in the user's contacts database from the site:</p>
earlier, as well as the "astrophy" and "astronomy" values given in
the <code><a href=#the-datalist-element>datalist</a></code> element.</p>
- <p><img alt="" height=171 src=http://images.whatwg.org/sample-email-2.png width=500></p>
+ <p><img alt="" height=171 src=greenbox.png width=500></p>
</div>
</li>
</ul></pre>
<p>Might be rendered as follows:</p>
- <p><img alt="With the <meter> elements rendered as inline green bars of varying lengths." height=178 src=http://images.whatwg.org/sample-meter.png width=332></p>
+ <p><img alt="With the <meter> elements rendered as inline green bars of varying lengths." height=178 src=greenbox.png width=332></p>
</div>
<p>User agents <span class=impl>may</span> combine the value of
in a list to allow the user to collapse a set of fields down to a
small set of headings, with the ability to open each one.</p>
- <p class=details-example><img alt="" height=611 src=http://images.whatwg.org/sample-details-1.png width=345><img alt="" height=666 src=http://images.whatwg.org/sample-details-2.png width=345></p>
+ <p class=details-example><img alt="" height=611 src=greenbox.png width=345><img alt="" height=666 src=greenbox.png width=345></p>
<p>In these examples, the summary really just summarises what the
controls can change, and not the actual values, which is less than
<p>In a supporting user agent, this might look like this:</p>
- <p><img alt="A toolbar with three buttons, labeled 'File', 'Edit', and 'Help'; where if you select the 'Edit' button you get a drop-down menu with three more options, 'Copy', 'Cut', and 'Paste'." height=101 src=http://images.whatwg.org/sample-toolbar-1.png width=303></p>
+ <p><img alt="A toolbar with three buttons, labeled 'File', 'Edit', and 'Help'; where if you select the 'Edit' button you get a drop-down menu with three more options, 'Copy', 'Cut', and 'Paste'." height=101 src=greenbox.png width=303></p>
<p>In a legacy user agent, the above would look like a bulleted list
with three items, the first of which has four buttons, the second of
<p>The <code title=dom-navigator-registerContentHandler><a href=#dom-navigator-registercontenthandler>registerContentHandler()</a></code>
method could display a modal dialog box:</p>
- <p><img alt="The modal dialog box could have the title 'Content Handler Registration', and could say 'This Web page: Kittens at work http://kittens.example.org/ ...would like permission to handle files of type: application/x-meowmeow using the following Web-based application: Kittens-at-work displayer http://kittens.example.org/?show=%s Do you trust the administrators of the "kittens.example.org" domain?' with two buttons, 'Trust kittens.example.org' and 'Cancel'." height=374 src=http://images.whatwg.org/sample-content-handler-registration.png width=534></p>
+ <p><img alt="The modal dialog box could have the title 'Content Handler Registration', and could say 'This Web page: Kittens at work http://kittens.example.org/ ...would like permission to handle files of type: application/x-meowmeow using the following Web-based application: Kittens-at-work displayer http://kittens.example.org/?show=%s Do you trust the administrators of the "kittens.example.org" domain?' with two buttons, 'Trust kittens.example.org' and 'Cancel'." height=374 src=greenbox.png width=534></p>
<p>In this dialog box, "Kittens at work" is the title of the page
that invoked the method, "http://kittens.example.org/" is the URL of
"application/x-meowmeow" <a href=#mime-type>MIME type</a>, then it might
display a dialog as follows:</p>
- <p><img alt="The dialog box could have the title 'Unknown File Type' and could say 'You have attempted to access:' followed by a URL, followed by a prompt such as 'How would you like FerretBrowser to handle this resource?' with three radio buttons, one saying 'Contact the FerretBrowser plugin registry to see if there is an official way to handle this resource.', one saying 'Pass this URL to a local application' with an application selector, and one saying 'Pass this URL to the "Kittens-at-work displayer" application at "kittens.example.org"', with a checkbox labeled 'Always do this for resources using the "application/x-meowmeow" type in future.', and with two buttons, 'Ok' and 'Cancel'." height=428 src=http://images.whatwg.org/sample-content-handler.png width=577></p>
+ <p><img alt="The dialog box could have the title 'Unknown File Type' and could say 'You have attempted to access:' followed by a URL, followed by a prompt such as 'How would you like FerretBrowser to handle this resource?' with three radio buttons, one saying 'Contact the FerretBrowser plugin registry to see if there is an official way to handle this resource.', one saying 'Pass this URL to a local application' with an application selector, and one saying 'Pass this URL to the "Kittens-at-work displayer" application at "kittens.example.org"', with a checkbox labeled 'Always do this for resources using the "application/x-meowmeow" type in future.', and with two buttons, 'Ok' and 'Cancel'." height=428 src=greenbox.png width=577></p>
<p>In this dialog, the third option is the one that was primed by
the site registering itself earlier.</p>
change when the parent is finished.) When such a fork's parent
finishes, the fork is also said to have finished.</p>
- <p><img alt="" src=http://images.whatwg.org/media-stream-1.png></p><!-- no alt since
+ <p><img alt="" src=greenbox.png></p><!-- no alt since
it's all described in the previous paragraphs: this is just a
summary -->
peer (e.g. in response to the user using a "video mute"
feature).</p>
- <p><img alt="" src=http://images.whatwg.org/media-stream-2.png></p><!-- again, no
+ <p><img alt="" src=greenbox.png></p><!-- again, no
alt since it's all described in the previous paragraphs: this is
just a summary -->
<h4 id=overview-of-the-parsing-model><span class=secno>13.2.1 </span>Overview of the parsing model</h4>
- <p class=overview><object data=images/parsing-model-overview.svg height=450 width=345><img alt="" height=450 src=http://images.whatwg.org/parsing-model-overview.png width=345></object></p>
+ <p class=overview><object data=images/parsing-model-overview.svg height=450 width=345><img alt="" height=450 src=greenbox.png width=345></object></p>
<p>The input to the HTML parsing process consists of a stream of
Unicode code points, which is passed through a
<!-- http://software.hixie.ch/utilities/js/canvas/?c.clearRect(0%2C%200%2C%20640%2C%20480)%3B%0Ac.save()%3B%0Atry%20{%0A%20%20c.fillStyle%20%3D%20'black'%3B%0A%20%20c.font%20%3D%20'8px%20sans-serif'%3B%0A%20%20c.fillText('Wide'%2C%2043%2C105)%3B%0A%20%20c.fillText('Tall'%2C%20100%2C105)%3B%0A%20%20c.fillText('Square'%2C%20128%2C105)%3B%0A%20%20c.font%20%3D%20'700%2010px%20sans-serif'%3B%0A%20%20c.fillText('Progress%20Bars'%2C%2013%2C30)%3B%0A%20%20c.font%20%3D%20'100%2010px%20sans-serif'%3B%0A%20%20c.fillText('(80%25)'%2C%2037%2C45)%3B%0A%20%20c.beginPath()%3B%0A%20%20var%20g%20%3D%20c.createLinearGradient(10%2C0%2C80%2C0)%3B%0A%20%20g.addColorStop(0%2C%20'%2300FF00')%3B%0A%20%20g.addColorStop(0.8%2C%20'%2300FF00')%3B%0A%20%20g.addColorStop(0.9%2C%20'%23FFFF00')%3B%0A%20%20c.fillStyle%20%3D%20g%3B%0A%20%20c.rect(10%2C80%2C80%2C15)%3B%0A%20%20c.fill()%3B%0A%20%20c.strokeStyle%20%3D%20'black'%3B%0A%20%20c.stroke()%3B%0A%20%20c.beginPath()%3B%0A%20%20var%20g%20%3D%20c.createLinearGradient(0%2C80%2C0%2C20)%3B%0A%20%20g.addColorStop(0%2C%20'%2300FF00')%3B%0A%20%20g.addColorStop(0.75%2C%20'%2300FF00')%3B%0A%20%20g.addColorStop(0.85%2C%20'%23FFFF00')%3B%0A%20%20c.fillStyle%20%3D%20g%3B%0A%20%20c.rect(100%2C15%2C15%2C80)%3B%0A%20%20c.fill()%3B%0A%20%20c.strokeStyle%20%3D%20'black'%3B%0A%20%20c.stroke()%3B%0A%0A%20%20c.beginPath()%3B%0A%20%20c.fillStyle%20%3D%20'yellow'%3B%0A%20%20c.arc(140%2C80%2C15%2C0%2C2*Math.PI%2C%20true)%3B%0A%20%20c.fill()%3B%0A%20%20c.beginPath()%3B%0A%20%20c.fillStyle%20%3D%20'lime'%3B%0A%20%20c.moveTo(140%2C80)%3B%0A%20%20c.arc(140%2C80%2C15%2C-Math.PI%2F2%2C1.2*Math.PI%2C%20false)%3B%0A%20%20c.fill()%3B%0A%20%20c.beginPath()%3B%0A%20%20c.arc(140%2C80%2C15%2C0%2C2*Math.PI%2C%20true)%3B%0A%20%20c.strokeStyle%20%3D%20'black'%3B%0A%20%20c.stroke()%3B%0A}%20finally%20{%0A%20%20c.restore()%3B%0A}%0A -->
- <p> <img alt="" class=extra src=http://images.whatwg.org/sample-progress.png>
+ <p> <img alt="" class=extra src=greenbox.png>
When the element is wider than it is tall, the element is
expected to be depicted as a horizontal progress bar, with the start
on the right and the end on the left if the 'direction' property on
same both in the drop down, and in the box showing the current
selection.</p>
- <p><img alt="" height=105 src=http://images.whatwg.org/bidiselect.png width=206></p> <!-- no need for alt text, the previous paragraph
+ <p><img alt="" height=105 src=greenbox.png width=206></p> <!-- no need for alt text, the previous paragraph
describes it completely -->
</div>