Permalink
Browse files

[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
  • Loading branch information...
1 parent bea3eb0 commit d3471e877bbfed08a3b864e65c41ed65a4089b29 @Hixie Hixie committed May 5, 2011
Showing with 42 additions and 15 deletions.
  1. +14 −5 complete.html
  2. BIN images/sample-progress.png
  3. +14 −5 index
  4. +14 −5 source
View
@@ -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
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -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
View
@@ -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

0 comments on commit d3471e8

Please sign in to comment.