HTML Standard Tracker

Filter

File a bug

SVNBugCommentTime (UTC)
608912232[Gecko] [Internet Explorer] [Opera] [Webkit] Suggest more adaptive renderings for progress bars.2011-05-05 23:39
@@ -104346,25 +104346,34 @@ meter { binding: <i title="">meter</i>; }</pre>
 
   <h4>The <code>progress</code> element</h4>
 
   <pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
 
 progress { binding: <i title="">progress</i>; }</pre>
 
   <p>When the <i title="">progress</i> binding applies to a
   <code>progress</code> element, the element is expected to render as
   an 'inline-block' box with a 'height' of '1em' and a 'width' of
-  '10em', a 'vertical-align' of '-0.2em', and with its contents
-  depicting a horizontal progress bar, with the start on the right and
-  the end on the left if the 'direction' property on this element has
-  a computed value of 'rtl', and with the start on the left and the
-  end on the right otherwise.</p>
+  '10em', and a 'vertical-align' of '-0.2em'.</p>
+
+  <!-- http://software.hixie.ch/utilities/js/canvas/?c.clearRect(0%2C%200%2C%20640%2C%20480)%3B%0Ac.save()%3B%0Atry%20{%0A%20%20c.fillStyle%20%3D%20'black'%3B%0A%20%20c.font%20%3D%20'8px%20sans-serif'%3B%0A%20%20c.fillText('Wide'%2C%2043%2C105)%3B%0A%20%20c.fillText('Tall'%2C%20100%2C105)%3B%0A%20%20c.fillText('Square'%2C%20128%2C105)%3B%0A%20%20c.font%20%3D%20'700%2010px%20sans-serif'%3B%0A%20%20c.fillText('Progress%20Bars'%2C%2013%2C30)%3B%0A%20%20c.font%20%3D%20'100%2010px%20sans-serif'%3B%0A%20%20c.fillText('(80%25)'%2C%2037%2C45)%3B%0A%20%20c.beginPath()%3B%0A%20%20var%20g%20%3D%20c.createLinearGradient(10%2C0%2C80%2C0)%3B%0A%20%20g.addColorStop(0%2C%20'%2300FF00')%3B%0A%20%20g.addColorStop(0.8%2C%20'%2300FF00')%3B%0A%20%20g.addColorStop(0.9%2C%20'%23FFFF00')%3B%0A%20%20c.fillStyle%20%3D%20g%3B%0A%20%20c.rect(10%2C80%2C80%2C15)%3B%0A%20%20c.fill()%3B%0A%20%20c.strokeStyle%20%3D%20'black'%3B%0A%20%20c.stroke()%3B%0A%20%20c.beginPath()%3B%0A%20%20var%20g%20%3D%20c.createLinearGradient(0%2C80%2C0%2C20)%3B%0A%20%20g.addColorStop(0%2C%20'%2300FF00')%3B%0A%20%20g.addColorStop(0.75%2C%20'%2300FF00')%3B%0A%20%20g.addColorStop(0.85%2C%20'%23FFFF00')%3B%0A%20%20c.fillStyle%20%3D%20g%3B%0A%20%20c.rect(100%2C15%2C15%2C80)%3B%0A%20%20c.fill()%3B%0A%20%20c.strokeStyle%20%3D%20'black'%3B%0A%20%20c.stroke()%3B%0A%0A%20%20c.beginPath()%3B%0A%20%20c.fillStyle%20%3D%20'yellow'%3B%0A%20%20c.arc(140%2C80%2C15%2C0%2C2*Math.PI%2C%20true)%3B%0A%20%20c.fill()%3B%0A%20%20c.beginPath()%3B%0A%20%20c.fillStyle%20%3D%20'lime'%3B%0A%20%20c.moveTo(140%2C80)%3B%0A%20%20c.arc(140%2C80%2C15%2C-Math.PI%2F2%2C1.2*Math.PI%2C%20false)%3B%0A%20%20c.fill()%3B%0A%20%20c.beginPath()%3B%0A%20%20c.arc(140%2C80%2C15%2C0%2C2*Math.PI%2C%20true)%3B%0A%20%20c.strokeStyle%20%3D%20'black'%3B%0A%20%20c.stroke()%3B%0A}%20finally%20{%0A%20%20c.restore()%3B%0A}%0A -->
+
+  <p> <img class="extra" src="images/sample-progress.png" alt="">
+  When the element is wider than it is tall, the element is
+  expected to be depicted as a horizontal progress bar, with the start
+  on the right and the end on the left if the 'direction' property on
+  this element has a computed value of 'rtl', and with the start on
+  the left and the end on the right otherwise. When the element is
+  taller than it is wide, it is expected to depicted as a vertical
+  progress bar, with the lowest value on the bottom. When the element
+  is square, it is expected to be depicted as a direction-independent
+  progress widget (e.g. a circular progress ring).</p>
 
   <p>User agents are expected to use a presentation consistent with
   platform conventions for progress bars. In particular, user agents
   are expected to use different presentations for determinate and
   indeterminate progress bars. User agents are also expected to vary
   the presentation based on the dimensions of the element.</p>
 
   <p class="example">For example, on some platforms for showing
   indeterminate progress there is an asynchronous progress indicator
   with square dimensions, which could be used when the element is

|