New issue
Advanced search Search tips

Issue 703898 link

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



Sign in to add a comment

Allow floats inside rgb()

Reported by gwhi...@gmail.com, Mar 22 2017 
UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.98 Safari/537.36

Steps to reproduce the problem:
1. Open https://jsfiddle.net/0v82oe3r/

What is the expected behavior?
The background is green

What went wrong?
The background is red

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 57.0.2987.98  Channel: n/a
OS Version: 10.0
Flash Version: 

This fails in FF as well but due to them not supporting calc() at all inside of color functions.

Comment 1 by durga.behera@chromium.org, Mar 22 2017

Labels: M-59 OS-Linux OS-Mac
Status: Untriaged (was: Unconfirmed)
Able to reproduce the issue on Win 10,Mac 10.12.3 and Ubuntu 14.04 using 57.0.2987.98/110 and canary 59.0.3047.0.
This is a non-regression issue since 35.0.1849.0.

Note: The behaviour is same in Firefox,INternet Explorer,Safari.
Please help with the browser where its working fine.

Based on the user comment "working on other browsers" marking this Untriaged to get addressed further.

Comment 2 by slangley@chromium.org, Mar 23 2017

Labels: -Type-Bug Type-Feature
Setting to feature as the use of calc() in rgb() has never worked (advice from shans@)

Comment 3 by slangley@chromium.org, Mar 23 2017

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

Comment 4 by slangley@chromium.org, Mar 23 2017

Labels: -Type-Feature -Pri-3 -Arch-x86_64 -Hotlist-Interop Pri-2 Type-Bug
The calc() inside the rgb() works if the values are integers, only fails when floats are used.

Hence changing this to a bug as we seem to have partially implemented calc().

Comment 5 by alancutter@chromium.org, Mar 24 2017

Labels: -Type-Bug -Pri-2 OS-All Pri-3 Type-Feature
Summary: Allow floats inside rgb() (was: Calc with floats inside of color functions doesn't work)
CSS Colors 4 defines rgb() as accepting non-integer numbers:
https://drafts.csswg.org/css-color/#funcdef-rgb

CSS Color 3 defines them as accepting integers only:
https://drafts.csswg.org/css-color-3/#valuea-def-color
"1.0" does not count as an integer in the values and units spec:
https://www.w3.org/TR/css3-values/#integers

This is WAI and is a feature request for a component of CSS Color 4.

Comment 6 by alancutter@chromium.org, Mar 24 2017

Labels: Update-Quarterly

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

Labels: -Update-Quarterly

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

rgb(128.0, 0, 0)
rgb(128.5 0 0)
Project Member

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

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

commit f8e89bb9a450bca698c8c522aded1030ea1cd681
Author: Chris Nardi <cnardi@chromium.org>
Date: Fri Jan 26 18:54:05 2018

Parse decimals in RGB/RGBA and update rounding

CSS Color 4 states that all numbers should be parsed inside of the RGB
and RGBA functions, instead of only integers as previously defined.
This change updates our behavior to match this, with non-integers
rounded to the nearest value. This additionally changes the behavior
of percentage values, multiplying by 255 and rounding to match the spec
instead of multiplying by 256 and flooring. The new spec is located at
https://drafts.csswg.org/css-color-4/#rgb-functions.

Bug:  703898 
Change-Id: I826e92e7f81576240ad9b06f866df3300140b12c
Reviewed-on: https://chromium-review.googlesource.com/885004
Reviewed-by: Eric Willigers <ericwilligers@chromium.org>
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Commit-Queue: Chris Nardi <cnardi@chromium.org>
Cr-Commit-Position: refs/heads/master@{#532032}
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/NeverFixTests
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/TestExpectations
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/css3/calc/color-rgb-expected.txt
[delete] https://crrev.com/484efec4dd6d485370023b7465b92b340128d2f2/third_party/WebKit/LayoutTests/external/wpt/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-1-expected.txt
[delete] https://crrev.com/484efec4dd6d485370023b7465b92b340128d2f2/third_party/WebKit/LayoutTests/external/wpt/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-1-expected.txt
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/external/wpt/css/css-color/rgb-002.html
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/external/wpt/css/css-color/rgb-004.html
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/external/wpt/css/css-color/rgb-006.html
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/external/wpt/css/css-color/rgb-008.html
[add] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/external/wpt/css/css-color/rgb-rounding-001.html
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/external/wpt/css/css-color/rgba-002.html
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/external/wpt/css/css-color/rgba-004.html
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/external/wpt/css/css-color/rgba-006.html
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/external/wpt/css/css-color/rgba-008.html
[delete] https://crrev.com/484efec4dd6d485370023b7465b92b340128d2f2/third_party/WebKit/LayoutTests/external/wpt/offscreen-canvas/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-1-expected.txt
[delete] https://crrev.com/484efec4dd6d485370023b7465b92b340128d2f2/third_party/WebKit/LayoutTests/external/wpt/offscreen-canvas/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-1-expected.txt
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/fast/canvas/rgba-parsing.html
[add] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/fast/css/rgb-float-expected.png
[add] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/fast/css/rgb-float-expected.txt
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/fast/css/rgb-float.html
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-3/spectrum-expected.txt
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-3/spectrum.js
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-4/styles-invalid-color-values-expected.txt
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-4/styles-invalid-color-values.js
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/platform/linux/css2.1/t040306-syntax-01-f-expected.png
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/platform/linux/css2.1/t040306-syntax-01-f-expected.txt
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/platform/linux/fast/css/rgb-float-expected.png
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/platform/linux/fast/gradients/conic-gradient-out-of-range-expected.png
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/platform/linux/svg/hixie/perf/007-expected.png
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/platform/mac/css2.1/t040306-syntax-01-f-expected.png
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/platform/mac/css2.1/t040306-syntax-01-f-expected.txt
[delete] https://crrev.com/484efec4dd6d485370023b7465b92b340128d2f2/third_party/WebKit/LayoutTests/platform/mac/fast/css/rgb-float-expected.png
[delete] https://crrev.com/484efec4dd6d485370023b7465b92b340128d2f2/third_party/WebKit/LayoutTests/platform/mac/fast/css/rgb-float-expected.txt
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/platform/mac/fast/gradients/conic-gradient-out-of-range-expected.png
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/platform/mac/svg/hixie/perf/007-expected.png
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/platform/win/css2.1/t040306-syntax-01-f-expected.png
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/platform/win/css2.1/t040306-syntax-01-f-expected.txt
[delete] https://crrev.com/484efec4dd6d485370023b7465b92b340128d2f2/third_party/WebKit/LayoutTests/platform/win/fast/css/rgb-float-expected.png
[delete] https://crrev.com/484efec4dd6d485370023b7465b92b340128d2f2/third_party/WebKit/LayoutTests/platform/win/fast/css/rgb-float-expected.txt
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/platform/win/fast/gradients/conic-gradient-out-of-range-expected.png
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/platform/win/svg/hixie/perf/007-expected.png
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/svg/custom/mask-colorspace-expected.png
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/LayoutTests/svg/custom/mask-colorspace-expected.txt
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/Source/core/css/parser/CSSParserFastPaths.cpp
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/Source/core/css/parser/CSSParserFastPathsTest.cpp
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/Source/core/css/parser/CSSPropertyParserHelpers.cpp
[modify] https://crrev.com/f8e89bb9a450bca698c8c522aded1030ea1cd681/third_party/WebKit/Source/devtools/front_end/common/Color.js

Comment 11 by cnardi@chromium.org, Jan 26 2018

Status: Fixed (was: Available)
►

Sign in to add a comment