[html5] r3141 - [] (0) <marquee>, CSS side
whatwg at whatwg.org
whatwg at whatwg.org
Tue May 26 18:00:47 PDT 2009
Author: ianh
Date: 2009-05-26 18:00:45 -0700 (Tue, 26 May 2009)
New Revision: 3141
Modified:
index
source
Log:
[] (0) <marquee>, CSS side
Modified: index
===================================================================
--- index 2009-05-26 10:36:50 UTC (rev 3140)
+++ index 2009-05-27 01:00:45 UTC (rev 3141)
@@ -39,7 +39,7 @@
<div class=head>
<p><a class=logo href=http://www.whatwg.org/ rel=home><img alt=WHATWG src=/images/logo></a></p>
<h1>HTML 5</h1>
- <h2 class="no-num no-toc" id=draft-recommendation-—-date:-01-jan-1901>Draft Recommendation — 26 May 2009</h2>
+ <h2 class="no-num no-toc" id=draft-recommendation-—-date:-01-jan-1901>Draft Recommendation — 27 May 2009</h2>
<p>You can take part in this work. <a href=http://www.whatwg.org/mailing-list>Join the working group's discussion list.</a></p>
<p><strong>Web designers!</strong> We have a <a href=http://blog.whatwg.org/faq/>FAQ</a>, a <a href=http://forums.whatwg.org/>forum</a>, and a <a href=http://www.whatwg.org/mailing-list#help>help mailing list</a> for you!</p>
<dl><dt>Multiple-page version:</dt>
@@ -69308,11 +69308,166 @@
<h4 id=the-marquee-element><span class=secno>11.4.13 </span>The <code><a href=#the-marquee-element-0>marquee</a></code> element</h4>
- <p class=XXX>...(Waiting til I've specced the DOM side of this)...</p>
- <!-- XXX attributes: height/width; direction is case insensitive; bgcolor; hspace/vspace -->
+ <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
+marquee {
+ binding: <i title="">marquee</i>;
+}</pre>
+ <p>When the <i title="">marquee</i> binding applies to a
+ <code><a href=#the-marquee-element-0>marquee</a></code> element, while the element is <a href=#concept-marquee-on title=concept-marquee-on>turned on</a>, the element is expected
+ to render in an animated fashion according to its attributes as
+ follows:</p>
+ <dl><dt>If the element's <code title=attr-marquee-behavior><a href=#attr-marquee-behavior>behavior</a></code> attribute is in the
+ <a href=#attr-marquee-behavior-scroll title=attr-marquee-behavior-scroll>scroll</a> state</dt>
+
+ <dd>
+
+ <p>Slide the contents of the element in the direction described by
+ the <code title=attr-marquee-direction><a href=#attr-marquee-direction>direction</a></code>
+ attribute as defined below, such that it begins off the start side
+ of the <code><a href=#the-marquee-element-0>marquee</a></code>, and ends flush with the inner end
+ side.</p>
+
+ <p class=example>For example, if the <code title=attr-marquee-direction><a href=#attr-marquee-direction>direction</a></code> attribute is <a href=#attr-marquee-direction-left title=attr-marquee-direction-left>left</a> (the default),
+ then the contents would start such that their left edge are off
+ the side of the right edge of the <code><a href=#the-marquee-element-0>marquee</a></code>'s content
+ area, and the contents would then slide up to the point where the
+ left edge of the contents are flush with the left inner edge of
+ the <code><a href=#the-marquee-element-0>marquee</a></code>'s content area.</p>
+
+ <p>Once the animation has ended, the user agent is expected to
+ <a href=#increment-the-marquee-current-loop-index>increment the marquee current loop index</a>. If the
+ element is still <a href=#concept-marquee-on title=concept-marquee-on>turned on</a>
+ after this, then the user agent is expected to restart the
+ animation.</p>
+
+ </dd>
+
+ <dt>If the element's <code title=attr-marquee-behavior><a href=#attr-marquee-behavior>behavior</a></code> attribute is in the
+ <a href=#attr-marquee-behavior-slide title=attr-marquee-behavior-slide>slide</a> state</dt>
+
+ <dd>
+
+ <p>Slide the contents of the element in the direction described by
+ the <code title=attr-marquee-direction><a href=#attr-marquee-direction>direction</a></code>
+ attribute as defined below, such that it begins off the start side
+ of the <code><a href=#the-marquee-element-0>marquee</a></code>, and ends off the end side of the
+ <code><a href=#the-marquee-element-0>marquee</a></code>.</p>
+
+ <p class=example>For example, if the <code title=attr-marquee-direction><a href=#attr-marquee-direction>direction</a></code> attribute is <a href=#attr-marquee-direction-left title=attr-marquee-direction-left>left</a> (the default),
+ then the contents would start such that their left edge are off
+ the side of the right edge of the <code><a href=#the-marquee-element-0>marquee</a></code>'s content
+ area, and the contents would then slide up to the point where the
+ <em>right</em> edge of the contents are flush with the left inner
+ edge of the <code><a href=#the-marquee-element-0>marquee</a></code>'s content area.</p>
+
+ <p>Once the animation has ended, the user agent is expected to
+ <a href=#increment-the-marquee-current-loop-index>increment the marquee current loop index</a>. If the
+ element is still <a href=#concept-marquee-on title=concept-marquee-on>turned on</a>
+ after this, then the user agent is expected to restart the
+ animation.</p>
+
+ </dd>
+
+ <dt>If the element's <code title=attr-marquee-behavior><a href=#attr-marquee-behavior>behavior</a></code> attribute is in the
+ <a href=#attr-marquee-behavior-alternate title=attr-marquee-behavior-alternate>alternate</a>
+ state</dt>
+
+ <dd>
+
+ <p>When the <a href=#marquee-current-loop-index>marquee current loop index</a> is even (or
+ zero), slide the contents of the element in the direction
+ described by the <code title=attr-marquee-direction><a href=#attr-marquee-direction>direction</a></code> attribute as
+ defined below, such that it begins flush with the start side of
+ the <code><a href=#the-marquee-element-0>marquee</a></code>, and ends flush with the end side of the
+ <code><a href=#the-marquee-element-0>marquee</a></code>.</p>
+
+ <p>When the <a href=#marquee-current-loop-index>marquee current loop index</a> is odd, slide
+ the contents of the element in the opposite direction than that
+ described by the <code title=attr-marquee-direction><a href=#attr-marquee-direction>direction</a></code> attribute as
+ defined below, such that it begins flush with the end side of the
+ <code><a href=#the-marquee-element-0>marquee</a></code>, and ends flush with the start side of the
+ <code><a href=#the-marquee-element-0>marquee</a></code>.</p>
+
+ <p class=example>For example, if the <code title=attr-marquee-direction><a href=#attr-marquee-direction>direction</a></code> attribute is <a href=#attr-marquee-direction-left title=attr-marquee-direction-left>left</a> (the default),
+ then the contents would with their right edge flush with the right
+ inner edge of the <code><a href=#the-marquee-element-0>marquee</a></code>'s content area, and the
+ contents would then slide up to the point where the <em>left</em>
+ edge of the contents are flush with the left inner edge of the
+ <code><a href=#the-marquee-element-0>marquee</a></code>'s content area.</p>
+
+ <p>Once the animation has ended, the user agent is expected to
+ <a href=#increment-the-marquee-current-loop-index>increment the marquee current loop index</a>. If the
+ element is still <a href=#concept-marquee-on title=concept-marquee-on>turned on</a>
+ after this, then the user agent is expected to continue the
+ animation.</p>
+
+ </dd>
+
+ </dl><p>The <code title=attr-marquee-direction><a href=#attr-marquee-direction>direction</a></code>
+ attribute has the meanings described in the following table:</p>
+
+ <table><thead><tr><th><code title=attr-marquee-direction><a href=#attr-marquee-direction>direction</a></code> attribute state
+ <th>Direction of animation
+ <th>Start edge
+ <th>End edge
+ <th>Opposite direction
+ <tbody><tr><td><a href=#attr-marquee-direction-left title=attr-marquee-direction-left>left</a>
+ <td>← Right to left
+ <td>Right
+ <td>Left
+ <td>→ Left to Right
+ <tr><td><a href=#attr-marquee-direction-right title=attr-marquee-direction-right>right</a>
+ <td>→ Left to Right
+ <td>Left
+ <td>Right
+ <td>← Right to left
+ <tr><td><a href=#attr-marquee-direction-up title=attr-marquee-direction-up>up</a>
+ <td>↑ Up (Bottom to Top)
+ <td>Bottom
+ <td>Top
+ <td>↓ Down (Top to Button)
+ <tr><td><a href=#attr-marquee-direction-down title=attr-marquee-direction-down>down</a>
+ <td>↓ Down (Top to Button)
+ <td>Top
+ <td>Bottom
+ <td>↑ Up (Bottom to Top)
+ </table><p>In any case, the animation should proceed such that there is a
+ delay given by the <a href=#marquee-scroll-interval>marquee scroll interval</a> between each
+ frame, and such that the content moves at most the distance given by
+ the <a href=#marquee-scroll-distance>marquee scroll distance</a> with each frame.</p>
+
+ <p>When a <code><a href=#the-marquee-element-0>marquee</a></code> element has a <code title=attr-bgcolor>bgcolor</code> attribute set, the value is
+ expected to be parsed using the <a href=#rules-for-parsing-a-legacy-color-value>rules for parsing a legacy
+ color value</a>, and if that does not return an error, the user
+ agent is expected to treat the attribute as a <a href=#presentational-hints title="presentational hints">presentational hint</a> setting the
+ element's 'background-color' property to the resulting color.</p>
+
+ <p>The <code title=attr-marquee-width>width</code> and <code title=attr-marquee-height>height</code> attributes on a
+ <code><a href=#the-marquee-element-0>marquee</a></code> element <a href=#maps-to-the-pixel-length-property title="maps to the pixel length
+ property">map to the dimension properties</a> 'width' and
+ 'height' on the element respectively.</p>
+
+ <p>The intrinsic height of a <code><a href=#the-marquee-element-0>marquee</a></code> element with its
+ <code title=attr-marquee-direction><a href=#attr-marquee-direction>direction</a></code> attribute in
+ the <a href=#attr-marquee-direction-up title=attr-marquee-direction-up>up</a> or <a href=#attr-marquee-direction-down title=attr-marquee-direction-down>down</a> states is 200 CSS
+ pixels.</p>
+
+ <p>The <code title=attr-marquee-vspace>vspace</code> attribute of
+ a <code><a href=#the-marquee-element-0>marquee</a></code> element <a href=#maps-to-the-dimension-property title="maps to the dimension
+ property">maps to the dimension properties</a> 'margin-top' and
+ 'margin-bottom' on the element. The <code title=attr-marquee-hspace>hspace</code> attribute of a
+ <code><a href=#the-marquee-element-0>marquee</a></code> element <a href=#maps-to-the-dimension-property title="maps to the dimension
+ property">maps to the dimension properties</a> 'margin-left' and
+ 'margin-right' on the element.</p>
+
+ <p>The 'overflow' property on the <code><a href=#the-marquee-element-0>marquee</a></code> element is
+ expected to be ignored; overflow is expected to always be
+ hidden.</p>
+
+
<h4 id=the-meter-element-0><span class=secno>11.4.14 </span>The <code><a href=#the-meter-element>meter</a></code> element</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
@@ -69882,7 +70037,7 @@
content in an interoperable fashion.</p>
<!-- XXX Elements that have been dropped: ACRONYM B BASEFONT BLINK BIG
-CENTER DIR DIV FONT FRAME FRAMESET I ISINDEX MARQUEE NOEMBED NOFRAMES
+CENTER DIR DIV FONT FRAME FRAMESET I ISINDEX NOEMBED NOFRAMES
S SPACER STRIKE TT U -->
@@ -69922,17 +70077,20 @@
animates content. CSS transitions and animations are a more
appropriate mechanism.</p>
+ <p>The <a href=#task-source>task source</a> for tasks mentioned in this section
+ is the <a href=#dom-manipulation-task-source>DOM manipulation task source</a>.</p>
+
<pre class=idl>interface <dfn id=htmlmarqueeelement>HTMLMarqueeElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
attribute DOMString <a href=#dom-marquee-behavior title=dom-marquee-behavior>behavior</a>;
attribute DOMString <a href=#dom-marquee-bgcolor title=dom-marquee-bgColor>bgColor</a>;
attribute DOMString <a href=#dom-marquee-direction title=dom-marquee-direction>direction</a>;
attribute DOMString <a href=#dom-marquee-height title=dom-marquee-height>height</a>;
- attribute DOMString <a href=#dom-marquee-hspace title=dom-marquee-hspace>hspace</a>;
- attribute DOMString <a href=#dom-marquee-loop title=dom-marquee-loop>loop</a>;
- attribute DOMString <a href=#dom-marquee-scrollamount title=dom-marquee-scrollamount>scrollamount</a>;
- attribute DOMString <a href=#dom-marquee-scrolldelay title=dom-marquee-scrolldelay>scrolldelay</a>;
+ attribute unsigned long <a href=#dom-marquee-hspace title=dom-marquee-hspace>hspace</a>;
+ attribute long <a href=#dom-marquee-loop title=dom-marquee-loop>loop</a>;
+ attribute unsigned long <a href=#dom-marquee-scrollamount title=dom-marquee-scrollamount>scrollAmount</a>;
+ attribute unsigned long <a href=#dom-marquee-scrolldelay title=dom-marquee-scrollDelay>scrollDelay</a>;
attribute DOMString <a href=#dom-marquee-truespeed title=dom-marquee-trueSpeed>trueSpeed</a>;
- attribute DOMString <a href=#dom-marquee-vspace title=dom-marquee-vspace>vspace</a>;
+ attribute unsigned long <a href=#dom-marquee-vspace title=dom-marquee-vspace>vspace</a>;
attribute DOMString <a href=#dom-marquee-width title=dom-marquee-width>width</a>;
attribute <a href=#function>Function</a> <a href=#handler-marquee-onbounce title=handler-marquee-onbounce>onbounce</a>;
@@ -69943,7 +70101,20 @@
void <a href=#dom-marquee-stop title=dom-marquee-stop>stop</a>()
};</pre>
- <p>The <dfn id=attr-marquee-behavior title=attr-marquee-behavior><code>behavior</code></dfn> content
+ <p>A <code><a href=#the-marquee-element-0>marquee</a></code> element can be <dfn id=concept-marquee-on title=concept-marquee-on>turned on</dfn> or <dfn id=concept-marquee-off title=concept-marquee-off>turned off</dfn>. When it is created, it
+ is <a href=#concept-marquee-on title=concept-marquee-on>turned on</a>.</p>
+
+ <p>When the <dfn id=dom-marquee-start title=dom-marquee-start><code>start()</code></dfn> method is
+ called, the <code><a href=#the-marquee-element-0>marquee</a></code> element must be <a href=#concept-marquee-on title=concept-marquee-on>turned on</a>.</p>
+
+ <p>When the <dfn id=dom-marquee-stop title=dom-marquee-stop><code>stop()</code></dfn>
+ method is called, the <code><a href=#the-marquee-element-0>marquee</a></code> element must be <a href=#concept-marquee-off title=concept-marquee-off>turned off</a>.</p>
+
+ <p>When a <code><a href=#the-marquee-element-0>marquee</a></code> element is created, the user agent
+ must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a>
+ called <code title=event-start>start</code> at the element.</p>
+
+ <hr><p>The <dfn id=attr-marquee-behavior title=attr-marquee-behavior><code>behavior</code></dfn> content
attribute on <code><a href=#the-marquee-element-0>marquee</a></code> elements is an <a href=#enumerated-attribute>enumerated
attribute</a> with the following keywords (all
non-conforming):</p>
@@ -69988,30 +70159,74 @@
<td><dfn id=attr-marquee-truespeed-false title=attr-marquee-truespeed-false>false</dfn>
</table><p>The <i>missing value default</i> is the <a href=#attr-marquee-truespeed-false title=attr-marquee-truespeed-false>false</a> state.</p>
- <hr><p>A <code><a href=#the-marquee-element-0>marquee</a></code> element has a <dfn id=marquee-scroll-speed>marquee scroll
- speed</dfn>, which is obtained as follows:</p>
+ <hr><p>A <code><a href=#the-marquee-element-0>marquee</a></code> element has a <dfn id=marquee-scroll-interval>marquee scroll
+ interval</dfn>, which is obtained as follows:</p>
- <ol><li><p>If the element has a <code title="">scrolldelay</code>
- attribute, and parsing its value using the <a href=#rules-for-parsing-non-negative-integers>rules for parsing
- non-negative integers</a> does not return an error, then let
- <var title="">delay</var> be the parsed value. Otherwise, let <var title="">delay</var> be 85.</li>
+ <ol><li><p>If the element has a <code title=attr-marquee-scrolldelay>scrolldelay</code> attribute, and
+ parsing its value using the <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative
+ integers</a> does not return an error, then let <var title="">delay</var> be the parsed value. Otherwise, let <var title="">delay</var> be 85.</li>
- <li><p>If the element does not have a <code title="">truespeed</code> attribute, or if it does but that
- attribute is in the <a href=#attr-marquee-truespeed-false title=attr-marquee-truespeed-false>false</a> state, and the
+ <li><p>If the element does not have a <code title=attr-marquee-truespeed><a href=#attr-marquee-truespeed>truespeed</a></code> attribute, or if it
+ does but that attribute is in the <a href=#attr-marquee-truespeed-false title=attr-marquee-truespeed-false>false</a> state, and the
<var title="">delay</var> value is less than 60, then let <var title="">delay</var> be 60 instead.</li>
- <li><p>The <a href=#marquee-scroll-speed>marquee scroll speed</a> is <var title="">delay</var>, interpreted in milliseconds.</li>
+ <li><p>The <a href=#marquee-scroll-interval>marquee scroll interval</a> is <var title="">delay</var>, interpreted in milliseconds.</li>
- </ol><hr><p>A <code><a href=#the-marquee-element-0>marquee</a></code> element can be <dfn id=concept-marquee-on title=concept-marquee-on>turned on</dfn> or <dfn id=concept-marquee-off title=concept-marquee-off>turned off</dfn>. When it is created, it
- is <a href=#concept-marquee-on title=concept-marquee-on>turned on</a>.</p>
+ </ol><hr><p>A <code><a href=#the-marquee-element-0>marquee</a></code> element has a <dfn id=marquee-scroll-distance>marquee scroll
+ distance</dfn>, which, if the element has a <code title=attr-marquee-scrollamount>scrollamount</code> attribute, and
+ parsing its value using the <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative
+ integers</a> does not return an error, is the parsed value
+ interpreted in CSS pixels, and otherwise is 6 CSS pixels.</p>
- <p>When the <dfn id=dom-marquee-start title=dom-marquee-start><code>start()</code></dfn> method is
- called, the <code><a href=#the-marquee-element-0>marquee</a></code> element must be <a href=#concept-marquee-on title=concept-marquee-on>turned on</a>.</p>
+ <hr><p>A <code><a href=#the-marquee-element-0>marquee</a></code> element has a <dfn id=marquee-loop-count>marquee loop
+ count</dfn>, which, if the element has a <code title=attr-marquee-loop>loop</code> attribute, and parsing its
+ value using the <a href=#rules-for-parsing-integers>rules for parsing integers</a> does not
+ return an error or a number less than 1, is the parsed value, and
+ otherwise is −1.</p>
- <p>When the <dfn id=dom-marquee-stop title=dom-marquee-stop><code>stop()</code></dfn>
- method is called, the <code><a href=#the-marquee-element-0>marquee</a></code> element must be <a href=#concept-marquee-off title=concept-marquee-off>turned off</a>.</p>
+ <p>The <dfn id=dom-marquee-loop title=dom-marquee-loop><code>loop</code></dfn> DOM
+ attribute, on getting, must return the element's <a href=#marquee-loop-count>marquee loop
+ count</a>; and on setting, if the new value is different than the
+ element's <a href=#marquee-loop-count>marquee loop count</a> and either greater than
+ zero or equal to −1, must set the element's <code title=attr-marquee-loop>loop</code> content attribute (adding it
+ if necessary) to the <a href=#valid-integer>valid integer</a> that represents the
+ new value. (Other values are ignored.)</p>
- <hr><p>The following are the <a href=#event-handler-attributes-0>event handler attributes</a> (and
+ <p>A <code><a href=#the-marquee-element-0>marquee</a></code> element also has a <dfn id=marquee-current-loop-index>marquee current
+ loop index</dfn>, which is zero when the element is created.</p>
+
+ <p>The rendering layer will occasionally <dfn id=increment-the-marquee-current-loop-index>increment the marquee
+ current loop index</dfn>, which must cause the following steps to be
+ run:</p>
+
+ <ol><li><p>If the <a href=#marquee-loop-count>marquee loop count</a> is −1, then
+ abort these steps.</p>
+
+ <li><p>Increment the <a href=#marquee-current-loop-index>marquee current loop index</a> by
+ one.</li>
+
+ <li>
+
+ <p>If the <a href=#marquee-current-loop-index>marquee current loop index</a> is now equal to
+ or greater than the element's <a href=#marquee-loop-count>marquee loop count</a>,
+ <a href=#concept-marquee-off title=concept-marquee-off>turn off</a> the
+ <code><a href=#the-marquee-element-0>marquee</a></code> element and <a href=#queue-a-task>queue a task</a> to
+ <a href=#fire-a-simple-event>fire a simple event</a> called <code title=event-finish>finish</code> at the <code><a href=#the-marquee-element-0>marquee</a></code>
+ element.</p>
+
+ <p>Otherwise, if the <code title=attr-marquee-behavior><a href=#attr-marquee-behavior>behavior</a></code> attribute is in the
+ <a href=#attr-marquee-behavior-alternate title=attr-marquee-behavior-alternate>alternate</a>
+ state, then <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
+ event</a> called <code title=event-bounce>bounce</code> at
+ the <code><a href=#the-marquee-element-0>marquee</a></code> element.</p>
+
+ <p>Otherwise, <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
+ event</a> called <code title=event-start>start</code> at the
+ <code><a href=#the-marquee-element-0>marquee</a></code> element.</p>
+
+ </li>
+
+ </ol><hr><p>The following are the <a href=#event-handler-attributes-0>event handler attributes</a> (and
their corresponding <a href=#event-handler-event-type title="event handler event type">event
handler event types</a>) that must be supported, as content and
DOM attributes, by <code><a href=#the-marquee-element-0>marquee</a></code> elements:</p>
@@ -70020,15 +70235,21 @@
<tbody><tr><td><dfn id=handler-marquee-onbounce title=handler-marquee-onbounce><code>onbounce</code></dfn> <td> <code title=event-bounce>bounce</code>
<tr><td><dfn id=handler-marquee-onfinish title=handler-marquee-onfinish><code>onfinish</code></dfn> <td> <code title=event-finish>finish</code>
<tr><td><dfn id=handler-marquee-onstart title=handler-marquee-onstart><code>onstart</code></dfn> <td> <code title=event-start>start</code>
- </table><hr><p>The <dfn id=dom-marquee-behavior title=dom-marquee-behavior><code>behavior</code></dfn>, <dfn id=dom-marquee-direction title=dom-marquee-direction><code>direction</code></dfn>, <dfn id=dom-marquee-height title=dom-marquee-height><code>height</code></dfn>, <dfn id=dom-marquee-hspace title=dom-marquee-hspace><code>hspace</code></dfn>, <dfn id=dom-marquee-loop title=dom-marquee-loop><code>loop</code></dfn>, <dfn id=dom-marquee-scrollamount title=dom-marquee-scrollamount><code>scrollamount</code></dfn>,
- <dfn id=dom-marquee-scrolldelay title=dom-marquee-scrolldelay><code>scrolldelay</code></dfn>,
- <dfn id=dom-marquee-vspace title=dom-marquee-vspace><code>vspace</code></dfn>, and <dfn id=dom-marquee-width title=dom-marquee-width><code>width</code></dfn> DOM attributes
+ </table><hr><p>The <dfn id=dom-marquee-behavior title=dom-marquee-behavior><code>behavior</code></dfn>, <dfn id=dom-marquee-direction title=dom-marquee-direction><code>direction</code></dfn>, <dfn id=dom-marquee-height title=dom-marquee-height><code>height</code></dfn>, <dfn id=dom-marquee-hspace title=dom-marquee-hspace><code>hspace</code></dfn>, <dfn id=dom-marquee-vspace title=dom-marquee-vspace><code>vspace</code></dfn>, and <dfn id=dom-marquee-width title=dom-marquee-width><code>width</code></dfn> DOM attributes
must <a href=#reflect>reflect</a> the respective content attributes of the
same name.</p>
<p>The <dfn id=dom-marquee-bgcolor title=dom-marquee-bgColor><code>bgColor</code></dfn>
DOM attribute must <a href=#reflect>reflect</a> the <code title=attr-marquee-bgcolor>bgcolor</code> content attribute.</p>
+ <p>The <dfn id=dom-marquee-scrollamount title=dom-marquee-scrollAmount><code>scrollAmount</code></dfn>,
+ DOM attribute must <a href=#reflect>reflect</a> the <code title=attr-marquee-scrollamount>scrollamount</code> content
+ attribute. The default value is 6.</p>
+
+ <p>The <dfn id=dom-marquee-scrolldelay title=dom-marquee-scrollDelay><code>scrollDelay</code></dfn>, DOM
+ attribute must <a href=#reflect>reflect</a> the <code title=attr-marquee-scrolldelay>scrolldelay</code> content
+ attribute. The default value is 85.</p>
+
<p>The <dfn id=dom-marquee-truespeed title=dom-marquee-trueSpeed><code>trueSpeed</code></dfn>, DOM
attribute must <a href=#reflect>reflect</a> the <code title=attr-marquee-truespeed><a href=#attr-marquee-truespeed>truespeed</a></code> content
attribute.</p>
Modified: source
===================================================================
--- source 2009-05-26 10:36:50 UTC (rev 3140)
+++ source 2009-05-27 01:00:45 UTC (rev 3141)
@@ -81627,11 +81627,197 @@
<h4>The <code>marquee</code> element</h4>
- <p class="XXX">...(Waiting til I've specced the DOM side of this)...</p>
- <!-- XXX attributes: height/width; direction is case insensitive; bgcolor; hspace/vspace -->
+ <pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
+marquee {
+ binding: <i title="">marquee</i>;
+}</pre>
+ <p>When the <i title="">marquee</i> binding applies to a
+ <code>marquee</code> element, while the element is <span
+ title="concept-marquee-on">turned on</span>, the element is expected
+ to render in an animated fashion according to its attributes as
+ follows:</p>
+ <dl>
+
+ <dt>If the element's <code
+ title="attr-marquee-behavior">behavior</code> attribute is in the
+ <span title="attr-marquee-behavior-scroll">scroll</span> state</dt>
+
+ <dd>
+
+ <p>Slide the contents of the element in the direction described by
+ the <code title="attr-marquee-direction">direction</code>
+ attribute as defined below, such that it begins off the start side
+ of the <code>marquee</code>, and ends flush with the inner end
+ side.</p>
+
+ <p class="example">For example, if the <code
+ title="attr-marquee-direction">direction</code> attribute is <span
+ title="attr-marquee-direction-left">left</span> (the default),
+ then the contents would start such that their left edge are off
+ the side of the right edge of the <code>marquee</code>'s content
+ area, and the contents would then slide up to the point where the
+ left edge of the contents are flush with the left inner edge of
+ the <code>marquee</code>'s content area.</p>
+
+ <p>Once the animation has ended, the user agent is expected to
+ <span>increment the marquee current loop index</span>. If the
+ element is still <span title="concept-marquee-on">turned on</span>
+ after this, then the user agent is expected to restart the
+ animation.</p>
+
+ </dd>
+
+ <dt>If the element's <code
+ title="attr-marquee-behavior">behavior</code> attribute is in the
+ <span title="attr-marquee-behavior-slide">slide</span> state</dt>
+
+ <dd>
+
+ <p>Slide the contents of the element in the direction described by
+ the <code title="attr-marquee-direction">direction</code>
+ attribute as defined below, such that it begins off the start side
+ of the <code>marquee</code>, and ends off the end side of the
+ <code>marquee</code>.</p>
+
+ <p class="example">For example, if the <code
+ title="attr-marquee-direction">direction</code> attribute is <span
+ title="attr-marquee-direction-left">left</span> (the default),
+ then the contents would start such that their left edge are off
+ the side of the right edge of the <code>marquee</code>'s content
+ area, and the contents would then slide up to the point where the
+ <em>right</em> edge of the contents are flush with the left inner
+ edge of the <code>marquee</code>'s content area.</p>
+
+ <p>Once the animation has ended, the user agent is expected to
+ <span>increment the marquee current loop index</span>. If the
+ element is still <span title="concept-marquee-on">turned on</span>
+ after this, then the user agent is expected to restart the
+ animation.</p>
+
+ </dd>
+
+ <dt>If the element's <code
+ title="attr-marquee-behavior">behavior</code> attribute is in the
+ <span title="attr-marquee-behavior-alternate">alternate</span>
+ state</dt>
+
+ <dd>
+
+ <p>When the <span>marquee current loop index</span> is even (or
+ zero), slide the contents of the element in the direction
+ described by the <code
+ title="attr-marquee-direction">direction</code> attribute as
+ defined below, such that it begins flush with the start side of
+ the <code>marquee</code>, and ends flush with the end side of the
+ <code>marquee</code>.</p>
+
+ <p>When the <span>marquee current loop index</span> is odd, slide
+ the contents of the element in the opposite direction than that
+ described by the <code
+ title="attr-marquee-direction">direction</code> attribute as
+ defined below, such that it begins flush with the end side of the
+ <code>marquee</code>, and ends flush with the start side of the
+ <code>marquee</code>.</p>
+
+ <p class="example">For example, if the <code
+ title="attr-marquee-direction">direction</code> attribute is <span
+ title="attr-marquee-direction-left">left</span> (the default),
+ then the contents would with their right edge flush with the right
+ inner edge of the <code>marquee</code>'s content area, and the
+ contents would then slide up to the point where the <em>left</em>
+ edge of the contents are flush with the left inner edge of the
+ <code>marquee</code>'s content area.</p>
+
+ <p>Once the animation has ended, the user agent is expected to
+ <span>increment the marquee current loop index</span>. If the
+ element is still <span title="concept-marquee-on">turned on</span>
+ after this, then the user agent is expected to continue the
+ animation.</p>
+
+ </dd>
+
+ </dl>
+
+ <p>The <code title="attr-marquee-direction">direction</code>
+ attribute has the meanings described in the following table:</p>
+
+ <table>
+ <thead>
+ <tr>
+ <th><code title="attr-marquee-direction">direction</code> attribute state
+ <th>Direction of animation
+ <th>Start edge
+ <th>End edge
+ <th>Opposite direction
+ <tbody>
+ <tr>
+ <td><span title="attr-marquee-direction-left">left</span>
+ <td>← Right to left
+ <td>Right
+ <td>Left
+ <td>→ Left to Right
+ <tr>
+ <td><span title="attr-marquee-direction-right">right</span>
+ <td>→ Left to Right
+ <td>Left
+ <td>Right
+ <td>← Right to left
+ <tr>
+ <td><span title="attr-marquee-direction-up">up</span>
+ <td>↑ Up (Bottom to Top)
+ <td>Bottom
+ <td>Top
+ <td>↓ Down (Top to Button)
+ <tr>
+ <td><span title="attr-marquee-direction-down">down</span>
+ <td>↓ Down (Top to Button)
+ <td>Top
+ <td>Bottom
+ <td>↑ Up (Bottom to Top)
+ </table>
+
+ <p>In any case, the animation should proceed such that there is a
+ delay given by the <span>marquee scroll interval</span> between each
+ frame, and such that the content moves at most the distance given by
+ the <span>marquee scroll distance</span> with each frame.</p>
+
+ <p>When a <code>marquee</code> element has a <code
+ title="attr-bgcolor">bgcolor</code> attribute set, the value is
+ expected to be parsed using the <span>rules for parsing a legacy
+ color value</span>, and if that does not return an error, the user
+ agent is expected to treat the attribute as a <span
+ title="presentational hints">presentational hint</span> setting the
+ element's 'background-color' property to the resulting color.</p>
+
+ <p>The <code title="attr-marquee-width">width</code> and <code
+ title="attr-marquee-height">height</code> attributes on a
+ <code>marquee</code> element <span title="maps to the pixel length
+ property">map to the dimension properties</span> 'width' and
+ 'height' on the element respectively.</p>
+
+ <p>The intrinsic height of a <code>marquee</code> element with its
+ <code title="attr-marquee-direction">direction</code> attribute in
+ the <span title="attr-marquee-direction-up">up</span> or <span
+ title="attr-marquee-direction-down">down</span> states is 200 CSS
+ pixels.</p>
+
+ <p>The <code title="attr-marquee-vspace">vspace</code> attribute of
+ a <code>marquee</code> element <span title="maps to the dimension
+ property">maps to the dimension properties</span> 'margin-top' and
+ 'margin-bottom' on the element. The <code
+ title="attr-marquee-hspace">hspace</code> attribute of a
+ <code>marquee</code> element <span title="maps to the dimension
+ property">maps to the dimension properties</span> 'margin-left' and
+ 'margin-right' on the element.</p>
+
+ <p>The 'overflow' property on the <code>marquee</code> element is
+ expected to be ignored; overflow is expected to always be
+ hidden.</p>
+
+
<h4>The <code>meter</code> element</h4>
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
@@ -82273,7 +82459,7 @@
content in an interoperable fashion.</p>
<!-- XXX Elements that have been dropped: ACRONYM B BASEFONT BLINK BIG
-CENTER DIR DIV FONT FRAME FRAMESET I ISINDEX MARQUEE NOEMBED NOFRAMES
+CENTER DIR DIV FONT FRAME FRAMESET I ISINDEX NOEMBED NOFRAMES
S SPACER STRIKE TT U -->
@@ -82313,17 +82499,20 @@
animates content. CSS transitions and animations are a more
appropriate mechanism.</p>
+ <p>The <span>task source</span> for tasks mentioned in this section
+ is the <span>DOM manipulation task source</span>.</p>
+
<pre class="idl">interface <dfn>HTMLMarqueeElement</dfn> : <span>HTMLElement</span> {
attribute DOMString <span title="dom-marquee-behavior">behavior</span>;
attribute DOMString <span title="dom-marquee-bgColor">bgColor</span>;
attribute DOMString <span title="dom-marquee-direction">direction</span>;
attribute DOMString <span title="dom-marquee-height">height</span>;
- attribute DOMString <span title="dom-marquee-hspace">hspace</span>;
- attribute DOMString <span title="dom-marquee-loop">loop</span>;
- attribute DOMString <span title="dom-marquee-scrollamount">scrollamount</span>;
- attribute DOMString <span title="dom-marquee-scrolldelay">scrolldelay</span>;
+ attribute unsigned long <span title="dom-marquee-hspace">hspace</span>;
+ attribute long <span title="dom-marquee-loop">loop</span>;
+ attribute unsigned long <span title="dom-marquee-scrollamount">scrollAmount</span>;
+ attribute unsigned long <span title="dom-marquee-scrollDelay">scrollDelay</span>;
attribute DOMString <span title="dom-marquee-trueSpeed">trueSpeed</span>;
- attribute DOMString <span title="dom-marquee-vspace">vspace</span>;
+ attribute unsigned long <span title="dom-marquee-vspace">vspace</span>;
attribute DOMString <span title="dom-marquee-width">width</span>;
attribute <span>Function</span> <span title="handler-marquee-onbounce">onbounce</span>;
@@ -82334,6 +82523,26 @@
void <span title="dom-marquee-stop">stop</span>()
};</pre>
+ <p>A <code>marquee</code> element can be <dfn
+ title="concept-marquee-on">turned on</dfn> or <dfn
+ title="concept-marquee-off">turned off</dfn>. When it is created, it
+ is <span title="concept-marquee-on">turned on</span>.</p>
+
+ <p>When the <dfn
+ title="dom-marquee-start"><code>start()</code></dfn> method is
+ called, the <code>marquee</code> element must be <span
+ title="concept-marquee-on">turned on</span>.</p>
+
+ <p>When the <dfn title="dom-marquee-stop"><code>stop()</code></dfn>
+ method is called, the <code>marquee</code> element must be <span
+ title="concept-marquee-off">turned off</span>.</p>
+
+ <p>When a <code>marquee</code> element is created, the user agent
+ must <span>queue a task</span> to <span>fire a simple event</span>
+ called <code title="event-start">start</code> at the element.</p>
+
+ <hr>
+
<p>The <dfn
title="attr-marquee-behavior"><code>behavior</code></dfn> content
attribute on <code>marquee</code> elements is an <span>enumerated
@@ -82419,44 +82628,96 @@
<hr>
<p>A <code>marquee</code> element has a <dfn>marquee scroll
- speed</dfn>, which is obtained as follows:</p>
+ interval</dfn>, which is obtained as follows:</p>
<ol>
- <li><p>If the element has a <code title="">scrolldelay</code>
- attribute, and parsing its value using the <span>rules for parsing
- non-negative integers</span> does not return an error, then let
- <var title="">delay</var> be the parsed value. Otherwise, let <var
+ <li><p>If the element has a <code
+ title="attr-marquee-scrolldelay">scrolldelay</code> attribute, and
+ parsing its value using the <span>rules for parsing non-negative
+ integers</span> does not return an error, then let <var
+ title="">delay</var> be the parsed value. Otherwise, let <var
title="">delay</var> be 85.</p></li>
<li><p>If the element does not have a <code
- title="">truespeed</code> attribute, or if it does but that
- attribute is in the <span
+ title="attr-marquee-truespeed">truespeed</code> attribute, or if it
+ does but that attribute is in the <span
title="attr-marquee-truespeed-false">false</span> state, and the
<var title="">delay</var> value is less than 60, then let <var
title="">delay</var> be 60 instead.</p></li>
- <li><p>The <span>marquee scroll speed</span> is <var
+ <li><p>The <span>marquee scroll interval</span> is <var
title="">delay</var>, interpreted in milliseconds.</p></li>
</ol>
<hr>
- <p>A <code>marquee</code> element can be <dfn
- title="concept-marquee-on">turned on</dfn> or <dfn
- title="concept-marquee-off">turned off</dfn>. When it is created, it
- is <span title="concept-marquee-on">turned on</span>.</p>
+ <p>A <code>marquee</code> element has a <dfn>marquee scroll
+ distance</dfn>, which, if the element has a <code
+ title="attr-marquee-scrollamount">scrollamount</code> attribute, and
+ parsing its value using the <span>rules for parsing non-negative
+ integers</span> does not return an error, is the parsed value
+ interpreted in CSS pixels, and otherwise is 6 CSS pixels.</p>
- <p>When the <dfn
- title="dom-marquee-start"><code>start()</code></dfn> method is
- called, the <code>marquee</code> element must be <span
- title="concept-marquee-on">turned on</span>.</p>
+ <hr>
- <p>When the <dfn title="dom-marquee-stop"><code>stop()</code></dfn>
- method is called, the <code>marquee</code> element must be <span
- title="concept-marquee-off">turned off</span>.</p>
+ <p>A <code>marquee</code> element has a <dfn>marquee loop
+ count</dfn>, which, if the element has a <code
+ title="attr-marquee-loop">loop</code> attribute, and parsing its
+ value using the <span>rules for parsing integers</span> does not
+ return an error or a number less than 1, is the parsed value, and
+ otherwise is −1.</p>
+ <p>The <dfn title="dom-marquee-loop"><code>loop</code></dfn> DOM
+ attribute, on getting, must return the element's <span>marquee loop
+ count</span>; and on setting, if the new value is different than the
+ element's <span>marquee loop count</span> and either greater than
+ zero or equal to −1, must set the element's <code
+ title="attr-marquee-loop">loop</code> content attribute (adding it
+ if necessary) to the <span>valid integer</span> that represents the
+ new value. (Other values are ignored.)</p>
+
+ <p>A <code>marquee</code> element also has a <dfn>marquee current
+ loop index</dfn>, which is zero when the element is created.</p>
+
+ <p>The rendering layer will occasionally <dfn>increment the marquee
+ current loop index</dfn>, which must cause the following steps to be
+ run:</p>
+
+ <ol>
+
+ <li><p>If the <span>marquee loop count</span> is −1, then
+ abort these steps.</p>
+
+ <li><p>Increment the <span>marquee current loop index</span> by
+ one.</p></li>
+
+ <li>
+
+ <p>If the <span>marquee current loop index</span> is now equal to
+ or greater than the element's <span>marquee loop count</span>,
+ <span title="concept-marquee-off">turn off</span> the
+ <code>marquee</code> element and <span>queue a task</span> to
+ <span>fire a simple event</span> called <code
+ title="event-finish">finish</code> at the <code>marquee</code>
+ element.</p>
+
+ <p>Otherwise, if the <code
+ title="attr-marquee-behavior">behavior</code> attribute is in the
+ <span title="attr-marquee-behavior-alternate">alternate</span>
+ state, then <span>queue a task</span> to <span>fire a simple
+ event</span> called <code title="event-bounce">bounce</code> at
+ the <code>marquee</code> element.</p>
+
+ <p>Otherwise, <span>queue a task</span> to <span>fire a simple
+ event</span> called <code title="event-start">start</code> at the
+ <code>marquee</code> element.</p>
+
+ </li>
+
+ </ol>
+
<hr>
<p>The following are the <span>event handler attributes</span> (and
@@ -82480,10 +82741,7 @@
title="dom-marquee-direction"><code>direction</code></dfn>, <dfn
title="dom-marquee-height"><code>height</code></dfn>, <dfn
title="dom-marquee-hspace"><code>hspace</code></dfn>, <dfn
- title="dom-marquee-loop"><code>loop</code></dfn>, <dfn
- title="dom-marquee-scrollamount"><code>scrollamount</code></dfn>,
- <dfn title="dom-marquee-scrolldelay"><code>scrolldelay</code></dfn>,
- <dfn title="dom-marquee-vspace"><code>vspace</code></dfn>, and <dfn
+ title="dom-marquee-vspace"><code>vspace</code></dfn>, and <dfn
title="dom-marquee-width"><code>width</code></dfn> DOM attributes
must <span>reflect</span> the respective content attributes of the
same name.</p>
@@ -82493,6 +82751,18 @@
title="attr-marquee-bgcolor">bgcolor</code> content attribute.</p>
<p>The <dfn
+ title="dom-marquee-scrollAmount"><code>scrollAmount</code></dfn>,
+ DOM attribute must <span>reflect</span> the <code
+ title="attr-marquee-scrollamount">scrollamount</code> content
+ attribute. The default value is 6.</p>
+
+ <p>The <dfn
+ title="dom-marquee-scrollDelay"><code>scrollDelay</code></dfn>, DOM
+ attribute must <span>reflect</span> the <code
+ title="attr-marquee-scrolldelay">scrolldelay</code> content
+ attribute. The default value is 85.</p>
+
+ <p>The <dfn
title="dom-marquee-trueSpeed"><code>trueSpeed</code></dfn>, DOM
attribute must <span>reflect</span> the <code
title="attr-marquee-truespeed">truespeed</code> content
More information about the Commit-Watchers
mailing list