New issue
Advanced search Search tips

Issue 713376 link

Starred by 4 users

Issue metadata

Status: Available
Owner: ----
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Android , Windows , Chrome , Mac
Pri: 2
Type: Bug



Sign in to add a comment

Text shadow should paint behind all decorations and text.

Project Member Reported by wkorman@chromium.org, Apr 19 2017

Issue description

Breakout from  http://crbug.com/547174 . CSS3 text shadow should paint behind all other decorations and the text itself per:

https://www.w3.org/TR/css-text-decor-3/#painting-order

Order from back to front as:

- shadows (‘text-shadow’)
- underlines (‘text-decoration’)
- overlines (‘text-decoration’)
- text
- emphasis marks (‘text-emphasis’)
- line-through (‘text-decoration’)

paint/invalidation/shadow-multiple.html is an example where we appear to be doing things wrong. To be correct I believe we need to split up painting of shadow from painting of text. Today they're painted together, I think with a looper. Suspect our current order is:

- underlines (‘text-decoration’)
- overlines (‘text-decoration’)
- shadows (‘text-shadow’)
- text
- emphasis marks (‘text-emphasis’) <-- this could be wrong as well, have not checked
- line-through (‘text-decoration’)
 
paint/invalidation/shadow-multiple.html is actually a complex case involving decoration color specified via hsla(). It looks like we (and perhaps FF) are not respecting alpha values on text decorations. Win7 IE 11 does, however.

Simple text shadow fiddle: https://jsfiddle.net/cmc2njhh/

Variant of the complex case above: https://jsfiddle.net/m6gz9m3n/

I am not yet convinced that we're painting shadow order incorrectly, but it does look like we're doing something wrong w.r.t. alpha at minimum.

FF also looks like it's not painting the orange/red linethrough on top of the black text in the complex case. It seems like we are more correct there now.
Owner: ----
Status: Available (was: Assigned)
Unassigning self from bugs that I don't expect to be able to get to soon in case someone else is able to pick them up.
Cc: wkorman@chromium.org
 Issue 776627  has been merged into this issue.

Comment 4 by rober...@gmail.com, Oct 23 2017

So there's no one to work on it and it's been deemed a lower-priority issue?  This is basic rendering functionality that *all* the other browsers get right.
Owner: chrishtr@chromium.org
Status: Assigned (was: Available)
To chrishtr@ to triage as this bug is P3 but the duped bug in c#3 was a new issue filed as P1. See also my comment at  http://crbug.com/776627#c6 

The duped issue does appear to have broken as part of my change which fixed other cases.

WebKit and Blink both appear to have long not gotten paint order of text decorations correct. We are more correct after my change, but it seems some cases like this are newly incorrect. The right way to fix them is to continue the work noted in this issue.

 http://crbug.com/547174  is the bug that my change fixed.
Cc: ajha@chromium.org
 Issue 551714  has been merged into this issue.

Comment 7 by rober...@gmail.com, Nov 7 2017

So if no one else has time to fix this, can you point me to the resources I need so that I can fix it?
Owner: ----
Status: Available (was: Assigned)
Multiple text shadows spanning multiple lines are also wrong. See attached image. The text is partially covered by shadow (color is white).
Screenshot from 2018-03-08 11-35-46.png
293 KB View Download
So it's been a year and there's been no movement on this irksome paint order bug.  Can't someone take ownership of this?  How do we move this up in priority?  https://bugs.chromium.org/p/chromium/issues/detail?id=776627
Labels: -Pri-3 -OS-All OS-Android OS-Chrome OS-Linux OS-Mac OS-Windows Pri-2
Components: Blink>Paint
Cc: -wkorman@chromium.org
Now that Edge is switching to chromium, can we get chromium to render text with the correct paint order?  This is likely a very simple bug but we can't get anyone to take a look at it.  No other browser has a problem with this.  Why is this still a priority 2 bug rather than priority 1?

Sign in to add a comment