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/+/1731777
Reviewed-by: Mason Freed <masonfreed@chromium.org>
Reviewed-by: Kent Tamura <tkent@chromium.org>
Commit-Queue: Sanket Joshi <sajos@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#684033}
diff --git a/third_party/blink/renderer/core/html/forms/resources/color_picker.js b/third_party/blink/renderer/core/html/forms/resources/color_picker.js
index 0d3c3fa..218d8196 100644
--- a/third_party/blink/renderer/core/html/forms/resources/color_picker.js
+++ b/third_party/blink/renderer/core/html/forms/resources/color_picker.js
@@ -74,8 +74,12 @@
[this.rValue_, this.gValue_, this.bValue_] =
colorStringOrFormat.substring(4, colorStringOrFormat.length - 1)
.split(',').map(Number);
+ } else if (colorStringOrFormat.startsWith('hsl')) {
+ colorStringOrFormat = colorStringOrFormat.replace(/%|\s+/g, '');
+ [this.hValue_, this.sValue_, this.lValue_] =
+ colorStringOrFormat.substring(4, colorStringOrFormat.length - 1)
+ .split(',').map(Number);
}
- // TODO(crbug.com/982088): Add support for HSL
} else {
switch(colorStringOrFormat) {
case ColorFormat.HEX:
@@ -84,7 +88,9 @@
case ColorFormat.RGB:
[this.rValue_, this.gValue_, this.bValue_] = colorValues.map(Number);
break;
- // TODO(crbug.com/982088): Add support for HSL
+ case ColorFormat.HSL:
+ [this.hValue_, this.sValue_, this.lValue_] = colorValues.map(Number);
+ break;
}
}
}
@@ -110,8 +116,10 @@
} else if (this.rValue_ !== undefined) {
this.hexValue_ =
Color.rgbToHex(this.rValue_, this.gValue_, this.bValue_);
+ } else if (this.hValue_ !== undefined) {
+ this.hexValue_ =
+ Color.hslToHex(this.hValue_, this.sValue_, this.lValue_);
}
- // TODO(crbug.com/982088): Add support for HSL
}
asHex() {
@@ -148,8 +156,11 @@
} else if (this.hexValue_ !== undefined) {
[this.rValue_, this.gValue_, this.bValue_] =
Color.hexToRGB(this.hexValue_);
+ } else if (this.hValue_ !== undefined) {
+ [this.rValue_, this.gValue_, this.bValue_] =
+ Color.hslToRGB(this.hValue_, this.sValue_, this.lValue_)
+ .map(Math.round);
}
- // TODO(crbug.com/982088): Add support for HSL
}
rgbValues() {
@@ -161,6 +172,51 @@
}
/**
+ * @returns {number} between 0 and 359
+ */
+ get hValue() {
+ this.computeHSLValues_();
+ return this.hValue_;
+ }
+
+ /**
+ * @returns {number} between 0 and 100
+ */
+ get sValue() {
+ this.computeHSLValues_();
+ return this.sValue_;
+ }
+
+ /**
+ * @returns {number} between 0 and 100
+ */
+ get lValue() {
+ this.computeHSLValues_();
+ return this.lValue_;
+ }
+
+ computeHSLValues_() {
+ if (this.hValue_ !== undefined) {
+ // Already computed.
+ } else if (this.rValue_ !== undefined) {
+ [this.hValue_, this.sValue_, this.lValue_] =
+ Color.rgbToHSL(this.rValue_, this.gValue_, this.bValue_)
+ .map(Math.round);
+ } else if (this.hexValue_ !== undefined) {
+ [this.hValue_, this.sValue_, this.lValue_] =
+ Color.hexToHSL(this.hexValue_).map(Math.round);
+ }
+ }
+
+ hslValues() {
+ return [this.hValue, this.sValue, this.lValue];
+ }
+
+ asHSL() {
+ return 'hsl(' + this.hValue + ',' + this.sValue + '%,' + this.lValue + '%)';
+ }
+
+ /**
* @param {string} hexValue
* @returns {number[]}
*/
@@ -184,6 +240,108 @@
return (cumulativeHexValue + hexValue);
}, '');
}
+
+ /**
+ * The algorithm has been written based on the mathematical formula found at:
+ * https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB.
+ * @param {...number} hslValues
+ * @returns {number[]}
+ */
+ static hslToRGB(...hslValues) {
+ let [hValue, sValue, lValue] = hslValues;
+ hValue /= 60;
+ sValue /= 100;
+ lValue /= 100;
+
+ let rValue = lValue;
+ let gValue = lValue;
+ let bValue = lValue;
+ let match = 0;
+ if (sValue !== 0) {
+ const chroma = (1 - Math.abs(2 * lValue - 1)) * sValue;
+ const x = chroma * (1 - Math.abs(hValue % 2 - 1));
+ match = lValue - chroma / 2;
+ if ((0 <= hValue) && (hValue <= 1)) {
+ rValue = chroma;
+ gValue = x;
+ bValue = 0;
+ } else if ((1 < hValue) && (hValue <= 2)) {
+ rValue = x;
+ gValue = chroma;
+ bValue = 0;
+ } else if ((2 < hValue) && (hValue <= 3)) {
+ rValue = 0;
+ gValue = chroma;
+ bValue = x;
+ } else if ((3 < hValue) && (hValue <= 4)) {
+ rValue = 0;
+ gValue = x;
+ bValue = chroma;
+ } else if ((4 < hValue) && (hValue <= 5)) {
+ rValue = x;
+ gValue = 0;
+ bValue = chroma;
+ } else {
+ // (5 < hValue) && (hValue < 6)
+ rValue = chroma;
+ gValue = 0;
+ bValue = x;
+ }
+ }
+ rValue = (rValue + match) * 255;
+ gValue = (gValue + match) * 255;
+ bValue = (bValue + match) * 255;
+ return [rValue, gValue, bValue];
+ }
+
+ /**
+ * The algorithm has been written based on the mathematical formula found at:
+ * https://en.wikipedia.org/wiki/HSL_and_HSV#From_RGB.
+ * @param {...number} rgbValues
+ * @returns {number[]}
+ */
+ static rgbToHSL(...rgbValues) {
+ const [rValue, gValue, bValue] = rgbValues.map((value) => value / 255);
+ const max = Math.max(rValue, gValue, bValue);
+ const min = Math.min(rValue, gValue, bValue);
+ let hValue = 0;
+ let sValue = 0;
+ let lValue = (max + min) / 2;
+ if (max !== min) {
+ const diff = max - min;
+ if (max === rValue) {
+ hValue = ((gValue - bValue) / diff);
+ } else if (max === gValue) {
+ hValue = ((bValue - rValue) / diff) + 2;
+ } else {
+ // max === bValue
+ hValue = ((rValue - gValue) / diff) + 4;
+ }
+ hValue *= 60;
+ if (hValue < 0) {
+ hValue += 360;
+ }
+ sValue = (diff / (1 - Math.abs(2 * lValue - 1))) * 100;
+ }
+ lValue *= 100;
+ return [hValue, sValue, lValue];
+ }
+
+ /**
+ * @param {...number} rgbValues
+ * @returns {string}
+ */
+ static hslToHex(...hslValues) {
+ return Color.rgbToHex(...Color.hslToRGB(...hslValues).map(Math.round));
+ }
+
+ /**
+ * @param {string} hexValue
+ * @returns {...number}
+ */
+ static hexToHSL(hexValue) {
+ return Color.rgbToHSL(...Color.hexToRGB(hexValue));
+ }
}
/**
@@ -290,30 +448,27 @@
initialColor);
this.rgbValueContainer_ = new ColorValueContainer(ColorFormat.RGB,
initialColor);
+ this.hslValueContainer_ = new ColorValueContainer(ColorFormat.HSL,
+ initialColor);
this.colorValueContainers_ = [
this.hexValueContainer_,
this.rgbValueContainer_,
- // TODO(crbug.com/982088): Add support for HSL
+ this.hslValueContainer_,
];
- this.formatToggler_ = new FormatToggler(ColorFormat.RGB);
+ this.currentColorFormat_ = ColorFormat.RGB;
+ this.adjustValueContainerVisibility_();
+ this.formatToggler_ = new FormatToggler(this.currentColorFormat_);
this.append(...this.colorValueContainers_, this.formatToggler_);
- this.hexValueContainer_.hide();
- this.rgbValueContainer_.show();
-
this.formatToggler_
.addEventListener('format-change', this.onFormatChange_);
this.addEventListener('manual-color-change', this.onManualColorChange_);
}
- /**
- * @param {!Event} event
- */
- onFormatChange_ = (event) => {
- const newColorFormat = event.detail.colorFormat;
+ adjustValueContainerVisibility_() {
this.colorValueContainers_.forEach((colorValueContainer) => {
- if (colorValueContainer.colorFormat === newColorFormat) {
+ if (colorValueContainer.colorFormat === this.currentColorFormat_) {
colorValueContainer.show();
} else {
colorValueContainer.hide();
@@ -324,6 +479,14 @@
/**
* @param {!Event} event
*/
+ onFormatChange_ = (event) => {
+ this.currentColorFormat_ = event.detail.colorFormat;
+ this.adjustValueContainerVisibility_();
+ }
+
+ /**
+ * @param {!Event} event
+ */
onManualColorChange_ = (event) => {
const newColor = event.detail.color;
this.colorValueContainers_.forEach((colorValueContainer) =>
@@ -360,8 +523,17 @@
this.channelValueContainers_.push(rValueContainer,
gValueContainer,
bValueContainer);
+ } else if (this.colorFormat_ === ColorFormat.HSL) {
+ const hValueContainer = new ChannelValueContainer(ColorChannel.H,
+ initialColor);
+ const sValueContainer = new ChannelValueContainer(ColorChannel.S,
+ initialColor);
+ const lValueContainer = new ChannelValueContainer(ColorChannel.L,
+ initialColor);
+ this.channelValueContainers_.push(hValueContainer,
+ sValueContainer,
+ lValueContainer);
}
- // TODO(crbug.com/982088): Add support for HSL
this.append(...this.channelValueContainers_);
this.channelValueContainers_.forEach((channelValueContainer) =>
@@ -427,9 +599,16 @@
case ColorChannel.R:
case ColorChannel.G:
case ColorChannel.B:
- this.setAttribute('maxLength', '3');
+ this.setAttribute('maxlength', '3');
break;
- // TODO(crbug.com/982088): Add support for HSL
+ case ColorChannel.H:
+ this.setAttribute('maxlength', '3');
+ break;
+ case ColorChannel.S:
+ case ColorChannel.L:
+ // up to 3 digits plus '%'
+ this.setAttribute('maxlength', '4');
+ break;
}
this.setValue(initialColor);
@@ -469,7 +648,24 @@
this.value = this.channelValue_;
}
break;
- // TODO(crbug.com/982088): Add support for HSL
+ case ColorChannel.H:
+ if (this.channelValue_ !== color.hValue) {
+ this.channelValue_ = color.hValue;
+ this.value = this.channelValue_;
+ }
+ break;
+ case ColorChannel.S:
+ if (this.channelValue_ !== color.sValue) {
+ this.channelValue_ = color.sValue;
+ this.value = this.channelValue_ + '%';
+ }
+ break;
+ case ColorChannel.L:
+ if (this.channelValue_ !== color.lValue) {
+ this.channelValue_ = color.lValue;
+ this.value = this.channelValue_ + '%';
+ }
+ break;
}
}
@@ -495,7 +691,20 @@
this.channelValue_ = Number(value);
}
break;
- // TODO(crbug.com/982088): Add support for HSL
+ case ColorChannel.H:
+ if (value.match(/^\d+$/) && (0 <= value) && (value < 360)) {
+ this.channelValue_ = Number(value);
+ }
+ break;
+ case ColorChannel.S:
+ case ColorChannel.L:
+ if (value.endsWith('%')) {
+ value = value.substring(0, value.length - 1);
+ if (value.match(/^\d+$/) && (0 <= value) && (value <= 100)) {
+ this.channelValue_ = Number(value);
+ }
+ }
+ break;
}
}
}
@@ -517,12 +726,13 @@
this.currentColorFormat_ = initialColorFormat;
this.hexFormatLabel_ = new FormatLabel(ColorFormat.HEX);
this.rgbFormatLabel_ = new FormatLabel(ColorFormat.RGB);
+ this.hslFormatLabel_ = new FormatLabel(ColorFormat.HSL);
this.colorFormatLabels_ = [
this.hexFormatLabel_,
this.rgbFormatLabel_,
- // TODO(crbug.com/982088): Add support for HSL
+ this.hslFormatLabel_,
];
- this.adjustFormatLabelVisibility();
+ this.adjustFormatLabelVisibility_();
this.upDownIcon_ = document.createElement('span');
this.upDownIcon_.innerHTML =
@@ -539,7 +749,7 @@
this.addEventListener('mousedown', (event) => event.preventDefault());
}
- adjustFormatLabelVisibility() {
+ adjustFormatLabelVisibility_() {
this.colorFormatLabels_.forEach((colorFormatLabel) => {
if (colorFormatLabel.colorFormat === this.currentColorFormat_) {
colorFormatLabel.show();
@@ -553,10 +763,11 @@
if (this.currentColorFormat_ == ColorFormat.HEX) {
this.currentColorFormat_ = ColorFormat.RGB;
} else if (this.currentColorFormat_ == ColorFormat.RGB) {
+ this.currentColorFormat_ = ColorFormat.HSL;
+ } else if (this.currentColorFormat_ == ColorFormat.HSL) {
this.currentColorFormat_ = ColorFormat.HEX;
}
- // TODO(crbug.com/982088): Add support for HSL
- this.adjustFormatLabelVisibility();
+ this.adjustFormatLabelVisibility_();
this.dispatchEvent(new CustomEvent('format-change', {
detail: {
@@ -581,15 +792,21 @@
if (colorFormat === ColorFormat.HEX) {
this.hexChannelLabel_ = new ChannelLabel(ColorChannel.HEX);
this.append(this.hexChannelLabel_);
- } else {
+ } else if (colorFormat === ColorFormat.RGB) {
this.rChannelLabel_ = new ChannelLabel(ColorChannel.R);
this.gChannelLabel_ = new ChannelLabel(ColorChannel.G);
this.bChannelLabel_ = new ChannelLabel(ColorChannel.B);
this.append(this.rChannelLabel_,
this.gChannelLabel_,
this.bChannelLabel_);
+ } else if (colorFormat === ColorFormat.HSL) {
+ this.hChannelLabel_ = new ChannelLabel(ColorChannel.H);
+ this.sChannelLabel_ = new ChannelLabel(ColorChannel.S);
+ this.lChannelLabel_ = new ChannelLabel(ColorChannel.L);
+ this.append(this.hChannelLabel_,
+ this.sChannelLabel_,
+ this.lChannelLabel_);
}
- // TODO(crbug.com/982088): Add support for HSL
}
get colorFormat() {
@@ -624,8 +841,13 @@
this.textContent = 'G';
} else if (colorChannel === ColorChannel.B) {
this.textContent = 'B';
+ } else if (colorChannel === ColorChannel.H) {
+ this.textContent = 'H';
+ } else if (colorChannel === ColorChannel.S) {
+ this.textContent = 'S';
+ } else if (colorChannel === ColorChannel.L) {
+ this.textContent = 'L';
}
- // TODO(crbug.com/982088): Add support for HSL
}
}
window.customElements.define('channel-label', ChannelLabel);
diff --git a/third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-picker-appearance-hex-format.html b/third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-picker-appearance-hex-format.html
index 2ea7e7e..8e52fef 100644
--- a/third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-picker-appearance-hex-format.html
+++ b/third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-picker-appearance-hex-format.html
@@ -20,7 +20,8 @@
popupWindow.focus();
const popupDocument = popupWindow.document;
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();
}
</script>
diff --git a/third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-picker-appearance-hsl-format-expected.png b/third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-picker-appearance-hsl-format-expected.png
new file mode 100644
index 0000000..28ed0b3
--- /dev/null
+++ b/third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-picker-appearance-hsl-format-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-picker-appearance-hsl-format.html b/third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-picker-appearance-hsl-format.html
new file mode 100644
index 0000000..2ea7e7e
--- /dev/null
+++ b/third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-picker-appearance-hsl-format.html
@@ -0,0 +1,28 @@
+<!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
diff --git a/third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-picker-channel-value-container-class.html b/third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-picker-channel-value-container-class.html
index 4fd4429..734169a10 100644
--- a/third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-picker-channel-value-container-class.html
+++ b/third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-picker-channel-value-container-class.html
@@ -20,6 +20,9 @@
let rValueContainer = new ChannelValueContainer(ColorChannel.R, new Color('#7effc9'));
let gValueContainer = new ChannelValueContainer(ColorChannel.G, 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) {
valueContainer.value = value;
@@ -42,6 +45,15 @@
case ColorChannel.B:
setContainerValue(valueContainer, '201');
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 @@
assert_equals(rValueContainer.channelValue_, 126);
assert_equals(gValueContainer.channelValue_, 255);
assert_equals(bValueContainer.channelValue_, 201);
+ assert_equals(hValueContainer.channelValue_, 155);
+ assert_equals(sValueContainer.channelValue_, 100);
+ assert_equals(lValueContainer.channelValue_, 75);
}, 'initial values');
test(() => {
@@ -154,6 +169,82 @@
setContainerValue(bValueContainer, '');
assert_equals(bValueContainer.channelValue_, 201);
}, '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>
</body>
</html>
\ No newline at end of file
diff --git a/third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-picker-color-class.html b/third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-picker-color-class.html
index 89a5c950..b8df01c 100644
--- a/third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-picker-color-class.html
+++ b/third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-picker-color-class.html
@@ -18,11 +18,17 @@
testEquals();
testHexToRGB();
-testRGBToHex()
+testRGBToHex();
+testRGBToHSL();
+testHSLToRGB();
+testHexToHSL();
+testHSLToHex();
testHexValueGetter();
testRGBValueGetters();
+testHSLValueGetters();
testAsHex();
testAsRGB();
+testAsHSL();
function testEquals() {
test(() => {
@@ -34,12 +40,32 @@
}, 'new Color(\'rgb(255,255,255)\').equals(new Color(ColorFormat.RGB, 255, 255, 255))');
test(() => {
+ assert_true(new Color('hsl(117,82%,55%)').equals(new Color(ColorFormat.HSL, 117, 82, 55)));
+ }, 'new Color(\'hsl(117,82%,55%)\').equals(new Color(ColorFormat.RGB, 117, 82, 55))');
+
+ test(() => {
assert_true(new Color('#caebca').equals(new Color(ColorFormat.RGB, 202, 235, 202)));
}, 'new Color(\'#caebca\').equals(new Color(ColorFormat.RGB, 202, 235, 202))');
test(() => {
assert_true(new Color(ColorFormat.RGB, 46, 224, 255).equals(new Color('#2ee0ff')));
}, 'new Color(\'new Color(\'rgb(46,224,255)\').equals(new Color(\'#2ee0ff\')))');
+
+ test(() => {
+ assert_true(new Color('hsl(195, 100%, 50%)').equals(new Color(ColorFormat.HEX, '00bfff')));
+ }, 'new Color(\'hsl(195, 100%, 50%)\').equals(new Color(ColorFormat.HEX, \'00bfff\'))');
+
+ test(() => {
+ assert_true(new Color('#140221').equals(new Color(ColorFormat.HSL, 275, 86, 7)));
+ }, 'new Color(\'#140221\').equals(new Color(ColorFormat.HSL, 275, 86, 7))');
+
+ test(() => {
+ assert_true(new Color(ColorFormat.RGB, 81, 97, 164).equals(new Color(ColorFormat.HSL, 228, 34, 48)));
+ }, 'new Color(\'new Color(ColorFormat.RGB, 81, 97, 164).equals(new Color(ColorFormat.HSL, 228, 34, 48)))');
+
+ test(() => {
+ assert_true(new Color('rgb(142, 197, 32)').equals(new Color('hsl(80,72%,45%)')));
+ }, 'new Color(\'rgb(142, 197, 32)\').equals(new Color(\'hsl(80,72%,45%)\'))');
}
function testHexToRGB() {
@@ -118,6 +144,90 @@
}, 'Color.rgbToHex(169, 245, 192)');
}
+function testRGBToHSL() {
+ test(() => {
+ assert_equals(JSON.stringify([0, 0, 0]), JSON.stringify(Color.rgbToHSL(0, 0, 0).map(Math.round)));
+ }, 'Color.rgbToHSL(0, 0, 0).map(Math.round)');
+
+ test(() => {
+ assert_equals(JSON.stringify([0, 0, 100]), JSON.stringify(Color.rgbToHSL(255, 255, 255).map(Math.round)));
+ }, 'Color.rgbToHSL(255, 255, 255).map(Math.round)');
+
+ test(() => {
+ assert_equals(JSON.stringify([98, 49, 31]), JSON.stringify(Color.rgbToHSL(70, 119, 41).map(Math.round)));
+ }, 'Color.rgbToHSL(70, 119, 41).map(Math.round)');
+
+ test(() => {
+ assert_equals(JSON.stringify([299, 91, 44]), JSON.stringify(Color.rgbToHSL(212, 10, 214).map(Math.round)));
+ }, 'Color.rgbToHSL(212, 10, 214).map(Math.round)');
+
+ test(() => {
+ assert_equals(JSON.stringify([80, 72, 45]), JSON.stringify(Color.rgbToHSL(142, 197, 32).map(Math.round)));
+ }, 'Color.rgbToHSL(142, 197, 32).map(Math.round)');
+}
+
+function testHSLToRGB() {
+ test(() => {
+ assert_equals(JSON.stringify([0, 0, 0]), JSON.stringify(Color.hslToRGB(0, 0, 0).map(Math.round)));
+ }, 'Color.hslToRGB(0, 0, 0).map(Math.round)');
+
+ test(() => {
+ assert_equals(JSON.stringify([255, 255, 255]), JSON.stringify(Color.hslToRGB(0, 0, 100).map(Math.round)));
+ }, 'Color.hslToRGB(0, 0, 100).map(Math.round)');
+
+ test(() => {
+ assert_equals(JSON.stringify([63, 75, 65]), JSON.stringify(Color.hslToRGB(133, 9, 27).map(Math.round)));
+ }, 'Color.hslToRGB(133, 9, 27).map(Math.round)');
+
+ test(() => {
+ assert_equals(JSON.stringify([37, 250, 254]), JSON.stringify(Color.hslToRGB(181, 99, 57).map(Math.round)));
+ }, 'Color.hslToRGB(181, 99, 57).map(Math.round)');
+
+ test(() => {
+ assert_equals(JSON.stringify([142, 197, 32]), JSON.stringify(Color.hslToRGB(80, 72, 45).map(Math.round)));
+ }, 'Color.hslToRGB(80, 72, 45).map(Math.round)');
+}
+
+function testHexToHSL() {
+ test(() => {
+ assert_equals(JSON.stringify([0, 0, 0]), JSON.stringify(Color.hexToHSL('000000').map(Math.round)));
+ }, 'Color.hexToHSL(\'000000\').map(Math.round)');
+
+ test(() => {
+ assert_equals(JSON.stringify([0, 0, 100]), JSON.stringify(Color.hexToHSL('ffffff').map(Math.round)));
+ }, 'Color.hexToHSL(\'ffffff\').map(Math.round)');
+
+ test(() => {
+ assert_equals(JSON.stringify([162, 43, 66]), JSON.stringify(Color.hexToHSL('83ceb7').map(Math.round)));
+ }, 'Color.hexToHSL(\'83ceb7\').map(Math.round)');
+
+ test(() => {
+ assert_equals(JSON.stringify([80, 72, 45]), JSON.stringify(Color.hexToHSL('8ec520').map(Math.round)));
+ }, 'Color.hexToHSL(\'8ec520\').map(Math.round)');
+}
+
+function testHSLToHex() {
+ test(() => {
+ assert_equals('000000', Color.hslToHex(0, 0, 0));
+ }, 'Color.hslToHex(0, 0, 0)');
+
+ test(() => {
+ assert_equals('ffffff', Color.hslToHex(0, 0, 100));
+ }, 'Color.hslToHex(0, 0, 100)');
+
+ test(() => {
+ assert_equals('672caf', Color.hslToHex(267, 60, 43));
+ }, 'Color.hslToHex(267, 60, 43)');
+
+ test(() => {
+ assert_equals('dddecf', Color.hslToHex(63, 18, 84));
+ }, 'Color.hslToHex(63, 18, 84)');
+
+ test(() => {
+ assert_equals('8ec520', Color.hslToHex(80, 72, 45));
+ }, 'Color.hslToHex(80, 72, 45)');
+}
+
function testHexValueGetter() {
test(() => {
assert_equals('1f8069', new Color('#1f8069').hexValue);
@@ -134,6 +244,14 @@
test(() => {
assert_equals('17679c', new Color(ColorFormat.RGB, 23, 103, 156).hexValue);
}, 'new Color(ColorFormat.RGB, 23, 103, 156).hexValue');
+
+ test(() => {
+ assert_equals('c505f5', new Color('hsl(288,96%,49%)').hexValue);
+ }, 'new Color(\'hsl(288,96%,49%)\').hexValue');
+
+ test(() => {
+ assert_equals('388f50', new Color(ColorFormat.HSL, 137, 44, 39).hexValue);
+ }, 'new Color(ColorFormat.HSL, 137, 44, 39).hexValue');
}
function testRGBValueGetters() {
@@ -184,6 +302,104 @@
test(() => {
assert_equals(72, new Color(ColorFormat.RGB, 65, 84, 72).bValue);
}, 'new Color(ColorFormat.RGB, 65, 84, 72).bValue');
+
+ test(() => {
+ assert_equals(20, new Color('hsl(116,79%,25%)').rValue);
+ }, 'new Color(\'hsl(116,79%,25%)\').rValue');
+
+ test(() => {
+ assert_equals(114, new Color('hsl(116,79%,25%)').gValue);
+ }, 'new Color(\'hsl(116,79%,25%)\').gValue');
+
+ test(() => {
+ assert_equals(13, new Color('hsl(116,79%,25%)').bValue);
+ }, 'new Color(\'hsl(116,79%,25%)\').bValue');
+
+ test(() => {
+ assert_equals(236, new Color(ColorFormat.HSL, 301, 64, 79).rValue);
+ }, 'new Color(ColorFormat.HSL, 301, 64, 79).rValue');
+
+ test(() => {
+ assert_equals(167, new Color(ColorFormat.HSL, 301, 64, 79).gValue);
+ }, 'new Color(ColorFormat.HSL, 301, 64, 79).gValue');
+
+ test(() => {
+ assert_equals(235, new Color(ColorFormat.HSL, 301, 64, 79).bValue);
+ }, 'new Color(ColorFormat.HSL, 301, 64, 79).bValue');
+}
+
+function testHSLValueGetters() {
+ test(() => {
+ assert_equals(61, new Color('#e5e73d').hValue);
+ }, 'new Color(\'#e5e73d\').hValue');
+
+ test(() => {
+ assert_equals(78, new Color('#e5e73d').sValue);
+ }, 'new Color(\'#e5e73d\').sValue');
+
+ test(() => {
+ assert_equals(57, new Color('#e5e73d').lValue);
+ }, 'new Color(\'#e5e73d\').lValue');
+
+ test(() => {
+ assert_equals(111, new Color(ColorFormat.HEX, '61a755').hValue);
+ }, 'new Color(ColorFormat.HEX, \'61a755\').hValue');
+
+ test(() => {
+ assert_equals(33, new Color(ColorFormat.HEX, '61a755').sValue);
+ }, 'new Color(ColorFormat.HEX, \'61a755\').sValue');
+
+ test(() => {
+ assert_equals(49, new Color(ColorFormat.HEX, '61a755').lValue);
+ }, 'new Color(ColorFormat.HEX, \'61a755\').lValue');
+
+ test(() => {
+ assert_equals(210, new Color('rgb(156,172,188)').hValue);
+ }, 'new Color(\'rgb(156,172,188)\').hValue');
+
+ test(() => {
+ assert_equals(19, new Color('rgb(156,172,188)').sValue);
+ }, 'new Color(\'rgb(156,172,188)\').sValue');
+
+ test(() => {
+ assert_equals(67, new Color('rgb(156,172,188)').lValue);
+ }, 'new Color(\'rgb(156,172,188)\').lValue');
+
+ test(() => {
+ assert_equals(3, new Color(ColorFormat.RGB, 212, 34, 24).hValue);
+ }, 'new Color(ColorFormat.RGB, 212, 34, 24).hValue');
+
+ test(() => {
+ assert_equals(80, new Color(ColorFormat.RGB, 212, 34, 24).sValue);
+ }, 'new Color(ColorFormat.RGB, 212, 34, 24).sValue');
+
+ test(() => {
+ assert_equals(46, new Color(ColorFormat.RGB, 212, 34, 24).lValue);
+ }, 'new Color(ColorFormat.RGB, 212, 34, 24).lValue');
+
+ test(() => {
+ assert_equals(178, new Color('hsl(178,70%,63%)').hValue);
+ }, 'new Color(\'hsl(178,70%,63%)\').hValue');
+
+ test(() => {
+ assert_equals(70, new Color('hsl(178,70%,63%)').sValue);
+ }, 'new Color(\'hsl(178,70%,63%)\').sValue');
+
+ test(() => {
+ assert_equals(63, new Color('hsl(178,70%,63%)').lValue);
+ }, 'new Color(\'hsl(178,70%,63%)\').lValue');
+
+ test(() => {
+ assert_equals(104, new Color(ColorFormat.HSL, 104, 88, 63).hValue);
+ }, 'new Color(ColorFormat.HSL, 104, 88, 63).hValue');
+
+ test(() => {
+ assert_equals(88, new Color(ColorFormat.HSL, 104, 88, 63).sValue);
+ }, 'new Color(ColorFormat.HSL, 104, 88, 63).sValue');
+
+ test(() => {
+ assert_equals(63, new Color(ColorFormat.HSL, 104, 88, 63).lValue);
+ }, 'new Color(ColorFormat.HSL, 104, 88, 63).lValue');
}
function testAsHex() {
@@ -202,6 +418,14 @@
test(() => {
assert_equals('#6e1026', new Color(ColorFormat.RGB, 110, 16, 38).asHex());
}, 'new Color(ColorFormat.RGB, 110, 16, 38).asHex()');
+
+ test(() => {
+ assert_equals('#ffe6e8', new Color('hsl(355,99,95)').asHex());
+ }, 'new Color(\'hsl(355,99,95)\').asHex()');
+
+ test(() => {
+ assert_equals('#2d0b06', new Color(ColorFormat.HSL, 7, 75, 10).asHex());
+ }, 'new Color(ColorFormat.HSL, 7, 75, 10).asHex()');
}
function testAsRGB() {
@@ -220,8 +444,41 @@
test(() => {
assert_equals('rgb(15,117,15)', new Color(ColorFormat.RGB, 15, 117, 15).asRGB());
}, 'new Color(ColorFormat.RGB, 15, 117, 15).asRGB()');
+
+ test(() => {
+ assert_equals('rgb(168,209,168)', new Color('hsl(120,31,74)').asRGB());
+ }, 'new Color(\'hsl(120,31,74)\').asRGB()');
+
+ test(() => {
+ assert_equals('rgb(251,231,9)', new Color(ColorFormat.HSL, 55, 97, 51).asRGB());
+ }, 'new Color(ColorFormat.HSL, 55, 97, 51).asRGB()');
}
+function testAsHSL() {
+ test(() => {
+ assert_equals('hsl(132,2%,48%)', new Color('#787d79').asHSL());
+ }, 'new Color(\'#00fff2\').asHSL()');
+
+ test(() => {
+ assert_equals('hsl(305,24%,68%)', new Color(ColorFormat.HEX, 'c099bd').asHSL());
+ }, 'new Color(ColorFormat.HEX, \'c099bd\').asHSL()');
+
+ test(() => {
+ assert_equals('hsl(259,70%,44%)', new Color('rgb(85,34,192)').asHSL());
+ }, 'new Color(\'rgb(85,34,192)\').asHSL()');
+
+ test(() => {
+ assert_equals('hsl(86,87%,48%)', new Color(ColorFormat.RGB, 139, 230, 16).asHSL());
+ }, 'new Color(ColorFormat.RGB, 139, 230, 16).asHSL()');
+
+ test(() => {
+ assert_equals('hsl(225,41%,44%)', new Color('hsl(225,41,44)').asHSL());
+ }, 'new Color(\'hsl(225,41,44)\').asHSL()');
+
+ test(() => {
+ assert_equals('hsl(307,64%,54%)', new Color(ColorFormat.HSL, 307, 64, 54).asHSL());
+ }, 'new Color(ColorFormat.HSL, 307, 64, 54).asHSL()');
+}
</script>
</body>
</html>
\ No newline at end of file
diff --git a/third_party/blink/web_tests/platform/linux/virtual/controls-refresh/fast/forms/controls-new-ui/color/color-picker-appearance-hsl-format-expected.png b/third_party/blink/web_tests/platform/linux/virtual/controls-refresh/fast/forms/controls-new-ui/color/color-picker-appearance-hsl-format-expected.png
new file mode 100644
index 0000000..75be482
--- /dev/null
+++ b/third_party/blink/web_tests/platform/linux/virtual/controls-refresh/fast/forms/controls-new-ui/color/color-picker-appearance-hsl-format-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/mac-mac10.10/virtual/controls-refresh/fast/forms/controls-new-ui/color/color-picker-appearance-hsl-format-expected.png b/third_party/blink/web_tests/platform/mac-mac10.10/virtual/controls-refresh/fast/forms/controls-new-ui/color/color-picker-appearance-hsl-format-expected.png
new file mode 100644
index 0000000..15fd22a
--- /dev/null
+++ b/third_party/blink/web_tests/platform/mac-mac10.10/virtual/controls-refresh/fast/forms/controls-new-ui/color/color-picker-appearance-hsl-format-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/mac-mac10.11/virtual/controls-refresh/fast/forms/controls-new-ui/color/color-picker-appearance-hsl-format-expected.png b/third_party/blink/web_tests/platform/mac-mac10.11/virtual/controls-refresh/fast/forms/controls-new-ui/color/color-picker-appearance-hsl-format-expected.png
new file mode 100644
index 0000000..60517cf
--- /dev/null
+++ b/third_party/blink/web_tests/platform/mac-mac10.11/virtual/controls-refresh/fast/forms/controls-new-ui/color/color-picker-appearance-hsl-format-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/mac-mac10.12/virtual/controls-refresh/fast/forms/controls-new-ui/color/color-picker-appearance-hsl-format-expected.png b/third_party/blink/web_tests/platform/mac-mac10.12/virtual/controls-refresh/fast/forms/controls-new-ui/color/color-picker-appearance-hsl-format-expected.png
new file mode 100644
index 0000000..9c29df10
--- /dev/null
+++ b/third_party/blink/web_tests/platform/mac-mac10.12/virtual/controls-refresh/fast/forms/controls-new-ui/color/color-picker-appearance-hsl-format-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/mac-retina/virtual/controls-refresh/fast/forms/controls-new-ui/color/color-picker-appearance-hsl-format-expected.png b/third_party/blink/web_tests/platform/mac-retina/virtual/controls-refresh/fast/forms/controls-new-ui/color/color-picker-appearance-hsl-format-expected.png
new file mode 100644
index 0000000..23a92111
--- /dev/null
+++ b/third_party/blink/web_tests/platform/mac-retina/virtual/controls-refresh/fast/forms/controls-new-ui/color/color-picker-appearance-hsl-format-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/mac/fast/forms/controls-new-ui/color/color-picker-appearance-hsl-format-expected.png b/third_party/blink/web_tests/platform/mac/fast/forms/controls-new-ui/color/color-picker-appearance-hsl-format-expected.png
new file mode 100644
index 0000000..555ac41
--- /dev/null
+++ b/third_party/blink/web_tests/platform/mac/fast/forms/controls-new-ui/color/color-picker-appearance-hsl-format-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/mac/virtual/controls-refresh/fast/forms/controls-new-ui/color/color-picker-appearance-hsl-format-expected.png b/third_party/blink/web_tests/platform/mac/virtual/controls-refresh/fast/forms/controls-new-ui/color/color-picker-appearance-hsl-format-expected.png
new file mode 100644
index 0000000..23a92111
--- /dev/null
+++ b/third_party/blink/web_tests/platform/mac/virtual/controls-refresh/fast/forms/controls-new-ui/color/color-picker-appearance-hsl-format-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/win7/virtual/controls-refresh/fast/forms/controls-new-ui/color/color-picker-appearance-hsl-format-expected.png b/third_party/blink/web_tests/platform/win7/virtual/controls-refresh/fast/forms/controls-new-ui/color/color-picker-appearance-hsl-format-expected.png
new file mode 100644
index 0000000..48752054
--- /dev/null
+++ b/third_party/blink/web_tests/platform/win7/virtual/controls-refresh/fast/forms/controls-new-ui/color/color-picker-appearance-hsl-format-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/virtual/controls-refresh/fast/forms/controls-new-ui/color/color-picker-appearance-hsl-format-expected.png b/third_party/blink/web_tests/virtual/controls-refresh/fast/forms/controls-new-ui/color/color-picker-appearance-hsl-format-expected.png
new file mode 100644
index 0000000..c388a509
--- /dev/null
+++ b/third_party/blink/web_tests/virtual/controls-refresh/fast/forms/controls-new-ui/color/color-picker-appearance-hsl-format-expected.png
Binary files differ
