Bug 252038

Created attachment 464938 [details] 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