diff --git a/images/sample-progress.png b/images/sample-progress.png
index 2a33521d751..c80b6f6b63c 100644
Binary files a/images/sample-progress.png and b/images/sample-progress.png differ
diff --git a/source b/source
index 1205f7c405b..b315b767f59 100644
--- a/source
+++ b/source
@@ -3894,6 +3894,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>,
@@ -49826,7 +49827,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>
 
@@ -132719,6 +132720,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>
@@ -132948,20 +132966,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>
 
@@ -133218,11 +133232,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>
@@ -133248,26 +133263,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>
@@ -141612,6 +141624,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,