From 6cfbd9af716ebe2a641952e022b0a76804fefccb Mon Sep 17 00:00:00 2001 From: 4eb0da <4eb0da@yandex-team.com> Date: Wed, 16 Apr 2025 19:28:09 +0300 Subject: [PATCH] Image wrap_content size with aspect commit_hash:20840c6dffd74ed867a3dcf202d71d04ddc11a98 --- .../src/components/image/Image.module.css | 16 +++++++- .../divkit/src/components/image/Image.svelte | 35 ++++++++++++++++-- .../chromeMobile/aspect-wrap_content.png | Bin 11538 -> 30625 bytes .../firefoxMobile/aspect-wrap_content.png | Bin 2753 -> 6912 bytes .../chromeMobile/aspect-wrap_content.png | Bin 11538 -> 30625 bytes .../firefoxMobile/aspect-wrap_content.png | Bin 2753 -> 6912 bytes .../div-image/aspect-wrap_content.json | 3 +- 7 files changed, 49 insertions(+), 5 deletions(-) diff --git a/client/web/divkit/src/components/image/Image.module.css b/client/web/divkit/src/components/image/Image.module.css index 060d5b244..31520dfea 100644 --- a/client/web/divkit/src/components/image/Image.module.css +++ b/client/web/divkit/src/components/image/Image.module.css @@ -42,7 +42,21 @@ display: block; } -.image_aspect .image__image { +.image_aspect-content .image__aspect-wrapper { + display: grid; + height: 0; + align-content: center; +} + +.image_aspect-content.image_aspect-valign_top .image__aspect-wrapper { + align-content: start; +} + +.image_aspect-content.image_aspect-valign_bottom .image__aspect-wrapper { + align-content: end; +} + +.image_aspect:not(.image_aspect-content) .image__image { position: absolute; top: 0; left: 0; diff --git a/client/web/divkit/src/components/image/Image.svelte b/client/web/divkit/src/components/image/Image.svelte index cd0a78b43..1e45692ee 100644 --- a/client/web/divkit/src/components/image/Image.svelte +++ b/client/web/divkit/src/components/image/Image.svelte @@ -53,7 +53,10 @@ // Exactly "none", "scale-down" would not match android let scale = 'none'; let position = '50% 50%'; + let aspectPaddingTop = '0'; let aspectPaddingBottom = '0'; + let aspectContent = false; + let aspectContentVAlign = 'center'; let tintColor: string | undefined = undefined; let tintMode: TintMode = 'source_in'; let svgFilterId = ''; @@ -70,6 +73,7 @@ $: origJson = componentContext.origJson; function rebind(): void { + aspectContent = false; scale = 'none'; position = '50% 50%'; tintMode = 'source_in'; @@ -166,9 +170,28 @@ $: alt = $jsonA11y?.description || ''; $: { + aspectContentVAlign = 'center'; + aspectPaddingTop = '0'; + aspectPaddingBottom = '0'; + const newRatio = $jsonAspect?.ratio; if (newRatio && isPositiveNumber(newRatio)) { - aspectPaddingBottom = (100 / Number(newRatio)).toFixed(2); + const height = 100 / Number(newRatio); + aspectContent = componentContext.json.width?.type === 'wrap_content'; + + if (aspectContent) { + if ($jsonPosition.content_alignment_vertical === 'top') { + aspectPaddingBottom = height.toFixed(2); + aspectContentVAlign = 'top'; + } else if ($jsonPosition.content_alignment_vertical === 'bottom') { + aspectPaddingTop = height.toFixed(2); + aspectContentVAlign = 'bottom'; + } else { + aspectPaddingTop = aspectPaddingBottom = (height / 2).toFixed(2); + } + } else { + aspectPaddingBottom = height.toFixed(2); + } } else { aspectPaddingBottom = '0'; } @@ -210,7 +233,9 @@ } $: mods = { - aspect: aspectPaddingBottom !== '0', + aspect: aspectPaddingBottom !== '0' || aspectPaddingTop !== '0', + 'aspect-content': aspectContent, + 'aspect-valign': aspectContentVAlign !== 'center' ? aspectContentVAlign : undefined, 'is-width-content': isWidthContent, 'is-height-content': isHeightContent, loaded: state === STATE_LOADED, @@ -263,7 +288,11 @@ {#key svgFilterId} {#if mods.aspect} - + 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 literal 11538 zcmeHNZ){Ul6u+g=E`y>5g|dGv@?koOZV4GP&D=CIbBnZYfSX3?Ttgf|DTrC!YWq5L zCc>B>$f6(i2j$P0PPPRcCbMsZgw_u-6bGBs^^Hu{&_BG$)^_XLd(ZpcEA)0!l77?V ze(Srv_nmWo=e%>z{oV8VYuYkZYFa7)Kvn)qX%zs=eg$9!NKwF%y`#H|0LTXAr7v#( zsKftfern*C_LkpzPEF}L8lO$Gedep&4Q~Cc&8<=%`DW;ld+XaDF5h$VOWKiM*%8>l z&pU%kVB6I;JwH3HCs-%tP!k+W6a0F^qLbnyzW!o@aZz(EOlSik15m41paE0I& z#z(l|JVWuE$#Rn$$%6j^Zk;?0YNyx?!17h~0Hmm)qL1!tk%QX7o;AC}MqSQTZgHV| zWme<{JF|K-xbP-J5|PnCtD9M-0s|B3>EBIl!C80u{l$65WFWh?L=H+W*c8BKdnN;b z!*)wg4exSi)&tumsQO%|f&D4GA`MD0e_GUQ_0$y8_GV$WOa*{!iB3OWltD=@)1lx< zU=q%%d5;R~sOPU=G3%kMwdsbBMTN}r2dqWxIZr?CBV5C9*1*L6jBfHkUw4>6owsY?tiu6@yRC6X8tIh~lsZGJq>yom@iBAG z>;qs^DAZZU8qFp_ZB1Jgx^)65cODC!h=`~t9^epBrKwaUlw_oyzRnMslmd1Zs@Nhx zXAwbZ{aaE<74J;MoF`U8Np5mmAOAir__EHqUxH5ZWzog1?IQvz?wI#t28c28)=dCv z`~l6S2o<^`U^hfFJtB0^37{Owe?e3z319jP+Ynz4mrWe?CL2&83y%a;zC%(d314P9 zqtJ=I45yf@SRulb2`G|A0;<3fjqoIVIbA40C;HM4zu9la2u~uQTwzxF7R7*as3nDx z@MS}W6Y=HbMt^xwjPN7^3MU7g9B^_Fc29J-!O20~ZE$kH$pI$^oE(Is!M{pToE&g+ zz{vq82b>)4(;%30_%Ct}R-awpPWx{Mo9sLL$9=)}$c*-D@fRH6iHGo5=e(xSTy#~W zf^F#X>{uA>y0=u{Yc#Z8MQ0?Yqncl5(S=kKU42Vqj=s9da*~`R?*0`(M-mfsCEr=! z)d_|O%lpTSp2nT=<`p=evY;~((<1fP;&AysY~4Yg?TNm6yxQwxb9C;wk;Ft11`C4~ zW2A9pMet`ByHvnA3nzH#c1gIOz`G$X9nd>WTsq*=;r~%Oe6W7;GytnE3%vl*5?tSl ztNBO;KKkHuB6@Pf=frzt13pyuk6{J^(=`a&g}E&$9B}F23*yoNQ_K&cn7QFj&AH}m z#lh^;M+G6>l89QO_Z)ztPJkY|nj_K}GViuF5UB70pj-V6QVMe_304=B3($ F{{RSiH?#l% diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-gif-image/aspect-wrap_content/firefoxMobile/aspect-wrap_content.png b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-gif-image/aspect-wrap_content/firefoxMobile/aspect-wrap_content.png index 5f38c79eab557026b30d2044e417b5053902d693..2a6aa067a4045163ff6de9bb722a254559684083 100644 GIT binary patch literal 6912 zcmeHMZB!Fi8otAX39*Jmf?p9NTNOO(T66(HG-0x^3$!9>t4CWAR9c99sA(-A3Q2%2 z1$)44d)5zD7#YF z`GVoCLDC8$j`TNP0llouf)&z;tb*G3bJ?~yvbc+$K!-s?AjhQEp-Stl=*+edsZFb^ z8IX*O9v^*Gf?`CC?@Yh$N8LeoNY1n8h}E_Ri|;DQrwh>AJe=z0@Rywr=5o#U}gi)SiMN zR)6G7)qItux-`Heo*%D_-B__Jj-<9QQhNmkavTv*GxDy1vyWvR#lMxTGgp6|To>k_ zzX-nWcVf&jc^G5vpXfDzITc7B45G1PxrO-b@M}SjJll?Je*EIy?tPlKdR9ww3Wlmn z#YRN#cLEMs=3(A?e~G!*aH?bL{!6opmzHe@-bALNhn~3mW`Shez?Qy?l)b<7Zs3K5 ztQZyR%eRGLnKgqSDRb{{@XEF!LIQru3uhB-!hRLNC+q4QBo_`s7IUqAYth+6=giJf zM_aD1tk2{L36K^mEUmAyv&965-QeweHoIU{yGHlD{PCi@;o zaBo#rT92Ch^0Ub+&uItsNA2CM?ncD8li`n&`i#A5>qPS-rLYO&X`&0Hg%XY5!>yFL z{`sjHJZp+Bk;u0Xj8|bV;4KwP%Xp}!Pt{vVFP4oOc}(*>Tsa3fVOk6H9*B>hxHh(< zMQr@e{r>3SHT(8EZo^^0jU~l@4BXZw8^G_;E%~v zG&vz-jk9sTpCgOm<_4dUB_+)hl65OHDn+ZMV={M$>pYEt(BP|UKGC)x2s>xGKGo-GIichGbD@=T< zG)y`=VqwJ2)G%9jka<<|UNTh2taOHApG%0KZ2hDWJ3(Ifow7M3;EvY`HB{zoc?WVJ zcxVn+3#O6C%VFDal>3Y0tBqn~HUZ$<^p1-qdAU1%ps+*gxrGfCM|-@k`&!7vEsL$B4Zp%nFf zojzOwILEE+>NH-s$SZm}jGj%Xfrng$CHl*s2W~<_{RQTq<=$VqKr{{7iE4GYY|x@B zbf$#JMbInfb1Y3z%L#Y-2yw(UEe>c96DlWwngb#}hxfVsI@D6v)gK2Fuqj7I& z$0N~q;N9db+n0Zok?7DHTrJd$-Aov(zNxF&z2(-Lh!U#QkYv~yWF zr2EkCr2;wyZOF3IOFTCCxS*lVg=fodd^aP})(=Bu)ZN78!+_EnAB}}TpI0#YFTe9< zfj^ysCVk7c4gA_Lw~u#0yHKb>N2p^{Wn?6(4oD|f^dEs3dg6n4yT*sYWK{nRjQ*3Y zS6Fd$3bJoo+iOJ$3RYA1QO(&37=rFo{4p86s;3pS^->jy$?TmVSXVKQ* z{bt+{>32UlLjjIq)lwn97yW<}UMb2qSC^k3K}a*pyq}l%;4|JPpVLJ{aHuK20)(Ov z5AHXrWnBn|UQ`H=^ACMXllB=S^VWRCOZ2+z40aa#*$H;i_5oi690j8?;{~Ybj1n*s z9GA)uU`2Z_tKQhZ;IDjG9NvfmUdtUN`*fuUq5tdwziRFNJd!Gyro80g#aYqL>Ylub z{MxH~`B{R(RIpQu0QGtb22(JYg2Dgq{Xj@mJoC4XDUD%h%w!BN#_m>S32Is!TO11i Qr3GUDxHhWx4_gZU1wS8aXaE2J literal 2753 zcmeAS@N?(olHy`uVBq!ia0y~yV9a1(U^3%i1B%pk3Y}+Q;Og*naSW-L^Y+%p-dJ}L zmxId=^q5WaowPH@N4vT2#mP&y$|05Sw|`!HY(ZiDpI={JS2OVc`19w_E*$d! diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-image/aspect-wrap_content/chromeMobile/aspect-wrap_content.png b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-image/aspect-wrap_content/chromeMobile/aspect-wrap_content.png index 874470c50b6a261dde2e6d2ba988e30abe990ec6..de259fd79006b0e9db44a27be18ed56f9052ea64 100644 GIT binary patch literal 30625 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 literal 11538 zcmeHNZ){Ul6u+g=E`y>5g|dGv@?koOZV4GP&D=CIbBnZYfSX3?Ttgf|DTrC!YWq5L zCc>B>$f6(i2j$P0PPPRcCbMsZgw_u-6bGBs^^Hu{&_BG$)^_XLd(ZpcEA)0!l77?V ze(Srv_nmWo=e%>z{oV8VYuYkZYFa7)Kvn)qX%zs=eg$9!NKwF%y`#H|0LTXAr7v#( zsKftfern*C_LkpzPEF}L8lO$Gedep&4Q~Cc&8<=%`DW;ld+XaDF5h$VOWKiM*%8>l z&pU%kVB6I;JwH3HCs-%tP!k+W6a0F^qLbnyzW!o@aZz(EOlSik15m41paE0I& z#z(l|JVWuE$#Rn$$%6j^Zk;?0YNyx?!17h~0Hmm)qL1!tk%QX7o;AC}MqSQTZgHV| zWme<{JF|K-xbP-J5|PnCtD9M-0s|B3>EBIl!C80u{l$65WFWh?L=H+W*c8BKdnN;b z!*)wg4exSi)&tumsQO%|f&D4GA`MD0e_GUQ_0$y8_GV$WOa*{!iB3OWltD=@)1lx< zU=q%%d5;R~sOPU=G3%kMwdsbBMTN}r2dqWxIZr?CBV5C9*1*L6jBfHkUw4>6owsY?tiu6@yRC6X8tIh~lsZGJq>yom@iBAG z>;qs^DAZZU8qFp_ZB1Jgx^)65cODC!h=`~t9^epBrKwaUlw_oyzRnMslmd1Zs@Nhx zXAwbZ{aaE<74J;MoF`U8Np5mmAOAir__EHqUxH5ZWzog1?IQvz?wI#t28c28)=dCv z`~l6S2o<^`U^hfFJtB0^37{Owe?e3z319jP+Ynz4mrWe?CL2&83y%a;zC%(d314P9 zqtJ=I45yf@SRulb2`G|A0;<3fjqoIVIbA40C;HM4zu9la2u~uQTwzxF7R7*as3nDx z@MS}W6Y=HbMt^xwjPN7^3MU7g9B^_Fc29J-!O20~ZE$kH$pI$^oE(Is!M{pToE&g+ zz{vq82b>)4(;%30_%Ct}R-awpPWx{Mo9sLL$9=)}$c*-D@fRH6iHGo5=e(xSTy#~W zf^F#X>{uA>y0=u{Yc#Z8MQ0?Yqncl5(S=kKU42Vqj=s9da*~`R?*0`(M-mfsCEr=! z)d_|O%lpTSp2nT=<`p=evY;~((<1fP;&AysY~4Yg?TNm6yxQwxb9C;wk;Ft11`C4~ zW2A9pMet`ByHvnA3nzH#c1gIOz`G$X9nd>WTsq*=;r~%Oe6W7;GytnE3%vl*5?tSl ztNBO;KKkHuB6@Pf=frzt13pyuk6{J^(=`a&g}E&$9B}F23*yoNQ_K&cn7QFj&AH}m z#lh^;M+G6>l89QO_Z)ztPJkY|nj_K}GViuF5UB70pj-V6QVMe_304=B3($ F{{RSiH?#l% diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-image/aspect-wrap_content/firefoxMobile/aspect-wrap_content.png b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-image/aspect-wrap_content/firefoxMobile/aspect-wrap_content.png index 5f38c79eab557026b30d2044e417b5053902d693..2a6aa067a4045163ff6de9bb722a254559684083 100644 GIT binary patch literal 6912 zcmeHMZB!Fi8otAX39*Jmf?p9NTNOO(T66(HG-0x^3$!9>t4CWAR9c99sA(-A3Q2%2 z1$)44d)5zD7#YF z`GVoCLDC8$j`TNP0llouf)&z;tb*G3bJ?~yvbc+$K!-s?AjhQEp-Stl=*+edsZFb^ z8IX*O9v^*Gf?`CC?@Yh$N8LeoNY1n8h}E_Ri|;DQrwh>AJe=z0@Rywr=5o#U}gi)SiMN zR)6G7)qItux-`Heo*%D_-B__Jj-<9QQhNmkavTv*GxDy1vyWvR#lMxTGgp6|To>k_ zzX-nWcVf&jc^G5vpXfDzITc7B45G1PxrO-b@M}SjJll?Je*EIy?tPlKdR9ww3Wlmn z#YRN#cLEMs=3(A?e~G!*aH?bL{!6opmzHe@-bALNhn~3mW`Shez?Qy?l)b<7Zs3K5 ztQZyR%eRGLnKgqSDRb{{@XEF!LIQru3uhB-!hRLNC+q4QBo_`s7IUqAYth+6=giJf zM_aD1tk2{L36K^mEUmAyv&965-QeweHoIU{yGHlD{PCi@;o zaBo#rT92Ch^0Ub+&uItsNA2CM?ncD8li`n&`i#A5>qPS-rLYO&X`&0Hg%XY5!>yFL z{`sjHJZp+Bk;u0Xj8|bV;4KwP%Xp}!Pt{vVFP4oOc}(*>Tsa3fVOk6H9*B>hxHh(< zMQr@e{r>3SHT(8EZo^^0jU~l@4BXZw8^G_;E%~v zG&vz-jk9sTpCgOm<_4dUB_+)hl65OHDn+ZMV={M$>pYEt(BP|UKGC)x2s>xGKGo-GIichGbD@=T< zG)y`=VqwJ2)G%9jka<<|UNTh2taOHApG%0KZ2hDWJ3(Ifow7M3;EvY`HB{zoc?WVJ zcxVn+3#O6C%VFDal>3Y0tBqn~HUZ$<^p1-qdAU1%ps+*gxrGfCM|-@k`&!7vEsL$B4Zp%nFf zojzOwILEE+>NH-s$SZm}jGj%Xfrng$CHl*s2W~<_{RQTq<=$VqKr{{7iE4GYY|x@B zbf$#JMbInfb1Y3z%L#Y-2yw(UEe>c96DlWwngb#}hxfVsI@D6v)gK2Fuqj7I& z$0N~q;N9db+n0Zok?7DHTrJd$-Aov(zNxF&z2(-Lh!U#QkYv~yWF zr2EkCr2;wyZOF3IOFTCCxS*lVg=fodd^aP})(=Bu)ZN78!+_EnAB}}TpI0#YFTe9< zfj^ysCVk7c4gA_Lw~u#0yHKb>N2p^{Wn?6(4oD|f^dEs3dg6n4yT*sYWK{nRjQ*3Y zS6Fd$3bJoo+iOJ$3RYA1QO(&37=rFo{4p86s;3pS^->jy$?TmVSXVKQ* z{bt+{>32UlLjjIq)lwn97yW<}UMb2qSC^k3K}a*pyq}l%;4|JPpVLJ{aHuK20)(Ov z5AHXrWnBn|UQ`H=^ACMXllB=S^VWRCOZ2+z40aa#*$H;i_5oi690j8?;{~Ybj1n*s z9GA)uU`2Z_tKQhZ;IDjG9NvfmUdtUN`*fuUq5tdwziRFNJd!Gyro80g#aYqL>Ylub z{MxH~`B{R(RIpQu0QGtb22(JYg2Dgq{Xj@mJoC4XDUD%h%w!BN#_m>S32Is!TO11i Qr3GUDxHhWx4_gZU1wS8aXaE2J literal 2753 zcmeAS@N?(olHy`uVBq!ia0y~yV9a1(U^3%i1B%pk3Y}+Q;Og*naSW-L^Y+%p-dJ}L zmxId=^q5WaowPH@N4vT2#mP&y$|05Sw|`!HY(ZiDpI={JS2OVc`19w_E*$d! diff --git a/test_data/snapshot_test_data/div-image/aspect-wrap_content.json b/test_data/snapshot_test_data/div-image/aspect-wrap_content.json index 07bf90f74..389299190 100644 --- a/test_data/snapshot_test_data/div-image/aspect-wrap_content.json +++ b/test_data/snapshot_test_data/div-image/aspect-wrap_content.json @@ -2,7 +2,8 @@ "description": "Image with wrap_content width and aspect ratio equal to 2 (height = width / 2)", "platforms": [ "android", - "flutter" + "flutter", + "web" ], "card": { "log_id": "snapshot_test_card",