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)
Core
Layout: Block and Inline
Tracking
()
NEW
People
(Reporter: vherever, Unassigned)
Details
(Keywords: testcase)
Attachments
(1 file)
180.83 KB,
image/png
|
Details |
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
Comment 1•7 years ago
|
||
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
Comment 2•7 years ago
|
||
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.
Comment 3•7 years ago
|
||
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...
Comment 4•7 years ago
|
||
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.
Comment 5•7 years ago
|
||
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.
Comment 6•7 years ago
|
||
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
Updated•7 years ago
|
Priority: -- → P3
Updated•2 years ago
|
Severity: normal → S3
You need to log in
before you can comment on or make changes to this bug.
Description
•