LayoutTests/editing/execCommand/format-block-preserves-inline-style.html

<!DOCTYPE html>
<html>
<body>
<script src="../../resources/dump-as-markup.js"></script>
<div id="test" contenteditable="true">
<p id="p1" style="color: blue">Hello world</p>
<p id="p2" style="color: blue; font-size: 18px">Styled text</p>
<p id="p3">No style</p>
<p id="p4" style="color: red">Cursor at end</p>
</div>
<script>

Markup.description("This tests that FormatBlock preserves inline styles when converting between block elements.");
Markup.dump("test", "Before FormatBlock");

var s = window.getSelection();

// Test 1: <p style="color: blue"> to <div> should preserve color.
s.setPosition(document.getElementById("p1"), 0);
document.execCommand("FormatBlock", false, "div");

// Test 2: <p style="color: blue; font-size: 18px"> to <h1> should preserve all properties.
s.setPosition(document.getElementById("p2"), 0);
document.execCommand("FormatBlock", false, "h1");

// Test 3: <p> with no style to <div> should have no style attribute.
s.setPosition(document.getElementById("p3"), 0);
document.execCommand("FormatBlock", false, "div");

// Test 4: Cursor at end of paragraph (Yahoo Mail's exact scenario).
var p4 = document.getElementById("p4");
s.setPosition(p4.firstChild, p4.firstChild.length);
document.execCommand("FormatBlock", false, "div");

Markup.dump("test", "After FormatBlock");

</script>
</body>
</html>