select-multiple-appearance-basic.html

<!DOCTYPE html>
<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-5">
<meta name="color-scheme" content="light dark">
<script src="../../resources/common.js"></script>
<script src="../../../../resources/run-after-layout-and-paint.js"></script>
<body>

<!-- no style for reference -->
<select id="reference" multiple autofocus size=5>
  <optgroup label="unstyled">
    <option selected>first selected option</option>
    <option>unselected option</option>
    <option selected selected id="hoverTarget">2nd selected (hovered)</option>
  </optgroup>
</select> <br>

<!-- disabled select -->
<select id="disabled1" multiple disabled size=5>
  <optgroup label="disabled select">
    <option selected>first selected option</option>
    <option>unselected option</option>
    <option selected>second selected option</option>
  </optgroup>
</select>
<div style="background: black; display:inline-block">
<select id="disabled2" multiple disabled size=5>
  <optgroup label="disabled select black-bg">
    <option selected>first selected option</option>
    <option>unselected option</option>
    <option selected>second selected option</option>
  </optgroup>
</select>
</div>

<!-- disabled option -->
<select id="disabled-option" multiple>
  <optgroup label="disabled option">
    <option selected>first selected option</option>
    <option disabled>disabled unselected option</option>
    <option selected>second selected option</option>
  </optgroup>
</select>

<!-- disabled selected option -->
<select id="disabled-selected-option" multiple>
    <optgroup label="disabled selected option">
      <option disabled selected>disabled first selected option</option>
      <option>unselected option</option>
      <option selected>second selected option</option>
    </optgroup>
  </select> <br>


<!-- border -->
<select id="border1" multiple style="border: 3px solid lime;">
  <optgroup label="thick lime border">
    <option selected>first selected option</option>
    <option>unselected option</option>
    <option selected>second selected option</option>
  </optgroup>
</select>
<select id="border2" multiple style="border-radius: 6px;">
  <optgroup label="border-radius: 6px">
    <option selected>first selected option</option>
    <option>unselected option</option>
    <option selected>second selected option</option>
  </optgroup>
</select>

<!-- rtl -->
<select id="rtl" dir="rtl" multiple>
  <optgroup label="right-to-left">
    <option selected>first selected option</option>
    <option>unselected option</option>
    <option selected>second selected option</option>
  </optgroup>
</select> <br>

<!-- background -->
<select id="background1" multiple style="background: linear-gradient(to bottom, #dea 0%,#9c7 44%,#494 100%);">
  <optgroup label="gradient background">
    <option selected>first selected option</option>
    <option>unselected option</option>
    <option selected>second selected option</option>
  </optgroup>
</select>

<select id="background2" multiple style="background-color: blue;">
  <optgroup label="background-color: blue">
    <option selected>first selected option</option>
    <option>unselected option</option>
    <option selected>second selected option</option>
  </optgroup>
</select>

<select id="background3" multiple style="background-color: blue;">
  <option selected>selected option</option>
  <option>unselected option</option>
  <option>unselected option</option>
</select> <br>

<!-- shadow -->
<select id="shadow" multiple style="box-shadow: 4px 4px 10px rgba(255,0,0,0.5), inset 4px 4px 4px rgba(0,255,0,0.5);">
  <optgroup label="box-shadow">
    <option selected>first selected option</option>
    <option>unselected option</option>
    <option selected>second selected option</option>
  </optgroup>
</select>

<!-- size -->
<select id="size1" multiple style="width: 8px; height: 8px;">
  <optgroup label="size: 8px">
    <option selected>first selected option</option>
    <option>unselected option</option>
    <option selected>second selected option</option>
  </optgroup>
</select>
<select id="size2" multiple style="width: 16px; height: 16px;">
  <optgroup label="size: 16px">
    <option selected>first selected option</option>
    <option>unselected option</option>
    <option selected>second selected option</option>
  </optgroup></select>
<select id="size3" multiple style="width: 24px; height: 24px;">
  <optgroup label="size: 24px">
    <option selected>first selected option</option>
    <option>unselected option</option>
    <option selected>second selected option</option>
  </optgroup>
</select>
<select id="size4" multiple style="width: 26px; height: 20px;">
  <optgroup label="width: 26px; height: 20px">
    <option selected>first selected option</option>
    <option>unselected option</option>
    <option selected>second selected option</option>
  </optgroup>
</select>
<select id="size5" multiple style="width: 60px; height: 60px;">
  <optgroup label="size: 60px">
    <option selected>first selected option</option>
    <option>unselected option</option>
    <option selected>second selected option</option>
  </optgroup>
</select> <br>

<!-- zoom -->
<select id="zoom" multiple style="zoom: 1.5;">
  <optgroup label="zoom: 1.5">
    <option selected>first selected option</option>
    <option>unselected option</option>
    <option selected>second selected option</option>
  </optgroup>
</select><br>

<!-- font -->
<select id="font" multiple>
  <optgroup label="font">
    <option selected style="font-family: serif;">Selected Serif option</option>
    <option style="font-family: monospace;">Unselected Monospace option</option>
    <option selected style="font-family: fantasy;">Selected Fantasy option</option>
  </optgroup>
</select>

<script>
  runAfterLayoutAndPaint(function () {
    let hoverTarget = document.getElementById('hoverTarget');
    hoverOverElement(hoverTarget);
  }, true);
</script>
</body>
chromium/third_party/blink/web_tests/fast/forms/color-scheme/select/select-multiple-appearance-basic.html
