[giow] (1) Suggest more adaptive renderings for progress bars.

Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=12232 git-svn-id: http://svn.whatwg.org/webapps@6089 340c8d12-0b0e-0410-8428-c7bf67bfef74
whatwg · May 5, 2011 · d3471e8 · d3471e8
1 parent bea3eb0
commit d3471e8
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 15 deletions.
diff --git a/complete.html b/complete.html
@@ -91913,11 +91913,20 @@ <h4 id=the-progress-element-0><span class=secno>15.4.13 </span>The <code><a href
   <p>When the <i title="">progress</i> binding applies to a
   <code><a href=#the-progress-element>progress</a></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 alt="" class=extra src=http://images.whatwg.org/sample-progress.png>
+  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

diff --git a/images/sample-progress.png b/images/sample-progress.png
diff --git a/index b/index
@@ -87894,11 +87894,20 @@ progress { binding: <i title="">progress</i>; }</pre>
   <p>When the <i title="">progress</i> binding applies to a
   <code><a href=#the-progress-element>progress</a></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 alt="" class=extra src=http://images.whatwg.org/sample-progress.png>
+  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

diff --git a/source b/source
@@ -104353,11 +104353,20 @@ 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