Your IP : 216.73.216.40
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Unit tests for DOM Selection IE implementation</title>
<link rel="stylesheet" href="qunit/qunit.css" type="text/css" media="screen">
<script type="text/javascript" src="qunit/qunit.js"></script>
<script type="text/javascript" src="qunit/runner.js"></script>
<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
</head>
<body>
<script type="text/javascript">
var editor, rng;
QUnit.config.autostart = false;
module("IE Selection", {
autostart: false
});
if (tinyMCE.isIE && !window.getSelection) {
test("Selection of element containing text", function(){
expect(5);
editor.setContent('<p>123</p>', {
format: 'raw'
});
rng = editor.dom.createRng();
rng.setStart(editor.getBody(), 0);
rng.setEnd(editor.getBody(), 1);
editor.selection.setRng(rng);
rng = editor.selection.getRng(1);
equals(rng.startContainer.nodeName, '#text', 'Start container is text node');
equals(rng.endContainer.nodeName, '#text', 'End container is text node');
equals(rng.startOffset, 0, 'Start of text node');
equals(rng.endOffset, 3, 'End of text node');
equals(editor.dom.getOuterHTML(rng.cloneContents()), '123', 'Contents matches');
});
test("Single image selection", function(){
expect(6);
editor.setContent('<img src="about:blank" />', {
format: 'raw'
});
rng = editor.dom.createRng();
rng.setStartBefore(editor.dom.select('img')[0]);
rng.setEndAfter(editor.dom.select('img')[0]);
editor.selection.setRng(rng);
rng = editor.selection.getRng(1);
equals(rng.startContainer.nodeName, 'P', 'Check startContainer');
equals(rng.endContainer.nodeName, 'P', 'Check endContainer');
equals(rng.startOffset, 0, 'Check startOffset');
equals(rng.endOffset, 1, 'Check endOffset');
equals(editor.dom.getOuterHTML(rng.cloneContents()).toLowerCase(), '<img src="about:blank" _mce_src="about:blank">', 'Check contents');
ok(editor.selection.getRng().item, 'Check if it\'s a control selection');
});
test("Multiple image selection", function(){
expect(6);
editor.setContent('<img src="about:blank" /><img src="about:blank" />', {
format: 'raw'
});
rng = editor.dom.createRng();
rng.setStartBefore(editor.dom.select('img')[0]);
rng.setEndAfter(editor.dom.select('img')[1]);
editor.selection.setRng(rng);
rng = editor.selection.getRng(1);
equals(rng.startContainer.nodeName, 'P');
equals(rng.endContainer.nodeName, 'P');
equals(rng.startOffset, 0);
equals(rng.endOffset, 2);
equals(editor.dom.getOuterHTML(rng.cloneContents()).toLowerCase(), '<img src="about:blank" _mce_src="about:blank"><img src="about:blank" _mce_src="about:blank">');
ok(editor.selection.getRng().parentElement, 'Is text selection');
});
test("Text node selection", function(){
expect(5);
editor.setContent('<p>1234</p>', {
format: 'raw'
});
rng = editor.dom.createRng();
rng.setStart(editor.getBody().firstChild.firstChild, 1);
rng.setEnd(editor.getBody().firstChild.firstChild, 3);
editor.selection.setRng(rng);
rng = editor.selection.getRng(1);
equals(rng.startContainer.nodeName, '#text');
equals(rng.endContainer.nodeName, '#text');
equals(rng.startOffset, 1);
equals(rng.endOffset, 3);
equals(editor.dom.getOuterHTML(rng.cloneContents()), '23');
});
test("Text node selection between two elements", function(){
expect(5);
editor.setContent('<p>1234</p><p>abcd</p>', {
format: 'raw'
});
rng = editor.dom.createRng();
rng.setStart(editor.getBody().firstChild.firstChild, 1);
rng.setEnd(editor.getBody().childNodes[1].firstChild, 3);
editor.selection.setRng(rng);
rng = editor.selection.getRng(1);
equals(rng.startContainer.nodeName, '#text');
equals(rng.endContainer.nodeName, '#text');
equals(rng.startOffset, 1);
equals(rng.endOffset, 3);
equals(editor.dom.getOuterHTML(rng.cloneContents()).replace(/[\r\n]/g, '').toLowerCase(), '<p>234</p><p>abc</p>');
editor.setContent('<p>1</p><p>1234</p><p>abcd</p><p>2</p>', {
format: 'raw'
});
/*
rng = editor.dom.createRng();
rng.setStartBefore(editor.dom.select('p')[1]);
rng.setEndAfter(editor.dom.select('p')[2]);
editor.selection.setRng(rng);
rng = editor.selection.getRng(1);
equals(rng.startContainer.nodeName, 'BODY', "startContainer type check");
equals(rng.startOffset, 1, "startOffset doesn't match");
equals(rng.endContainer.nodeName, 'BODY', "endContainer type check");
equals(rng.endOffset, 3, "endOffset doesn't match");
equals(editor.dom.getOuterHTML(rng.cloneContents()).replace(/[\r\n]/g, '').toLowerCase(), '<p>1234</p><p>abcd</p>');*/
});
test("Mixed selection start at element end at text", function(){
expect(5);
editor.setContent('<img src="about:blank" />text', {
format: 'raw'
});
rng = editor.dom.createRng();
rng.setStartBefore(editor.dom.select('img')[0]);
rng.setEnd(editor.getBody().firstChild.lastChild, 3);
editor.selection.setRng(rng);
rng = editor.selection.getRng(1);
equals(rng.startContainer.nodeName, 'P');
equals(rng.endContainer.nodeName, '#text');
equals(rng.startOffset, 0);
equals(rng.endOffset, 3);
equals(editor.dom.getOuterHTML(rng.cloneContents()).toLowerCase(), '<img src="about:blank" _mce_src="about:blank">tex');
});
test("Mixed selection start at text end at element", function(){
expect(5);
editor.setContent('text<img src="about:blank" />', {
format: 'raw'
});
rng = editor.dom.createRng();
rng.setStart(editor.getBody().firstChild.firstChild, 1);
rng.setEndAfter(editor.getBody().firstChild.lastChild);
editor.selection.setRng(rng);
rng = editor.selection.getRng(1);
equals(rng.startContainer.nodeName, '#text');
equals(rng.startOffset, 1);
equals(rng.endContainer.nodeName, 'P');
equals(rng.endOffset, 2);
equals(editor.dom.getOuterHTML(rng.cloneContents()).toLowerCase(), 'ext<img src="about:blank" _mce_src="about:blank">');
});
test("Caret position before image", function(){
expect(4);
editor.setContent('<p><img src="about:blank" /><img src="about:blank" /></p>', {
format: 'raw'
});
rng = editor.dom.createRng();
rng.setStartBefore(editor.dom.select('img')[0]);
rng.setEndBefore(editor.dom.select('img')[0]);
editor.selection.setRng(rng);
rng = editor.selection.getRng(1);
equals(rng.startContainer.nodeName, 'P');
equals(rng.endContainer.nodeName, 'P');
equals(rng.startOffset, 0);
equals(rng.endOffset, 0);
});
test("Caret position between images", function(){
expect(4);
editor.setContent('<p><img src="about:blank" /><img src="about:blank" /></p>', {
format: 'raw'
});
rng = editor.dom.createRng();
rng.setStartAfter(editor.dom.select('img')[0]);
rng.setEndAfter(editor.dom.select('img')[0]);
editor.selection.setRng(rng);
rng = editor.selection.getRng(1);
equals(rng.startContainer.nodeName, 'P');
equals(rng.endContainer.nodeName, 'P');
equals(rng.startOffset, 1);
equals(rng.endOffset, 1);
});
test("Caret position after image", function(){
expect(4);
editor.setContent('<p><img src="about:blank" /><img src="about:blank" /></p>', {
format: 'raw'
});
rng = editor.dom.createRng();
rng.setStartAfter(editor.dom.select('img')[1]);
rng.setEndAfter(editor.dom.select('img')[1]);
editor.selection.setRng(rng);
rng = editor.selection.getRng(1);
equals(rng.startContainer.nodeName, 'P');
equals(rng.endContainer.nodeName, 'P');
equals(rng.startOffset, 2);
equals(rng.endOffset, 2);
});
test("Selection of empty text element", function(){
expect(6);
editor.setContent('<div></div>', {
format: 'raw'
});
rng = editor.dom.createRng();
rng.setStart(editor.getBody(), 0);
rng.setEnd(editor.getBody(), 1);
editor.selection.setRng(rng);
rng = editor.selection.getRng(true);
equals(rng.startContainer.nodeName, 'BODY');
equals(rng.endContainer.nodeName, 'BODY');
equals(rng.startOffset, 0);
equals(rng.endOffset, 1);
equals(rng.startContainer.childNodes[0].innerHTML, '');
equals(editor.dom.getOuterHTML(rng.cloneContents()).toLowerCase(), '<div></div>');
});
test("Caret position before table", function() {
var table, rng;
editor.focus();
editor.setContent('<p>Before</p><table id="table" border="1"><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></table><p>After</p>');
table = editor.dom.get('table');
rng = editor.selection.getRng();
rng.moveToElementText(table);
rng.move('character', -1);
rng.select();
rng = editor.selection.getRng(1);
equals(rng.startContainer.nodeName, 'BODY');
equals(rng.startOffset, 1);
equals(rng.endContainer.nodeName, 'BODY');
equals(rng.endOffset, 1);
});
test("Selection end within empty element", function() {
var rng;
editor.focus();
editor.getBody().innerHTML = '<p>123</p><p></p>';
rng = editor.execCommand('SelectAll');
rng = editor.selection.getRng(true);
equals(rng.startContainer.nodeName, '#text');
equals(rng.startOffset, 0);
equals(rng.endContainer.nodeName, 'BODY');
equals(rng.endOffset, 2);
});
test("Selection after paragraph", function() {
var rng;
editor.focus();
editor.getBody().innerHTML = '<p>123</p><p>abcd</p>';
rng = editor.dom.createRng();
rng.setStart(editor.getBody().firstChild, 1);
rng.setEnd(editor.getBody().firstChild, 1);
editor.selection.setRng(rng);
rng = editor.selection.getRng(true);
ok(rng.startContainer == rng.endContainer);
equals(rng.startContainer.nodeName, '#text');
equals(rng.startOffset, 3);
equals(rng.endContainer.nodeName, '#text');
equals(rng.endOffset, 3);
});
} else {
test("Skipped ie_selection tests as not running in IE.", function() {});
}
function getCaretInfo() {
editor.focus();
var rng = editor.selection.getRng(1);
alert(rng.startContainer + " - " + rng.startOffset);
alert(rng.endContainer + " - " + rng.endOffset);
editor.focus();
}
tinyMCE.init({
mode : "exact",
elements : "elm1",
theme : "advanced",
add_unload_trigger : false,
init_instance_callback : function(ed) {
editor = ed;
QUnit.start();
}
});
</script>
<h1 id="qunit-header">Unit tests for DOM Selection IE implementation</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="content">
<textarea id="elm1" name="elm1"></textarea>
<div>
<a href="javascript:alert(tinymce.EditorManager.get('elm1').getContent({format : 'raw'}));">[getRawContents]</a>
<a href="javascript:alert(tinymce.EditorManager.get('elm1').getContent());">[getContents]</a>
<a href="javascript:getCaretInfo();">[getCaretInfo]</a>
</div>
</div>
</body>
</html>