_tests/plugins/styles/styles.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
   2 <html xmlns="http://www.w3.org/1999/xhtml">\r
   3 <head>\r
   4         <title>Plugin: styles</title>\r
   5         <link rel="stylesheet" type="text/css" href="../../test.css" />\r
   6         <script type="text/javascript" src="../../../ckeditor.js"></script>\r
   7         <script type="text/javascript" src="../../test.js"></script>\r
   8         <script type="text/javascript">\r
   9 \r
  10 CKEDITOR.plugins.load( [ 'styles', 'domiterator', 'htmldataprocessor' ] );\r
  11 \r
  12         </script>\r
  13         <script type="text/javascript">\r
  14         //<![CDATA[\r
  15 \r
  16 var testCase;\r
  17 \r
  18 CKEDITOR.test.addTestCase( testCase = (function()\r
  19 {\r
  20         // Local references.\r
  21         var assert                      = CKEDITOR.test.assert;\r
  22         var getInnerHtml        = CKEDITOR.test.getInnerHtml;\r
  23 \r
  24         function getInnerHtmlParsed( element )\r
  25         {\r
  26                 var dataProcessor = new CKEDITOR.htmlDataProcessor();\r
  27                 dataProcessor.writer = new CKEDITOR.htmlParser.basicWriter();\r
  28                 return dataProcessor.toDataFormat( getInnerHtml( element, false ) );\r
  29         }\r
  30 \r
  31         var doc = new CKEDITOR.dom.document( document );\r
  32 \r
  33         return {\r
  34                 test_inline1 : function()\r
  35                 {\r
  36                         doc.getById( '_P1' ).setHtml( 'this is some sample text' );\r
  37 \r
  38                         var range = new CKEDITOR.dom.range( doc );\r
  39                         range.setStart( doc.getById( '_P1' ).getFirst(), 5 );\r
  40                         range.setEnd( doc.getById( '_P1' ).getFirst(), 7 );\r
  41 \r
  42                         var style = new CKEDITOR.style( { element : 'b' } );\r
  43                         style.applyToRange( range );\r
  44 \r
  45                         assert.areSame( 'this <b>is</b> some sample text', getInnerHtml( '_P1' ) );\r
  46                 },\r
  47 \r
  48                 test_inline2 : function()\r
  49                 {\r
  50                         doc.getById( '_P1' ).setHtml( 'this <b>is some </b>sample text' );\r
  51 \r
  52                         var range = new CKEDITOR.dom.range( doc );\r
  53                         range.setStart( doc.getById( '_P1' ).getChild( 1 ), 0 );\r
  54                         range.setEnd( doc.getById( '_P1' ), 2 );\r
  55 \r
  56                         var style = new CKEDITOR.style( { element : 'i' } );\r
  57                         style.applyToRange( range );\r
  58 \r
  59                         assert.areSame( 'this <i><b>is some </b></i>sample text', getInnerHtml( '_P1' ) );\r
  60                 },\r
  61 \r
  62                 test_inline3 : function()\r
  63                 {\r
  64                         doc.getById( '_P1' ).setHtml( 'this <b>is some </b>sample text' );\r
  65 \r
  66                         var range = new CKEDITOR.dom.range( doc );\r
  67                         range.setStart( doc.getById( '_P1' ).getChild( 1 ), 0 );\r
  68                         range.setEnd( doc.getById( '_P1' ).getChild( 1 ).getFirst(), 2 );\r
  69 \r
  70                         var style = new CKEDITOR.style( { element : 'i' } );\r
  71                         style.applyToRange( range );\r
  72 \r
  73                         assert.areSame( 'this <b><i>is</i> some </b>sample text', getInnerHtml( '_P1' ) );\r
  74                 },\r
  75 \r
  76                 // Inline - Remove inner duplicates.\r
  77                 test_inline4 : function()\r
  78                 {\r
  79                         doc.getById( '_P1' ).setHtml( 'this <b>is some </b>sample text' );\r
  80 \r
  81                         var range = new CKEDITOR.dom.range( doc );\r
  82                         range.setStart( doc.getById( '_P1' ), 0 );\r
  83                         range.setEnd( doc.getById( '_P1' ), 3 );\r
  84 \r
  85                         var style = new CKEDITOR.style( { element : 'b' } );\r
  86                         style.applyToRange( range );\r
  87 \r
  88                         assert.areSame( '<b>this is some sample text</b>', getInnerHtml( '_P1' ) );\r
  89                 },\r
  90 \r
  91                 // Inline - Merge with next.\r
  92                 test_inline5 : function()\r
  93                 {\r
  94                         doc.getById( '_P1' ).setHtml( 'this <b>is some </b>sample text' );\r
  95 \r
  96                         var range = new CKEDITOR.dom.range( doc );\r
  97                         range.setStart( doc.getById( '_P1' ), 0 );\r
  98                         range.setEnd( doc.getById( '_P1' ), 1 );\r
  99 \r
 100                         var style = new CKEDITOR.style( { element : 'b' } );\r
 101                         style.applyToRange( range );\r
 102 \r
 103                         assert.areSame( '<b>this is some </b>sample text', getInnerHtml( '_P1' ) );\r
 104                 },\r
 105 \r
 106                 // Inline - Merge with previous.\r
 107                 test_inline6 : function()\r
 108                 {\r
 109                         doc.getById( '_P1' ).setHtml( 'this <b>is some </b>sample text' );\r
 110 \r
 111                         var range = new CKEDITOR.dom.range( doc );\r
 112                         range.setStart( doc.getById( '_P1' ), 2 );\r
 113                         range.setEnd( doc.getById( '_P1' ).getChild( 2 ), 6 );\r
 114 \r
 115                         var style = new CKEDITOR.style( { element : 'b' } );\r
 116                         style.applyToRange( range );\r
 117 \r
 118                         assert.areSame( 'this <b>is some sample</b> text', getInnerHtml( '_P1' ) );\r
 119                 },\r
 120 \r
 121                 // Inline - Merge several with next.\r
 122                 test_inline7 : function()\r
 123                 {\r
 124                         doc.getById( '_P1' ).setHtml( '<i><u>this </u></i><b><i><u>is</u> some</i> sample</b> text' );\r
 125 \r
 126                         var range = new CKEDITOR.dom.range( doc );\r
 127                         range.setStart( doc.getById( '_P1' ), 0 );\r
 128                         range.setEnd( doc.getById( '_P1' ), 1 );\r
 129 \r
 130                         var style = new CKEDITOR.style( { element : 'b' } );\r
 131                         style.applyToRange( range );\r
 132 \r
 133                         assert.areSame( '<b><i><u>this is</u> some</i> sample</b> text', getInnerHtml( '_P1' ) );\r
 134                 },\r
 135 \r
 136                 // Inline - Merge several with previous.\r
 137                 test_inline8 : function()\r
 138                 {\r
 139                         doc.getById( '_P1' ).setHtml( 'this <b>is <i>some <u>sample</u></i></b><i><u> text</u></i>' );\r
 140 \r
 141                         var range = new CKEDITOR.dom.range( doc );\r
 142                         range.setStart( doc.getById( '_P1' ), 2 );\r
 143                         range.setEnd( doc.getById( '_P1' ), 3 );\r
 144 \r
 145                         var style = new CKEDITOR.style( { element : 'b' } );\r
 146                         style.applyToRange( range );\r
 147 \r
 148                         assert.areSame( 'this <b>is <i>some <u>sample text</u></i></b>', getInnerHtml( '_P1' ) );\r
 149                 },\r
 150 \r
 151                 test_inline9 : function()\r
 152                 {\r
 153                         doc.getById( '_P1' ).setHtml( 'this <i>is some </i>sample text' );\r
 154 \r
 155                         var range = new CKEDITOR.dom.range( doc );\r
 156                         range.setStart( doc.getById( '_P1' ), 0 );\r
 157                         range.setEnd( doc.getById( '_P1' ).getChild( 1 ), 0 );\r
 158 \r
 159                         var style = new CKEDITOR.style( { element : 'b' } );\r
 160                         style.applyToRange( range );\r
 161 \r
 162                         assert.areSame( '<b>this </b><i>is some </i>sample text', getInnerHtml( '_P1' ) );\r
 163                 },\r
 164 \r
 165                 test_inline10 : function()\r
 166                 {\r
 167                         doc.getById( '_P1' ).setHtml( 'this is some sample text' );\r
 168 \r
 169                         var range = new CKEDITOR.dom.range( doc );\r
 170                         range.setStart( doc.getById( '_P1' ), 0 );\r
 171                         range.setEnd( doc.getById( '_P1' ), 1 );\r
 172 \r
 173                         var style = new CKEDITOR.style(\r
 174                                 {\r
 175                                         element : 'b',\r
 176                                         attributes :\r
 177                                                 {\r
 178                                                         lang : 'it',\r
 179                                                         title : 'test'\r
 180                                                 },\r
 181                                         styles :\r
 182                                                 {\r
 183                                                         'font-size' : '10pt',\r
 184                                                         'text-decoration' : 'line-through'\r
 185                                                 }\r
 186                                 } );\r
 187                         style.applyToRange( range );\r
 188 \r
 189                         assert.areSame( '<b lang="it" style="font-size:10pt;text-decoration:line-through;" title="test">this is some sample text</b>', getInnerHtml( '_P1' ) );\r
 190                 },\r
 191 \r
 192                 test_inline11 : function()\r
 193                 {\r
 194                         doc.getById( '_P1' ).setHtml( 'this <b lang="it" class="sample">is</b> <b lang="it" style="font-size: 10pt; text-decoration: line-through;" title="test">some sample</b> <b>t</b>ext' );\r
 195 \r
 196                         var range = new CKEDITOR.dom.range( doc );\r
 197                         range.setStart( doc.getById( '_P1' ), 0 );\r
 198                         range.setEnd( doc.getById( '_P1' ), 7 );\r
 199 \r
 200                         var style = new CKEDITOR.style(\r
 201                                 {\r
 202                                         element : 'b',\r
 203                                         attributes :\r
 204                                                 {\r
 205                                                         lang : 'it',\r
 206                                                         title : 'test'\r
 207                                                 },\r
 208                                         styles :\r
 209                                                 {\r
 210                                                         'font-size' : '10pt',\r
 211                                                         'text-decoration' : 'line-through'\r
 212                                                 }\r
 213                                 } );\r
 214                         style.applyToRange( range );\r
 215 \r
 216                         assert.areSame( '<b lang="it" style="font-size: 10pt; text-decoration: line-through;" title="test">this <b class="sample">is</b> some sample text</b>', getInnerHtml( '_P1' ) );\r
 217                 },\r
 218 \r
 219                 test_inline11 : function()\r
 220                 {\r
 221                         doc.getById( '_P1' ).setHtml( 'this <span class="a">is</span> some <span class="b">sample</span> text' );\r
 222 \r
 223                         var range = new CKEDITOR.dom.range( doc );\r
 224                         range.setStart( doc.getById( '_P1' ), 0 );\r
 225                         range.setEnd( doc.getById( '_P1' ), 5 );\r
 226 \r
 227                         var style = new CKEDITOR.style( { element : 'span', attributes : { 'class' : 'b' } } );\r
 228                         style.applyToRange( range );\r
 229 \r
 230                         assert.areSame( '<span class="b">this <span class="a">is</span> some sample text</span>', getInnerHtml( '_P1' ) );\r
 231                 },\r
 232 \r
 233                 test_inline12 : function()\r
 234                 {\r
 235                         doc.getById( '_P1' ).setHtml( 'this <span style="font-size:12pt; font-weight:600">is</span> some <span style="font-size:10px;">sample</span> text' );\r
 236 \r
 237                         var range = new CKEDITOR.dom.range( doc );\r
 238                         range.setStart( doc.getById( '_P1' ), 0 );\r
 239                         range.setEnd( doc.getById( '_P1' ), 5 );\r
 240 \r
 241                         var style = new CKEDITOR.style( { element : 'span', styles : { 'font-size' : '1.5em' } } );\r
 242                         style.applyToRange( range );\r
 243 \r
 244                         assert.areSame( '<span style="font-size:1.5em;">this <span style="font-weight:600;">is</span> some sample text</span>', getInnerHtml( '_P1' ) );\r
 245                 },\r
 246 \r
 247                 test_inline13 : function()\r
 248                 {\r
 249                         doc.getById( '_P1' ).setHtml( 'this <b>is some sample</b> text' );\r
 250 \r
 251                         var range = new CKEDITOR.dom.range( doc );\r
 252                         range.setStart( doc.getById( '_P1' ).getChild( 1 ).getFirst(), 3 );\r
 253                         range.setEnd( doc.getById( '_P1' ), 3 );\r
 254 \r
 255                         var style = new CKEDITOR.style( { element : 'i' } );\r
 256                         style.applyToRange( range );\r
 257 \r
 258                         assert.areSame( 'this <b>is <i>some sample</i></b><i> text</i>', getInnerHtml( '_P1' ) );\r
 259                 },\r
 260 \r
 261                 test_inline14 : function()\r
 262                 {\r
 263                         var para = doc.getById( '_P1' );\r
 264 \r
 265                         para.setHtml( 'this is some sample text' );\r
 266 \r
 267                         var range = new CKEDITOR.dom.range( doc );\r
 268                         range.setStart( para.getFirst(), 0 );\r
 269                         range.setEnd( para.getFirst(), 7 );\r
 270 \r
 271                         var style = new CKEDITOR.style( { element : 'b' } );\r
 272                         style.applyToRange( range );\r
 273 \r
 274                         assert.areSame( '<b>this is</b> some sample text', getInnerHtml( '_P1' ), 'First range' );\r
 275 \r
 276                         para.setHtml( para.getHtml() );\r
 277 \r
 278                         range = new CKEDITOR.dom.range( doc );\r
 279                         range.setStart( para.getFirst().getFirst(), 5 );\r
 280                         range.setEnd( para.getChild( 1 ), 5 );\r
 281 \r
 282                         style.applyToRange( range );\r
 283 \r
 284                         assert.areSame( '<b>this is some</b> sample text', getInnerHtml( '_P1' ), 'Second range' );\r
 285                 },\r
 286 \r
 287                 test_inline15 : function()\r
 288                 {\r
 289                         var para = doc.getById( '_P1' );\r
 290 \r
 291                         para.setHtml( 'this is some sample text' );\r
 292 \r
 293                         var range = new CKEDITOR.dom.range( doc );\r
 294                         range.setStart( para.getFirst(), 0 );\r
 295                         range.setEnd( para.getFirst(), 7 );\r
 296 \r
 297                         var style = new CKEDITOR.style( { element : 'span', styles : { 'font-family' : '#(family)' } }, { family : 'Arial,Helvetica,sans-serif' } );\r
 298                         style.applyToRange( range );\r
 299 \r
 300                         assert.areSame( '<span style="font-family:arial,helvetica,sans-serif;">this is</span> some sample text', getInnerHtml( '_P1' ), 'First range' );\r
 301 \r
 302                         para.setHtml( para.getHtml() );\r
 303 \r
 304                         range = new CKEDITOR.dom.range( doc );\r
 305                         range.setStart( para.getFirst().getFirst(), 5 );\r
 306                         range.setEnd( para.getChild( 1 ), 5 );\r
 307 \r
 308                         style = new CKEDITOR.style( { element : 'span', styles : { 'font-family' : '#(family)' } }, { family : 'Georgia,serif' } );\r
 309                         style.applyToRange( range );\r
 310 \r
 311                         assert.areSame( '<span style="font-family:arial,helvetica,sans-serif;">this <span style="font-family:georgia,serif;">is</span></span><span style="font-family:georgia,serif;"> some</span> sample text', getInnerHtml( '_P1' ), 'Second range' );\r
 312                 },\r
 313 \r
 314                 test_inline16 : function()\r
 315                 {\r
 316                         var para = doc.getById( '_P1' );\r
 317 \r
 318                         para.setHtml( '<b lang="pt" style="font-size:11pt;color:red;">this is some sample text</b>' );\r
 319 \r
 320                         var range = new CKEDITOR.dom.range( doc );\r
 321                         range.setStart( para.getFirst().getFirst(), 4 );\r
 322                         range.setEnd( para.getFirst(), 10 );\r
 323 \r
 324                         var style = new CKEDITOR.style( { element : 'b', styles : { color : 'red', 'font-weight' : '700' } } );\r
 325                         style.applyToRange( range );\r
 326 \r
 327                         assert.areSame( '<b lang="pt" style="color:red;font-size:11pt;">this<b style="font-weight:700;"> is some sample text</b></b>', getInnerHtml( '_P1' ), 'First range' );\r
 328                 },\r
 329 \r
 330                 test_inline_nobreak1 : function()\r
 331                 {\r
 332                         doc.getById( '_P1' ).setHtml( 'this is <a href="http://example.com/">some sample</a> text' );\r
 333 \r
 334                         var range = new CKEDITOR.dom.range( doc );\r
 335                         range.setStart( doc.getById( '_P1' ), 0 );\r
 336                         range.setEnd( doc.getById( '_P1' ).getChild( 1 ).getFirst(), 4 );\r
 337 \r
 338                         var style = new CKEDITOR.style( { element : 'b' } );\r
 339                         style.applyToRange( range );\r
 340 \r
 341                         assert.areSame( '<b>this is </b><a href="http://example.com/"><b>some</b> sample</a> text', getInnerHtml( '_P1' ) );\r
 342                 },\r
 343 \r
 344                 test_ticket_2040 : function()\r
 345                 {\r
 346                         doc.getById( '_P1' ).setHtml( 'This is some <strong>sample text<\/strong>. You are using <a href="http://www.fckeditor.net/">ckeditor<\/a>.' );\r
 347 \r
 348                         var range = new CKEDITOR.dom.range( doc );\r
 349                         range.setStart( doc.getById( '_P1' ), 1 );\r
 350                         range.setEnd( doc.getById( '_P1' ).getChild( 1 ).getFirst(), 6 );\r
 351 \r
 352                         var style = new CKEDITOR.style( { element : 'i' } );\r
 353                         style.applyToRange( range );\r
 354 \r
 355                         assert.areSame( 'this is some <strong><i>sample</i> text<\/strong>. you are using <a href="http://www.fckeditor.net/">ckeditor<\/a>.', getInnerHtml( '_P1' ) );\r
 356                 },\r
 357 \r
 358                 test_checkElementRemovable1 : function()\r
 359                 {\r
 360                         var element = CKEDITOR.dom.element.createFromHtml( '<b>Test</b>', doc );\r
 361 \r
 362                         var style = new CKEDITOR.style( { element : 'b' } );\r
 363 \r
 364                         assert.isTrue( style.checkElementRemovable( element ) );\r
 365                 },\r
 366 \r
 367                 test_checkElementRemovable2 : function()\r
 368                 {\r
 369                         var element = CKEDITOR.dom.element.createFromHtml( '<b>Test</b>', doc );\r
 370 \r
 371                         var style = new CKEDITOR.style( { element : 'i' } );\r
 372 \r
 373                         assert.isFalse( style.checkElementRemovable( element ) );\r
 374                 },\r
 375 \r
 376                 test_checkElementRemovable3 : function()\r
 377                 {\r
 378                         var element = CKEDITOR.dom.element.createFromHtml( '<b>Test</b>', doc );\r
 379 \r
 380                         var style = new CKEDITOR.style( { element : 'b', attributes : { lang : 'pt' } } );\r
 381 \r
 382                         assert.isTrue( style.checkElementRemovable( element ) );\r
 383                 },\r
 384 \r
 385                 test_checkElementRemovable4 : function()\r
 386                 {\r
 387                         var element = CKEDITOR.dom.element.createFromHtml( '<b>Test</b>', doc );\r
 388 \r
 389                         var style = new CKEDITOR.style( { element : 'b', attributes : { lang : 'pt' } } );\r
 390 \r
 391                         assert.isFalse( style.checkElementRemovable( element, true ) );\r
 392                 },\r
 393 \r
 394                 test_checkElementRemovable5 : function()\r
 395                 {\r
 396                         var element = CKEDITOR.dom.element.createFromHtml( '<span lang="pt" style="color : #fff">Test</span>', doc );\r
 397 \r
 398                         var style = new CKEDITOR.style( { element : 'span', attributes : { lang : 'pt' }, style : { color : '#ffffff' } } );\r
 399 \r
 400                         assert.isTrue( style.checkElementRemovable( element, true ) );\r
 401                 },\r
 402 \r
 403                 test_checkElementRemovable6 : function()\r
 404                 {\r
 405                         var element = CKEDITOR.dom.element.createFromHtml( '<span lang="pt" style="color : #fff">Test</span>', doc );\r
 406 \r
 407                         var style = new CKEDITOR.style( { element : 'span', attributes : { lang : 'pt' }, style : { color : '#fffff0' } } );\r
 408 \r
 409                         assert.isTrue( style.checkElementRemovable( element, true ) );\r
 410                 },\r
 411 \r
 412                 test_checkElementRemovable7 : function()\r
 413                 {\r
 414                         var element = CKEDITOR.dom.element.createFromHtml( '<span lang="pt" style="color : #fff">Test</span>', doc );\r
 415 \r
 416                         var style = new CKEDITOR.style( { element : 'span', attributes : { lang : 'fr' }, style : { color : '#ffffff' } } );\r
 417 \r
 418                         assert.isFalse( style.checkElementRemovable( element, true ) );\r
 419                 },\r
 420 \r
 421                 test_checkElementRemovable8 : function()\r
 422                 {\r
 423                         var element = CKEDITOR.dom.element.createFromHtml( '<span lang="pt" style="font-size: 10px">Test</span>', doc );\r
 424 \r
 425                         var style = new CKEDITOR.style( { element : 'span', attributes : { lang : 'pt' , style : 'font-size:10px;' } } );\r
 426 \r
 427                         assert.isTrue( style.checkElementRemovable( element, true ) );\r
 428                 },\r
 429 \r
 430                 test_ticket_3091 : function()\r
 431                 {\r
 432                         var element = doc.getById( '_P1' );\r
 433                         element.setHtml( 'outter<table><tr><td>text</td></tr></table>outter' );\r
 434 \r
 435                         var range = new CKEDITOR.dom.range( doc );\r
 436                         range.selectNodeContents( element );\r
 437 \r
 438                         var styleDef =\r
 439                         {\r
 440                                 element         : 'span',\r
 441                                 styles          : { 'font-family' : '#(family)' },\r
 442                                 overrides       : [ { element : 'font', attributes : { 'face' : null } } ]\r
 443                         };\r
 444 \r
 445                         var style = new CKEDITOR.style( styleDef, { 'family' : 'Arial,Helvetica,sans-serif' } );\r
 446                         style.applyToRange( range );\r
 447 \r
 448                         style = new CKEDITOR.style( styleDef, { 'family' : 'Comic Sans MS,cursive' } );\r
 449                         style.applyToRange( range );\r
 450 \r
 451                         style = new CKEDITOR.style( styleDef, { 'family' : 'Courier New,Courier,monospace' } );\r
 452                         style.applyToRange( range );\r
 453 \r
 454                         assert.areSame( '<span style="font-family:couriernew,courier,monospace;">outter</span><table><tbody><tr><td><span style="font-family:couriernew,courier,monospace;">text</span></td></tr></tbody></table><span style="font-family:couriernew,courier,monospace;">outter</span>', getInnerHtml( element ) );\r
 455                 },\r
 456 \r
 457                 test_ticket_3091_2 : function()\r
 458                 {\r
 459                         var element = doc.getById( '_P1' );\r
 460                         element.setHtml( 'outter<p>text</p>outter' );\r
 461 \r
 462                         var range = new CKEDITOR.dom.range( doc );\r
 463                         range.selectNodeContents( element );\r
 464 \r
 465                         var style = new CKEDITOR.style( { element : 'i', attributes : { title : 'x' } } );\r
 466                         style.applyToRange( range );\r
 467 \r
 468                         assert.areSame( '<i title="x">outter</i><p><i title="x">text</i></p><i title="x">outter</i>', getInnerHtml( element ), 'First step failed' );\r
 469 \r
 470                         style = new CKEDITOR.style( { element : 'i', attributes : { title : 'y' } } );\r
 471                         style.applyToRange( range );\r
 472 \r
 473                         assert.areSame( '<i title="y">outter</i><p><i title="y">text</i></p><i title="y">outter</i>', getInnerHtml( element ), 'Second step failed' );\r
 474 \r
 475                         style = new CKEDITOR.style( { element : 'i', attributes : { title : 'z' } } );\r
 476                         style.applyToRange( range );\r
 477 \r
 478                         assert.areSame( '<i title="z">outter</i><p><i title="z">text</i></p><i title="z">outter</i>', getInnerHtml( element ), 'Third step failed' );\r
 479                 },\r
 480 \r
 481                 // TC based on the state of the second step in the above test, before it got fixed.\r
 482                 test_ticket_3091_3 : function()\r
 483                 {\r
 484                         var element = doc.getById( '_P1' );\r
 485                         element.setHtml( '<p><i title="y">text</i><i title="x"></i></p><i title="y">outter</i><i title="x"></i>' );\r
 486 \r
 487                         var range = new CKEDITOR.dom.range( doc );\r
 488                         range.selectNodeContents( element );\r
 489 \r
 490                         var style = new CKEDITOR.style( { element : 'i', attributes : { title : 'z' } } );\r
 491                         style.applyToRange( range );\r
 492 \r
 493                         assert.areSame( '<p><i title="z">text</i></p><i title="z">outter</i>', getInnerHtml( element ) );\r
 494                 },\r
 495 \r
 496                 // Remove inline style when range collapsed at element boundaries,\r
 497                 // move out of the removing-style element, with inner style copied.\r
 498                 test_ticket_3309 : function()\r
 499                 {\r
 500                         var element = doc.getById( '_P1' );\r
 501                         element.setHtml( 'this is some <b><i id="_i1">styles</i></b> text' );\r
 502 \r
 503                         // This is some <b><i>styles^</i></b> text\r
 504                         var range = new CKEDITOR.dom.range( doc );\r
 505                         range.setStartAt( doc.getById( '_i1' ), CKEDITOR.POSITION_BEFORE_END );\r
 506 \r
 507                         var style = new CKEDITOR.style( { element : 'b' } );\r
 508                         style.removeFromRange( range );\r
 509 \r
 510                         assert.areSame( 'this is some <b><i id="_i1">styles</i></b><i></i> text', getInnerHtml( element ) );\r
 511                 },\r
 512 \r
 513                 // No inner style preserved, simply move out of the removing-style element.\r
 514                 test_ticket_3309_2 : function()\r
 515                 {\r
 516                         var element = doc.getById( '_P1' );\r
 517                         element.setHtml( 'this is some <b id="_b1">styles</b> text' );\r
 518 \r
 519                         // This is some <b>styles^</b> text\r
 520                         var range = new CKEDITOR.dom.range( doc );\r
 521                         range.setStartAt( doc.getById( '_b1' ), CKEDITOR.POSITION_BEFORE_END );\r
 522 \r
 523                         var style = new CKEDITOR.style( { element : 'b' } );\r
 524                         style.removeFromRange( range );\r
 525                         // This is some <b>styles</b>^ text\r
 526                         assert.areSame( doc.getById( '_b1' ).getParent().$, range.startContainer.$ );\r
 527                         assert.areSame( 2, range.startOffset );\r
 528                         assert.areSame( 'this is some <b id="_b1">styles</b> text', getInnerHtml( element ) );\r
 529                 },\r
 530 \r
 531                 // With style overrides.\r
 532                 test_ticket_3309_3 : function()\r
 533                 {\r
 534                         var element = doc.getById( '_P1' );\r
 535                         element.setHtml( 'text <strong><bold><span><b><i id="_i1">styles</i></b></span></bold></strong>' );\r
 536 \r
 537                         // text <strong><bold><span><b><i id="_i1">^styles</i></b></span></bold></strong>\r
 538                         var range = new CKEDITOR.dom.range( doc );\r
 539                         range.setStartAt( doc.getById( '_i1' ), CKEDITOR.POSITION_AFTER_START );\r
 540 \r
 541                         var style = new CKEDITOR.style( { element : 'b' , overrides : [ 'strong', 'bold' ] } );\r
 542                         style.removeFromRange( range );\r
 543 \r
 544                         // text <span><i>^</i></span><bold><span><b><i>styles</i></b></span></bold>\r
 545                         assert.areSame( 'text <span><i></i></span><strong><bold><span><b><i id="_i1">styles</i></b></span></bold></strong>', getInnerHtml( element ) );\r
 546                 },\r
 547 \r
 548                 // Test convert multiple paragraphs to one <pre>.\r
 549                 test_ticket_3188 : function()\r
 550                 {\r
 551                         var element = doc.getById( '_P1' );\r
 552                         element.setHtml( '<p id="_P2">\nparagraph1<br /><br />para\t\ngraph2</p><p id="_P3">\nparagraph3\n</p>' );\r
 553 \r
 554                         // <p id="_P2">[paragraph1</p><p id="_P3">paragraph2]</p>\r
 555                         var range = new CKEDITOR.dom.range( doc );\r
 556                         range.setStartAt( doc.getById( '_P2' ), CKEDITOR.POSITION_AFTER_START );\r
 557                         range.setEndAt( doc.getById( '_P3' ), CKEDITOR.POSITION_BEFORE_END );\r
 558 \r
 559                         var style = new CKEDITOR.style( { element : 'pre' } );\r
 560                         style.applyToRange( range );\r
 561 \r
 562                         var result = getInnerHtmlParsed( element );\r
 563                         assert.areSame( '<pre>paragraph1\n\npara graph2\n\nparagraph3</pre>', result );\r
 564                 },\r
 565 \r
 566                 // Test convert one <pre> to multiple paragraphs.\r
 567                 test_ticket_3188_2 : function()\r
 568                 {\r
 569                         var element = doc.getById( '_P1' );\r
 570                         element.setHtml( '<pre>\n\tparagraph1\t\tparagraph1\nparagraph2\n\t\n\tpara   graph3\n</pre>' );\r
 571 \r
 572                         //<pre>[\n\tparagraph1\t\tparagraph1\nparagraph2\n\t\n\tpara   graph3\n]</pre>\r
 573                         var range = new CKEDITOR.dom.range( doc );\r
 574                         range.selectNodeContents( doc.getById( '_P1' ).getFirst() );\r
 575                         var style = new CKEDITOR.style( { element : 'p' } );\r
 576                         style.applyToRange( range );\r
 577 \r
 578                         var result = getInnerHtmlParsed( element );\r
 579 \r
 580                         if ( CKEDITOR.env.webkit || CKEDITOR.env.opera )\r
 581                                 result = result.replace( /\xa0/g, '&nbsp;' );\r
 582 \r
 583                         assert.areSame( '<p>&nbsp;paragraph1&nbsp; paragraph1<br />paragraph2</p><p>&nbsp;para&nbsp;&nbsp; graph3</p>',\r
 584                                          result );\r
 585                 },\r
 586                 name : document.title\r
 587         };\r
 588 })() );\r
 589 //window.onload = testCase.test_ticket_3188;\r
 590         //]]>\r
 591         </script>\r
 592 </head>\r
 593 <body>\r
 594         <div id="_P1"></div>\r
 595 </body>\r
 596 </html>\r