Last Comment Bug 864759 - Text is drawn over the {float:right} <input> when {white-space:nowrap} is applied.
: Text is drawn over the {float:right} <input> when {white-space:nowrap} is app...
Status: UNCONFIRMED
:
Product: Core
Classification: Components
Component: Layout: Block and Inline (show other bugs)
: 20 Branch
: x86 All
: -- normal (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
:
: Jet Villegas (:jet)
Mentors:
Depends on:
Blocks: 944200
  Show dependency treegraph
 
Reported: 2013-04-23 07:03 PDT by Zalan Bujtas
Modified: 2013-11-29 14:30 PST (History)
6 users (show)
bzbarsky: needinfo? (dbaron)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments
float_text_overflow.html (662 bytes, text/html)
2013-04-23 07:03 PDT, Zalan Bujtas
no flags Details
testcase from comment #1 (1.21 KB, text/html)
2013-04-30 03:04 PDT, [:Aleksej]
no flags Details

Description Zalan Bujtas 2013-04-23 07:03:17 PDT
Created attachment 740796 [details]
float_text_overflow.html

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_4) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.65 Safari/537.31

Steps to reproduce:

loaded a page with the following content:

<html>
<head>
<style>
  div {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  input {
    float: right;
  }
</style>
</head>
<body>
<div>
<input type="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>


Actual results:

When the viewport is sized so that the text in the <div> overflows, the <input> gets overdrawn and cannot be activated.



Expected results:

The text should stop (including the ellipsis) at the left edge of the floating <input> and hittest should find the <input> instead of the text.
Comment 1 Alan Gresley 2013-04-24 03:29:08 PDT
This bug is not entirely due to using ellipsis. This bug is mainly caused by using overflow: hidden togther with white-space: nowrap.

A slightly modified test case with two test (the later ellipsis): 

<html>
<head>
<style>
  div {
    overflow: hidden;
    white-space: nowrap;
    background: yellowgreen;
    margin: 20px 0;
  }

 input {
    float: right; margin: 5px;
  }

 .ellipsis {
    text-overflow: ellipsis;
  }
</style>
</head>
<body>

<div>
<input type="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div class="ellipsis">
<input type="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

</body>
</html>

In this slightly modified test case, it is possible to interact with the input area that is below the line box in Firefox, Safari, Chrome and Opera. IE10 seems to do the right thing in the test with ellipsis and that is to clip the text at the left edge of the input.
Comment 2 [:Aleksej] 2013-04-30 03:04:30 PDT
Created attachment 743513 [details]
testcase from comment #1
Comment 3 [:Aleksej] 2013-04-30 03:13:43 PDT
Same in Nightly 2013-04-29-03-09-26-mozilla-central-firefox-23.0a1.en-US.linux-x86_64 and Beta 21.0.
Comment 4 Boris Zbarsky [:bz] (still a bit busy) 2013-04-30 06:21:39 PDT
It looks like for some reason we're not reducing the width of the overflow:hidden block in this case...  I wonder why.
Comment 5 Alan Gresley 2013-04-30 16:59:35 PDT
(In reply to Boris Zbarsky (:bz) from comment #4)
> It looks like for some reason we're not reducing the width of the
> overflow:hidden block in this case...  I wonder why.

Boris. I don't think this is a bug unless you inclined to believe that both the test (the one without ellipsis and the one with the ellipse) are wrong. The overflow:hidden is applied to the div. The inline box is just flowing over the floated right input since nothing stops it.

Why should the overflow:hidden block be reduced? It's not like the case where it's a BFC and it's sibling is a float.
Comment 6 Boris Zbarsky [:bz] (still a bit busy) 2013-04-30 18:36:35 PDT
Oh, the input is _inside_ the overflow:hidden thing!  I totally missed that.

In that case, I think this bug is invalid; the behavior is correct per spec.
Comment 7 Alan Gresley 2013-04-30 19:19:50 PDT
(In reply to Boris Zbarsky (:bz) from comment #6)
> Oh, the input is _inside_ the overflow:hidden thing!  I totally missed that.
> 
> In that case, I think this bug is invalid; the behavior is correct per spec.

Agreed. I will file a bug with Chrome and Safari and indicate that on the CSS mailing list in the thread that resulted in this bug be filed here in the first place.

http://lists.w3.org/Archives/Public/www-style/2013Apr/thread.html#msg540
Comment 8 Daniel Trebbien 2013-05-02 10:31:34 PDT
(In reply to Alan Gresley from comment #7)
> Agreed. I will file a bug with Chrome and Safari and indicate that on the
> CSS mailing list in the thread that resulted in this bug be filed here in
> the first place.

When you file the WebKit bug, could you link to it here?
Comment 9 Daniel Trebbien 2013-05-02 10:33:44 PDT
Nevermind.

http://code.google.com/p/chromium/issues/detail?id=237078
Comment 10 Alan Gresley 2013-05-02 19:54:40 PDT
(In reply to Daniel Trebbien from comment #8)

> When you file the WebKit bug, could you link to it here?

Right here for Safari.. 

https://bugs.webkit.org/show_bug.cgi?id=115462
Comment 11 David Baron :dbaron: ⌚️UTC-10 2013-06-04 00:28:59 PDT
There's also: https://bugs.webkit.org/show_bug.cgi?id=115746

Note You need to log in before you can comment on or make changes to this bug.