third_party/WebKit/LayoutTests/accessibility/contenteditable-caret-position.html - chromium/src.git - Git at Google

 <!DOCTYPE html>
 <script src="../resources/testharness.js"></script>
 <script src="../resources/testharnessreport.js"></script>

 <div id="main" role="main">

     <div id="contenteditable-textbox" role="textbox" contenteditable="true">
         <div id="contenteditable-line1">Line 1</div>
         <textarea id="contenteditable-line2" rows="1" cols="40">Line 2</textarea>
     </div>

     <div id="contenteditable-div" contenteditable>
         <p id="paragraph1">Line 1<br>
             Line 2</p>
         <p id="paragraph2">Line 3</p>
     </div>

 </div>

 <script>
     test(function()
     {
         var mainAccessible = accessibilityController.accessibleElementById("main");

         assert_equals(mainAccessible.selectionStart, 0);
         assert_equals(mainAccessible.selectionEnd, 0);
     }, "Initially there should be no selection under the main object.");
 </script>

 <script>
     test(function()
     {
         var rootAccessible = accessibilityController.rootElement;

         assert_equals(rootAccessible.selectionAnchorObject, null);
         assert_equals(rootAccessible.selectionAnchorOffset, -1);
         assert_equals(rootAccessible.selectionFocusObject, null);
         assert_equals(rootAccessible.selectionFocusOffset, -1);
     }, "Initially there should be no selection on the root object.");
 </script>

 <script>
     test(function()
     {
         var textbox = document.getElementById("contenteditable-textbox");
         textbox.focus();
         var textboxAccessible = accessibilityController.accessibleElementById("contenteditable-textbox");

         assert_equals(textboxAccessible.selectionStart, 0);
         assert_equals(textboxAccessible.selectionEnd, 0);
     }, "Moving the focus to an ARIA textbox should place the caret at its beginning.");
 </script>

 <script>
     test(function()
     {
         var selection = window.getSelection();
         var selectionRange = document.createRange();
         var textboxAccessible = accessibilityController.accessibleElementById("contenteditable-textbox");
         var mainAccessible = accessibilityController.accessibleElementById("main");
         var rootAccessible = accessibilityController.rootElement;
         var line1 = document.getElementById("contenteditable-line1");
         var line1Accessible = accessibilityController.accessibleElementById("contenteditable-line1");
         var line1TextAccessible = line1Accessible.childAtIndex(0);

         selectionRange.setStart(line1.firstChild, 1);
         selectionRange.setEnd(line1.firstChild, 1);
         selection.removeAllRanges();
         selection.addRange(selectionRange);

         assert_equals(textboxAccessible.selectionStart, 1);
         assert_equals(textboxAccessible.selectionEnd, 1);

         assert_equals(mainAccessible.selectionStart, 1);
         assert_equals(mainAccessible.selectionEnd, 1);

         assert_equals(rootAccessible.selectionAnchorObject, line1TextAccessible);
         assert_equals(rootAccessible.selectionAnchorOffset, 1);
         assert_equals(rootAccessible.selectionFocusObject, line1TextAccessible);
         assert_equals(rootAccessible.selectionFocusOffset, 1);
     }, "Setting a new caret position in the ARIA textbox should be reflected in the accessibility APIs.");
 </script>

 <script>
     test(function()
     {
         var selection = window.getSelection();
         var textboxAccessible = accessibilityController.accessibleElementById("contenteditable-textbox");
         var mainAccessible = accessibilityController.accessibleElementById("main");
         var rootAccessible = accessibilityController.rootElement;

         selection.removeAllRanges();

         assert_equals(textboxAccessible.selectionStart, 0);
         assert_equals(textboxAccessible.selectionEnd, 0);

         assert_equals(mainAccessible.selectionStart, 0);
         assert_equals(mainAccessible.selectionEnd, 0);

         assert_equals(rootAccessible.selectionAnchorObject, null);
         assert_equals(rootAccessible.selectionAnchorOffset, -1);
         assert_equals(rootAccessible.selectionFocusObject, null);
         assert_equals(rootAccessible.selectionFocusOffset, -1);
     }, "Removing the selection should remove the caret completely.");
 </script>

 <script>
     test(function()
     {
         var selection = window.getSelection();
         var textboxAccessible = accessibilityController.accessibleElementById("contenteditable-textbox");
         var mainAccessible = accessibilityController.accessibleElementById("main");
         var rootAccessible = accessibilityController.rootElement;
         var line1Accessible = accessibilityController.accessibleElementById("contenteditable-line1");
         var line1TextAccessible = line1Accessible.childAtIndex(0);

         line1TextAccessible.setSelectedTextRange(2, 0);

         assert_equals(textboxAccessible.selectionStart, 2);
         assert_equals(textboxAccessible.selectionEnd, 2);

         assert_equals(mainAccessible.selectionStart, 2);
         assert_equals(mainAccessible.selectionEnd, 2);

         assert_equals(rootAccessible.selectionAnchorObject, line1TextAccessible);
         assert_equals(rootAccessible.selectionAnchorOffset, 2);
         assert_equals(rootAccessible.selectionFocusObject, line1TextAccessible);
         assert_equals(rootAccessible.selectionFocusOffset, 2);
     }, "Positioning the caret using the accessibility API instead of the DOM should work.");
 </script>

 <script>
     test(function()
     {
         var textboxAccessible = accessibilityController.accessibleElementById("contenteditable-textbox");
         var mainAccessible = accessibilityController.accessibleElementById("main");
         var line2 = document.getElementById("contenteditable-line2");
         line2.focus();

         assert_equals(textboxAccessible.selectionStart, 0);
         assert_equals(textboxAccessible.selectionEnd, 0);

         assert_equals(mainAccessible.selectionStart, 0);
         assert_equals(mainAccessible.selectionEnd, 0);
     }, "Moving the focus into a textarea should remove the caret from the ARIA textbox.");
 </script>

 <script>
     test(function()
     {
         var rootAccessible = accessibilityController.rootElement;
         var line2Accessible = accessibilityController.focusedElement;

         assert_equals(rootAccessible.selectionAnchorObject, line2Accessible);
         assert_equals(rootAccessible.selectionAnchorOffset, 0);
         assert_equals(rootAccessible.selectionFocusObject, line2Accessible);
         assert_equals(rootAccessible.selectionFocusOffset, 0);

         assert_equals(line2Accessible.selectionStart, 0);
         assert_equals(line2Accessible.selectionEnd, 0);
     }, "Standard text fields start with the caret at the beginning of their contents.");
 </script>

 <script>
     test(function()
     {
         var line2 = document.getElementById("contenteditable-line2");
         var line2Accessible = accessibilityController.focusedElement;

         line2.setSelectionRange(3, 3);

         assert_equals(line2Accessible.selectionStart, 3);
         assert_equals(line2Accessible.selectionEnd, 3);
     }, "Setting a new caret position in the textarea should be exposed in the accessibility APIs.");
 </script>

 <script>
     test(function()
     {
         var textboxAccessible = accessibilityController.accessibleElementById("contenteditable-textbox");
         var mainAccessible = accessibilityController.accessibleElementById("main");
         var rootAccessible = accessibilityController.rootElement;
         var line2Accessible = accessibilityController.focusedElement;

         assert_equals(textboxAccessible.selectionStart, 3);
         assert_equals(textboxAccessible.selectionEnd, 3);

         assert_equals(mainAccessible.selectionStart, 3);
         assert_equals(mainAccessible.selectionEnd, 3);

         assert_equals(rootAccessible.selectionAnchorObject, line2Accessible);
         assert_equals(rootAccessible.selectionAnchorOffset, 3);
         assert_equals(rootAccessible.selectionFocusObject, line2Accessible);
         assert_equals(rootAccessible.selectionFocusOffset, 3);
     }, "Offsets in text fields should be reported from the beginning of the field and not from the top of the container.");
 </script>

 <script>
     test(function()
     {
         var line1Accessible = accessibilityController.accessibleElementById("contenteditable-line1");
         var line2Accessible = accessibilityController.accessibleElementById("contenteditable-line2");

         assert_equals(line1Accessible.selectionAnchorObject, line2Accessible);
         assert_equals(line1Accessible.selectionAnchorOffset, 3);
         assert_equals(line1Accessible.selectionFocusObject, line2Accessible);
         assert_equals(line1Accessible.selectionFocusOffset, 3);
         assert_equals(line2Accessible.selectionAnchorObject, line2Accessible);
         assert_equals(line2Accessible.selectionAnchorOffset, 3);
         assert_equals(line2Accessible.selectionFocusObject, line2Accessible);
         assert_equals(line2Accessible.selectionFocusOffset, 3);
     }, "The caret position should be retrievable from any object.");
 </script>

 <script>
     test(function()
     {
         var selection = window.getSelection();
         var selectionRange = document.createRange();
         var mainAccessible = accessibilityController.accessibleElementById("main");
         var rootAccessible = accessibilityController.rootElement;

         var contenteditable = document.getElementById("contenteditable-div");
         contenteditable.focus();
         // The offset from the beginning of the main div to the first character of
         // contenteditable-div.
         var mainOffset = 9;
         // The offset from the newline character between the two lines of the
         // first paragraph to the first character of its second line.
         // (Needed for skipping wide space.)
         var line2Offset = 13;

         var line1 = document.getElementById("paragraph1").firstChild;
         var line2 = document.getElementById("paragraph1").lastChild;
         var line3 = document.getElementById("paragraph2").firstChild;
         var contenteditableLines = [ line1, line2, line3 ];
         var contenteditableAccessible = accessibilityController.accessibleElementById("contenteditable-div");

         for (var lineNumber = 0; lineNumber < 3; ++lineNumber) {
             var lineOffset = lineNumber * 7;
             // Paragraphs should be separated by an empty line.
             if (lineNumber == 2)
                 ++lineOffset;

             for (var characterOffset = 0; characterOffset < 7; ++characterOffset) {
                 // Any widespace in the DOM should be stripped out.
                 var selectionOffset = characterOffset;
                 if (lineNumber == 1)
                     selectionOffset += line2Offset;
                 var caretPosition = lineOffset + characterOffset;

                 selectionRange.setStart(contenteditableLines[lineNumber], selectionOffset);
                 selectionRange.setEnd(contenteditableLines[lineNumber], selectionOffset);
                 selection.removeAllRanges();
                 selection.addRange(selectionRange);

                 assert_equals(contenteditableAccessible.selectionStart, caretPosition);
                 assert_equals(contenteditableAccessible.selectionEnd, caretPosition);

                 assert_equals(mainAccessible.selectionStart,
                     mainOffset + caretPosition);
                 assert_equals(mainAccessible.selectionEnd,
                     mainOffset + caretPosition);

                 assert_equals(rootAccessible.selectionAnchorObject.name,
                     contenteditableLines[lineNumber].textContent.trim());
                 assert_equals(rootAccessible.selectionAnchorOffset,
                     characterOffset);
                 assert_equals(rootAccessible.selectionFocusObject.name,
                     contenteditableLines[lineNumber].textContent.trim());
                 assert_equals(rootAccessible.selectionFocusOffset,
                     characterOffset);
             }
         }

     }, "Test moving the caret across two paragraphs.");
 </script>

 <script>
     if (window.testRunner)
         document.getElementById("main").style.display = "none";;
 </script>
	<!DOCTYPE html>
	<script src="../resources/testharness.js"></script>
	<script src="../resources/testharnessreport.js"></script>

	<div id="main" role="main">

	<div id="contenteditable-textbox" role="textbox" contenteditable="true">
	<div id="contenteditable-line1">Line 1</div>
	<textarea id="contenteditable-line2" rows="1" cols="40">Line 2</textarea>
	</div>

	<div id="contenteditable-div" contenteditable>
	<p id="paragraph1">Line 1<br>
	Line 2</p>
	<p id="paragraph2">Line 3</p>
	</div>

	</div>

	<script>
	test(function()
	{
	var mainAccessible = accessibilityController.accessibleElementById("main");

	assert_equals(mainAccessible.selectionStart, 0);
	assert_equals(mainAccessible.selectionEnd, 0);
	}, "Initially there should be no selection under the main object.");
	</script>

	<script>
	test(function()
	{
	var rootAccessible = accessibilityController.rootElement;

	assert_equals(rootAccessible.selectionAnchorObject, null);
	assert_equals(rootAccessible.selectionAnchorOffset, -1);
	assert_equals(rootAccessible.selectionFocusObject, null);
	assert_equals(rootAccessible.selectionFocusOffset, -1);
	}, "Initially there should be no selection on the root object.");
	</script>

	<script>
	test(function()
	{
	var textbox = document.getElementById("contenteditable-textbox");
	textbox.focus();
	var textboxAccessible = accessibilityController.accessibleElementById("contenteditable-textbox");

	assert_equals(textboxAccessible.selectionStart, 0);
	assert_equals(textboxAccessible.selectionEnd, 0);
	}, "Moving the focus to an ARIA textbox should place the caret at its beginning.");
	</script>

	<script>
	test(function()
	{
	var selection = window.getSelection();
	var selectionRange = document.createRange();
	var textboxAccessible = accessibilityController.accessibleElementById("contenteditable-textbox");
	var mainAccessible = accessibilityController.accessibleElementById("main");
	var rootAccessible = accessibilityController.rootElement;
	var line1 = document.getElementById("contenteditable-line1");
	var line1Accessible = accessibilityController.accessibleElementById("contenteditable-line1");
	var line1TextAccessible = line1Accessible.childAtIndex(0);

	selectionRange.setStart(line1.firstChild, 1);
	selectionRange.setEnd(line1.firstChild, 1);
	selection.removeAllRanges();
	selection.addRange(selectionRange);

	assert_equals(textboxAccessible.selectionStart, 1);
	assert_equals(textboxAccessible.selectionEnd, 1);

	assert_equals(mainAccessible.selectionStart, 1);
	assert_equals(mainAccessible.selectionEnd, 1);

	assert_equals(rootAccessible.selectionAnchorObject, line1TextAccessible);
	assert_equals(rootAccessible.selectionAnchorOffset, 1);
	assert_equals(rootAccessible.selectionFocusObject, line1TextAccessible);
	assert_equals(rootAccessible.selectionFocusOffset, 1);
	}, "Setting a new caret position in the ARIA textbox should be reflected in the accessibility APIs.");
	</script>

	<script>
	test(function()
	{
	var selection = window.getSelection();
	var textboxAccessible = accessibilityController.accessibleElementById("contenteditable-textbox");
	var mainAccessible = accessibilityController.accessibleElementById("main");
	var rootAccessible = accessibilityController.rootElement;

	selection.removeAllRanges();

	assert_equals(textboxAccessible.selectionStart, 0);
	assert_equals(textboxAccessible.selectionEnd, 0);

	assert_equals(mainAccessible.selectionStart, 0);
	assert_equals(mainAccessible.selectionEnd, 0);

	assert_equals(rootAccessible.selectionAnchorObject, null);
	assert_equals(rootAccessible.selectionAnchorOffset, -1);
	assert_equals(rootAccessible.selectionFocusObject, null);
	assert_equals(rootAccessible.selectionFocusOffset, -1);
	}, "Removing the selection should remove the caret completely.");
	</script>

	<script>
	test(function()
	{
	var selection = window.getSelection();
	var textboxAccessible = accessibilityController.accessibleElementById("contenteditable-textbox");
	var mainAccessible = accessibilityController.accessibleElementById("main");
	var rootAccessible = accessibilityController.rootElement;
	var line1Accessible = accessibilityController.accessibleElementById("contenteditable-line1");
	var line1TextAccessible = line1Accessible.childAtIndex(0);

	line1TextAccessible.setSelectedTextRange(2, 0);

	assert_equals(textboxAccessible.selectionStart, 2);
	assert_equals(textboxAccessible.selectionEnd, 2);

	assert_equals(mainAccessible.selectionStart, 2);
	assert_equals(mainAccessible.selectionEnd, 2);

	assert_equals(rootAccessible.selectionAnchorObject, line1TextAccessible);
	assert_equals(rootAccessible.selectionAnchorOffset, 2);
	assert_equals(rootAccessible.selectionFocusObject, line1TextAccessible);
	assert_equals(rootAccessible.selectionFocusOffset, 2);
	}, "Positioning the caret using the accessibility API instead of the DOM should work.");
	</script>

	<script>
	test(function()
	{
	var textboxAccessible = accessibilityController.accessibleElementById("contenteditable-textbox");
	var mainAccessible = accessibilityController.accessibleElementById("main");
	var line2 = document.getElementById("contenteditable-line2");
	line2.focus();

	assert_equals(textboxAccessible.selectionStart, 0);
	assert_equals(textboxAccessible.selectionEnd, 0);

	assert_equals(mainAccessible.selectionStart, 0);
	assert_equals(mainAccessible.selectionEnd, 0);
	}, "Moving the focus into a textarea should remove the caret from the ARIA textbox.");
	</script>

	<script>
	test(function()
	{
	var rootAccessible = accessibilityController.rootElement;
	var line2Accessible = accessibilityController.focusedElement;

	assert_equals(rootAccessible.selectionAnchorObject, line2Accessible);
	assert_equals(rootAccessible.selectionAnchorOffset, 0);
	assert_equals(rootAccessible.selectionFocusObject, line2Accessible);
	assert_equals(rootAccessible.selectionFocusOffset, 0);

	assert_equals(line2Accessible.selectionStart, 0);
	assert_equals(line2Accessible.selectionEnd, 0);
	}, "Standard text fields start with the caret at the beginning of their contents.");
	</script>

	<script>
	test(function()
	{
	var line2 = document.getElementById("contenteditable-line2");
	var line2Accessible = accessibilityController.focusedElement;

	line2.setSelectionRange(3, 3);

	assert_equals(line2Accessible.selectionStart, 3);
	assert_equals(line2Accessible.selectionEnd, 3);
	}, "Setting a new caret position in the textarea should be exposed in the accessibility APIs.");
	</script>

	<script>
	test(function()
	{
	var textboxAccessible = accessibilityController.accessibleElementById("contenteditable-textbox");
	var mainAccessible = accessibilityController.accessibleElementById("main");
	var rootAccessible = accessibilityController.rootElement;
	var line2Accessible = accessibilityController.focusedElement;

	assert_equals(textboxAccessible.selectionStart, 3);
	assert_equals(textboxAccessible.selectionEnd, 3);

	assert_equals(mainAccessible.selectionStart, 3);
	assert_equals(mainAccessible.selectionEnd, 3);

	assert_equals(rootAccessible.selectionAnchorObject, line2Accessible);
	assert_equals(rootAccessible.selectionAnchorOffset, 3);
	assert_equals(rootAccessible.selectionFocusObject, line2Accessible);
	assert_equals(rootAccessible.selectionFocusOffset, 3);
	}, "Offsets in text fields should be reported from the beginning of the field and not from the top of the container.");
	</script>

	<script>
	test(function()
	{
	var line1Accessible = accessibilityController.accessibleElementById("contenteditable-line1");
	var line2Accessible = accessibilityController.accessibleElementById("contenteditable-line2");

	assert_equals(line1Accessible.selectionAnchorObject, line2Accessible);
	assert_equals(line1Accessible.selectionAnchorOffset, 3);
	assert_equals(line1Accessible.selectionFocusObject, line2Accessible);
	assert_equals(line1Accessible.selectionFocusOffset, 3);
	assert_equals(line2Accessible.selectionAnchorObject, line2Accessible);
	assert_equals(line2Accessible.selectionAnchorOffset, 3);
	assert_equals(line2Accessible.selectionFocusObject, line2Accessible);
	assert_equals(line2Accessible.selectionFocusOffset, 3);
	}, "The caret position should be retrievable from any object.");
	</script>

	<script>
	test(function()
	{
	var selection = window.getSelection();
	var selectionRange = document.createRange();
	var mainAccessible = accessibilityController.accessibleElementById("main");
	var rootAccessible = accessibilityController.rootElement;

	var contenteditable = document.getElementById("contenteditable-div");
	contenteditable.focus();
	// The offset from the beginning of the main div to the first character of
	// contenteditable-div.
	var mainOffset = 9;
	// The offset from the newline character between the two lines of the
	// first paragraph to the first character of its second line.
	// (Needed for skipping wide space.)
	var line2Offset = 13;

	var line1 = document.getElementById("paragraph1").firstChild;
	var line2 = document.getElementById("paragraph1").lastChild;
	var line3 = document.getElementById("paragraph2").firstChild;
	var contenteditableLines = [ line1, line2, line3 ];
	var contenteditableAccessible = accessibilityController.accessibleElementById("contenteditable-div");

	for (var lineNumber = 0; lineNumber < 3; ++lineNumber) {
	var lineOffset = lineNumber * 7;
	// Paragraphs should be separated by an empty line.
	if (lineNumber == 2)
	++lineOffset;

	for (var characterOffset = 0; characterOffset < 7; ++characterOffset) {
	// Any widespace in the DOM should be stripped out.
	var selectionOffset = characterOffset;
	if (lineNumber == 1)
	selectionOffset += line2Offset;
	var caretPosition = lineOffset + characterOffset;

	selectionRange.setStart(contenteditableLines[lineNumber], selectionOffset);
	selectionRange.setEnd(contenteditableLines[lineNumber], selectionOffset);
	selection.removeAllRanges();
	selection.addRange(selectionRange);

	assert_equals(contenteditableAccessible.selectionStart, caretPosition);
	assert_equals(contenteditableAccessible.selectionEnd, caretPosition);

	assert_equals(mainAccessible.selectionStart,
	mainOffset + caretPosition);
	assert_equals(mainAccessible.selectionEnd,
	mainOffset + caretPosition);

	assert_equals(rootAccessible.selectionAnchorObject.name,
	contenteditableLines[lineNumber].textContent.trim());
	assert_equals(rootAccessible.selectionAnchorOffset,
	characterOffset);
	assert_equals(rootAccessible.selectionFocusObject.name,
	contenteditableLines[lineNumber].textContent.trim());
	assert_equals(rootAccessible.selectionFocusOffset,
	characterOffset);
	}
	}

	}, "Test moving the caret across two paragraphs.");
	</script>

	<script>
	if (window.testRunner)
	document.getElementById("main").style.display = "none";;
	</script>