Skip to content

GitLab

T
tangled
Commit b3c47c58 authored by Ionel Popescu's avatar Ionel Popescu Committed by Commit Bot
Browse files
Options

On <select> remove the rounded corners and padding for options. 

This CL removes the rounded corners and padding for select options to avoid
exposing the underneath background of the select.

The new behavior is validated by select-popup-appearance-basic.html and by
new tests added in select-multiple-appearance-basic.html

Bug: 1021227
Change-Id: I6e6c45fc6627187f18511e0409ca0e20e07e1d29
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1902525
Commit-Queue: Ionel Popescu <iopopesc@microsoft.com>
Reviewed-by: default avatarMason Freed <masonfreed@chromium.org>
Reviewed-by: default avatarKent Tamura <tkent@chromium.org>
Cr-Commit-Position: refs/heads/master@{#713667}
parent 4be946b9
Hide whitespace changes
Inline Side-by-side
Showing with 34 additions and 10 deletions
third_party/blink/renderer/core/html/resources/controls_refresh.css
View file @ b3c47c58
...@@ -168,16 +168,6 @@ select:-internal-list-box { ...@@ -168,16 +168,6 @@ select:-internal-list-box {
border-radius: 2px; border-radius: 2px;
} }
/* These options only apply to in-page 'multiple' select elements.
The options in the popup are handled in listPicker.css */
select:-internal-list-box option, select:-internal-list-box optgroup {
padding: 0 3px;
}
select:-internal-list-box option {
border-radius: 2px;
}
select:-internal-list-box option:hover { select:-internal-list-box option:hover {
background-color: #f3f3f3; background-color: #f3f3f3;
} }
......
third_party/blink/web_tests/virtual/controls-refresh/color-scheme/select/select-multiple-appearance-basic.html
View file @ b3c47c58
...@@ -73,6 +73,20 @@ ...@@ -73,6 +73,20 @@
</optgroup> </optgroup>
</select> </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 --> <!-- 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);"> <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"> <optgroup label="box-shadow">
......
third_party/blink/web_tests/virtual/controls-refresh/color-scheme/select/select-popup-appearance-basic.html 0 → 100644
View file @ b3c47c58
<!DOCTYPE html>
<script>
testRunner.waitUntilDone();
</script>
<script src="../../../../fast/forms/resources/picker-common.js"></script>
<select id="menu" style="background-color: blue;">
<optgroup label="Theropods">
<option>Tyrannosaurus</option>
<option>Velociraptor</option>
<option>Deinonychus</option>
</optgroup>
<optgroup label="Sauropods">
<option>Diplodocus</option>
<option>Saltasaurus</option>
<option>Apatosaurus</option>
</optgroup>
</select>
<script>
openPicker(document.getElementById('menu'), () => testRunner.notifyDone(), () => testRunner.notifyDone());
</script>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment