<!DOCTYPE html>
<html class="reftest-wait">
<title>HTMLSelectMenuElement Test: option arbitrary content displayed</title>
<link rel="author" title="Ionel Popescu" href="mailto:iopopesc@microsoft.com">
<link rel=match href="selectmenu-option-arbitrary-content-displayed-ref.tentative.html">
<link rel="stylesheet" href="/fonts/ahem.css">
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>

<style>
  html,selectmenu {
    font-family: Ahem;
  }
  selectmenu {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 30px;
  }

  [popover] {
    width: fit-content;
    height: fit-content;
    background: white;
    color: black;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0px;
    box-shadow: 0px 12.8px 28.8px rgba(0, 0, 0, 0.13), 0px 0px 9.2px rgba(0, 0, 0, 0.11);
    box-sizing: border-box;
    overflow: auto;
    padding: 4px;
  }

  option {
    background-color: white !important;
    padding: 0px;
  }
</style>

<selectmenu id="selectMenu0">
  <div popover slot="listbox" behavior="listbox">
    <option>
      option with image displayed
      <img src="/images/green-256x256.png">
    </option>
  </div>
</selectmenu>

<script>
  function clickOn(element) {
    const actions = new test_driver.Actions();
    return actions.pointerMove(0, 0, {origin: element})
      .pointerDown({button: actions.ButtonType.LEFT})
      .pointerUp({button: actions.ButtonType.LEFT})
      .send();
  }

  async function test() {
    const selectMenu0 = document.getElementById("selectMenu0");

    await clickOn(selectMenu0);
    document.documentElement.classList.remove('reftest-wait');
  }

  test();
</script>
