Commit 55ea6b26 authored by Sanket Joshi's avatar Sanket Joshi Committed by Commit Bot

Implement HC support for color suggestion picker

Bug: 1010148
Change-Id: Ie4f14e8ed8d68e618a1afc7c60ad258f89342146
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1834118Reviewed-by: default avatarMason Freed <masonfreed@chromium.org>
Reviewed-by: default avatarKent Tamura <tkent@chromium.org>
Commit-Queue: Sanket Joshi <sajos@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#704019}
parent 4f26c551
...@@ -123,4 +123,23 @@ body.controls-refresh { ...@@ -123,4 +123,23 @@ body.controls-refresh {
.controls-refresh .other-color:hover { .controls-refresh .other-color:hover {
background-color: #f3f3f3; background-color: #f3f3f3;
}
@media (forced-colors: active) {
.controls-refresh .color-swatch {
forced-color-adjust: none;
border-color: WindowText;
}
.controls-refresh .color-swatch:focus {
border-color: Highlight;
}
.controls-refresh .color-swatch-container {
forced-color-adjust: none;
}
.controls-refresh .color-swatch-container::-webkit-scrollbar-thumb {
background-color: WindowText;
}
} }
\ No newline at end of file
...@@ -95,6 +95,10 @@ ...@@ -95,6 +95,10 @@
forced-color-adjust: none; forced-color-adjust: none;
} }
input[type="color"]::-webkit-color-swatch {
border-color: WindowText !important;
}
button, button,
input[type="button"], input[type="button"],
input[type="submit"], input[type="submit"],
......
<!DOCTYPE html>
<html>
<head>
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
</script>
<script src='../resources/picker-common.js'></script>
</head>
<body>
<input type='color' id='color' list>
<script>
openPicker(document.getElementById('color'), () => testRunner.notifyDone(), () => testRunner.notifyDone());
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
</script>
<script src='../resources/picker-common.js'></script>
</head>
<body>
<input type='color' id='color' value='#ff0000' list='colors'>
<datalist id='colors'>
<option value='#ff00ff'>F</option>
<option value='#eee00e'>E</option>
<option value='#d00ddd'>D</option>
<option value='#00cccc'>C</option>
<option value='#bbbb00'>B</option>
<option value='#aa00aa'>A</option>
<option value='#009999'>9</option>
<option value='#800888'>8</option>
<option value='#777700'>7</option>
<option value='#006666'>6</option>
<option value='#550055'>5</option>
<option value='#444004'>4</option>
<option value='#333300'>3</option>
<option value='#200222'>2</option>
<option value='#111001'>1</option>
<option value='#000000'>0</option>
<option value='#F00'>f00</option> <!--invalid-->
<option value='red'>red</option> <!--invalid-->
</datalist>
<script>
openPicker(document.getElementById('color'), () => testRunner.notifyDone(), () => testRunner.notifyDone());
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
</script>
<script src='../resources/picker-common.js'></script>
</head>
<body>
<input type='color' id='color' value='#ff0000' list='gray'>
<datalist id='gray'>
<option>#ffffff</option>
<option>#eeeeee</option>
<option>#dddddd</option>
<option>#cccccc</option>
<option>#bbbbbb</option>
<option>#aaaaaa</option>
<option>#999999</option>
<option>#888888</option>
<option>#777777</option>
<option>#666666</option>
<option>#555555</option>
<option>#444444</option>
<option>#333333</option>
<option>#222222</option>
<option>#111111</option>
<option>#000000</option>
<option>#F00</option> <!--invalid-->
<option>red</option> <!--invalid-->
</datalist>
<script>
openPicker(document.getElementById('color'), () => testRunner.notifyDone(), () => testRunner.notifyDone());
</script>
</body>
</html>
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