diff --git a/e2e/testcafe-devextreme/tests/editors/lookup/common.ts b/e2e/testcafe-devextreme/tests/editors/lookup/common.ts index 07a80fa97cd5..37c5b807593c 100644 --- a/e2e/testcafe-devextreme/tests/editors/lookup/common.ts +++ b/e2e/testcafe-devextreme/tests/editors/lookup/common.ts @@ -12,6 +12,7 @@ import { } from '../../../helpers/domUtils'; const LOOKUP_FIELD_CLASS = 'dx-lookup-field'; +const OVERLAY_CLASS = 'dx-overlay-content'; const stylingModes = ['outlined', 'underlined', 'filled']; const labelModes = ['static', 'floating', 'hidden', 'outside']; @@ -89,37 +90,47 @@ if (!isMaterialBased()) { safeSizeTest('Check popup height with no found data option', async (t) => { const { takeScreenshot, compareResults } = createScreenshotsComparer(t); await t.click(Selector(`.${LOOKUP_FIELD_CLASS}`)); + await t.hover(`.${OVERLAY_CLASS}`); await testScreenshot(t, takeScreenshot, 'Lookup with no found data.png'); await t .expect(compareResults.isValid()) .ok(compareResults.errorMessages()); -}, [300, 400]).before(async () => createWidget('dxLookup', { dataSource: [], searchEnabled: true })); +}, [300, 400]).before(async () => { + await insertStylesheetRulesToPage('* { caret-color: transparent !important; }'); + + return createWidget('dxLookup', { dataSource: [], searchEnabled: true }); +}); safeSizeTest('Check popup height in loading state', async (t) => { const { takeScreenshot, compareResults } = createScreenshotsComparer(t); await t.click(Selector(`.${LOOKUP_FIELD_CLASS}`)); + await t.hover(`.${OVERLAY_CLASS}`); await testScreenshot(t, takeScreenshot, 'Lookup in loading.png'); await t .expect(compareResults.isValid()) .ok(compareResults.errorMessages()); -}, [300, 400]).before(async () => createWidget('dxLookup', { - dataSource: { - load() { - return new Promise((resolve) => { - setTimeout(() => { - resolve([1, 2, 3]); - }, 5000); - }); +}, [300, 400]).before(async () => { + await insertStylesheetRulesToPage('* { caret-color: transparent !important; }'); + + return createWidget('dxLookup', { + dataSource: { + load() { + return new Promise((resolve) => { + setTimeout(() => { + resolve([1, 2, 3]); + }, 5000); + }); + }, }, - }, - valueExpr: 'id', - displayExpr: 'text', -})); + valueExpr: 'id', + displayExpr: 'text', + }); +}); test('Placeholder is visible after items option change when value is not chosen (T1099804)', async (t) => { const { takeScreenshot, compareResults } = createScreenshotsComparer(t); diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label (fluent-blue-light).png new file mode 100644 index 000000000000..75141c659296 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label (generic-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label (generic-light).png new file mode 100644 index 000000000000..d84df40dd59e Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label (material-blue-light).png new file mode 100644 index 000000000000..aead7f4c223e Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=filled (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=filled (fluent-blue-light).png deleted file mode 100644 index 33cacecb125c..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=filled (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=filled (generic-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=filled (generic-light).png deleted file mode 100644 index 65ce0173ce9d..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=filled (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=filled (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=filled (material-blue-light).png deleted file mode 100644 index d30d95a680dc..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=filled (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=outlined (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=outlined (fluent-blue-light).png deleted file mode 100644 index 1e368230b303..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=outlined (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=outlined (generic-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=outlined (generic-light).png deleted file mode 100644 index 8b02a107af12..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=outlined (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=outlined (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=outlined (material-blue-light).png deleted file mode 100644 index 16daf126a826..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=outlined (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=underlined (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=underlined (fluent-blue-light).png deleted file mode 100644 index 5bcdd6cef2cb..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=underlined (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=underlined (generic-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=underlined (generic-light).png deleted file mode 100644 index 7e9d9e7ee88a..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=underlined (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=underlined (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=underlined (material-blue-light).png deleted file mode 100644 index c0a4ffc0aa2f..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=underlined (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container (fluent-blue-light).png new file mode 100644 index 000000000000..07b57846e343 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container (generic-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container (generic-light).png new file mode 100644 index 000000000000..e519263e1262 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (fluent-blue-light).png deleted file mode 100644 index c45c6da8553e..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (fluent-blue-light-compact).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (fluent-blue-light-compact).png deleted file mode 100644 index 681015c06dbe..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (fluent-blue-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (generic-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (generic-light).png deleted file mode 100644 index f4a168b1ddc3..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (generic-light-compact).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (generic-light-compact).png deleted file mode 100644 index 78b02372152d..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (generic-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (material-blue-light).png deleted file mode 100644 index f56213ea7a22..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (material-blue-light-compact).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (material-blue-light-compact).png deleted file mode 100644 index 13358386dd69..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (material-blue-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (fluent-blue-light).png deleted file mode 100644 index 28b7f6aa11ab..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (fluent-blue-light-compact).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (fluent-blue-light-compact).png deleted file mode 100644 index ded11e005d47..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (fluent-blue-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (generic-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (generic-light).png deleted file mode 100644 index ab18f226c79a..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (generic-light-compact).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (generic-light-compact).png deleted file mode 100644 index 60366d21f61d..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (generic-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (material-blue-light).png deleted file mode 100644 index 8f49512e429e..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (material-blue-light-compact).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (material-blue-light-compact).png deleted file mode 100644 index f581d5c9ef74..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (material-blue-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/label.ts b/e2e/testcafe-devextreme/tests/editors/numberBox/label.ts index 5bb3fbe61dc3..04cc154ff571 100644 --- a/e2e/testcafe-devextreme/tests/editors/numberBox/label.ts +++ b/e2e/testcafe-devextreme/tests/editors/numberBox/label.ts @@ -1,7 +1,8 @@ -/* eslint-disable no-restricted-syntax */ +import type { Properties, NumberBoxPredefinedButton } from 'devextreme/ui/number_box.d'; +import type { EditorStyle, TextEditorButton } from 'devextreme/common'; import { createScreenshotsComparer } from 'devextreme-screenshot-comparer'; import Guid from 'devextreme/core/guid'; -import { testScreenshot } from '../../../helpers/themeUtils'; +import { isMaterial, testScreenshot } from '../../../helpers/themeUtils'; import url from '../../../helpers/getPageUrl'; import { createWidget } from '../../../helpers/createWidget'; import { @@ -10,84 +11,82 @@ import { const NUMBERBOX_CLASS = 'dx-numberbox'; -const stylingModes = ['outlined', 'underlined', 'filled']; +const stylingModes: EditorStyle[] = ['outlined', 'underlined', 'filled']; +const buttonsList: (TextEditorButton | NumberBoxPredefinedButton)[][] = [ + ['clear'], + [{ name: 'custom', location: 'after', options: { icon: 'home' } }, 'clear', 'spins'], + ['clear', { name: 'custom', location: 'after', options: { icon: 'home' } }, 'spins'], + ['clear', 'spins', { name: 'custom', location: 'after', options: { icon: 'home' } }], + [{ name: 'custom', location: 'before', options: { icon: 'home' } }, 'clear', 'spins'], +]; fixture.disablePageReloads`NumberBox_Label` .page(url(__dirname, '../../container.html')); -stylingModes.forEach((stylingMode) => { - test(`Label for dxNumberBox stylingMode=${stylingMode}`, async (t) => { - const { takeScreenshot, compareResults } = createScreenshotsComparer(t); - - await testScreenshot(t, takeScreenshot, `NumberBox label with stylingMode=${stylingMode}.png`, { element: '#container' }); - - await t - .expect(compareResults.isValid()) - .ok(compareResults.errorMessages()); - }).before(async () => { - const componentOption = { +const createNumberBox = async (options?: Properties): Promise => { + const id = `${`dx${new Guid()}`}`; + + await appendElementTo('#container', 'div', id, {}); + await createWidget('dxNumberBox', { + value: Math.PI, + showClearButton: true, + showSpinButtons: true, + ...options, + }, `#${id}`); + + return id; +}; +test('Label for dxNumberBox', async (t) => { + const { takeScreenshot, compareResults } = createScreenshotsComparer(t); + + await testScreenshot(t, takeScreenshot, 'NumberBox label.png', { element: '#container' }); + + await t + .expect(compareResults.isValid()) + .ok(compareResults.errorMessages()); +}).before(async () => { + await insertStylesheetRulesToPage('#container { box-sizing: border-box; width: 300px; height: 400px; padding: 8px; }'); + if (isMaterial()) { + await insertStylesheetRulesToPage('#container .dx-widget, #container .dx-widget input { font-family: sans-serif }'); + } + + // eslint-disable-next-line no-restricted-syntax + for (const stylingMode of stylingModes) { + await createNumberBox({ label: 'label text', stylingMode, - }; - - await insertStylesheetRulesToPage('#container { box-sizing: border-box; width: 300px; height: 400px; padding: 8px; }'); - - await appendElementTo('#container', 'div', 'numberBox1', { }); - await appendElementTo('#container', 'div', 'numberBox2', { }); - - await createWidget('dxNumberBox', { - ...componentOption, + // @ts-expect-error string instead of number value: 'text', - }, '#numberBox1'); - - await createWidget('dxNumberBox', { - ...componentOption, + }); + await createNumberBox({ + label: 'label text', + stylingMode, value: 123, - }, '#numberBox2'); - }); + }); + } }); -[true, false].forEach((isValid) => { - test(`NumberBox with buttons container, isValid=${isValid}`, async (t) => { - const { takeScreenshot, compareResults } = createScreenshotsComparer(t); - - await insertStylesheetRulesToPage(`#container { display: flex; flex-wrap: wrap; } .${NUMBERBOX_CLASS} { width: 220px; margin: 2px; }`); +test('NumberBox with buttons container', async (t) => { + const { takeScreenshot, compareResults } = createScreenshotsComparer(t); - await testScreenshot(t, takeScreenshot, `NumberBox render with buttons container, isValid=${isValid}.png`, { shouldTestInCompact: true }); + await insertStylesheetRulesToPage(`#container { display: flex; flex-wrap: wrap; } .${NUMBERBOX_CLASS} { width: 220px; margin: 2px; }`); - await removeStylesheetRulesFromPage(); + await testScreenshot(t, takeScreenshot, 'NumberBox render with buttons container.png'); - await t - .expect(compareResults.isValid()) - .ok(compareResults.errorMessages()); - }).before(async () => { - for (const stylingMode of stylingModes) { - for (const buttons of [ - ['clear'], - ['clear', 'spins'], - [{ name: 'custom', location: 'after', options: { icon: 'home' } }, 'clear', 'spins'], - ['clear', { name: 'custom', location: 'after', options: { icon: 'home' } }, 'spins'], - ['clear', 'spins', { name: 'custom', location: 'after', options: { icon: 'home' } }], - [{ name: 'custom', location: 'before', options: { icon: 'home' } }, 'clear', 'spins'], - ['clear', { name: 'custom', location: 'before', options: { icon: 'home' } }, 'spins'], - ['clear', 'spins', { name: 'custom', location: 'before', options: { icon: 'home' } }], - ]) { - for (const rtlEnabled of [true, false]) { - const id = `${`dx${new Guid()}`}`; + await removeStylesheetRulesFromPage(); - await appendElementTo('#container', 'div', id, { }); - - await createWidget('dxNumberBox', { - value: Math.PI, - stylingMode, - rtlEnabled, - buttons, - showClearButton: true, - showSpinButtons: true, - isValid, - }, `#${id}`); - } - } + await t + .expect(compareResults.isValid()) + .ok(compareResults.errorMessages()); +}).before(async () => { + // eslint-disable-next-line no-restricted-syntax + for (const stylingMode of stylingModes) { + // eslint-disable-next-line no-restricted-syntax + for (const buttons of buttonsList) { + await createNumberBox({ stylingMode, buttons }); } - }); + + await createNumberBox({ stylingMode, rtlEnabled: true }); + await createNumberBox({ stylingMode, isValid: false }); + } }); diff --git a/e2e/testcafe-devextreme/tests/editors/overlays/toolbarIntegration.ts b/e2e/testcafe-devextreme/tests/editors/overlays/toolbarIntegration.ts index d9f1be32e7ca..0d0e43a2f216 100644 --- a/e2e/testcafe-devextreme/tests/editors/overlays/toolbarIntegration.ts +++ b/e2e/testcafe-devextreme/tests/editors/overlays/toolbarIntegration.ts @@ -53,7 +53,7 @@ const ANIMATION_DELAY = 500; showTitle: true, rtlEnabled, visible: true, - animation: undefined, + animation: { show: { duration: 0 }, hide: { duration: 0 } }, target: COMPONENT_SELECTOR, hideOnOutsideClick: true, toolbarItems: [{ diff --git a/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=filled (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=filled (material-blue-light).png index 2e982774aca8..49ced6adada5 100644 Binary files a/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=filled (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=filled (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=outlined (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=outlined (material-blue-light).png index a270c358c626..56b0893d6d9b 100644 Binary files a/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=outlined (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=outlined (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=underlined (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=underlined (material-blue-light).png index a988bb6a26ed..e089bf827baf 100644 Binary files a/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=underlined (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=underlined (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/editors/tagBox/label.ts b/e2e/testcafe-devextreme/tests/editors/tagBox/label.ts index 2fc071250b2c..ae92ca80b8d9 100644 --- a/e2e/testcafe-devextreme/tests/editors/tagBox/label.ts +++ b/e2e/testcafe-devextreme/tests/editors/tagBox/label.ts @@ -2,12 +2,13 @@ import { Selector } from 'testcafe'; import { createScreenshotsComparer } from 'devextreme-screenshot-comparer'; import TagBox from 'devextreme-testcafe-models/tagBox'; import { safeSizeTest } from '../../../helpers/safeSizeTest'; -import { testScreenshot } from '../../../helpers/themeUtils'; +import { isMaterial, testScreenshot } from '../../../helpers/themeUtils'; import url from '../../../helpers/getPageUrl'; import { createWidget } from '../../../helpers/createWidget'; import { appendElementTo, setStyleAttribute, + insertStylesheetRulesToPage, } from '../../../helpers/domUtils'; const stylingModes = ['outlined', 'underlined', 'filled']; @@ -37,6 +38,10 @@ stylingModes.forEach((stylingMode) => { stylingMode, }; + if (isMaterial()) { + await insertStylesheetRulesToPage('#container .dx-widget { font-family: sans-serif }'); + } + await appendElementTo('#container', 'div', 'tagBox1', { }); await appendElementTo('#container', 'div', 'tagBox2', { }); @@ -61,12 +66,6 @@ stylingModes.forEach((stylingMode) => { const screenshotName = `TagBox label with stylingMode=${stylingMode},labelMode=${labelMode}.png`; - await testScreenshot(t, takeScreenshot, screenshotName); - - await t - .expect(compareResults.isValid()) - .ok(compareResults.errorMessages()); - await t.click(tagBox.element); await t.click(tagBox.element); diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render (fluent-blue-light).png new file mode 100644 index 000000000000..e7cce788021b Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render (generic-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render (generic-light).png new file mode 100644 index 000000000000..0b1c4948ff19 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render (material-blue-light).png new file mode 100644 index 000000000000..0ff1ad64a67c Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render focused,stylingMode=filled (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render focused,stylingMode=filled (fluent-blue-light).png deleted file mode 100644 index 31a3d4a5ded0..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render focused,stylingMode=filled (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render focused,stylingMode=filled (generic-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render focused,stylingMode=filled (generic-light).png deleted file mode 100644 index 9aa351327ec8..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render focused,stylingMode=filled (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render focused,stylingMode=filled (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render focused,stylingMode=filled (material-blue-light).png deleted file mode 100644 index 57330467afe1..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render focused,stylingMode=filled (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render focused,stylingMode=outlined (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render focused,stylingMode=outlined (fluent-blue-light).png deleted file mode 100644 index e7cffa3b812d..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render focused,stylingMode=outlined (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render focused,stylingMode=outlined (generic-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render focused,stylingMode=outlined (generic-light).png deleted file mode 100644 index 96d96ac580e6..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render focused,stylingMode=outlined (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render focused,stylingMode=outlined (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render focused,stylingMode=outlined (material-blue-light).png deleted file mode 100644 index b61d8f8c4d57..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render focused,stylingMode=outlined (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render focused,stylingMode=underlined (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render focused,stylingMode=underlined (fluent-blue-light).png deleted file mode 100644 index 40a98668c302..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render focused,stylingMode=underlined (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render focused,stylingMode=underlined (generic-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render focused,stylingMode=underlined (generic-light).png deleted file mode 100644 index 9e63fa6fe6f5..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render focused,stylingMode=underlined (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render focused,stylingMode=underlined (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render focused,stylingMode=underlined (material-blue-light).png deleted file mode 100644 index 52ba800457e0..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render focused,stylingMode=underlined (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render hover,stylingMode=filled (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render hover,stylingMode=filled (fluent-blue-light).png deleted file mode 100644 index 495b2d5c5ac6..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render hover,stylingMode=filled (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render hover,stylingMode=filled (generic-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render hover,stylingMode=filled (generic-light).png deleted file mode 100644 index 8ca70ab5f7e3..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render hover,stylingMode=filled (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render hover,stylingMode=filled (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render hover,stylingMode=filled (material-blue-light).png deleted file mode 100644 index 87bcb93b7524..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render hover,stylingMode=filled (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render hover,stylingMode=outlined (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render hover,stylingMode=outlined (fluent-blue-light).png deleted file mode 100644 index 1ce1524e9255..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render hover,stylingMode=outlined (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render hover,stylingMode=outlined (generic-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render hover,stylingMode=outlined (generic-light).png deleted file mode 100644 index b1dce7dac4ff..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render hover,stylingMode=outlined (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render hover,stylingMode=outlined (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render hover,stylingMode=outlined (material-blue-light).png deleted file mode 100644 index e2d66361e6d8..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render hover,stylingMode=outlined (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render hover,stylingMode=underlined (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render hover,stylingMode=underlined (fluent-blue-light).png deleted file mode 100644 index ac0d455ef615..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render hover,stylingMode=underlined (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render hover,stylingMode=underlined (generic-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render hover,stylingMode=underlined (generic-light).png deleted file mode 100644 index cbc62efb55c6..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render hover,stylingMode=underlined (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render hover,stylingMode=underlined (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render hover,stylingMode=underlined (material-blue-light).png deleted file mode 100644 index 4ba7b54db72d..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render hover,stylingMode=underlined (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid focused,stylingMode=filled (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid focused,stylingMode=filled (fluent-blue-light).png deleted file mode 100644 index 788c0e0ea47c..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid focused,stylingMode=filled (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid focused,stylingMode=filled (generic-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid focused,stylingMode=filled (generic-light).png deleted file mode 100644 index 7710c46c135f..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid focused,stylingMode=filled (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid focused,stylingMode=filled (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid focused,stylingMode=filled (material-blue-light).png deleted file mode 100644 index e094f0d1923a..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid focused,stylingMode=filled (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid focused,stylingMode=outlined (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid focused,stylingMode=outlined (fluent-blue-light).png deleted file mode 100644 index 25abf8ff79e8..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid focused,stylingMode=outlined (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid focused,stylingMode=outlined (generic-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid focused,stylingMode=outlined (generic-light).png deleted file mode 100644 index 153dee5615c8..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid focused,stylingMode=outlined (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid focused,stylingMode=outlined (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid focused,stylingMode=outlined (material-blue-light).png deleted file mode 100644 index d2f79182d6ef..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid focused,stylingMode=outlined (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid focused,stylingMode=underlined (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid focused,stylingMode=underlined (fluent-blue-light).png deleted file mode 100644 index 54a19da01d5a..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid focused,stylingMode=underlined (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid focused,stylingMode=underlined (generic-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid focused,stylingMode=underlined (generic-light).png deleted file mode 100644 index c567a9c07a6f..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid focused,stylingMode=underlined (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid focused,stylingMode=underlined (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid focused,stylingMode=underlined (material-blue-light).png deleted file mode 100644 index d1fc5fe4695e..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid focused,stylingMode=underlined (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid,stylingMode=filled (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid,stylingMode=filled (fluent-blue-light).png deleted file mode 100644 index 9abd82881d6f..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid,stylingMode=filled (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid,stylingMode=filled (generic-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid,stylingMode=filled (generic-light).png deleted file mode 100644 index 620d7144f239..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid,stylingMode=filled (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid,stylingMode=filled (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid,stylingMode=filled (material-blue-light).png deleted file mode 100644 index 8c044b061863..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid,stylingMode=filled (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid,stylingMode=outlined (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid,stylingMode=outlined (fluent-blue-light).png deleted file mode 100644 index 97c806004c40..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid,stylingMode=outlined (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid,stylingMode=outlined (generic-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid,stylingMode=outlined (generic-light).png deleted file mode 100644 index 6bc5564b9694..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid,stylingMode=outlined (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid,stylingMode=outlined (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid,stylingMode=outlined (material-blue-light).png deleted file mode 100644 index 774d2b94eca8..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid,stylingMode=outlined (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid,stylingMode=underlined (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid,stylingMode=underlined (fluent-blue-light).png deleted file mode 100644 index 1199e2553f6b..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid,stylingMode=underlined (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid,stylingMode=underlined (generic-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid,stylingMode=underlined (generic-light).png deleted file mode 100644 index 77b64957cd61..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid,stylingMode=underlined (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid,stylingMode=underlined (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid,stylingMode=underlined (material-blue-light).png deleted file mode 100644 index 66f6d8f62624..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render invalid,stylingMode=underlined (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render readonly,stylingMode=filled (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render readonly,stylingMode=filled (fluent-blue-light).png deleted file mode 100644 index 31b1def81a8a..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render readonly,stylingMode=filled (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render readonly,stylingMode=filled (generic-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render readonly,stylingMode=filled (generic-light).png deleted file mode 100644 index d1fff1db2bc8..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render readonly,stylingMode=filled (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render readonly,stylingMode=filled (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render readonly,stylingMode=filled (material-blue-light).png deleted file mode 100644 index dbbcd87772c6..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render readonly,stylingMode=filled (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render readonly,stylingMode=outlined (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render readonly,stylingMode=outlined (fluent-blue-light).png deleted file mode 100644 index 72e082c59dd2..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render readonly,stylingMode=outlined (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render readonly,stylingMode=outlined (generic-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render readonly,stylingMode=outlined (generic-light).png deleted file mode 100644 index 0f8b500a3b6f..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render readonly,stylingMode=outlined (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render readonly,stylingMode=outlined (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render readonly,stylingMode=outlined (material-blue-light).png deleted file mode 100644 index d6ea25eac5eb..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render readonly,stylingMode=outlined (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render readonly,stylingMode=underlined (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render readonly,stylingMode=underlined (fluent-blue-light).png deleted file mode 100644 index e7e683c3ef04..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render readonly,stylingMode=underlined (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render readonly,stylingMode=underlined (generic-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render readonly,stylingMode=underlined (generic-light).png deleted file mode 100644 index 17d0565f7fe0..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render readonly,stylingMode=underlined (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render readonly,stylingMode=underlined (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render readonly,stylingMode=underlined (material-blue-light).png deleted file mode 100644 index 3619476da711..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render readonly,stylingMode=underlined (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render stylingMode=filled (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render stylingMode=filled (fluent-blue-light).png deleted file mode 100644 index 495b2d5c5ac6..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render stylingMode=filled (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render stylingMode=filled (generic-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render stylingMode=filled (generic-light).png deleted file mode 100644 index 5da8f7deb682..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render stylingMode=filled (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render stylingMode=filled (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render stylingMode=filled (material-blue-light).png deleted file mode 100644 index 22c37001ffcd..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render stylingMode=filled (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render stylingMode=outlined (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render stylingMode=outlined (fluent-blue-light).png deleted file mode 100644 index 5a1dc51ed006..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render stylingMode=outlined (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render stylingMode=outlined (generic-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render stylingMode=outlined (generic-light).png deleted file mode 100644 index 3fad4672eb17..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render stylingMode=outlined (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render stylingMode=outlined (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render stylingMode=outlined (material-blue-light).png deleted file mode 100644 index f6f1ebd5c125..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render stylingMode=outlined (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render stylingMode=underlined (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render stylingMode=underlined (fluent-blue-light).png deleted file mode 100644 index 128b00cae2e3..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render stylingMode=underlined (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render stylingMode=underlined (generic-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render stylingMode=underlined (generic-light).png deleted file mode 100644 index b2cbe081513f..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render stylingMode=underlined (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render stylingMode=underlined (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render stylingMode=underlined (material-blue-light).png deleted file mode 100644 index daa3d8c0d63d..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render stylingMode=underlined (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width (fluent-blue-light).png new file mode 100644 index 000000000000..73807bccb3d3 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width (generic-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width (generic-light).png new file mode 100644 index 000000000000..bfea048a1bbb Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width (material-blue-light).png new file mode 100644 index 000000000000..6b6b0de0b52c Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width stylingMode=filled (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width stylingMode=filled (fluent-blue-light).png deleted file mode 100644 index cd85540e388b..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width stylingMode=filled (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width stylingMode=filled (generic-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width stylingMode=filled (generic-light).png deleted file mode 100644 index 059b06d39104..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width stylingMode=filled (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width stylingMode=filled (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width stylingMode=filled (material-blue-light).png deleted file mode 100644 index 5c54ac288a97..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width stylingMode=filled (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width stylingMode=outlined (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width stylingMode=outlined (fluent-blue-light).png deleted file mode 100644 index 81078086c768..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width stylingMode=outlined (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width stylingMode=outlined (generic-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width stylingMode=outlined (generic-light).png deleted file mode 100644 index eb8a2a3ee0d4..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width stylingMode=outlined (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width stylingMode=outlined (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width stylingMode=outlined (material-blue-light).png deleted file mode 100644 index dc74614b5581..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width stylingMode=outlined (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width stylingMode=underlined (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width stylingMode=underlined (fluent-blue-light).png deleted file mode 100644 index 342476859197..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width stylingMode=underlined (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width stylingMode=underlined (generic-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width stylingMode=underlined (generic-light).png deleted file mode 100644 index c1174660d0d9..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width stylingMode=underlined (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width stylingMode=underlined (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width stylingMode=underlined (material-blue-light).png deleted file mode 100644 index 1f0683daa38d..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width stylingMode=underlined (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox states (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox states (fluent-blue-light).png new file mode 100644 index 000000000000..0281242c422e Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox states (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox states (generic-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox states (generic-light).png new file mode 100644 index 000000000000..bb92a3850656 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox states (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox states (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox states (material-blue-light).png new file mode 100644 index 000000000000..b4460ddad4ea Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox states (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container (fluent-blue-light).png new file mode 100644 index 000000000000..5fa509865042 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container (generic-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container (generic-light).png new file mode 100644 index 000000000000..2df7680254cf Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container (material-blue-light).png new file mode 100644 index 000000000000..ca1082787845 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=floating (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=floating (fluent-blue-light).png deleted file mode 100644 index 5f7c4015a21f..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=floating (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=floating (fluent-blue-light-compact).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=floating (fluent-blue-light-compact).png deleted file mode 100644 index 760566999855..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=floating (fluent-blue-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=floating (generic-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=floating (generic-light).png deleted file mode 100644 index da9d58ad125b..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=floating (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=floating (generic-light-compact).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=floating (generic-light-compact).png deleted file mode 100644 index 31ff1da4d320..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=floating (generic-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=floating (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=floating (material-blue-light).png deleted file mode 100644 index b162ba674132..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=floating (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=floating (material-blue-light-compact).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=floating (material-blue-light-compact).png deleted file mode 100644 index 52b06019e1fe..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=floating (material-blue-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=outside (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=outside (fluent-blue-light).png deleted file mode 100644 index 7b92c01fea4e..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=outside (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=outside (fluent-blue-light-compact).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=outside (fluent-blue-light-compact).png deleted file mode 100644 index a64db7782f54..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=outside (fluent-blue-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=outside (generic-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=outside (generic-light).png deleted file mode 100644 index a590e2e31378..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=outside (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=outside (generic-light-compact).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=outside (generic-light-compact).png deleted file mode 100644 index 41581044a7ba..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=outside (generic-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=outside (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=outside (material-blue-light).png deleted file mode 100644 index 37f53b04a3bc..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=outside (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=outside (material-blue-light-compact).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=outside (material-blue-light-compact).png deleted file mode 100644 index 74d441b27bd5..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=outside (material-blue-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=static (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=static (fluent-blue-light).png deleted file mode 100644 index 5f7c4015a21f..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=static (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=static (fluent-blue-light-compact).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=static (fluent-blue-light-compact).png deleted file mode 100644 index 760566999855..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=static (fluent-blue-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=static (generic-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=static (generic-light).png deleted file mode 100644 index da9d58ad125b..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=static (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=static (generic-light-compact).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=static (generic-light-compact).png deleted file mode 100644 index 31ff1da4d320..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=static (generic-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=static (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=static (material-blue-light).png deleted file mode 100644 index b162ba674132..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=static (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=static (material-blue-light-compact).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=static (material-blue-light-compact).png deleted file mode 100644 index 52b06019e1fe..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=filled,lMode=static (material-blue-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=floating (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=floating (fluent-blue-light).png deleted file mode 100644 index 5193eb5d009f..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=floating (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=floating (fluent-blue-light-compact).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=floating (fluent-blue-light-compact).png deleted file mode 100644 index 3e2d6a70b887..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=floating (fluent-blue-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=floating (generic-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=floating (generic-light).png deleted file mode 100644 index 42e901c129af..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=floating (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=floating (generic-light-compact).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=floating (generic-light-compact).png deleted file mode 100644 index d9cd334d48ea..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=floating (generic-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=floating (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=floating (material-blue-light).png deleted file mode 100644 index 0bc44777f678..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=floating (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=floating (material-blue-light-compact).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=floating (material-blue-light-compact).png deleted file mode 100644 index 73059a52272e..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=floating (material-blue-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=outside (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=outside (fluent-blue-light).png deleted file mode 100644 index 91185a5cabd2..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=outside (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=outside (fluent-blue-light-compact).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=outside (fluent-blue-light-compact).png deleted file mode 100644 index 2ff4a22c5e8e..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=outside (fluent-blue-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=outside (generic-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=outside (generic-light).png deleted file mode 100644 index e5b108457cc3..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=outside (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=outside (generic-light-compact).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=outside (generic-light-compact).png deleted file mode 100644 index acb23ef3f03f..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=outside (generic-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=outside (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=outside (material-blue-light).png deleted file mode 100644 index 148ebe1b4e70..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=outside (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=outside (material-blue-light-compact).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=outside (material-blue-light-compact).png deleted file mode 100644 index a09bf0d49373..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=outside (material-blue-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=static (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=static (fluent-blue-light).png deleted file mode 100644 index 5193eb5d009f..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=static (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=static (fluent-blue-light-compact).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=static (fluent-blue-light-compact).png deleted file mode 100644 index 3e2d6a70b887..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=static (fluent-blue-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=static (generic-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=static (generic-light).png deleted file mode 100644 index 42e901c129af..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=static (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=static (generic-light-compact).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=static (generic-light-compact).png deleted file mode 100644 index d9cd334d48ea..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=static (generic-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=static (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=static (material-blue-light).png deleted file mode 100644 index 0bc44777f678..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=static (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=static (material-blue-light-compact).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=static (material-blue-light-compact).png deleted file mode 100644 index 73059a52272e..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=outlined,lMode=static (material-blue-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=floating (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=floating (fluent-blue-light).png deleted file mode 100644 index 904125adb05a..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=floating (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=floating (fluent-blue-light-compact).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=floating (fluent-blue-light-compact).png deleted file mode 100644 index 7a20a8f270a6..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=floating (fluent-blue-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=floating (generic-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=floating (generic-light).png deleted file mode 100644 index e60b149d0d2b..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=floating (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=floating (generic-light-compact).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=floating (generic-light-compact).png deleted file mode 100644 index d2c153653a4a..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=floating (generic-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=floating (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=floating (material-blue-light).png deleted file mode 100644 index dd51eb21463c..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=floating (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=floating (material-blue-light-compact).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=floating (material-blue-light-compact).png deleted file mode 100644 index 06c5dcba7574..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=floating (material-blue-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=outside (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=outside (fluent-blue-light).png deleted file mode 100644 index 5320b04fb310..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=outside (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=outside (fluent-blue-light-compact).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=outside (fluent-blue-light-compact).png deleted file mode 100644 index 7a70b3c65bac..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=outside (fluent-blue-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=outside (generic-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=outside (generic-light).png deleted file mode 100644 index db19eeca3df8..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=outside (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=outside (generic-light-compact).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=outside (generic-light-compact).png deleted file mode 100644 index c029bb5db906..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=outside (generic-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=outside (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=outside (material-blue-light).png deleted file mode 100644 index c1c76a633dd0..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=outside (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=outside (material-blue-light-compact).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=outside (material-blue-light-compact).png deleted file mode 100644 index f726bf8715b2..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=outside (material-blue-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=static (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=static (fluent-blue-light).png deleted file mode 100644 index 904125adb05a..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=static (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=static (fluent-blue-light-compact).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=static (fluent-blue-light-compact).png deleted file mode 100644 index 7a20a8f270a6..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=static (fluent-blue-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=static (generic-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=static (generic-light).png deleted file mode 100644 index e60b149d0d2b..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=static (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=static (generic-light-compact).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=static (generic-light-compact).png deleted file mode 100644 index d2c153653a4a..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=static (generic-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=static (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=static (material-blue-light).png deleted file mode 100644 index dd51eb21463c..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=static (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=static (material-blue-light-compact).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=static (material-blue-light-compact).png deleted file mode 100644 index 06c5dcba7574..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container,stMode=underlined,lMode=static (material-blue-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/label.ts b/e2e/testcafe-devextreme/tests/editors/textBox/label.ts index 9f8c0965c619..a07ac28a277e 100644 --- a/e2e/testcafe-devextreme/tests/editors/textBox/label.ts +++ b/e2e/testcafe-devextreme/tests/editors/textBox/label.ts @@ -1,4 +1,5 @@ -/* eslint-disable no-restricted-syntax */ +import type { Properties } from 'devextreme/ui/text_box.d'; +import type { LabelMode, EditorStyle, TextEditorButton } from 'devextreme/common'; import { Selector } from 'testcafe'; import { createScreenshotsComparer } from 'devextreme-screenshot-comparer'; import TextBox from 'devextreme-testcafe-models/textBox'; @@ -6,17 +7,23 @@ import Guid from 'devextreme/core/guid'; import { removeStylesheetRulesFromPage, insertStylesheetRulesToPage, setStyleAttribute, appendElementTo, setClassAttribute, - removeClassAttribute, } from '../../../helpers/domUtils'; -import { testScreenshot, getThemeName } from '../../../helpers/themeUtils'; +import { isMaterial, testScreenshot, getThemeName } from '../../../helpers/themeUtils'; import url from '../../../helpers/getPageUrl'; import { createWidget } from '../../../helpers/createWidget'; fixture.disablePageReloads`TextBox_Label` .page(url(__dirname, '../../container.html')); -const labelModes = ['floating', 'static', 'hidden', 'outside']; -const stylingModes = ['outlined', 'underlined', 'filled']; +// const labelModes: LabelMode[] = ['floating', 'static', 'hidden', 'outside']; +const visibleLabelModes: LabelMode[] = ['floating', 'static', 'outside']; +const stylingModes: EditorStyle[] = ['outlined', 'underlined', 'filled']; +const buttonsList: (string | TextEditorButton)[][] = [ + ['clear'], + ['clear', { name: 'custom', location: 'after', options: { icon: 'home' } }], + [{ name: 'custom', location: 'after', options: { icon: 'home' } }, 'clear'], + ['clear', { name: 'custom', location: 'before', options: { icon: 'home' } }], +]; const TEXTBOX_CLASS = 'dx-textbox'; const HOVER_STATE_CLASS = 'dx-state-hover'; @@ -24,6 +31,25 @@ const FOCUSED_STATE_CLASS = 'dx-state-focused'; const READONLY_STATE_CLASS = 'dx-state-readonly'; const INVALID_STATE_CLASS = 'dx-invalid'; +const createTextBox = async (options?: Properties, state?: string): Promise => { + const id = `${`dx${new Guid()}`}`; + + await appendElementTo('#container', 'div', id, {}); + await createWidget('dxTextBox', { + labelMode: 'floating', + stylingMode: 'outlined', + text: 'Text', + label: 'Label Text', + ...options, + }, `#${id}`); + + if (state) { + await setClassAttribute(Selector(`#${id}`), state); + } + + return id; +}; + [ { labelMode: 'static', expectedWidths: { generic: 82, material: 68, fluent: 74 } }, { labelMode: 'floating', expectedWidths: { generic: 82, material: 68, fluent: 74 } }, @@ -55,116 +81,117 @@ const INVALID_STATE_CLASS = 'dx-invalid'; }); }); -stylingModes.forEach((stylingMode) => { - test(`Textbox render with stylingMode=${stylingMode}`, async (t) => { - const { takeScreenshot, compareResults } = createScreenshotsComparer(t); - - await insertStylesheetRulesToPage(`.${TEXTBOX_CLASS} { display: inline-block; vertical-align: middle; width: 60px; margin: 5px; }`); +test('Textbox render', async (t) => { + const { takeScreenshot, compareResults } = createScreenshotsComparer(t); - await testScreenshot(t, takeScreenshot, `Textbox render with limited width stylingMode=${stylingMode}.png`, { element: '#container' }); + await insertStylesheetRulesToPage(`.${TEXTBOX_CLASS} { display: inline-block; vertical-align: middle; width: 60px; margin: 5px; }`); - await removeStylesheetRulesFromPage(); + await testScreenshot(t, takeScreenshot, 'Textbox render with limited width.png', { element: '#container' }); - await insertStylesheetRulesToPage(`.${TEXTBOX_CLASS} { display: inline-block; vertical-align: middle; width: 260px; margin: 5px; }`); + await removeStylesheetRulesFromPage(); - await testScreenshot(t, takeScreenshot, `Textbox render stylingMode=${stylingMode}.png`); + await insertStylesheetRulesToPage(`.${TEXTBOX_CLASS} { display: inline-block; vertical-align: middle; width: 260px; margin: 5px; }`); - const states = [ - HOVER_STATE_CLASS, - FOCUSED_STATE_CLASS, - READONLY_STATE_CLASS, - INVALID_STATE_CLASS, - `${INVALID_STATE_CLASS} ${FOCUSED_STATE_CLASS}`, - ]; + await testScreenshot(t, takeScreenshot, 'Textbox render.png'); - for (const state of states as any[]) { - for (const id of t.ctx.ids) { - await setClassAttribute(Selector(`#${id}`), state); + await t + .expect(compareResults.isValid()) + .ok(compareResults.errorMessages()); +}).before(async () => { + // eslint-disable-next-line no-restricted-syntax + for (const stylingMode of stylingModes) { + // eslint-disable-next-line no-restricted-syntax + for (const labelMode of visibleLabelModes) { + // eslint-disable-next-line no-restricted-syntax + for (const placeholder of ['Placeholder', '']) { + await createTextBox({ + text: undefined, + placeholder, + stylingMode, + labelMode, + }); } - await testScreenshot(t, takeScreenshot, `Textbox render ${state.replaceAll('dx-', '').replaceAll('state-', '')},stylingMode=${stylingMode}.png`); + await createTextBox({ text: 'Text value' }); + await createTextBox({ rtlEnabled: true }); + } + // eslint-disable-next-line no-restricted-syntax + for (const placeholder of ['Placeholder', '']) { + await createTextBox({ + text: undefined, + placeholder, + stylingMode, + label: undefined, + }); + } + await createTextBox({ label: undefined, text: 'Text value' }); + await createTextBox({ label: undefined, rtlEnabled: true }); + } +}); - for (const id of t.ctx.ids) { - await removeClassAttribute(Selector(`#${id}`), state); - } +test('Textbox states', async (t) => { + const { takeScreenshot, compareResults } = createScreenshotsComparer(t); + + await insertStylesheetRulesToPage(`.${TEXTBOX_CLASS} { display: inline-block; vertical-align: middle; width: 260px; margin: 5px; }`); + + await testScreenshot(t, takeScreenshot, 'Textbox states.png', { element: '#container' }); + + await t + .expect(compareResults.isValid()) + .ok(compareResults.errorMessages()); +}).before(async () => { + const states = [ + HOVER_STATE_CLASS, + FOCUSED_STATE_CLASS, + READONLY_STATE_CLASS, + INVALID_STATE_CLASS, + `${INVALID_STATE_CLASS} ${FOCUSED_STATE_CLASS}`, + ]; + // eslint-disable-next-line no-restricted-syntax + for (const state of states) { + // eslint-disable-next-line no-restricted-syntax + for (const placeholder of ['Placeholder', '']) { + await createTextBox({ + text: undefined, + placeholder, + }, state); } - await removeStylesheetRulesFromPage(); + await createTextBox({ text: 'Text value' }, state); + await createTextBox({ rtlEnabled: true }, state); + } +}); - await t - .expect(compareResults.isValid()) - .ok(compareResults.errorMessages()); - }).before(async (t) => { - t.ctx.ids = []; - - for (const rtlEnabled of [true, false]) { - for (const labelMode of labelModes) { - for (const placeholder of ['Placeholder', '']) { - for (const text of ['Text value', '']) { - for (const label of ['Label Text', '']) { - const id = `${`dx${new Guid()}`}`; - - t.ctx.ids.push(id); - await appendElementTo('#container', 'div', id, {}); - await createWidget('dxTextBox', { - label, - text, - placeholder, - labelMode, - stylingMode, - rtlEnabled, - }, `#${id}`); - } - } - } - } - } - }); +test('Textbox with buttons container', async (t) => { + const { takeScreenshot, compareResults } = createScreenshotsComparer(t); - ['floating', 'static', 'outside'].forEach((labelMode) => { - test(`Textbox with buttons container, stylingMode=${stylingMode}, labelMode=${labelMode}`, async (t) => { - const { takeScreenshot, compareResults } = createScreenshotsComparer(t); - - await insertStylesheetRulesToPage('#container { display: flex; flex-wrap: wrap; gap: 4px; }'); - - await testScreenshot(t, takeScreenshot, `Textbox with buttons container,stMode=${stylingMode},lMode=${labelMode}.png`, { shouldTestInCompact: true }); - - await removeStylesheetRulesFromPage(); - - await t - .expect(compareResults.isValid()) - .ok(compareResults.errorMessages()); - }).before(async () => { - for (const isValid of [true, false]) { - for (const buttons of [ - ['clear'], - ['clear', { name: 'custom', location: 'after', options: { icon: 'home' } }], - [{ name: 'custom', location: 'after', options: { icon: 'home' } }, 'clear'], - ['clear', { name: 'custom', location: 'before', options: { icon: 'home' } }], - [{ name: 'custom', location: 'before', options: { icon: 'home' } }, 'clear'], - ]) { - for (const rtlEnabled of [true, false]) { - const id = `${`dx${new Guid()}`}`; - - await appendElementTo('#container', 'div', id, {}); - - await createWidget('dxTextBox', { - width: 300, - value: 'Text', - stylingMode, - labelMode, - label: 'Label Text', - rtlEnabled, - buttons, - showClearButton: true, - isValid, - }, `#${id}`); - } - } - } - }); - }); + await insertStylesheetRulesToPage('#container { display: flex; flex-wrap: wrap; gap: 4px; }'); + + await testScreenshot(t, takeScreenshot, 'Textbox with buttons container.png'); + await removeStylesheetRulesFromPage(); + + await t + .expect(compareResults.isValid()) + .ok(compareResults.errorMessages()); +}).before(async () => { + if (isMaterial()) { + await insertStylesheetRulesToPage('#container .dx-widget { font-family: sans-serif }'); + } + + // eslint-disable-next-line no-restricted-syntax + for (const stylingMode of stylingModes) { + // eslint-disable-next-line no-restricted-syntax + for (const buttons of buttonsList) { + await createTextBox({ stylingMode, buttons, showClearButton: true }); + await createTextBox({ + stylingMode, buttons, showClearButton: true, isValid: false, + }); + } + } +}); + +stylingModes.forEach((stylingMode) => { test(`TextBox should not be hovered after hover of outside label, stylingMode=${stylingMode}`, async (t) => { const textBox = new TextBox('#container'); diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/validationMessage.ts b/e2e/testcafe-devextreme/tests/editors/textBox/validationMessage.ts index 204d7d0469ce..90a7ce91e614 100644 --- a/e2e/testcafe-devextreme/tests/editors/textBox/validationMessage.ts +++ b/e2e/testcafe-devextreme/tests/editors/textBox/validationMessage.ts @@ -20,8 +20,6 @@ safeSizeTest('Validation Message position should be correct after change visibil .pressKey('enter') .pressKey('tab'); - await testScreenshot(t, takeScreenshot, 'Textbox validation message.png'); - await setAttribute('#container', 'hidden', 'true'); await removeAttribute('#container', 'hidden');