From fcd82fd20d58d7f3d16a188e6381af7b1de8c18d Mon Sep 17 00:00:00 2001 From: "zhanwen.zw" Date: Thu, 23 Sep 2021 19:52:12 +0800 Subject: [PATCH 1/2] fix: add margin of child to main axis auto size of parent --- kraken/lib/src/rendering/flex.dart | 10 ++++++++++ kraken/lib/src/rendering/flow.dart | 6 ++++++ 2 files changed, 16 insertions(+) diff --git a/kraken/lib/src/rendering/flex.dart b/kraken/lib/src/rendering/flex.dart index eb0fa8f3c1..9cd56726f3 100644 --- a/kraken/lib/src/rendering/flex.dart +++ b/kraken/lib/src/rendering/flex.dart @@ -1818,6 +1818,16 @@ class RenderFlexLayout extends RenderLayoutBox { ? child.autoMinWidth : child.autoMinHeight; } + // Should add main axis margin of child to the main axis auto size of parent. + if (child is RenderBoxModel) { + double childMarginTop = child.renderStyle.marginTop.length!; + double childMarginBottom = child.renderStyle.marginBottom.length!; + double childMarginLeft = child.renderStyle.marginLeft.length!; + double childMarginRight = child.renderStyle.marginRight.length!; + runChildMainSize += isHorizontalFlexDirection ? + childMarginLeft + childMarginRight : + childMarginTop + childMarginBottom; + } runMainExtent += runChildMainSize; } diff --git a/kraken/lib/src/rendering/flow.dart b/kraken/lib/src/rendering/flow.dart index 2c65b5e400..3f1c5bb9f3 100644 --- a/kraken/lib/src/rendering/flow.dart +++ b/kraken/lib/src/rendering/flow.dart @@ -1174,6 +1174,12 @@ class RenderFlowLayout extends RenderLayoutBox { if (runChild is RenderTextBox) { runChildMainSize = runChild.autoMinWidth; } + // Should add horizontal margin of child to the main axis auto size of parent. + if (runChild is RenderBoxModel) { + double childMarginLeft = runChild.renderStyle.marginLeft.length!; + double childMarginRight = runChild.renderStyle.marginRight.length!; + runChildMainSize += childMarginLeft + childMarginRight; + } runMainExtent += runChildMainSize; } From 395fcd99aa50dcddda1ec5c503a12545f75ab705 Mon Sep 17 00:00:00 2001 From: "zhanwen.zw" Date: Thu, 23 Sep 2021 20:26:05 +0800 Subject: [PATCH 2/2] test: add tests for main axis auto size fix --- .../css-flexbox/flex_shrink.ts.0fc791b11.png | Bin 0 -> 2416 bytes .../css-flexbox/flex_shrink.ts.1089d1de1.png | Bin 0 -> 2514 bytes .../specs/css/css-flexbox/flex_shrink.ts | 188 ++++++++++++++++++ .../specs/css/css-position/abspos.ts | 2 +- 4 files changed, 189 insertions(+), 1 deletion(-) create mode 100644 integration_tests/snapshots/css/css-flexbox/flex_shrink.ts.0fc791b11.png create mode 100644 integration_tests/snapshots/css/css-flexbox/flex_shrink.ts.1089d1de1.png diff --git a/integration_tests/snapshots/css/css-flexbox/flex_shrink.ts.0fc791b11.png b/integration_tests/snapshots/css/css-flexbox/flex_shrink.ts.0fc791b11.png new file mode 100644 index 0000000000000000000000000000000000000000..cd0a53d862e5d7a51787e6732230599809f91c74 GIT binary patch literal 2416 zcmeAS@N?(olHy`uVBq!ia0y~yV9a1(U~1rC1Bz^vdbAu!F%}28J29*~C-V}>VJUX< z4B-HR8jh3>1_n+kPZ!6KiaBquIdUCx5MXee`p5ds>Fbl#T?K?M9b3iDQ!P>T-0Jxp zafYHicYB70>nu_VUJDo(kxNZm%id?WP41-lwNl$(ocTAWi~YXzsEMuP)}N-j75|T< zf6t!YR%oktBn>jlovCj`DipB4V!#)MYbkcp)E1ie+{tJ#Ng@b=d#Wzp$P!$UPEO7 literal 0 HcmV?d00001 diff --git a/integration_tests/snapshots/css/css-flexbox/flex_shrink.ts.1089d1de1.png b/integration_tests/snapshots/css/css-flexbox/flex_shrink.ts.1089d1de1.png new file mode 100644 index 0000000000000000000000000000000000000000..a14fa567a545d4734a5d41aad7a32d9464be3eab GIT binary patch literal 2514 zcmeAS@N?(olHy`uVBq!ia0y~yV9a1(U~1rC1Bz^vdbAu!F%}28J29*~C-V}>VJUX< z4B-HR8jh3>1_sU=PZ!6KiaBquZ{(FW6k&Bdy<;C|n4f#s6OTuY+8N6l_}#jXACJoZ z%c$`D{Y!R+5A{sE0;(4n0?DPWziTc&cUS%A0g1<7gd5BwfkxdH|1$Y$*|hmQHTK+6 z3SJ8s7qN^|ln249U9UgP`MmBjgZ;rKwvMVbTd%!zXZUam$QH_I&}bZJYFC;3oZ@$O zC)tllET7M?=OoZwxArZVud{vgpOgo`LFt0rBsQuKE$FVtwm+X!K9}tWr!8Rq z6gpzpJ1d*#dtRFy@ZSI|W#zKhmi`iC*t2P{l(_5evOk}*+y7Ie;jx$M4EZ2;ZPS0D ze)_GBz2uL&!IEAFMW&(95m!pDKeT)vyPUDEiIrF2Yee?i%l!-wrUKcN)a_I&cuU{f zSvh<^I%D@6xPxI7$^U+6 { await snapshot(0.1); }); + it('should work with child has margin when flex direction is row', async () => { + let div = createElement( + 'div', + { + style: { + display: 'flex', + overflow: 'visible', + width: '100vw', + }, + }, [ + createElement( + 'div', + { + style: { + display: 'flex', + flexDirection: 'row', + boxSizing: 'border-box', + overflow: 'visible' + }, + }, [ + createElement( + 'div', + { + style: { + width: '100px', + border: '2px gray solid', + height: '100px', + margin: '20px', + boxSizing: 'border-box', + }, + }, [ + + ]), + createElement( + 'div', + { + style: { + width: '100px', + border: '2px gray solid', + height: '100px', + margin: '20px', + boxSizing: 'border-box', + }, + }, [ + + ]), + createElement( + 'div', + { + style: { + width: '100px', + border: '2px gray solid', + height: '100px', + margin: '20px', + boxSizing: 'border-box', + }, + }, [ + + ]), + createElement( + 'div', + { + style: { + width: '100px', + border: '2px gray solid', + height: '100px', + margin: '20px', + boxSizing: 'border-box', + }, + }, [ + + ]), + createElement( + 'div', + { + style: { + width: '100px', + border: '2px gray solid', + height: '100px', + margin: '20px', + boxSizing: 'border-box', + }, + }, [ + + ]), + ]) + ]); + + BODY.appendChild(div); + + await snapshot(); + }); + + it('should work with child has margin when flex direction is column', async () => { + let div = createElement( + 'div', + { + style: { + display: 'flex', + flexDirection: 'column', + overflow: 'visible', + height: '300px', + }, + }, [ + createElement( + 'div', + { + style: { + display: 'flex', + flexDirection: 'column', + boxSizing: 'border-box', + overflow: 'visible' + }, + }, [ + createElement( + 'div', + { + style: { + width: '100px', + border: '2px gray solid', + height: '100px', + margin: '20px', + boxSizing: 'border-box', + }, + }, [ + + ]), + createElement( + 'div', + { + style: { + width: '100px', + border: '2px gray solid', + height: '100px', + margin: '20px', + boxSizing: 'border-box', + }, + }, [ + + ]), + createElement( + 'div', + { + style: { + width: '100px', + border: '2px gray solid', + height: '100px', + margin: '20px', + boxSizing: 'border-box', + }, + }, [ + + ]), + createElement( + 'div', + { + style: { + width: '100px', + border: '2px gray solid', + height: '100px', + margin: '20px', + boxSizing: 'border-box', + }, + }, [ + + ]), + createElement( + 'div', + { + style: { + width: '100px', + border: '2px gray solid', + height: '100px', + margin: '20px', + boxSizing: 'border-box', + }, + }, [ + + ]), + ]) + ]); + + BODY.appendChild(div); + + await snapshot(); + }); + + }); diff --git a/integration_tests/specs/css/css-position/abspos.ts b/integration_tests/specs/css/css-position/abspos.ts index f75b7f40d6..9907d84552 100644 --- a/integration_tests/specs/css/css-position/abspos.ts +++ b/integration_tests/specs/css/css-position/abspos.ts @@ -1170,7 +1170,7 @@ describe('abspos', () => { ); BODY.appendChild(p); - await snapshot(); + await snapshot(0.1); }); it('026', async () => { let p;