Change definition of select element list box and drop-down box rendering

[josepharhar]

This PR allows select elements with the multiple attribute to be rendered as a drop-down box when the author explicitly sets the size attribute to 1.

The related issue should be resolved by requiring that mobile browsers and desktop browsers both follow these rules in order to improve cross-platform compatibility.

Fixes #8189

• At least two implementers are interested (and none opposed):
  • Chromium
  • Gecko: Change definition of select element list box and drop-down box rendering mozilla/standards-positions#1274
• Standards positions:
  • Change definition of select element list box and drop-down box rendering WebKit/standards-positions#532
  • Change definition of select element list box and drop-down box rendering mozilla/standards-positions#1274
• Tests are written and can be reviewed and commented upon at:
  • https://chromium-review.googlesource.com/c/chromium/src/+/6967020
• Implementation bugs are filed:
  • Chromium: https://issues.chromium.org/issues/439964654
  • Gecko: https://bugzilla.mozilla.org/show_bug.cgi?id=1988022
  • WebKit: https://bugs.webkit.org/show_bug.cgi?id=309606
• Corresponding HTML AAM & ARIA in HTML issues & PRs: Update select role mapping to use HTML display size w3c/html-aria#555
• MDN issue is filed: Mobile and desktop parity for the select element mdn/content#43403
• The top of this comment includes a clear commit message to use.

(See WHATWG Working Mode: Changes for more details.)

---

/form-elements.html ( diff )
/rendering.html ( diff )

[josepharhar]

This PR implements the plan I wrote in this issue: #8189

The UseCounter data I've collected so far looks OK, but this change might not end up being web compatible. Before I try shipping this and finding out, I'd like feedback on this from Apple and Mozilla.

[mtrootyy]

The following changes are also required:

4.10.7 The select element
If a select element has a required attribute specified, does not have a multiple attribute specified, and has a display size of 1; and if the value of the first option element in the select element's list of options (if any) is the empty string, and that option element's parent node is the select element (and not an optgroup element), then that option is the select element's placeholder label option.
↓
If a select element has a required attribute specified, and has a display size of 1; and if the value of the first option element in the select element's list of options (if any) is the empty string, and that option element's parent node is the select element (and not an optgroup element), then that option is the select element's placeholder label option.

Aria in HTML(https://w3c.github.io/html-aria/)
select (with NO multiple attribute and NO size attribute having value greater than 1)
↓
select (with NO size attribute having value greater than 1)

select (with a multiple attribute or a size attribute having value greater than 1)
↓
select (with a size attribute having value greater than 1)

[josepharhar]

Thanks @mtrootyy, I updated that section and opened an aria PR: w3c/html-aria#555

[foolip]

@zcorpan do you want to review as well? It touches some things you've worked on I think.

[zcorpan]

Looks good.

I think some things can be tested, e.g. with reftest you can check that <select multiple> is the same as <select multiple size=4>, and that <select multiple size=1 style="field-sizing: content"><option>foo</select> != <select multiple size=4 style="field-sizing: content"><option>foo</select>

[josepharhar]

Looks good.

I think some things can be tested, e.g. with reftest you can check that <select multiple> is the same as <select multiple size=4>, and that <select multiple size=1 style="field-sizing: content"><option>foo</select> != <select multiple size=4 style="field-sizing: content"><option>foo</select>

Thanks! I am adding a WPT that does this.

[annevk]

This PR allows select elements with the multiple attribute to be rendered as a drop-down box when the author explicitly sets the size attribute to 1.

What should happen on platforms that don't have this capability?

[josepharhar]

This PR allows select elements with the multiple attribute to be rendered as a drop-down box when the author explicitly sets the size attribute to 1.

What should happen on platforms that don't have this capability?

In chromium, I am implementing this as a popover inside the shadowroot of the select element for desktop platforms. We have also been using a web-based popup document for the single-select picker on windows and linux for as long as I know. By implementing it this way, platform capability doesn't matter, and we could switch it to a native platform implementation later if we want to, as we did for single-select on MacOS.

If we have to carve out an exception in the spec while we wait for MacOS to implement this picker in order to get this PR merged, then we could change it to say that <select multiple size=1> may be either list box or drop down depending on the UA, unlike the other modes that are more well defined.

[josepharhar]

@annevk if I changed the definition of <select multiple size=1> to be either listbox or dropdown box depending on the platform, would that be sufficient?

[josepharhar]

I pushed a commit to make <select multiple size=1> either a listbox or a dropdown box depending on platform support. How does it look?

[josepharhar]

I could also rewrite it as an algorithm and/or add a table which shows select with different attributes and what their display type becomes

[josepharhar]

@annevk Would you mind taking another look at this?

[annevk]

Apologies for the delay here, this looks good now. Once you complete OP I'll merge.