/tests/tinymce.Formatter_apply.html

https://github.com/chrisdarroch/tinymce · HTML · 1054 lines · 949 code · 105 blank · 0 comment · 0 complexity · ef8637cebe906fbe39b9fde3483b0155 MD5 · raw file 

    

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. 

  2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. 

  3. <head>
    4. 

  4. <title>Unit tests for apply formatting</title>
    5. 

  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6. <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-git.css" type="text/css" />
    7. 

  7. <script src="http://code.jquery.com/qunit/qunit-git.js"></script>
    8. 

  8. <script src="qunit/connector.js"></script>
    9. 

  9. <script type="text/javascript" src="qunit/runner.js"></script>
    10. 

  10. <script type="text/javascript" src="js/utils.js"></script>
    11. 

  11. <script type="text/javascript" src="js/tiny_mce_loader.js"></script>
    12. 

  12. <script>
    13. 

  13. var editor, rng, format;
    14. 

  14. 

  15. QUnit.config.reorder = false;
    16. 

  16. QUnit.config.autostart = false;
    17. 

  17. module("Apply formatting", {
    18. 

  18. 	autostart: false
    19. 

  19. });
    20. 

  20. 

  21. function getContent() {
    22. 

  22. 	return editor.getContent().toLowerCase().replace(/[\r]+/g, '');
    23. 

  23. };
    24. 

  24. 

  25. test('apply inline to a list', function(){
    26. 

  26. 	editor.formatter.register('format', {inline : 'b', toggle: false});
    27. 

  27. 	editor.getBody().innerHTML = '<p>1234</p><ul><li>first element</li><li>second element</li></ul><p>5678</p>';
    28. 

  28. 	rng = editor.dom.createRng();
    29. 

  29. 	rng.setStart(editor.dom.select('p')[0].firstChild, 0);
    30. 

  30. 	rng.setEnd(editor.dom.select('p')[1].firstChild, 4);
    31. 

  31. 	editor.selection.setRng(rng);
    32. 

  32. 	editor.formatter.apply('format');
    33. 

  33. 	equals(getContent(), '<p><b>1234</b></p><ul><li><b>first element</b></li><li><b>second element</b></li></ul><p><b>5678</b></p>', 'selection of a list');
    34. 

  34. 	
    35. 

  35. });
    36. 

  36. 

  37. test('Toggle OFF - Inline element on selected text', function() {
    38. 

  38. 	// Toggle OFF - Inline element on selected text
    39. 

  39. 	editor.formatter.register('format', {inline : 'b', toggle: false});
    40. 

  40. 	editor.getBody().innerHTML = '<p><b>1234</b></p>';
    41. 

  41. 	rng = editor.dom.createRng();
    42. 

  42. 	rng.setStart(editor.dom.select('b')[0].firstChild, 0);
    43. 

  43. 	rng.setEnd(editor.dom.select('b')[0].firstChild, 4);
    44. 

  44. 	editor.selection.setRng(rng);
    45. 

  45. 	editor.formatter.toggle('format');
    46. 

  46. 	equals(getContent(), '<p><b>1234</b></p>');
    47. 

  47. });
    48. 

  48. 

  49. test('Toggle OFF - Inline element on partially selected text', function() {
    50. 

  50. 	// Toggle OFF - Inline element on partially selected text
    51. 

  51. 	editor.formatter.register('format', {inline : 'b', toggle: 0});
    52. 

  52. 	editor.getBody().innerHTML = '<p>1<b>23</b>4</p>';
    53. 

  53. 	rng = editor.dom.createRng();
    54. 

  54. 	rng.setStart(editor.dom.select('b')[0].firstChild, 0);
    55. 

  55. 	rng.setEnd(editor.dom.select('b')[0].firstChild, 2);
    56. 

  56. 	editor.selection.setRng(rng);
    57. 

  57. 	editor.formatter.toggle('format');
    58. 

  58. 	equals(getContent(), '<p>1<b>23</b>4</p>');
    59. 

  59. });
    60. 

  60. 

  61. test('Toggle OFF - Inline element on partially selected text in start/end elements', function() {
    62. 

  62. 	// Toggle OFF - Inline element on partially selected text in start/end elements
    63. 

  63. 	editor.formatter.register('format', {inline : 'b', toggle: false});
    64. 

  64. 	editor.getBody().innerHTML = '<p>1<b>234</b></p><p><b>123</b>4</p>';//'<p>1234</p><p>1234</p>';
    65. 

  65. 	rng = editor.dom.createRng();
    66. 

  66. 	rng.setStart(editor.dom.select('b')[0].firstChild, 0);
    67. 

  67. 	rng.setEnd(editor.dom.select('b')[1].firstChild, 3);
    68. 

  68. 	editor.selection.setRng(rng);
    69. 

  69. 	editor.formatter.toggle('format');
    70. 

  70. 	equals(getContent(), '<p>1<b>234</b></p><p><b>123</b>4</p>');
    71. 

  71. });
    72. 

  72. 

  73. test('Toggle ON - NO inline element on selected text', function() {
    74. 

  74. 	// Inline element on selected text
    75. 

  75. 	editor.formatter.register('format', {inline : 'b', toggle: true});
    76. 

  76. 	editor.getBody().innerHTML = '<p>1234</p>';
    77. 

  77. 	rng = editor.dom.createRng();
    78. 

  78. 	rng.setStart(editor.dom.select('p')[0].firstChild, 0);
    79. 

  79. 	rng.setEnd(editor.dom.select('p')[0].firstChild, 4);
    80. 

  80. 	editor.selection.setRng(rng);
    81. 

  81. 	editor.formatter.apply('format');
    82. 

  82. 	equals(getContent(), '<p><b>1234</b></p>', 'Inline element on selected text');
    83. 

  83. 	editor.formatter.toggle('format');
    84. 

  84. 	equals(getContent(), '<p>1234</p>', 'Toggle ON - NO inline element on selected text');
    85. 

  85. });
    86. 

  86. 

  87. test('Selection spanning from within format to outside format with toggle off', function() {
    88. 

  88. 	editor.formatter.register('format', {inline : 'b', toggle: false});
    89. 

  89. 	editor.getBody().innerHTML = '<p><b>12</b>34</p>';
    90. 

  90. 	rng = editor.dom.createRng();
    91. 

  91. 	rng.setStart(editor.dom.select('b')[0].firstChild, 0);
    92. 

  92. 	rng.setEnd(editor.dom.select('p')[0].lastChild, 2);
    93. 

  93. 	editor.selection.setRng(rng);
    94. 

  94. 	editor.formatter.toggle('format');
    95. 

  95. 	equals(getContent(), '<p><b>1234</b></p>', 'Extend formating if start of selection is already formatted');
    96. 

  96. });
    97. 

  97. 

  98. test('Inline element on partially selected text', function() {
    99. 

  99. 	editor.formatter.register('format', {inline : 'b'});
    100. 

  100. 	editor.getBody().innerHTML = '<p>1234</p>';
    101. 

  101. 	rng = editor.dom.createRng();
    102. 

  102. 	rng.setStart(editor.dom.select('p')[0].firstChild, 1);
    103. 

  103. 	rng.setEnd(editor.dom.select('p')[0].firstChild, 3);
    104. 

  104. 	editor.selection.setRng(rng);
    105. 

  105. 	editor.formatter.apply('format');
    106. 

  106. 	equals(getContent(), '<p>1<b>23</b>4</p>', 'Inline element on partially selected text');
    107. 

  107. 	editor.formatter.toggle('format');
    108. 

  108. 	equals(getContent(), '<p>1234</p>', 'Toggle ON - NO inline element on partially selected text');
    109. 

  109. });
    110. 

  110. 

  111. test('Inline element on partially selected text in start/end elements', function() {
    112. 

  112. 	// Inline element on partially selected text in start/end elements
    113. 

  113. 	editor.formatter.register('format', {inline : 'b'});
    114. 

  114. 	editor.getBody().innerHTML = '<p>1234</p><p>1234</p>';
    115. 

  115. 	rng = editor.dom.createRng();
    116. 

  116. 	rng.setStart(editor.dom.select('p')[0].firstChild, 1);
    117. 

  117. 	rng.setEnd(editor.dom.select('p')[1].firstChild, 3);
    118. 

  118. 	editor.selection.setRng(rng);
    119. 

  119. 	editor.formatter.apply('format');
    120. 

  120. 	equals(getContent(), '<p>1<b>234</b></p><p><b>123</b>4</p>');
    121. 

  121. });
    122. 

  122. 

  123. test('Inline element on selected element', function() {
    124. 

  124. 	editor.formatter.register('format', {inline : 'b'});
    125. 

  125. 	editor.getBody().innerHTML = '<p>1234</p>';
    126. 

  126. 	rng = editor.dom.createRng();
    127. 

  127. 	rng.setStart(editor.getBody(), 0);
    128. 

  128. 	rng.setEnd(editor.getBody(), 1);
    129. 

  129. 	editor.selection.setRng(rng);
    130. 

  130. 	editor.formatter.apply('format');
    131. 

  131. 	equals(getContent(), '<p><b>1234</b></p>', 'Inline element on selected element');
    132. 

  132. });
    133. 

  133. 

  134. test('Inline element on multiple selected elements', function() {
    135. 

  135. 	editor.formatter.register('format', {inline : 'b'});
    136. 

  136. 	editor.getBody().innerHTML = '<p>1234</p><p>1234</p>';
    137. 

  137. 	rng = editor.dom.createRng();
    138. 

  138. 	rng.setStart(editor.getBody(), 0);
    139. 

  139. 	rng.setEnd(editor.getBody(), 2);
    140. 

  140. 	editor.selection.setRng(rng);
    141. 

  141. 	editor.formatter.apply('format');
    142. 

  142. 	equals(getContent(), '<p><b>1234</b></p><p><b>1234</b></p>', 'Inline element on multiple selected elements');
    143. 

  143. });
    144. 

  144. 

  145. test('Inline element on multiple selected elements with various childnodes', function() {
    146. 

  146. 	editor.formatter.register('format', {inline : 'b'});
    147. 

  147. 	editor.getBody().innerHTML = '<p><em>1234</em>5678<span>9</span></p><p><em>1234</em>5678<span>9</span></p>';
    148. 

  148. 	rng = editor.dom.createRng();
    149. 

  149. 	rng.setStart(editor.getBody(), 0);
    150. 

  150. 	rng.setEnd(editor.getBody(), 2);
    151. 

  151. 	editor.selection.setRng(rng);
    152. 

  152. 	editor.formatter.apply('format');
    153. 

  153. 	equals(getContent(), '<p><b><em>1234</em>5678<span>9</span></b></p><p><b><em>1234</em>5678<span>9</span></b></p>', 'Inline element on multiple selected elements with various childnodes');
    154. 

  154. });
    155. 

  155. 

  156. test('Inline element with attributes', function() {
    157. 

  157. 	editor.formatter.register('format', {inline : 'b', attributes : {title : 'value1', id : 'value2'}});
    158. 

  158. 	editor.getBody().innerHTML = '<p>1234</p>';
    159. 

  159. 	rng = editor.dom.createRng();
    160. 

  160. 	rng.setStart(editor.dom.select('p')[0].firstChild, 0);
    161. 

  161. 	rng.setEnd(editor.dom.select('p')[0].firstChild, 4);
    162. 

  162. 	editor.selection.setRng(rng);
    163. 

  163. 	editor.formatter.apply('format');
    164. 

  164. 	equals(getContent(), '<p><b id="value2" title="value1">1234</b></p>', 'Inline element with attributes');
    165. 

  165. });
    166. 

  166. 

  167. test('Inline element with styles', function() {
    168. 

  168. 	editor.formatter.register('format', {inline : 'b', styles : {color : '#ff0000', fontSize : '10px'}});
    169. 

  169. 	editor.getBody().innerHTML = '<p>1234</p>';
    170. 

  170. 	rng = editor.dom.createRng();
    171. 

  171. 	rng.setStart(editor.dom.select('p')[0].firstChild, 0);
    172. 

  172. 	rng.setEnd(editor.dom.select('p')[0].firstChild, 4);
    173. 

  173. 	editor.selection.setRng(rng);
    174. 

  174. 	editor.formatter.apply('format');
    175. 

  175. 	equals(getContent(), '<p><b style=\"color: #ff0000; font-size: 10px;\">1234</b></p>', 'Inline element with styles');
    176. 

  176. });
    177. 

  177. 

  178. test('Inline element with attributes and styles', function() {
    179. 

  179. 	editor.formatter.register('format', {inline : 'b', attributes : {title : 'value1', id : 'value2'}, styles : {color : '#ff0000', fontSize : '10px'}});
    180. 

  180. 	editor.getBody().innerHTML = '<p>1234</p>';
    181. 

  181. 	rng = editor.dom.createRng();
    182. 

  182. 	rng.setStart(editor.dom.select('p')[0].firstChild, 0);
    183. 

  183. 	rng.setEnd(editor.dom.select('p')[0].firstChild, 4);
    184. 

  184. 	editor.selection.setRng(rng);
    185. 

  185. 	editor.formatter.apply('format');
    186. 

  186. 	equals(getContent(), '<p><b id="value2" style="color: #ff0000; font-size: 10px;" title="value1">1234</b></p>', 'Inline element with attributes and styles');
    187. 

  187. });
    188. 

  188. 

  189. test('Inline element with wrapable parents', function() {
    190. 

  190. 	editor.formatter.register('format', {inline : 'b'});
    191. 

  191. 	editor.getBody().innerHTML = '<p>x<em><span>1234</span></em>y</p>';
    192. 

  192. 	rng = editor.dom.createRng();
    193. 

  193. 	rng.setStart(editor.dom.select('span')[0].firstChild, 0);
    194. 

  194. 	rng.setEnd(editor.dom.select('span')[0].firstChild, 4);
    195. 

  195. 	editor.selection.setRng(rng);
    196. 

  196. 	editor.formatter.apply('format');
    197. 

  197. 	equals(getContent(), '<p>x<b><em><span>1234</span></em></b>y</p>', 'Inline element with wrapable parents');
    198. 

  198. });
    199. 

  199. 

  200. test('Inline element with redundant child', function() {
    201. 

  201. 	editor.formatter.register('format', {inline : 'b'});
    202. 

  202. 	editor.getBody().innerHTML = '<p><b>1234</b></p>';
    203. 

  203. 	rng = editor.dom.createRng();
    204. 

  204. 	rng.setStart(editor.dom.select('p')[0], 0);
    205. 

  205. 	rng.setEnd(editor.dom.select('p')[0], 1);
    206. 

  206. 	editor.selection.setRng(rng);
    207. 

  207. 	editor.formatter.apply('format');
    208. 

  208. 	equals(getContent(), '<p><b>1234</b></p>', 'Inline element with redundant child');
    209. 

  209. });
    210. 

  210. 

  211. test('Inline element with redundant parent', function() {
    212. 

  212. 	editor.formatter.register('format', {inline : 'b'});
    213. 

  213. 	editor.getBody().innerHTML = '<p><b>a<em>1234</em>b</b></p>';
    214. 

  214. 	rng = editor.dom.createRng();
    215. 

  215. 	rng.setStart(editor.dom.select('em')[0].firstChild, 0);
    216. 

  216. 	rng.setEnd(editor.dom.select('em')[0].firstChild, 4);
    217. 

  217. 	editor.selection.setRng(rng);
    218. 

  218. 	editor.formatter.apply('format');
    219. 

  219. 	equals(getContent(), '<p><b>a<em>1234</em>b</b></p>', 'Inline element with redundant parent');
    220. 

  220. });
    221. 

  221. 

  222. test('Inline element with redundant child of similar type 1', function() {
    223. 

  223. 	editor.formatter.register('format', [
    224. 

  224. 		{inline : 'b'},
    225. 

  225. 		{inline : 'strong'}
    226. 

  226. 	]);
    227. 

  227. 	editor.getBody().innerHTML = '<p>a<strong>1234</strong>b</p>';
    228. 

  228. 	rng = editor.dom.createRng();
    229. 

  229. 	rng.setStart(editor.dom.select('p')[0], 0);
    230. 

  230. 	rng.setEnd(editor.dom.select('p')[0], 3);
    231. 

  231. 	editor.selection.setRng(rng);
    232. 

  232. 	editor.formatter.apply('format');
    233. 

  233. 	equals(getContent(), '<p><b>a1234b</b></p>', 'Inline element with redundant child of similar type 1');
    234. 

  234. });
    235. 

  235. 

  236. test('Inline element with redundant child of similar type 2', function() {
    237. 

  237. 	editor.formatter.register('format', [
    238. 

  238. 		{inline : 'b'},
    239. 

  239. 		{inline : 'span', styles : {fontWeight : 'bold'}}
    240. 

  240. 	]);
    241. 

  241. 	editor.getBody().innerHTML = '<p><span style="font-weight:bold">1234</span></p>';
    242. 

  242. 	rng = editor.dom.createRng();
    243. 

  243. 	rng.setStart(editor.dom.select('p')[0], 0);
    244. 

  244. 	rng.setEnd(editor.dom.select('p')[0], 1);
    245. 

  245. 	editor.selection.setRng(rng);
    246. 

  246. 	editor.formatter.apply('format');
    247. 

  247. 	equals(getContent(), '<p><b>1234</b></p>', 'Inline element with redundant child of similar type 2');
    248. 

  248. });
    249. 

  249. 

  250. test('Inline element with redundant children of similar types', function() {
    251. 

  251. 	editor.formatter.register('format', [
    252. 

  252. 		{inline : 'b'},
    253. 

  253. 		{inline : 'strong'},
    254. 

  254. 		{inline : 'span', styles : {fontWeight : 'bold'}}
    255. 

  255. 	]);
    256. 

  256. 	editor.getBody().innerHTML = '<p><span style="font-weight:bold">a<strong>1234</strong><b>5678</b>b</span></p>';
    257. 

  257. 	rng = editor.dom.createRng();
    258. 

  258. 	rng.setStart(editor.dom.select('p')[0], 0);
    259. 

  259. 	rng.setEnd(editor.dom.select('p')[0], 1);
    260. 

  260. 	editor.selection.setRng(rng);
    261. 

  261. 	editor.formatter.apply('format');
    262. 

  262. 	equals(getContent(), '<p><b>a12345678b</b></p>', 'Inline element with redundant children of similar types');
    263. 

  263. });
    264. 

  264. 

  265. test('Inline element with redundant parent 1', function() {
    266. 

  266. 	editor.formatter.register('format', [
    267. 

  267. 		{inline : 'b'},
    268. 

  268. 		{inline : 'strong'}
    269. 

  269. 	]);
    270. 

  270. 	editor.getBody().innerHTML = '<p><strong>a<em>1234</em>b</strong></p>';
    271. 

  271. 	rng = editor.dom.createRng();
    272. 

  272. 	rng.setStart(editor.dom.select('em')[0].firstChild, 0);
    273. 

  273. 	rng.setEnd(editor.dom.select('em')[0].firstChild, 4);
    274. 

  274. 	editor.selection.setRng(rng);
    275. 

  275. 	editor.formatter.apply('format');
    276. 

  276. 	equals(getContent(), '<p><strong>a<em>1234</em>b</strong></p>', 'Inline element with redundant parent 1');
    277. 

  277. });
    278. 

  278. 

  279. test('Inline element with redundant parent 2', function() {
    280. 

  280. 	editor.formatter.register('format', [
    281. 

  281. 		{inline : 'b'},
    282. 

  282. 		{inline : 'span', styles : {fontWeight : 'bold'}}
    283. 

  283. 	]);
    284. 

  284. 	editor.getBody().innerHTML = '<p><span style="font-weight:bold">a<em>1234</em>b</span></p>';
    285. 

  285. 	rng = editor.dom.createRng();
    286. 

  286. 	rng.setStart(editor.dom.select('em')[0].firstChild, 0);
    287. 

  287. 	rng.setEnd(editor.dom.select('em')[0].firstChild, 4);
    288. 

  288. 	editor.selection.setRng(rng);
    289. 

  289. 	editor.formatter.apply('format');
    290. 

  290. 	equals(getContent(), '<p><span style="font-weight: bold;">a<em>1234</em>b</span></p>', 'Inline element with redundant parent 2');
    291. 

  291. });
    292. 

  292. 

  293. test('Inline element with redundant parents of similar types', function() {
    294. 

  294. 	editor.formatter.register('format', [
    295. 

  295. 		{inline : 'b'},
    296. 

  296. 		{inline : 'strong'},
    297. 

  297. 		{inline : 'span', styles : {fontWeight : 'bold'}}
    298. 

  298. 	]);
    299. 

  299. 	editor.getBody().innerHTML = '<p><span style="font-weight:bold"><strong><b>a<em>1234</em>b</b></strong></span></p>';
    300. 

  300. 	rng = editor.dom.createRng();
    301. 

  301. 	rng.setStart(editor.dom.select('em')[0].firstChild, 0);
    302. 

  302. 	rng.setEnd(editor.dom.select('em')[0].firstChild, 4);
    303. 

  303. 	editor.selection.setRng(rng);
    304. 

  304. 	editor.formatter.apply('format');
    305. 

  305. 	equals(getContent(), '<p><span style="font-weight: bold;"><strong><b>a<em>1234</em>b</b></strong></span></p>', 'Inline element with redundant parents of similar types');
    306. 

  306. });
    307. 

  307. 

  308. test('Inline element merged with parent and child', function() {
    309. 

  309. 	editor.formatter.register('format', {inline : 'b'});
    310. 

  310. 	editor.getBody().innerHTML = '<p>a<b>12<b>34</b>56</b>b</p>';
    311. 

  311. 	rng = editor.dom.createRng();
    312. 

  312. 	rng.setStart(editor.dom.select('b')[0].firstChild, 1);
    313. 

  313. 	rng.setEnd(editor.dom.select('b')[0].lastChild, 1);
    314. 

  314. 	editor.selection.setRng(rng);
    315. 

  315. 	editor.formatter.apply('format');
    316. 

  316. 	equals(getContent(), '<p>a<b>123456</b>b</p>', 'Inline element merged with parent and child');
    317. 

  317. });
    318. 

  318. 

  319. test('Inline element merged with child 1', function() {
    320. 

  320. 	editor.formatter.register('format', {inline : 'span', styles : {fontWeight : 'bold'}});
    321. 

  321. 	editor.getBody().innerHTML = '<p>a<span style="font-weight:bold">1234</span>b</p>';
    322. 

  322. 	rng = editor.dom.createRng();
    323. 

  323. 	rng.setStart(editor.getBody(), 0);
    324. 

  324. 	rng.setEnd(editor.getBody(), 1);
    325. 

  325. 	editor.selection.setRng(rng);
    326. 

  326. 	editor.formatter.apply('format');
    327. 

  327. 	equals(getContent(), '<p><span style="font-weight: bold;">a1234b</span></p>', 'Inline element merged with child 1');
    328. 

  328. });
    329. 

  329. 

  330. test('Inline element merged with child 2', function() {
    331. 

  331. 	editor.formatter.register('format', {inline : 'span', styles : {fontWeight : 'bold'}});
    332. 

  332. 	editor.getBody().innerHTML = '<p>a<span style="font-weight:bold; color:#ff0000">1234</span>b</p>';
    333. 

  333. 	rng = editor.dom.createRng();
    334. 

  334. 	rng.setStart(editor.getBody(), 0);
    335. 

  335. 	rng.setEnd(editor.getBody(), 1);
    336. 

  336. 	editor.selection.setRng(rng);
    337. 

  337. 	editor.formatter.apply('format');
    338. 

  338. 	equals(getContent(), '<p><span style=\"font-weight: bold;\">a<span style=\"color: #ff0000;\">1234</span>b</span></p>', 'Inline element merged with child 2');
    339. 

  339. });
    340. 

  340. 

  341. test('Inline element merged with child 3', function() {
    342. 

  342. 	editor.formatter.register('format', {inline : 'span', styles : {fontWeight : 'bold'}});
    343. 

  343. 	editor.getBody().innerHTML = '<p>a<span id="id" style="font-weight:bold">1234</span>b</p>';
    344. 

  344. 	rng = editor.dom.createRng();
    345. 

  345. 	rng.setStart(editor.getBody(), 0);
    346. 

  346. 	rng.setEnd(editor.getBody(), 1);
    347. 

  347. 	editor.selection.setRng(rng);
    348. 

  348. 	editor.formatter.apply('format');
    349. 

  349. 	equals(getContent(), '<p><span style=\"font-weight: bold;\">a<span id=\"id\">1234</span>b</span></p>', 'Inline element merged with child 3');
    350. 

  350. });
    351. 

  351. 

  352. test('Inline element merged with child 3', function() {
    353. 

  353. 	editor.formatter.register('format', {inline : 'span', styles : {fontWeight : 'bold'}, merge : true});
    354. 

  354. 	editor.getBody().innerHTML = '<p><span style="color:#ff0000">1234</span></p>';
    355. 

  355. 	rng = editor.dom.createRng();
    356. 

  356. 	rng.setStart(editor.getBody(), 0);
    357. 

  357. 	rng.setEnd(editor.getBody(), 1);
    358. 

  358. 	editor.selection.setRng(rng);
    359. 

  359. 	editor.formatter.apply('format');
    360. 

  360. 	equals(getContent(), '<p><span style="color: #ff0000; font-weight: bold;">1234</span></p>', 'Inline element merged with child 3');
    361. 

  361. });
    362. 

  362. 

  363. test('Inline element merged with child 4', function() {
    364. 

  364. 	editor.formatter.register('format', {inline : 'span', styles : {color : '#00ff00'}});
    365. 

  365. 	editor.getBody().innerHTML = '<p><span style="color:#ff0000">1234</span></p>';
    366. 

  366. 	rng = editor.dom.createRng();
    367. 

  367. 	rng.setStart(editor.getBody(), 0);
    368. 

  368. 	rng.setEnd(editor.getBody(), 1);
    369. 

  369. 	editor.selection.setRng(rng);
    370. 

  370. 	editor.formatter.apply('format');
    371. 

  371. 	equals(getContent(), '<p><span style="color: #00ff00;">1234</span></p>', 'Inline element merged with child 4');
    372. 

  372. });
    373. 

  373. 

  374. test('Inline element with attributes merged with child 1', function() {
    375. 

  375. 	editor.formatter.register('format', {inline : 'font', attributes : {face : 'arial'}, merge : true});
    376. 

  376. 	editor.getBody().innerHTML = '<p><font size="7">1234</font></p>';
    377. 

  377. 	rng = editor.dom.createRng();
    378. 

  378. 	rng.setStart(editor.getBody(), 0);
    379. 

  379. 	rng.setEnd(editor.getBody(), 1);
    380. 

  380. 	editor.selection.setRng(rng);
    381. 

  381. 	editor.formatter.apply('format');
    382. 

  382. 	equals(getContent(), '<p><font face="arial" size="7">1234</font></p>', 'Inline element with attributes merged with child 1');
    383. 

  383. });
    384. 

  384. 

  385. test('Inline element with attributes merged with child 2', function() {
    386. 

  386. 	editor.formatter.register('format', {inline : 'font', attributes : {size : '7'}});
    387. 

  387. 	editor.getBody().innerHTML = '<p>a<font size="7">1234</font>b</p>';
    388. 

  388. 	rng = editor.dom.createRng();
    389. 

  389. 	rng.setStart(editor.getBody(), 0);
    390. 

  390. 	rng.setEnd(editor.getBody(), 1);
    391. 

  391. 	editor.selection.setRng(rng);
    392. 

  392. 	editor.formatter.apply('format');
    393. 

  393. 	equals(getContent(), '<p><font size="7">a1234b</font></p>', 'Inline element with attributes merged with child 2');
    394. 

  394. });
    395. 

  395. 

  396. test('Inline element merged with left sibling', function() {
    397. 

  397. 	editor.formatter.register('format', {inline : 'b'});
    398. 

  398. 	editor.getBody().innerHTML = '<p><b>1234</b>5678</p>';
    399. 

  399. 	rng = editor.dom.createRng();
    400. 

  400. 	rng.setStart(editor.dom.select('p')[0].lastChild, 0);
    401. 

  401. 	rng.setEnd(editor.dom.select('p')[0].lastChild, 4);
    402. 

  402. 	editor.selection.setRng(rng);
    403. 

  403. 	editor.formatter.apply('format');
    404. 

  404. 	equals(getContent(), '<p><b>12345678</b></p>', 'Inline element merged with left sibling');
    405. 

  405. });
    406. 

  406. 

  407. test('Inline element merged with right sibling', function() {
    408. 

  408. 	editor.formatter.register('format', {inline : 'b'});
    409. 

  409. 	editor.getBody().innerHTML = '<p>1234<b>5678</b></p>';
    410. 

  410. 	rng = editor.dom.createRng();
    411. 

  411. 	rng.setStart(editor.dom.select('p')[0].firstChild, 0);
    412. 

  412. 	rng.setEnd(editor.dom.select('p')[0].firstChild, 4);
    413. 

  413. 	editor.selection.setRng(rng);
    414. 

  414. 	editor.formatter.apply('format');
    415. 

  415. 	equals(getContent(), '<p><b>12345678</b></p>', 'Inline element merged with right sibling');
    416. 

  416. });
    417. 

  417. 

  418. test('Inline element merged with left and right siblings', function() {
    419. 

  419. 	editor.formatter.register('format', {inline : 'b'});
    420. 

  420. 	editor.getBody().innerHTML = '<p><b>12</b>34<b>56</b></p>';
    421. 

  421. 	rng = editor.dom.createRng();
    422. 

  422. 	rng.setStart(editor.dom.select('p')[0].childNodes[1], 0);
    423. 

  423. 	rng.setEnd(editor.dom.select('p')[0].childNodes[1], 2);
    424. 

  424. 	editor.selection.setRng(rng);
    425. 

  425. 	editor.formatter.apply('format');
    426. 

  426. 	equals(getContent(), '<p><b>123456</b></p>', 'Inline element merged with left and right siblings');
    427. 

  427. });
    428. 

  428. 

  429. test('Don\'t merge siblings with whitespace between 1', function() {
    430. 

  430. 	editor.formatter.register('format', {inline : 'b'});
    431. 

  431. 	editor.getBody().innerHTML = '<p><b>a</b> b</p>';
    432. 

  432. 	rng = editor.dom.createRng();
    433. 

  433. 	rng.setStart(editor.dom.select('p')[0].lastChild, 1);
    434. 

  434. 	rng.setEnd(editor.dom.select('p')[0].lastChild, 2);
    435. 

  435. 	editor.selection.setRng(rng);
    436. 

  436. 	editor.formatter.apply('format');
    437. 

  437. 	equals(getContent(), '<p><b>a</b> <b>b</b></p>', 'Don\'t merge siblings with whitespace between 1');
    438. 

  438. });
    439. 

  439. 

  440. test('Don\'t merge siblings with whitespace between 1', function() {
    441. 

  441. 	editor.formatter.register('format', {inline : 'b'});
    442. 

  442. 	editor.getBody().innerHTML = '<p>a <b>b</b></p>';
    443. 

  443. 	rng = editor.dom.createRng();
    444. 

  444. 	rng.setStart(editor.dom.select('p')[0].firstChild, 0);
    445. 

  445. 	rng.setEnd(editor.dom.select('p')[0].firstChild, 1);
    446. 

  446. 	editor.selection.setRng(rng);
    447. 

  447. 	editor.formatter.apply('format');
    448. 

  448. 	equals(getContent(), '<p><b>a</b> <b>b</b></p>', 'Don\'t merge siblings with whitespace between 2');
    449. 

  449. });
    450. 

  450. 

  451. test('Inline element not merged in exact mode', function() {
    452. 

  452. 	editor.formatter.register('format', {inline : 'span', styles : {color : '#00ff00'}, exact : true});
    453. 

  453. 	editor.getBody().innerHTML = '<p><span style="color:#ff0000">1234</span></p>';
    454. 

  454. 	rng = editor.dom.createRng();
    455. 

  455. 	rng.setStart(editor.getBody(), 0);
    456. 

  456. 	rng.setEnd(editor.getBody(), 1);
    457. 

  457. 	editor.selection.setRng(rng);
    458. 

  458. 	editor.formatter.apply('format');
    459. 

  459. 	equals(getContent(), '<p><span style="color: #00ff00;"><span style="color: #ff0000;">1234</span></span></p>', 'Inline element not merged in exact mode');
    460. 

  460. });
    461. 

  461. 

  462. test('Inline element merged in exact mode', function() {
    463. 

  463. 	editor.formatter.register('format', {inline : 'span', styles : {color : '#ff0000'}, exact : true});
    464. 

  464. 	editor.getBody().innerHTML = '<p><span style="color:#ff0000">1234</span></p>';
    465. 

  465. 	rng = editor.dom.createRng();
    466. 

  466. 	rng.setStart(editor.getBody(), 0);
    467. 

  467. 	rng.setEnd(editor.getBody(), 1);
    468. 

  468. 	editor.selection.setRng(rng);
    469. 

  469. 	editor.formatter.apply('format');
    470. 

  470. 	equals(getContent(), '<p><span style="color: #ff0000;">1234</span></p>', 'Inline element merged in exact mode');
    471. 

  471. });
    472. 

  472. 

  473. test('Deep left branch', function() {
    474. 

  474. 	editor.formatter.register('format', {inline : 'b'});
    475. 

  475. 	editor.getBody().innerHTML = '<p><em><i><ins>1234</ins></i></em><em>text1</em><em>text2</em></p><p><em>5678</em></p><p>9012</p>';
    476. 

  476. 	rng = editor.dom.createRng();
    477. 

  477. 	rng.setStart(editor.dom.select('ins')[0].firstChild, 1);
    478. 

  478. 	rng.setEnd(editor.dom.select('p')[2].firstChild, 4);
    479. 

  479. 	editor.selection.setRng(rng);
    480. 

  480. 	editor.formatter.apply('format');
    481. 

  481. 	equals(getContent(), '<p><em><i><ins>1<b>234</b></ins></i></em><b><em>text1</em><em>text2</em></b></p><p><b><em>5678</em></b></p><p><b>9012</b></p>', 'Deep left branch');
    482. 

  482. });
    483. 

  483. 

  484. test('Deep right branch', function() {
    485. 

  485. 	editor.formatter.register('format', {inline : 'b'});
    486. 

  486. 	editor.getBody().innerHTML = '<p>9012</p><p><em>5678</em></p><p><em><i><ins>1234</ins></i></em><em>text1</em><em>text2</em></p>';
    487. 

  487. 	rng = editor.dom.createRng();
    488. 

  488. 	rng.setStart(editor.dom.select('p')[0].firstChild, 0);
    489. 

  489. 	rng.setEnd(editor.dom.select('em')[3].firstChild, 4);
    490. 

  490. 	editor.selection.setRng(rng);
    491. 

  491. 	editor.formatter.apply('format');
    492. 

  492. 	equals(getContent(), '<p><b>9012</b></p><p><b><em>5678</em></b></p><p><b><em><i><ins>1234</ins></i></em><em>text1</em></b><em><b>text</b>2</em></p>', 'Deep right branch');
    493. 

  493. });
    494. 

  494. 

  495. test('Full element text selection on two elements with a table in the middle', function() {
    496. 

  496. 	editor.formatter.register('format', {inline : 'b'});
    497. 

  497. 	editor.getBody().innerHTML = '<p>1234</p><table><tbody><tr><td>123</td></tr></tbody></table><p>5678</p>';
    498. 

  498. 	rng = editor.dom.createRng();
    499. 

  499. 	rng.setStart(editor.dom.select('p')[0].firstChild, 0);
    500. 

  500. 	rng.setEnd(editor.dom.select('p')[1].firstChild, 4);
    501. 

  501. 	editor.selection.setRng(rng);
    502. 

  502. 	editor.formatter.apply('format');
    503. 

  503. 	equals(getContent(), '<p><b>1234</b></p><table><tbody><tr><td><b>123</b></td></tr></tbody></table><p><b>5678</b></p>', 'Full element text selection on two elements with a table in the middle');
    504. 

  504. });
    505. 

  505. 

  506. test('Inline element on selected text with variables', function() {
    507. 

  507. 	editor.formatter.register('format', {inline : 'b', styles : {color : '%color'}, attributes : {title : '%title'}}, {color : '#ff0000', title : 'title'});
    508. 

  508. 	editor.getBody().innerHTML = '<p>1234</p>';
    509. 

  509. 	rng = editor.dom.createRng();
    510. 

  510. 	rng.setStart(editor.dom.select('p')[0].firstChild, 0);
    511. 

  511. 	rng.setEnd(editor.dom.select('p')[0].firstChild, 4);
    512. 

  512. 	editor.selection.setRng(rng);
    513. 

  513. 	editor.formatter.apply('format', {color : '#ff0000', title : 'title'});
    514. 

  514. 	equals(getContent(), '<p><b style="color: #ff0000;" title="title">1234</b></p>', 'Inline element on selected text');
    515. 

  515. });
    516. 

  516. 

  517. test('Remove redundant children', function() {
    518. 

  518. 	editor.formatter.register('format', {inline : 'span', styles : {fontFamily : 'arial'}});
    519. 

  519. 	editor.getBody().innerHTML = '<p><span style="font-family: sans-serif;"><span style="font-family: palatino;">1</span>2<span style="font-family: verdana;">3</span>4</span></p>';
    520. 

  520. 	rng = editor.dom.createRng();
    521. 

  521. 	rng.setStart(editor.dom.select('p')[0], 0);
    522. 

  522. 	rng.setEnd(editor.dom.select('p')[0], 1);
    523. 

  523. 	editor.selection.setRng(rng);
    524. 

  524. 	editor.formatter.apply('format');
    525. 

  525. 	equals(getContent(), '<p><span style=\"font-family: ' + fontFace('arial') + ';\">1234</span></p>', 'Remove redundant children');
    526. 

  526. });
    527. 

  527. 

  528. test('Inline element on selected text with function values', function() {
    529. 

  529. 	editor.formatter.register('format', {
    530. 

  530. 		inline : 'b',
    531. 

  531. 		styles : {
    532. 

  532. 			color : function(vars) {
    533. 

  533. 				return vars.color + '00ff';
    534. 

  534. 			}
    535. 

  535. 		},
    536. 

  536. 		attributes : {
    537. 

  537. 			title : function(vars) {
    538. 

  538. 				return vars.title + '2';
    539. 

  539. 			}
    540. 

  540. 		}
    541. 

  541. 	});
    542. 

  542. 	editor.getBody().innerHTML = '<p>1234</p>';
    543. 

  543. 	rng = editor.dom.createRng();
    544. 

  544. 	rng.setStart(editor.dom.select('p')[0].firstChild, 0);
    545. 

  545. 	rng.setEnd(editor.dom.select('p')[0].firstChild, 4);
    546. 

  546. 	editor.selection.setRng(rng);
    547. 

  547. 	editor.formatter.apply('format', {
    548. 

  548. 		color : '#ff',
    549. 

  549. 		title : 'title'
    550. 

  550. 	});
    551. 

  551. 	equals(getContent(), '<p><b style="color: #ff00ff;" title="title2">1234</b></p>', 'Inline element on selected text with function values');
    552. 

  552. });
    553. 

  553. 

  554. test('Block element on selected text', function() {
    555. 

  555. 	editor.formatter.register('format', {block : 'div'});
    556. 

  556. 	editor.getBody().innerHTML = '<p>1234</p>';
    557. 

  557. 	rng = editor.dom.createRng();
    558. 

  558. 	rng.setStart(editor.dom.select('p')[0].firstChild, 0);
    559. 

  559. 	rng.setEnd(editor.dom.select('p')[0].firstChild, 4);
    560. 

  560. 	editor.selection.setRng(rng);
    561. 

  561. 	editor.formatter.apply('format');
    562. 

  562. 	equals(getContent(), '<div>1234</div>', 'Block element on selected text');
    563. 

  563. });
    564. 

  564. 

  565. test('Block element on partially selected text', function() {
    566. 

  566. 	editor.formatter.register('format', {block : 'div'});
    567. 

  567. 	editor.getBody().innerHTML = '<p>1234</p>';
    568. 

  568. 	rng = editor.dom.createRng();
    569. 

  569. 	rng.setStart(editor.dom.select('p')[0].firstChild, 1);
    570. 

  570. 	rng.setEnd(editor.dom.select('p')[0].firstChild, 3);
    571. 

  571. 	editor.selection.setRng(rng);
    572. 

  572. 	editor.formatter.apply('format');
    573. 

  573. 	equals(getContent(), '<div>1234</div>', 'Block element on partially selected text');
    574. 

  574. });
    575. 

  575. 

  576. test('Block element on selected element', function() {
    577. 

  577. 	editor.formatter.register('format', {block : 'div'});
    578. 

  578. 	editor.getBody().innerHTML = '<p>1234</p>';
    579. 

  579. 	rng = editor.dom.createRng();
    580. 

  580. 	rng.setStart(editor.getBody(), 0);
    581. 

  581. 	rng.setEnd(editor.getBody(), 1);
    582. 

  582. 	editor.selection.setRng(rng);
    583. 

  583. 	editor.formatter.apply('format');
    584. 

  584. 	equals(getContent(), '<div>1234</div>', 'Block element on selected element');
    585. 

  585. });
    586. 

  586. 

  587. test('Block element on selected elements', function() {
    588. 

  588. 	editor.formatter.register('format', {block : 'div'});
    589. 

  589. 	editor.getBody().innerHTML = '<p>1234</p><p>5678</p>';
    590. 

  590. 	rng = editor.dom.createRng();
    591. 

  591. 	rng.setStart(editor.getBody(), 0);
    592. 

  592. 	rng.setEnd(editor.getBody(), 2);
    593. 

  593. 	editor.selection.setRng(rng);
    594. 

  594. 	editor.formatter.apply('format');
    595. 

  595. 	equals(getContent(), '<div>1234</div><div>5678</div>', 'Block element on selected elements');
    596. 

  596. });
    597. 

  597. 

  598. test('Block element on selected elements with attributes', function() {
    599. 

  599. 	editor.formatter.register('format', {block : 'div', attributes : {'title' : 'test'}});
    600. 

  600. 	editor.getBody().innerHTML = '<p>1234</p><p>5678</p>';
    601. 

  601. 	rng = editor.dom.createRng();
    602. 

  602. 	rng.setStart(editor.getBody(), 0);
    603. 

  603. 	rng.setEnd(editor.getBody(), 2);
    604. 

  604. 	editor.selection.setRng(rng);
    605. 

  605. 	editor.formatter.apply('format');
    606. 

  606. 	equals(getContent(), '<div title="test">1234</div><div title="test">5678</div>', 'Block element on selected elements with attributes');
    607. 

  607. });
    608. 

  608. 

  609. test('Block element on nested element', function() {
    610. 

  610. 	editor.formatter.register('format', {block : 'p'});
    611. 

  611. 	editor.getBody().innerHTML = '<div><h1>1234</h1></div>';
    612. 

  612. 	rng = editor.dom.createRng();
    613. 

  613. 	rng.setStart(editor.dom.select('h1')[0].firstChild, 0);
    614. 

  614. 	rng.setEnd(editor.dom.select('h1')[0].firstChild, 4);
    615. 

  615. 	editor.selection.setRng(rng);
    616. 

  616. 	editor.formatter.apply('format');
    617. 

  617. 	equals(getContent(), '<div><p>1234</p></div>', 'Block element on nested element');
    618. 

  618. });
    619. 

  619. 

  620. test('Block element on selected non wrapped text 1', function() {
    621. 

  621. 	editor.formatter.register('format', {block : 'div'});
    622. 

  622. 	editor.getBody().innerHTML = '1234';
    623. 

  623. 	rng = editor.dom.createRng();
    624. 

  624. 	rng.setStart(editor.getBody().firstChild, 0);
    625. 

  625. 	rng.setEnd(editor.getBody().firstChild, 4);
    626. 

  626. 	editor.selection.setRng(rng);
    627. 

  627. 	editor.formatter.apply('format');
    628. 

  628. 	equals(getContent(), '<div>1234</div>', 'Block element on selected non wrapped text 1');
    629. 

  629. });
    630. 

  630. 

  631. test('Block element on selected non wrapped text 2', function() {
    632. 

  632. 	editor.formatter.register('format', {block : 'div'});
    633. 

  633. 	editor.getBody().innerHTML = '1234<br />4567<br />8910';
    634. 

  634. 	rng = editor.dom.createRng();
    635. 

  635. 	rng.setStart(editor.getBody().firstChild, 0);
    636. 

  636. 	rng.setEnd(editor.getBody().lastChild, 4);
    637. 

  637. 	editor.selection.setRng(rng);
    638. 

  638. 	editor.formatter.apply('format');
    639. 

  639. 	equals(getContent(), '<div>1234</div><div>4567</div><div>8910</div>', 'Block element on selected non wrapped text 2');
    640. 

  640. });
    641. 

  641. 

  642. test('Block element on selected non wrapped text 3', function() {
    643. 

  643. 	editor.formatter.register('format', {block : 'div'});
    644. 

  644. 	editor.getBody().innerHTML = '<br />1234<br /><br />4567<br />8910<br />';
    645. 

  645. 	rng = editor.dom.createRng();
    646. 

  646. 	rng.setStart(editor.getBody(), 0);
    647. 

  647. 	rng.setEnd(editor.getBody(), 7);
    648. 

  648. 	editor.selection.setRng(rng);
    649. 

  649. 	editor.formatter.apply('format');
    650. 

  650. 	equals(getContent(), '<div>1234</div><div>4567</div><div>8910</div>', 'Block element on selected non wrapped text 3');
    651. 

  651. });
    652. 

  652. 

  653. test('Block element wrapper 1', function() {
    654. 

  654. 	editor.formatter.register('format', {block : 'blockquote', wrapper : 1});
    655. 

  655. 	editor.getBody().innerHTML = '<h1>1234</h1><p>5678</p>';
    656. 

  656. 	rng = editor.dom.createRng();
    657. 

  657. 	rng.setStart(editor.dom.select('h1')[0].firstChild, 0);
    658. 

  658. 	rng.setEnd(editor.dom.select('p')[0].firstChild, 4);
    659. 

  659. 	editor.selection.setRng(rng);
    660. 

  660. 	editor.formatter.apply('format');
    661. 

  661. 	equals(getContent(), '<blockquote><h1>1234</h1><p>5678</p></blockquote>', 'Block element wrapper 1');
    662. 

  662. });
    663. 

  663. 

  664. test('Block element wrapper 2', function() {
    665. 

  665. 	editor.formatter.register('format', {block : 'blockquote', wrapper : 1});
    666. 

  666. 	editor.getBody().innerHTML = '<h1>1234</h1>';
    667. 

  667. 	rng = editor.dom.createRng();
    668. 

  668. 	rng.setStart(editor.dom.select('h1')[0].firstChild, 0);
    669. 

  669. 	rng.setEnd(editor.dom.select('h1')[0].firstChild, 4);
    670. 

  670. 	editor.selection.setRng(rng);
    671. 

  671. 	editor.formatter.apply('format');
    672. 

  672. 	equals(getContent(), '<blockquote><h1>1234</h1></blockquote>', 'Block element wrapper 2');
    673. 

  673. });
    674. 

  674. 

  675. test('Block element wrapper 3', function() {
    676. 

  676. 	editor.formatter.register('format', {block : 'blockquote', wrapper : 1});
    677. 

  677. 	editor.getBody().innerHTML = '<br /><h1>1234</h1><br />';
    678. 

  678. 	rng = editor.dom.createRng();
    679. 

  679. 	rng.setStart(editor.getBody(), 0);
    680. 

  680. 	rng.setEnd(editor.getBody(), 3);
    681. 

  681. 	editor.selection.setRng(rng);
    682. 

  682. 	editor.formatter.apply('format');
    683. 

  683. 	equals(getContent(), '<blockquote><h1>1234</h1></blockquote>', 'Block element wrapper 3');
    684. 

  684. });
    685. 

  685. 

  686. test('Apply format on single element that matches a selector 1', function() {
    687. 

  687. 	editor.formatter.register('format', {selector : 'p', attributes : {title : 'test'}, styles : {'color' : '#ff0000'}, classes : 'a b c'});
    688. 

  688. 	editor.getBody().innerHTML = '<p>1234</p>';
    689. 

  689. 	rng = editor.dom.createRng();
    690. 

  690. 	rng.setStart(editor.dom.select('p')[0].firstChild, 0);
    691. 

  691. 	rng.setEnd(editor.dom.select('p')[0].firstChild, 4);
    692. 

  692. 	editor.selection.setRng(rng);
    693. 

  693. 	editor.formatter.apply('format');
    694. 

  694. 	equals(getContent(), '<p class="a b c" style="color: #ff0000;" title="test">1234</p>', 'Apply format on single element that matches a selector');
    695. 

  695. });
    696. 

  696. 

  697. test('Apply format on single element parent that matches a selector 2', function() {
    698. 

  698. 	editor.formatter.register('format', {selector : 'div', attributes : {title : 'test'}, styles : {'color' : '#ff0000'}, classes : 'a b c'});
    699. 

  699. 	editor.getBody().innerHTML = '<div><p>1234</p><p>test</p><p>1234</p></div>';
    700. 

  700. 	rng = editor.dom.createRng();
    701. 

  701. 	rng.setStart(editor.dom.select('div')[0], 1);
    702. 

  702. 	rng.setEnd(editor.dom.select('div')[0], 2);
    703. 

  703. 	editor.selection.setRng(rng);
    704. 

  704. 	editor.formatter.apply('format');
    705. 

  705. 	equals(getContent(), '<div class="a b c" style="color: #ff0000;" title="test"><p>1234</p><p>test</p><p>1234</p></div>', 'Apply format on single element parent that matches a selector');
    706. 

  706. });
    707. 

  707. 

  708. test('Apply format on multiple elements that matches a selector 2', function() {
    709. 

  709. 	editor.formatter.register('format', {selector : 'p', attributes : {title : 'test'}, styles : {'color' : '#ff0000'}, classes : 'a b c'});
    710. 

  710. 	editor.getBody().innerHTML = '<p>1234</p><div>test</div><p>1234</p>';
    711. 

  711. 	rng = editor.dom.createRng();
    712. 

  712. 	rng.setStart(editor.dom.select('p')[0].firstChild, 0);
    713. 

  713. 	rng.setEnd(editor.dom.select('p')[1].firstChild, 4);
    714. 

  714. 	editor.selection.setRng(rng);
    715. 

  715. 	editor.formatter.apply('format');
    716. 

  716. 	equals(getContent(), '<p class="a b c" style="color: #ff0000;" title="test">1234</p><div>test</div><p class="a b c" style="color: #ff0000;" title="test">1234</p>', 'Apply format on multiple elements that matches a selector');
    717. 

  717. });
    718. 

  718. 

  719. test('Apply format on top of existing selector element', function() {
    720. 

  720. 	editor.formatter.register('format', {selector : 'p', attributes : {title : 'test2'}, styles : {'color' : '#00ff00'}, classes : 'a b c'});
    721. 

  721. 	editor.getBody().innerHTML = '<p class=\"c d\" title=\"test\">1234</p>';
    722. 

  722. 	rng = editor.dom.createRng();
    723. 

  723. 	rng.setStart(editor.dom.select('p')[0].firstChild, 0);
    724. 

  724. 	rng.setEnd(editor.dom.select('p')[0].firstChild, 4);
    725. 

  725. 	editor.selection.setRng(rng);
    726. 

  726. 	editor.formatter.apply('format');
    727. 

  727. 	equals(getContent(), '<p class="c d a b" style="color: #00ff00;" title="test2">1234</p>', 'Apply format on top of existing selector element');
    728. 

  728. });
    729. 

  729. 

  730. test('Format on single li that matches a selector', function() {
    731. 

  731. 	editor.formatter.register('format', {inline : 'span', selector : 'li', attributes : {title : 'test'}, styles : {'color' : '#ff0000'}, classes : 'a b c'});
    732. 

  732. 	editor.getBody().innerHTML = '<div>text</div>';
    733. 

  733. 	rng = editor.dom.createRng();
    734. 

  734. 	rng.setStart(editor.dom.select('div')[0], 0);
    735. 

  735. 	rng.setEnd(editor.dom.select('div')[0], 1);
    736. 

  736. 	editor.selection.setRng(rng);
    737. 

  737. 	editor.formatter.apply('format');
    738. 

  738. 	equals(getContent(), '<div><span class="a b c" style="color: #ff0000;" title="test">text</span></div>', 'Apply format on single element that matches a selector');
    739. 

  739. });
    740. 

  740. 

  741. test('Format on single div that matches a selector', function() {
    742. 

  742. 	editor.formatter.register('format', {inline : 'span', selector : 'div', attributes : {title : 'test'}, styles : {'color' : '#ff0000'}, classes : 'a b c'});
    743. 

  743. 	editor.getBody().innerHTML = '<div>text</div>';
    744. 

  744. 	rng = editor.dom.createRng();
    745. 

  745. 	rng.setStart(editor.dom.select('div')[0], 0);
    746. 

  746. 	rng.setEnd(editor.dom.select('div')[0], 1);
    747. 

  747. 	editor.selection.setRng(rng);
    748. 

  748. 	editor.formatter.apply('format');
    749. 

  749. 	equals(getContent(), '<div class="a b c" style="color: #ff0000;" title="test">text</div>', 'Apply format on single element that matches a selector');
    750. 

  750. });
    751. 

  751. 

  752. test('Bold and italics is applied to text that is not highlighted', function() {
    753. 

  753. 	rng = editor.dom.createRng();
    754. 

  754. 	editor.setContent('<p><span style="font-family: Arial;"><strong>test1 test2</strong> test3 test4 test5 test6</span></p>');
    755. 

  755. 	rng.setStart(editor.dom.select('strong')[0].firstChild, 6);
    756. 

  756. 	rng.setEnd(editor.dom.select('strong')[0].firstChild, 11);
    757. 

  757. 	editor.focus();
    758. 

  758. 	editor.selection.setRng(rng);
    759. 

  759. 	editor.execCommand('Italic');
    760. 

  760. 	equals(editor.getContent(), '<p><span style="font-family: Arial;"><strong>test1 <em>test2</em></strong> test3 test4 test5 test6</span></p>', 'Selected text should be bold.');
    761. 

  761. });
    762. 

  762. 

  763. test('No wrapping of links', function() {
    764. 

  764. 	editor.setContent('<p>123<a href="#">abc</a>456</p>');
    765. 

  765. 	rng = editor.dom.createRng();
    766. 

  766. 	rng.setStart(editor.dom.select('p')[0].firstChild, 0);
    767. 

  767. 	rng.setEnd(editor.dom.select('p')[0].lastChild, 3);
    768. 

  768. 	editor.selection.setRng(rng);
    769. 

  769. 

  770. 	editor.formatter.register('format', {inline : 'span', styles : {color : '#FF0000'}, wrap_links : false});
    771. 

  771. 	editor.formatter.apply('format');
    772. 

  772. 

  773. 	equals(editor.getContent(), '<p><span style="color: #ff0000;">123<a href="#"><span style="color: #ff0000;">abc</span></a>456</span></p>', 'Link should have it\'s own span.');
    774. 

  774. });
    775. 

  775. 

  776. test('Color on link element', function() {
    777. 

  777. 	editor.setContent('<p><span style="font-size: 10px;">123<a href="#">abc</a>456</span></p>');
    778. 

  778. 	rng = editor.dom.createRng();
    779. 

  779. 	rng.setStart(editor.dom.select('span')[0].firstChild, 0);
    780. 

  780. 	rng.setEnd(editor.dom.select('span')[0].lastChild, 3);
    781. 

  781. 	editor.selection.setRng(rng);
    782. 

  782. 

  783. 	editor.formatter.register('format', {inline : 'span', styles : {color : '#FF0000'}, wrap_links : false});
    784. 

  784. 	editor.formatter.apply('format');
    785. 

  785. 

  786. 	equals(editor.getContent(), '<p><span style="color: #ff0000; font-size: 10px;">123<a href="#"><span style="color: #ff0000;">abc</span></a>456</span></p>', 'Link should have it\'s own span.');
    787. 

  787. });
    788. 

  788. 

  789. test("Applying formats in lists", function(){
    790. 

  790. 	editor.setContent('<ul><li>text<ul><li>nested</li></ul></li></ul>');
    791. 

  791. 	rng = editor.dom.createRng();
    792. 

  792. 	rng.setStart(editor.dom.select('li')[0].firstChild, 0);
    793. 

  793. 	rng.setEnd(editor.dom.select('li')[0].firstChild, 1);
    794. 

  794. 	editor.selection.setRng(rng);
    795. 

  795. 	editor.formatter.apply("h1");
    796. 

  796. 	equals(editor.getContent(), '<ul><li><h1>text</h1><ul><li>nested</li></ul></li></ul>', "heading should not automatically apply to sublists");
    797. 

  797. });
    798. 

  798. 

  799. test('Block format on li element', function() {
    800. 

  800. 	editor.setContent('<ul><li>text<ul><li>nested</li></ul></li></ul>');
    801. 

  801. 	rng = editor.dom.createRng();
    802. 

  802. 	rng.setStart(editor.dom.select('li')[0].firstChild, 0);
    803. 

  803. 	rng.setEnd(editor.dom.select('li')[1].firstChild, 1);
    804. 

  804. 	editor.selection.setRng(rng);
    805. 

  805. 	editor.formatter.apply("h1");
    806. 

  806. 	equals(editor.getContent(), '<ul><li><h1>text</h1><ul><li><h1>nested</h1></li></ul></li></ul>', "heading should automatically apply to sublists, when selection spans the sublist");
    807. 

  807. });
    808. 

  808. 

  809. test('Block on li element 2', function() {
    810. 

  810. 	editor.setContent('<ul><li>before<ul><li>nested</li></ul>after</li></ul>');
    811. 

  811. 	rng = editor.dom.createRng();
    812. 

  812. 	rng.setStart(editor.dom.select('li')[0].lastChild, 1);
    813. 

  813. 	rng.setEnd(editor.dom.select('li')[0].lastChild, 2);
    814. 

  814. 	editor.selection.setRng(rng);
    815. 

  815. 	editor.formatter.apply("h1");
    816. 

  816. 	equals(editor.getContent(), '<ul><li>before<ul><li>nested</li></ul><h1>after</h1></li></ul>', "heading should automatically apply to sublists, when selection spans the sublist");
    817. 

  817. });
    818. 

  818. 

  819. test('Block on li element 3', function() {
    820. 

  820. 	editor.setContent('<ul><li>before<ul><li>nested</li></ul>after</li></ul>');
    821. 

  821. 	rng = editor.dom.createRng();
    822. 

  822. 	rng.setStart(editor.dom.select('li')[1].firstChild, 0);
    823. 

  823. 	rng.setEnd(editor.dom.select('li')[0].lastChild, 1);
    824. 

  824. 	editor.selection.setRng(rng);
    825. 

  825. 	editor.formatter.apply("h1");
    826. 

  826. 	equals(editor.getContent(), '<ul><li>before<ul><li><h1>nested</h1></li></ul><h1>after</h1></li></ul>', "heading should automatically apply to sublists, when selection spans the sublist");
    827. 

  827. });
    828. 

  828. 

  829. test('Block on li element 4', function() {
    830. 

  830. 	editor.setContent('<ul><li>before<ul><li>nested</li></ul>after</li></ul>');
    831. 

  831. 	rng = editor.dom.createRng();
    832. 

  832. 	rng.setStart(editor.dom.select('li')[0].firstChild, 0);
    833. 

  833. 	rng.setEnd(editor.dom.select('li')[0].lastChild, 1);
    834. 

  834. 	editor.selection.setRng(rng);
    835. 

  835. 	editor.formatter.apply("h1");
    836. 

  836. 	equals(editor.getContent(), '<ul><li><h1>before</h1><ul><li><h1>nested</h1></li></ul><h1>after</h1></li></ul>', "heading should apply correctly when selection is after a sublist");
    837. 

  837. });
    838. 

  838. 

  839. test('Underline colors 1', function() {
    840. 

  840. 	editor.formatter.register('format', {inline: 'span', styles : {'color' : '#ff0000'}});
    841. 

  841. 	editor.setContent('<p><span style="font-family: \'arial black\'; text-decoration: underline;">test</span></p>');
    842. 

  842. 	editor.execCommand('SelectAll');
    843. 

  843. 	editor.formatter.apply('format');
    844. 

  844. 	equals(editor.getContent(), '<p><span style="color: #ff0000; font-family: \'arial black\'; text-decoration: underline;">test</span></p>', 'Coloring an underlined text should result in a colored underline');
    845. 

  845. });
    846. 

  846. 

  847. test('Underline colors 2', function() {
    848. 

  848. 	editor.formatter.register('format', {inline: "span", exact: true, styles: {'textDecoration' : 'underline'}});
    849. 

  849. 	editor.setContent('<p><span style="font-family: \'arial black\'; color: rgb(255, 0, 0);">test</span></p>');
    850. 

  850. 	editor.execCommand('SelectAll');
    851. 

  851. 	editor.formatter.apply('format');
    852. 

  852. 	equals(editor.getContent(), '<p><span style="text-decoration: underline;"><span style="color: #ff0000; font-family: \'arial black\'; text-decoration: underline;">test</span></span></p>', 'Underlining colored text should result in a colored underline');
    853. 

  853. });
    854. 

  854. 

  855. test('Underline colors 3', function() {
    856. 

  856. 	editor.formatter.register('format', {inline: "span", exact: true, styles: {'textDecoration' : 'underline'}});
    857. 

  857. 	editor.setContent('<p><span style="font-family: \'arial black\'; text-decoration: underline;"><em><strong>This is some <span style="color: rgb(255, 0, 0);">example</span></strong></em> text</span></p>');
    858. 

  858. 	editor.execCommand('SelectAll');
    859. 

  859. 	editor.formatter.apply('format');
    860. 

  860. 	equals(editor.getContent(), '<p><span style="text-decoration: underline;"><span style="font-family: \'arial black\';"><em><strong>This is some <span style="color: #ff0000; text-decoration: underline;">example</span></strong></em> text</span></span></p>', 'Underlining colored and underlined text should result in a colored underline');
    861. 

  861. });
    862. 

  862. 

  863. test('Underline colors 4', function() {
    864. 

  864. 	editor.formatter.register('format', {inline: 'span', styles : {'color' : '#ff0000'}});
    865. 

  865. 	editor.setContent('<p style="font-size: 22pt;"><span style=\"text-decoration: underline;\"><span style=\"color: yellow; text-decoration: underline;\">yellowredyellow</span></span></p>');
    866. 

  866. 	rng = editor.dom.createRng();
    867. 

  867. 	rng.setStart(editor.dom.select('span')[1].firstChild, 6);
    868. 

  868. 	rng.setEnd(editor.dom.select('span')[1].firstChild, 9);
    869. 

  869. 	editor.selection.setRng(rng);
    870. 

  870. 	editor.formatter.apply('format');
    871. 

  871. 	equals(getContent(), '<p style="font-size: 22pt;"><span style="text-decoration: underline;"><span style="color: yellow; text-decoration: underline;">yellow<span style="color: #ff0000; text-decoration: underline;">red</span>yellow</span></span></p>', 'Coloring an colored underdlined text should result in newly colored underline');
    872. 

  872. });
    873. 

  873. 

  874. test('Underline colors 5', function() {
    875. 

  875. 	editor.formatter.register('format', {inline: "span", exact: true, styles: {'textDecoration' : 'underline'}});
    876. 

  876. 	editor.setContent('<p><span style="font-family: \'arial black\',\'avant garde\';"><em><strong>This is some <span style="color: rgb(255, 0, 0);">example</span></strong></em> text</span></p><p><span style="font-family: \'arial black\',\'avant garde\';"><em><strong>This is some <span style="color: rgb(255, 0, 0);">example</span></strong></em> text</span></p><p><span style="font-family: \'arial black\', \'avant garde\';"><em><strong>This is some <span style="color: rgb(255, 0, 0);">example</span></strong></em> text</span></p>');
    877. 

  877. 	rng = editor.dom.createRng();
    878. 

  878. 	rng.setStart(editor.dom.select('strong')[0].firstChild, 0);
    879. 

  879. 	rng.setEnd(editor.dom.select('span')[4].lastChild, 5);
    880. 

  880. 	editor.selection.setRng(rng);
    881. 

  881. 	editor.formatter.apply('format');
    882. 

  882. 	equals(editor.getContent(), '<p><span style="text-decoration: underline;"><span style="font-family: \'arial black\',\'avant garde\';"><em><strong>This is some <span style="color: #ff0000; text-decoration: underline;">example</span></strong></em> text</span></span></p><p><span style="text-decoration: underline;"><span style="font-family: \'arial black\',\'avant garde\';"><em><strong>This is some <span style="color: #ff0000; text-decoration: underline;">example</span></strong></em> text</span></span></p><p><span style="text-decoration: underline;"><span style="font-family: \'arial black\', \'avant garde\';"><em><strong>This is some <span style="color: #ff0000; text-decoration: underline;">example</span></strong></em> text</span></span></p>', 'Colored elements should be underlined when selection is across multiple paragraphs');
    883. 

  883. });
    884. 

  884. 

  885. test('Underline colors 6', function() {
    886. 

  886. 	editor.formatter.register('format', {inline: 'span', exact: true, styles : {'color' : '#ff0000'}});
    887. 

  887. 	editor.setContent('<p><span style="text-decoration: underline;">This is some text.</span></p>');
    888. 

  888. 	rng = editor.dom.createRng();
    889. 

  889. 	rng.setStart(editor.dom.select('span')[0].firstChild, 8);
    890. 

  890. 	rng.setEnd(editor.dom.select('span')[0].firstChild, 12);
    891. 

  891. 	editor.selection.setRng(rng);
    892. 

  892. 	editor.formatter.apply('format');
    893. 

  893. 	editor.formatter.remove('format');
    894. 

  894. 	equals(editor.getContent(), '<p><span style="text-decoration: underline;">This is some text.</span></p>', 'Children nodes that are underlined should be removed if their parent nodes are underlined');
    895. 

  895. });
    896. 

  896. 

  897. test('Underline colors 7', function() {
    898. 

  898. 	editor.formatter.register('format', {inline: 'span', exact: true, styles : {'color' : '#ff0000'}});
    899. 

  899. 	editor.setContent('<p><span style="text-decoration: underline;">This is <span style="color: #ff0000; text-decoration: underline; background-color: #ff0000">some</span> text.</span></p>');
    900. 

  900. 	rng = editor.dom.createRng();
    901. 

  901. 	rng.setStart(editor.dom.select('span')[1].firstChild, 0);
    902. 

  902. 	rng.setEnd(editor.dom.select('span')[1].firstChild, 4);
    903. 

  903. 	editor.selection.setRng(rng);
    904. 

  904. 	editor.formatter.remove('format');
    905. 

  905. 	equals(editor.getContent(), '<p><span style=\"text-decoration: underline;\">This is <span style=\"background-color: #ff0000;\">some</span> text.</span></p>', 'Children nodes that are underlined should be removed if their parent nodes are underlined');
    906. 

  906. });
    907. 

  907. 

  908. test('Caret format inside single block word', function() {
    909. 

  909. 	editor.setContent('<p>abc</p>');
    910. 

  910. 	editor.formatter.register('format', {inline: 'b'});
    911. 

  911. 	setSelection('p', 2, 'p', 2);
    912. 

  912. 	editor.formatter.apply('format');
    913. 

  913. 	equals(editor.getContent(), '<p><b>abc</b></p>');
    914. 

  914. });
    915. 

  915. 

  916. test('Caret format inside first block word', function() {
    917. 

  917. 	editor.setContent('<p>abc 123</p>');
    918. 

  918. 	editor.formatter.register('format', {inline: 'b'});
    919. 

  919. 	setSelection('p', 2, 'p', 2);
    920. 

  920. 	editor.formatter.apply('format');
    921. 

  921. 	equals(editor.getContent(), '<p><b>abc</b> 123</p>');
    922. 

  922. });
    923. 

  923. 

  924. test('Caret format inside last block word', function() {
    925. 

  925. 	editor.setContent('<p>abc 123</p>');
    926. 

  926. 	editor.formatter.register('format', {inline: 'b'});
    927. 

  927. 	setSelection('p', 5, 'p', 5);
    928. 

  928. 	editor.formatter.apply('format');
    929. 

  929. 	equals(editor.getContent(), '<p>abc <b>123</b></p>');
    930. 

  930. });
    931. 

  931. 

  932. test('Caret format inside middle block word', function() {
    933. 

  933. 	editor.setContent('<p>abc 123 456</p>');
    934. 

  934. 	editor.formatter.register('format', {inline: 'b'});
    935. 

  935. 	setSelection('p', 5, 'p', 5);
    936. 

  936. 	editor.formatter.apply('format');
    937. 

  937. 	equals(editor.getContent(), '<p>abc <b>123</b> 456</p>');
    938. 

  938. });
    939. 

  939. 

  940. test('Caret format on word separated by non breaking space', function() {
    941. 

  941. 	editor.setContent('<p>one&nbsp;two</p>');
    942. 

  942. 	editor.formatter.register('format', {inline: 'b'});
    943. 

  943. 	setSelection('p', 1, 'p', 1);
    944. 

  944. 	editor.formatter.apply('format');
    945. 

  945. 	equals(editor.getContent(), '<p><b>one</b>\u00a0two</p>');
    946. 

  946. });
    947. 

  947. 

  948. test('Caret format inside single inline wrapped word', function() {
    949. 

  949. 	editor.setContent('<p>abc <em>123</em> 456</p>');
    950. 

  950. 	editor.formatter.register('format', {inline: 'b'});
    951. 

  951. 	setSelection('em', 1, 'em', 1);
    952. 

  952. 	editor.formatter.apply('format');
    953. 

  953. 	equals(editor.getContent(), '<p>abc <b><em>123</em></b> 456</p>');
    954. 

  954. });
    955. 

  955. 

  956. test('Caret format inside last inline wrapped word', function() {
    957. 

  957. 	editor.setContent('<p>abc <em>abc 123</em> 456</p>');
    958. 

  958. 	editor.formatter.register('format', {inline: 'b'});
    959. 

  959. 	setSelection('em', 5, 'em', 5);
    960. 

  960. 	editor.formatter.apply('format');
    961. 

  961. 	equals(editor.getContent(), '<p>abc <em>abc <b>123</b></em> 456</p>');
    962. 

  962. });
    963. 

  963. 

  964. test('Caret format before text', function() {
    965. 

  965. 	editor.setContent('<p>a</p>');
    966. 

  966. 	editor.formatter.register('format', {inline: 'b'});
    967. 

  967. 	setSelection('p', 0, 'p', 0);
    968. 

  968. 	editor.formatter.apply('format');
    969. 

  969. 	type('b');
    970. 

  970. 	equals(editor.getContent(), '<p><b>b</b>a</p>');
    971. 

  971. });
    972. 

  972. 

  973. test('Caret format after text', function() {
    974. 

  974. 	editor.setContent('<p>a</p>');
    975. 

  975. 	editor.formatter.register('format', {inline: 'b'});
    976. 

  976. 	setSelection('p', 1, 'p', 1);
    977. 

  977. 	editor.formatter.apply('format');
    978. 

  978. 	type('b');
    979. 

  979. 	equals(editor.getContent(), '<p>a<b>b</b></p>');
    980. 

  980. });
    981. 

  981. 

  982. test('Caret format and no key press', function() {
    983. 

  983. 	editor.setContent('<p>a</p>');
    984. 

  984. 	editor.formatter.register('format', {inline: 'b'});
    985. 

  985. 	setSelection('p', 0, 'p', 0);
    986. 

  986. 	editor.formatter.apply('format');
    987. 

  987. 	equals(editor.getContent(), '<p>a</p>');
    988. 

  988. });
    989. 

  989. 

  990. test('Caret format and arrow left', function() {
    991. 

  991. 	editor.setContent('<p>a</p>');
    992. 

  992. 	editor.formatter.register('format', {inline: 'b'});
    993. 

  993. 	setSelection('p', 0, 'p', 0);
    994. 

  994. 	editor.formatter.apply('format');
    995. 

  995. 	type({keyCode: 37});
    996. 

  996. 	equals(editor.getContent(), '<p>a</p>');
    997. 

  997. });
    998. 

  998. 

  999. test('Caret format and arrow right', function() {
    1000. 

  1000. 	editor.setContent('<p>a</p>');
    1001. 

  1001. 	editor.formatter.register('format', {inline: 'b'});
    1002. 

  1002. 	setSelection('p', 0, 'p', 0);
    1003. 

  1003. 	editor.formatter.apply('format');
    1004. 

  1004. 	type({keyCode: 39});
    1005. 

  1005. 	equals(editor.getContent(), '<p>a</p>');
    1006. 

  1006. });
    1007. 

  1007. 

  1008. test('Caret format and backspace', function() {
    1009. 

  1009. 	var rng;
    1010. 

  1010. 

  1011. 	if (tinymce.isOpera) {
    1012. 

  1012. 		ok(true, "Skip Opera since faking backspace doesn't work.");
    1013. 

  1013. 		return;
    1014. 

  1014. 	}
    1015. 

  1015. 

  1016. 	editor.formatter.register('format', {inline: 'b'});
    1017. 

  1017. 

  1018. 	editor.setContent('<p>abc</p>');
    1019. 

  1019. 	rng = editor.dom.createRng();
    1020. 

  1020. 	rng.setStart(editor.dom.select('p')[0].firstChild, 3);
    1021. 

  1021. 	rng.setEnd(editor.dom.select('p')[0].firstChild, 3);
    1022. 

  1022. 	editor.selection.setRng(rng);
    1023. 

  1023. 

  1024. 	editor.formatter.apply('format');
    1025. 

  1025. 	type('\b');
    1026. 

  1026. 	equals(editor.getContent(), '<p>ab</p>');
    1027. 

  1027. });
    1028. 

  1028. 

  1029. test('Caret format on word in li with word in parent li before it', function() {
    1030. 

  1030. 	editor.setContent('<ul><li>one<ul><li>two</li></ul></li></ul>');
    1031. 

  1031. 	editor.formatter.register('format', {inline: 'b'});
    1032. 

  1032. 	setSelection('ul li li', 1, 'ul li li', 1);
    1033. 

  1033. 	editor.formatter.apply('format');
    1034. 

  1034. 	equals(editor.getContent(), '<ul><li>one<ul><li><b>two</b></li></ul></li></ul>');
    1035. 

  1035. });
    1036. 

  1036. 

  1037. /*
    1038. 

  1038. test('apply (list block)', function() {
    1039. 

  1039. 	var rng;
    1040. 

    1041. 

  1041. 	// Ordered list on selected paragraph text
    1042. 

  1042. 	editor.getBody().innerHTML = '<p>1234</p>';
    1043. 

  1043. 	rng = editor.dom.createRng();
    1044. 

  1044. 	rng.setStart(editor.dom.select('p')[0].firstChild, 0);
    1045. 

  1045. 	rng.setEnd(editor.dom.select('p')[0].firstChild, 4);
    1046. 

  1046. 	editor.selection.setRng(rng);
    1047. 

  1047. 	editor.formatter.apply({list_block : 'ol', replace : 'ul', list_item : 'li'});
    1048. 

  1048. 	equals(getContent(), '<ol><li>1234</li></ol>', 'Ordered list on paragraph text');
    1049. 

    1050. 

  1050. 	// Ordered list on the text of two selected paragraphs
    1051. 

  1051. 	editor.getBody().innerHTML = '<p>1234</p><p>5678</p>';
    1052. 

  1052. 	rng = editor.dom.createRng();
    1053. 

  1053. 	rng.setStart(editor.dom.select('p')[0].firstChild, 0);
    1054. 

  1054. 	r
    1055.