<!DOCTYPE html>
<html>
<head>
<title>EditContext: The HTMLElement.editContext property</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src='../../html/resources/common.js'></script>
</head>
<body>
<div id="test"></div>
<div id="contenteditableDiv" contenteditable></div>
<script>
test(function() {
const editContextDict = {
text: "Hello world",
selectionStart: 11,
selectionEnd: 11
};
const editContext = new EditContext(editContextDict);
assert_not_equals(editContext, null);
// Verify all the members of the EditContext
assert_equals(editContext.text, "Hello world");
assert_equals(editContext.selectionStart, 11);
assert_equals(editContext.selectionEnd, 11);
}, 'Testing EditContext Dictionary Init');
test(function() {
contenteditableDiv.editContext = new EditContext();
contenteditableDiv.editContext = null;
contenteditableDiv.focus();
assert_equals(document.activeElement, contenteditableDiv);
}, 'A contenteditable element should remain editable after attaching and detaching EditContext.');
test(function() {
const editContext = new EditContext();
assert_not_equals(editContext, null);
const disconnected_div = document.createElement("DIV");
assert_equals(disconnected_div.editContext, null);
disconnected_div.editContext = editContext;
assert_equals(disconnected_div.editContext, editContext);
assert_equals(editContext.attachedElements().length, 1);
assert_equals(editContext.attachedElements()[0], disconnected_div);
}, 'EditContext can be associated with an element that is not in the tree.');
test(function() {
const editContext = new EditContext();
assert_not_equals(editContext, null);
const div = document.createElement("DIV");
assert_equals(div.editContext, null);
document.body.appendChild(div);
div.editContext = editContext;
assert_equals(div.editContext, editContext);
assert_equals(editContext.attachedElements().length, 1);
assert_equals(editContext.attachedElements()[0], div);
document.body.removeChild(div);
assert_equals(div.editContext, editContext);
assert_equals(editContext.attachedElements().length, 1);
assert_equals(editContext.attachedElements()[0], div);
}, 'If an element is removed from the tree, the associated EditContext remains connected to the element.');
test(function() {
const editContext = new EditContext();
const div_parent = document.createElement("DIV");
const div_child = document.createElement("DIV");
document.body.appendChild(div_parent);
div_parent.appendChild(div_child);
div_child.editContext = editContext;
assert_equals(div_child.editContext, editContext);
assert_equals(div_parent.editContext, null);
assert_equals(editContext.attachedElements().length, 1);
assert_equals(editContext.attachedElements()[0], div_child);
document.body.removeChild(div_parent);
assert_equals(div_child.editContext, editContext);
assert_equals(editContext.attachedElements().length, 1);
assert_equals(editContext.attachedElements()[0], div_child);
}, 'If an element\'s ancestor is removed from tree, the associated EditContext remains connected to the element.');
test(function() {
const editContext = new EditContext();
const test = document.getElementById("test");
test.editContext = editContext;
assert_equals(test.editContext, editContext);
assert_equals(editContext.attachedElements().length, 1);
assert_equals(editContext.attachedElements()[0], test);
test.editContext = null;
assert_equals(editContext.attachedElements().length, 0);
}, '.attachedElements() should return associated element');
test(function() {
const editContext = new EditContext();
assert_not_equals(editContext, null);
editContext.updateText(0, 3, "foo");
assert_equals(editContext.text, "foo");
const test = document.getElementById('test');
// Update the layout of the |EditContext|
var viewRect = test.getBoundingClientRect();
viewRect.x = viewRect.left;
viewRect.y = viewRect.top;
var caretRect = test.getBoundingClientRect();
caretRect.x = caretRect.left;
caretRect.y = 2.2 * caretRect.top;
caretRect.width = 1;
editContext.updateSelection(0, 0);
assert_equals(editContext.selectionStart, 0);
assert_equals(editContext.selectionEnd, 0);
editContext.updateSelection(1, 0);
assert_equals(editContext.selectionStart, 1);
assert_equals(editContext.selectionEnd, 0);
editContext.updateSelection(0, 1);
assert_equals(editContext.selectionStart, 0);
assert_equals(editContext.selectionEnd, 1);
editContext.updateSelection(1, 1);
assert_equals(editContext.selectionStart, 1);
assert_equals(editContext.selectionEnd, 1);
editContext.updateControlBounds(viewRect);
editContext.updateSelectionBounds(caretRect);
editContext.updateCharacterBounds(0, [caretRect]);
assert_throws_js(TypeError, function() { editContext.updateControlBounds(42); });
assert_throws_js(TypeError, function() { editContext.updateSelectionBounds(42); });
assert_throws_js(TypeError, function() { editContext.updateControlBounds(undefined); });
assert_throws_js(TypeError, function() { editContext.updateSelectionBounds(undefined); });
assert_throws_js(TypeError, function() { editContext.updateCharacterBounds(0); });
assert_throws_js(TypeError, function() { editContext.updateCharacterBounds([caretRect]); });
assert_throws_js(TypeError, function() { editContext.updateCharacterBounds(0, caretRect); });
assert_throws_js(TypeError, function() { editContext.updateCharacterBounds(0, 42); });
assert_throws_js(TypeError, function() { editContext.updateCharacterBounds(0, undefined); });
assert_throws_js(TypeError, function() { editContext.updateCharacterBounds(0, [undefined]); });
viewRect.x = viewRect.y = viewRect.width = viewRect.height = undefined;
editContext.updateControlBounds(viewRect);
editContext.updateSelectionBounds(viewRect);
editContext.updateCharacterBounds(0, [viewRect]);
}, 'Testing EditContext update text, selection and layout');
test(function() {
const editContext = new EditContext();
const test = document.getElementById('test');
var rect1 = DOMRect.fromRect({x:0, y:1, width:100, height:200});
var rect2 = DOMRect.fromRect({x:2, y:3, width:300, height:400});
var rectArray = [rect1, rect2];
var rangeStart = 2;
editContext.updateCharacterBounds(rangeStart, rectArray);
assert_equals(editContext.characterBoundsRangeStart, 2);
var actualRectArray = editContext.characterBounds();
assert_equals(actualRectArray.length, 2);
assert_equals(actualRectArray[0].x, 0);
assert_equals(actualRectArray[0].y, 1);
assert_equals(actualRectArray[0].width, 100);
assert_equals(actualRectArray[0].height, 200);
rect2.x=100;
assert_equals(actualRectArray[1].x, 2); // the cached value shouldn't change.
assert_equals(actualRectArray[1].y, 3);
assert_equals(actualRectArray[1].width, 300);
assert_equals(actualRectArray[1].height, 400);
}, 'updateCharacterBounds(), characterBounds(), and characterBoundsRangeStart should work properly');
// The behavior in this test case is not well-defined in the spec.
// See https://github.com/w3c/edit-context/issues/88
// test(function() {
// const editContext = new EditContext();
// assert_not_equals(editContext, null);
// editContext.updateText(0, 3, "foo");
// assert_equals(editContext.text, "foo");
// assert_throws_dom("IndexSizeError", function() { editContext.updateSelection(10, 0); });
// assert_equals(editContext.selectionStart, 0);
// assert_equals(editContext.selectionEnd, 0);
// assert_throws_dom("IndexSizeError", function() { editContext.updateText(10, 1, "h"); });
// assert_equals(editContext.text, "foo");
// }, 'Testing EditContext update text and selection with invalid values');
test(function() {
const editContext = new EditContext();
assert_not_equals(editContext, null);
editContext.updateText(0, 3, "foo");
assert_equals(editContext.text, "foo");
editContext.updateSelection(3, 0);
assert_equals(editContext.selectionStart, 3);
assert_equals(editContext.selectionEnd, 0);
}, 'EditContext should allow a backwards selection');
test(function() {
const editContext = new EditContext();
assert_not_equals(editContext, null);
editContext.updateText(6, 0, "abcdef");
assert_equals(editContext.text, "abcdef");
editContext.updateText(2, 5, "ghi");
assert_equals(editContext.text, "abghif");
editContext.updateText(5, 2, "jkl");
assert_equals(editContext.text, "abjklf");
}, 'updateText can replace substrings including with backwards parameters');
</script>
</body>
</html>
Codebase Browser
chromium