Bug 24167
| Summary: | Second paragraph is converted from em to px when applying bullets | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Robby Walker <robbyw> |
| Component: | HTML Editing | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | ahmad.saleem792, ayg, eric, jparent, justin.garcia |
| Priority: | P2 | ||
| Version: | 528+ (Nightly build) | ||
| Hardware: | All | ||
| OS: | OS X 10.5 | ||
| URL: | https://jsfiddle.net/mv6ej3r7/ | ||
Robby Walker
Start with the following HTML:
<div style="font-size: 1.3em">1</div><div style="font-size: 1.1em">2</div>
Select all and add bullets. Observe the HTML is now:
<div style="font-size: 1.3em"><ul><li>1</li><li><span class="Apple-style-span" style="font-size: 18px; ">2</span></li></ul></div><div style="font-size: 1.1em">2</div>
It is especially strange that the first LI stays in em but the second converts to px.
(This is the root cause of a bug in Google Presentations.)
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Eric Seidel (no email)
Would be ideal to turn this into a self-contained test case attached to this bug.
Aryeh Gregor
IE9 and Opera 11.50 produce
<ul><li><div style="font-size: 1.3em">1</div></li><li><div style="font-size: 1.1em">2</div></li></ul>
Firefox 7.0a2 produces
<ul><li>1</li><li>2</li></ul>
so it strips the style. My spec produces
<ul><li style="font-size: 1.3em">1</li><li style="font-size: 1.1em">2</li></ul>
which IMO is the best. :) Basically I have an explicit step in the insert(un)orderedlist algorithm where if we're indenting a div or p, we convert it to an li, preserving all its attributes:
http://aryeh.name/spec/editing/editing.html#toggling-lists
Self-contained test case (who needs attachments?):
data:text/html,<!doctype html>
<div contenteditable>
<div style="font-size: 1.3em">1</div>
<div style="font-size: 1.1em">2</div>
</div>
<script>
getSelection().selectAllChildren(document.querySelector("div"));
document.execCommand("insertunorderedlist", false, "");
document.body.textContent =
document.querySelector("div").innerHTML;
</script>
Ahmad Saleem
Changed the test case from Comment 02 into JSFiddle and added to URL:
*** Safari 16.1 ***
<div style="font-size: 1.3em"><ul><li><span style="font-size: 1.3em;">1</span><br></li><li><span style="font-size: 1.1em;">2</span><br></li></ul></div>
*** Chrome Canary 110 ***
<div style="font-size: 1.3em"><ul><li>1</li><li>2</li></ul></div>
*** Firefox Nightly 109 ***
<ul><li>1 </li><li>2</li></ul>
_______
Just wanted to share updated test result. Thanks!