New issue
Advanced search Search tips

Issue 803382 link

Starred by 1 user

Issue metadata

Status: Fixed
Owner:
Closed: Jan 2018
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Android , Windows , Mac
Pri: 2
Type: Bug



Sign in to add a comment

background-blend-mode isn't honoured when using background-clip: text;

Reported by keithjcl...@gmail.com, Jan 18 2018

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36

Example URL:
https://codepen.io/keithclark/pen/MrzEGq

Steps to reproduce the problem:
1) Visit https://codepen.io/keithclark/pen/MrzEGq

What is the expected behavior?
Gradient should be blended with the underlying background-image

What went wrong?
Gradient is rendered on top of the background-image

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 63.0.3239.132  Channel: stable
OS Version: OS X 10.13.2
Flash Version: 

Text renders as expected in Firefox.
Text doesn't render correctly in current Chrome or Safari.
 

Comment 1 by f...@opera.com, Jan 18 2018

Components: -Blink Blink>Paint
Labels: OS-Android OS-Linux OS-Windows
Status: Available (was: Unconfirmed)

Comment 2 by f...@opera.com, Jan 18 2018

Labels: Hotlist-Interop
Project Member

Comment 3 by bugdroid1@chromium.org, Jan 18 2018

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

commit c797e29ff1478d59ca68913c41eab692df6666ac
Author: Fredrik Söderquist <fs@opera.com>
Date: Thu Jan 18 19:47:11 2018

[PE] Fix background-blend-mode interaction background-clip: text

When applying background-blend-mode to a background layer that uses
"background-clip: text", perform the blending after the background has
been clipped by the text.

Bug:  803382 
Cq-Include-Trybots: master.tryserver.blink:linux_trusty_blink_rel;master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2
Change-Id: Ie834b1503ec90341aec846f4d2dfc8c94732fe12
Reviewed-on: https://chromium-review.googlesource.com/873636
Reviewed-by: Stephen Chenney <schenney@chromium.org>
Commit-Queue: Fredrik Söderquist <fs@opera.com>
Cr-Commit-Position: refs/heads/master@{#530232}
[add] https://crrev.com/c797e29ff1478d59ca68913c41eab692df6666ac/third_party/WebKit/LayoutTests/fast/backgrounds/background-clip-text-with-blend-mode-expected.html
[add] https://crrev.com/c797e29ff1478d59ca68913c41eab692df6666ac/third_party/WebKit/LayoutTests/fast/backgrounds/background-clip-text-with-blend-mode.html
[modify] https://crrev.com/c797e29ff1478d59ca68913c41eab692df6666ac/third_party/WebKit/Source/core/paint/BoxModelObjectPainter.cpp

Project Member

Comment 4 by bugdroid1@chromium.org, Jan 19 2018

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

commit c966cda909ebd6ff72f33a60d0ce57b917cd8a6e
Author: Fredrik Söderquist <fs@opera.com>
Date: Fri Jan 19 18:38:48 2018

[CI] Share more text-clip masking code between NG and non-NG painters

Split out a PaintTextClipMask method and make that virtual instead of
PaintFillLayerTextFillBox. Move PaintFillLayerTextFillBox to
BoxPainterBase and call PaintTextClipMask for the bits that differ.

Bug:  803382 
Cq-Include-Trybots: master.tryserver.blink:linux_trusty_blink_rel;master.tryserver.chromium.linux:linux_layout_tests_layout_ng;master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2
Change-Id: Ie44a64a6e70eac8a5a1029650fd206fc9b2852f7
Reviewed-on: https://chromium-review.googlesource.com/874074
Reviewed-by: Stephen Chenney <schenney@chromium.org>
Reviewed-by: Emil A Eklund <eae@chromium.org>
Commit-Queue: Emil A Eklund <eae@chromium.org>
Cr-Commit-Position: refs/heads/master@{#530573}
[modify] https://crrev.com/c966cda909ebd6ff72f33a60d0ce57b917cd8a6e/third_party/WebKit/Source/core/paint/BoxModelObjectPainter.cpp
[modify] https://crrev.com/c966cda909ebd6ff72f33a60d0ce57b917cd8a6e/third_party/WebKit/Source/core/paint/BoxModelObjectPainter.h
[modify] https://crrev.com/c966cda909ebd6ff72f33a60d0ce57b917cd8a6e/third_party/WebKit/Source/core/paint/BoxPainterBase.cpp
[modify] https://crrev.com/c966cda909ebd6ff72f33a60d0ce57b917cd8a6e/third_party/WebKit/Source/core/paint/BoxPainterBase.h
[modify] https://crrev.com/c966cda909ebd6ff72f33a60d0ce57b917cd8a6e/third_party/WebKit/Source/core/paint/ng/ng_box_fragment_painter.cc
[modify] https://crrev.com/c966cda909ebd6ff72f33a60d0ce57b917cd8a6e/third_party/WebKit/Source/core/paint/ng/ng_box_fragment_painter.h

Comment 5 by f...@opera.com, Jan 19 2018

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

Sign in to add a comment