select-picker-pseudo-first-letter-first-line.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /html/semantics/forms/the-select-element/customizable-select/select-picker-pseudo-first-letter-first-line.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html class="reftest-wait">

<meta charset="utf-8">

<title>CSS ::first-letter and ::first-line pseudo-elements on select::picker(select)</title>

<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">

<link rel="help" href="https://drafts.csswg.org/css-forms/#the-picker-pseudo-element">

<link rel="help" href="https://drafts.csswg.org/css-pseudo/#first-line-pseudo">

<link rel="help" href="https://drafts.csswg.org/css-pseudo/#first-letter-pseudo">

<link rel="match" href="select-picker-pseudo-first-letter-first-line-ref.html">

<script src="/resources/testdriver.js"></script>

<script src="/resources/testdriver-vendor.js"></script>

<style>

select, select::picker(select) {

  appearance: base-select;

select::picker(select)::first-letter {

  color: red;

  font-size: 20px;

select::picker(select)::first-line {

  color: navy;

</style>

<select>

  <div>Hello World</div>

  <option>one</option>

  <option>two</option>

</select>

<script>

(async () => {

  await test_driver.bless();

  document.querySelector("select").showPicker();

  document.documentElement.classList.remove("reftest-wait");

})();

</script>