New issue
Advanced search Search tips

Issue 786139 link

Starred by 6 users
Status: Fixed
Owner: ----
Closed: Jan 2018
Cc:
style-bugs@google.com
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 3
Type: Feature



Sign in to add a comment

[CSS4] [Color] Add support for angle units in HSL / HSLA hue value expression

Reported by myfonj@gmail.com, Nov 16 2017 
UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36

Steps to reproduce the problem:
1. hsl(270, 60%, 70%)
2. hsl(270deg, 60%, 70%)

What is the expected behavior?
Values are equal.

What went wrong?
`deg` is syntactically incorrect (as per CSS3 spec).

Did this work before? No 

Does this work in other browsers? Yes

Chrome version: 62.0.3202.94  Channel: stable
OS Version: 10.0
Flash Version: 

Support deg, rag, grad and turn units (and comma-less notation).

https://drafts.csswg.org/css-color/#the-hsl-notation

hsl() = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? )
<hue> = <number> | <angle>

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Syntax_2
CSS4 HSL color notation test.html
804 bytes View Download

Comment 1 by manoranj...@chromium.org, Nov 16 2017

Labels: Needs-Triage-M62

Comment 2 by nainar@chromium.org, Nov 16 2017

Labels: -Type-Bug Type-Feature
Status: Untriaged (was: Unconfirmed)

Comment 3 by nainar@chromium.org, Nov 16 2017

Labels: -Pri-2 Pri-3
Status: Available (was: Untriaged)

Comment 4 by nainar@chromium.org, Nov 16 2017

Labels: Update-Quarterly

Comment 5 by rjwright@chromium.org, Nov 28 2017

Labels: ApproachableBug Code-Parser

Comment 6 by nainar@chromium.org, Dec 6 2017

Labels: -Update-Quarterly
Project Member

Comment 7 by bugdroid1@chromium.org, Dec 13 2017 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/5539f476ae8cbd11c87645dba6cf812092f01db5

commit 5539f476ae8cbd11c87645dba6cf812092f01db5
Author: Chris Nardi <hichris123@gmail.com>
Date: Wed Dec 13 16:26:25 2017

Update HSL/HSLA parsing to match CSS Color 4

In CSS Color 4, HSL and HSLA were synonymized, along with allowing
whitespace to separate the values instead of commas, introducing a
backslash as a new way to separate the alpha parameter, allowing
percent values for the alpha parameter, and allowing the hue to be
specified as an angle. This updates our parsing behavior to reflect
these changes, and enables now-passing WPT tests. This also updates
our implementation of converting HSLA to RGBA, fixing a few bugs in
the process. The new spec is at
https://drafts.csswg.org/css-color/#the-hsl-notation.

Bug:  786139 
Cq-Include-Trybots: master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2
Change-Id: I634b5323365cc19f64a4b1732bbaf33268cb3389
Reviewed-on: https://chromium-review.googlesource.com/812125
Reviewed-by: Eric Willigers <ericwilligers@chromium.org>
Reviewed-by: Florin Malita <fmalita@chromium.org>
Reviewed-by: Darren Shen <shend@chromium.org>
Commit-Queue: Chris Nardi <hichris123@gmail.com>
Cr-Commit-Position: refs/heads/master@{#523783}
[modify] https://crrev.com/5539f476ae8cbd11c87645dba6cf812092f01db5/third_party/WebKit/LayoutTests/TestExpectations
[modify] https://crrev.com/5539f476ae8cbd11c87645dba6cf812092f01db5/third_party/WebKit/LayoutTests/css-parser/color3-expected.txt
[modify] https://crrev.com/5539f476ae8cbd11c87645dba6cf812092f01db5/third_party/WebKit/LayoutTests/css-parser/color3_hsl-expected.txt
[modify] https://crrev.com/5539f476ae8cbd11c87645dba6cf812092f01db5/third_party/WebKit/LayoutTests/css-parser/color3_hsla_1-expected.txt
[modify] https://crrev.com/5539f476ae8cbd11c87645dba6cf812092f01db5/third_party/WebKit/LayoutTests/css-parser/color3_hsla_2-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-1-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-2-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-3-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-4-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-5-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-6-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-7-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-8-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-9-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-1-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-2-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-3-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-4-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-5-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-6-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-7-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-8-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-9-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/offscreen-canvas/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-1-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/offscreen-canvas/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-2-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/offscreen-canvas/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-3-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/offscreen-canvas/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-4-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/offscreen-canvas/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-5-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/offscreen-canvas/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-6-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/offscreen-canvas/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-7-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/offscreen-canvas/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-8-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/offscreen-canvas/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-9-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/offscreen-canvas/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-1-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/offscreen-canvas/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-2-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/offscreen-canvas/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-3-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/offscreen-canvas/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-4-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/offscreen-canvas/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-5-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/offscreen-canvas/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-6-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/offscreen-canvas/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-7-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/offscreen-canvas/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-8-expected.txt
[delete] https://crrev.com/0232eb54cff5578b3a4365a58e5db788368c6251/third_party/WebKit/LayoutTests/external/wpt/offscreen-canvas/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-9-expected.txt
[modify] https://crrev.com/5539f476ae8cbd11c87645dba6cf812092f01db5/third_party/WebKit/Source/core/css/parser/CSSPropertyParserHelpers.cpp
[modify] https://crrev.com/5539f476ae8cbd11c87645dba6cf812092f01db5/third_party/WebKit/Source/platform/graphics/Color.cpp
Project Member

Comment 8 by bugdroid1@chromium.org, Dec 15 2017 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/f583e2ffd718fcbbd6110d8b7327c356a560a226

commit f583e2ffd718fcbbd6110d8b7327c356a560a226
Author: Chris Nardi <hichris123@gmail.com>
Date: Fri Dec 15 14:58:42 2017

Round computed values for HSL/HSLA

When computing the RGBA channels for HSL/HSLA values, we currently
multiply by 256 and truncate the value. However, this can cause
miscalulations for alpha values, and can cause each channel to be
nearly 1 unit away from what was intended. This changes the behavior
to multiply by 255 and round, having the same behavior as Edge and
Firefox.

Bug:  786139 
Cq-Include-Trybots: master.tryserver.blink:linux_trusty_blink_rel;master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2
Change-Id: Iad92dc6f7b110e250c7cf9987832c94eec4c930e
Reviewed-on: https://chromium-review.googlesource.com/818629
Commit-Queue: Chris Nardi <hichris123@gmail.com>
Reviewed-by: Florin Malita <fmalita@chromium.org>
Reviewed-by: Eric Willigers <ericwilligers@chromium.org>
Cr-Commit-Position: refs/heads/master@{#524379}
[modify] https://crrev.com/f583e2ffd718fcbbd6110d8b7327c356a560a226/third_party/WebKit/LayoutTests/NeverFixTests
[modify] https://crrev.com/f583e2ffd718fcbbd6110d8b7327c356a560a226/third_party/WebKit/LayoutTests/TestExpectations
[modify] https://crrev.com/f583e2ffd718fcbbd6110d8b7327c356a560a226/third_party/WebKit/LayoutTests/css-parser/color3-expected.txt
[modify] https://crrev.com/f583e2ffd718fcbbd6110d8b7327c356a560a226/third_party/WebKit/LayoutTests/css-parser/color3_hsl-expected.txt
[modify] https://crrev.com/f583e2ffd718fcbbd6110d8b7327c356a560a226/third_party/WebKit/LayoutTests/css-parser/color3_hsla_1-expected.txt
[modify] https://crrev.com/f583e2ffd718fcbbd6110d8b7327c356a560a226/third_party/WebKit/LayoutTests/css-parser/color3_hsla_2-expected.txt
[modify] https://crrev.com/f583e2ffd718fcbbd6110d8b7327c356a560a226/third_party/WebKit/LayoutTests/css3/calc/color-hsl-expected.txt
[modify] https://crrev.com/f583e2ffd718fcbbd6110d8b7327c356a560a226/third_party/WebKit/LayoutTests/fast/css3-text/css3-text-decoration/getComputedStyle/getComputedStyle-text-decoration-color-expected.txt
[modify] https://crrev.com/f583e2ffd718fcbbd6110d8b7327c356a560a226/third_party/WebKit/LayoutTests/fast/css3-text/css3-text-decoration/getComputedStyle/script-tests/getComputedStyle-text-decoration-color.js
[modify] https://crrev.com/f583e2ffd718fcbbd6110d8b7327c356a560a226/third_party/WebKit/LayoutTests/fast/gradients/conic-gradient-parsing.html
[modify] https://crrev.com/f583e2ffd718fcbbd6110d8b7327c356a560a226/third_party/WebKit/LayoutTests/platform/linux/fast/css/hsl-color-expected.png
[modify] https://crrev.com/f583e2ffd718fcbbd6110d8b7327c356a560a226/third_party/WebKit/LayoutTests/platform/linux/fast/css/hsl-color-expected.txt
[modify] https://crrev.com/f583e2ffd718fcbbd6110d8b7327c356a560a226/third_party/WebKit/LayoutTests/platform/linux/fast/css/hsla-color-expected.png
[modify] https://crrev.com/f583e2ffd718fcbbd6110d8b7327c356a560a226/third_party/WebKit/LayoutTests/platform/mac/fast/css/hsl-color-expected.png
[modify] https://crrev.com/f583e2ffd718fcbbd6110d8b7327c356a560a226/third_party/WebKit/LayoutTests/platform/mac/fast/css/hsl-color-expected.txt
[modify] https://crrev.com/f583e2ffd718fcbbd6110d8b7327c356a560a226/third_party/WebKit/LayoutTests/platform/mac/fast/css/hsla-color-expected.png
[modify] https://crrev.com/f583e2ffd718fcbbd6110d8b7327c356a560a226/third_party/WebKit/LayoutTests/platform/mac/fast/css/hsla-color-expected.txt
[modify] https://crrev.com/f583e2ffd718fcbbd6110d8b7327c356a560a226/third_party/WebKit/LayoutTests/platform/win/fast/css/hsl-color-expected.png
[modify] https://crrev.com/f583e2ffd718fcbbd6110d8b7327c356a560a226/third_party/WebKit/LayoutTests/platform/win/fast/css/hsl-color-expected.txt
[modify] https://crrev.com/f583e2ffd718fcbbd6110d8b7327c356a560a226/third_party/WebKit/LayoutTests/platform/win/fast/css/hsla-color-expected.png
[modify] https://crrev.com/f583e2ffd718fcbbd6110d8b7327c356a560a226/third_party/WebKit/LayoutTests/platform/win/fast/css/hsla-color-expected.txt
[modify] https://crrev.com/f583e2ffd718fcbbd6110d8b7327c356a560a226/third_party/WebKit/LayoutTests/svg/custom/fill-opacity-hsl-expected.png
[modify] https://crrev.com/f583e2ffd718fcbbd6110d8b7327c356a560a226/third_party/WebKit/LayoutTests/svg/custom/fill-opacity-hsl-expected.txt
[modify] https://crrev.com/f583e2ffd718fcbbd6110d8b7327c356a560a226/third_party/WebKit/Source/platform/graphics/Color.cpp
Project Member

Comment 9 by bugdroid1@chromium.org, Jan 10 2018 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/10c1f7014dd8a888dc7e0e3830355c1756abf48f

commit 10c1f7014dd8a888dc7e0e3830355c1756abf48f
Author: Chris Nardi <hichris123@gmail.com>
Date: Wed Jan 10 23:11:01 2018

DevTools: Support new RGB/RGBA and HSL/HSLA syntax

CSS Color 4 implemented many changes to RGB/RGBA and HSL/HSLA,
including each pair of functions becoming synonyms, allowing percent
alpha values, allowing the hue in HSL to be specified as an angle, and
adding a new comma-optional syntax for every function. This change adds
support in DevTools for these changes.

Bug:  786139 ,  788707 
Change-Id: Iafb4daed5af467038167b21269388e587d945fc8
Reviewed-on: https://chromium-review.googlesource.com/831159
Commit-Queue: Chris Nardi <hichris123@gmail.com>
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Cr-Commit-Position: refs/heads/master@{#528465}
[modify] https://crrev.com/10c1f7014dd8a888dc7e0e3830355c1756abf48f/third_party/WebKit/LayoutTests/http/tests/devtools/components/color-expected.txt
[modify] https://crrev.com/10c1f7014dd8a888dc7e0e3830355c1756abf48f/third_party/WebKit/LayoutTests/http/tests/devtools/components/color.js
[modify] https://crrev.com/10c1f7014dd8a888dc7e0e3830355c1756abf48f/third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-3/spectrum-expected.txt
[modify] https://crrev.com/10c1f7014dd8a888dc7e0e3830355c1756abf48f/third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-3/spectrum.js
[modify] https://crrev.com/10c1f7014dd8a888dc7e0e3830355c1756abf48f/third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-4/styles-invalid-color-values-expected.txt
[modify] https://crrev.com/10c1f7014dd8a888dc7e0e3830355c1756abf48f/third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-4/styles-invalid-color-values.js
[modify] https://crrev.com/10c1f7014dd8a888dc7e0e3830355c1756abf48f/third_party/WebKit/Source/devtools/front_end/common/Color.js

Comment 10 by cnardi@chromium.org, Jan 24 2018

Status: Fixed (was: Available)
►

Sign in to add a comment