[Webkit-unassigned] [Bug 252038] New: <option> not rendered when <datalist> is attached to <input type="range">

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=252038

            Bug ID: 252038
           Summary: <option> not rendered when <datalist> is attached to
                    <input type="range">
           Product: WebKit
           Version: Other
          Hardware: Unspecified
                OS: Linux
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Forms
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: ana.tudor.lhnh at gmail.com
                CC: cdumez at apple.com, wenson_hsieh at apple.com

Created attachment 464938

  --> https://bugs.webkit.org/attachment.cgi?id=464938&action=review

Expected result, which is also the result in Firefox & in Chromium browsers.

Consider a `<datalist>` tied to a range `<input>`:

```
<div role='group' aria-label='slider with ruler'>
        <input type='range' list='l'/>
        <datalist id='l'>
                <option value='0' label='min'></option>
                <option value='25'></option>
                <option value='50' label='mid'></option>
                <option value='75'></option>
                <option value='100' label='max'></option>
        </datalist>
</div>
```

Make the `<datalist>` a grid with 5 columns:

```
datalist {
        display: grid;
        grid-template-columns: repeat(5, 2em)
}
```

This does nothing in Safari (tested via Epiphany on Ubuntu), while in Firefox and Chromium browsers, it displays the `<option>` elements underneath the slider.

Live minimal test: https://codepen.io/thebabydino/pen/PoBrVpR

Because the `<datalist>` is tie to the range `<input>`, I've been using it to code "sliders with rulers" designs.

Example #1: https://codepen.io/thebabydino/pen/PwOPMG

Example #2: https://codepen.io/thebabydino/pen/myqpow

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20230210/62f18c15/attachment-0001.htm>