Given a div with the following CSS inside a containing div of specified width:
Do the following:
3. Edit the content of the div via the UI and add in text that would normally overflow the containing div.
4. IMPORTANT: inside the div, make sure the marker is at the right-most end of the text. If it is not, the bug does not get reproduced.
Observe that the div now appears to be empty, but it really is not (discoverable by looking at the innerHTML). What should be there is the text at either the beginning (preferred) or end of the text entered in step 3, with ellipsis where it starts being hidden.
Firefox has some other bug that prevents me from doing step 4, and IE shows similar behavior.
Not sure if this is reproducible on Mac, test case to follow.
Created attachment 31803 [details]
Test case for text-overflow: ellipsis, clip and contentEditable
Created attachment 460004 [details]
rendering in Safari, firefox, chrome
Only Firefox shows the text in the pink area.
Safari and Chrome gives a blank pink area.