New issue
Advanced search Search tips

Issue 848860 link

Starred by 2 users

Issue metadata

Status: Fixed
Owner:
Closed: Sep 4
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Android , Windows , Chrome , Mac
Pri: 2
Type: Compat



Sign in to add a comment

currentColor not used in CSS gradients applied to document canvas

Reported by amelia.b...@gmail.com, Jun 1 2018

Issue description

UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36

Example URL:
https://codepen.io/AmeliaBR/pen/4c3610457d70cd4ffc95e21b740dcb4e

Steps to reproduce the problem:
1. Apply a background-image: linear-gradient(currentColor, currentColor) to either 
  - the root element of a document, or
  - the body element of an HTML document while leaving the root element background as the default (transparent none).

2. Apply a non-default `color` value to the same element.

What is the expected behavior?
The background image in these cases should be "hoisted" to apply to the full document canvas (https://drafts.csswg.org/css-backgrounds/#root-background).

However, the calculation of the style used value for `currentColor` should still be determined on the element on which it is declared.

(The spec for this is not super clear, but it works this way in Safari, Firefox, Edge, even IE.)

What went wrong?
The gradient applied to the document canvas is drawn as if `currentColor` is (the default) black, instead of using the `color` value set in CSS.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? N/A 

Did this work before? N/A 

Does this work in other browsers? Yes

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

Chrome has no problem with the used value of `background-color: currentColor` being hoisted to the document canvas, and has no problem with currentColor gradients on non-hoisted backgrounds (see https://codepen.io/AmeliaBR/pen/6444d8061eda7b03249184ba8a9b0ccd ).
 
Components: Blink>CSS Blink>Paint
Labels: Needs-Triage-M66
Labels: OS-Android OS-Chrome OS-Linux OS-Mac
Status: Available (was: Unconfirmed)
Good catch. Not sure how to fix it.

Comment 4 by f...@opera.com, Jun 4 2018

I guess this is BackgroundImageGeometry::ImageStyle().

Comment 5 by f...@opera.com, Jun 4 2018

(So i guess table-cells have this issue too: https://jsfiddle.net/tngmtzpo/)
Project Member

Comment 6 by bugdroid1@chromium.org, Sep 4

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

commit a01f12fb384baa9e668c8b78d54cf832947e2576
Author: Fredrik Söderquist <fs@opera.com>
Date: Tue Sep 04 16:29:09 2018

Resolve :root and table-cell currentcolor using background box's style

In BackgroundImageGeometry::ImageStyle we'd always return the computed
style for |box_| (the box for which we're painting), and thus use that
to resolve currentcolor, although in some cases (for :root and table-
cells that get their backgrounds from the row or column) we ought be
using the style from the element that the background originated from.

Bug:  848860 
Cq-Include-Trybots: luci.chromium.try:linux_layout_tests_slimming_paint_v2;master.tryserver.blink:linux_trusty_blink_rel
Change-Id: I9113957889a3f091d3fe71830c0805a4064734b5
Reviewed-on: https://chromium-review.googlesource.com/1203373
Reviewed-by: Stephen Chenney <schenney@chromium.org>
Commit-Queue: Fredrik Söderquist <fs@opera.com>
Cr-Commit-Position: refs/heads/master@{#588536}
[add] https://crrev.com/a01f12fb384baa9e668c8b78d54cf832947e2576/third_party/WebKit/LayoutTests/fast/backgrounds/root-background-currentcolor-expected.html
[add] https://crrev.com/a01f12fb384baa9e668c8b78d54cf832947e2576/third_party/WebKit/LayoutTests/fast/backgrounds/root-background-currentcolor.html
[add] https://crrev.com/a01f12fb384baa9e668c8b78d54cf832947e2576/third_party/WebKit/LayoutTests/fast/table/background-gradient-from-row-currentcolor-expected.html
[add] https://crrev.com/a01f12fb384baa9e668c8b78d54cf832947e2576/third_party/WebKit/LayoutTests/fast/table/background-gradient-from-row-currentcolor.html
[modify] https://crrev.com/a01f12fb384baa9e668c8b78d54cf832947e2576/third_party/blink/renderer/core/paint/background_image_geometry.cc
[modify] https://crrev.com/a01f12fb384baa9e668c8b78d54cf832947e2576/third_party/blink/renderer/core/paint/background_image_geometry.h
[modify] https://crrev.com/a01f12fb384baa9e668c8b78d54cf832947e2576/third_party/blink/renderer/core/paint/box_painter_base.cc

Owner: f...@opera.com
Status: Fixed (was: Available)
Project Member

Comment 8 by bugdroid1@chromium.org, Sep 4

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

commit a01f12fb384baa9e668c8b78d54cf832947e2576
Author: Fredrik Söderquist <fs@opera.com>
Date: Tue Sep 04 16:29:09 2018

Resolve :root and table-cell currentcolor using background box's style

In BackgroundImageGeometry::ImageStyle we'd always return the computed
style for |box_| (the box for which we're painting), and thus use that
to resolve currentcolor, although in some cases (for :root and table-
cells that get their backgrounds from the row or column) we ought be
using the style from the element that the background originated from.

Bug:  848860 
Cq-Include-Trybots: luci.chromium.try:linux_layout_tests_slimming_paint_v2;master.tryserver.blink:linux_trusty_blink_rel
Change-Id: I9113957889a3f091d3fe71830c0805a4064734b5
Reviewed-on: https://chromium-review.googlesource.com/1203373
Reviewed-by: Stephen Chenney <schenney@chromium.org>
Commit-Queue: Fredrik Söderquist <fs@opera.com>
Cr-Commit-Position: refs/heads/master@{#588536}
[add] https://crrev.com/a01f12fb384baa9e668c8b78d54cf832947e2576/third_party/WebKit/LayoutTests/fast/backgrounds/root-background-currentcolor-expected.html
[add] https://crrev.com/a01f12fb384baa9e668c8b78d54cf832947e2576/third_party/WebKit/LayoutTests/fast/backgrounds/root-background-currentcolor.html
[add] https://crrev.com/a01f12fb384baa9e668c8b78d54cf832947e2576/third_party/WebKit/LayoutTests/fast/table/background-gradient-from-row-currentcolor-expected.html
[add] https://crrev.com/a01f12fb384baa9e668c8b78d54cf832947e2576/third_party/WebKit/LayoutTests/fast/table/background-gradient-from-row-currentcolor.html
[modify] https://crrev.com/a01f12fb384baa9e668c8b78d54cf832947e2576/third_party/blink/renderer/core/paint/background_image_geometry.cc
[modify] https://crrev.com/a01f12fb384baa9e668c8b78d54cf832947e2576/third_party/blink/renderer/core/paint/background_image_geometry.h
[modify] https://crrev.com/a01f12fb384baa9e668c8b78d54cf832947e2576/third_party/blink/renderer/core/paint/box_painter_base.cc

Sign in to add a comment