From 4b5f8c13bc852cd0a786cc0052d63b7c6557da1a Mon Sep 17 00:00:00 2001
From: Aleksey Novikov <novikov82@gmail.com>
Date: Mon, 3 Jun 2024 16:33:54 +0300
Subject: [PATCH] #8298 Invalid progress bar layout with default v2 theme
 within a Bootstrap 5 based project (#8350)

* #8298 Invalid progress bar layout with default v2 theme within a Bootstrap 5 based project
Fixes #8298

* #8298 - update screenshots
---
 .../blocks/sd-progress-buttons.scss              |   1 +
 .../etalons/survey-progress-bar-bootstrap.png    | Bin 0 -> 1100 bytes
 .../tests/defaultV2/progress.ts                  |  15 +++++++++++++++
 3 files changed, 16 insertions(+)
 create mode 100644 visualRegressionTests/tests/defaultV2/etalons/survey-progress-bar-bootstrap.png

diff --git a/src/defaultV2-theme/blocks/sd-progress-buttons.scss b/src/defaultV2-theme/blocks/sd-progress-buttons.scss
index f145dee1eb..426ce307d0 100644
--- a/src/defaultV2-theme/blocks/sd-progress-buttons.scss
+++ b/src/defaultV2-theme/blocks/sd-progress-buttons.scss
@@ -101,6 +101,7 @@
         z-index: -1;
         border: calcSize(0.5) solid transparent;
         border-radius: 50%;
+        box-sizing: content-box;
       }
     }
   }
diff --git a/visualRegressionTests/tests/defaultV2/etalons/survey-progress-bar-bootstrap.png b/visualRegressionTests/tests/defaultV2/etalons/survey-progress-bar-bootstrap.png
new file mode 100644
index 0000000000000000000000000000000000000000..3c7cf9bfec406c7f6c47e44062c9bb1b1ac23236
GIT binary patch
literal 1100
zcmeAS@N?(olHy`uVBq!ia0y~yU^)O~i*T?3$!7WP|3He#)5S5Qg7J-1-6aMF7FH1N
z?ZLa<A*Bq*AD*{7_iCP{@ag;rk^bE#8+NYV5_IvjnwLi#%caw<=2EOqv1OvHZ++k8
z{$sxA%Mo>tB~Ws&Ko^Ip+TH^RJ07!TSs$N1SF&{0+?kK({XH7TQEce`GOO?1_sThL
zixUMwAW}8P1q8wb#X;POp+{Un+!WE13ZEE$DD64W&prLe-)p8(ABFf+uYEf7LBsg*
zZIH^B(;T1JmDy%}e77_BPtjwpySD<n&uee4seY^EE_eU1i(Y?6N5_dSp7M_`pBC3t
zK4qGI`~Rk-5`*KbrOk^IQnZyaKlr_5*?)JJ-=x{zvT^@ESD$-#quoR5%Ii|Csa$Kr
zx<%(b7i3{PCgE~vN!<G2l_42hqt<+|=~v(|IHoX3?Q7Lsucc0_uO_uVuVis-Fl<xF
zUbcKW|E0s~)4giGe2)~%+ur%cXku*I!?M|zw^m-;B{@$js^7z2cCP*TjRn)HU+Nrh
zdFxun->-DZe`{24(M}%`*NE(m*MwXJuVzinG3$O_*|EfNZP?-%Jz-bDYf)>qx&*px
zjZ&R`_EDvrQf9#Fs~Xc!y9Bmu70cEQ6bW1#b~0^q#XNU?J<ff*tlTH9Uw=;VQog-T
z%#z#pdXwke+B!dY_qWaEk0tK<UC~p%l%FUuNrlJR<&qMQ^Q4x<4v(moM2|@ZJf4#j
z57zAVob<D7^2f>Tf-jdZY%DFQu21T6FKQEg?`w1TV?m#F)?BfpNrDsWHeGvU!ME2$
zinr^il2T^E+M|UsRhcGIBHgYomkyN1PSVlSn{>qWiQQHS{flRlJfB#ABBU9pYLZ2t
z^CTWlGu~fk%<?asUgkJIe_kEy#JX8lwLQOz&d9c(oByy`_xz?DT_9^=blrjEtSqjH
zby`!sOlJF5oqSs4<L9R|iEU|6XWC{@{hcv=Cr^61Tv`yKbuq{6Wokje1Qk8bxO)a}
zlct;X07GFt>+F|hHgl4ncP_Rm|76_PUR+XLoWia2SB!<xvq`~0MYl;o!Bc>xV~MK(
ziwb8`11u^hJHI}edM)s+&ZW4%$k*!<b*zuv=Ffk;_M*Gs%k8pi4?g^fFPWD7F0JCg
z<Hxz@fuTC@`NQ9KbN$*a`U+#k?|;`6;d=79(&f^j&o(vpmtTG<aNKa+>qo!sTAdne
z?D{>TD(1Dn|6O7w`^e&0X)I7hfX0OL&pjtS)Z^>Pd3xYPn9HSCCzAC)9h1LbSgg5d
z`oc3-eD)jJCvGt~meAv<^0voNB3Z!GI+^E~#J_$XrSBVcEf24^{{HddoAZCReBi&n
z*j46uV#R^v?;kjj@(iPa@xHk;3qhIe-AQO(D+FaI!AMtVR-E{s;pK!l)Ax6Z*8+<N
N22WQ%mvv4FO#nHW_oV;;

literal 0
HcmV?d00001

diff --git a/visualRegressionTests/tests/defaultV2/progress.ts b/visualRegressionTests/tests/defaultV2/progress.ts
index 996a4c05ef..577719c6bc 100644
--- a/visualRegressionTests/tests/defaultV2/progress.ts
+++ b/visualRegressionTests/tests/defaultV2/progress.ts
@@ -359,4 +359,19 @@ frameworks.forEach(framework => {
       await takeElementScreenshot("survey-progress-bar-top-rtl.png", Selector(".sd-container-modern"), t, comparer); // title + progress
     });
   });
+
+  test("Check survey with progress and bootstrap", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await ClientFunction(() => {
+        document.head.insertAdjacentHTML("beforeend", "<style>* { box-sizing: border-box; }</style>");
+      })();
+      await t.resizeWindow(800, 1080);
+      await initSurvey(framework, json);
+      await ClientFunction(() => {
+        (<any>window).survey.progressBarType = "pages";
+        (<any>window).survey.currentPageNo = 1;
+      })();
+      await takeElementScreenshot("survey-progress-bar-bootstrap.png", Selector(".sd-progress-buttons__list"), t, comparer); // title + progress
+    });
+  });
 });
\ No newline at end of file