[css-writing-modes] Clarify value direction for elements "progress" and "meter" with vertical writing mode

[dizhang168]

Currently, elements "progress" and "meter" don't have well defined behavior when they have the style writing-mode: vertical-lr or writing-mode: vertical-rl. For example, Firefox is the only vendor to support vertical writing-mode for these elements. Here is what a progress bar looks like:

<progress value="70" min="0" max="100" style="writing-mode: vertical-lr"> 70% </progress>

Question 1: Should the value part (blue color) of the element be rendered from top down (as reading is normally done from top to bottom) or should it be rendered bottom to top (so it looks like a glassware that gets filled up)?

Further, currently for the horizontal mode, we are able to change the direction of the progress bar from left-to-right to right-to-left.

<progress value="70" min="0" max="100" style="direction: rtl"> 70% </progress>
<progress value="70" min="0" max="100" style="direction: ltr"> 70% </progress>

However, there are no direction for ttb `top-to-bottom` or `bottom-to-top` (not that I am aware of at least).
Question 2: Should there be a way to allow changing direction for the vertical writing modes?

Spec link:
https://drafts.csswg.org/css-writing-modes-4/#block-flow
https://drafts.csswg.org/css-writing-modes/#direction

[tabatkins]

That's not really a question for CSS - the rendering of a progress/meter is defined entirely by HTML. As far as CSS is concerned it's just a replaced element and we have no control over what goes on inside of it.

Please raise this in https://github.com/whatwg/html