picker-and-slotted.tentative.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /html/semantics/forms/the-select-element/customizable-select/picker-and-slotted.tentative.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html class=reftest-wait>

<link rel=match href="picker-and-slotted-ref.html">

<link rel="author" title="L. David Baron" href="https://dbaron.org/">

<link rel="author" title="Google" href="http://www.google.com/">

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

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

<div id="host">

  <select>

    <option>one</option>

    <option>two</option>

  </select>

</div>

<script>

let host = document.getElementById("host");

let shadow = host.attachShadow({mode: "open"});

shadow.innerHTML = `

  <style>

    #myslot::slotted(select), #myslot::slotted(select)::picker(select) {

      appearance: base-select;

    #myslot::slotted(select)::picker(select) {

      border: thick solid blue;

      background: lime;

      color: maroon;

  </style>

  <slot id="myslot"></slot>

`;

(async () => {

  await test_driver.bless();

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

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

})();

</script>