HTML Standard Tracker

Diff (omit for latest revision)
Filter

Short URL: http://html5.org/r/6089

File a bug

SVNBugCommentTime (UTC)
608912232[Gecko] [Internet Explorer] [Opera] [Webkit] Suggest more adaptive renderings for progress bars.2011-05-05 23:39
Index: source
===================================================================
--- source	(revision 6088)
+++ source	(revision 6089)
@@ -104353,12 +104353,21 @@
   <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

|