customstyle.js 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451
  1. /**
  2. *
  3. */
  4. module( 'plugins.customstyle' );
  5. test( 'block的元素(p)', function () {
  6. var editor = te.obj[0];
  7. editor.setContent('<p>hello</p>');
  8. setTimeout(function () {
  9. var range = editor.selection.getRange();
  10. range.selectNode(editor.body.firstChild).select();//非闭合选区
  11. editor.execCommand('customstyle', {
  12. style:'border:1px solid #ccc',
  13. label:'aaa',
  14. tag:'h3'
  15. });
  16. ua.manualDeleteFillData(editor.body);
  17. equal(editor.body.firstChild.getAttribute('label'), 'aaa', '检查标签');
  18. range.selectNode(editor.body.firstChild).select();
  19. equal(editor.queryCommandValue('customstyle'), 'aaa', 'queryCommandValue');
  20. equal(editor.queryCommandState('customstyle'), '0', 'queryCommandState');
  21. var hStyle = $(editor.body.firstChild);
  22. ok(editor.body.firstChild.style.borderWidth == '1px', '检查边框宽');
  23. ok(hStyle.css('border-top-style') == 'solid' && hStyle.css('border-bottom-style') == 'solid' && hStyle.css('border-left-style') == 'solid' && hStyle.css('border-right-style') == 'solid', '检查边框风格');
  24. if (ua.browser.ie && ua.browser.ie < 9)
  25. ok(hStyle.css('border-top-color') == '#ccc' && hStyle.css('border-bottom-color') == '#ccc' && hStyle.css('border-left-color') == '#ccc' && hStyle.css('border-right-color') == '#ccc', '检查边框颜色');
  26. else
  27. ok(hStyle.css('border-top-color') == 'rgb(204, 204, 204)' && hStyle.css('border-bottom-color') == 'rgb(204, 204, 204)' && hStyle.css('border-left-color') == 'rgb(204, 204, 204)' && hStyle.css('border-right-color') == 'rgb(204, 204, 204)', '检查边框颜色');
  28. range.setStart(editor.body.firstChild, 0).collapse(true).select();//闭合选区
  29. editor.execCommand('customstyle', {
  30. style:'border:1px solid #ccc',
  31. label:'aaa',
  32. tag:'h3'
  33. });
  34. ua.manualDeleteFillData(editor.body);
  35. range.selectNode(editor.body.firstChild).select();
  36. equal(editor.queryCommandValue('customstyle'), '');
  37. equal(editor.queryCommandState('customstyle'), '0', 'queryCommandState');
  38. /*trace 1732*/
  39. var p = editor.body.firstChild;
  40. equal(p.tagName.toLowerCase(), 'p', '闭合去掉h3标签');
  41. equal(p.innerHTML, 'hello', '检查innerHTML');
  42. editor.setContent('<h3 style="border: 1px solid rgb(204, 204, 204); " label="aaa">hello</h3><p><br></p>');
  43. range.selectNode(editor.body.firstChild).select();
  44. editor.execCommand('customstyle', {
  45. style:'border:1px solid #ccc',
  46. label:'aaa',
  47. tag:'h3'
  48. });
  49. var p = editor.body.firstChild;
  50. equal(p.tagName.toLowerCase(), 'p', '非闭合去掉h3标签');
  51. start();
  52. }, 50);
  53. stop();
  54. } );
  55. test( 'block的元素(div)', function () {
  56. var editor = te.obj[0];
  57. editor.setContent( '<div>hello</div>' );
  58. setTimeout(function(){
  59. var range = editor.selection.getRange();
  60. range.selectNode( editor.body.firstChild ).select();//非闭合选区
  61. editor.execCommand( 'customstyle', {
  62. style:'border:1px solid #ccc',
  63. label:'aaa',
  64. tag:'h3'
  65. } );
  66. ua.manualDeleteFillData( editor.body );
  67. equal( editor.body.firstChild.getAttribute( 'label' ), 'aaa', '检查标签' );
  68. var hStyle = $( editor.body.firstChild );
  69. ok( editor.body.firstChild.style.borderWidth=='1px', '检查边框宽' );
  70. ok( hStyle.css( 'border-top-style' ) == 'solid' && hStyle.css( 'border-bottom-style' ) == 'solid' && hStyle.css( 'border-left-style' ) == 'solid' && hStyle.css( 'border-right-style' ) == 'solid', '检查边框风格' );
  71. if ( ua.browser.ie&&ua.browser.ie<9 )
  72. ok( hStyle.css( 'border-top-color' ) == '#ccc' && hStyle.css( 'border-bottom-color' ) == '#ccc' && hStyle.css( 'border-left-color' ) == '#ccc' && hStyle.css( 'border-right-color' ) == '#ccc', '检查边框颜色' );
  73. else
  74. ok( hStyle.css( 'border-top-color' ) == 'rgb(204, 204, 204)' && hStyle.css( 'border-bottom-color' ) == 'rgb(204, 204, 204)' && hStyle.css( 'border-left-color' ) == 'rgb(204, 204, 204)' && hStyle.css( 'border-right-color' ) == 'rgb(204, 204, 204)', '检查边框颜色' );
  75. range.setStart(editor.body.firstChild,0).collapse(true).select();//闭合选区
  76. editor.execCommand( 'customstyle', {
  77. style:'border:1px solid #ccc',
  78. label:'aaa',
  79. tag:'h3'
  80. } );
  81. ua.manualDeleteFillData( editor.body );
  82. /*trace 1732*/
  83. var p = editor.body.firstChild;
  84. equal( p.tagName.toLowerCase(), 'p', 'h3被去掉了' );
  85. equal( p.innerHTML, 'hello', '检查innerHTML' );
  86. start();
  87. },50);
  88. stop();
  89. } );
  90. test( 'inline的元素(a)', function () {
  91. var editor = te.obj[0];
  92. editor.setContent( '<a href="http://www.baidu.com">hello</a>' );
  93. var range = editor.selection.getRange();
  94. range.selectNode( editor.body.firstChild ).select();//非闭合选区
  95. editor.execCommand( 'customstyle', {
  96. style:'border:1px solid #ccc',
  97. label:'aaa',
  98. tag:'h3'
  99. } );
  100. range.selectNode( editor.body.firstChild ).select();
  101. equal(editor.queryCommandValue('customstyle'),'aaa','queryCommandValue');
  102. equal(editor.queryCommandState('customstyle'),'0','queryCommandState');
  103. ua.manualDeleteFillData( editor.body );
  104. equal( editor.body.firstChild.getAttribute( 'label' ), 'aaa', '检查标签' );
  105. var hStyle = $( editor.body.firstChild );
  106. ok( editor.body.firstChild.style.borderWidth=='1px', '检查边框宽' );
  107. ok( hStyle.css( 'border-top-style' ) == 'solid' && hStyle.css( 'border-bottom-style' ) == 'solid' && hStyle.css( 'border-left-style' ) == 'solid' && hStyle.css( 'border-right-style' ) == 'solid', '检查边框风格' );
  108. if (ua.browser.ie&&ua.browser.ie<9 )
  109. ok( hStyle.css( 'border-top-color' ) == '#ccc' && hStyle.css( 'border-bottom-color' ) == '#ccc' && hStyle.css( 'border-left-color' ) == '#ccc' && hStyle.css( 'border-right-color' ) == '#ccc', '检查边框颜色' );
  110. else
  111. ok( hStyle.css( 'border-top-color' ) == 'rgb(204, 204, 204)' && hStyle.css( 'border-bottom-color' ) == 'rgb(204, 204, 204)' && hStyle.css( 'border-left-color' ) == 'rgb(204, 204, 204)' && hStyle.css( 'border-right-color' ) == 'rgb(204, 204, 204)', '检查边框颜色' );
  112. range.setStart(editor.body.firstChild,0).collapse(true).select();//闭合选区
  113. editor.execCommand( 'customstyle', {
  114. style:'border:1px solid #ccc',
  115. label:'aaa',
  116. tag:'h3'
  117. } );
  118. ua.manualDeleteFillData( editor.body );
  119. /*trace 1732*/
  120. var a = editor.body.getElementsByTagName('a')[0];
  121. equal( a.tagName.toLowerCase(), 'a', 'h3被去掉了' );
  122. equal( a.innerHTML, 'hello', '检查innerHTML' );
  123. range.selectNode( editor.body.firstChild ).select();
  124. equal(editor.queryCommandValue('customstyle'),'','queryCommandValue');
  125. equal(editor.queryCommandState('customstyle'),'0','queryCommandState');
  126. } );
  127. //h 与span标签作为选区的情况,在下的用例中自然使用到
  128. test( 'block的元素-样式的反复转换:块-块;包含的选取方式:整段、部分、多段', function () {
  129. var editor = te.obj[0];
  130. editor.setContent( '<p>hello</p><p>world</p>' );
  131. var range = editor.selection.getRange();
  132. range.setStart(editor.body.firstChild.firstChild,0).setEnd(editor.body.firstChild.firstChild,2).select();//非闭合选区,部分
  133. editor.execCommand( 'customstyle', {
  134. style:'border-bottom:#ccc 2px solid;padding:0 4px 0 0;text-align:center;margin:0 0 20px 0;',
  135. label:'居中标题',
  136. tag:'h1'
  137. } );
  138. ua.manualDeleteFillData( editor.body );
  139. equal( editor.body.getElementsByTagName('h1')[0].getAttribute( 'label' ), '居中标题', '非闭合选区,部分选择,设置块元素的样式:居中标题' );
  140. var hStyle = $( editor.body.getElementsByTagName('h1')[0]);
  141. ok( editor.body.getElementsByTagName('h1')[0].style.borderBottomWidth == '2px' , '检查边框宽' );
  142. ok( hStyle.css( 'border-bottom-style' ) == 'solid' , '检查边框风格' );
  143. ok( hStyle.css( 'padding-bottom' ) == '0px'&&hStyle.css( 'padding-top' ) == '0px'&&hStyle.css( 'padding-left' ) == '0px'&&hStyle.css( 'padding-right' ) == '4px' , '检查padding' );
  144. ok( hStyle.css( 'margin-bottom' ) == '20px'&&hStyle.css( 'margin-top' ) == '0px'&&hStyle.css( 'margin-left' ) == '0px'&&hStyle.css( 'margin-right' ) == '0px' , '检查margin' );
  145. ok( hStyle.css( 'text-align' ) == 'center' , '检查对齐方式' );
  146. if ( ua.browser.ie&&ua.browser.ie<9 )
  147. ok( hStyle.css( 'border-bottom-color' ) == '#ccc' , '检查边框颜色' );
  148. else
  149. ok( hStyle.css( 'border-bottom-color' ) == 'rgb(204, 204, 204)' , '检查边框颜色' );
  150. range.setStart(editor.body.getElementsByTagName('h1')[0],0).collapse(true).select();//闭合选区
  151. editor.execCommand( 'customstyle', {
  152. tag:'h1',
  153. label:'居左标题',
  154. style:'border-bottom:#ccc 2px solid;padding:0 4px 0 0;margin:0 0 10px 0;'
  155. } );
  156. ua.manualDeleteFillData( editor.body );
  157. equal( editor.body.getElementsByTagName('h1')[0].getAttribute( 'label' ), '居左标题', '闭合选区设置块元素的样式:居左标题' );
  158. var hStyle = $(editor.body.getElementsByTagName('h1')[0]);
  159. ok( editor.body.getElementsByTagName('h1')[0].style.borderBottomWidth == '2px' , '检查边框宽' );
  160. ok( hStyle.css( 'border-bottom-style' ) == 'solid' , '检查边框风格' );
  161. ok( hStyle.css( 'padding-bottom' ) == '0px'&&hStyle.css( 'padding-top' ) == '0px'&&hStyle.css( 'padding-left' ) == '0px'&&hStyle.css( 'padding-right' ) == '4px' , '检查padding' );
  162. ok( hStyle.css( 'margin-bottom' ) == '10px'&&hStyle.css( 'margin-top' ) == '0px'&&hStyle.css( 'margin-left' ) == '0px'&&hStyle.css( 'margin-right' ) == '0px' , '检查margin' );
  163. ok( hStyle.css( 'text-align' ) != 'center' , '检查对齐方式' );
  164. if (ua.browser.ie&&ua.browser.ie<9 )
  165. ok( hStyle.css( 'border-bottom-color' ) == '#ccc' , '检查边框颜色' );
  166. else
  167. ok( hStyle.css( 'border-bottom-color' ) == 'rgb(204, 204, 204)' , '检查边框颜色' );
  168. range.setStart(editor.body.firstChild,0).setEnd(editor.body.lastChild,1).select();//非闭合选区,多段
  169. editor.execCommand( 'customstyle', {
  170. tag:'h3',
  171. label:'标题3',
  172. style:'border-bottom:#ccc 1px solid;padding:0 1px 0 0;margin:0 0 10px 0;'
  173. } );
  174. ua.manualDeleteFillData( editor.body );
  175. ok(editor.body.getElementsByTagName('h1').length==0&&editor.body.getElementsByTagName('h3').length==2,'选中两行(中间夹一行空行),设置成标题3');
  176. equal( editor.body.getElementsByTagName('h3')[0].getAttribute( 'label' ), '标题3', '标题3' );
  177. var hStyle = $( editor.body.getElementsByTagName('h3')[0]);
  178. ok( editor.body.getElementsByTagName('h3')[0].style.borderBottomWidth == '1px' , '检查边框宽' );
  179. ok( hStyle.css( 'border-bottom-style' ) == 'solid' , '检查边框风格' );
  180. ok( hStyle.css( 'padding-bottom' ) == '0px'&&hStyle.css( 'padding-top' ) == '0px'&&hStyle.css( 'padding-left' ) == '0px'&&hStyle.css( 'padding-right' ) == '1px' , '检查padding' );
  181. ok( hStyle.css( 'margin-bottom' ) == '10px'&&hStyle.css( 'margin-top' ) == '0px'&&hStyle.css( 'margin-left' ) == '0px'&&hStyle.css( 'margin-right' ) == '0px' , '检查margin' );
  182. if ( ua.browser.ie&&ua.browser.ie<9 )
  183. ok( hStyle.css( 'border-bottom-color' ) == '#ccc' , '检查边框颜色' );
  184. else
  185. ok( hStyle.css( 'border-bottom-color' ) == 'rgb(204, 204, 204)' , '检查边框颜色' );
  186. equal( editor.body.getElementsByTagName('h3')[1].getAttribute( 'label' ), '标题3', '标题3' );
  187. var hStyle = $( editor.body.getElementsByTagName('h3')[1] );
  188. ok( editor.body.getElementsByTagName('h3')[1].style.borderBottomWidth == '1px' , '检查边框宽' );
  189. ok( hStyle.css( 'border-bottom-style' ) == 'solid' , '检查边框风格' );
  190. ok( hStyle.css( 'padding-bottom' ) == '0px'&&hStyle.css( 'padding-top' ) == '0px'&&hStyle.css( 'padding-left' ) == '0px'&&hStyle.css( 'padding-right' ) == '1px' , '检查padding' );
  191. ok( hStyle.css( 'margin-bottom' ) == '10px'&&hStyle.css( 'margin-top' ) == '0px'&&hStyle.css( 'margin-left' ) == '0px'&&hStyle.css( 'margin-right' ) == '0px' , '检查margin' );
  192. if ( ua.browser.ie&&ua.browser.ie<9 )
  193. ok( hStyle.css( 'border-bottom-color' ) == '#ccc' , '检查边框颜色' );
  194. else
  195. ok( hStyle.css( 'border-bottom-color' ) == 'rgb(204, 204, 204)' , '检查边框颜色' );
  196. });
  197. test( 'block的元素-样式的反复转换:块-块;包含的选取方式: 多段部分', function () {
  198. var editor = te.obj[0];
  199. var range = editor.selection.getRange();
  200. editor.setContent( '<p>hello</p><p>world</p><p>!!!</p>' );
  201. range.setStart(editor.body.firstChild.firstChild,2).setEnd(editor.body.lastChild.firstChild,1).select();//非闭合选区,多段部分
  202. editor.execCommand( 'customstyle', {
  203. tag:'h1',
  204. label:'标题1',
  205. style:'border-bottom:#ccc 1px solid;padding:0 3px 0 0;margin:10px 0 10px 0;'
  206. } );
  207. ua.manualDeleteFillData( editor.body );
  208. ok(editor.body.getElementsByTagName('h1').length==3,'选中多行的部分,设置成标题1');
  209. equal( editor.body.getElementsByTagName('h1')[0].getAttribute( 'label' ), '标题1', '标题1' );
  210. var hStyle = $( editor.body.getElementsByTagName('h1')[0] );
  211. ok( editor.body.getElementsByTagName('h1')[0].style.borderBottomWidth == '1px' , '检查边框宽' );
  212. ok( hStyle.css( 'border-bottom-style' ) == 'solid' , '检查边框风格' );
  213. ok( hStyle.css( 'padding-bottom' ) == '0px'&&hStyle.css( 'padding-top' ) == '0px'&&hStyle.css( 'padding-left' ) == '0px'&&hStyle.css( 'padding-right' ) == '3px' , '检查padding' );
  214. ok( hStyle.css( 'margin-bottom' ) == '10px'&&hStyle.css( 'margin-top' ) == '10px'&&hStyle.css( 'margin-left' ) == '0px'&&hStyle.css( 'margin-right' ) == '0px' , '检查margin' );
  215. if ( ua.browser.ie&&ua.browser.ie<9 )
  216. ok( hStyle.css( 'border-bottom-color' ) == '#ccc' , '检查边框颜色' );
  217. else
  218. ok( hStyle.css( 'border-bottom-color' ) == 'rgb(204, 204, 204)' , '检查边框颜色' );
  219. equal( editor.body.getElementsByTagName('h1')[1].getAttribute( 'label' ), '标题1', '标题1' );
  220. var hStyle = $( editor.body.getElementsByTagName('h1')[1] );
  221. ok( editor.body.getElementsByTagName('h1')[1].style.borderBottomWidth == '1px' , '检查边框宽' );
  222. ok( hStyle.css( 'border-bottom-style' ) == 'solid' , '检查边框风格' );
  223. ok( hStyle.css( 'padding-bottom' ) == '0px'&&hStyle.css( 'padding-top' ) == '0px'&&hStyle.css( 'padding-left' ) == '0px'&&hStyle.css( 'padding-right' ) == '3px' , '检查padding' );
  224. ok( hStyle.css( 'margin-bottom' ) == '10px'&&hStyle.css( 'margin-top' ) == '10px'&&hStyle.css( 'margin-left' ) == '0px'&&hStyle.css( 'margin-right' ) == '0px' , '检查margin' );
  225. if ( ua.browser.ie&&ua.browser.ie<9 )
  226. ok( hStyle.css( 'border-bottom-color' ) == '#ccc' , '检查边框颜色' );
  227. else
  228. ok( hStyle.css( 'border-bottom-color' ) == 'rgb(204, 204, 204)' , '检查边框颜色' );
  229. equal( editor.body.getElementsByTagName('h1')[2].getAttribute( 'label' ), '标题1', '标题1' );
  230. var hStyle = $( editor.body.getElementsByTagName('h1')[2] );
  231. ok( editor.body.getElementsByTagName('h1')[2].style.borderBottomWidth == '1px' , '检查边框宽' );
  232. ok( hStyle.css( 'border-bottom-style' ) == 'solid' , '检查边框风格' );
  233. ok( hStyle.css( 'padding-bottom' ) == '0px'&&hStyle.css( 'padding-top' ) == '0px'&&hStyle.css( 'padding-left' ) == '0px'&&hStyle.css( 'padding-right' ) == '3px' , '检查padding' );
  234. ok( hStyle.css( 'margin-bottom' ) == '10px'&&hStyle.css( 'margin-top' ) == '10px'&&hStyle.css( 'margin-left' ) == '0px'&&hStyle.css( 'margin-right' ) == '0px' , '检查margin' );
  235. if ( ua.browser.ie&&ua.browser.ie<9 )
  236. ok( hStyle.css( 'border-bottom-color' ) == '#ccc' , '检查边框颜色' );
  237. else
  238. ok( hStyle.css( 'border-bottom-color' ) == 'rgb(204, 204, 204)' , '检查边框颜色' );
  239. } );
  240. test( 'block的元素-样式的反复转换:块-内联;包含的选取方式:闭合、多段部分', function () {
  241. var editor = te.obj[0];
  242. editor.setContent( '<p>hello</p><p>world</p>' );
  243. var range = editor.selection.getRange();
  244. range.setStart(editor.body.firstChild,0).setEnd(editor.body.lastChild,1).select();//现设块样式
  245. editor.execCommand( 'customstyle', {
  246. style:'border-bottom:#ccc 2px solid;padding:0 4px 0 0;text-align:center;margin:0 0 20px 0;',
  247. label:'居中标题',
  248. tag:'h1'
  249. } );
  250. range.setStart(editor.body.getElementsByTagName('h1')[0],0).collapse(true).select();//闭合选区
  251. editor.execCommand( 'customstyle', {
  252. tag:'span',
  253. label:'强调',
  254. style:'font-style:italic;font-weight:bold;color:#000'
  255. } );
  256. ua.manualDeleteFillData( editor.body );
  257. equal( editor.body.getElementsByTagName('span')[0].getAttribute( 'label' ), '强调', '闭合选区设置样式:强调' );
  258. var hStyle = $( editor.body.getElementsByTagName('span')[0] );
  259. if ( ua.browser.webkit )
  260. ok( hStyle.css( 'font-style' ) == 'italic'&&hStyle.css( 'font-weight' ) == 'bold' , '检查字体' );
  261. else
  262. ok( hStyle.css( 'font-style' ) == 'italic'&&hStyle.css( 'font-weight' ) == '700' , '检查字体' );
  263. if(ua.browser.ie&&ua.browser.ie<9)
  264. equal( hStyle.css( 'color' ) , '#000' , '检查颜色' );
  265. else
  266. equal( hStyle.css( 'color' ) ,'rgb(0, 0, 0)' , '检查颜色' );
  267. range.setStart(editor.body.getElementsByTagName('h1')[0].lastChild,0).setEnd(editor.body.getElementsByTagName('h1')[1].firstChild,2).select();//多段部分
  268. editor.execCommand( 'customstyle', {
  269. tag:'span',
  270. label:'明显强调',
  271. style:'font-style:italic;font-weight:bold;color:rgb(51, 153, 204)'
  272. } );
  273. ua.manualDeleteFillData( editor.body );
  274. equal( editor.body.getElementsByTagName('h1')[1].firstChild.getAttribute( 'label' ), '明显强调', '闭合选区设置样式:明显强调' );
  275. var hStyle = $( editor.body.getElementsByTagName('h1')[1].firstChild );
  276. if ( ua.browser.webkit )
  277. ok( hStyle.css( 'font-style' ) == 'italic'&&hStyle.css( 'font-weight' ) == 'bold' , '检查字体' );
  278. else
  279. ok( hStyle.css( 'font-style' ) == 'italic'&&hStyle.css( 'font-weight' ) == '700' , '检查字体' );
  280. if(ua.browser.ie&&ua.browser.ie<9)
  281. equal( hStyle.css( 'color' ) , 'rgb(51,153,204)', '检查颜色' );
  282. else
  283. equal( hStyle.css( 'color' ) ,'rgb(51, 153, 204)' , '检查颜色' );
  284. } );
  285. test( 'block的元素-样式的反复转换:内联-块;包含的选取方式:闭合', function () { //从内联-块的转换意义不大,其实还是针对块的转换,就不做多种方式选取了
  286. var editor = te.obj[0];
  287. editor.setContent( '<p>hello</p>' );
  288. var range = editor.selection.getRange();
  289. range.setStart(editor.body.firstChild,0).setEnd(editor.body.firstChild,1).select();
  290. editor.execCommand( 'customstyle', {
  291. tag:'span',
  292. label:'强调',
  293. style:'font-style:italic;font-weight:bold;color:#000'
  294. } );
  295. range.setStart(editor.body.firstChild,0).collapse(true).select();
  296. editor.execCommand( 'customstyle', {
  297. style:'border-bottom:#ccc 2px solid;padding:0 4px 0 0;text-align:center;margin:0 0 20px 0;',
  298. label:'居中标题',
  299. tag:'h1'
  300. } );
  301. ua.manualDeleteFillData( editor.body );
  302. equal( editor.body.getElementsByTagName('h1')[0].getAttribute( 'label' ), '居中标题', '居中标题' );
  303. var hStyle = $( editor.body.getElementsByTagName('h1')[0] );
  304. ok( editor.body.getElementsByTagName('h1')[0].style.borderBottomWidth == '2px' , '检查边框宽' );
  305. ok( hStyle.css( 'border-bottom-style' ) == 'solid' , '检查边框风格' );
  306. ok( hStyle.css( 'padding-bottom' ) == '0px'&&hStyle.css( 'padding-top' ) == '0px'&&hStyle.css( 'padding-left' ) == '0px'&&hStyle.css( 'padding-right' ) == '4px' , '检查padding' );
  307. ok( hStyle.css( 'margin-bottom' ) == '20px'&&hStyle.css( 'margin-top' ) == '0px'&&hStyle.css( 'margin-left' ) == '0px'&&hStyle.css( 'margin-right' ) == '0px' , '检查margin' );
  308. if ( ua.browser.ie&&ua.browser.ie<9 )
  309. ok( hStyle.css( 'border-bottom-color' ) == '#ccc' , '检查边框颜色' );
  310. else
  311. ok( hStyle.css( 'border-bottom-color' ) == 'rgb(204, 204, 204)' , '检查边框颜色' );
  312. if(!editor.body.getElementsByTagName('h1')[0].firstChild.data ){return;}
  313. equal( editor.body.getElementsByTagName('h1')[0].firstChild.tagName.toLowerCase(),'span','h1内包含样式:强调');
  314. equal( editor.body.getElementsByTagName('h1')[0].firstChild.getAttribute( 'label' ), '强调', '闭合选区设置样式:强调' );
  315. var hStyle = $( editor.body.getElementsByTagName('span')[0] );
  316. if ( ua.browser.webkit )
  317. ok( hStyle.css( 'font-style' ) == 'italic'&&hStyle.css( 'font-weight' ) == 'bold' , '检查字体' );
  318. else
  319. ok( hStyle.css( 'font-style' ) == 'italic'&&hStyle.css( 'font-weight' ) == '700' , '检查字体' );
  320. if(ua.browser.ie&&ua.browser.ie<9)
  321. equal( hStyle.css( 'color' ) , '#000' , '检查颜色' );
  322. else
  323. equal( hStyle.css( 'color' ) ,'rgb(0, 0, 0)' , '检查颜色' );
  324. } );
  325. test( 'block的元素-样式的反复转换:内联-内联;包含的选取方式:闭合,非闭合,多段', function () {
  326. var div = document.body.appendChild( document.createElement( 'div' ) );
  327. var editor = new baidu.editor.Editor({'initialContent':'<p>欢迎使用ueditor</p>','elementPathEnabled' : true,'autoFloatEnabled':false});
  328. stop();
  329. setTimeout(function(){
  330. editor.render( div );
  331. setTimeout(function(){
  332. editor.setContent( '<p>hello</p><p>world</p>' );
  333. var range = editor.selection.getRange();
  334. range.setStart(editor.body.firstChild,0).setEnd(editor.body.firstChild,1).select();
  335. editor.execCommand( 'customstyle', {
  336. tag:'span',
  337. label:'强调',
  338. style:'font-style:italic;font-weight:bold;color:#000'
  339. } );
  340. equal( editor.body.getElementsByTagName('p')[0].firstChild.tagName.toLowerCase(), 'span', '闭合选区设置样式:强调' );
  341. equal( editor.body.getElementsByTagName('p')[0].firstChild.getAttribute( 'label' ), '强调', '闭合选区设置样式:强调' );
  342. var hStyle = $( editor.body.getElementsByTagName('span')[0] );
  343. if ( ua.browser.webkit )
  344. ok( hStyle.css( 'font-style' ) == 'italic'&&hStyle.css( 'font-weight' ) == 'bold' , '检查字体' );
  345. else
  346. ok( hStyle.css( 'font-style' ) == 'italic'&&hStyle.css( 'font-weight' ) == '700' , '检查字体' );
  347. if(ua.browser.ie&&ua.browser.ie<9)
  348. equal( hStyle.css( 'color' ) , '#000' , '检查颜色' );
  349. else
  350. equal( hStyle.css( 'color' ) ,'rgb(0, 0, 0)' , '检查颜色' );
  351. range.setStart(editor.body.firstChild.firstChild.firstChild,0).setEnd(editor.body.lastChild.firstChild,3).select();
  352. editor.execCommand( 'customstyle', {
  353. tag:'span',
  354. label:'明显强调',
  355. style:'font-style:italic;font-weight:bold;color:rgb(51, 153, 204)'
  356. } );
  357. range.selectNode(editor.body.firstChild).select();
  358. var eles = editor.queryCommandValue( 'elementpath' );
  359. ua.checkElementPath( eles, ['body', 'p', 'span', 'span'], '选中第一行' );
  360. var span2 = editor.body.getElementsByTagName('p')[0].firstChild.firstChild;
  361. var hStyle = $( span2 );
  362. equal( span2.tagName.toLowerCase(), 'span', '非闭合选区设置样式:明显强调' );
  363. equal(span2.getAttribute( 'label' ), '明显强调', '非闭合选区设置样式:明显强调' );
  364. if ( ua.browser.webkit )
  365. ok( hStyle.css( 'font-style' ) == 'italic'&&hStyle.css( 'font-weight' ) == 'bold' , '检查字体' );
  366. else
  367. ok( hStyle.css( 'font-style' ) == 'italic'&&hStyle.css( 'font-weight' ) == '700' , '检查字体' );
  368. if(ua.browser.ie&&ua.browser.ie<9)
  369. equal( hStyle.css( 'color' ) , 'rgb(51,153,204)' , '检查颜色' );
  370. else
  371. equal( hStyle.css( 'color' ) ,'rgb(51, 153, 204)', '检查颜色' );
  372. var span3 = editor.body.getElementsByTagName('p')[1].firstChild;
  373. var hStyle = $( span3 );
  374. equal( span3.tagName.toLowerCase(), 'span', '非闭合选区设置样式:明显强调' );
  375. equal(span3.getAttribute( 'label' ), '明显强调', '非闭合选区设置样式:明显强调' );
  376. if ( ua.browser.webkit )
  377. ok( hStyle.css( 'font-style' ) == 'italic'&&hStyle.css( 'font-weight' ) == 'bold' , '检查字体' );
  378. else
  379. ok( hStyle.css( 'font-style' ) == 'italic'&&hStyle.css( 'font-weight' ) == '700' , '检查字体' );
  380. if(ua.browser.ie&&ua.browser.ie<9)
  381. equal( hStyle.css( 'color' ) ,'rgb(51,153,204)', '检查颜色' );
  382. else
  383. equal( hStyle.css( 'color' ) ,'rgb(51, 153, 204)', '检查颜色' );
  384. range.setStart(span2.firstChild,0).collapse(true).select();
  385. editor.execCommand( 'customstyle', {
  386. tag:'span',
  387. label:'强调',
  388. style:'font-style:italic;font-weight:bold;color:#000'
  389. } );
  390. equal( span2.firstChild.tagName.toLowerCase(), 'span', '非闭合选区设置样式:强调' );
  391. equal( span2.firstChild.getAttribute( 'label' ), '强调', '闭合选区设置样式:强调' );
  392. var hStyle = $( span2.firstChild );
  393. if ( ua.browser.webkit )
  394. ok( hStyle.css( 'font-style' ) == 'italic'&&hStyle.css( 'font-weight' ) == 'bold' , '检查字体' );
  395. else
  396. ok( hStyle.css( 'font-style' ) == 'italic'&&hStyle.css( 'font-weight' ) == '700' , '检查字体' );
  397. if(ua.browser.ie&&ua.browser.ie<9)
  398. equal( hStyle.css( 'color' ) ,'#000', '检查颜色' );
  399. else
  400. equal( hStyle.css( 'color' ) ,'rgb(0, 0, 0)', '检查颜色' );
  401. start();
  402. },50);
  403. },50);
  404. } );
  405. test('h1空节点',function(){
  406. var editor = te.obj[0];
  407. var range = te.obj[1];
  408. editor.setContent('<p></p>');
  409. range.setStart(editor.body.firstChild,0).collapse(1).select();
  410. editor.execCommand('customstyle',{tag:'h1', label:'居中标题', style:'border-bottom:#ccc 2px solid;padding:0 4px 0 0;text-align:center;margin:0 0 20px 0;'});
  411. ua.manualDeleteFillData(editor.body);
  412. equal(editor.body.firstChild.tagName,'H1','h1标签');
  413. equal($(editor.body.firstChild).css('textAlign'),'center','居中');
  414. range.setStart(editor.body.firstChild.firstChild,0).collapse(1).select();
  415. ua.keyup(editor.body,{keyCode:32});
  416. var br = ua.browser.ie?'&nbsp;':'<br>';
  417. // 无法模拟空格
  418. // equal(ua.getChildHTML(editor.body),'<p>'+br+'</p>','h1空节点点击空格键');
  419. editor.execCommand('customstyle',{tag:'h1', label:'居中标题', style:'border-bottom:#ccc 2px solid;padding:0 4px 0 0;text-align:center;margin:0 0 20px 0;'});
  420. range.setStart(editor.body.firstChild,0).collapse(1).select();
  421. ua.keyup(editor.body,{keyCode:13});
  422. ua.manualDeleteFillData(editor.body);
  423. equal(ua.getChildHTML(editor.body),'<p>'+br+'</p>','h1空节点点击回车键');
  424. });
  425. test('trace 1840:单击后插入“居中标题”',function(){
  426. var editor = te.obj[0];
  427. var range = te.obj[1];
  428. var body = editor.body;
  429. editor.setContent( '<p></p>' );
  430. range.setStart(body.firstChild,0).select();
  431. editor.execCommand('customstyle',{tag:'h1', label:'居中标题', style:'border-bottom:#ccc 2px solid;padding:0 4px 0 0;text-align:center;margin:0 0 20px 0;'});
  432. equal(body.firstChild.tagName.toLowerCase(),'h1','检查tagname');
  433. var childs = body.firstChild.childNodes;
  434. var count = 0;
  435. for(var index=0;index<childs.length;index++){
  436. if(childs[index].nodeType==1 && childs[index].tagName.toLowerCase() =='br')
  437. count ++;
  438. }
  439. equal(count,ua.browser.ie?0:1,'br的个数');
  440. });