Open Bug 1460826 Opened 7 years ago Updated 2 years ago

text-transform applied to ::first-letter of an [ inline-block | float | absolute position ] causes words to be displayed one under the other

Categories

(Core :: Layout: Block and Inline, defect, P3)

defect

Tracking

()

People

(Reporter: vherever, Unassigned)

Details

(Keywords: testcase)

Attachments

(1 file)

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36 Steps to reproduce: <a href="#" class="buttonGreat">aa a</a> .buttonGreat:first-letter { text-transform: capitalize; } .buttonGreat { text-transform: uppercase; display: inline-block; } Actual results: The words are shown one under the other, in this case in two lines. It is when you have at least two words. It seems that when we use :first-letter capitalize and uppercase all is bad for this situation. Expected results: We should get traditional inline-block result in one line
vherever, I made 2 reduced tests and slightly modified tests from your description and screenshot: http://www.gtalbot.org/BugzillaSection/Bug1460826-first-letter-capitalize.html http://www.gtalbot.org/BugzillaSection/Bug1460826-first-letter-lowercase.html I get expected result with Chromium 66.0.3359.117 under Linux Debian 9.4. I get actual result with Firefox 52.8.0 buildID=20180509233012. So I am able to reproduce the issue. What needs to be done now is to search for a DUPLICATE and then check again with Firefox 62 (nightly build). Please, can you report how Safari 11.2 (or greater) handles those 2 tests?
Component: CSS Parsing and Computation → Layout: Block and Inline
Keywords: testcase
OS: Unspecified → All
Hardware: Unspecified → All
Version: 59 Branch → Trunk
Still searching for duplicates as there are a lot of bug reports involving :first-letter... - - - - - - Possibly anb interesting finding for the assignee: Set minimum font size to none, then load 1 of the 2 tests, then set minimum font size to 9, then come back to the tab in which you loaded a test and, unexpectedly, you will get expected result. So, this means that a font size reflow actually affects the rendering of the test... or that a reflow of some kind is missing when rendering the test.
If 'display: inline-block' is replaced with 'float: left' for the span rule in both tests, then we also get actual result. So, this may be another variation of an already filed bug report...
2 additional tests with 'float: left' - - - - - - - - - - - - - - - - - - http://www.gtalbot.org/BugzillaSection/Bug1460826-first-letter-capitalize-float.html http://www.gtalbot.org/BugzillaSection/Bug1460826-first-letter-lowercase-float.html 2 additional test with 'position: absolute' - - - - - - - - - - - - - - - - - - - - - http://www.gtalbot.org/BugzillaSection/Bug1460826-first-letter-capitalize-abspos.html http://www.gtalbot.org/BugzillaSection/Bug1460826-first-letter-lowercase-abspos.html Firefox 52.8 fails all 6 tests. Chromium 66 passes all 6 tests. In all 6 tests, if you change font size minimum from 'None' to '9', then the layout becomes correct, which suggests some kind of font size related reflow missing, not happening in shrink-to-fit width code scenarios.
Firefox 62.0a1 buildID=20180511220149 also fails all 6 tests. And, again, in all 6 tests, if you change font size minimum from 'None' to '9' in another tab in Firefox 62, then the layout becomes correct too.
Jonathan Kew wrote something about text-transform in bug 1427032 comment 3 which I do not understand... - - - - - After a lot of reading and searching for a duplicate, I can not find any. CONFIRMING
Status: UNCONFIRMED → NEW
Ever confirmed: true
Summary: I made ::first-letter capitalize, then i do the whole words uppercase and inline-block, and then words are shown one under the other → text-transform applied to ::first-letter of an [ inline-block | float | absolute position ] causes words to be displayed one under the other
Priority: -- → P3
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: