Issue 107366 in chromium: cannot delete certain characters from contenteditable div where css display values conflict
chro...@googlecode.com
Owner: ----
Labels: OS-Linux Area-Undefined Type-Bug Pri-2
New issue 107366 by steveli...@gmail.com: cannot delete certain characters
from contenteditable div where css display values conflict
http://code.google.com/p/chromium/issues/detail?id=107366
Chrome Version : 15.0.874.121
OS Version: Ubuntu Linux (11.10), Windows 7, Mac OSX 10.6
URLs (if applicable) :
Other browsers tested:
Add OK or FAIL after other browsers where you have tested this issue:
Safari 5: OK
Firefox 4.x: OK
IE 7/8/9: not tested
What steps will reproduce the problem?
1. create css class .s1 { display:inline; }
2. create css class .s2 { display:table; }
3. apply both classes to a contenteditable div
4. add some text to the div
5. try to delete the first character in the div (doesn't work)
6. try to delete the last character in the div (works but then loses focus
- can only delete a single character)
7. delete any characters in the middle of the content - works correctly
What is the expected result?
Should always be able to delete any and all characters without losing focus.
What happens instead?
cannot delete the first character, or more than one from the end of the
contenteditable div without losing focus.
Please provide any additional information below. Attach a screenshot if
possible.
Attached is the minimum html to replicate the issue.
I am aware of course that the css is nonsensical.
The real issue is that in a complex web-application it is possible to
accidentally create a situation where the css conflicts like this and the
failure-mode is *very* misleading - we suspected javascript event handlers
rather than css and wasted a lot of time hunting for the source of the
problem as a result.
The bug continues to manifest if the .s2 class sets {
display:table !important; }
Similar to, but seemingly more specific than bug 73278, based on the
replication steps described there.
UserAgentString: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.2 (KHTML,
like Gecko) Chrome/15.0.874.121 Safari/535.2
Attachments:
css-bug.html 287 bytes
chro...@googlecode.com
Labels: -Area-Undefined Area-WebKit WebKit-Editing
Comment #1 on issue 107366 by tk...@chromium.org: cannot delete certain
characters from contenteditable div where css display values conflict
http://code.google.com/p/chromium/issues/detail?id=107366
(No comment was entered for this change.)
chro...@googlecode.com
Comment #2 on issue 107366 by steveli...@gmail.com: cannot delete certain
http://code.google.com/p/chromium/issues/detail?id=107366
Online example at http://steveliles.github.com/google_chrome_css_bug.html -
try editing the text in the green box.
Correction for step 6. described above - I said:
"6. try to delete the last character in the div (works but then loses focus
- can only delete a single character)"
... but on re-examination the div does *not* lose focus - rather the focus
remains but the caret disappears.
Replicated also on Chrome 16.0.912.41 beta (Ubuntu Linux).
chro...@googlecode.com
Comment #3 on issue 107366 by rn...@chromium.org: cannot delete certain
http://code.google.com/p/chromium/issues/detail?id=107366
chro...@googlecode.com
Comment #7 on issue 107366 by a....@samsung.com: cannot delete certain
http://code.google.com/p/chromium/issues/detail?id=107366
--
You received this message because this project is configured to send all
issue notifications to this address.
You may adjust your notification preferences at:
https://code.google.com/hosting/settings
chro...@googlecode.com
Comment #8 on issue 107366 by a....@samsung.com: cannot delete certain
http://code.google.com/p/chromium/issues/detail?id=107366
how there is no space at the end of the text contained within the div.
Also notice how the div's content (having display: table) gets formatted as
per the <h1> tag.
Attachments:
FF-onDiv.jpg 127 KB
chro...@googlecode.com
Comment #9 on issue 107366 by a....@samsung.com: cannot delete certain
http://code.google.com/p/chromium/issues/detail?id=107366
how there is an extra space at the end of the text contained within the
body.
Also notice how the body's content (having display: table) gets formatted
Attachments:
chro...@googlecode.com
Comment #10 on issue 107366 by a....@samsung.com: cannot delete certain
http://code.google.com/p/chromium/issues/detail?id=107366
element. Notice how there is no extra space at the end of the text
contained within the div.
However also notice how the div's content (having display: table) does not
get formatted as per the <h1> tag.
Attachments:
old-onDiv.jpg 123 KB
chro...@googlecode.com
Comment #11 on issue 107366 by a....@samsung.com: cannot delete certain
http://code.google.com/p/chromium/issues/detail?id=107366
element. Notice how there is extra space at the end of the text contained
within the body.
However also notice how the body's content (having display: table) does not
Attachments:
chro...@googlecode.com
Comment #12 on issue 107366 by a....@samsung.com: cannot delete certain
http://code.google.com/p/chromium/issues/detail?id=107366
element. Notice how there is no extra space at the end of the text
contained within the div.
However also notice how the div's content (having display: table) do get
formatted as per the <h1> tag. This behavior is now similar to that of FF.
Attachments:
new-onDiv.png 83.3 KB
chro...@googlecode.com
Comment #13 on issue 107366 by a....@samsung.com: cannot delete certain
http://code.google.com/p/chromium/issues/detail?id=107366
element. Notice how there is extra space at the end of the text contained
within the body. This is similar to the behavior even without the fix.
Also notice how the body's content (having display: table) does get
Attachments:
chro...@googlecode.com
Cc: yo...@chromium.org o...@chromium.org
Comment #14 on issue 107366 by a.suc...@chromium.org: cannot delete certain
http://code.google.com/p/chromium/issues/detail?id=107366
chro...@googlecode.com
Comment #16 on issue 107366 by bugdro...@chromium.org: cannot delete
conflict
The following revision refers to this bug:
http://src.chromium.org/viewvc/blink?view=rev&rev=162687
------------------------------------------------------------------------
r162687 | a....@samsung.com | 2013-11-26T11:56:52.902917Z
Changed paths:
M
http://src.chromium.org/viewvc/blink/trunk/Source/core/editing/CompositeEditCommand.cpp?r1=162687&r2=162686&pathrev=162687
M
http://src.chromium.org/viewvc/blink/trunk/Source/core/editing/htmlediting.cpp?r1=162687&r2=162686&pathrev=162687
A
http://src.chromium.org/viewvc/blink/trunk/LayoutTests/editing/deleting/display-table-expected.txt?r1=162687&r2=162686&pathrev=162687
M
http://src.chromium.org/viewvc/blink/trunk/LayoutTests/editing/execCommand/format-block-at-root-expected.txt?r1=162687&r2=162686&pathrev=162687
M
http://src.chromium.org/viewvc/blink/trunk/Source/core/dom/PositionIterator.cpp?r1=162687&r2=162686&pathrev=162687
M
http://src.chromium.org/viewvc/blink/trunk/Source/core/editing/htmlediting.h?r1=162687&r2=162686&pathrev=162687
A
http://src.chromium.org/viewvc/blink/trunk/LayoutTests/editing/deleting/display-table.html?r1=162687&r2=162686&pathrev=162687
M
http://src.chromium.org/viewvc/blink/trunk/Source/core/dom/Position.cpp?r1=162687&r2=162686&pathrev=162687
Unable to delete the first and the last characters of a contenteditable div
with display: table.
Contenteditable cannot be set for table elements. So throughout our editing
code we have checks wherein if the node being processed is a table node, we
check for contenteditability on its parent.
The current check: isTableElement() however checks based on the renderer's
style display type. If the display of the renderer was set to TABLE or
INLINE_TABLE, it would be considered as a node to be skipped (for editing
purposes) and contenteditability verified against its parent.
However, with this approach, block elements whose display type has been set
to TABLE and who also have contenteditable set for them, too would get
skipped; since the check was being carried out against the renderer and not
the element type.
Methods such as isEditablePosition(), isCandidate(), upstream(),
downstream() etc., basically all methods that are concerned with either
checking the validity of the current position or dealing with position
traversal should thus check against the element's name (table) instead of
the renderer.
The isTableElement() function is used only for editing purposes. Have thus
modified the same to only check against the tag name.
Another method isRenderedTable() has been added which performs the old
check (against the renderer's display type).
One existing test's expected result changes after this fix. The test is a
crashtest and an extra space character gets added now. This is because for
that test, display: table set on the body element is now being respected
and when formatted, an extra space is appended at the end. The extra space
gets added for formatting carried out on the body element even with the
original code.
More explanation with screenshots for this change have been added to the
corresponding bug: #107366
BUG=107366
Review URL: https://codereview.chromium.org/59963002
------------------------------------------------------------------------
chro...@googlecode.com
Status: Fixed
Owner: yo...@chromium.org
Comment #17 on issue 107366 by yo...@chromium.org: cannot delete certain