Skip to content
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
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
19 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
View
BIN images/sample-progress.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
19 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
View
19 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

0 comments on commit d3471e8

Please sign in to comment.
Something went wrong with that request. Please try again.