diff --git a/cvat-ui/src/components/header/settings-modal/workspace-settings.tsx b/cvat-ui/src/components/header/settings-modal/workspace-settings.tsx
index 553bf0c1c10..aa721746e3a 100644
--- a/cvat-ui/src/components/header/settings-modal/workspace-settings.tsx
+++ b/cvat-ui/src/components/header/settings-modal/workspace-settings.tsx
@@ -145,13 +145,23 @@ function WorkspaceSettingsComponent(props: Props): JSX.Element {
Font size of a text
-
+
Auto
Center
-
+
diff --git a/tests/cypress/integration/actions_tasks2/case_111_settings_text_size_position.js b/tests/cypress/integration/actions_tasks2/case_111_settings_text_size_position.js
new file mode 100644
index 00000000000..a5375eaaa95
--- /dev/null
+++ b/tests/cypress/integration/actions_tasks2/case_111_settings_text_size_position.js
@@ -0,0 +1,126 @@
+// Copyright (C) 2021 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+///
+
+import { taskName, labelName } from '../../support/const';
+
+context('Settings. Text size/position.', () => {
+ const caseId = '111';
+ const rectangleShape2Points = {
+ points: 'By 2 Points',
+ type: 'Shape',
+ labelName,
+ firstX: 100,
+ firstY: 100,
+ secondX: 500,
+ secondY: 300,
+ };
+ const polygonTrack = {
+ reDraw: false,
+ type: 'Track',
+ labelName,
+ pointsMap: [
+ { x: 100, y: 400 },
+ { x: 550, y: 400 },
+ { x: 550, y: 700 },
+ { x: 100, y: 700 },
+ ],
+ complete: true,
+ numberOfPoints: null,
+ };
+
+ function testTextPosition(shape, expectedPosition) {
+ let shapeLeftPosition = 0;
+ let shapeTopPosition = 0;
+ let shapeWidth = 0;
+ let shapeHeight = 0;
+ let textLeftPosition = 0;
+ let textTopPosition = 0;
+ let getText;
+
+ cy.get(shape).then(($shape) => {
+ shapeLeftPosition = Math.trunc($shape.position().left);
+ shapeTopPosition = Math.trunc($shape.position().top);
+ if (shape === '#cvat_canvas_shape_1') {
+ shapeWidth = $shape.attr('width');
+ shapeHeight = $shape.attr('height');
+ } else {
+ const points = $shape.attr('points').split(' ');
+ shapeWidth = +points[1].split(',')[0] - +points[0].split(',')[0];
+ shapeHeight = +points[2].split(',')[1] - +points[0].split(',')[1];
+ }
+ if (shape === '#cvat_canvas_shape_1') {
+ getText = cy.get('.cvat_canvas_text').first();
+ } else {
+ getText = cy.get('.cvat_canvas_text').last();
+ }
+ getText.then(($text) => {
+ textLeftPosition = Math.trunc($text.position().left);
+ textTopPosition = Math.trunc($text.position().top);
+ if (expectedPosition === 'outside') {
+ // Text outside the shape of the right. Slightly below the shape upper edge.
+ expect(+shapeLeftPosition + +shapeWidth).lessThan(+textLeftPosition);
+ expect(+textTopPosition).to.be.within(+shapeTopPosition, +shapeTopPosition + 10);
+ } else {
+ // Text inside the shape
+ expect(+shapeLeftPosition + +shapeWidth / 2).greaterThan(+textLeftPosition);
+ expect(+shapeTopPosition + +shapeHeight / 2).greaterThan(+textTopPosition);
+ }
+ });
+ });
+ }
+
+ before(() => {
+ cy.openTaskJob(taskName);
+ cy.createRectangle(rectangleShape2Points);
+ cy.createPolygon(polygonTrack);
+
+ // Always show object details
+ cy.openSettings();
+ cy.get('.cvat-settings-modal').within(() => {
+ cy.contains('Workspace').click();
+ cy.get('.cvat-workspace-settings-show-text-always').within(() => {
+ cy.get('[type="checkbox"]').check();
+ });
+ });
+ cy.closeSettings();
+ });
+
+ describe(`Testing case "${caseId}"`, () => {
+ it('Text position.', () => {
+ testTextPosition('#cvat_canvas_shape_1', 'outside');
+ testTextPosition('#cvat_canvas_shape_2', 'outside');
+
+ // Change the text position
+ cy.openSettings();
+ cy.get('.cvat-workspace-settings-text-position')
+ .find('[title="Auto"]')
+ .click();
+ cy.get('.ant-select-dropdown')
+ .not('.ant-select-dropdown-hidden')
+ .find('[title="Center"]')
+ .click();
+ cy.closeSettings();
+
+ testTextPosition('#cvat_canvas_shape_1', 'inside');
+ testTextPosition('#cvat_canvas_shape_2', 'inside');
+ });
+
+ it('Text font size.', () => {
+ cy.get('.cvat_canvas_text').should('have.attr', 'style', 'font-size: 14px;');
+ cy.openSettings();
+
+ // Change the text size to 16
+ cy.get('.cvat-workspace-settings-text-size')
+ .find('input')
+ .should('have.attr', 'value', '14')
+ .clear()
+ .type('16')
+ .should('have.attr', 'value', '16');
+ cy.closeSettings();
+ cy.get('.cvat_canvas_text').should('have.attr', 'style', 'font-size: 16px;');
+ });
+ });
+});