HTML Standard Tracker

Filter

File a bug

SVNBugCommentTime (UTC)
3141<marquee>, CSS side2009-05-27 01:00
@@ -81620,23 +81620,209 @@ input[type=submit], input[type=reset], input[type=button] {
   about one line high, containing the contents of the element's <code
   title="attr-input-value">value</code> attribute, if any, or text
   derived from the element's <code title="attr-input-type">type</code>
   attribute in a user-agent-defined (and probably locale-specific)
   fashion, if not.</p>
 
 
 
   <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>&larr; Right to left
+     <td>Right
+     <td>Left
+     <td>&rarr; Left to Right
+    <tr>
+     <td><span title="attr-marquee-direction-right">right</span>
+     <td>&rarr; Left to Right
+     <td>Left
+     <td>Right
+     <td>&larr; Right to left
+    <tr>
+     <td><span title="attr-marquee-direction-up">up</span>
+     <td>&uarr; Up (Bottom to Top)
+     <td>Bottom
+     <td>Top
+     <td>&darr; Down (Top to Button)
+    <tr>
+     <td><span title="attr-marquee-direction-down">down</span>
+     <td>&darr; Down (Top to Button)
+     <td>Top
+     <td>Bottom
+     <td>&uarr; 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);
 
 meter {
   binding: <i title="">meter</i>;
 }</pre>
 
@@ -82266,21 +82452,21 @@ time:empty { binding: <i title="">time</i>; }</pre>
 
   <div class="impl">
 
   <h2>Obsolete features</h2>
 
   <p>Authors and documents must not use the features listed in this
   section. They are documented to enable user agents to support legacy
   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 -->
 
 
   <h3>Self-contained features</h3>
 
   <h4>The <dfn><code>applet</code></dfn> element</h4>
 
   <p>The <code>applet</code> element is a Java-specific variant of the
   <code>embed</code> element. In HTML5 the <code>applet</code> element
   is obsoleted so that all extension frameworks (Java, .NET, Flash,
@@ -82306,41 +82492,64 @@ S SPACER STRIKE TT U -->
   <code>Document</code> node, whose filter matches only
   <code>applet</code> elements.</p>
 
 
   <h4>The <dfn><code>marquee</code></dfn> element</h4>
 
   <p>The <code>marquee</code> element is a presentational element that
   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>;
            attribute <span>Function</span> <span title="handler-marquee-onfinish">onfinish</span>;
            attribute <span>Function</span> <span title="handler-marquee-onstart">onstart</span>;
 
   void <span title="dom-marquee-start">start</span>()
   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
   attribute</span> with the following keywords (all
   non-conforming):</p>
 
   <table>
    <thead>
     <tr>
      <th>Keyword
@@ -82412,57 +82621,109 @@ S SPACER STRIKE TT U -->
      <td><code title="">false</code>
      <td><dfn title="attr-marquee-truespeed-false">false</dfn>
   </table>
 
   <p>The <i>missing value default</i> is the <span
   title="attr-marquee-truespeed-false">false</span> state.</p>
 
   <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
   their corresponding <span title="event handler event type">event
   handler event types</span>) that must be supported, as content and
   DOM attributes, by <code>marquee</code> elements:</p>
 
   <table>
    <thead>
@@ -82473,33 +82734,42 @@ S SPACER STRIKE TT U -->
     <tr><td><dfn title="handler-marquee-onstart"><code>onstart</code></dfn> <td> <code title="event-start">start</code>
   </table>
 
   <hr>
 
   <p>The <dfn
   title="dom-marquee-behavior"><code>behavior</code></dfn>, <dfn
   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>
 
   <p>The <dfn title="dom-marquee-bgColor"><code>bgColor</code></dfn>
   DOM attribute must <span>reflect</span> the <code
   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
   attribute.</p>
 
 
   
   
 
 

|