Skip to content
Browse files

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

git-svn-id: http://svn.whatwg.org/webapps@2759 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
1 parent b8c68fc commit 169d94f0e0620d1383d6e46c806c93d53d6cd6ab @Hixie Hixie committed
Showing with 1,000 additions and 98 deletions.
  1. +479 −76 index
  2. +521 −22 source
View
555 index
@@ -242,7 +242,8 @@
<li><a href=#real-numbers><span class=secno>2.4.3.3 </span>Real numbers</a></li>
<li><a href=#ratios><span class=secno>2.4.3.4 </span>Ratios</a></li>
<li><a href=#percentages-and-dimensions><span class=secno>2.4.3.5 </span>Percentages and lengths</a></li>
- <li><a href=#lists-of-integers><span class=secno>2.4.3.6 </span>Lists of integers</a></ol></li>
+ <li><a href=#lists-of-integers><span class=secno>2.4.3.6 </span>Lists of integers</a></li>
+ <li><a href=#lists-of-dimensions><span class=secno>2.4.3.7 </span>Lists of dimensions</a></ol></li>
<li><a href=#dates-and-times><span class=secno>2.4.4 </span>Dates and times</a>
<ol>
<li><a href=#months><span class=secno>2.4.4.1 </span>Months</a></li>
@@ -1041,34 +1042,33 @@
<li><a href=#self-contained-features><span class=secno>10.4 </span>Self-contained features</a>
<ol>
<li><a href=#embedded-content-1><span class=secno>10.4.1 </span>Embedded content</a></li>
- <li><a href=#fragment-identifiers><span class=secno>10.4.2 </span>Fragment identifiers</a></li>
- <li><a href=#frames><span class=secno>10.4.3 </span>Frames</a></li>
- <li><a href=#ruby-annotations><span class=secno>10.4.4 </span>Ruby annotations</a></li>
- <li><a href=#toolbars-0><span class=secno>10.4.5 </span>Toolbars</a>
+ <li><a href=#frames><span class=secno>10.4.2 </span>Frames</a></li>
+ <li><a href=#ruby-annotations><span class=secno>10.4.3 </span>Ruby annotations</a></li>
+ <li><a href=#toolbars-0><span class=secno>10.4.4 </span>Toolbars</a>
<ol>
- <li><a href="#the-'icon'-property"><span class=secno>10.4.5.1 </span>The 'icon' property</a></ol></li>
- <li><a href=#the-bb-element-0><span class=secno>10.4.6 </span>The <code>bb</code> element</a></li>
- <li><a href=#the-br-element-0><span class=secno>10.4.7 </span>The <code>br</code> element</a></li>
- <li><a href=#the-button-element-0><span class=secno>10.4.8 </span>The <code>button</code> element</a></li>
- <li><a href=#the-datagrid-element><span class=secno>10.4.9 </span>The <code>datagrid</code> element</a></li>
- <li><a href=#the-details-element-0><span class=secno>10.4.10 </span>The <code>details</code> element</a></li>
- <li><a href=#the-fieldset-element-0><span class=secno>10.4.11 </span>The <code>fieldset</code> element</a></li>
- <li><a href=#the-figure-element-0><span class=secno>10.4.12 </span>The <code>figure</code> element</a></li>
- <li><a href=#the-hr-element-0><span class=secno>10.4.13 </span>The <code>hr</code> element</a></li>
- <li><a href=#the-input-element-as-a-text-entry-widget><span class=secno>10.4.14 </span>The <code>input</code> element as a text entry widget</a></li>
- <li><a href=#the-input-element-as-domain-specific-widgets><span class=secno>10.4.15 </span>The <code>input</code> element as domain-specific widgets</a></li>
- <li><a href=#the-input-element-as-a-range-control><span class=secno>10.4.16 </span>The <code>input</code> element as a range control</a></li>
- <li><a href=#the-input-element-as-a-color-well><span class=secno>10.4.17 </span>The <code>input</code> element as a color well</a></li>
- <li><a href=#the-input-element-as-a-check-box-widget><span class=secno>10.4.18 </span>The <code>input</code> element as a check box widget</a></li>
- <li><a href=#the-input-element-as-a-radio-button-widget><span class=secno>10.4.19 </span>The <code>input</code> element as a radio button widget</a></li>
- <li><a href=#the-input-element-as-a-file-upload-control><span class=secno>10.4.20 </span>The <code>input</code> element as a file upload control</a></li>
- <li><a href=#the-input-element-as-a-button><span class=secno>10.4.21 </span>The <code>input</code> element as a button</a></li>
- <li><a href=#the-marquee-element><span class=secno>10.4.22 </span>The <code>marquee</code> element</a></li>
- <li><a href=#the-meter-element-0><span class=secno>10.4.23 </span>The <code>meter</code> element</a></li>
- <li><a href=#the-progress-element-0><span class=secno>10.4.24 </span>The <code>progress</code> element</a></li>
- <li><a href=#the-select-element-0><span class=secno>10.4.25 </span>The <code>select</code> element</a></li>
- <li><a href=#the-textarea-element-0><span class=secno>10.4.26 </span>The <code>textarea</code> element</a></li>
- <li><a href=#the-title-attribute-0><span class=secno>10.4.27 </span>The <code title=attr-title>title</code> attribute</a></ol></li>
+ <li><a href="#the-'icon'-property"><span class=secno>10.4.4.1 </span>The 'icon' property</a></ol></li>
+ <li><a href=#the-bb-element-0><span class=secno>10.4.5 </span>The <code>bb</code> element</a></li>
+ <li><a href=#the-br-element-0><span class=secno>10.4.6 </span>The <code>br</code> element</a></li>
+ <li><a href=#the-button-element-0><span class=secno>10.4.7 </span>The <code>button</code> element</a></li>
+ <li><a href=#the-datagrid-element><span class=secno>10.4.8 </span>The <code>datagrid</code> element</a></li>
+ <li><a href=#the-details-element-0><span class=secno>10.4.9 </span>The <code>details</code> element</a></li>
+ <li><a href=#the-fieldset-element-0><span class=secno>10.4.10 </span>The <code>fieldset</code> element</a></li>
+ <li><a href=#the-figure-element-0><span class=secno>10.4.11 </span>The <code>figure</code> element</a></li>
+ <li><a href=#the-hr-element-0><span class=secno>10.4.12 </span>The <code>hr</code> element</a></li>
+ <li><a href=#the-input-element-as-a-text-entry-widget><span class=secno>10.4.13 </span>The <code>input</code> element as a text entry widget</a></li>
+ <li><a href=#the-input-element-as-domain-specific-widgets><span class=secno>10.4.14 </span>The <code>input</code> element as domain-specific widgets</a></li>
+ <li><a href=#the-input-element-as-a-range-control><span class=secno>10.4.15 </span>The <code>input</code> element as a range control</a></li>
+ <li><a href=#the-input-element-as-a-color-well><span class=secno>10.4.16 </span>The <code>input</code> element as a color well</a></li>
+ <li><a href=#the-input-element-as-a-check-box-widget><span class=secno>10.4.17 </span>The <code>input</code> element as a check box widget</a></li>
+ <li><a href=#the-input-element-as-a-radio-button-widget><span class=secno>10.4.18 </span>The <code>input</code> element as a radio button widget</a></li>
+ <li><a href=#the-input-element-as-a-file-upload-control><span class=secno>10.4.19 </span>The <code>input</code> element as a file upload control</a></li>
+ <li><a href=#the-input-element-as-a-button><span class=secno>10.4.20 </span>The <code>input</code> element as a button</a></li>
+ <li><a href=#the-marquee-element><span class=secno>10.4.21 </span>The <code>marquee</code> element</a></li>
+ <li><a href=#the-meter-element-0><span class=secno>10.4.22 </span>The <code>meter</code> element</a></li>
+ <li><a href=#the-progress-element-0><span class=secno>10.4.23 </span>The <code>progress</code> element</a></li>
+ <li><a href=#the-select-element-0><span class=secno>10.4.24 </span>The <code>select</code> element</a></li>
+ <li><a href=#the-textarea-element-0><span class=secno>10.4.25 </span>The <code>textarea</code> element</a></li>
+ <li><a href=#the-title-attribute-0><span class=secno>10.4.26 </span>The <code title=attr-title>title</code> attribute</a></ol></li>
<li><a href=#interactive-media><span class=secno>10.5 </span>Interactive media</a>
<ol>
<li><a href=#hit-testing><span class=secno>10.5.1 </span>Hit testing</a></li>
@@ -2952,6 +2952,107 @@
<li><p>Return the <var title="">numbers</var> list and
abort.</li>
+ </ol><h5 id=lists-of-dimensions><span class=secno>2.4.3.7 </span>Lists of dimensions</h5>
+
+ <!-- no definition of a type since no conforming feature uses this
+ syntax (it's only used in cols="" and rows="" on <frameset> -->
+
+ <p>The <dfn id=rules-for-parsing-a-list-of-dimensions>rules for parsing a list of dimensions</dfn> are as
+ follows. These rules return a list of zero or more pairs consisting
+ of a number and a unit, the unit being one of <i>percentage</i>,
+ <i>relative</i>, and <i>absolute</i>.</p>
+
+ <ol><li><p>Let <var title="">raw input</var> be the string being
+ parsed.</li>
+
+ <li><p>If the last character in <var title="">raw input</var> is a
+ U+002C COMMA character (","), then remove that character from <var title="">raw input</var>.</li>
+
+ <li><p><a href=#split-a-string-on-commas title="split a string on commas">Split the string <var title="">raw input</var> on commas</a>. Let <var title="">raw
+ tokens</var> be the resulting list of tokens.</li>
+
+ <li><p>Let <var title="">result</var> be an empty list of
+ number/unit pairs.</li>
+
+ <li>
+
+ <p>For each token in <var title="">raw tokens</var>, run the
+ following substeps:</p>
+
+ <ol><li><p>Let <var title="">input</var> be the token.</li>
+
+ <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
+ string.</li>
+
+ <li><p>Let <var title="">value</var> be the number 0.</li>
+
+ <li><p>Let <var title="">unit</var> be <i>absolute</i>.</li>
+
+ <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, set <var title="">unit</var> to
+ <i>relative</i> and jump to the last substep.</li>
+
+ <li><p>If the character at <var title="">position</var> is a
+ character in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE
+ (9), <a href=#collect-a-sequence-of-characters>collect a sequence of characters</a> in the range
+ U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), interpret the
+ resulting sequence as an integer in base ten, and increment <var title="">value</var> by that integer.</li>
+
+ <li>
+
+ <p>If the character at <var title="">position</var> is a U+002E
+ FULL STOP character (.), run these substeps:</p>
+
+ <ol><li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> consisting
+ of <a href=#space-character title="space character">space characters</a> and
+ characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT
+ NINE (9). Let <var title="">s</var> be the resulting
+ sequence.</li>
+
+ <li><p>Remove all <a href=#space-character title="space character">space
+ characters</a> in <var title="">s</var>.</li>
+
+ <li>
+
+ <p>If <var title="">s</var> is not the empty string, run these
+ subsubsteps:</p>
+
+ <ol><li><p>Let <var title="">length</var> be the number of
+ characters in <var title="">s</var> (after the spaces were
+ removed).</li>
+
+ <li><p>Let <var title="">fraction</var> be the result of
+ interpreting <var title="">s</var> as a base-ten integer, and
+ then dividing that number by <span title="">10<sup title=""><var title="">length</var></sup></span>.</li>
+
+ <li><p>Increment <var title="">value</var> by <var title="">fraction</var>.</li>
+
+ </ol></li>
+
+ </ol></li>
+
+ <li><p><a href=#skip-whitespace>Skip whitespace</a>.</li>
+
+ <li>
+
+ <p>If the character at <var title="">position</var> is a U+0025
+ PERCENT SIGN (%) character, then set <var title="">unit</var> to
+ <i>percentage</i>.</p>
+
+ <p>Otherwise, if the character at <var title="">position</var>
+ is a U+002A ASTERISK character (*), then set <var title="">unit</var> to <i>relative</i>.</p>
+
+ </li>
+
+ <!-- the remaining characters in /input/ are ignored -->
+
+ <li><p>Add an entry to <var title="">result</var> consisting of
+ the number given by <var title="">value</var> and the unit given
+ by <var title="">unit</var>.</li>
+
+ </ol></li>
+
+ <li><p>Return the list <var title="">result</var>.</li>
+
</ol><h4 id=dates-and-times><span class=secno>2.4.4 </span>Dates and times</h4>
<p>In the algorithms below, the <dfn id=number-of-days-in-month-month-of-year-year>number of days in month <var title="">month</var> of year <var title="">year</var></dfn> is:
@@ -3869,14 +3970,19 @@
<h4 id=comma-separated-tokens><span class=secno>2.4.7 </span>Comma-separated tokens</h4>
- <p class=XXX>We should allow whitespace around commas, and
- leading/trailing whitespace.</p>
-
<p>A <dfn id=set-of-comma-separated-tokens>set of comma-separated tokens</dfn> is a set of zero or
more tokens each separated from the next by a single U+002C COMMA
character (<code title="">,</code>), where tokens consist of any
- string of zero or more characters, none of which are U+002C COMMA
- characters (<code title="">,</code>).</p>
+ string of zero or more characters, neither beginning nor ending with
+ <a href=#space-character title="space character">space characters</a>, nor
+ containing any U+002C COMMA characters (<code title="">,</code>),
+ and optionally surrounded by <a href=#space-character title="space character">space
+ characters</a>.</p>
+
+ <p class=example>For instance, the string "<code title="">&nbsp;a&nbsp;,b,,d&nbsp;d&nbsp;</code>" consists of four
+ tokens: "a", "b", the empty string, and "d&nbsp;d". Leading and
+ trailing whitespace around each token doesn't count as part of the
+ token, and the empty string can be a token.</p>
<p><a href=#set-of-comma-separated-tokens title="set of comma-separated tokens">Sets of
comma-separated tokens</a> sometimes have further restrictions on
@@ -3901,10 +4007,12 @@
end of <var title="">input</var>, jump to the last step.</li>
<li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> that are not
- U+002C COMMA characters (<code title="">,</code>).</li>
+ U+002C COMMA characters (<code title="">,</code>). Let <var title="">s</var> be the resulting sequence (which might be the
+ empty string).</li>
- <li><p>Add the string collected in the previous step (which might
- be the empty string) to <var title="">tokens</var>.</li>
+ <li><p>Remove any leading or trailing sequence of <a href=#space-character title="space character">space characters</a> from <var title="">s</var>.</li>
+
+ <li><p>Add <var title="">s</var> to <var title="">tokens</var>.</li>
<li><p>If <var title="">position</var> is not past the end of <var title="">input</var>, then the character at <var title="">position</var> is a U+002C COMMA character (<code title="">,</code>); advance <var title="">position</var> past that
character.</li>
@@ -25736,9 +25844,9 @@ interface <dfn id=htmlformelement>HTMLFormElement</dfn> : <a href=#htmlelement>H
<p>A <dfn id=valid-e-mail-address-list>valid e-mail address list</dfn> is a <a href=#set-of-comma-separated-tokens>set of
comma-separated tokens</a>, where each token is itself a
- <a href=#valid-e-mail-address>valid e-mail address</a>, possibly with one or more leading
- or trailing <a href=#space-character title="space character">space
- characters</a>.</p>
+ <a href=#valid-e-mail-address>valid e-mail address</a>. To obtain the list of tokens from
+ a <a href=#valid-e-mail-address-list>valid e-mail address list</a>, the user agent must <a href=#split-a-string-on-commas title="split a string on commas">split the string on
+ commas</a>.</p>
<p>A <dfn id=valid-e-mail-address>valid e-mail address</dfn> is a string that matches the
production <code title="">dot-atom&nbsp;"@"&nbsp;dot-atom</code>
@@ -27197,7 +27305,9 @@ interface <dfn id=htmlformelement>HTMLFormElement</dfn> : <a href=#htmlelement>H
</dl><p>The tokens must not be <a href=#ascii-case-insensitive>ASCII case-insensitive</a>
matches for any of the other tokens (i.e. duplicates are not
- allowed).</p>
+ allowed). To obtain the list of tokens from the attribute, the user
+ agent must <a href=#split-a-string-on-commas title="split a string on commas">split the
+ attribute value on commas</a>.</p>
<p>User agents should prevent the user from selecting files that are
not accepted by one (or more) of these tokens.</p>
@@ -56030,7 +56140,38 @@ td, th { padding: 1px; }</pre>
<code>frame</code> or <code><a href=#the-iframe-element>iframe</a></code> element. Otherwise, there
is no <a href=#container-frame-element>container frame element</a>.</p>
- <hr><p>The <code><a href=#the-table-element>table</a></code> element's <code title=attr-table-cellspacing>cellspacing</code> attribute
+ <hr><p>If the <code>Document</code> has a <a href=#root-element>root element</a>, and
+ the <code>Document</code>'s <a href=#browsing-context>browsing context</a> is a
+ <a href=#nested-browsing-context>nested browsing context</a>, and the <a href=#browsing-context-container>browsing context
+ container</a> of that <a href=#nested-browsing-context>nested browsing context</a> is a
+ <code>frame</code> or <code><a href=#the-iframe-element>iframe</a></code> element, and that element
+ has a <code title=attr-frames-scrolling>scrolling</code>
+ attribute, then the user agent is expected to compare the value of
+ the attribute in an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> manner to
+ the values in the first column of the following table, and if one of
+ them matches, then the user agent is expected to treat that
+ attribute as a <a href=#presentational-hints title="presentational hints">presentational
+ hint</a> for the aforementioned root element's 'overflow'
+ property, setting it to the value given in the corresponding cell on
+ the same row in the second column:</p>
+
+ <table><thead><tr><th> Attribute value
+ <th> 'overflow' value
+ <tbody><tr><td><code title="">on</code>
+ <td>'scroll'
+ <tr><td><code title="">scroll</code>
+ <td>'scroll'
+ <tr><td><code title="">yes</code>
+ <td>'scroll'
+ <tr><td><code title="">off</code>
+ <td>'hidden'
+ <tr><td><code title="">noscroll</code>
+ <td>'hidden'
+ <tr><td><code title="">no</code>
+ <td>'hidden'
+ <tr><td><code title="">auto</code>
+ <td>'auto'
+ </table><hr><p>The <code><a href=#the-table-element>table</a></code> element's <code title=attr-table-cellspacing>cellspacing</code> attribute
<a href=#maps-to-the-pixel-length-property>maps to the pixel length property</a> 'border-spacing' on the
element.</p>
@@ -56867,25 +57008,287 @@ img[align=right] { margin-left: 3px; }</pre>
- <h4 id=fragment-identifiers><span class=secno>10.4.2 </span>Fragment identifiers</h4>
+ <h4 id=frames><span class=secno>10.4.2 </span>Frames</h4>
- <p class=XXX>(need to remove "must" and reword) CSS UAs in visual
- media must, when scrolling a page to a fragment identifier, align
- the top of the viewport with the target element's top border
- edge.</p> <!-- XXX horiz pos given bidi, and not scrolling when not
- required to? -->
+ <p>When an <code><a href=#the-html-element>html</a></code> element's second child element is a
+ <code>frameset</code> element, the user agent is expected to render
+ the <code>frameset</code> element as described below across the
+ surface of the <a href=#view>view</a>, instead of applying the usual CSS
+ rendering rules.</p>
+ <p>When rendering a <code>frameset</code> on a surface, the user
+ agent is expected to use the following layout algorithm:</p>
+ <ol><li>
- <h4 id=frames><span class=secno>10.4.3 </span>Frames</h4>
+ <p>The <var title="">cols</var> and <var title="">rows</var>
+ variables are lists of zero or more pairs consisting of a number
+ and a unit, the unit being one of <i>percentage</i>,
+ <i>relative</i>, and <i>absolute</i>.</p>
- <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) -->
+ <p>Use the <a href=#rules-for-parsing-a-list-of-dimensions>rules for parsing a list of dimensions</a> to
+ parse the value of the element's <code title=attr-frameset-cols>cols</code> attribute, if there is
+ one. Let <var title="">cols</var> be the result, or an empty list
+ if there is no such attribute.</p>
+
+ <p>Use the <a href=#rules-for-parsing-a-list-of-dimensions>rules for parsing a list of dimensions</a> to
+ parse the value of the element's <code title=attr-frameset-rows>rows</code> attribute, if there is
+ one. Let <var title="">rows</var> be the result, or an empty list
+ if there is no such attribute.</p>
+
+ </li>
+
+ <li>
+
+ <p>For any of the entries in <var title="">cols</var> or <var title="">rows</var> that have the number zero and the unit
+ <i>relative</i>, change the entry's number to one.</p>
+
+ </li>
+
+ <li>
+
+ <p>If <var title="">cols</var> has no entries, then add a single
+ entry consisting of the value 1 and the unit <i>relative</i> to
+ <var title="">cols</var>.</p>
+
+ <p>If <var title="">rows</var> has no entries, then add a single
+ entry consisting of the value 1 and the unit <i>relative</i> to
+ <var title="">rows</var>.</p>
+
+ </li>
+
+ <li>
+
+ <p>Invoke the algorithm defined below to <a href=#convert-a-list-of-dimensions-to-a-list-of-pixel-values>convert a list of
+ dimensions to a list of pixel values</a> using <var title="">cols</var> as the input list, and the width of the
+ surface that the <code><a href=#the-fieldset-element>fieldset</a></code> is being rendered into, in
+ CSS pixels, as the input dimension. Let <var title="">sized
+ cols</var> be the resulting list.</p>
+
+ <p>Invoke the algorithm defined below to <a href=#convert-a-list-of-dimensions-to-a-list-of-pixel-values>convert a list of
+ dimensions to a list of pixel values</a> using <var title="">rows</var> as the input list, and the height of the
+ surface that the <code><a href=#the-fieldset-element>fieldset</a></code> is being rendered into, in
+ CSS pixels, as the input dimension. Let <var title="">sized
+ rows</var> be the resulting list.</p>
+
+ </li>
+
+ <li>
+
+ <p>Split the surface into a grid of <span title=""><var title="">w</var>&times;<var title="">h</var></span> rectangles,
+ where <var title="">w</var> is the number of entries in <var title="">sized cols</var> and <var title="">h</var> is the number
+ of entries in <var title="">sized rows</var>.</p>
+
+ <p>Size the columns so that each column in the grid is as many CSS
+ pixels wide as the corresponding entry in the <var title="">sized
+ cols</var> list.</p>
+
+ <p>Size the rows so that each row in the grid is as many CSS
+ pixels high as the corresponding entry in the <var title="">sized
+ rows</var> list.</p>
+
+ </li>
+
+ <li>
+
+ <p>Let <var title="">children</var> be the list of
+ <code>frame</code> and <code>frameset</code> elements that are
+ children of the <code>frameset</code> element for which the
+ algorithm was invoked.</p>
+
+ </li>
+
+ <li>
+
+ <p>For each row of the grid of rectangles created in the previous
+ step, from top to bottom, run these substeps:</p>
+
+ <ol><li>
+
+ <p>For each rectangle in the row, from left to right, run these
+ substeps:</p>
+
+ <ol><li>
+
+ <p>If there are any elements left in <var title="">children</var>, take the first element in the list,
+ and assign it to the rectangle.</p>
+
+ <p>If this is a <code>frameset</code> element, then recurse
+ the entire <code>frameset</code> layout algorithm for that
+ <code>frameset</code> element, with the rectangle as the
+ surface.</p>
+
+ <p>Otherwise, it is a <code>frame</code> element; create a
+ <a href=#nested-browsing-context>nested browsing context</a> sized to fit the
+ rectangle.</p>
+
+ </li>
+
+ <li>
+
+ <p>If there are any elements left in <var title="">children</var>, remove the first element from <var title="">children</var>.</p>
+
+ </ol></li>
+
+ </ol></li>
+
+ <li>
+
+ <p>If the <code>frameset</code> element <a href=#has-a-border>has a border</a>,
+ draw an outer set of borders around the rectangles, using the
+ element's <a href=#frame-border-color>frame border color</a>.</p>
+
+ <p>For each rectangle, if there is an element assigned to that
+ rectangle, and that element <a href=#has-a-border>has a border</a>, draw an
+ inner set of borders around that rectangle, using the
+ element's <a href=#frame-border-color>frame border color</a>.</p>
+
+ <p>For each (visible) border that does not abut a rectangle that
+ is assigned a <code>frame</code> element with a <code title=attr-frame-noresize>noresize</code> attribute (including
+ rectangles in further nested <code>frameset</code> elements), the
+ user agent is expected to allow the user to move the border,
+ resizing the rectangles within, keeping the proportions of any
+ nested <code>frameset</code> grids.</p>
+
+ <p>A <code>frameset</code> or <code>frame</code> element <dfn id=has-a-border>has
+ a border</dfn> if the following algorithm returns true:</p>
+
+ <ol><li><p>If the element has a <code title=attr-frames-frameborder>frameborder</code> attribute
+ whose value is not the empty string and whose first character is
+ either a U+0031 DIGIT ONE (1), a U+0079 LATIN SMALL LETTER Y, or
+ a U+0059 LATIN CAPITAL LETTER Y, then return true.</li>
+
+ <li><p>Otherwise, if the element has a <code title=attr-frames-frameborder>frameborder</code> attribute,
+ return false.</li>
+
+ <li><p>Otherwise, if the element has a parent element that is a
+ <code>frameset</code> element, then return true if <em>that</em>
+ element <a href=#has-a-border>has a border</a>, and false if it does
+ not.</li>
+
+ <li><p>Otherwise, return true.</li>
+
+ </ol><p>The <dfn id=frame-border-color>frame border color</dfn> of a <code>frameset</code> or
+ <code>frame</code> element is the color obtained from the
+ following algorithm:</p>
+
+ <ol><li><p>If the element has a <code title=attr-frames-bordercolor>bordercolor</code> attribute,
+ then return the color obtained from applying the <a href=#rules-for-parsing-a-legacy-color-value>rules for
+ parsing a legacy color value</a> to that attribute's
+ value.</li>
+
+ <li><p>Otherwise, if the element has a parent element that is a
+ <code>frameset</code> element, then the <a href=#frame-border-color>frame border
+ color</a> of that element.</p>
+
+ <li><p>Otherwise, return gray.</li>
+
+ </ol></li>
+
+ </ol><p>The algorithm to <dfn id=convert-a-list-of-dimensions-to-a-list-of-pixel-values>convert a list of dimensions to a list of
+ pixel values</dfn> consists of the following steps:</p>
+
+ <ol><li>
+
+ <p>Let <var title="">input list</var> be the list of numbers and
+ units passed to the algorithm.</p>
+
+ <p>Let <var title="">output list</var> be a list of numbers the
+ same length as <var title="">input list</var>, all zero.</p>
+
+ <p>Entries in <var title="">output list</var> correspond to the
+ entries in <var title="">input list</var> that have the same
+ position.</p>
+
+ </li>
+
+ <li><p>Let <var title="">input dimension</var> be the size passed
+ to the algorithm.</p>
+
+ <li>
+
+ <p>Let <var title="">count percentage</var> be the number of
+ entries in <var title="">input list</var> whose unit is
+ <i>percentage</i>.</p>
+
+ <p>Let <var title="">total percentage</var> be the sum of all the
+ numbers in <var title="">input list</var> whose unit is
+ <i>percentage</i>.</p>
+
+ <p>Let <var title="">count relative</var> be the number of
+ entries in <var title="">input list</var> whose unit is
+ <i>relative</i>.</p>
+
+ <p>Let <var title="">total relative</var> be the sum of all the
+ numbers in <var title="">input list</var> whose unit is
+ <i>relative</i>.</p>
+
+ <p>Let <var title="">count absolute</var> be the number of
+ entries in <var title="">input list</var> whose unit is
+ <i>absolute</i>.</p>
+
+ <p>Let <var title="">total absolute</var> be the sum of all the
+ numbers in <var title="">input list</var> whose unit is
+ <i>absolute</i>.</p>
+
+ <p>Let <var title="">remaining space</var> be the value of <var title="">input dimension</var>.</p>
+
+ </li>
+
+ <li>
+
+ <p>If <var title="">total absolute</var> is greater than <var title="">remaining space</var>, then for each entry in <var title="">input list</var> whose unit is <i>absolute</i>, set the
+ corresponding value in <var title="">output list</var> to the
+ number of the entry in <var title="">input list</var> multiplied
+ by <var title="">remaining space</var> and divided by <var title="">total absolute</var>. Then, set <var title="">remaining
+ space</var> to zero.</p>
+
+ <p>Otherwise, for each entry in <var title="">input list</var>
+ whose unit is <i>absolute</i>, set the corresponding value in <var title="">output list</var> to the number of the entry in <var title="">input list</var>. Then, decrement <var title="">remaining
+ space</var> by <var title="">total absolute</var>.</p>
+
+ </li>
+
+ <li>
+
+ <p>If <var title="">total percentage</var> multiplied by the <var title="">input dimension</var> and divided by 100 is greater than
+ <var title="">remaining space</var>, then for each entry in <var title="">input list</var> whose unit is <i>percentage</i>, set the
+ corresponding value in <var title="">output list</var> to the
+ number of the entry in <var title="">input list</var> multiplied
+ by <var title="">remaining space</var> and divided by <var title="">total percentage</var>. Then, set <var title="">remaining
+ space</var> to zero.</p>
+
+ <p>Otherwise, for each entry in <var title="">input list</var>
+ whose unit is <i>percentage</i>, set the corresponding value in
+ <var title="">output list</var> to the number of the entry in <var title="">input list</var> multiplied by the <var title="">input
+ dimension</var> and divided by 100. Then, decrement <var title="">remaining space</var> by <var title="">total
+ percentage</var> multiplied by the <var title="">input
+ dimension</var> and divided by 100.</p>
+
+ </li>
+
+ <li>
+
+ <p>For each entry in <var title="">input list</var> whose unit is
+ <i>relative</i>, set the corresponding value in <var title="">output list</var> to the number of the entry in <var title="">input list</var> multiplied by <var title="">remaining
+ space</var> and divided by <var title="">total relative</var>.</p>
+
+ </li>
+
+ <li><p>Return <var title="">output list</var>.</li>
+
+ </ol><p>User agents working with integer values for frame widths (as
+ opposed to user agents that can lay frames out with subpixel
+ accuracy) are expected to distribute the remainder first the last
+ entry whose unit is <i>relative</i>, then equally (not
+ proportionally) to each entry whose unit is <i>percentage</i>, then
+ equally (not proportionally) to each entry whose unit is
+ <i>absolute</i>, and finally, failing all else, to the last
+ entry.</p>
- <h4 id=ruby-annotations><span class=secno>10.4.4 </span>Ruby annotations</h4>
+ <h4 id=ruby-annotations><span class=secno>10.4.3 </span>Ruby annotations</h4>
<p class=XXX>...</p>
@@ -56902,9 +57305,9 @@ img[align=right] { margin-left: 3px; }</pre>
- <h4 id=toolbars-0><span class=secno>10.4.5 </span>Toolbars</h4>
+ <h4 id=toolbars-0><span class=secno>10.4.4 </span>Toolbars</h4>
- <h5 id="the-'icon'-property"><span class=secno>10.4.5.1 </span>The 'icon' property</h5>
+ <h5 id="the-'icon'-property"><span class=secno>10.4.4.1 </span>The 'icon' property</h5>
<p>UAs should use the command's Icon as the default generic icon
provided by the user agent when the 'icon' property computes to
@@ -56915,26 +57318,26 @@ img[align=right] { margin-left: 3px; }</pre>
- <h4 id=the-bb-element-0><span class=secno>10.4.6 </span>The <code><a href=#the-bb-element>bb</a></code> element</h4>
+ <h4 id=the-bb-element-0><span class=secno>10.4.5 </span>The <code><a href=#the-bb-element>bb</a></code> element</h4>
<p class=XXX>...</p>
- <h4 id=the-br-element-0><span class=secno>10.4.7 </span>The <code><a href=#the-br-element>br</a></code> element</h4>
+ <h4 id=the-br-element-0><span class=secno>10.4.6 </span>The <code><a href=#the-br-element>br</a></code> element</h4>
<p class=XXX>...</p>
<!-- clear="left|right|all|both" -->
- <h4 id=the-button-element-0><span class=secno>10.4.8 </span>The <code><a href=#the-button-element>button</a></code> element</h4>
+ <h4 id=the-button-element-0><span class=secno>10.4.7 </span>The <code><a href=#the-button-element>button</a></code> element</h4>
<p class=XXX>...</p>
- <h4 id=the-datagrid-element><span class=secno>10.4.9 </span>The <code><a href=#datagrid>datagrid</a></code> element</h4>
+ <h4 id=the-datagrid-element><span class=secno>10.4.8 </span>The <code><a href=#datagrid>datagrid</a></code> element</h4>
<p class=XXX>This section will probably include details on
how to render DATAGRID (including <span id=datagridPseudos>its
@@ -56943,26 +57346,26 @@ img[align=right] { margin-left: 3px; }</pre>
- <h4 id=the-details-element-0><span class=secno>10.4.10 </span>The <code><a href=#the-details-element>details</a></code> element</h4>
+ <h4 id=the-details-element-0><span class=secno>10.4.9 </span>The <code><a href=#the-details-element>details</a></code> element</h4>
<p class=XXX>...</p>
- <h4 id=the-fieldset-element-0><span class=secno>10.4.11 </span>The <code><a href=#the-fieldset-element>fieldset</a></code> element</h4>
+ <h4 id=the-fieldset-element-0><span class=secno>10.4.10 </span>The <code><a href=#the-fieldset-element>fieldset</a></code> element</h4>
<p class=XXX>...</p>
<!-- XXX <legend align="left|right|center|bottom|top"> -->
- <h4 id=the-figure-element-0><span class=secno>10.4.12 </span>The <code><a href=#the-figure-element>figure</a></code> element</h4>
+ <h4 id=the-figure-element-0><span class=secno>10.4.11 </span>The <code><a href=#the-figure-element>figure</a></code> element</h4>
<p class=XXX>...</p>
- <h4 id=the-hr-element-0><span class=secno>10.4.13 </span>The <code><a href=#the-hr-element>hr</a></code> element</h4>
+ <h4 id=the-hr-element-0><span class=secno>10.4.12 </span>The <code><a href=#the-hr-element>hr</a></code> element</h4>
<p class=XXX>...</p>
<!-- align=left|right|center (as auto margins), width=(int=>width:px; %->width:%)
@@ -56976,7 +57379,7 @@ img[align=right] { margin-left: 3px; }</pre>
- <h4 id=the-input-element-as-a-text-entry-widget><span class=secno>10.4.14 </span>The <code><a href=#the-input-element>input</a></code> element as a text entry widget</h4>
+ <h4 id=the-input-element-as-a-text-entry-widget><span class=secno>10.4.13 </span>The <code><a href=#the-input-element>input</a></code> element as a text entry widget</h4>
<p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a>, <a href=#text-state-and-search-state title=attr-input-type-search>Search</a>, <a href=#url-state title=attr-input-type-url>URL</a>, <a href=#e-mail-state title=attr-input-type-email>E-mail</a>, or <a href=#password-state title=attr-input-type-password>Password</a> state, ...</p>
<!-- datalist presentation -->
@@ -56984,7 +57387,7 @@ img[align=right] { margin-left: 3px; }</pre>
<!-- size: http://mxr.mozilla.org/mozilla-central/ident?i=CalcIntrinsicSize -->
- <h4 id=the-input-element-as-domain-specific-widgets><span class=secno>10.4.15 </span>The <code><a href=#the-input-element>input</a></code> element as domain-specific widgets</h4>
+ <h4 id=the-input-element-as-domain-specific-widgets><span class=secno>10.4.14 </span>The <code><a href=#the-input-element>input</a></code> element as domain-specific widgets</h4>
<p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#date-and-time-state title=attr-input-type-datetime>Date and Time</a>, <a href=#date-state title=attr-input-type-date>Date</a>, <a href=#month-state title=attr-input-type-month>Month</a>, <a href=#week-state title=attr-input-type-week>Week</a>, <a href=#time-state title=attr-input-type-time>Time</a>, <a href=#local-date-and-time-state title=attr-input-type-datetime-local>Local Date and Time</a> or
<a href=#number-state title=attr-input-type-number>Number</a> state...</p>
@@ -56992,77 +57395,77 @@ img[align=right] { margin-left: 3px; }</pre>
- <h4 id=the-input-element-as-a-range-control><span class=secno>10.4.16 </span>The <code><a href=#the-input-element>input</a></code> element as a range control</h4>
+ <h4 id=the-input-element-as-a-range-control><span class=secno>10.4.15 </span>The <code><a href=#the-input-element>input</a></code> element as a range control</h4>
<p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#range-state title=attr-input-type-range>Range</a> state, ...</p>
<!-- datalist presentation -->
- <h4 id=the-input-element-as-a-color-well><span class=secno>10.4.17 </span>The <code><a href=#the-input-element>input</a></code> element as a color well</h4>
+ <h4 id=the-input-element-as-a-color-well><span class=secno>10.4.16 </span>The <code><a href=#the-input-element>input</a></code> element as a color well</h4>
<p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#color-state title=attr-input-type-color>Color</a> state, ...</p>
<!-- datalist presentation -->
- <h4 id=the-input-element-as-a-check-box-widget><span class=secno>10.4.18 </span>The <code><a href=#the-input-element>input</a></code> element as a check box widget</h4>
+ <h4 id=the-input-element-as-a-check-box-widget><span class=secno>10.4.17 </span>The <code><a href=#the-input-element>input</a></code> element as a check box widget</h4>
<p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a> state, ...</p>
- <h4 id=the-input-element-as-a-radio-button-widget><span class=secno>10.4.19 </span>The <code><a href=#the-input-element>input</a></code> element as a radio button widget</h4>
+ <h4 id=the-input-element-as-a-radio-button-widget><span class=secno>10.4.18 </span>The <code><a href=#the-input-element>input</a></code> element as a radio button widget</h4>
<p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#radio-button-state title=attr-input-type-radio>Radio Button</a> state, ...</p>
- <h4 id=the-input-element-as-a-file-upload-control><span class=secno>10.4.20 </span>The <code><a href=#the-input-element>input</a></code> element as a file upload control</h4>
+ <h4 id=the-input-element-as-a-file-upload-control><span class=secno>10.4.19 </span>The <code><a href=#the-input-element>input</a></code> element as a file upload control</h4>
<p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#file-upload-state title=attr-input-type-file>File Upload</a> state, ...</p>
- <h4 id=the-input-element-as-a-button><span class=secno>10.4.21 </span>The <code><a href=#the-input-element>input</a></code> element as a button</h4>
+ <h4 id=the-input-element-as-a-button><span class=secno>10.4.20 </span>The <code><a href=#the-input-element>input</a></code> element as a button</h4>
<p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#submit-button-state title=attr-input-type-submit>Submit Button</a> <a href=#reset-button-state title=attr-input-type-reset>Reset Button</a>, or <a href=#button-state title=attr-input-type-button>Button</a> state, ...</p>
- <h4 id=the-marquee-element><span class=secno>10.4.22 </span>The <code><a href=#the-marquee-element-0>marquee</a></code> element</h4>
+ <h4 id=the-marquee-element><span class=secno>10.4.21 </span>The <code><a href=#the-marquee-element-0>marquee</a></code> element</h4>
<p class=XXX>...</p>
<!-- XXX attributes: height/width; direction is case insensitive; bgcolor; hspace/vspace -->
- <h4 id=the-meter-element-0><span class=secno>10.4.23 </span>The <code><a href=#the-meter-element>meter</a></code> element</h4>
+ <h4 id=the-meter-element-0><span class=secno>10.4.22 </span>The <code><a href=#the-meter-element>meter</a></code> element</h4>
<p class=XXX>...</p>
- <h4 id=the-progress-element-0><span class=secno>10.4.24 </span>The <code><a href=#the-progress-element>progress</a></code> element</h4>
+ <h4 id=the-progress-element-0><span class=secno>10.4.23 </span>The <code><a href=#the-progress-element>progress</a></code> element</h4>
<p class=XXX>...</p>
- <h4 id=the-select-element-0><span class=secno>10.4.25 </span>The <code><a href=#the-select-element>select</a></code> element</h4>
+ <h4 id=the-select-element-0><span class=secno>10.4.24 </span>The <code><a href=#the-select-element>select</a></code> element</h4>
<p class=XXX>...</p>
<!-- multiple, size; optgroup -->
- <h4 id=the-textarea-element-0><span class=secno>10.4.26 </span>The <code><a href=#the-textarea-element>textarea</a></code> element</h4>
+ <h4 id=the-textarea-element-0><span class=secno>10.4.25 </span>The <code><a href=#the-textarea-element>textarea</a></code> element</h4>
<p class=XXX>...</p>
- <h4 id=the-title-attribute-0><span class=secno>10.4.27 </span>The <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute</h4>
+ <h4 id=the-title-attribute-0><span class=secno>10.4.26 </span>The <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute</h4>
<p>Given an element (e.g. the element designated by the mouse
cursor), if the element, or one of its ancestors, has a <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute, and the nearest such
View
543 source
@@ -2124,6 +2124,131 @@
</ol>
+ <h5>Lists of dimensions</h5>
+
+ <!-- no definition of a type since no conforming feature uses this
+ syntax (it's only used in cols="" and rows="" on <frameset> -->
+
+ <p>The <dfn>rules for parsing a list of dimensions</dfn> are as
+ follows. These rules return a list of zero or more pairs consisting
+ of a number and a unit, the unit being one of <i>percentage</i>,
+ <i>relative</i>, and <i>absolute</i>.</p>
+
+ <ol>
+
+ <li><p>Let <var title="">raw input</var> be the string being
+ parsed.</p></li>
+
+ <li><p>If the last character in <var title="">raw input</var> is a
+ U+002C COMMA character (","), then remove that character from <var
+ title="">raw input</var>.</p></li>
+
+ <li><p><span title="split a string on commas">Split the string <var
+ title="">raw input</var> on commas</span>. Let <var title="">raw
+ tokens</var> be the resulting list of tokens.</p></li>
+
+ <li><p>Let <var title="">result</var> be an empty list of
+ number/unit pairs.</p></li>
+
+ <li>
+
+ <p>For each token in <var title="">raw tokens</var>, run the
+ following substeps:</p>
+
+ <ol>
+
+ <li><p>Let <var title="">input</var> be the token.</p></li>
+
+ <li><p>Let <var title="">position</var> be a pointer into <var
+ title="">input</var>, initially pointing at the start of the
+ string.</p></li>
+
+ <li><p>Let <var title="">value</var> be the number 0.</p></li>
+
+ <li><p>Let <var title="">unit</var> be <i>absolute</i>.</p></li>
+
+ <li><p>If <var title="">position</var> is past the end of <var
+ title="">input</var>, set <var title="">unit</var> to
+ <i>relative</i> and jump to the last substep.</p></li>
+
+ <li><p>If the character at <var title="">position</var> is a
+ character in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE
+ (9), <span>collect a sequence of characters</span> in the range
+ U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), interpret the
+ resulting sequence as an integer in base ten, and increment <var
+ title="">value</var> by that integer.</p></li>
+
+ <li>
+
+ <p>If the character at <var title="">position</var> is a U+002E
+ FULL STOP character (.), run these substeps:</p>
+
+ <ol>
+
+ <li><p><span>Collect a sequence of characters</span> consisting
+ of <span title="space character">space characters</span> and
+ characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT
+ NINE (9). Let <var title="">s</var> be the resulting
+ sequence.</p></li>
+
+ <li><p>Remove all <span title="space character">space
+ characters</span> in <var title="">s</var>.</p></li>
+
+ <li>
+
+ <p>If <var title="">s</var> is not the empty string, run these
+ subsubsteps:</p>
+
+ <ol>
+
+ <li><p>Let <var title="">length</var> be the number of
+ characters in <var title="">s</var> (after the spaces were
+ removed).</p></li>
+
+ <li><p>Let <var title="">fraction</var> be the result of
+ interpreting <var title="">s</var> as a base-ten integer, and
+ then dividing that number by <span title="">10<sup
+ title=""><var title="">length</var></sup></span>.</li>
+
+ <li><p>Increment <var title="">value</var> by <var
+ title="">fraction</var>.</p></li>
+
+ </ol>
+
+ </li>
+
+ </ol>
+
+ </li>
+
+ <li><p><span>Skip whitespace</span>.</p></li>
+
+ <li>
+
+ <p>If the character at <var title="">position</var> is a U+0025
+ PERCENT SIGN (%) character, then set <var title="">unit</var> to
+ <i>percentage</i>.</p>
+
+ <p>Otherwise, if the character at <var title="">position</var>
+ is a U+002A ASTERISK character (*), then set <var
+ title="">unit</var> to <i>relative</i>.</p>
+
+ </li>
+
+ <!-- the remaining characters in /input/ are ignored -->
+
+ <li><p>Add an entry to <var title="">result</var> consisting of
+ the number given by <var title="">value</var> and the unit given
+ by <var title="">unit</var>.</p></li>
+
+ </ol>
+
+ </li>
+
+ <li><p>Return the list <var title="">result</var>.</p></li>
+
+ </ol>
+
<h4>Dates and times</h4>
@@ -3346,14 +3471,20 @@
<h4>Comma-separated tokens</h4>
- <p class="XXX">We should allow whitespace around commas, and
- leading/trailing whitespace.</p>
-
<p>A <dfn>set of comma-separated tokens</dfn> is a set of zero or
more tokens each separated from the next by a single U+002C COMMA
character (<code title="">,</code>), where tokens consist of any
- string of zero or more characters, none of which are U+002C COMMA
- characters (<code title="">,</code>).</p>
+ string of zero or more characters, neither beginning nor ending with
+ <span title="space character">space characters</span>, nor
+ containing any U+002C COMMA characters (<code title="">,</code>),
+ and optionally surrounded by <span title="space character">space
+ characters</span>.</p>
+
+ <p class="example">For instance, the string "<code
+ title="">&nbsp;a&nbsp;,b,,d&nbsp;d&nbsp;</code>" consists of four
+ tokens: "a", "b", the empty string, and "d&nbsp;d". Leading and
+ trailing whitespace around each token doesn't count as part of the
+ token, and the empty string can be a token.</p>
<p><span title="set of comma-separated tokens">Sets of
comma-separated tokens</span> sometimes have further restrictions on
@@ -3381,10 +3512,16 @@
end of <var title="">input</var>, jump to the last step.</p></li>
<li><p><span>Collect a sequence of characters</span> that are not
- U+002C COMMA characters (<code title="">,</code>).</p></li>
+ U+002C COMMA characters (<code title="">,</code>). Let <var
+ title="">s</var> be the resulting sequence (which might be the
+ empty string).</p></li>
+
+ <li><p>Remove any leading or trailing sequence of <span
+ title="space character">space characters</span> from <var
+ title="">s</var>.</p></li>
- <li><p>Add the string collected in the previous step (which might
- be the empty string) to <var title="">tokens</var>.</p></li>
+ <li><p>Add <var title="">s</var> to <var
+ title="">tokens</var>.</p></li>
<li><p>If <var title="">position</var> is not past the end of <var
title="">input</var>, then the character at <var
@@ -28593,9 +28730,10 @@ interface <dfn>HTMLFormElement</dfn> : <span>HTMLElement</span> {
<p>A <dfn>valid e-mail address list</dfn> is a <span>set of
comma-separated tokens</span>, where each token is itself a
- <span>valid e-mail address</span>, possibly with one or more leading
- or trailing <span title="space character">space
- characters</span>.</p>
+ <span>valid e-mail address</span>. To obtain the list of tokens from
+ a <span>valid e-mail address list</span>, the user agent must <span
+ title="split a string on commas">split the string on
+ commas</span>.</p>
<p>A <dfn>valid e-mail address</dfn> is a string that matches the
production <code title="">dot-atom&nbsp;"@"&nbsp;dot-atom</code>
@@ -30257,7 +30395,9 @@ interface <dfn>HTMLFormElement</dfn> : <span>HTMLElement</span> {
<p>The tokens must not be <span>ASCII case-insensitive</span>
matches for any of the other tokens (i.e. duplicates are not
- allowed).</p>
+ allowed). To obtain the list of tokens from the attribute, the user
+ agent must <span title="split a string on commas">split the
+ attribute value on commas</span>.</p>
<p>User agents should prevent the user from selecting files that are
not accepted by one (or more) of these tokens.</p>
@@ -61299,6 +61439,52 @@ td, th { padding: 1px; }</pre>
<hr>
+ <p>If the <code>Document</code> has a <span>root element</span>, and
+ the <code>Document</code>'s <span>browsing context</span> is a
+ <span>nested browsing context</span>, and the <span>browsing context
+ container</span> of that <span>nested browsing context</span> is a
+ <code>frame</code> or <code>iframe</code> element, and that element
+ has a <code title="attr-frames-scrolling">scrolling</code>
+ attribute, then the user agent is expected to compare the value of
+ the attribute in an <span>ASCII case-insensitive</span> manner to
+ the values in the first column of the following table, and if one of
+ them matches, then the user agent is expected to treat that
+ attribute as a <span title="presentational hints">presentational
+ hint</span> for the aforementioned root element's 'overflow'
+ property, setting it to the value given in the corresponding cell on
+ the same row in the second column:</p>
+
+ <table>
+ <thead>
+ <tr>
+ <th> Attribute value
+ <th> 'overflow' value
+ <tbody>
+ <tr>
+ <td><code title="">on</code>
+ <td>'scroll'
+ <tr>
+ <td><code title="">scroll</code>
+ <td>'scroll'
+ <tr>
+ <td><code title="">yes</code>
+ <td>'scroll'
+ <tr>
+ <td><code title="">off</code>
+ <td>'hidden'
+ <tr>
+ <td><code title="">noscroll</code>
+ <td>'hidden'
+ <tr>
+ <td><code title="">no</code>
+ <td>'hidden'
+ <tr>
+ <td><code title="">auto</code>
+ <td>'auto'
+ </table>
+
+ <hr>
+
<p>The <code>table</code> element's <code
title="attr-table-cellspacing">cellspacing</code> attribute
<span>maps to the pixel length property</span> 'border-spacing' on the
@@ -62239,21 +62425,334 @@ img[align=right] { margin-left: 3px; }</pre>
- <h4>Fragment identifiers</h4>
+ <h4>Frames</h4>
- <p class="XXX">(need to remove "must" and reword) CSS UAs in visual
- media must, when scrolling a page to a fragment identifier, align
- the top of the viewport with the target element's top border
- edge.</p> <!-- XXX horiz pos given bidi, and not scrolling when not
- required to? -->
+ <p>When an <code>html</code> element's second child element is a
+ <code>frameset</code> element, the user agent is expected to render
+ the <code>frameset</code> element as described below across the
+ surface of the <span>view</span>, instead of applying the usual CSS
+ rendering rules.</p>
+ <p>When rendering a <code>frameset</code> on a surface, the user
+ agent is expected to use the following layout algorithm:</p>
+ <ol>
- <h4>Frames</h4>
+ <li>
- <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) -->
+ <p>The <var title="">cols</var> and <var title="">rows</var>
+ variables are lists of zero or more pairs consisting of a number
+ and a unit, the unit being one of <i>percentage</i>,
+ <i>relative</i>, and <i>absolute</i>.</p>
+
+ <p>Use the <span>rules for parsing a list of dimensions</span> to
+ parse the value of the element's <code
+ title="attr-frameset-cols">cols</code> attribute, if there is
+ one. Let <var title="">cols</var> be the result, or an empty list
+ if there is no such attribute.</p>
+
+ <p>Use the <span>rules for parsing a list of dimensions</span> to
+ parse the value of the element's <code
+ title="attr-frameset-rows">rows</code> attribute, if there is
+ one. Let <var title="">rows</var> be the result, or an empty list
+ if there is no such attribute.</p>
+
+ </li>
+
+ <li>
+
+ <p>For any of the entries in <var title="">cols</var> or <var
+ title="">rows</var> that have the number zero and the unit
+ <i>relative</i>, change the entry's number to one.</p>
+
+ </li>
+
+ <li>
+
+ <p>If <var title="">cols</var> has no entries, then add a single
+ entry consisting of the value 1 and the unit <i>relative</i> to
+ <var title="">cols</var>.</p>
+
+ <p>If <var title="">rows</var> has no entries, then add a single
+ entry consisting of the value 1 and the unit <i>relative</i> to
+ <var title="">rows</var>.</p>
+
+ </li>
+
+ <li>
+
+ <p>Invoke the algorithm defined below to <span>convert a list of
+ dimensions to a list of pixel values</span> using <var
+ title="">cols</var> as the input list, and the width of the
+ surface that the <code>fieldset</code> is being rendered into, in
+ CSS pixels, as the input dimension. Let <var title="">sized
+ cols</var> be the resulting list.</p>
+
+ <p>Invoke the algorithm defined below to <span>convert a list of
+ dimensions to a list of pixel values</span> using <var
+ title="">rows</var> as the input list, and the height of the
+ surface that the <code>fieldset</code> is being rendered into, in
+ CSS pixels, as the input dimension. Let <var title="">sized
+ rows</var> be the resulting list.</p>
+
+ </li>
+
+ <li>
+
+ <p>Split the surface into a grid of <span title=""><var
+ title="">w</var>&times;<var title="">h</var></span> rectangles,
+ where <var title="">w</var> is the number of entries in <var
+ title="">sized cols</var> and <var title="">h</var> is the number
+ of entries in <var title="">sized rows</var>.</p>
+
+ <p>Size the columns so that each column in the grid is as many CSS
+ pixels wide as the corresponding entry in the <var title="">sized
+ cols</var> list.</p>
+
+ <p>Size the rows so that each row in the grid is as many CSS
+ pixels high as the corresponding entry in the <var title="">sized
+ rows</var> list.</p>
+
+ </li>
+
+ <li>
+
+ <p>Let <var title="">children</var> be the list of
+ <code>frame</code> and <code>frameset</code> elements that are
+ children of the <code>frameset</code> element for which the
+ algorithm was invoked.</p>
+
+ </li>
+
+ <li>
+
+ <p>For each row of the grid of rectangles created in the previous
+ step, from top to bottom, run these substeps:</p>
+
+ <ol>
+
+ <li>
+
+ <p>For each rectangle in the row, from left to right, run these
+ substeps:</p>
+
+ <ol>
+
+ <li>
+
+ <p>If there are any elements left in <var
+ title="">children</var>, take the first element in the list,
+ and assign it to the rectangle.</p>
+
+ <p>If this is a <code>frameset</code> element, then recurse
+ the entire <code>frameset</code> layout algorithm for that
+ <code>frameset</code> element, with the rectangle as the
+ surface.</p>
+
+ <p>Otherwise, it is a <code>frame</code> element; create a
+ <span>nested browsing context</span> sized to fit the
+ rectangle.</p>
+
+ </li>
+
+ <li>
+
+ <p>If there are any elements left in <var
+ title="">children</var>, remove the first element from <var
+ title="">children</var>.</p>
+
+ </ol>
+
+ </li>
+
+ </ol>
+
+ </li>
+
+ <li>
+
+ <p>If the <code>frameset</code> element <span>has a border</span>,
+ draw an outer set of borders around the rectangles, using the
+ element's <span>frame border color</span>.</p>
+
+ <p>For each rectangle, if there is an element assigned to that
+ rectangle, and that element <span>has a border</span>, draw an
+ inner set of borders around that rectangle, using the
+ element's <span>frame border color</span>.</p>
+
+ <p>For each (visible) border that does not abut a rectangle that
+ is assigned a <code>frame</code> element with a <code
+ title="attr-frame-noresize">noresize</code> attribute (including
+ rectangles in further nested <code>frameset</code> elements), the
+ user agent is expected to allow the user to move the border,
+ resizing the rectangles within, keeping the proportions of any
+ nested <code>frameset</code> grids.</p>
+
+ <p>A <code>frameset</code> or <code>frame</code> element <dfn>has
+ a border</dfn> if the following algorithm returns true:</p>
+
+ <ol>
+
+ <li><p>If the element has a <code
+ title="attr-frames-frameborder">frameborder</code> attribute
+ whose value is not the empty string and whose first character is
+ either a U+0031 DIGIT ONE (1), a U+0079 LATIN SMALL LETTER Y, or
+ a U+0059 LATIN CAPITAL LETTER Y, then return true.</p></li>
+
+ <li><p>Otherwise, if the element has a <code
+ title="attr-frames-frameborder">frameborder</code> attribute,
+ return false.</p></li>
+
+ <li><p>Otherwise, if the element has a parent element that is a
+ <code>frameset</code> element, then return true if <em>that</em>
+ element <span>has a border</span>, and false if it does
+ not.</p></li>
+
+ <li><p>Otherwise, return true.</p></li>
+
+ </ol>
+
+ <p>The <dfn>frame border color</dfn> of a <code>frameset</code> or
+ <code>frame</code> element is the color obtained from the
+ following algorithm:</p>
+
+ <ol>
+
+ <li><p>If the element has a <code
+ title="attr-frames-bordercolor">bordercolor</code> attribute,
+ then return the color obtained from applying the <span>rules for
+ parsing a legacy color value</span> to that attribute's
+ value.</p></li>
+
+ <li><p>Otherwise, if the element has a parent element that is a
+ <code>frameset</code> element, then the <span>frame border
+ color</span> of that element.</p>
+
+ <li><p>Otherwise, return gray.</p></li>
+
+ </ol>
+
+ </li>
+
+ </ol>
+
+ <p>The algorithm to <dfn>convert a list of dimensions to a list of
+ pixel values</dfn> consists of the following steps:</p>
+
+ <ol>
+
+ <li>
+
+ <p>Let <var title="">input list</var> be the list of numbers and
+ units passed to the algorithm.</p>
+
+ <p>Let <var title="">output list</var> be a list of numbers the
+ same length as <var title="">input list</var>, all zero.</p>
+
+ <p>Entries in <var title="">output list</var> correspond to the
+ entries in <var title="">input list</var> that have the same
+ position.</p>
+
+ </li>
+
+ <li><p>Let <var title="">input dimension</var> be the size passed
+ to the algorithm.</p>
+
+ <li>
+
+ <p>Let <var title="">count percentage</var> be the number of
+ entries in <var title="">input list</var> whose unit is
+ <i>percentage</i>.</p>
+
+ <p>Let <var title="">total percentage</var> be the sum of all the
+ numbers in <var title="">input list</var> whose unit is
+ <i>percentage</i>.</p>
+
+ <p>Let <var title="">count relative</var> be the number of
+ entries in <var title="">input list</var> whose unit is
+ <i>relative</i>.</p>
+
+ <p>Let <var title="">total relative</var> be the sum of all the
+ numbers in <var title="">input list</var> whose unit is
+ <i>relative</i>.</p>
+
+ <p>Let <var title="">count absolute</var> be the number of
+ entries in <var title="">input list</var> whose unit is
+ <i>absolute</i>.</p>
+
+ <p>Let <var title="">total absolute</var> be the sum of all the
+ numbers in <var title="">input list</var> whose unit is
+ <i>absolute</i>.</p>
+
+ <p>Let <var title="">remaining space</var> be the value of <var
+ title="">input dimension</var>.</p>
+
+ </li>
+
+ <li>
+
+ <p>If <var title="">total absolute</var> is greater than <var
+ title="">remaining space</var>, then for each entry in <var
+ title="">input list</var> whose unit is <i>absolute</i>, set the
+ corresponding value in <var title="">output list</var> to the
+ number of the entry in <var title="">input list</var> multiplied
+ by <var title="">remaining space</var> and divided by <var
+ title="">total absolute</var>. Then, set <var title="">remaining
+ space</var> to zero.</p>
+
+ <p>Otherwise, for each entry in <var title="">input list</var>
+ whose unit is <i>absolute</i>, set the corresponding value in <var
+ title="">output list</var> to the number of the entry in <var
+ title="">input list</var>. Then, decrement <var title="">remaining
+ space</var> by <var title="">total absolute</var>.</p>
+
+ </li>
+
+ <li>
+
+ <p>If <var title="">total percentage</var> multiplied by the <var
+ title="">input dimension</var> and divided by 100 is greater than
+ <var title="">remaining space</var>, then for each entry in <var
+ title="">input list</var> whose unit is <i>percentage</i>, set the
+ corresponding value in <var title="">output list</var> to the
+ number of the entry in <var title="">input list</var> multiplied
+ by <var title="">remaining space</var> and divided by <var
+ title="">total percentage</var>. Then, set <var title="">remaining
+ space</var> to zero.</p>
+
+ <p>Otherwise, for each entry in <var title="">input list</var>
+ whose unit is <i>percentage</i>, set the corresponding value in
+ <var title="">output list</var> to the number of the entry in <var
+ title="">input list</var> multiplied by the <var title="">input
+ dimension</var> and divided by 100. Then, decrement <var
+ title="">remaining space</var> by <var title="">total
+ percentage</var> multiplied by the <var title="">input
+ dimension</var> and divided by 100.</p>
+
+ </li>
+
+ <li>
+
+ <p>For each entry in <var title="">input list</var> whose unit is
+ <i>relative</i>, set the corresponding value in <var
+ title="">output list</var> to the number of the entry in <var
+ title="">input list</var> multiplied by <var title="">remaining
+ space</var> and divided by <var title="">total relative</var>.</p>
+
+ </li>
+
+ <li><p>Return <var title="">output list</var>.</p></li>
+
+ </ol>
+
+ <p>User agents working with integer values for frame widths (as
+ opposed to user agents that can lay frames out with subpixel
+ accuracy) are expected to distribute the remainder first the last
+ entry whose unit is <i>relative</i>, then equally (not
+ proportionally) to each entry whose unit is <i>percentage</i>, then
+ equally (not proportionally) to each entry whose unit is
+ <i>absolute</i>, and finally, failing all else, to the last
+ entry.</p>

0 comments on commit 169d94f

Please sign in to comment.
Something went wrong with that request. Please try again.