Bug 266888 – `select`, `option` and `optgroup` element (as listbox) should have correct cursor and white-space

• Component: Forms
• Status: NEW

[Ahmad Saleem]

Hi Team,

While looking into WPT failures specifically below test, I noticed that we fail few tests:

WPT Test Case: https://wpt.fyi/results/html/rendering/widgets/the-select-element/select-as-listbox-default-styles.tentative.html?label=master&label=experimental&aligned=

I noticed that we fail few cursor and white-space related tests:

While doing some changes in 'html.css' (UA Stylesheet), I was manage to make them progress:

optgroup {
    white-space: normal;
    cursor: auto;
}

option {
    cursor: auto;
    white-space: normal;
}

^ In option, we are undoing previous Blink import, where we added 'white-space: nowrap'.

select {
    cursor: auto;
}

__

NOTE - these are changes above, which are just I done locally and it might not be right way to fix the bug (due to list-box - might have to introduce new internal selector similar to 'table' change), but just wanted to raise so we can get input and track it.

___

It progress following:

PASS <option>3 (in <select multiple=""><optgroup label="2">) - cursor
PASS <option>3 (in <select multiple=""><optgroup label="2">) - white-space
PASS <optgroup label="2"><option>3 (in <select multiple="">) - cursor
PASS <option>1 (in <select multiple="">) - cursor
PASS <option>1 (in <select multiple="">) - white-space

___

Thanks!

[Tim Nguyen (:ntim)]

option and optgroup have some special renderering, so applying those properties won't do anything. They should be refactored to use normal CSS rendering for this to work.

[Ahmad Saleem]

(In reply to Tim Nguyen (:ntim) from comment #1)
> option and optgroup have some special renderering, so applying those
> properties won't do anything. They should be refactored to use normal CSS
> rendering for this to work.

Yes - known 'BrowserCompat' issue. I tried in the past to merge Blink patch to bring such functionality, but was not successful. I might give it another try.

Should we hold-off, till we fix above or do away with this change any way?

[Radar WebKit Bug Importer]

<rdar://problem/120372924>

[Ahmad Saleem]

Created attachment 474548 [details]
Git-difff-patch

[Ahmad Saleem]

So I did separate PR to fix `cursor` and `align-items` issue in this commit: 295451@main

Remaining most of them can be fixed with:

select:is([size], [multiple]), select[size][multiple] {
    align-items: normal;
    cursor: auto;
    border: initial;
    font: initial;
    background-color: initial;
    border-radius: initial;
    white-space: initial;
}

^ Except `whitspace` and `font-weight` issues.