[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 &#x2212;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 &#x2212;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 &#x2212;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