edit-context-basics.tentative.html (9299B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>EditContext: The HTMLElement.editContext property</title> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src='../../html/resources/common.js'></script> 8 </head> 9 <body> 10 <div id="test"></div> 11 <div id="contenteditableDiv" contenteditable></div> 12 <script> 13 test(function() { 14 const editContextDict = { 15 text: "Hello world", 16 selectionStart: 11, 17 selectionEnd: 11 18 }; 19 const editContext = new EditContext(editContextDict); 20 assert_not_equals(editContext, null); 21 // Verify all the members of the EditContext 22 assert_equals(editContext.text, "Hello world"); 23 assert_equals(editContext.selectionStart, 11); 24 assert_equals(editContext.selectionEnd, 11); 25 }, 'Testing EditContext Dictionary Init'); 26 27 test(function() { 28 contenteditableDiv.editContext = new EditContext(); 29 contenteditableDiv.editContext = null; 30 contenteditableDiv.focus(); 31 assert_equals(document.activeElement, contenteditableDiv); 32 }, 'A contenteditable element should remain editable after attaching and detaching EditContext.'); 33 34 test(function() { 35 const editContext = new EditContext(); 36 assert_not_equals(editContext, null); 37 38 const disconnected_div = document.createElement("DIV"); 39 assert_equals(disconnected_div.editContext, null); 40 41 disconnected_div.editContext = editContext; 42 assert_equals(disconnected_div.editContext, editContext); 43 assert_equals(editContext.attachedElements().length, 1); 44 assert_equals(editContext.attachedElements()[0], disconnected_div); 45 }, 'EditContext can be associated with an element that is not in the tree.'); 46 47 test(function() { 48 const editContext = new EditContext(); 49 assert_not_equals(editContext, null); 50 51 const div = document.createElement("DIV"); 52 assert_equals(div.editContext, null); 53 54 document.body.appendChild(div); 55 div.editContext = editContext; 56 assert_equals(div.editContext, editContext); 57 assert_equals(editContext.attachedElements().length, 1); 58 assert_equals(editContext.attachedElements()[0], div); 59 60 document.body.removeChild(div); 61 assert_equals(div.editContext, editContext); 62 assert_equals(editContext.attachedElements().length, 1); 63 assert_equals(editContext.attachedElements()[0], div); 64 }, 'If an element is removed from the tree, the associated EditContext remains connected to the element.'); 65 66 test(function() { 67 const editContext = new EditContext(); 68 69 const div_parent = document.createElement("DIV"); 70 const div_child = document.createElement("DIV"); 71 document.body.appendChild(div_parent); 72 div_parent.appendChild(div_child); 73 74 div_child.editContext = editContext; 75 assert_equals(div_child.editContext, editContext); 76 assert_equals(div_parent.editContext, null); 77 assert_equals(editContext.attachedElements().length, 1); 78 assert_equals(editContext.attachedElements()[0], div_child); 79 80 document.body.removeChild(div_parent); 81 assert_equals(div_child.editContext, editContext); 82 assert_equals(editContext.attachedElements().length, 1); 83 assert_equals(editContext.attachedElements()[0], div_child); 84 }, 'If an element\'s ancestor is removed from tree, the associated EditContext remains connected to the element.'); 85 86 test(function() { 87 const editContext = new EditContext(); 88 const test = document.getElementById("test"); 89 90 test.editContext = editContext; 91 92 assert_equals(test.editContext, editContext); 93 assert_equals(editContext.attachedElements().length, 1); 94 assert_equals(editContext.attachedElements()[0], test); 95 96 test.editContext = null; 97 98 assert_equals(editContext.attachedElements().length, 0); 99 }, '.attachedElements() should return associated element'); 100 101 test(function() { 102 const editContext = new EditContext(); 103 assert_not_equals(editContext, null); 104 editContext.updateText(0, 3, "foo"); 105 assert_equals(editContext.text, "foo"); 106 const test = document.getElementById('test'); 107 // Update the layout of the |EditContext| 108 var viewRect = test.getBoundingClientRect(); 109 viewRect.x = viewRect.left; 110 viewRect.y = viewRect.top; 111 var caretRect = test.getBoundingClientRect(); 112 caretRect.x = caretRect.left; 113 caretRect.y = 2.2 * caretRect.top; 114 caretRect.width = 1; 115 editContext.updateSelection(0, 0); 116 assert_equals(editContext.selectionStart, 0); 117 assert_equals(editContext.selectionEnd, 0); 118 editContext.updateSelection(1, 0); 119 assert_equals(editContext.selectionStart, 1); 120 assert_equals(editContext.selectionEnd, 0); 121 editContext.updateSelection(0, 1); 122 assert_equals(editContext.selectionStart, 0); 123 assert_equals(editContext.selectionEnd, 1); 124 editContext.updateSelection(1, 1); 125 assert_equals(editContext.selectionStart, 1); 126 assert_equals(editContext.selectionEnd, 1); 127 editContext.updateControlBounds(viewRect); 128 editContext.updateSelectionBounds(caretRect); 129 editContext.updateCharacterBounds(0, [caretRect]); 130 131 assert_throws_js(TypeError, function() { editContext.updateControlBounds(42); }); 132 assert_throws_js(TypeError, function() { editContext.updateSelectionBounds(42); }); 133 assert_throws_js(TypeError, function() { editContext.updateControlBounds(undefined); }); 134 assert_throws_js(TypeError, function() { editContext.updateSelectionBounds(undefined); }); 135 assert_throws_js(TypeError, function() { editContext.updateCharacterBounds(0); }); 136 assert_throws_js(TypeError, function() { editContext.updateCharacterBounds([caretRect]); }); 137 assert_throws_js(TypeError, function() { editContext.updateCharacterBounds(0, caretRect); }); 138 assert_throws_js(TypeError, function() { editContext.updateCharacterBounds(0, 42); }); 139 assert_throws_js(TypeError, function() { editContext.updateCharacterBounds(0, undefined); }); 140 assert_throws_js(TypeError, function() { editContext.updateCharacterBounds(0, [undefined]); }); 141 142 viewRect.x = viewRect.y = viewRect.width = viewRect.height = undefined; 143 editContext.updateControlBounds(viewRect); 144 editContext.updateSelectionBounds(viewRect); 145 editContext.updateCharacterBounds(0, [viewRect]); 146 }, 'Testing EditContext update text, selection and layout'); 147 148 test(function() { 149 const editContext = new EditContext(); 150 const test = document.getElementById('test'); 151 var rect1 = DOMRect.fromRect({x:0, y:1, width:100, height:200}); 152 var rect2 = DOMRect.fromRect({x:2, y:3, width:300, height:400}); 153 var rectArray = [rect1, rect2]; 154 var rangeStart = 2; 155 editContext.updateCharacterBounds(rangeStart, rectArray); 156 assert_equals(editContext.characterBoundsRangeStart, 2); 157 158 var actualRectArray = editContext.characterBounds(); 159 assert_equals(actualRectArray.length, 2); 160 assert_equals(actualRectArray[0].x, 0); 161 assert_equals(actualRectArray[0].y, 1); 162 assert_equals(actualRectArray[0].width, 100); 163 assert_equals(actualRectArray[0].height, 200); 164 rect2.x=100; 165 assert_equals(actualRectArray[1].x, 2); // the cached value shouldn't change. 166 assert_equals(actualRectArray[1].y, 3); 167 assert_equals(actualRectArray[1].width, 300); 168 assert_equals(actualRectArray[1].height, 400); 169 }, 'updateCharacterBounds(), characterBounds(), and characterBoundsRangeStart should work properly'); 170 171 // The behavior in this test case is not well-defined in the spec. 172 // See https://github.com/w3c/edit-context/issues/88 173 // test(function() { 174 // const editContext = new EditContext(); 175 // assert_not_equals(editContext, null); 176 // editContext.updateText(0, 3, "foo"); 177 // assert_equals(editContext.text, "foo"); 178 // assert_throws_dom("IndexSizeError", function() { editContext.updateSelection(10, 0); }); 179 // assert_equals(editContext.selectionStart, 0); 180 // assert_equals(editContext.selectionEnd, 0); 181 // assert_throws_dom("IndexSizeError", function() { editContext.updateText(10, 1, "h"); }); 182 // assert_equals(editContext.text, "foo"); 183 // }, 'Testing EditContext update text and selection with invalid values'); 184 185 test(function() { 186 const editContext = new EditContext(); 187 assert_not_equals(editContext, null); 188 editContext.updateText(0, 3, "foo"); 189 assert_equals(editContext.text, "foo"); 190 editContext.updateSelection(3, 0); 191 assert_equals(editContext.selectionStart, 3); 192 assert_equals(editContext.selectionEnd, 0); 193 }, 'EditContext should allow a backwards selection'); 194 195 test(function() { 196 const editContext = new EditContext(); 197 assert_not_equals(editContext, null); 198 editContext.updateText(6, 0, "abcdef"); 199 assert_equals(editContext.text, "abcdef"); 200 201 editContext.updateText(2, 5, "ghi"); 202 assert_equals(editContext.text, "abghif"); 203 204 editContext.updateText(5, 2, "jkl"); 205 assert_equals(editContext.text, "abjklf"); 206 }, 'updateText can replace substrings including with backwards parameters'); 207 </script> 208 </body> 209 </html>