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
4 <title>CKEDITOR.dom.element</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
11 CKEDITOR.test.addTestCase( (function()
\r
13 // Local reference to the "assert" object.
\r
14 var assert = CKEDITOR.test.assert;
\r
15 var getInnerHtml = CKEDITOR.test.getInnerHtml;
\r
20 var element = new CKEDITOR.dom.element( document.getElementById( 'test1' ) );
\r
21 assert.areSame( document.getElementById( 'test1' ), element.$ );
\r
24 test_getId1 : function()
\r
26 var element = new CKEDITOR.dom.element( document.getElementById( 'test1' ) );
\r
27 assert.areEqual( 'test1', element.getId() );
\r
30 test_getId2 : function()
\r
32 var element = new CKEDITOR.dom.element( document.getElementsByTagName( 'div' )[0] );
\r
33 assert.isNull( element.getId() );
\r
36 test_getNameAtt1 : function()
\r
38 var element = new CKEDITOR.dom.element( document.getElementsByName( 'named1' )[0] );
\r
39 assert.areEqual( 'named1', element.getNameAtt() );
\r
42 test_getNameAtt2 : function()
\r
44 var element = new CKEDITOR.dom.element( document.getElementById( 'test1' ) );
\r
45 assert.isNull( element.getNameAtt() );
\r
48 test_getName : function()
\r
50 var element = new CKEDITOR.dom.element( document.getElementById( 'test1' ) );
\r
51 assert.areEqual( 'textarea', element.getName(), 'First call' );
\r
52 assert.areEqual( 'textarea', element.getName(), 'Second call' );
\r
55 test_hide : function()
\r
57 var nativeElement = document.getElementById( 'test1' );
\r
58 nativeElement.style.display = '';
\r
60 var element = new CKEDITOR.dom.element( nativeElement );
\r
63 assert.areEqual( 'none', nativeElement.style.display );
\r
66 test_show : function()
\r
68 var nativeElement = document.getElementById( 'test1' );
\r
69 nativeElement.style.display = '';
\r
71 var element = new CKEDITOR.dom.element( nativeElement );
\r
74 assert.areEqual( '', nativeElement.style.display );
\r
77 test_createFromHtml : function()
\r
79 var element = CKEDITOR.dom.element.createFromHtml( '<p>My test</p>' );
\r
80 assert.areEqual( 'p', element.getName(), 'element name doesn\'t match' );
\r
81 assert.areEqual( 'My test', element.$.innerHTML, 'the innerHTML doesn\'t match' );
\r
84 test_createFromHtml2 : function()
\r
86 var element = new CKEDITOR.dom.element.createFromHtml( '<div><x:x><p>Test</p></div>' );
\r
87 assert.areNotEqual( 'Test', element.getChild( 0, 0 ).innerHTML );
\r
90 test_append1 : function()
\r
92 var element = new CKEDITOR.dom.element( document.getElementById( 'append' ) );
\r
93 element.append( new CKEDITOR.dom.element( 'b' ) );
\r
94 assert.areEqual( 'b', document.getElementById( 'append' ).firstChild.nodeName.toLowerCase() );
\r
97 test_append2 : function()
\r
99 var element = new CKEDITOR.dom.element( document.getElementById( 'append' ) );
\r
100 element.append( 'i' );
\r
101 assert.areEqual( 'i', document.getElementById( 'append' ).lastChild.nodeName.toLowerCase() );
\r
104 test_appendText1 : function()
\r
106 var element = new CKEDITOR.dom.element( document.getElementById( 'append' ) );
\r
107 element.setHtml( '' );
\r
108 element.appendText( 'Test appendText' );
\r
109 assert.areEqual( 'Test appendText', document.getElementById( 'append' ).innerHTML );
\r
112 test_appendText2 : function()
\r
114 var element = new CKEDITOR.dom.element( 'script' );
\r
115 element.appendText( 'Test appendText' );
\r
116 assert.areEqual( 'Test appendText', element.$.text );
\r
119 test_setHtml : function()
\r
121 var element = new CKEDITOR.dom.element( document.getElementById( 'append' ) );
\r
122 element.setHtml( '<b>Test</b>' );
\r
123 assert.areEqual( '<b>test</b>', document.getElementById( 'append' ).innerHTML.toLowerCase(), 'First call doesn\'t match' );
\r
124 element.setHtml( 'Another test' );
\r
125 assert.areEqual( 'Another test', document.getElementById( 'append' ).innerHTML, 'Second call doesn\'t match' );
\r
128 test_getDocument1 : function()
\r
130 var element = new CKEDITOR.dom.element( 'div' );
\r
131 assert.areSame( document, element.getDocument().$, 'First call' );
\r
132 assert.areSame( document, element.getDocument().$, 'Second call' );
\r
135 test_getDocument2 : function()
\r
137 var element = new CKEDITOR.dom.element( document.body );
\r
138 assert.areSame( document, element.getDocument().$, 'First call' );
\r
139 assert.areSame( document, element.getDocument().$, 'Second call' );
\r
142 test_getFirst1 : function()
\r
144 var element = new CKEDITOR.dom.element( document.getElementById( 'append' ) );
\r
145 element.setHtml( '<b>Test</b>' );
\r
146 var first = element.getFirst();
\r
147 assert.areSame( 'b', first.getName() );
\r
150 test_getFirst2 : function()
\r
152 var element = new CKEDITOR.dom.element( document.getElementById( 'append' ) );
\r
153 element.setHtml( 'Test' );
\r
154 var first = element.getFirst();
\r
155 assert.areSame( 'Test', first.$.nodeValue );
\r
158 test_getFirst3 : function()
\r
160 var element = new CKEDITOR.dom.element( document.getElementById( 'append' ) );
\r
161 element.setHtml( '' );
\r
162 var first = element.getFirst();
\r
163 assert.isNull( first );
\r
166 test_setAttribute1 : function()
\r
168 var element = new CKEDITOR.dom.element( document.getElementById( 'test1' ) );
\r
169 element.setAttribute( 'class', 'Test' );
\r
171 assert.areSame( 'Test', document.getElementById( 'test1' ).className );
\r
174 test_setAttribute2 : function()
\r
176 var element = new CKEDITOR.dom.element( document.getElementById( 'test1' ) );
\r
177 element.setAttribute( 'style', 'position: absolute;' );
\r
179 assert.areEqual( 'position: absolute;', CKEDITOR.test.getAttribute( element, 'style' ) );
\r
182 test_setAttribute3 : function()
\r
184 var element = new CKEDITOR.dom.element( document.getElementById( 'test1' ) );
\r
185 element.setAttribute( 'name', 'TestName' );
\r
187 assert.areEqual( 'TestName', document.getElementById( 'test1' ).name );
\r
190 test_setAttribute4 : function()
\r
192 var element = new CKEDITOR.dom.element( document.getElementById( 'test1' ) );
\r
193 element.setAttribute( 'rows', 5 );
\r
195 assert.areEqual( 5, document.getElementById( 'test1' ).rows );
\r
198 test_setAttributes : function()
\r
200 var element = new CKEDITOR.dom.element( document.getElementById( 'test2' ) );
\r
201 element.setAttributes({
\r
203 'style' : 'position: absolute;',
\r
204 'name' : 'TestName',
\r
207 assert.areSame( 'Test', document.getElementById( 'test1' ).className, 'class is wrong' );
\r
208 assert.areEqual( 'position: absolute;', CKEDITOR.test.getAttribute( element, 'style'), 'style is wrong' );
\r
209 assert.areEqual( 'TestName', document.getElementById( 'test1' ).name, 'name is wrong' );
\r
210 assert.areEqual( 5, document.getElementById( 'test1' ).rows, 'rows is wrong' );
\r
213 test_setStyle1 : function()
\r
215 var element = new CKEDITOR.dom.element( document.getElementById( 'setStyle' ) );
\r
216 element.setStyle( 'position', 'absolute' );
\r
218 assert.areEqual( 'absolute', document.getElementById( 'setStyle' ).style.position );
\r
221 test_setStyle2 : function()
\r
223 var element = new CKEDITOR.dom.element( document.getElementById( 'setStyle' ) );
\r
224 element.setStyle( 'float', 'right' );
\r
226 assert.areEqual( 'right', document.getElementById( 'setStyle' ).style.cssFloat );
\r
229 test_setStyles : function()
\r
231 var element = new CKEDITOR.dom.element( document.getElementById( 'setStyle' ) );
\r
232 element.setStyles({
\r
233 'position' : 'absolute',
\r
237 assert.areEqual( 'absolute', document.getElementById( 'setStyle' ).style.position );
\r
238 assert.areEqual( 'right', document.getElementById( 'setStyle' ).style.cssFloat );
\r
241 test_setText1 : function()
\r
243 var element = new CKEDITOR.dom.element( document.getElementById( 'setText' ) );
\r
244 element.setText( 'A & B' );
\r
245 assert.areSame( 'A & B', document.getElementById( 'setText' ).innerHTML );
\r
248 test_setText2 : function()
\r
250 var element = new CKEDITOR.dom.element( document.getElementById( 'setText' ) );
\r
251 element.setText( 'C & D' );
\r
252 assert.areSame( 'C & D', document.getElementById( 'setText' ).innerHTML );
\r
255 test_addClass1 : function()
\r
257 var element = new CKEDITOR.dom.element( 'div' );
\r
258 element.addClass( 'classA' );
\r
259 assert.areSame( 'classA', element.$.className );
\r
262 test_addClass2 : function()
\r
264 var element = new CKEDITOR.dom.element( 'div' );
\r
265 element.addClass( 'classA' );
\r
266 element.addClass( 'classA' );
\r
267 assert.areSame( 'classA', element.$.className );
\r
270 test_addClass3 : function()
\r
272 var element = new CKEDITOR.dom.element( 'div' );
\r
273 element.addClass( 'classA' );
\r
274 element.addClass( 'classB' );
\r
275 element.addClass( 'classC' );
\r
276 assert.areSame( 'classA classB classC', element.$.className );
\r
279 test_addClass4 : function()
\r
281 var element = new CKEDITOR.dom.element( 'div' );
\r
282 element.addClass( 'classA' );
\r
283 element.addClass( 'classB' );
\r
284 element.addClass( 'classC' );
\r
285 element.addClass( 'classA' );
\r
286 element.addClass( 'classB' );
\r
287 element.addClass( 'classC' );
\r
288 assert.areSame( 'classA classB classC', element.$.className );
\r
291 test_removeClass1 : function()
\r
293 document.getElementById( 'removeClass' ).innerHTML = '';
\r
295 var element = CKEDITOR.dom.element.createFromHtml( '<div class="classA"></div>' );
\r
296 element.appendTo( new CKEDITOR.dom.element( document.getElementById( 'removeClass' ) ) );
\r
298 assert.areSame( '<div class="classa"></div>', getInnerHtml( 'removeClass' ) );
\r
299 element.removeClass( 'classA' );
\r
300 assert.areSame( '<div></div>', getInnerHtml( 'removeClass' ) );
\r
303 test_removeClass2 : function()
\r
305 document.getElementById( 'removeClass' ).innerHTML = '';
\r
307 var element = CKEDITOR.dom.element.createFromHtml( '<div class="classA classB classC classD"></div>' );
\r
308 element.appendTo( new CKEDITOR.dom.element( document.getElementById( 'removeClass' ) ) );
\r
310 assert.areSame( '<div class="classa classb classc classd"></div>', getInnerHtml( 'removeClass' ) );
\r
311 element.removeClass( 'classA' );
\r
312 assert.areSame( '<div class="classb classc classd"></div>', getInnerHtml( 'removeClass' ) );
\r
313 element.removeClass( 'classC' );
\r
314 assert.areSame( '<div class="classb classd"></div>', getInnerHtml( 'removeClass' ) );
\r
315 element.removeClass( 'classD' );
\r
316 assert.areSame( '<div class="classb"></div>', getInnerHtml( 'removeClass' ) );
\r
317 element.removeClass( 'classB' );
\r
318 assert.areSame( '<div></div>', getInnerHtml( 'removeClass' ) );
\r
321 test_removeClass3 : function()
\r
323 document.getElementById( 'removeClass' ).innerHTML = '';
\r
325 var element = CKEDITOR.dom.element.createFromHtml( '<div class="classA classB"></div>' );
\r
326 element.appendTo( new CKEDITOR.dom.element( document.getElementById( 'removeClass' ) ) );
\r
328 assert.areSame( '<div class="classa classb"></div>', getInnerHtml( 'removeClass' ) );
\r
329 element.removeClass( 'classXXX' );
\r
330 assert.areSame( '<div class="classa classb"></div>', getInnerHtml( 'removeClass' ) );
\r
331 element.removeClass( 'classB' );
\r
332 assert.areSame( '<div class="classa"></div>', getInnerHtml( 'removeClass' ) );
\r
333 element.removeClass( 'classYYY' );
\r
334 assert.areSame( '<div class="classa"></div>', getInnerHtml( 'removeClass' ) );
\r
337 test_removeAttribute1 : function()
\r
339 document.getElementById( 'removeClass' ).innerHTML = '';
\r
341 var element = CKEDITOR.dom.element.createFromHtml( '<div class="classA"></div>' );
\r
342 element.appendTo( new CKEDITOR.dom.element( document.getElementById( 'removeClass' ) ) );
\r
344 element.removeAttribute( 'class' );
\r
345 assert.areSame( '<div></div>', getInnerHtml( 'removeClass' ) );
\r
348 test_removeAttribute2 : function()
\r
350 document.getElementById( 'removeClass' ).innerHTML = '';
\r
352 var element = CKEDITOR.dom.element.createFromHtml( '<div style="position:absolute"></div>' );
\r
353 element.appendTo( new CKEDITOR.dom.element( document.getElementById( 'removeClass' ) ) );
\r
355 element.removeAttribute( 'style' );
\r
356 assert.areSame( '<div></div>', getInnerHtml( 'removeClass' ) );
\r
359 test_removeAttribute3 : function()
\r
361 document.getElementById( 'removeClass' ).innerHTML = '';
\r
363 var element = CKEDITOR.dom.element.createFromHtml( '<div title="Test"></div>' );
\r
364 element.appendTo( new CKEDITOR.dom.element( document.getElementById( 'removeClass' ) ) );
\r
366 element.removeAttribute( 'title' );
\r
367 assert.areSame( '<div></div>', getInnerHtml( 'removeClass' ) );
\r
370 test_remove : function()
\r
372 var element = new CKEDITOR.dom.element( document.getElementById( 'removeInner' ) );
\r
375 assert.areSame( '', getInnerHtml( 'removeOuter' ) );
\r
378 test_getAttribute_tabindex1 : function()
\r
380 var element = new CKEDITOR.dom.element( document.getElementById( 'tabIndex10' ) );
\r
381 assert.areEqual( 10, CKEDITOR.test.getAttribute( element, 'tabindex' ) );
\r
384 test_getAttribute_tabindex2 : function()
\r
386 var element = new CKEDITOR.dom.element( document.getElementById( 'tabIndexDef' ) );
\r
387 assert.isNull( CKEDITOR.test.getAttribute( element, 'tabindex' ) );
\r
390 test_getAttribute_tabindex3 : function()
\r
392 var element = new CKEDITOR.dom.element( document.getElementById( 'tabIndexInputDef' ) );
\r
393 assert.isNull( CKEDITOR.test.getAttribute( element, 'tabindex' ) );
\r
396 test_getAttribute_tabindex4 : function()
\r
398 var element = new CKEDITOR.dom.element( document.getElementById( 'tabIndexInput20' ) );
\r
399 assert.areEqual( 20, CKEDITOR.test.getAttribute( element, 'tabindex' ) );
\r
402 test_getAttribute_tabindex5 : function()
\r
404 var element = new CKEDITOR.dom.element( document.getElementById( 'tabIndexScriptDef' ) );
\r
405 assert.areEqual( null, CKEDITOR.test.getAttribute( element, 'tabindex' ) );
\r
409 * Test getAttribute and getAttribute will ingore '_cke_expando' attribute.
\r
411 test_getAttribute_ignoreExpandoAttributes : function()
\r
413 var element = new CKEDITOR.dom.element( document.getElementById( 'testExpandoAttributes' ) );
\r
415 assert.areEqual( 1, CKEDITOR.test.getAttribute( element, 'tabindex' ), 'tabindex is wrong' );
\r
416 element.removeAttribute( 'tabindex' );
\r
418 assert.areEqual( 'hasExpando', CKEDITOR.test.getAttribute( element, 'class' ), 'class is wrong' );
\r
419 element.removeAttribute( 'class' );
\r
421 assert.areEqual( 'float: right;', CKEDITOR.test.getAttribute( element, 'style' ) );
\r
423 element.removeAttribute( 'style' );
\r
424 element.removeAttribute( 'id' );
\r
425 assert.isFalse( element.hasAttributes(), 'hasAttributes should be false' );
\r
428 test_getTabIndex1 : function()
\r
430 var element = new CKEDITOR.dom.element( document.getElementById( 'tabIndex10' ) );
\r
431 assert.areSame( 10, element.getTabIndex() );
\r
434 test_getTabIndex2 : function()
\r
436 var element = new CKEDITOR.dom.element( document.getElementById( 'tabIndexDef' ) );
\r
437 assert.areSame( -1, element.getTabIndex() );
\r
440 test_getTabIndex3 : function()
\r
442 var element = new CKEDITOR.dom.element( document.getElementById( 'tabIndexInputDef' ) );
\r
443 assert.areSame( 0, element.getTabIndex() );
\r
446 test_getTabIndex4 : function()
\r
448 var element = new CKEDITOR.dom.element( document.getElementById( 'tabIndexInput20' ) );
\r
449 assert.areSame( 20, element.getTabIndex() );
\r
452 test_getTabIndex5 : function()
\r
454 var element = new CKEDITOR.dom.element( document.getElementById( 'tabIndexScriptDef' ) );
\r
455 assert.areSame( -1, element.getTabIndex() );
\r
458 test_private1 : function()
\r
460 var a = new CKEDITOR.dom.element( document.getElementById( 'test1' ) );
\r
461 var b = new CKEDITOR.dom.element( document.getElementById( 'test1' ) );
\r
463 assert.areSame( a.getPrivate(), b.getPrivate() );
\r
466 test_private2 : function()
\r
468 var a = new CKEDITOR.dom.element( document.getElementById( 'test1' ) );
\r
469 var b = new CKEDITOR.dom.element( document.getElementById( 'test2' ) );
\r
471 assert.areNotSame( a.getPrivate(), b.getPrivate() );
\r
474 test_getText1 : function()
\r
476 var element = new CKEDITOR.dom.element( document.getElementById( 'getText' ) );
\r
478 // IE gives us a different result, which is ok for us (see code comments).
\r
479 if ( CKEDITOR.env.ie )
\r
480 assert.areSame( 'Some \nsample text for testing', element.getText().replace( /\r\n|\r/g, '\n' ) );
\r
482 assert.areSame( 'Some sample text for testing', element.getText() );
\r
485 test_getText2 : function()
\r
487 var element = new CKEDITOR.dom.element( document.getElementById( 'getText2' ).getElementsByTagName( 'b' )[0] );
\r
488 assert.areSame( ' ', element.getText() );
\r
491 test_getText3 : function()
\r
493 var element = new CKEDITOR.dom.element( document.getElementById( 'getText3' ) );
\r
495 // IE gives us a different result, which is ok for us (see code comments).
\r
496 if ( CKEDITOR.env.ie )
\r
497 assert.areSame( 'A B', element.getText() );
\r
499 assert.areSame( 'A\nB', element.getText().replace( /\r\n|\r/g, '\n' ) );
\r
502 test_hasAttributes1 : function()
\r
504 var element = new CKEDITOR.dom.element( document.getElementsByTagName( 'big' )[0] );
\r
505 assert.isFalse( element.hasAttributes() );
\r
508 test_hasAttributes2 : function()
\r
510 var element = new CKEDITOR.dom.element( document.getElementsByTagName( 'small' )[0] );
\r
511 assert.isTrue( element.hasAttributes() );
\r
515 * Test detecting of 'class' attribute in IE6/7.
\r
517 test_hasAttributes_4075 : function()
\r
519 if ( !CKEDITOR.env.ie && ( CKEDITOR.env.ie7Compat || CKEDITOR.env.ie6Compat ) )
\r
521 var element = new CKEDITOR.dom.element( 'span' );
\r
522 element.setAttribute( 'class', 'value' );
\r
523 assert.isTrue( element.hasAttributes(), 'Failed to detect "class" attribute existence.' );
\r
526 test_getDocumentPosition : function()
\r
528 // Assign the page location of the element.
\r
529 YAHOO.util.Dom.setXY('DocPositionTarget', [ 350, 450 ] );
\r
530 var pos = CKEDITOR.document.getById( 'DocPositionTarget' ).getDocumentPosition();
\r
531 if ( !CKEDITOR.env.ie || CKEDITOR.env.ie8 )
\r
533 assert.areEqual( 350, pos.x, 'Position coordinates:x relative to document doesn\'t match.' );
\r
534 assert.areEqual( 450, pos.y, 'Position coordinates:y relative to document doesn\'t match.' );
\r
538 assert.isTrue( pos.x == 348 || pos.x == 349, 'Position coordinates:x relative to document doesn\'t match.' );
\r
539 assert.areEqual( 448, pos.y, 'Position coordinates:y relative to document doesn\'t match.' );
\r
543 // Test get last non-spaces child node.
\r
544 test_getLast : function()
\r
546 var element = new CKEDITOR.dom.element( document.getElementById( 'append' ) );
\r
547 var span1 = new CKEDITOR.dom.element( 'span' );
\r
548 element.append( span1 );
\r
549 element.append( new CKEDITOR.dom.text( ' ' ) );
\r
550 element.append( new CKEDITOR.dom.text( ' ' ) );
\r
551 var last = element.getLast( CKEDITOR.dom.walker.whitespaces( true ) );
\r
552 assert.areSame( span1.$, last.$ );
\r
556 name : document.title
\r
562 <style type="text/css" media="screen">
\r
577 background-color: blue;
\r
578 text-align: center;
\r
585 background-color: green;
\r
586 position : relative;
\r
590 position: absolute;
\r
594 background-color: black;
\r
598 position: absolute;
\r
603 background-color: pink;
\r
607 background-color: red;
\r
612 <textarea id="test1" rows="10" cols="80"></textarea>
\r
613 <textarea id="test2" rows="10" cols="80"></textarea>
\r
614 <textarea name="named1" rows="10" cols="80"></textarea>
\r
616 <div id="append"></div>
\r
617 <div id="setStyle"></div>
\r
618 <div id="setText"></div>
\r
619 <div id="removeClass"></div>
\r
620 <div id="removeOuter"><b id="removeInner"></b></div>
\r
621 <div id="tabIndex10" tabindex="10"></div>
\r
622 <div id="testExpandoAttributes" _cke_expando ="1" class="hasExpando" tabindex="1" style="float:right"></div>
\r
623 <div id="tabIndexDef"></div>
\r
624 <input id="tabIndexInputDef" />
\r
625 <input id="tabIndexInput20" tabindex="20" />
\r
626 <script id="tabIndexScriptDef" type="text/javascript"></script>
\r
627 <div id="getText">Some <br /><b> sample text</b> for <i> testing</i></div>
\r
628 <div id="getText2">A<b> </b>B</div>
\r
629 <div id="getText3">A
\r
632 <small title="Testing">Test</small>
\r
634 <div class="block1 scroll" id="block1"><div class="block2 scroll" id="block2"><div class="block3 scroll" id="block3"><div class="block4 scroll" id="block4"><div id="DocPositionTarget">target</div></div></div></div></div>
\r