Skip to content

GitLab

T
tangled
Commit f98c414d authored by Joey Arhar's avatar Joey Arhar Committed by Commit Bot
Browse files
Options

<input type=color> accept values without '%' or '#' 

This patch makes the color picker popup for <input type=color> accept
saturation and luminance values without the trailing % as well as hex
values without the leading # when they are typed in by the user. The %
and # characters will be automatically added by the popup.

Bug: 1147506
Change-Id: Icf406a6c9439433910e90a7be82309e72e4b4d86
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2560659Reviewed-by: default avatarSanket Joshi <sajos@microsoft.com>
Reviewed-by: default avatarMason Freed <masonfreed@chromium.org>
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Cr-Commit-Position: refs/heads/master@{#831212}
parent 24ae789f
Hide whitespace changes
Inline Side-by-side
Showing with 58 additions and 14 deletions
third_party/blink/renderer/core/html/forms/resources/color_picker.js
View file @ f98c414d
......@@ -1845,13 +1845,12 @@ class ChannelValueContainer extends HTMLInputElement {
if (value) {
switch (this.colorChannel_) {
case ColorChannel.HEX:
if (value.startsWith('#')) {
if (value.startsWith('#'))
value = value.substr(1).toLowerCase();
if (value.match(/^[0-9a-f]+$/)) {
// Ex. 'ffffff' => this.channelValue_ == 'ffffff'
// Ex. 'ff' => this.channelValue_ == '0000ff'
this.channelValue_ = ('000000' + value).slice(-6);
}
if (value.match(/^[0-9a-f]+$/)) {
// Ex. 'ffffff' => this.channelValue_ == 'ffffff'
// Ex. 'ff' => this.channelValue_ == '0000ff'
this.channelValue_ = ('000000' + value).slice(-6);
}
break;
case ColorChannel.R:
......@@ -1868,11 +1867,10 @@ class ChannelValueContainer extends HTMLInputElement {
break;
case ColorChannel.S:
case ColorChannel.L:
if (value.endsWith('%')) {
if (value.endsWith('%'))
value = value.substring(0, value.length - 1);
if (value.match(/^\d+$/) && (0 <= value) && (value <= 100)) {
this.channelValue_ = Number(value);
}
if (value.match(/^\d+$/) && (0 <= value) && (value <= 100)) {
this.channelValue_ = Number(value);
}
break;
}
......
third_party/blink/web_tests/fast/forms/color/color-picker-channel-value-container-class.html
View file @ f98c414d
......@@ -84,7 +84,7 @@ test(() => {
test(() => {
resetContainerValues(hexValueContainer);
setContainerValue(hexValueContainer, '4287f5');
assert_equals(hexValueContainer.channelValue_, '7effc9');
assert_equals(hexValueContainer.channelValue_, '4287f5');
}, 'hexValueContainer onValueChange_ hex value without \'#\'');
test(() => {
......@@ -248,10 +248,10 @@ test(() => {
test(() => {
resetContainerValues(sValueContainer, lValueContainer);
setContainerValue(sValueContainer, '97');
assert_equals(sValueContainer.channelValue_, 100);
assert_equals(sValueContainer.channelValue_, 97);
setContainerValue(lValueContainer, '34');
assert_equals(lValueContainer.channelValue_, 75);
assert_equals(lValueContainer.channelValue_, 34);
}, 'slValueContainers onValueChange_ without \'%\'');
</script>
</body>
</html>
\ No newline at end of file
</html>
third_party/blink/web_tests/fast/forms/color/color-picker-omit-percent.html 0 → 100644
View file @ f98c414d
<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../fast/forms/resources/picker-common.js"></script>
<input type=color id=colorid value="#AAAAAA">
<script>
promise_test(async () => {
await openPickerWithPromise(colorid);
popupWindow.focus();
const popupDocument = popupWindow.document;
const formatToggler = popupDocument.querySelector('format-toggler');
formatToggler.click();
const sValueContainer = popupDocument.getElementById('sValueContainer');
sValueContainer.click();
sValueContainer.select();
eventSender.keyDown('4');
eventSender.keyDown('2');
eventSender.keyDown('Tab');
assert_equals(sValueContainer.value, '42%');
formatToggler.click();
const hexValueContainer = popupDocument.getElementById('hexValueContainer');
hexValueContainer.click();
hexValueContainer.select();
eventSender.keyDown('b');
eventSender.keyDown('b');
eventSender.keyDown('b');
eventSender.keyDown('b');
eventSender.keyDown('b');
eventSender.keyDown('b');
eventSender.keyDown('Tab');
assert_equals(hexValueContainer.value, '#bbbbbb');
hexValueContainer.click();
hexValueContainer.select();
eventSender.keyDown('a');
eventSender.keyDown('b');
eventSender.keyDown('c');
eventSender.keyDown('Tab');
assert_equals(hexValueContainer.value, '#000abc');
});
</script>
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