209 lines
9.1 KiB
HTML
209 lines
9.1 KiB
HTML
<!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>
|