Skip to content

Commit

Permalink
Redefine progress, meter, and range input's layout
Browse files Browse the repository at this point in the history 
Now, CSS direction and writing-mode are used to layout the controls. Previously, it stated that the comparative width and height would change the control's layout.

Fixes #8413. Fixes #4177.
  • Loading branch information
@dizhang168
dizhang168 authored Mar 4, 2024
1 parent c3dfba8 commit 702119c
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 29 deletions.
Binary file modified images/sample-progress.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
71 changes: 42 additions & 29 deletions source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3897,6 +3897,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<ul class="brief">
<li>The <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#direction">'direction'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#unicode-bidi">'unicode-bidi'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#propdef-writing-mode">'writing-mode'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#block-flow-direction">block flow direction</dfn>,
<dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#block-axis">block axis</dfn>,
<dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#inline-axis">inline axis</dfn>,
Expand Down Expand Up @@ -49971,7 +49972,7 @@ ldh-str = &lt; as defined in <a href="https://www.rfc-editor.org/rfc/rfc10

<p>...with the following style sheet applied:</p>

<pre><code class="css">input { height: 75px; width: 49px; background: #D5CCBB; color: black; }</code></pre>
<pre><code class="css">input { writing-mode: vertical-lr; height: 75px; width: 49px; background: #D5CCBB; color: black; }</code></pre>

<p>...might render as:</p>

Expand Down Expand Up @@ -133588,6 +133589,23 @@ input[type=image i][align=bottom i], object[align=bottom i] {
</div>


<div w-nodev>

<h4>Writing mode</h4>

<p>Several widgets have their rendering controlled by the <span>'writing-mode'</span> CSS
property. For the purposes of those widgets, we have the following definitions.</p>

<p>A <dfn>horizontal writing mode</dfn> is when resolving the <span>'writing-mode'</span>
property of the control results in a computed value of 'horizontal-tb'.</p>

<p>A <dfn>vertical writing mode</dfn> is when resolving the <span>'writing-mode'</span> property
of the control results in a computed value of either 'vertical-rl', 'vertical-lr', 'sideways-rl'
or 'sideways-lr'.</p>

</div>


<div w-nodev>

<h4>Button layout</h4>
Expand Down Expand Up @@ -133848,20 +133866,16 @@ details[open] > summary:first-of-type {
widget</span>. Its expected <span>native appearance</span> is to render as an
<span>'inline-block'</span> box depicting a slider control.</p>

<p>When the control is wider than it is tall (or square), the control is expected to be a
horizontal slider, with the lowest value on the right if the <span>'direction'</span> property on
this element has a <span>computed value</span> of 'rtl', and on the left otherwise. When the
control is taller than it is wide, it is expected to be a vertical slider, with the lowest value
on the bottom.</p>
<p>When this control has a <span>horizontal writing mode</span>, the control is expected to be a
horizontal slider. Its lowest value is on the right if the <span>'direction'</span> property has a
<span>computed value</span> of 'rtl', and on the left otherwise. When this control has a
<span>vertical writing mode</span>, it is expected to be a vertical slider. Its lowest value is on
the bottom if the <span>'direction'</span> property has a <span>computed value</span> of 'rtl', and
on the top otherwise.</p>

<p>Predefined suggested values (provided by the <code data-x="attr-input-list">list</code>
attribute) are expected to be shown as tick marks on the slider, which the slider can snap to.</p>

<p>User agents are expected to use the <span>used value</span> of the <span>'direction'</span>
property on the element to determine the direction in which the slider operates. Typically, a
left-to-right ('ltr') horizontal control would have the lowest value on the left and the highest
value on the right, and vice versa.</p>

<p class="XXX">Need to detail the expected <span>primitive appearance</span>.</p>
</div>

Expand Down Expand Up @@ -134128,11 +134142,12 @@ meter { appearance: auto; }</code></pre>
of '1em' and a <span>'inline-size'</span> of '5em', a <span>'vertical-align'</span> of '-0.2em', and
with its contents depicting a gauge.</p>

<p>When the element is wider than it is tall (or square), the depiction is expected to be of a
horizontal gauge, with the minimum value on the right if the <span>'direction'</span> property on
this element has a <span>computed value</span> of 'rtl', and on the left otherwise. When the
element is taller than it is wide, it is expected to depict a vertical gauge, with the minimum
value on the bottom.</p>
<p>When this element has a <span>horizontal writing mode</span>, the depiction is expected to be of
a horizontal gauge. Its minimum value is on the right if the <span>'direction'</span> property has
a <span>computed value</span> of 'rtl', and on the left otherwise. When this element has a
<span>vertical writing mode</span>, it is expected to depict a vertical gauge. Its minimum value is
on the bottom if the <span>'direction'</span> property has a <span>computed value</span> of 'rtl',
and on the top otherwise.</p>

<p>User agents are expected to use a presentation consistent with platform conventions for gauges,
if any.</p>
Expand All @@ -134158,26 +134173,23 @@ progress { appearance: auto; }</code></pre>
<span>'block-size'</span> of '1em' and a <span>'inline-size'</span> of '10em', and a
<span>'vertical-align'</span> of '-0.2em'.</p>

<!-- https://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 -->
<!-- https://software.hixie.ch/utilities/js/canvas/?c.clearRect(0%2C%200%2C%20640%2C%20480)%3B%0Ac.save()%3B%0Atry%20%7B%0A%20%20c.fillStyle%20%3D%20%27black%27%3B%0A%20%20c.font%20%3D%20%278px%20sans-serif%27%3B%0A%20%20c.fillText(%27Horizontal%20ltr%27%2C%2030%2C105)%3B%0A%20%20c.fillText(%27Horizontal%20rtl%27%2C125%2C105)%3B%0A%20%20c.fillText(%27Vertical%20ltr%27%2C%20192%2C105)%3B%0A%20%20c.fillText(%27Vertical%20rtl%27%2C%20233%2C105)%3B%0A%20%20c.font%20%3D%20%27700%2010px%20sans-serif%27%3B%0A%20%20c.fillText(%27Progress%20Bars%27%2C%2013%2C30)%3B%0A%20%20c.font%20%3D%20%27100%2010px%20sans-serif%27%3B%0A%20%20c.fillText(%27(80%25)%27%2C%2037%2C45)%3B%0A%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%27%2300FF00%27)%3B%0A%20%20g.addColorStop(0.8%2C%20%27%2300FF00%27)%3B%0A%20%20g.addColorStop(0.9%2C%20%27%23FFFF00%27)%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%27black%27%3B%0A%20%20c.stroke()%3B%0A%0A%20%20c.beginPath()%3B%0A%20%20var%20g%20%3D%20c.createLinearGradient(105%2C0%2C175%2C0)%3B%0A%20%20g.addColorStop(0%2C%20%27%23FFFF00%27)%3B%0A%20%20g.addColorStop(0.2%2C%20%27%23FFFF00%27)%3B%0A%20%20g.addColorStop(0.4%2C%20%27%2300FF00%27)%3B%0A%20%20c.fillStyle%20%3D%20g%3B%0A%20%20c.rect(105%2C80%2C80%2C15)%3B%0A%20%20c.fill()%3B%0A%20%20c.strokeStyle%20%3D%20%27black%27%3B%0A%20%20c.stroke()%3B%0A%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%27%2300FF00%27)%3B%0A%20%20g.addColorStop(0.75%2C%20%27%2300FF00%27)%3B%0A%20%20g.addColorStop(0.85%2C%20%27%23FFFF00%27)%3B%0A%20%20c.fillStyle%20%3D%20g%3B%0A%20%20c.rect(203%2C15%2C15%2C80)%3B%0A%20%20c.fill()%3B%0A%20%20c.strokeStyle%20%3D%20%27black%27%3B%0A%20%20c.stroke()%3B%0A%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%27%23FFFF00%27)%3B%0A%20%20g.addColorStop(0.15%2C%20%27%2300FF00%27)%3B%0A%20%20c.fillStyle%20%3D%20g%3B%0A%20%20c.rect(242%2C15%2C15%2C80)%3B%0A%20%20c.fill()%3B%0A%20%20c.strokeStyle%20%3D%20%27black%27%3B%0A%20%20c.stroke()%3B%0A%7D%20finally%20%7B%0A%20%20c.restore()%3B%0A%7D%0A -->

<p> <img src="/images/sample-progress.png" alt="" width=157 height=103 class="extra"> 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 <span>'direction'</span> property
on this element has a <span>computed value</span> 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 be
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> <img src="/images/sample-progress.png" alt="" width=276 height=115 class="extra"> When the this
element has a <span>horizontal writing mode</span>, the element is expected to be depicted as a
horizontal progress bar. The start is on the right and the end is on the left if the
<span>'direction'</span> property on this element has a <span>computed value</span> of 'rtl', and
with the start on the left and the end on the right otherwise. When this element has a
<span>vertical writing mode</span>, it is expected to be depicted as a vertical progress bar. The
start is on the bottom and the end is on the top if the <span>'direction'</span> property on this
element has a <span>computed value</span> of 'rtl', and with the start on the top and the end on
the bottom otherwise.</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 indeterminate progress bars. User agents are also expected to vary the
presentation based on the dimensions of the element.</p>

<p class="example">For example, on some platforms for showing indeterminate progress there is a
"spinner" progress indicator with square dimensions, which could be used when the element is
square, and an indeterminate progress bar, which could be used when the element is wide.</p>

<p class="note">Requirements for how to determine if the progress bar is determinate or
indeterminate, and what progress a determinate progress bar is to show, are included in the
definition of the <code>progress</code> element.</p>
Expand Down Expand Up @@ -142564,6 +142576,7 @@ INSERT INTERFACES HERE
Devarshi Pant,
Devdatta,
Devin Rousso,
Di Zhang,
Diego Ferreiro Val,
Diego Gonz&aacute;lez Z&uacute;&ntilde;iga, <!-- diekus on GitHub -->
Diego Ponce de León,
Expand Down

0 comments on commit 702119c

Please sign in to comment.