| "use strict"; |
| |
| // TODO: extend `EditorTestUtils` in editing/include/edit-test-utils.mjs |
| |
| const kBackspaceKey = "\uE003"; |
| const kDeleteKey = "\uE017"; |
| const kArrowRight = "\uE014"; |
| const kArrowLeft = "\uE012"; |
| const kShift = "\uE008"; |
| const kMeta = "\uE03d"; |
| const kControl = "\uE009"; |
| const kAlt = "\uE00A"; |
| const kKeyA = "a"; |
| |
| const kImgSrc = |
| "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVR42mNgaGD4D8YwBgAw9AX9Y9zBwwAAAABJRU5ErkJggg=="; |
| |
| let gSelection, gEditor, gBeforeinput, gInput; |
| |
| function initializeTest(aInnerHTML) { |
| function onBeforeinput(event) { |
| // NOTE: Blink makes `getTargetRanges()` return empty range after |
| // propagation, but this test wants to check the result during |
| // propagation. Therefore, we need to cache the result, but will |
| // assert if `getTargetRanges()` returns different ranges after |
| // checking the cached ranges. |
| event.cachedRanges = event.getTargetRanges(); |
| gBeforeinput.push(event); |
| } |
| function onInput(event) { |
| event.cachedRanges = event.getTargetRanges(); |
| gInput.push(event); |
| } |
| if (gEditor !== document.querySelector("div[contenteditable]")) { |
| if (gEditor) { |
| gEditor.isListeningToInputEvents = false; |
| gEditor.removeEventListener("beforeinput", onBeforeinput); |
| gEditor.removeEventListener("input", onInput); |
| } |
| gEditor = document.querySelector("div[contenteditable]"); |
| } |
| gSelection = getSelection(); |
| gBeforeinput = []; |
| gInput = []; |
| if (!gEditor.isListeningToInputEvents) { |
| gEditor.isListeningToInputEvents = true; |
| gEditor.addEventListener("beforeinput", onBeforeinput); |
| gEditor.addEventListener("input", onInput); |
| } |
| |
| setupEditor(aInnerHTML); |
| gBeforeinput = []; |
| gInput = []; |
| } |
| |
| function getArrayOfRangesDescription(arrayOfRanges) { |
| if (arrayOfRanges === null) { |
| return "null"; |
| } |
| if (arrayOfRanges === undefined) { |
| return "undefined"; |
| } |
| if (!Array.isArray(arrayOfRanges)) { |
| return "Unknown Object"; |
| } |
| if (arrayOfRanges.length === 0) { |
| return "[]"; |
| } |
| let result = "["; |
| for (let range of arrayOfRanges) { |
| result += `{${getRangeDescription(range)}},`; |
| } |
| result += "]"; |
| return result; |
| } |
| |
| function getRangeDescription(range) { |
| function getNodeDescription(node) { |
| if (!node) { |
| return "null"; |
| } |
| switch (node.nodeType) { |
| case Node.TEXT_NODE: |
| case Node.COMMENT_NODE: |
| case Node.CDATA_SECTION_NODE: |
| return `${node.nodeName} "${node.data}"`; |
| case Node.ELEMENT_NODE: |
| return `<${node.nodeName.toLowerCase()}>`; |
| default: |
| return `${node.nodeName}`; |
| } |
| } |
| if (range === null) { |
| return "null"; |
| } |
| if (range === undefined) { |
| return "undefined"; |
| } |
| return range.startContainer == range.endContainer && |
| range.startOffset == range.endOffset |
| ? `(${getNodeDescription(range.startContainer)}, ${range.startOffset})` |
| : `(${getNodeDescription(range.startContainer)}, ${ |
| range.startOffset |
| }) - (${getNodeDescription(range.endContainer)}, ${range.endOffset})`; |
| } |
| |
| function sendDeleteKey(modifier) { |
| if (!modifier) { |
| return new test_driver.Actions() |
| .keyDown(kDeleteKey) |
| .keyUp(kDeleteKey) |
| .send(); |
| } |
| return new test_driver.Actions() |
| .keyDown(modifier) |
| .keyDown(kDeleteKey) |
| .keyUp(kDeleteKey) |
| .keyUp(modifier) |
| .send(); |
| } |
| |
| function sendBackspaceKey(modifier) { |
| if (!modifier) { |
| return new test_driver.Actions() |
| .keyDown(kBackspaceKey) |
| .keyUp(kBackspaceKey) |
| .send(); |
| } |
| return new test_driver.Actions() |
| .keyDown(modifier) |
| .keyDown(kBackspaceKey) |
| .keyUp(kBackspaceKey) |
| .keyUp(modifier) |
| .send(); |
| } |
| |
| function sendKeyA() { |
| return new test_driver.Actions() |
| .keyDown(kKeyA) |
| .keyUp(kKeyA) |
| .send(); |
| } |
| |
| function sendArrowLeftKey() { |
| return new test_driver.Actions() |
| .keyDown(kArrowLeft) |
| .keyUp(kArrowLeft) |
| .send(); |
| } |
| |
| function sendArrowRightKey() { |
| return new test_driver.Actions() |
| .keyDown(kArrowRight) |
| .keyUp(kArrowRight) |
| .send(); |
| } |
| |
| function checkGetTargetRangesOfBeforeinputOnDeleteSomething(expectedRanges) { |
| assert_equals( |
| gBeforeinput.length, |
| 1, |
| "One beforeinput event should be fired if the key operation tries to delete something" |
| ); |
| assert_true( |
| Array.isArray(gBeforeinput[0].cachedRanges), |
| "gBeforeinput[0].getTargetRanges() should return an array of StaticRange instances at least during propagation" |
| ); |
| let arrayOfExpectedRanges = Array.isArray(expectedRanges) |
| ? expectedRanges |
| : [expectedRanges]; |
| // Before checking the length of array of ranges, we should check the given |
| // range first because the ranges are more important than whether there are |
| // redundant additional unexpected ranges. |
| for ( |
| let i = 0; |
| i < |
| Math.max(arrayOfExpectedRanges.length, gBeforeinput[0].cachedRanges.length); |
| i++ |
| ) { |
| assert_equals( |
| getRangeDescription(gBeforeinput[0].cachedRanges[i]), |
| getRangeDescription(arrayOfExpectedRanges[i]), |
| `gBeforeinput[0].getTargetRanges()[${i}] should return expected range (inputType is "${gBeforeinput[0].inputType}")` |
| ); |
| } |
| assert_equals( |
| gBeforeinput[0].cachedRanges.length, |
| arrayOfExpectedRanges.length, |
| `getTargetRanges() of beforeinput event should return ${arrayOfExpectedRanges.length} ranges` |
| ); |
| } |
| |
| function checkGetTargetRangesOfInputOnDeleteSomething() { |
| assert_equals( |
| gInput.length, |
| 1, |
| "One input event should be fired if the key operation deletes something" |
| ); |
| // https://github.com/w3c/input-events/issues/113 |
| assert_true( |
| Array.isArray(gInput[0].cachedRanges), |
| "gInput[0].getTargetRanges() should return an array of StaticRange instances at least during propagation" |
| ); |
| assert_equals( |
| gInput[0].cachedRanges.length, |
| 0, |
| "gInput[0].getTargetRanges() should return empty array during propagation" |
| ); |
| } |
| |
| function checkGetTargetRangesOfInputOnDoNothing() { |
| assert_equals( |
| gInput.length, |
| 0, |
| "input event shouldn't be fired when the key operation does not cause modifying the DOM tree" |
| ); |
| } |
| |
| function checkBeforeinputAndInputEventsOnNOOP() { |
| assert_equals( |
| gBeforeinput.length, |
| 0, |
| "beforeinput event shouldn't be fired when the key operation does not cause modifying the DOM tree" |
| ); |
| assert_equals( |
| gInput.length, |
| 0, |
| "input event shouldn't be fired when the key operation does not cause modifying the DOM tree" |
| ); |
| } |
| |
| function checkEditorContentResultAsSubTest( |
| expectedResult, |
| description, |
| options = {} |
| ) { |
| test(() => { |
| if (Array.isArray(expectedResult)) { |
| assert_in_array( |
| options.ignoreWhiteSpaceDifference |
| ? gEditor.innerHTML.replace(/ /g, " ") |
| : gEditor.innerHTML, |
| expectedResult |
| ); |
| } else { |
| assert_equals( |
| options.ignoreWhiteSpaceDifference |
| ? gEditor.innerHTML.replace(/ /g, " ") |
| : gEditor.innerHTML, |
| expectedResult |
| ); |
| } |
| }, `${description} - comparing innerHTML`); |
| } |
| |
| // Similar to `setupDiv` in editing/include/tests.js, this method sets |
| // innerHTML value of gEditor, and sets multiple selection ranges specified |
| // with the markers. |
| // - `[` specifies start boundary in a text node |
| // - `{` specifies start boundary before a node |
| // - `]` specifies end boundary in a text node |
| // - `}` specifies end boundary after a node |
| function setupEditor(innerHTMLWithRangeMarkers) { |
| const startBoundaries = innerHTMLWithRangeMarkers.match(/\{|\[/g) || []; |
| const endBoundaries = innerHTMLWithRangeMarkers.match(/\}|\]/g) || []; |
| if (startBoundaries.length !== endBoundaries.length) { |
| throw "Should match number of open/close markers"; |
| } |
| |
| gEditor.innerHTML = innerHTMLWithRangeMarkers; |
| gEditor.focus(); |
| |
| if (startBoundaries.length === 0) { |
| // Don't remove the range for now since some tests may assume that |
| // setting innerHTML does not remove all selection ranges. |
| return; |
| } |
| |
| function getNextRangeAndDeleteMarker(startNode) { |
| function getNextLeafNode(node) { |
| function inclusiveDeepestFirstChildNode(container) { |
| while (container.firstChild) { |
| container = container.firstChild; |
| } |
| return container; |
| } |
| if (node.hasChildNodes()) { |
| return inclusiveDeepestFirstChildNode(node); |
| } |
| if (node.nextSibling) { |
| return inclusiveDeepestFirstChildNode(node.nextSibling); |
| } |
| let nextSibling = (function nextSiblingOfAncestorElement(child) { |
| for ( |
| let parent = child.parentElement; |
| parent && parent != gEditor; |
| parent = parent.parentElement |
| ) { |
| if (parent.nextSibling) { |
| return parent.nextSibling; |
| } |
| } |
| return null; |
| })(node); |
| if (!nextSibling) { |
| return null; |
| } |
| return inclusiveDeepestFirstChildNode(nextSibling); |
| } |
| function scanMarkerInTextNode(textNode, offset) { |
| return /[\{\[\]\}]/.exec(textNode.data.substr(offset)); |
| } |
| let startMarker = (function scanNextStartMaker( |
| startContainer, |
| startOffset |
| ) { |
| function scanStartMakerInTextNode(textNode, offset) { |
| let scanResult = scanMarkerInTextNode(textNode, offset); |
| if (scanResult === null) { |
| return null; |
| } |
| if (scanResult[0] === "}" || scanResult[0] === "]") { |
| throw "An end marker is found before a start marker"; |
| } |
| return { |
| marker: scanResult[0], |
| container: textNode, |
| offset: scanResult.index + offset |
| }; |
| } |
| if (startContainer.nodeType === Node.TEXT_NODE) { |
| let scanResult = scanStartMakerInTextNode(startContainer, startOffset); |
| if (scanResult !== null) { |
| return scanResult; |
| } |
| } |
| let nextNode = startContainer; |
| while ((nextNode = getNextLeafNode(nextNode))) { |
| if (nextNode.nodeType === Node.TEXT_NODE) { |
| let scanResult = scanStartMakerInTextNode(nextNode, 0); |
| if (scanResult !== null) { |
| return scanResult; |
| } |
| continue; |
| } |
| } |
| return null; |
| })(startNode, 0); |
| if (startMarker === null) { |
| return null; |
| } |
| let endMarker = (function scanNextEndMarker(startContainer, startOffset) { |
| function scanEndMarkerInTextNode(textNode, offset) { |
| let scanResult = scanMarkerInTextNode(textNode, offset); |
| if (scanResult === null) { |
| return null; |
| } |
| if (scanResult[0] === "{" || scanResult[0] === "[") { |
| throw "A start marker is found before an end marker"; |
| } |
| return { |
| marker: scanResult[0], |
| container: textNode, |
| offset: scanResult.index + offset |
| }; |
| } |
| if (startContainer.nodeType === Node.TEXT_NODE) { |
| let scanResult = scanEndMarkerInTextNode(startContainer, startOffset); |
| if (scanResult !== null) { |
| return scanResult; |
| } |
| } |
| let nextNode = startContainer; |
| while ((nextNode = getNextLeafNode(nextNode))) { |
| if (nextNode.nodeType === Node.TEXT_NODE) { |
| let scanResult = scanEndMarkerInTextNode(nextNode, 0); |
| if (scanResult !== null) { |
| return scanResult; |
| } |
| continue; |
| } |
| } |
| return null; |
| })(startMarker.container, startMarker.offset + 1); |
| if (endMarker === null) { |
| throw "Found an open marker, but not found corresponding close marker"; |
| } |
| function indexOfContainer(container, child) { |
| let offset = 0; |
| for (let node = container.firstChild; node; node = node.nextSibling) { |
| if (node == child) { |
| return offset; |
| } |
| offset++; |
| } |
| throw "child must be a child node of container"; |
| } |
| (function deleteFoundMarkers() { |
| function removeNode(node) { |
| let container = node.parentElement; |
| let offset = indexOfContainer(container, node); |
| node.remove(); |
| return { container, offset }; |
| } |
| if (startMarker.container == endMarker.container) { |
| // If the text node becomes empty, remove it and set collapsed range |
| // to the position where there is the text node. |
| if (startMarker.container.length === 2) { |
| if (!/[\[\{][\]\}]/.test(startMarker.container.data)) { |
| throw `Unexpected text node (data: "${startMarker.container.data}")`; |
| } |
| let { container, offset } = removeNode(startMarker.container); |
| startMarker.container = endMarker.container = container; |
| startMarker.offset = endMarker.offset = offset; |
| startMarker.marker = endMarker.marker = ""; |
| return; |
| } |
| startMarker.container.data = `${startMarker.container.data.substring( |
| 0, |
| startMarker.offset |
| )}${startMarker.container.data.substring( |
| startMarker.offset + 1, |
| endMarker.offset |
| )}${startMarker.container.data.substring(endMarker.offset + 1)}`; |
| if (startMarker.offset >= startMarker.container.length) { |
| startMarker.offset = endMarker.offset = startMarker.container.length; |
| return; |
| } |
| endMarker.offset--; // remove the start marker's length |
| if (endMarker.offset > endMarker.container.length) { |
| endMarker.offset = endMarker.container.length; |
| } |
| return; |
| } |
| if (startMarker.container.length === 1) { |
| let { container, offset } = removeNode(startMarker.container); |
| startMarker.container = container; |
| startMarker.offset = offset; |
| startMarker.marker = ""; |
| } else { |
| startMarker.container.data = `${startMarker.container.data.substring( |
| 0, |
| startMarker.offset |
| )}${startMarker.container.data.substring(startMarker.offset + 1)}`; |
| } |
| if (endMarker.container.length === 1) { |
| let { container, offset } = removeNode(endMarker.container); |
| endMarker.container = container; |
| endMarker.offset = offset; |
| endMarker.marker = ""; |
| } else { |
| endMarker.container.data = `${endMarker.container.data.substring( |
| 0, |
| endMarker.offset |
| )}${endMarker.container.data.substring(endMarker.offset + 1)}`; |
| } |
| })(); |
| (function handleNodeSelectMarker() { |
| if (startMarker.marker === "{") { |
| if (startMarker.offset === 0) { |
| // The range start with the text node. |
| let container = startMarker.container.parentElement; |
| startMarker.offset = indexOfContainer( |
| container, |
| startMarker.container |
| ); |
| startMarker.container = container; |
| } else if (startMarker.offset === startMarker.container.data.length) { |
| // The range start after the text node. |
| let container = startMarker.container.parentElement; |
| startMarker.offset = |
| indexOfContainer(container, startMarker.container) + 1; |
| startMarker.container = container; |
| } else { |
| throw 'Start marker "{" is allowed start or end of a text node'; |
| } |
| } |
| if (endMarker.marker === "}") { |
| if (endMarker.offset === 0) { |
| // The range ends before the text node. |
| let container = endMarker.container.parentElement; |
| endMarker.offset = indexOfContainer(container, endMarker.container); |
| endMarker.container = container; |
| } else if (endMarker.offset === endMarker.container.data.length) { |
| // The range ends with the text node. |
| let container = endMarker.container.parentElement; |
| endMarker.offset = |
| indexOfContainer(container, endMarker.container) + 1; |
| endMarker.container = container; |
| } else { |
| throw 'End marker "}" is allowed start or end of a text node'; |
| } |
| } |
| })(); |
| let range = document.createRange(); |
| range.setStart(startMarker.container, startMarker.offset); |
| range.setEnd(endMarker.container, endMarker.offset); |
| return range; |
| } |
| |
| let ranges = []; |
| for ( |
| let range = getNextRangeAndDeleteMarker(gEditor.firstChild); |
| range; |
| range = getNextRangeAndDeleteMarker(range.endContainer) |
| ) { |
| ranges.push(range); |
| } |
| |
| gSelection.removeAllRanges(); |
| for (let range of ranges) { |
| gSelection.addRange(range); |
| } |
| |
| if (gSelection.rangeCount != ranges.length) { |
| throw `Failed to set selection to the given ranges whose length is ${ranges.length}, but only ${gSelection.rangeCount} ranges are added`; |
| } |
| } |
