::first-letter pseudo element breaks surrogate pairs
Reported by
su...@mavenclinic.com,
May 17 2017
|
|||||||
Issue description
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.96 Safari/537.36
Steps to reproduce the problem:
1. Html element where value starts with an emoji example: <h3>🤔😱</h3>
2. Set text-transform: capitalize on CSS ::first-letter. example: h3::first-letter { text-transform: capitalize;}
What is the expected behavior?
Emoji should render
What went wrong?
Emoji is not rendered/displays as unicode question mark.
When applying text-transform:capitalize to whole element (vs just ::first-letter pseudo-element) the emoji render correctly.
Did this work before? N/A
Does this work in other browsers? N/A
Chrome version: 58.0.3029.96 Channel: stable
OS Version: OS X 10.11.6
Flash Version:
,
May 19 2017
,
May 19 2017
Able to reproduce the issue on Windows-7,Mac-10.12.4 and Linux Ubuntu-14.04 using chrome stable version 58.0.3029.110 and canary 60.0.3104.0 with the provided test case in comment#1. This is non regression issue, observed from M47 #47.0.2491.0 and confirming this issue for further investigation. Note: M46 and earlier versions doesn't display Emojis. Please find the attached screenshot for reference. Thanks.
,
Jul 17 2017
Possibly a subcase of this Webkit bug which Chromium still has: https://bugs.webkit.org/show_bug.cgi?id=3409#c25 TL;DR: for :first-* psuedo-elements, text-transform doesn't work. (eg, p:first-letter { text-transform: capitalize; } also fails)
,
Aug 10 2017
I think :first-letter cannot work with Emoji in Chromium at all. Even a invalid "display" can break the Emoji. Test link: https://jsbin.com/nevaxovoxe/edit?html,css,output My Chrome version: 59.0.3071.115 (Stable) （64bit） 3cf8514bb1239453fd15ff1f7efee389ac9df8ba-refs/branch-heads/3071@{#820} Mac OS X V8 5.9.211.38 I attached two screenshots, one is in Chrome and the other one is in Safari. Safari version: 10.1.1 (12603.2.4)
,
Aug 16 2017
The root cause is that, FirstLetterPseudoElement::FirstLetterLength() doesn't recognize surrogate pairs. It simply stops at the first non-punctuation code unit in the input string. On input "\uD83D\uDE31\uD83D\uDE31" (😱😱), it returns 1, while the correct answer should be 2.
,
Aug 16 2017
,
Aug 16 2017
,
Aug 16 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/02d9bf5911935920465f10eac7b62b718851b401 commit 02d9bf5911935920465f10eac7b62b718851b401 Author: Xiaocheng Hu <xiaochengh@chromium.org> Date: Wed Aug 16 20:18:44 2017 Stop ::first-letter from breaking surrogate pairs This patch makes FirstLetterPseudoElement::FirstLetterLength() consider surrogate pairs, to stop surrogate pairs broken between first letter and remaining text. Bug: 723848 Change-Id: I62753b82d324c163ede45d96a9a4e7c1a3601e45 Reviewed-on: https://chromium-review.googlesource.com/616462 Commit-Queue: Xiaocheng Hu <xiaochengh@chromium.org> Reviewed-by: Koji Ishii <kojii@chromium.org> Cr-Commit-Position: refs/heads/master@{#494921} [modify] https://crrev.com/02d9bf5911935920465f10eac7b62b718851b401/third_party/WebKit/Source/core/BUILD.gn [modify] https://crrev.com/02d9bf5911935920465f10eac7b62b718851b401/third_party/WebKit/Source/core/dom/FirstLetterPseudoElement.cpp [modify] https://crrev.com/02d9bf5911935920465f10eac7b62b718851b401/third_party/WebKit/Source/core/dom/FirstLetterPseudoElement.h [add] https://crrev.com/02d9bf5911935920465f10eac7b62b718851b401/third_party/WebKit/Source/core/dom/FirstLetterPseudoElementTest.cpp
,
Aug 16 2017
|
|||||||
►
Sign in to add a comment |
|||||||
Comment 1 by alancutter@chromium.org
, May 18 2017Labels: Needs-Bisect Hotlist-Interop
Status: Available (was: Unconfirmed)