edit-context-basics.tentative.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>

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Warnings