From 43b8b944fcf4cf943598bbc001d26a12507fc64b Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Tue, 26 May 2026 18:37:38 +0400 Subject: [PATCH 1/4] Test CI --- .github/workflows/visual-tests-demos.yml | 4 + .../DataGrid/RowSelection/jQuery/index.html | 2 +- .../DataGrid/RowSelection/jQuery/index.js | 5 +- .../DataGrid/RowSelection/jQuery/styles.css | 4 - .../Overview/Angular/app/app.component.css | 4 +- .../Overview/Angular/app/app.component.html | 9 +- .../TreeList/Overview/React/EmployeeCell.tsx | 6 +- .../Demos/TreeList/Overview/React/styles.css | 4 +- .../TreeList/Overview/ReactJs/EmployeeCell.js | 5 +- .../TreeList/Overview/ReactJs/styles.css | 4 +- .../TreeList/Overview/Vue/EmployeeCell.vue | 9 +- .../Demos/TreeList/Overview/jQuery/index.js | 2 +- .../Demos/TreeList/Overview/jQuery/styles.css | 4 +- .../TreeList-Overview (fluent.blue.light).png | Bin 86011 -> 85667 bytes ...reeList-Overview (material.blue.light).png | Bin 82818 -> 82455 bytes apps/demos/utils/server/csp-check.js | 203 +++++++++++++----- apps/demos/utils/server/csp-server.js | 21 +- 17 files changed, 187 insertions(+), 99 deletions(-) diff --git a/.github/workflows/visual-tests-demos.yml b/.github/workflows/visual-tests-demos.yml index cdc7a9025584..dac997cb7a39 100644 --- a/.github/workflows/visual-tests-demos.yml +++ b/.github/workflows/visual-tests-demos.yml @@ -1212,6 +1212,10 @@ jobs: working-directory: apps/demos run: pnpm add ../../devextreme-installer.tgz ../../devextreme-dist-installer.tgz ../../devextreme-react-installer.tgz ../../devextreme-vue-installer.tgz ../../devextreme-angular-installer.tgz + - name: Prepare JS + working-directory: apps/demos + run: pnpm run prepare-js + - name: Start CSP Server run: node apps/demos/utils/server/csp-server.js 8080 & diff --git a/apps/demos/Demos/DataGrid/RowSelection/jQuery/index.html b/apps/demos/Demos/DataGrid/RowSelection/jQuery/index.html index 3df7c4fa3c9a..cf96fef7f47c 100644 --- a/apps/demos/Demos/DataGrid/RowSelection/jQuery/index.html +++ b/apps/demos/Demos/DataGrid/RowSelection/jQuery/index.html @@ -16,7 +16,7 @@
- +

diff --git a/apps/demos/Demos/DataGrid/RowSelection/jQuery/index.js b/apps/demos/Demos/DataGrid/RowSelection/jQuery/index.js index 1dbbf8434c33..e50c86807de7 100644 --- a/apps/demos/Demos/DataGrid/RowSelection/jQuery/index.js +++ b/apps/demos/Demos/DataGrid/RowSelection/jQuery/index.js @@ -27,10 +27,7 @@ $(() => { const data = selectedItems.selectedRowsData[0]; if (data) { $('.employeeNotes').text(data.Notes); - $('.employeePhoto').attr('src', data.Picture).removeClass('hidden'); - } else { - $('.employeeNotes').text(''); - $('.employeePhoto').addClass('hidden'); + $('.employeePhoto').attr('src', data.Picture).attr('style', null); } }, }); diff --git a/apps/demos/Demos/DataGrid/RowSelection/jQuery/styles.css b/apps/demos/Demos/DataGrid/RowSelection/jQuery/styles.css index 88181fa44e06..5371ee3dbb56 100644 --- a/apps/demos/Demos/DataGrid/RowSelection/jQuery/styles.css +++ b/apps/demos/Demos/DataGrid/RowSelection/jQuery/styles.css @@ -4,10 +4,6 @@ padding: 20px; } -#employeeInfo .employeePhoto.hidden { - visibility: hidden; -} - #employeeInfo .employeeNotes { padding-top: 20px; text-align: justify; diff --git a/apps/demos/Demos/TreeList/Overview/Angular/app/app.component.css b/apps/demos/Demos/TreeList/Overview/Angular/app/app.component.css index 10d2abe7ba88..85fd92141ed7 100644 --- a/apps/demos/Demos/TreeList/Overview/Angular/app/app.component.css +++ b/apps/demos/Demos/TreeList/Overview/Angular/app/app.component.css @@ -15,8 +15,10 @@ ::ng-deep .img { height: 50px; width: 50px; - object-fit: contain; margin-right: 10px; + background-position: center; + background-repeat: no-repeat; + background-size: contain; border-radius: 25px; border: 1px solid lightgray; background-color: #fff; diff --git a/apps/demos/Demos/TreeList/Overview/Angular/app/app.component.html b/apps/demos/Demos/TreeList/Overview/Angular/app/app.component.html index dc1965d0aa5a..972adc2ba2b8 100644 --- a/apps/demos/Demos/TreeList/Overview/Angular/app/app.component.html +++ b/apps/demos/Demos/TreeList/Overview/Angular/app/app.component.html @@ -70,11 +70,12 @@ >
@if(options.data.Task_Assigned_Employee) { - + style.background-image="url('{{ + options.data.Task_Assigned_Employee.Picture + }}')" + >
} @if(options.data.Task_Assigned_Employee) { {{ options.data.Task_Assigned_Employee.Name }} } diff --git a/apps/demos/Demos/TreeList/Overview/React/EmployeeCell.tsx b/apps/demos/Demos/TreeList/Overview/React/EmployeeCell.tsx index 1b729d397ad4..54cda7266f8e 100644 --- a/apps/demos/Demos/TreeList/Overview/React/EmployeeCell.tsx +++ b/apps/demos/Demos/TreeList/Overview/React/EmployeeCell.tsx @@ -10,11 +10,7 @@ const EmployeeCell = (props: TreeListTypes.ColumnCellTemplateData) => { return ( <> - +
  {employee.Name} diff --git a/apps/demos/Demos/TreeList/Overview/React/styles.css b/apps/demos/Demos/TreeList/Overview/React/styles.css index ae902455272f..d575b8ee7dfd 100644 --- a/apps/demos/Demos/TreeList/Overview/React/styles.css +++ b/apps/demos/Demos/TreeList/Overview/React/styles.css @@ -15,8 +15,10 @@ .img { height: 50px; width: 50px; - object-fit: contain; margin-right: 10px; + background-position: center; + background-repeat: no-repeat; + background-size: contain; border-radius: 25px; border: 1px solid lightgray; background-color: #fff; diff --git a/apps/demos/Demos/TreeList/Overview/ReactJs/EmployeeCell.js b/apps/demos/Demos/TreeList/Overview/ReactJs/EmployeeCell.js index 9dd1aaf40eed..8f89e5e1b932 100644 --- a/apps/demos/Demos/TreeList/Overview/ReactJs/EmployeeCell.js +++ b/apps/demos/Demos/TreeList/Overview/ReactJs/EmployeeCell.js @@ -7,10 +7,9 @@ const EmployeeCell = (props) => { } return ( <> -   {employee.Name} diff --git a/apps/demos/Demos/TreeList/Overview/ReactJs/styles.css b/apps/demos/Demos/TreeList/Overview/ReactJs/styles.css index ae902455272f..d575b8ee7dfd 100644 --- a/apps/demos/Demos/TreeList/Overview/ReactJs/styles.css +++ b/apps/demos/Demos/TreeList/Overview/ReactJs/styles.css @@ -15,8 +15,10 @@ .img { height: 50px; width: 50px; - object-fit: contain; margin-right: 10px; + background-position: center; + background-repeat: no-repeat; + background-size: contain; border-radius: 25px; border: 1px solid lightgray; background-color: #fff; diff --git a/apps/demos/Demos/TreeList/Overview/Vue/EmployeeCell.vue b/apps/demos/Demos/TreeList/Overview/Vue/EmployeeCell.vue index 1e14145028ca..7b27f480665c 100644 --- a/apps/demos/Demos/TreeList/Overview/Vue/EmployeeCell.vue +++ b/apps/demos/Demos/TreeList/Overview/Vue/EmployeeCell.vue @@ -1,9 +1,8 @@