1752568 - Text opacity shows glyph overlap for cursive scripts

Status: NEW

(Core :: Layout: Text and Fonts, defect)

Description

[Richard Ishida]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:96.0) Gecko/20100101 Firefox/96.0

Steps to reproduce:

This issue is likely to apply to all scripts that are 'cursive', including Arabic, Mongolian, Adlam, N'Ko, Syriac, etc..

When opacity is applied to text, some browsers produce dark patches where the cursive glyphs overlap. Here is an example in the Adlam script.
in the Adlam script.

https://user-images.githubusercontent.com/4839211/105513100-d106d580-5cc9-11eb-9e9f-846339dbb5fb.png

And here is an N'Ko example.

https://user-images.githubusercontent.com/4839211/108040758-9a587c80-7035-11eb-8754-e49f4f528f6b.png

Specs:
Issue, Add note for text opacity applied to cursive scripts Closed.
https://github.com/w3c/csswg-drafts/issues/5139

css-color was updated 2020-07-27 to clarify that opacity should be applied to a whole element, not to individual letters, so that this shouldn't happen.
https://drafts.csswg.org/css-color-4/#transparency

Actual results:

Tests & results:

Interactive test, Applying opacity to Adlam text doesn't produce dark patches where glyphs overlap
https://github.com/w3c/character_phrase_tests/issues/40

Interactive test, Applying opacity to N'Ko text doesn't produce dark patches where glyphs overlap
https://github.com/w3c/character_phrase_tests/issues/41

Gecko: ❌ _Browser: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:96.0) Gecko/20100101 Firefox/96.0
Blink: ❌ Browser: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36
Webkit: ✅ Browser: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.1 Safari/605.1.15

I18n test suite, Text opacity
https://w3c.github.io/i18n-tests/results/cursive#text_opacity

Contains similar tests for Arabic and Mongolian text, with the same results, except that WebKit browsers don't display Mongolian as cursive text, so the test is moot in that case.

Expected results:

Please display overlapping glyphs in cursive script text without the dark patches.

Comment 1

[Richard Ishida]

W3C is tracking this bug here: https://www.w3.org/TR/adlm-gap/#issue14_cursive

Comment 2

[Richard Ishida]

Correction for Webkit results: It appears to work for Arabic, Syriac, and N'Ko text, but fails for Adlam and Hanifi Rohingya text.

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (partially transparent Adlam text)

Here's a testcase, based on the test link in the first comment of https://github.com/w3c/character_phrase_tests/issues/40

(Indeed, I see dark patches at the overlaps here.)