Bug 26690 – text not rendered when text-overflow: ellipsis is changed to text-overflow: content after the contentEditable property of the div is changed.

• Status: NEW
• Component: HTML Editing

[Jessie Berlin]

Given a div with the following CSS inside a containing div of specified width:

	white-space: nowrap;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;

Do the following:

1. Set the CSS (via resetting the class name via javascript) to:

	white-space: nowrap;
	width: 100%;
	overflow: hidden;
        text-overflow: clip;

2. Set contentEditable on that div to "true" via javascript.
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.
5. End the edit by setting contentEditable on that div to "false" via javascript.
6. Give the div the original css (via reseting the class name via javascript)

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.

[Jessie Berlin]

Created attachment 31803 [details]
Test case for text-overflow: ellipsis, clip and contentEditable

[Karl Dubost]

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.

[Radar WebKit Bug Importer]

<rdar://problem/94335907>