From 202488c7765efdac24f6533912aa7158382272f7 Mon Sep 17 00:00:00 2001
From: Aleksey Novikov <novikov82@gmail.com>
Date: Fri, 24 Jan 2025 21:06:22 +0300
Subject: [PATCH] #9351 HTML and Image questions should contain sd-element
 class for correct collapse (#9352)

* #9351 HTML and Image questions should contain sd-element class for correct collapse
Fixes #9351

* #9351 - markup tests
---
 packages/survey-core/src/defaultCss/defaultCss.ts |  4 ++--
 tests/markup/etalon_page_panel.ts                 |  7 +++++++
 .../snapshots/layout-page-swnl-v2.snap.html       |  4 ++--
 .../snapshots/layout-panel-page-swnl-v2.snap.html |  4 ++--
 tests/markup/snapshots/page-swnl-v2.snap.html     |  4 ++--
 .../markup/snapshots/panel-page-swnl-v2.snap.html |  4 ++--
 tests/markup/snapshots/panel-swnl-v2.snap.html    |  2 +-
 tests/markup/snapshots/panel.snap.html            | 15 +++++++++++++--
 .../markup/snapshots/survey-navigation.snap.html  |  2 +-
 9 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/packages/survey-core/src/defaultCss/defaultCss.ts b/packages/survey-core/src/defaultCss/defaultCss.ts
index a97320e191..ddf4194378 100644
--- a/packages/survey-core/src/defaultCss/defaultCss.ts
+++ b/packages/survey-core/src/defaultCss/defaultCss.ts
@@ -252,7 +252,7 @@ export var defaultCss = {
     confirmDialog: "sd-popup--confirm sv-popup--confirm"
   },
   image: {
-    mainRoot: "sd-question sd-question--image",
+    mainRoot: "sd-element sd-question sd-question--image",
     root: "sd-image",
     image: "sd-image__image",
     adaptive: "sd-image__image--adaptive",
@@ -261,7 +261,7 @@ export var defaultCss = {
     withFrame: ""
   },
   html: {
-    mainRoot: "sd-question sd-row__question sd-question--html",
+    mainRoot: "sd-element sd-question sd-row__question sd-question--html",
     root: "sd-html",
     withFrame: "",
     nested: "sd-element--nested sd-html--nested"
diff --git a/tests/markup/etalon_page_panel.ts b/tests/markup/etalon_page_panel.ts
index c7ee5c21d9..f041301f0d 100644
--- a/tests/markup/etalon_page_panel.ts
+++ b/tests/markup/etalon_page_panel.ts
@@ -16,6 +16,13 @@ registerMarkupTest(
               html: "HTML content here",
               title: "Question title",
               titleLocation: "hidden"
+            },
+            {
+              "type": "image",
+              "name": "banner",
+              "imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg",
+              "imageWidth": "500px",
+              "imageHeight": "300px"
             }
           ]
         }
diff --git a/tests/markup/snapshots/layout-page-swnl-v2.snap.html b/tests/markup/snapshots/layout-page-swnl-v2.snap.html
index a5ae8915c4..6a078b87cb 100644
--- a/tests/markup/snapshots/layout-page-swnl-v2.snap.html
+++ b/tests/markup/snapshots/layout-page-swnl-v2.snap.html
@@ -1,12 +1,12 @@
 <div style="flex:1 0 50%; max-width:100%;">
-	<div class="sd-question sd-question--html sd-row__question" data-name="question0" id="testid0">
+	<div class="sd-element sd-question sd-question--html sd-row__question" data-name="question0" id="testid0">
 		<div class="sd-element__content sd-question__content" role="presentation">
 			<div class="sd-html">HTML1</div>
 		</div>
 	</div>
 </div>
 <div style="flex:1 0 50%; max-width:100%;">
-	<div class="sd-question sd-question--html sd-row__question" data-name="question1" id="testid1">
+	<div class="sd-element sd-question sd-question--html sd-row__question" data-name="question1" id="testid1">
 		<div class="sd-element__content sd-question__content" role="presentation">
 			<div class="sd-html">HTML2</div>
 		</div>
diff --git a/tests/markup/snapshots/layout-panel-page-swnl-v2.snap.html b/tests/markup/snapshots/layout-panel-page-swnl-v2.snap.html
index 0ec0e18737..3677ab6ef2 100644
--- a/tests/markup/snapshots/layout-panel-page-swnl-v2.snap.html
+++ b/tests/markup/snapshots/layout-panel-page-swnl-v2.snap.html
@@ -1,5 +1,5 @@
 <div style="flex:1 0 50%; max-width:100%;">
-	<div class="sd-question sd-question--html sd-row__question" data-name="question0" id="testid0">
+	<div class="sd-element sd-question sd-question--html sd-row__question" data-name="question0" id="testid0">
 		<div class="sd-element__content sd-question__content" role="presentation">
 			<div class="sd-html">HTML1</div>
 		</div>
@@ -10,7 +10,7 @@
 		<div class="sd-element__content sd-panel__content" id="testidp0_content">
 			<div class="sd-clearfix sd-row">
 				<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-					<div class="sd-element--nested sd-html--nested sd-question sd-question--html sd-row__question" data-name="question1" id="testid1">
+					<div class="sd-element sd-element--nested sd-html--nested sd-question sd-question--html sd-row__question" data-name="question1" id="testid1">
 						<div class="sd-element__content sd-question__content" role="presentation">
 							<div class="sd-element--nested sd-html sd-html--nested">HTML2</div>
 						</div>
diff --git a/tests/markup/snapshots/page-swnl-v2.snap.html b/tests/markup/snapshots/page-swnl-v2.snap.html
index 798129b65d..20a6a3ea0c 100644
--- a/tests/markup/snapshots/page-swnl-v2.snap.html
+++ b/tests/markup/snapshots/page-swnl-v2.snap.html
@@ -1,12 +1,12 @@
 <div style="flex:1 1 50%; max-width:100%; min-width:min(100%, 300px);">
-	<div class="sd-question sd-question--html sd-row__question" data-name="question0" id="testid0">
+	<div class="sd-element sd-question sd-question--html sd-row__question" data-name="question0" id="testid0">
 		<div class="sd-element__content sd-question__content" role="presentation">
 			<div class="sd-html">HTML1</div>
 		</div>
 	</div>
 </div>
 <div style="flex:1 1 50%; max-width:100%; min-width:min(100%, 300px);">
-	<div class="sd-question sd-question--html sd-row__question" data-name="question1" id="testid1">
+	<div class="sd-element sd-question sd-question--html sd-row__question" data-name="question1" id="testid1">
 		<div class="sd-element__content sd-question__content" role="presentation">
 			<div class="sd-html">HTML2</div>
 		</div>
diff --git a/tests/markup/snapshots/panel-page-swnl-v2.snap.html b/tests/markup/snapshots/panel-page-swnl-v2.snap.html
index edba78653e..7e3a74ad69 100644
--- a/tests/markup/snapshots/panel-page-swnl-v2.snap.html
+++ b/tests/markup/snapshots/panel-page-swnl-v2.snap.html
@@ -1,5 +1,5 @@
 <div style="flex:1 1 50%; max-width:100%; min-width:min(100%, 300px);">
-	<div class="sd-question sd-question--html sd-row__question" data-name="question0" id="testid0">
+	<div class="sd-element sd-question sd-question--html sd-row__question" data-name="question0" id="testid0">
 		<div class="sd-element__content sd-question__content" role="presentation">
 			<div class="sd-html">HTML1</div>
 		</div>
@@ -10,7 +10,7 @@
 		<div class="sd-element__content sd-panel__content" id="testidp0_content">
 			<div class="sd-clearfix sd-row">
 				<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-					<div class="sd-element--nested sd-html--nested sd-question sd-question--html sd-row__question" data-name="question1" id="testid1">
+					<div class="sd-element sd-element--nested sd-html--nested sd-question sd-question--html sd-row__question" data-name="question1" id="testid1">
 						<div class="sd-element__content sd-question__content" role="presentation">
 							<div class="sd-element--nested sd-html sd-html--nested">HTML2</div>
 						</div>
diff --git a/tests/markup/snapshots/panel-swnl-v2.snap.html b/tests/markup/snapshots/panel-swnl-v2.snap.html
index a3e9ec9733..1bfb9fd22b 100644
--- a/tests/markup/snapshots/panel-swnl-v2.snap.html
+++ b/tests/markup/snapshots/panel-swnl-v2.snap.html
@@ -1,6 +1,6 @@
 <div class="sd-clearfix sd-row">
 	<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-		<div class="sd-element--nested sd-html--nested sd-question sd-question--html sd-row__question" data-name="question1" id="testid1">
+		<div class="sd-element sd-element--nested sd-html--nested sd-question sd-question--html sd-row__question" data-name="question1" id="testid1">
 			<div class="sd-element__content sd-question__content" role="presentation">
 				<div class="sd-element--nested sd-html sd-html--nested">HTML2</div>
 			</div>
diff --git a/tests/markup/snapshots/panel.snap.html b/tests/markup/snapshots/panel.snap.html
index d3f7e29681..5773b246c0 100644
--- a/tests/markup/snapshots/panel.snap.html
+++ b/tests/markup/snapshots/panel.snap.html
@@ -1,9 +1,20 @@
 <div class="sd-clearfix sd-row">
 	<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-		<div class="sd-element--nested sd-html--nested sd-question sd-question--html sd-row__question" data-name="question1" id="testid0">
+		<div class="sd-element sd-element--nested sd-html--nested sd-question sd-question--html sd-row__question" data-name="question1" id="testid0">
 			<div class="sd-element__content sd-question__content" role="presentation">
 				<div class="sd-element--nested sd-html sd-html--nested">HTML content here</div>
 			</div>
 		</div>
 	</div>
-</div>
\ No newline at end of file
+</div>
+<div class="sd-clearfix sd-row">
+	<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+		<div aria-invalid="false" class="sd-element sd-element--nested sd-question sd-question--image" data-name="banner" id="testid1">
+			<div class="sd-element__content sd-question__content" role="presentation">
+				<div class="sd-image">
+					<img alt="banner" class="sd-image__image" height="300" src="https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg" style="object-fit:contain;" width="500">
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/survey-navigation.snap.html b/tests/markup/snapshots/survey-navigation.snap.html
index af01809e29..1e3b2bd11e 100644
--- a/tests/markup/snapshots/survey-navigation.snap.html
+++ b/tests/markup/snapshots/survey-navigation.snap.html
@@ -7,7 +7,7 @@
 				<div class="sd-body__page sd-page sd-page__empty-header">
 					<div class="sd-clearfix sd-page__row sd-row">
 						<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-							<div class="sd-question sd-question--html sd-row__question" data-name="q1" id="testid0">
+							<div class="sd-element sd-question sd-question--html sd-row__question" data-name="q1" id="testid0">
 								<div class="sd-element__content sd-question__content" role="presentation">
 									<div class="sd-html">
 										<div>