84b1a3a0b6
* stable-3.0: Bump Bazel version to 2.0.0 Set version in package.json to 3.0.7-SNAPSHOT Set version in package.json to 2.16.16-SNAPSHOT Use gerritCheck API for posting checker result Update git submodules Downport "Replace deprecated `require-jsdoc`, `valid-jsdoc` with jsdoc plugin for eslint" Downport "Add a shared pre-commit to run eslintfix for frontend code changes" Downport "Remove `|| exit 0` as eslint already supported correct exit code" Downport "Update eslint version and eslint rules" Downport "Simplify installing / running polylint" Downport "Make `npm start` run run-server.sh" Downport "Simplify installing / running template tests" Downport "Simplify installing and running eslint" Downport "Simplify running frontend tests via package.json" Change-Id: Ic08aecefc55b0434a32c6d6836fd4019e26ace72
196 lines
6.5 KiB
HTML
196 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
@license
|
|
Copyright (C) 2016 The Android Open Source Project
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
-->
|
|
|
|
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
|
<title>gr-annotation</title>
|
|
<script src="/test/common-test-setup.js"></script>
|
|
<script src="/bower_components/webcomponentsjs/custom-elements-es5-adapter.js"></script>
|
|
|
|
<script src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
|
|
<script src="/bower_components/web-component-tester/browser.js"></script>
|
|
<link rel="import" href="../../../test/common-test-setup.html"/>
|
|
<script src="gr-annotation.js"></script>
|
|
|
|
|
|
<script>void(0);</script>
|
|
|
|
<test-fixture id="basic">
|
|
<template>
|
|
<div>Lorem ipsum dolor sit amet, suspendisse inceptos vehicula</div>
|
|
</template>
|
|
</test-fixture>
|
|
|
|
<script>
|
|
suite('annotation', () => {
|
|
let str;
|
|
let parent;
|
|
let textNode;
|
|
|
|
setup(() => {
|
|
parent = fixture('basic');
|
|
textNode = parent.childNodes[0];
|
|
str = textNode.textContent;
|
|
});
|
|
|
|
test('_annotateText Case 1', () => {
|
|
GrAnnotation._annotateText(textNode, 0, str.length, 'foobar');
|
|
|
|
assert.equal(parent.childNodes.length, 1);
|
|
assert.instanceOf(parent.childNodes[0], HTMLElement);
|
|
assert.equal(parent.childNodes[0].className, 'foobar');
|
|
assert.instanceOf(parent.childNodes[0].childNodes[0], Text);
|
|
assert.equal(parent.childNodes[0].childNodes[0].textContent, str);
|
|
});
|
|
|
|
test('_annotateText Case 2', () => {
|
|
const length = 12;
|
|
const substr = str.substr(0, length);
|
|
const remainder = str.substr(length);
|
|
|
|
GrAnnotation._annotateText(textNode, 0, length, 'foobar');
|
|
|
|
assert.equal(parent.childNodes.length, 2);
|
|
|
|
assert.instanceOf(parent.childNodes[0], HTMLElement);
|
|
assert.equal(parent.childNodes[0].className, 'foobar');
|
|
assert.instanceOf(parent.childNodes[0].childNodes[0], Text);
|
|
assert.equal(parent.childNodes[0].childNodes[0].textContent, substr);
|
|
|
|
assert.instanceOf(parent.childNodes[1], Text);
|
|
assert.equal(parent.childNodes[1].textContent, remainder);
|
|
});
|
|
|
|
test('_annotateText Case 3', () => {
|
|
const index = 12;
|
|
const length = str.length - index;
|
|
const remainder = str.substr(0, index);
|
|
const substr = str.substr(index);
|
|
|
|
GrAnnotation._annotateText(textNode, index, length, 'foobar');
|
|
|
|
assert.equal(parent.childNodes.length, 2);
|
|
|
|
assert.instanceOf(parent.childNodes[0], Text);
|
|
assert.equal(parent.childNodes[0].textContent, remainder);
|
|
|
|
assert.instanceOf(parent.childNodes[1], HTMLElement);
|
|
assert.equal(parent.childNodes[1].className, 'foobar');
|
|
assert.instanceOf(parent.childNodes[1].childNodes[0], Text);
|
|
assert.equal(parent.childNodes[1].childNodes[0].textContent, substr);
|
|
});
|
|
|
|
test('_annotateText Case 4', () => {
|
|
const index = str.indexOf('dolor');
|
|
const length = 'dolor '.length;
|
|
|
|
const remainderPre = str.substr(0, index);
|
|
const substr = str.substr(index, length);
|
|
const remainderPost = str.substr(index + length);
|
|
|
|
GrAnnotation._annotateText(textNode, index, length, 'foobar');
|
|
|
|
assert.equal(parent.childNodes.length, 3);
|
|
|
|
assert.instanceOf(parent.childNodes[0], Text);
|
|
assert.equal(parent.childNodes[0].textContent, remainderPre);
|
|
|
|
assert.instanceOf(parent.childNodes[1], HTMLElement);
|
|
assert.equal(parent.childNodes[1].className, 'foobar');
|
|
assert.instanceOf(parent.childNodes[1].childNodes[0], Text);
|
|
assert.equal(parent.childNodes[1].childNodes[0].textContent, substr);
|
|
|
|
assert.instanceOf(parent.childNodes[2], Text);
|
|
assert.equal(parent.childNodes[2].textContent, remainderPost);
|
|
});
|
|
|
|
test('_annotateElement design doc example', () => {
|
|
const layers = [
|
|
'amet, ',
|
|
'inceptos ',
|
|
'amet, ',
|
|
'et, suspendisse ince',
|
|
];
|
|
|
|
// Apply the layers successively.
|
|
layers.forEach((layer, i) => {
|
|
GrAnnotation.annotateElement(
|
|
parent, str.indexOf(layer), layer.length, `layer-${i + 1}`);
|
|
});
|
|
|
|
assert.equal(parent.textContent, str);
|
|
|
|
// Layer 1:
|
|
const layer1 = parent.querySelectorAll('.layer-1');
|
|
assert.equal(layer1.length, 1);
|
|
assert.equal(layer1[0].textContent, layers[0]);
|
|
assert.equal(layer1[0].parentElement, parent);
|
|
|
|
// Layer 2:
|
|
const layer2 = parent.querySelectorAll('.layer-2');
|
|
assert.equal(layer2.length, 1);
|
|
assert.equal(layer2[0].textContent, layers[1]);
|
|
assert.equal(layer2[0].parentElement, parent);
|
|
|
|
// Layer 3:
|
|
const layer3 = parent.querySelectorAll('.layer-3');
|
|
assert.equal(layer3.length, 1);
|
|
assert.equal(layer3[0].textContent, layers[2]);
|
|
assert.equal(layer3[0].parentElement, layer1[0]);
|
|
|
|
// Layer 4:
|
|
const layer4 = parent.querySelectorAll('.layer-4');
|
|
assert.equal(layer4.length, 3);
|
|
|
|
assert.equal(layer4[0].textContent, 'et, ');
|
|
assert.equal(layer4[0].parentElement, layer3[0]);
|
|
|
|
assert.equal(layer4[1].textContent, 'suspendisse ');
|
|
assert.equal(layer4[1].parentElement, parent);
|
|
|
|
assert.equal(layer4[2].textContent, 'ince');
|
|
assert.equal(layer4[2].parentElement, layer2[0]);
|
|
|
|
assert.equal(layer4[0].textContent +
|
|
layer4[1].textContent +
|
|
layer4[2].textContent,
|
|
layers[3]);
|
|
});
|
|
|
|
test('splitTextNode', () => {
|
|
const helloString = 'hello';
|
|
const asciiString = 'ASCII';
|
|
const unicodeString = 'Unic💢de';
|
|
|
|
let node;
|
|
let tail;
|
|
|
|
// Non-unicode path:
|
|
node = document.createTextNode(helloString + asciiString);
|
|
tail = GrAnnotation.splitTextNode(node, helloString.length);
|
|
assert(node.textContent, helloString);
|
|
assert(tail.textContent, asciiString);
|
|
|
|
// Unicdoe path:
|
|
node = document.createTextNode(helloString + unicodeString);
|
|
tail = GrAnnotation.splitTextNode(node, helloString.length);
|
|
assert(node.textContent, helloString);
|
|
assert(tail.textContent, unicodeString);
|
|
});
|
|
});
|
|
</script>
|