[selectmenu] How should writing-mode work with selectmenu

[gregwhitworth]

The amazing Scott Kellum dropped by our discord to inquire about the following:

I’m running into an issue with writing-mode and UI elements. It works as expected in Firefox but the UI elements in Chrome/Safari don’t respect the writing-mode applied to them. https://codepen.io/scottkellum/pen/poLmmRB/4bbd0fd358fec6f42d8cf279679f7183 Is this issue documented anywhere or is it being worked on?

While I do think there should be some general discussion around how writing-modes function with respect to replaced elements I think it's worth looking at the <selectmenu> in its current form and determine if this is the expected behavior. Here is a forked version of Scott's pen including the new <selectmenu>.

Just in case you don't have experimental flags enabled on a Chromium browser; here is how it renders:

Note that the CSS is very basic in that it simply applies the writing mode to all of HTML

selectmenu {
    writing-mode: vertical-lr;
}

So basically what is happening is that the replaced element is not adhering to this writing mode. If I replace the default content with my own:

<div slot="button">
    <div behavior="button" class="fake-input">
      Open
      <span class="arrow">&#9660;</span>
    </div>
    <div>
      <p>Selected Value: 
        <span behavior="selected-value" slot="selected-value"></span>
      </p>
    </div>
  </div>

We end up with the following rendering:

Here is what the spec says with regards to replaced elements respecting writing modes:

The content of replaced elements do not rotate due to the writing mode: images and external content such as from