Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
Showing
with
42 additions
and 15 deletions.
- +14 −5 complete.html
- BIN images/sample-progress.png
- +14 −5 index
- +14 −5 source
<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 |
Binary file not shown.
<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 |
<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 |