New issue
Advanced search Search tips

Issue 788707 link

Starred by 3 users
Status: Fixed
Owner:
cnardi@chromium.org
Closed: Feb 2018
Cc:
style-bugs@google.com
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 3
Type: Feature



Sign in to add a comment

Support new rgb() and rgba() syntax

Project Member Reported by foolip@chromium.org, Nov 27 2017 
In https://wpt.fyi/css/css-color, the rgb-*.html and rgba-*.html tests are all failing because of one of more of the following:
* Use of whitespace as separator instead of comma
* Use of decimal points ( issue 703898 )
* Use of slash to separate alpha

Fixing this is probably low priority because support in other browsers is also bad.

Comment 1 by dstockwell@google.com, Nov 27 2017

Labels: -Type-Bug Hotlist-Interop Update-Quarterly Type-Feature

Comment 2 by dstockwell@google.com, Nov 29 2017

Labels: -Hotlist-Interop

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

Status: Available (was: Untriaged)
Project Member

Comment 4 by bugdroid1@chromium.org, Dec 5 2017 

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

commit 106b2819bfca32edee99e803364395453b31a2ca
Author: Chris Nardi <hichris123@gmail.com>
Date: Tue Dec 05 15:44:50 2017

Update parsing of RGB() and RGBA() functions to match CSS Color 4

In CSS Color 4, RGB() and RGBA() were synonymized, along with allowing
whitespace to separate the channels instead of commas, introducing
a backslash as a new way to separate the alpha parameter, and allowing
percent values for the alpha parameter. This updates our parsing
behavior to reflect these changes, and enables now-passing WPT tests.
The new spec is at https://drafts.csswg.org/css-color/#rgb-functions.

Bug:  788707 
Change-Id: Ib0f29009e477fc88cd1ceda03ff0ebb947a36ea3
Reviewed-on: https://chromium-review.googlesource.com/798831
Commit-Queue: Chris Nardi <hichris123@gmail.com>
Reviewed-by: Eric Willigers <ericwilligers@chromium.org>
Cr-Commit-Position: refs/heads/master@{#521703}
[modify] https://crrev.com/106b2819bfca32edee99e803364395453b31a2ca/third_party/WebKit/LayoutTests/NeverFixTests
[modify] https://crrev.com/106b2819bfca32edee99e803364395453b31a2ca/third_party/WebKit/LayoutTests/TestExpectations
[modify] https://crrev.com/106b2819bfca32edee99e803364395453b31a2ca/third_party/WebKit/LayoutTests/css-parser/color3-expected.txt
[delete] https://crrev.com/d1e86099eab777f55b675625c41d39bb80d94991/third_party/WebKit/LayoutTests/external/wpt/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-2-expected.txt
[delete] https://crrev.com/d1e86099eab777f55b675625c41d39bb80d94991/third_party/WebKit/LayoutTests/external/wpt/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-3-expected.txt
[delete] https://crrev.com/d1e86099eab777f55b675625c41d39bb80d94991/third_party/WebKit/LayoutTests/external/wpt/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-4-expected.txt
[delete] https://crrev.com/d1e86099eab777f55b675625c41d39bb80d94991/third_party/WebKit/LayoutTests/external/wpt/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-5-expected.txt
[delete] https://crrev.com/d1e86099eab777f55b675625c41d39bb80d94991/third_party/WebKit/LayoutTests/external/wpt/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-6-expected.txt
[delete] https://crrev.com/d1e86099eab777f55b675625c41d39bb80d94991/third_party/WebKit/LayoutTests/external/wpt/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-3-expected.txt
[delete] https://crrev.com/d1e86099eab777f55b675625c41d39bb80d94991/third_party/WebKit/LayoutTests/external/wpt/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-4-expected.txt
[delete] https://crrev.com/d1e86099eab777f55b675625c41d39bb80d94991/third_party/WebKit/LayoutTests/external/wpt/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-5-expected.txt
[delete] https://crrev.com/d1e86099eab777f55b675625c41d39bb80d94991/third_party/WebKit/LayoutTests/external/wpt/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-6-expected.txt
[delete] https://crrev.com/d1e86099eab777f55b675625c41d39bb80d94991/third_party/WebKit/LayoutTests/external/wpt/offscreen-canvas/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-2-expected.txt
[delete] https://crrev.com/d1e86099eab777f55b675625c41d39bb80d94991/third_party/WebKit/LayoutTests/external/wpt/offscreen-canvas/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-3-expected.txt
[delete] https://crrev.com/d1e86099eab777f55b675625c41d39bb80d94991/third_party/WebKit/LayoutTests/external/wpt/offscreen-canvas/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-4-expected.txt
[delete] https://crrev.com/d1e86099eab777f55b675625c41d39bb80d94991/third_party/WebKit/LayoutTests/external/wpt/offscreen-canvas/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-5-expected.txt
[delete] https://crrev.com/d1e86099eab777f55b675625c41d39bb80d94991/third_party/WebKit/LayoutTests/external/wpt/offscreen-canvas/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-6-expected.txt
[delete] https://crrev.com/d1e86099eab777f55b675625c41d39bb80d94991/third_party/WebKit/LayoutTests/external/wpt/offscreen-canvas/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-3-expected.txt
[delete] https://crrev.com/d1e86099eab777f55b675625c41d39bb80d94991/third_party/WebKit/LayoutTests/external/wpt/offscreen-canvas/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-4-expected.txt
[delete] https://crrev.com/d1e86099eab777f55b675625c41d39bb80d94991/third_party/WebKit/LayoutTests/external/wpt/offscreen-canvas/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-5-expected.txt
[delete] https://crrev.com/d1e86099eab777f55b675625c41d39bb80d94991/third_party/WebKit/LayoutTests/external/wpt/offscreen-canvas/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-6-expected.txt
[modify] https://crrev.com/106b2819bfca32edee99e803364395453b31a2ca/third_party/WebKit/LayoutTests/fast/canvas-api/gradient-addColorStop-with-invalid-color.html
[modify] https://crrev.com/106b2819bfca32edee99e803364395453b31a2ca/third_party/WebKit/LayoutTests/svg/dom/rgb-color-parser-expected.txt
[modify] https://crrev.com/106b2819bfca32edee99e803364395453b31a2ca/third_party/WebKit/Source/core/css/parser/CSSParserFastPaths.cpp
[modify] https://crrev.com/106b2819bfca32edee99e803364395453b31a2ca/third_party/WebKit/Source/core/css/parser/CSSParserFastPathsTest.cpp
[modify] https://crrev.com/106b2819bfca32edee99e803364395453b31a2ca/third_party/WebKit/Source/core/css/parser/CSSPropertyParserHelpers.cpp

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

Labels: -Update-Quarterly

Comment 6 by yio...@gmail.com, Dec 7 2017 

DevTools need to support new syntax.

Comment 7 by yio...@gmail.com, Dec 7 2017 

We must be support comment in rgb() and rgba().

color: rgba(10/* comment */175/* comment */10/100%)
color: rgba(10/* comment */75/* comment */125)

See also https://bugzilla.mozilla.org/attachment.cgi?id=8798761&action=diff#a/layout/reftests/w3c-css/submitted/color4/background-color-rgb-002.html_sec2
Project Member

Comment 8 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 9 by woxxom@gmail.com, Jan 16 2018 

Exponent should also be supported in RGB/HSL, for example rgb(1e2, .5e1, .5e0, +.25e2%) is a valid CSS4 color.
Firefox 57 handles it correctly.

Comment 10 by cnardi@chromium.org, Feb 4 2018

Owner: cnardi@chromium.org
Status: Fixed (was: Available)
Marking this as fixed as the only thing remaining is supporting comments as a separator (and I spun off  bug 808888  for that).
►

Sign in to add a comment