[html5] r6089 - / images

whatwg at whatwg.org whatwg at whatwg.org
Thu May 5 16:39:03 PDT 2011


Author: ianh
Date: 2011-05-05 16:39:02 -0700 (Thu, 05 May 2011)
New Revision: 6089

Added:
   images/sample-progress.png
Modified:
   complete.html
   index
   source
Log:
[giow] (1) Suggest more adaptive renderings for progress bars.
Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=12232

Modified: complete.html
===================================================================
--- complete.html	2011-05-05 22:45:13 UTC (rev 6088)
+++ complete.html	2011-05-05 23:39:02 UTC (rev 6089)
@@ -91913,12 +91913,21 @@
   <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.createL
 inearGradient(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
   are expected to use different presentations for determinate and

Added: images/sample-progress.png
===================================================================
(Binary files differ)


Property changes on: images/sample-progress.png
___________________________________________________________________
Added: svn:mime-type
   + application/octet-stream

Modified: index
===================================================================
--- index	2011-05-05 22:45:13 UTC (rev 6088)
+++ index	2011-05-05 23:39:02 UTC (rev 6089)
@@ -87894,12 +87894,21 @@
   <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.createL
 inearGradient(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
   are expected to use different presentations for determinate and

Modified: source
===================================================================
--- source	2011-05-05 22:45:13 UTC (rev 6088)
+++ source	2011-05-05 23:39:02 UTC (rev 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.createL
 inearGradient(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




More information about the Commit-Watchers mailing list