LayoutTests/editing/style/push-down-font-styles-mac.html - WebKit - Git at Google

 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
 <html>
 <head>
 <script src="../../resources/js-test-pre.js"></script>
 </head>
 <body>
 <p id="description"></p>
 <div id="console"></div>
 <script>
 description('Test to make sure we push down inline styles properly.');

 if (window.internals)
     internals.settings.setEditingBehavior('mac');
 var testContainer = document.createElement("div");
 testContainer.contentEditable = true;
 document.body.appendChild(testContainer);

 var styleWithCSS = false;

 function testSingleToggle(toggleCommand, value, selector, initialContents, expectedContents)
 {
     testContainer.innerHTML = initialContents;
     var selected = selector(testContainer);
     document.execCommand('styleWithCSS', false, styleWithCSS ? 'true' : 'false');
     document.execCommand(toggleCommand, false, value);
     var action = toggleCommand + ' ' + value + ' on ' + selected + ' of "' + initialContents + '" yields "' + testContainer.innerHTML + '"';
     if (testContainer.innerHTML == expectedContents)
         testPassed(action);
     else
         testFailed(action + ', expected "' + expectedContents + '"');
 }

 function selectAll(container) {
     window.getSelection().selectAllChildren(container);
     return 'all';
 }

 function selectTest(container) {
     window.getSelection().selectAllChildren(document.getElementById('test'));
     return 'test';
 }

 function selectFirstWord(container) {
     window.getSelection().setPosition(container, 0);
     window.getSelection().modify('extend', 'forward', 'word');
     return 'first word';
 }

 function selectSecondWord(container) {
     window.getSelection().setPosition(container, 0);
     window.getSelection().modify('move', 'forward', 'word');
     window.getSelection().modify('extend', 'forward', 'word');
     return 'second word';
 }

 function selectLastTwoWords(container) {
     window.getSelection().setPosition(container, container.childNodes.length);
     window.getSelection().modify('extend', 'backward', 'word');
     window.getSelection().modify('extend', 'backward', 'word');
     return 'last two words';
 }


 debug("Font size");
 styleWithCSS = false;
 testSingleToggle("fontsize", 2, selectAll, 'hello world', '<font size="2">hello world</font>');
 testSingleToggle("fontsize", 4, selectAll, 'hello world', '<font size="4">hello world</font>');
 testSingleToggle("fontsize", 5, selectFirstWord, 'hello world', '<font size="5">hello</font> world');
 testSingleToggle("fontsize", 3, selectFirstWord, '<font size="7">hello <div>world</div></font>', 'hello <div style="font-size: -webkit-xxx-large;">world</div>');
 testSingleToggle("fontsize", 3, selectFirstWord, '<font size="7"><div>hello</div><div>world</div></font>', '<div>hello</div><div style="font-size: -webkit-xxx-large;">world</div>');
 testSingleToggle("fontsize", 3, selectSecondWord, '<font size="7"><div>hello</div>world</font>', '<div style="font-size: -webkit-xxx-large;">hello</div>world');

 testSingleToggle("fontsize", 7, selectAll, '<font size="7"><div>hello</div>world</font>', '<font size="7"><div>hello</div>world</font>');
 testSingleToggle("fontsize", 7, selectAll, '<font size="3"><div>hello</div>world</font>', '<div><font size="7">hello</font></div><font size="7">world</font>');
 testSingleToggle("fontsize", 6, selectAll, '<font size="7"><div>hello</div>world</font>', '<div><font size="6">hello</font></div><font size="6">world</font>');
 testSingleToggle("fontsize", 5, selectAll, '<font size="7"><div>hello</div>world</font>', '<div><font size="5">hello</font></div><font size="5">world</font>');
 testSingleToggle("fontsize", 3, selectAll, '<font size="7"><div>hello</div>world</font>', '<div>hello</div>world');
 testSingleToggle("fontsize", 3, selectAll, '<font size="3"><div>hello</div>world</font>', '<font size="3"><div>hello</div>world</font>');
 testSingleToggle("fontsize", 1, selectAll, '<font size="3"><div>hello</div>world</font>', '<div><font size="1">hello</font></div><font size="1">world</font>');

 debug("");
 debug("Font size (with CSS)");
 styleWithCSS = true;
 testSingleToggle("fontsize", 7, selectAll, '<font size="7"><div>hello</div>world</font>', '<font size="7"><div>hello</div>world</font>');
 testSingleToggle("fontsize", 7, selectAll, '<font size="3"><div>hello</div>world</font>', '<div><span style="font-size: -webkit-xxx-large;">hello</span></div><span style="font-size: -webkit-xxx-large;">world</span>');
 testSingleToggle("fontsize", 6, selectAll, '<font size="7"><div>hello</div>world</font>', '<div><span style="font-size: xx-large;">hello</span></div><span style="font-size: xx-large;">world</span>');
 testSingleToggle("fontsize", 5, selectAll, '<font size="7"><div>hello</div>world</font>', '<div><span style="font-size: x-large;">hello</span></div><span style="font-size: x-large;">world</span>');
 testSingleToggle("fontsize", 3, selectAll, '<font size="7"><div>hello</div>world</font>', '<div>hello</div>world');
 testSingleToggle("fontsize", 3, selectAll, '<font size="3"><div>hello</div>world</font>', '<font size="3"><div>hello</div>world</font>');
 testSingleToggle("fontsize", 1, selectAll, '<font size="3"><div>hello</div>world</font>', '<div><span style="font-size: x-small;">hello</span></div><span style="font-size: x-small;">world</span>');

 debug("");
 debug("Font family");
 styleWithCSS = false;
 testSingleToggle("fontname", "Arial", selectAll, 'hello world', '<font face="Arial">hello world</font>');
 testSingleToggle("fontname", "Arial", selectFirstWord, '<font face="sans-serif">hello world</font>', '<font face="Arial">hello</font><font face="sans-serif"> world</font>');
 testSingleToggle("fontname", "Arial", selectFirstWord, '<font face="sans-serif">hello<div>world</div></font>', '<font face="Arial">hello</font><div style="font-family: sans-serif;">world</div>');
 testSingleToggle("fontname", "Arial", selectSecondWord, '<font face="sans-serif">hello<div>world</div></font>', '<font face="sans-serif">hello</font><div><font face="Arial">world</font></div>');
 testSingleToggle("fontname", "Sans-Serif", selectAll, '<font face="sans-serif"><div>hello</div><div>world</div></font>', '<font face="sans-serif"><div>hello</div><div>world</div></font>');
 testSingleToggle("fontname", "Arial", selectAll, '<font face="sans-serif"><div>hello</div><div>world</div></font>', '<div><font face="Arial">hello</font></div><div><font face="Arial">world</font></div>');

 debug("");
 debug("Font family (with CSS)");
 styleWithCSS = true;
 testSingleToggle("fontname", "Arial", selectAll, 'hello world', '<span style="font-family: Arial;">hello world</span>');
 testSingleToggle("fontname", "Arial", selectFirstWord, '<font face="sans-serif">hello world</font>', '<span style="font-family: Arial;">hello</span><font face="sans-serif"> world</font>');
 testSingleToggle("fontname", "Arial", selectFirstWord, '<font face="sans-serif">hello<div>world</div></font>', '<span style="font-family: Arial;">hello</span><div style="font-family: sans-serif;">world</div>');
 testSingleToggle("fontname", "Arial", selectSecondWord, '<font face="sans-serif">hello<div>world</div></font>', '<span style="font-family: sans-serif;">hello</span><div><span style="font-family: Arial;">world</span></div>');
 testSingleToggle("fontname", "Sans-Serif", selectAll, '<font face="sans-serif"><div>hello</div><div>world</div></font>', '<font face="sans-serif"><div>hello</div><div>world</div></font>');
 testSingleToggle("fontname", "Arial", selectAll, '<font face="sans-serif"><div>hello</div><div>world</div></font>', '<div><span style="font-family: Arial;">hello</span></div><div><span style="font-family: Arial;">world</span></div>');

 document.body.removeChild(testContainer);

 var successfullyParsed = true;
 </script>
 <script src="../../resources/js-test-post.js"></script>
 </body>
 </html>
	<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
	<html>
	<head>
	<script src="../../resources/js-test-pre.js"></script>
	</head>
	<body>
	<p id="description"></p>
	<div id="console"></div>
	<script>
	description('Test to make sure we push down inline styles properly.');

	if (window.internals)
	internals.settings.setEditingBehavior('mac');
	var testContainer = document.createElement("div");
	testContainer.contentEditable = true;
	document.body.appendChild(testContainer);

	var styleWithCSS = false;

	function testSingleToggle(toggleCommand, value, selector, initialContents, expectedContents)
	{
	testContainer.innerHTML = initialContents;
	var selected = selector(testContainer);
	document.execCommand('styleWithCSS', false, styleWithCSS ? 'true' : 'false');
	document.execCommand(toggleCommand, false, value);
	var action = toggleCommand + ' ' + value + ' on ' + selected + ' of "' + initialContents + '" yields "' + testContainer.innerHTML + '"';
	if (testContainer.innerHTML == expectedContents)
	testPassed(action);
	else
	testFailed(action + ', expected "' + expectedContents + '"');
	}

	function selectAll(container) {
	window.getSelection().selectAllChildren(container);
	return 'all';
	}

	function selectTest(container) {
	window.getSelection().selectAllChildren(document.getElementById('test'));
	return 'test';
	}

	function selectFirstWord(container) {
	window.getSelection().setPosition(container, 0);
	window.getSelection().modify('extend', 'forward', 'word');
	return 'first word';
	}

	function selectSecondWord(container) {
	window.getSelection().setPosition(container, 0);
	window.getSelection().modify('move', 'forward', 'word');
	window.getSelection().modify('extend', 'forward', 'word');
	return 'second word';
	}

	function selectLastTwoWords(container) {
	window.getSelection().setPosition(container, container.childNodes.length);
	window.getSelection().modify('extend', 'backward', 'word');
	window.getSelection().modify('extend', 'backward', 'word');
	return 'last two words';
	}


	debug("Font size");
	styleWithCSS = false;
	testSingleToggle("fontsize", 2, selectAll, 'hello world', '<font size="2">hello world</font>');
	testSingleToggle("fontsize", 4, selectAll, 'hello world', '<font size="4">hello world</font>');
	testSingleToggle("fontsize", 5, selectFirstWord, 'hello world', '<font size="5">hello</font> world');
	testSingleToggle("fontsize", 3, selectFirstWord, '<font size="7">hello <div>world</div></font>', 'hello <div style="font-size: -webkit-xxx-large;">world</div>');
	testSingleToggle("fontsize", 3, selectFirstWord, '<font size="7"><div>hello</div><div>world</div></font>', '<div>hello</div><div style="font-size: -webkit-xxx-large;">world</div>');
	testSingleToggle("fontsize", 3, selectSecondWord, '<font size="7"><div>hello</div>world</font>', '<div style="font-size: -webkit-xxx-large;">hello</div>world');

	testSingleToggle("fontsize", 7, selectAll, '<font size="7"><div>hello</div>world</font>', '<font size="7"><div>hello</div>world</font>');
	testSingleToggle("fontsize", 7, selectAll, '<font size="3"><div>hello</div>world</font>', '<div><font size="7">hello</font></div><font size="7">world</font>');
	testSingleToggle("fontsize", 6, selectAll, '<font size="7"><div>hello</div>world</font>', '<div><font size="6">hello</font></div><font size="6">world</font>');
	testSingleToggle("fontsize", 5, selectAll, '<font size="7"><div>hello</div>world</font>', '<div><font size="5">hello</font></div><font size="5">world</font>');
	testSingleToggle("fontsize", 3, selectAll, '<font size="7"><div>hello</div>world</font>', '<div>hello</div>world');
	testSingleToggle("fontsize", 3, selectAll, '<font size="3"><div>hello</div>world</font>', '<font size="3"><div>hello</div>world</font>');
	testSingleToggle("fontsize", 1, selectAll, '<font size="3"><div>hello</div>world</font>', '<div><font size="1">hello</font></div><font size="1">world</font>');

	debug("");
	debug("Font size (with CSS)");
	styleWithCSS = true;
	testSingleToggle("fontsize", 7, selectAll, '<font size="7"><div>hello</div>world</font>', '<font size="7"><div>hello</div>world</font>');
	testSingleToggle("fontsize", 7, selectAll, '<font size="3"><div>hello</div>world</font>', '<div><span style="font-size: -webkit-xxx-large;">hello</span></div><span style="font-size: -webkit-xxx-large;">world</span>');
	testSingleToggle("fontsize", 6, selectAll, '<font size="7"><div>hello</div>world</font>', '<div><span style="font-size: xx-large;">hello</span></div><span style="font-size: xx-large;">world</span>');
	testSingleToggle("fontsize", 5, selectAll, '<font size="7"><div>hello</div>world</font>', '<div><span style="font-size: x-large;">hello</span></div><span style="font-size: x-large;">world</span>');
	testSingleToggle("fontsize", 3, selectAll, '<font size="7"><div>hello</div>world</font>', '<div>hello</div>world');
	testSingleToggle("fontsize", 3, selectAll, '<font size="3"><div>hello</div>world</font>', '<font size="3"><div>hello</div>world</font>');
	testSingleToggle("fontsize", 1, selectAll, '<font size="3"><div>hello</div>world</font>', '<div><span style="font-size: x-small;">hello</span></div><span style="font-size: x-small;">world</span>');

	debug("");
	debug("Font family");
	styleWithCSS = false;
	testSingleToggle("fontname", "Arial", selectAll, 'hello world', '<font face="Arial">hello world</font>');
	testSingleToggle("fontname", "Arial", selectFirstWord, '<font face="sans-serif">hello world</font>', '<font face="Arial">hello</font><font face="sans-serif"> world</font>');
	testSingleToggle("fontname", "Arial", selectFirstWord, '<font face="sans-serif">hello<div>world</div></font>', '<font face="Arial">hello</font><div style="font-family: sans-serif;">world</div>');
	testSingleToggle("fontname", "Arial", selectSecondWord, '<font face="sans-serif">hello<div>world</div></font>', '<font face="sans-serif">hello</font><div><font face="Arial">world</font></div>');
	testSingleToggle("fontname", "Sans-Serif", selectAll, '<font face="sans-serif"><div>hello</div><div>world</div></font>', '<font face="sans-serif"><div>hello</div><div>world</div></font>');
	testSingleToggle("fontname", "Arial", selectAll, '<font face="sans-serif"><div>hello</div><div>world</div></font>', '<div><font face="Arial">hello</font></div><div><font face="Arial">world</font></div>');

	debug("");
	debug("Font family (with CSS)");
	styleWithCSS = true;
	testSingleToggle("fontname", "Arial", selectAll, 'hello world', '<span style="font-family: Arial;">hello world</span>');
	testSingleToggle("fontname", "Arial", selectFirstWord, '<font face="sans-serif">hello world</font>', '<span style="font-family: Arial;">hello</span><font face="sans-serif"> world</font>');
	testSingleToggle("fontname", "Arial", selectFirstWord, '<font face="sans-serif">hello<div>world</div></font>', '<span style="font-family: Arial;">hello</span><div style="font-family: sans-serif;">world</div>');
	testSingleToggle("fontname", "Arial", selectSecondWord, '<font face="sans-serif">hello<div>world</div></font>', '<span style="font-family: sans-serif;">hello</span><div><span style="font-family: Arial;">world</span></div>');
	testSingleToggle("fontname", "Sans-Serif", selectAll, '<font face="sans-serif"><div>hello</div><div>world</div></font>', '<font face="sans-serif"><div>hello</div><div>world</div></font>');
	testSingleToggle("fontname", "Arial", selectAll, '<font face="sans-serif"><div>hello</div><div>world</div></font>', '<div><span style="font-family: Arial;">hello</span></div><div><span style="font-family: Arial;">world</span></div>');

	document.body.removeChild(testContainer);

	var successfullyParsed = true;
	</script>
	<script src="../../resources/js-test-post.js"></script>
	</body>
	</html>