Bug 121902 – text-overflow: ellipsis is broken by text-align: right and padding-left

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

[Rob Crowther]

Created attachment 212554 [details]
Test case demonstrating problem (middle div)

If an element has both text-align: right and a value for padding-left then text-overflow: ellipsis is broken, no ellipses appear and the text is flush to the edge of the box.

[Rob Crowther]

Created attachment 212555 [details]
Correct display of test case in Firefox 25

[Rob Crowther]

Created attachment 212556 [details]
Incorrect display of test case in iOS7

[Deepak Mittal]

I am working on this issue..
I found the cause of this issue..if possible pleased assigned it to me..

[Deepak Mittal]

Created attachment 224604 [details]
Patch

[Build Bot]

Comment on attachment 224604 [details]
Patch

Attachment 224604 [details] did not pass mac-wk2-ews (mac-wk2):
Output: http://webkit-queues.appspot.com/results/4645716538425344

New failing tests:
fast/ruby/ruby-base-merge-block-children-crash-2.html
fast/css/vertical-text-overflow-ellipsis-text-align-right.html
fast/css/text-alignment.html
fast/css/text-overflow-ellipsis-text-align-right.html

[Build Bot]

Created attachment 224612 [details]
Archive of layout-test-results from webkit-ews-12 for mac-mountainlion-wk2

The attached test failures were seen while running run-webkit-tests on the mac-wk2-ews.
Bot: webkit-ews-12  Port: mac-mountainlion-wk2  Platform: Mac OS X 10.8.5

[Build Bot]

Comment on attachment 224604 [details]
Patch

Attachment 224604 [details] did not pass mac-ews (mac):
Output: http://webkit-queues.appspot.com/results/4604709801295872

New failing tests:
fast/ruby/ruby-base-merge-block-children-crash-2.html
fast/css/vertical-text-overflow-ellipsis-text-align-right.html
fast/css/text-alignment.html
fast/css/text-overflow-ellipsis-text-align-right.html

[Build Bot]

Created attachment 224615 [details]
Archive of layout-test-results from webkit-ews-02 for mac-mountainlion

The attached test failures were seen while running run-webkit-tests on the mac-ews.
Bot: webkit-ews-02  Port: mac-mountainlion  Platform: Mac OS X 10.8.5

[Deepak Mittal]

I have found that in void RenderBlockFlow::checkLinesForTextOverflow() in RenderBlockLineLayout.cpp file The renderbox is getting shifted by the logicalLeft when TextAlign is RIGHT, that is in this case is 61 and 21, 

So due to this ellipsis are not showing in the second div element and for the third div ellipsis dots are touching right edge of the box.

If I stop this adjustLogicalPosition call as :

if (ltr) {
      if (textAlign == RIGHT)
          logicalLeft = 0;
      curr->adjustLogicalPosition(logicalLeft, 0);
}

Then the issue is not getting reproduced.
But with this below test cases are failing..

fast/ruby/ruby-base-merge-block-children-crash-2.html
fast/css/vertical-text-overflow-ellipsis-text-align-right.html
fast/css/text-alignment.html
fast/css/text-overflow-ellipsis-text-align-right.html

[Deepak Mittal]

Created attachment 225120 [details]
Patch

[Deepak Mittal]

Please review this patch, and let me know if any query..

[zalan]

Comment on attachment 225120 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=225120&action=review

> Source/WebCore/rendering/RenderBlockLineLayout.cpp:2089
> +                        logicalLeft = 0;

Override the value here which is calculated a few line above (in updateLogicalWidthForAlignment()) does not seem to be the right thing to do. I'd look into updateLogicalWidthForAlignment() to figure out why it returns invalid logicalLeft.

[Deepak Mittal]

(In reply to comment #12)
> (From update of attachment 225120 [details])
> View in context: https://bugs.webkit.org/attachment.cgi?id=225120&action=review
> 
> > Source/WebCore/rendering/RenderBlockLineLayout.cpp:2089
> > +                        logicalLeft = 0;
> 
> Override the value here which is calculated a few line above (in updateLogicalWidthForAlignment()) does not seem to be the right thing to do. I'd look into updateLogicalWidthForAlignment() to figure out why it returns invalid logicalLeft.

This is happening as updateLogicalWidthForAlignment() when textAline is RIGHT, Then logicalLeft will get set to the difference of availableLogicalWidth and the totalLogicalWidth. As

if (totalLogicalWidth < availableLogicalWidth)
            logicalLeft += availableLogicalWidth - totalLogicalWidth;

That is causing the shift of the second box.as a part of adjustLogicalPosition() call.I have checked that in the FF this shifting is not happening so second box is coming properly..

[zalan]

(In reply to comment #13)
> (In reply to comment #12)
> > (From update of attachment 225120 [details] [details])
> > View in context: https://bugs.webkit.org/attachment.cgi?id=225120&action=review
> > 
> > > Source/WebCore/rendering/RenderBlockLineLayout.cpp:2089
> > > +                        logicalLeft = 0;
> > 
> > Override the value here which is calculated a few line above (in updateLogicalWidthForAlignment()) does not seem to be the right thing to do. I'd look into updateLogicalWidthForAlignment() to figure out why it returns invalid logicalLeft.
> 
> This is happening as updateLogicalWidthForAlignment() when textAline is RIGHT, Then logicalLeft will get set to the difference of availableLogicalWidth and the totalLogicalWidth. As
> 
> if (totalLogicalWidth < availableLogicalWidth)
>             logicalLeft += availableLogicalWidth - totalLogicalWidth;
> 
> That is causing the shift of the second box.as a part of adjustLogicalPosition() call.I have checked that in the FF this shifting is not happening so second box is coming properly..
updateLogicalWidthForRightAlignedBlock() seems to have a very specific calculation about this. Your best bet to figure it out is to talk to David Hyatt at #webkit.

[Deepak Mittal]

Hi David Hyatt,
Can you please give your opinion on my patch ..Thanks..

[Ben Frain]

This is problem for us. We have a situation where we are displaying a score board header for Live sports events. The team on the right of the scoreboard that is right aligned fails to get truncated name in Safari/iOS. Fine everywhere else.

Any chance this fix will be in before iOS9? Otherwise we have another year to wait!!

[Ben Frain]

Here is a reduction of our use case, showing the problem that Safari exhibits: http://codepen.io/benfrain/full/JdavXM

[Myles C. Maxfield]

Created attachment 257505 [details]
Patch

[WebKit Commit Bot]

Comment on attachment 257505 [details]
Patch

Clearing flags on attachment: 257505

Committed r187380: <http://trac.webkit.org/changeset/187380>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Radar WebKit Bug Importer]

<rdar://problem/21995463>

[Alexey Proskuryakov]

This change broke multiple tests on Windows. Myles, will you have a moment to update the results (assuming that this is all that's needed)?

fast/css/text-overflow-ellipsis-text-align-center.html
fast/css/text-overflow-ellipsis-text-align-left.html
fast/css/text-overflow-ellipsis-text-align-right.html
fast/css/vertical-text-overflow-ellipsis-text-align-center.html
fast/css/vertical-text-overflow-ellipsis-text-align-right.html
fast/inline/padding-ellipsis-right.html

[Myles C. Maxfield]

Committed r187452