From 9ebe2d02a6a4c4295f5ff6cab3a4ac63218a7ce1 Mon Sep 17 00:00:00 2001 From: "zhanwen.zw" Date: Thu, 10 Mar 2022 15:11:58 +0800 Subject: [PATCH] fix: align-self not work for positioned flex item --- .../css-flexbox/align-self.ts.0a8828ed1.png | Bin 0 -> 4163 bytes .../css-flexbox/align-self.ts.472d76871.png | Bin 0 -> 3885 bytes .../css-flexbox/align-self.ts.88708f3c1.png | Bin 0 -> 4376 bytes .../css-flexbox/align-self.ts.f90c55791.png | Bin 0 -> 3721 bytes .../specs/css/css-flexbox/align-self.ts | 101 ++++++++++++++++++ kraken/lib/src/css/render_style.dart | 9 ++ kraken/lib/src/rendering/flex.dart | 23 ++-- 7 files changed, 127 insertions(+), 6 deletions(-) create mode 100644 integration_tests/snapshots/css/css-flexbox/align-self.ts.0a8828ed1.png create mode 100644 integration_tests/snapshots/css/css-flexbox/align-self.ts.472d76871.png create mode 100644 integration_tests/snapshots/css/css-flexbox/align-self.ts.88708f3c1.png create mode 100644 integration_tests/snapshots/css/css-flexbox/align-self.ts.f90c55791.png diff --git a/integration_tests/snapshots/css/css-flexbox/align-self.ts.0a8828ed1.png b/integration_tests/snapshots/css/css-flexbox/align-self.ts.0a8828ed1.png new file mode 100644 index 0000000000000000000000000000000000000000..5a0189b6fc3e9949210dcbae51fc6defe0cba66d GIT binary patch literal 4163 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 literal 0 HcmV?d00001 diff --git a/integration_tests/snapshots/css/css-flexbox/align-self.ts.f90c55791.png b/integration_tests/snapshots/css/css-flexbox/align-self.ts.f90c55791.png new file mode 100644 index 0000000000000000000000000000000000000000..716a48c2c0f873a4ca62939754afa44d5f4d2dd8 GIT binary patch literal 3721 zcmeH~Yfw|^8OIOciq#@(S+Esqw%u{usY}>ylo%jET^LHYL#pG-vRqxCr^;Bj1c?x0LK0yiqnzZdAeRtHxaI&70tvYsLXu{C`O;7Oy}V!k z^FA}rf9Cl;&-={0H~*NH60&pOP5=NxQh%3p3IGBw06<{nj_v-)<9#!&ehC0irJMlT zv{8%x%Qo;t>ggT+!`*TI1_10Pq$V9dUD9lxw(%o`0f&l&rUoDpN^liVU`30L`Y8Wn&!Ebh~o9u2Mp#ffXnqp{Xsx= z=O>4ceRC`*=|@O(ylu#`{E8}$-*{qFNT>l*>fZ4G&3;ARzfdEv5^c9yJu~F;&njEA z{>W8g7SV`}5?2=c0++8u(CM+PiNk35!a7#%6nr$6g=wVorVyK|IwAiKq))Yde+@_C z6APL^WMhiE{HhjxF^K2&fBK1yPy_Wwxt~h3l+cnX80Ic+Qne2uhZ~$@_2g5$3MU-C z7s`!DkJkK(S~?Ns-jHaAmdGeI$9qrevI$#wyjelf!Uwd+AF?R(LE=))gw(Ng2z?Uf zz2cn*g@UVNG-7bn`VG=17Sq&9u{0JObO*<9o<+H8gOQoP-^a!u9z?<*yA)gxTB)Lj zOzm&~kN_I0sX}FiXAN9MC`}Fr0QSVn|VB`)ha@gg>j4@Fipplyxe>pCj1C|{@gi~61+Ow=`Uy?KCRKS`)HxT zDi~(;->Q;*5I6g`Fw@->a%qkyJ@LzFkHZLg7w)U!`?RNLD>lAXvmzmbMP4efcg)i1 zrd3o~h<977Kwa`)EezKRJa251j})Yaob`UvQh$um(S&Szs?iNg4uR#;JGJKoh2t>1 zIkYDQk>GpIYbiF5KCov*D74>{`mW(FtFIpma-Q5JF&68y%ItNv^}SKDzN4%b=ymOG zVWfg>&d*XZW51;l#~^2uzr;1SQP1=siSy}Q`U=&bLwg3B;$F^a4ZSM}v{0!=|69{5;PMM|f*(g@ie0hjF_f2irS21m$ zH~F!w;zgMXF6Qg*c`q}_``3?gvPqZVl9P9BzkR_xP@FBbLX$XE`Lo`koH7jz4}=iS zKlrp#oJ2GuCY~A5P*0y2!nRB}f;QJ6a|i9F0}k#ZtW^w4Ly| zLjR&)2bw9i&RrBq-&>ie=;=&HhS=y~6pakkyn}}CVt>INet^r5)U$m-e)10@S&buQ zqCJdC3^5*0oNe5T5b@HIe@)+@zvp=GCc_klJ9^b?j!cI~F%ivGMVcNFHO2^RH!*7~ z(jrEV7Nl`KYd$onO~+R9c$llqNT$iAgy<-w%-zkgPK&$qE_!F`Vp<@s&!|aHEc0fq zKCeOC28SA)min#`71@<7>RuS$qn4kKWp-cGmZExenUJQB#Y}9d&;gAf*K44q_ZUn* zGzVe!fir_E+|Z3QT7tKCxTcvZ@G3ZCI7Jbip5_|IYHXwh;LD l?A9*WLhyev1xtxQd(qc--ak^w@qZ_Q)a10Jwi9Rn@=qKHq1pfd literal 0 HcmV?d00001 diff --git a/integration_tests/specs/css/css-flexbox/align-self.ts b/integration_tests/specs/css/css-flexbox/align-self.ts index cd8310aed6..1c614dc8df 100644 --- a/integration_tests/specs/css/css-flexbox/align-self.ts +++ b/integration_tests/specs/css/css-flexbox/align-self.ts @@ -1695,4 +1695,105 @@ describe('align-self', () => { done(); }); }); + + it('stretch should not work with positioned child of no top bottom', async () => { + let item = createElement('div', { + style: { + display: 'flex', + flexDirection: 'row', + height: '50px', + backgroundColor: 'coral', + } + }, [ + createElement('div', { + style: { + position: 'absolute', + alignSelf: 'stretch', + backgroundColor: 'lightblue', + } + }, [ + createText('stretch') + ]), + ]); + + BODY.appendChild(item); + + await snapshot(); + }); + + it('flex-start should work with positioned child of no top bottom', async () => { + let item = createElement('div', { + style: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + height: '50px', + backgroundColor: 'coral', + } + }, [ + createElement('div', { + style: { + position: 'absolute', + alignSelf: 'flex-start', + backgroundColor: 'lightblue', + } + }, [ + createText('flex-start') + ]), + ]); + + BODY.appendChild(item); + + await snapshot(); + }); + + it('center should work with positioned child of no top bottom', async () => { + let item = createElement('div', { + style: { + display: 'flex', + flexDirection: 'row', + height: '50px', + backgroundColor: 'coral', + } + }, [ + createElement('div', { + style: { + position: 'absolute', + alignSelf: 'center', + backgroundColor: 'lightblue', + } + }, [ + createText('center') + ]), + ]); + + BODY.appendChild(item); + + await snapshot(); + }); + + it('flex-end should work with positioned child of no top bottom', async () => { + let item = createElement('div', { + style: { + display: 'flex', + flexDirection: 'row', + height: '50px', + backgroundColor: 'coral', + } + }, [ + createElement('div', { + style: { + position: 'absolute', + alignSelf: 'flex-end', + backgroundColor: 'lightblue', + } + }, [ + createText('flex-end') + ]), + ]); + + BODY.appendChild(item); + + await snapshot(); + }); }); diff --git a/kraken/lib/src/css/render_style.dart b/kraken/lib/src/css/render_style.dart index 5972abe956..ecf0d5447d 100644 --- a/kraken/lib/src/css/render_style.dart +++ b/kraken/lib/src/css/render_style.dart @@ -833,6 +833,15 @@ class CSSRenderStyle bool isFlexNoWrap = false; bool isChildStretchSelf = false; if (isParentFlex) { + // The absolutely-positioned box is considered to be “fixed-size”, a value of stretch + // is treated the same as flex-start. + // https://www.w3.org/TR/css-flexbox-1/#abspos-items + bool isPositioned = renderStyle.position == CSSPositionType.absolute + || renderStyle.position == CSSPositionType.fixed; + if (isPositioned) { + return false; + } + isHorizontalDirection = CSSFlex.isHorizontalFlexDirection(parentRenderStyle.flexDirection); isFlexNoWrap = parentRenderStyle.flexWrap != FlexWrap.wrap && parentRenderStyle.flexWrap != FlexWrap.wrapReverse; diff --git a/kraken/lib/src/rendering/flex.dart b/kraken/lib/src/rendering/flex.dart index 0d0fac546b..20c64427fa 100644 --- a/kraken/lib/src/rendering/flex.dart +++ b/kraken/lib/src/rendering/flex.dart @@ -291,13 +291,16 @@ class RenderFlexLayout extends RenderLayoutBox { } AlignSelf _getAlignSelf(RenderBox child) { - // Flex shrink has no effect on placeholder of positioned element. - if (child is RenderPositionPlaceholder) { - return AlignSelf.auto; + RenderBoxModel? childRenderBoxModel; + if (child is RenderBoxModel) { + childRenderBoxModel = child; + } else if (child is RenderPositionPlaceholder) { + childRenderBoxModel = child.positioned; + } + if (childRenderBoxModel != null) { + return childRenderBoxModel.renderStyle.alignSelf; } - return child is RenderBoxModel - ? child.renderStyle.alignSelf - : AlignSelf.auto; + return AlignSelf.auto; } double _getMaxMainAxisSize(RenderBox child) { @@ -1992,6 +1995,14 @@ class RenderFlexLayout extends RenderLayoutBox { // Position placeholder and BR element has size of zero, so they can not be stretched. if (child is RenderPositionPlaceholder || child is RenderLineBreak) return false; + // The absolutely-positioned box is considered to be “fixed-size”, a value of stretch + // is treated the same as flex-start. + // https://www.w3.org/TR/css-flexbox-1/#abspos-items + final RenderLayoutParentData childParentData = child.parentData as RenderLayoutParentData; + if (child is RenderBoxModel && childParentData.isPositioned) { + return false; + } + AlignSelf alignSelf = _getAlignSelf(child); bool isChildAlignmentStretch = alignSelf != AlignSelf.auto ? alignSelf == AlignSelf.stretch