#9351 HTML and Image questions should contain sd-element class for co…

…rrect collapse (#9352) * #9351 HTML and Image questions should contain sd-element class for correct collapse Fixes #9351 * #9351 - markup tests
surveyjs · Jan 24, 2025 · 202488c · 202488c
1 parent 4d0e094
commit 202488c
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
+</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>
diff --git 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>