From 1db0024895108297c3bbb91ce9fed960ca9f162c Mon Sep 17 00:00:00 2001 From: "zhanwen.zw" Date: Thu, 9 Sep 2021 14:58:18 +0800 Subject: [PATCH 1/4] fix: margin auto fail in flexbox --- kraken/lib/src/rendering/flex.dart | 321 ++++++++++++++++++++++------- 1 file changed, 243 insertions(+), 78 deletions(-) diff --git a/kraken/lib/src/rendering/flex.dart b/kraken/lib/src/rendering/flex.dart index a35251e40e..90a57122c2 100644 --- a/kraken/lib/src/rendering/flex.dart +++ b/kraken/lib/src/rendering/flex.dart @@ -2145,29 +2145,22 @@ class RenderFlexLayout extends RenderLayoutBox { } // Calculate margin auto children in the main axis - double mainAxisMarginAutoChildren = 0; + double mainAxisMarginAutoChildrenCount = 0; RenderBox? runChild = firstChild; + while (runChild != null) { final RenderLayoutParentData childParentData = runChild.parentData as RenderLayoutParentData; if (childParentData.runIndex != i) break; - if (runChild is RenderBoxModel) { - RenderStyle childRenderStyle = runChild.renderStyle; - CSSMargin marginLeft = childRenderStyle.marginLeft; - CSSMargin marginTop = childRenderStyle.marginTop; - if ((CSSFlex.isHorizontalFlexDirection(renderStyle.flexDirection) && - marginLeft.isAuto!) || - (CSSFlex.isVerticalFlexDirection(renderStyle.flexDirection) && - marginTop.isAuto!)) { - mainAxisMarginAutoChildren++; - } + if (isChildMainAxisMarginAutoExist(runChild)) { + mainAxisMarginAutoChildrenCount++; } runChild = childParentData.nextSibling; } - // Margin auto alignment takes priority over align-self alignment - if (mainAxisMarginAutoChildren != 0) { + // Justify-content has no effect if auto margin of child exists in the main axis. + if (mainAxisMarginAutoChildrenCount != 0) { leadingSpace = 0; betweenSpace = 0; } @@ -2186,13 +2179,6 @@ class RenderFlexLayout extends RenderLayoutBox { leadingSpace : leadingSpace + mainAxisStartPadding + mainAxisStartBorder; - // Leading between height of line box's content area and line height of line box - double lineBoxLeading = 0; - double? lineBoxHeight = _getLineHeight(this); - if (lineBoxHeight != null) { - lineBoxLeading = lineBoxHeight - runCrossAxisExtent; - } - while (child != null) { final RenderLayoutParentData? childParentData = child.parentData as RenderLayoutParentData?; @@ -2206,48 +2192,10 @@ class RenderFlexLayout extends RenderLayoutBox { if (childParentData!.runIndex != i) break; double childMainAxisMargin = flowAwareChildMainAxisMargin(child)!; - double childCrossAxisStartMargin = - flowAwareChildCrossAxisMargin(child)!; - // Add start margin of main axis when setting offset childMainPosition += childMainAxisMargin; - double? childCrossPosition; - AlignSelf alignSelf = _getAlignSelf(child); - double crossStartAddedOffset = crossAxisStartPadding + - crossAxisStartBorder + - childCrossAxisStartMargin; - - /// Align flex item by direction returned by align-items or align-self - double? alignFlexItem(String alignment) { - double flexLineHeight = _getFlexLineHeight( - runCrossAxisExtent, runBetweenSpace, - beforeSetSize: false); - - switch (alignment) { - case 'start': - return crossStartAddedOffset; - case 'end': - // Length returned by _getCrossAxisExtent includes margin, so end alignment should add start margin - return crossAxisStartPadding + - crossAxisStartBorder + - flexLineHeight - - _getCrossAxisExtent(child) + - childCrossAxisStartMargin; - case 'center': - return childCrossPosition = crossStartAddedOffset + - (flexLineHeight - _getCrossAxisExtent(child)) / 2.0; - case 'baseline': - // Distance from top to baseline of child - double childAscent = _getChildAscent(child!); - return crossStartAddedOffset + - lineBoxLeading / 2 + - (runBaselineExtent - childAscent); - default: - return null; - } - } if (alignSelf == AlignSelf.auto) { switch (renderStyle.alignItems) { @@ -2255,27 +2203,99 @@ class RenderFlexLayout extends RenderLayoutBox { case AlignItems.start: case AlignItems.stretch: childCrossPosition = renderStyle.flexWrap == FlexWrap.wrapReverse - ? alignFlexItem('end') - : alignFlexItem('start'); + ? _getChildCrossAxisOffset( + 'end', + child, + childCrossPosition, + runBaselineExtent, + runCrossAxisExtent, + runBetweenSpace, + crossAxisStartPadding, + crossAxisStartBorder, + ) + : _getChildCrossAxisOffset( + 'start', + child, + childCrossPosition, + runBaselineExtent, + runCrossAxisExtent, + runBetweenSpace, + crossAxisStartPadding, + crossAxisStartBorder, + ); break; case AlignItems.flexEnd: case AlignItems.end: childCrossPosition = renderStyle.flexWrap == FlexWrap.wrapReverse - ? alignFlexItem('start') - : alignFlexItem('end'); + ? _getChildCrossAxisOffset( + 'start', + child, + childCrossPosition, + runBaselineExtent, + runCrossAxisExtent, + runBetweenSpace, + crossAxisStartPadding, + crossAxisStartBorder, + ) + : _getChildCrossAxisOffset( + 'end', + child, + childCrossPosition, + runBaselineExtent, + runCrossAxisExtent, + runBetweenSpace, + crossAxisStartPadding, + crossAxisStartBorder, + ); break; case AlignItems.center: - childCrossPosition = alignFlexItem('center'); + childCrossPosition = _getChildCrossAxisOffset( + 'center', + child, + childCrossPosition, + runBaselineExtent, + runCrossAxisExtent, + runBetweenSpace, + crossAxisStartPadding, + crossAxisStartBorder, + ); break; case AlignItems.baseline: // FIXME: baseline aligne in wrap-reverse flexWrap may display different from browser in some case if (CSSFlex.isHorizontalFlexDirection( renderStyle.flexDirection)) { - childCrossPosition = alignFlexItem('baseline'); + childCrossPosition = _getChildCrossAxisOffset( + 'baseline', + child, + childCrossPosition, + runBaselineExtent, + runCrossAxisExtent, + runBetweenSpace, + crossAxisStartPadding, + crossAxisStartBorder, + ); } else if (renderStyle.flexWrap == FlexWrap.wrapReverse) { - childCrossPosition = alignFlexItem('end'); + childCrossPosition = _getChildCrossAxisOffset( + 'end', + child, + childCrossPosition, + runBaselineExtent, + runCrossAxisExtent, + runBetweenSpace, + crossAxisStartPadding, + crossAxisStartBorder, + ); } else { - childCrossPosition = alignFlexItem('start'); + childCrossPosition = _getChildCrossAxisOffset( + 'start', + child, + childCrossPosition, + runBaselineExtent, + runCrossAxisExtent, + runBetweenSpace, + crossAxisStartPadding, + crossAxisStartBorder, + ); } break; default: @@ -2287,20 +2307,74 @@ class RenderFlexLayout extends RenderLayoutBox { case AlignSelf.start: case AlignSelf.stretch: childCrossPosition = renderStyle.flexWrap == FlexWrap.wrapReverse - ? alignFlexItem('end') - : alignFlexItem('start'); + ? _getChildCrossAxisOffset( + 'end', + child, + childCrossPosition, + runBaselineExtent, + runCrossAxisExtent, + runBetweenSpace, + crossAxisStartPadding, + crossAxisStartBorder, + ) + : _getChildCrossAxisOffset( + 'start', + child, + childCrossPosition, + runBaselineExtent, + runCrossAxisExtent, + runBetweenSpace, + crossAxisStartPadding, + crossAxisStartBorder, + ); break; case AlignSelf.flexEnd: case AlignSelf.end: childCrossPosition = renderStyle.flexWrap == FlexWrap.wrapReverse - ? alignFlexItem('start') - : alignFlexItem('end'); + ? _getChildCrossAxisOffset( + 'start', + child, + childCrossPosition, + runBaselineExtent, + runCrossAxisExtent, + runBetweenSpace, + crossAxisStartPadding, + crossAxisStartBorder, + ) + : _getChildCrossAxisOffset( + 'end', + child, + childCrossPosition, + runBaselineExtent, + runCrossAxisExtent, + runBetweenSpace, + crossAxisStartPadding, + crossAxisStartBorder, + ); break; case AlignSelf.center: - childCrossPosition = alignFlexItem('center'); + childCrossPosition = _getChildCrossAxisOffset( + 'center', + child, + childCrossPosition, + runBaselineExtent, + runCrossAxisExtent, + runBetweenSpace, + crossAxisStartPadding, + crossAxisStartBorder, + ); break; case AlignSelf.baseline: - childCrossPosition = alignFlexItem('baseline'); + childCrossPosition = _getChildCrossAxisOffset( + 'baseline', + child, + childCrossPosition, + runBaselineExtent, + runCrossAxisExtent, + runBetweenSpace, + crossAxisStartPadding, + crossAxisStartBorder, + ); break; default: break; @@ -2331,12 +2405,12 @@ class RenderFlexLayout extends RenderLayoutBox { if (totalFlexGrow == 0 && marginLeft.isAuto!) { if (marginRight.isAuto!) { childMainPosition += - (horizontalRemainingSpace / mainAxisMarginAutoChildren) / 2; + (horizontalRemainingSpace / mainAxisMarginAutoChildrenCount) / 2; betweenSpace = - (horizontalRemainingSpace / mainAxisMarginAutoChildren) / 2; + (horizontalRemainingSpace / mainAxisMarginAutoChildrenCount) / 2; } else { childMainPosition += - horizontalRemainingSpace / mainAxisMarginAutoChildren; + horizontalRemainingSpace / mainAxisMarginAutoChildrenCount; } } @@ -2353,12 +2427,12 @@ class RenderFlexLayout extends RenderLayoutBox { if (totalFlexGrow == 0 && marginTop.isAuto!) { if (marginBottom.isAuto!) { childMainPosition += - (verticalRemainingSpace / mainAxisMarginAutoChildren) / 2; + (verticalRemainingSpace / mainAxisMarginAutoChildrenCount) / 2; betweenSpace = - (verticalRemainingSpace / mainAxisMarginAutoChildren) / 2; + (verticalRemainingSpace / mainAxisMarginAutoChildrenCount) / 2; } else { childMainPosition += - verticalRemainingSpace / mainAxisMarginAutoChildren; + verticalRemainingSpace / mainAxisMarginAutoChildrenCount; } } @@ -2404,6 +2478,97 @@ class RenderFlexLayout extends RenderLayoutBox { } } + // Whether margin auto of child is set in the main axis. + bool isChildMainAxisMarginAutoExist(RenderBox child) { + if (child is RenderBoxModel) { + RenderStyle childRenderStyle = child.renderStyle; + CSSMargin marginLeft = childRenderStyle.marginLeft; + CSSMargin marginRight = childRenderStyle.marginRight; + CSSMargin marginTop = childRenderStyle.marginTop; + CSSMargin marginBottom = childRenderStyle.marginBottom; + if (CSSFlex.isHorizontalFlexDirection(renderStyle.flexDirection) && (marginLeft.isAuto! || marginRight.isAuto!) || + CSSFlex.isVerticalFlexDirection(renderStyle.flexDirection) && (marginTop.isAuto! || marginBottom.isAuto!) + ) { + return true; + } + } + return false; + } + + // Whether margin auto of child is set in the cross axis. + bool isChildCrossAxisMarginAutoExist(RenderBox child) { + if (child is RenderBoxModel) { + RenderStyle childRenderStyle = child.renderStyle; + CSSMargin marginLeft = childRenderStyle.marginLeft; + CSSMargin marginRight = childRenderStyle.marginRight; + CSSMargin marginTop = childRenderStyle.marginTop; + CSSMargin marginBottom = childRenderStyle.marginBottom; + if (CSSFlex.isHorizontalFlexDirection(renderStyle.flexDirection) && (marginTop.isAuto! || marginBottom.isAuto!) || + CSSFlex.isVerticalFlexDirection(renderStyle.flexDirection) && (marginLeft.isAuto! || marginRight.isAuto!) + ) { + return true; + } + } + return false; + } + + // Get flex item cross axis offset by align-items/align-self. + double? _getChildCrossAxisOffset( + String alignment, + RenderBox child, + double? childCrossPosition, + double runBaselineExtent, + double runCrossAxisExtent, + double runBetweenSpace, + double crossAxisStartPadding, + double crossAxisStartBorder, + ) { + // Leading between height of line box's content area and line height of line box + double lineBoxLeading = 0; + double? lineBoxHeight = _getLineHeight(this); + if (lineBoxHeight != null) { + lineBoxLeading = lineBoxHeight - runCrossAxisExtent; + } + + double flexLineHeight = _getFlexLineHeight( + runCrossAxisExtent, + runBetweenSpace, + beforeSetSize: false + ); + double childCrossAxisStartMargin = flowAwareChildCrossAxisMargin(child)!; + double crossStartAddedOffset = crossAxisStartPadding + + crossAxisStartBorder + + childCrossAxisStartMargin; + + // Align-items and align-self have no effect if auto margin of child exists in the cross axis. + if (isChildCrossAxisMarginAutoExist(child)) { + return crossStartAddedOffset; + } + + switch (alignment) { + case 'start': + return crossStartAddedOffset; + case 'end': + // Length returned by _getCrossAxisExtent includes margin, so end alignment should add start margin + return crossAxisStartPadding + + crossAxisStartBorder + + flexLineHeight - + _getCrossAxisExtent(child) + + childCrossAxisStartMargin; + case 'center': + return childCrossPosition = crossStartAddedOffset + + (flexLineHeight - _getCrossAxisExtent(child)) / 2.0; + case 'baseline': + // Distance from top to baseline of child + double childAscent = _getChildAscent(child); + return crossStartAddedOffset + + lineBoxLeading / 2 + + (runBaselineExtent - childAscent); + default: + return null; + } + } + /// Compute distance to baseline of flex layout @override double? computeDistanceToBaseline() { From cf077fd2234734bac1a213e45d872b16fa53d05f Mon Sep 17 00:00:00 2001 From: "zhanwen.zw" Date: Thu, 9 Sep 2021 15:14:37 +0800 Subject: [PATCH 2/4] test: add tests for margin auto in flexbox --- .../css-flexbox/auto-margins.ts.13f4e4eb1.png | Bin 0 -> 2383 bytes .../css-flexbox/auto-margins.ts.c5780e3b1.png | Bin 0 -> 2387 bytes .../css-flexbox/auto-margins.ts.c8f986311.png | Bin 0 -> 2387 bytes .../css-flexbox/auto-margins.ts.e70382641.png | Bin 0 -> 2383 bytes .../specs/css/css-flexbox/auto-margins.ts | 124 ++++++++++++++++++ 5 files changed, 124 insertions(+) create mode 100644 integration_tests/snapshots/css/css-flexbox/auto-margins.ts.13f4e4eb1.png create mode 100644 integration_tests/snapshots/css/css-flexbox/auto-margins.ts.c5780e3b1.png create mode 100644 integration_tests/snapshots/css/css-flexbox/auto-margins.ts.c8f986311.png create mode 100644 integration_tests/snapshots/css/css-flexbox/auto-margins.ts.e70382641.png diff --git a/integration_tests/snapshots/css/css-flexbox/auto-margins.ts.13f4e4eb1.png b/integration_tests/snapshots/css/css-flexbox/auto-margins.ts.13f4e4eb1.png new file mode 100644 index 0000000000000000000000000000000000000000..d55cd458bf32d4a10ab3d04432aca51afaaa3a9b GIT binary patch literal 2383 zcmeAS@N?(olHy`uVBq!ia0y~yV9a1(U~1rC1Bz^vdbAu!F%}28J29*~C-V}>VJUX< z4B-HR8jh3>1_q9wo-U3d6?5KRGvqtuAi&}%|7kz3eteM1oOtC`aR!0e*FM@jWB9>X z{5O1^+-`P;0{;b!i&&%-yhbUi2EnU2+22|0)?Rd?y0E1-ITA&_a5qIM9JuDkw@ zli|+C(ZoyD#EWFuwKHel2{P1t9t~lnKp8DBN2`p{T62&U3HL0f^4C7R$yf$#6ftVJUX< z4B-HR8jh3>1_qA5o-U3d6?5KRGvqtuAi&}%|LFcP{rDi|6YEu1#Tf)IT92yUahfth>wIz{M}6;I)8p5z8nw z8U#Zr6=a<~^G1&Gfca?p9ZIn_TGWh|wj-^kdByuwk-xg@^w}a{!-&Dt)z4*}Q$iB} DY?ELv literal 0 HcmV?d00001 diff --git a/integration_tests/snapshots/css/css-flexbox/auto-margins.ts.c8f986311.png b/integration_tests/snapshots/css/css-flexbox/auto-margins.ts.c8f986311.png new file mode 100644 index 0000000000000000000000000000000000000000..070ec2d9a49d467d23d6bfd147be705bdf947663 GIT binary patch literal 2387 zcmeAS@N?(olHy`uVBq!ia0y~yV9a1(U~1rC1Bz^vdbAu!F%}28J29*~C-V}>VJUX< z4B-HR8jh3>1_qA5o-U3d6?5KRGvqtuAi&}%|LFcP{rDi|6YEu1#Tf)IT92yUahfth>wIz{M}6;I)8p5z8nw z8U#Zr6=a<~^G1&Gfca?p9ZIn_TGWh|wj-^kdByuwk-xg@^w}a{!-&Dt)z4*}Q$iB} DY?ELv literal 0 HcmV?d00001 diff --git a/integration_tests/snapshots/css/css-flexbox/auto-margins.ts.e70382641.png b/integration_tests/snapshots/css/css-flexbox/auto-margins.ts.e70382641.png new file mode 100644 index 0000000000000000000000000000000000000000..d55cd458bf32d4a10ab3d04432aca51afaaa3a9b GIT binary patch literal 2383 zcmeAS@N?(olHy`uVBq!ia0y~yV9a1(U~1rC1Bz^vdbAu!F%}28J29*~C-V}>VJUX< z4B-HR8jh3>1_q9wo-U3d6?5KRGvqtuAi&}%|7kz3eteM1oOtC`aR!0e*FM@jWB9>X z{5O1^+-`P;0{;b!i&&%-yhbUi2EnU2+22|0)?Rd?y0E1-ITA&_a5qIM9JuDkw@ zli|+C(ZoyD#EWFuwKHel2{P1t9t~lnKp8DBN2`p{T62&U3HL0f^4C7R$yf$#6ft { }; await snapshot(); }); + + it('align-items should not work when auto margin exists in flex column direction', async () => { + let div; + div = createElement( + 'div', + { + style: { + display: 'flex', + flexDirection: 'column', + alignItems: 'flex-end', + width: '300px', + height: '300px', + backgroundColor: 'green' + }, + }, + [ + createElement('div', { + style: { + width: '100px', + height: '100px', + margin: '0 auto', + backgroundColor: 'yellow', + } + }), + ] + ); + + BODY.appendChild(div); + + await snapshot(); + }); + + it('align-items should not work when auto margin exists in flex row direction', async () => { + let div; + div = createElement( + 'div', + { + style: { + display: 'flex', + flexDirection: 'row', + alignItems: 'flex-end', + width: '300px', + height: '300px', + backgroundColor: 'green' + }, + }, + [ + createElement('div', { + style: { + width: '100px', + height: '100px', + margin: 'auto 0', + backgroundColor: 'yellow', + } + }), + ] + ); + + BODY.appendChild(div); + + await snapshot(); + }); + + it('justify-content should not work when auto margin exists in flex column direction', async () => { + let div; + div = createElement( + 'div', + { + style: { + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-end', + width: '300px', + height: '300px', + backgroundColor: 'green' + }, + }, + [ + createElement('div', { + style: { + width: '100px', + height: '100px', + margin: 'auto 0', + backgroundColor: 'yellow', + } + }), + ] + ); + + BODY.appendChild(div); + + await snapshot(); + }); + + it('justify-content should not work when auto margin exists in flex row direction', async () => { + let div; + div = createElement( + 'div', + { + style: { + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-end', + width: '300px', + height: '300px', + backgroundColor: 'green' + }, + }, + [ + createElement('div', { + style: { + width: '100px', + height: '100px', + margin: '0 auto', + backgroundColor: 'yellow', + } + }), + ] + ); + + BODY.appendChild(div); + + await snapshot(); + }); }); From a14f549cde55adf40fd1dc6ea75351768de5ec0b Mon Sep 17 00:00:00 2001 From: "zhanwen.zw" Date: Thu, 9 Sep 2021 20:43:11 +0800 Subject: [PATCH 3/4] chore: code opt --- kraken/lib/src/rendering/flex.dart | 175 ++++------------------------- 1 file changed, 24 insertions(+), 151 deletions(-) diff --git a/kraken/lib/src/rendering/flex.dart b/kraken/lib/src/rendering/flex.dart index 90a57122c2..0083a02cc2 100644 --- a/kraken/lib/src/rendering/flex.dart +++ b/kraken/lib/src/rendering/flex.dart @@ -2197,190 +2197,63 @@ class RenderFlexLayout extends RenderLayoutBox { double? childCrossPosition; AlignSelf alignSelf = _getAlignSelf(child); + String? alignment; if (alignSelf == AlignSelf.auto) { switch (renderStyle.alignItems) { case AlignItems.flexStart: case AlignItems.start: case AlignItems.stretch: - childCrossPosition = renderStyle.flexWrap == FlexWrap.wrapReverse - ? _getChildCrossAxisOffset( - 'end', - child, - childCrossPosition, - runBaselineExtent, - runCrossAxisExtent, - runBetweenSpace, - crossAxisStartPadding, - crossAxisStartBorder, - ) - : _getChildCrossAxisOffset( - 'start', - child, - childCrossPosition, - runBaselineExtent, - runCrossAxisExtent, - runBetweenSpace, - crossAxisStartPadding, - crossAxisStartBorder, - ); + alignment = renderStyle.flexWrap == FlexWrap.wrapReverse ? 'end' : 'start'; break; case AlignItems.flexEnd: case AlignItems.end: - childCrossPosition = renderStyle.flexWrap == FlexWrap.wrapReverse - ? _getChildCrossAxisOffset( - 'start', - child, - childCrossPosition, - runBaselineExtent, - runCrossAxisExtent, - runBetweenSpace, - crossAxisStartPadding, - crossAxisStartBorder, - ) - : _getChildCrossAxisOffset( - 'end', - child, - childCrossPosition, - runBaselineExtent, - runCrossAxisExtent, - runBetweenSpace, - crossAxisStartPadding, - crossAxisStartBorder, - ); + alignment = renderStyle.flexWrap == FlexWrap.wrapReverse ? 'start' : 'end'; break; case AlignItems.center: - childCrossPosition = _getChildCrossAxisOffset( - 'center', - child, - childCrossPosition, - runBaselineExtent, - runCrossAxisExtent, - runBetweenSpace, - crossAxisStartPadding, - crossAxisStartBorder, - ); + alignment = 'center'; break; case AlignItems.baseline: - // FIXME: baseline aligne in wrap-reverse flexWrap may display different from browser in some case - if (CSSFlex.isHorizontalFlexDirection( - renderStyle.flexDirection)) { - childCrossPosition = _getChildCrossAxisOffset( - 'baseline', - child, - childCrossPosition, - runBaselineExtent, - runCrossAxisExtent, - runBetweenSpace, - crossAxisStartPadding, - crossAxisStartBorder, - ); + // FIXME: baseline alignment in wrap-reverse flexWrap may display different from browser in some case + if (CSSFlex.isHorizontalFlexDirection(renderStyle.flexDirection)) { + alignment = 'baseline'; } else if (renderStyle.flexWrap == FlexWrap.wrapReverse) { - childCrossPosition = _getChildCrossAxisOffset( - 'end', - child, - childCrossPosition, - runBaselineExtent, - runCrossAxisExtent, - runBetweenSpace, - crossAxisStartPadding, - crossAxisStartBorder, - ); + alignment = 'end'; } else { - childCrossPosition = _getChildCrossAxisOffset( - 'start', - child, - childCrossPosition, - runBaselineExtent, - runCrossAxisExtent, - runBetweenSpace, - crossAxisStartPadding, - crossAxisStartBorder, - ); + alignment = 'start'; } break; - default: - break; } } else { switch (alignSelf) { case AlignSelf.flexStart: case AlignSelf.start: case AlignSelf.stretch: - childCrossPosition = renderStyle.flexWrap == FlexWrap.wrapReverse - ? _getChildCrossAxisOffset( - 'end', - child, - childCrossPosition, - runBaselineExtent, - runCrossAxisExtent, - runBetweenSpace, - crossAxisStartPadding, - crossAxisStartBorder, - ) - : _getChildCrossAxisOffset( - 'start', - child, - childCrossPosition, - runBaselineExtent, - runCrossAxisExtent, - runBetweenSpace, - crossAxisStartPadding, - crossAxisStartBorder, - ); + alignment = renderStyle.flexWrap == FlexWrap.wrapReverse ? 'end' : 'start'; break; case AlignSelf.flexEnd: case AlignSelf.end: - childCrossPosition = renderStyle.flexWrap == FlexWrap.wrapReverse - ? _getChildCrossAxisOffset( - 'start', - child, - childCrossPosition, - runBaselineExtent, - runCrossAxisExtent, - runBetweenSpace, - crossAxisStartPadding, - crossAxisStartBorder, - ) - : _getChildCrossAxisOffset( - 'end', - child, - childCrossPosition, - runBaselineExtent, - runCrossAxisExtent, - runBetweenSpace, - crossAxisStartPadding, - crossAxisStartBorder, - ); + alignment = renderStyle.flexWrap == FlexWrap.wrapReverse ? 'start' : 'end'; break; case AlignSelf.center: - childCrossPosition = _getChildCrossAxisOffset( - 'center', - child, - childCrossPosition, - runBaselineExtent, - runCrossAxisExtent, - runBetweenSpace, - crossAxisStartPadding, - crossAxisStartBorder, - ); + alignment = 'center'; break; case AlignSelf.baseline: - childCrossPosition = _getChildCrossAxisOffset( - 'baseline', - child, - childCrossPosition, - runBaselineExtent, - runCrossAxisExtent, - runBetweenSpace, - crossAxisStartPadding, - crossAxisStartBorder, - ); - break; - default: + alignment = 'baseline'; break; } } + childCrossPosition = _getChildCrossAxisOffset( + alignment!, + child, + childCrossPosition, + runBaselineExtent, + runCrossAxisExtent, + runBetweenSpace, + crossAxisStartPadding, + crossAxisStartBorder, + ); + // Calculate margin auto length according to CSS spec rules // https://www.w3.org/TR/css-flexbox-1/#auto-margins // margin auto takes up available space in the remaining space From 77a80e2dff153938d9d6a95ffcdff4848d70dfa1 Mon Sep 17 00:00:00 2001 From: "zhanwen.zw" Date: Thu, 9 Sep 2021 20:46:38 +0800 Subject: [PATCH 4/4] chore: code opt --- kraken/lib/src/rendering/flex.dart | 86 +++++++++++++++--------------- 1 file changed, 43 insertions(+), 43 deletions(-) diff --git a/kraken/lib/src/rendering/flex.dart b/kraken/lib/src/rendering/flex.dart index 0083a02cc2..55209f47e2 100644 --- a/kraken/lib/src/rendering/flex.dart +++ b/kraken/lib/src/rendering/flex.dart @@ -2198,53 +2198,53 @@ class RenderFlexLayout extends RenderLayoutBox { AlignSelf alignSelf = _getAlignSelf(child); String? alignment; - if (alignSelf == AlignSelf.auto) { - switch (renderStyle.alignItems) { - case AlignItems.flexStart: - case AlignItems.start: - case AlignItems.stretch: - alignment = renderStyle.flexWrap == FlexWrap.wrapReverse ? 'end' : 'start'; - break; - case AlignItems.flexEnd: - case AlignItems.end: - alignment = renderStyle.flexWrap == FlexWrap.wrapReverse ? 'start' : 'end'; - break; - case AlignItems.center: - alignment = 'center'; - break; - case AlignItems.baseline: + + switch (alignSelf) { + case AlignSelf.flexStart: + case AlignSelf.start: + case AlignSelf.stretch: + alignment = renderStyle.flexWrap == FlexWrap.wrapReverse ? 'end' : 'start'; + break; + case AlignSelf.flexEnd: + case AlignSelf.end: + alignment = renderStyle.flexWrap == FlexWrap.wrapReverse ? 'start' : 'end'; + break; + case AlignSelf.center: + alignment = 'center'; + break; + case AlignSelf.baseline: + alignment = 'baseline'; + break; + case AlignSelf.auto: + switch (renderStyle.alignItems) { + case AlignItems.flexStart: + case AlignItems.start: + case AlignItems.stretch: + alignment = renderStyle.flexWrap == FlexWrap.wrapReverse ? 'end' : 'start'; + break; + case AlignItems.flexEnd: + case AlignItems.end: + alignment = renderStyle.flexWrap == FlexWrap.wrapReverse ? 'start' : 'end'; + break; + case AlignItems.center: + alignment = 'center'; + break; + case AlignItems.baseline: // FIXME: baseline alignment in wrap-reverse flexWrap may display different from browser in some case - if (CSSFlex.isHorizontalFlexDirection(renderStyle.flexDirection)) { - alignment = 'baseline'; - } else if (renderStyle.flexWrap == FlexWrap.wrapReverse) { - alignment = 'end'; - } else { - alignment = 'start'; - } - break; - } - } else { - switch (alignSelf) { - case AlignSelf.flexStart: - case AlignSelf.start: - case AlignSelf.stretch: - alignment = renderStyle.flexWrap == FlexWrap.wrapReverse ? 'end' : 'start'; - break; - case AlignSelf.flexEnd: - case AlignSelf.end: - alignment = renderStyle.flexWrap == FlexWrap.wrapReverse ? 'start' : 'end'; - break; - case AlignSelf.center: - alignment = 'center'; - break; - case AlignSelf.baseline: - alignment = 'baseline'; - break; - } + if (CSSFlex.isHorizontalFlexDirection(renderStyle.flexDirection)) { + alignment = 'baseline'; + } else if (renderStyle.flexWrap == FlexWrap.wrapReverse) { + alignment = 'end'; + } else { + alignment = 'start'; + } + break; + } + break; } childCrossPosition = _getChildCrossAxisOffset( - alignment!, + alignment, child, childCrossPosition, runBaselineExtent,