| <!DOCTYPE html> |
| <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 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 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 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 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 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 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 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 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 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 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 multiple style="background-color: blue;"> |
| <option selected>selected option</option> |
| <option>unselected option</option> |
| <option>unselected option</option> |
| </select> <br> |
| |
| <!-- shadow --> |
| <select 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 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 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 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 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 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 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> |
| |
| <script> |
| runAfterLayoutAndPaint(function () { |
| let hoverTarget = document.getElementById('hoverTarget'); |
| hoverOverElement(hoverTarget); |
| }, true); |
| </script> |
| </body> |
