Skip to content

GitLab

T
tangled
Commit 2d553bd3 authored by Alex Keng's avatar Alex Keng Committed by Commit Bot
Browse files
Options

select: Fix hover color in HC mode 

This CL fixes <select>'s hover color in high contrast mode (forced_colors.css) per the design.

The test select-multiple-appearance-basic.html is modified to test
the scenario of focused+selected+hovered.
3 more tests are added to test 1)focused+unselected+hovered,
2)unfocused+selected+hovered, 3)unfocused+unselected+hovered.

Change-Id: I2fafe1447290a4783fd3a393f1b0046e143ad9ee
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1995505
Commit-Queue: Alex Keng <shihken@microsoft.com>
Reviewed-by: default avatarKent Tamura <tkent@chromium.org>
Reviewed-by: default avatarMason Freed <masonfreed@chromium.org>
Cr-Commit-Position: refs/heads/master@{#732767}
parent de36a60c
Hide whitespace changes
Inline Side-by-side
Showing with 72 additions and 5 deletions
third_party/blink/renderer/core/html/resources/forced_colors.css
View file @ 2d553bd3
...@@ -150,8 +150,10 @@ ...@@ -150,8 +150,10 @@
/* option selected */ /* option selected */
select:-internal-list-box:focus option:checked, select:-internal-list-box:focus option:checked,
select:-internal-list-box:focus option:checked:hover, select:-internal-list-box:focus option:checked:hover,
select:-internal-list-box:focus option:checked:enabled:hover,
select:-internal-list-box option:checked, select:-internal-list-box option:checked,
select:-internal-list-box option:checked:hover { select:-internal-list-box option:checked:hover,
select:-internal-list-box:enabled option:checked:enabled:hover {
background-color: Highlight !important; background-color: Highlight !important;
color: Window !important; color: Window !important;
forced-color-adjust: none; forced-color-adjust: none;
...@@ -170,8 +172,9 @@ ...@@ -170,8 +172,9 @@
} }
select:-internal-list-box option:hover { select:-internal-list-box option:hover {
background-color: Window; background-color: Highlight !important;
color: Highlight; color: Window;
forced-color-adjust: none;
} }
select { select {
......
third_party/blink/web_tests/virtual/controls-refresh/color-scheme/select/select-multiple-appearance-basic.html
View file @ 2d553bd3
<!DOCTYPE html> <!DOCTYPE html>
<script src="../../../resources/run-after-layout-and-paint.js"></script> <script src="../../../../fast/forms/resources/common.js"></script>
<script src="../../../../resources/run-after-layout-and-paint.js"></script>
<body> <body>
<!-- no style for reference --> <!-- no style for reference -->
...@@ -7,7 +8,7 @@ ...@@ -7,7 +8,7 @@
<optgroup label="unstyled"> <optgroup label="unstyled">
<option selected>first selected option</option> <option selected>first selected option</option>
<option>unselected option</option> <option>unselected option</option>
<option selected>second selected option</option> <option selected selected id="hoverTarget">2nd selected (hovered)</option>
</optgroup> </optgroup>
</select> <br> </select> <br>
...@@ -150,4 +151,10 @@ ...@@ -150,4 +151,10 @@
</optgroup> </optgroup>
</select><br> </select><br>
<script>
runAfterLayoutAndPaint(function () {
let hoverTarget = document.getElementById('hoverTarget');
hoverOverElement(hoverTarget);
}, true);
</script>
</body> </body>
third_party/blink/web_tests/virtual/controls-refresh/color-scheme/select/select-multiple-hover-focused-unselected.html 0 → 100644
View file @ 2d553bd3
<!DOCTYPE html>
<script src="../../../../fast/forms/resources/common.js"></script>
<script src="../../../../resources/run-after-layout-and-paint.js"></script>
<body>
<select multiple autofocus>
<optgroup label="unstyled">
<option selected>selected</option>
<option id="hoverTarget">unselected (hovered)</option
</optgroup>
</select>
<script>
runAfterLayoutAndPaint(function () {
let hoverTarget = document.getElementById('hoverTarget');
hoverOverElement(hoverTarget);
}, true);
</script>
</body>
third_party/blink/web_tests/virtual/controls-refresh/color-scheme/select/select-multiple-hover-selected.html 0 → 100644
View file @ 2d553bd3
<!DOCTYPE html>
<script src="../../../../fast/forms/resources/common.js"></script>
<script src="../../../../resources/run-after-layout-and-paint.js"></script>
<body>
<select multiple>
<optgroup label="unstyled">
<option selected id="hoverTarget">selected (hovered)</option>
<option>unselected</option
</optgroup>
</select>
<script>
runAfterLayoutAndPaint(function () {
let hoverTarget = document.getElementById('hoverTarget');
hoverOverElement(hoverTarget);
}, true);
</script>
</body>
third_party/blink/web_tests/virtual/controls-refresh/color-scheme/select/select-multiple-hover-unselected.html 0 → 100644
View file @ 2d553bd3
<!DOCTYPE html>
<script src="../../../../fast/forms/resources/common.js"></script>
<script src="../../../../resources/run-after-layout-and-paint.js"></script>
<body>
<select multiple>
<optgroup label="unstyled">
<option selected>selected</option>
<option id="hoverTarget">unselected (hovered)</option
</optgroup>
</select>
<script>
runAfterLayoutAndPaint(function () {
let hoverTarget = document.getElementById('hoverTarget');
hoverOverElement(hoverTarget);
}, true);
</script>
</body>
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