Skip to content

GitLab

T
tangled
Commit 4cb0d2a4 authored by Sanket Joshi's avatar Sanket Joshi Committed by Commit Bot
Browse files
Options

Add support for the HSL color format to the new color picker. 

Prior to this CL, the new color picker supported the HEX and RGB color
formats. Now, users can also view and/or manually change the selected
color in the HSL color format.

Users can switch between the HEX, RGB and HSL by clicking on the format
toggler. To make it easier to translate values from one format to
another, additional helper functions like rgbToHSL and hslToHex are
being added to the Color class.
Update hex format toggle test and add hsl format toggle test.

Change-Id: I7a215af1788018c5a895b76c71a02c9aeeb987bd
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1731777Reviewed-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@{#684033}
parent e3d16e3d
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 629 additions and 30 deletions
third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-picker-appearance-hex-format.html
View file @ 4cb0d2a4
...@@ -20,7 +20,8 @@ function openPickerSuccessfulCallback() { ...@@ -20,7 +20,8 @@ function openPickerSuccessfulCallback() {
popupWindow.focus(); popupWindow.focus();
const popupDocument = popupWindow.document; const popupDocument = popupWindow.document;
const formatToggler = popupDocument.querySelector('format-toggler'); const formatToggler = popupDocument.querySelector('format-toggler');
formatToggler.click(); formatToggler.click(); // first click changes format to HSL
formatToggler.click(); // second click changes format to Hex
testRunner.notifyDone(); testRunner.notifyDone();
} }
</script> </script>
......
third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-picker-appearance-hsl-format.html 0 → 100644
View file @ 4cb0d2a4
<!DOCTYPE html>
<html>
<head>
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
</script>
<script src='../../../forms/resources/picker-common.js'></script>
</head>
<body>
<input type='color' id='color' value='#7EFFC9'>
<p id='description' style='opacity: 0'></p>
<div id='console' style='opacity: 0'></div>
<script>
openPicker(document.getElementById('color'), openPickerSuccessfulCallback, () => testRunner.notifyDone());
function openPickerSuccessfulCallback() {
popupWindow.focus();
const popupDocument = popupWindow.document;
const formatToggler = popupDocument.querySelector('format-toggler');
formatToggler.click();
testRunner.notifyDone();
}
</script>
</body>
</html>
\ No newline at end of file
third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-picker-channel-value-container-class.html
View file @ 4cb0d2a4
...@@ -20,6 +20,9 @@ let hexValueContainer = new ChannelValueContainer(ColorChannel.HEX, new Color('# ...@@ -20,6 +20,9 @@ let hexValueContainer = new ChannelValueContainer(ColorChannel.HEX, new Color('#
let rValueContainer = new ChannelValueContainer(ColorChannel.R, new Color('#7effc9')); let rValueContainer = new ChannelValueContainer(ColorChannel.R, new Color('#7effc9'));
let gValueContainer = new ChannelValueContainer(ColorChannel.G, new Color('#7effc9')); let gValueContainer = new ChannelValueContainer(ColorChannel.G, new Color('#7effc9'));
let bValueContainer = new ChannelValueContainer(ColorChannel.B, new Color('#7effc9')); let bValueContainer = new ChannelValueContainer(ColorChannel.B, new Color('#7effc9'));
let hValueContainer = new ChannelValueContainer(ColorChannel.H, new Color('#7effc9'));
let sValueContainer = new ChannelValueContainer(ColorChannel.S, new Color('#7effc9'));
let lValueContainer = new ChannelValueContainer(ColorChannel.L, new Color('#7effc9'));
function setContainerValue(valueContainer, value) { function setContainerValue(valueContainer, value) {
valueContainer.value = value; valueContainer.value = value;
...@@ -42,6 +45,15 @@ function resetContainerValues(...valueContainers) { ...@@ -42,6 +45,15 @@ function resetContainerValues(...valueContainers) {
case ColorChannel.B: case ColorChannel.B:
setContainerValue(valueContainer, '201'); setContainerValue(valueContainer, '201');
break; break;
case ColorChannel.H:
setContainerValue(valueContainer, '155');
break;
case ColorChannel.S:
setContainerValue(valueContainer, '100%');
break;
case ColorChannel.L:
setContainerValue(valueContainer, '75%');
break;
} }
}); });
} }
...@@ -51,6 +63,9 @@ test(() => { ...@@ -51,6 +63,9 @@ test(() => {
assert_equals(rValueContainer.channelValue_, 126); assert_equals(rValueContainer.channelValue_, 126);
assert_equals(gValueContainer.channelValue_, 255); assert_equals(gValueContainer.channelValue_, 255);
assert_equals(bValueContainer.channelValue_, 201); assert_equals(bValueContainer.channelValue_, 201);
assert_equals(hValueContainer.channelValue_, 155);
assert_equals(sValueContainer.channelValue_, 100);
assert_equals(lValueContainer.channelValue_, 75);
}, 'initial values'); }, 'initial values');
test(() => { test(() => {
...@@ -154,6 +169,82 @@ test(() => { ...@@ -154,6 +169,82 @@ test(() => {
setContainerValue(bValueContainer, ''); setContainerValue(bValueContainer, '');
assert_equals(bValueContainer.channelValue_, 201); assert_equals(bValueContainer.channelValue_, 201);
}, 'rgbValueContainers onValueChange_ empty values'); }, 'rgbValueContainers onValueChange_ empty values');
test(() => {
resetContainerValues(hValueContainer, sValueContainer, lValueContainer);
setContainerValue(hValueContainer, '275');
assert_equals(hValueContainer.channelValue_, 275);
setContainerValue(sValueContainer, '86%');
assert_equals(sValueContainer.channelValue_, 86);
setContainerValue(lValueContainer, '7%');
assert_equals(lValueContainer.channelValue_, 7);
}, 'hslValueContainers onValueChange_ valid change');
test(() => {
resetContainerValues(hValueContainer, sValueContainer, lValueContainer);
setContainerValue(hValueContainer, '018');
assert_equals(hValueContainer.channelValue_, 18);
setContainerValue(sValueContainer, '005%');
assert_equals(sValueContainer.channelValue_, 5);
setContainerValue(lValueContainer, '099%');
assert_equals(lValueContainer.channelValue_, 99);
}, 'hslValueContainers onValueChange_ leading zero values');
test(() => {
resetContainerValues(hValueContainer, sValueContainer, lValueContainer);
setContainerValue(hValueContainer, '-1');
assert_equals(hValueContainer.channelValue_, 155);
setContainerValue(sValueContainer, '-10%');
assert_equals(sValueContainer.channelValue_, 100);
setContainerValue(lValueContainer, '-0%');
assert_equals(lValueContainer.channelValue_, 75);
}, 'hslValueContainers onValueChange_ negative values');
test(() => {
resetContainerValues(hValueContainer, sValueContainer, lValueContainer);
setContainerValue(hValueContainer, '%^&');
assert_equals(hValueContainer.channelValue_, 155);
setContainerValue(sValueContainer, 'ABC');
assert_equals(sValueContainer.channelValue_, 100);
setContainerValue(lValueContainer, ',){^');
assert_equals(lValueContainer.channelValue_, 75);
}, 'hslValueContainers onValueChange_ non number values');
test(() => {
resetContainerValues(hValueContainer, sValueContainer, lValueContainer);
setContainerValue(hValueContainer, '3.2');
assert_equals(hValueContainer.channelValue_, 155);
setContainerValue(sValueContainer, '5.0%');
assert_equals(sValueContainer.channelValue_, 100);
setContainerValue(lValueContainer, '9.9%');
assert_equals(lValueContainer.channelValue_, 75);
}, 'hslValueContainers onValueChange_ decimal values');
test(() => {
resetContainerValues(hValueContainer, sValueContainer, lValueContainer);
setContainerValue(hValueContainer, '');
assert_equals(hValueContainer.channelValue_, 155);
setContainerValue(sValueContainer, '');
assert_equals(sValueContainer.channelValue_, 100);
setContainerValue(lValueContainer, '');
assert_equals(lValueContainer.channelValue_, 75);
}, 'hslValueContainers onValueChange_ empty values');
test(() => {
resetContainerValues(sValueContainer, lValueContainer);
setContainerValue(sValueContainer, '%');
assert_equals(sValueContainer.channelValue_, 100);
setContainerValue(lValueContainer, '%');
assert_equals(lValueContainer.channelValue_, 75);
}, 'slValueContainers onValueChange_ only \'%\'');
test(() => {
resetContainerValues(sValueContainer, lValueContainer);
setContainerValue(sValueContainer, '97');
assert_equals(sValueContainer.channelValue_, 100);
setContainerValue(lValueContainer, '34');
assert_equals(lValueContainer.channelValue_, 75);
}, 'slValueContainers onValueChange_ without \'%\'');
</script> </script>
</body> </body>
</html> </html>
\ 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