Skip to content

Commit 4e3ffd2

Browse files
aleclarsonaleclarson
authored
fix(ios): measure padded LiquidGlass content inside its padding (#11562)
[skip ci]
1 parent 3224f1b commit 4e3ffd2

3 files changed

Lines changed: 45 additions & 76 deletions

File tree

‎apps/automated/src/ui/layouts/flexbox-layout-tests.ts‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1834,3 +1834,48 @@ export const testLiquidGlassViews_do_not_crash_when_updating_iosGlassEffect = is
18341834
TKUnit.assertTrue(root.isLoaded, 'Liquid glass view tree should remain loaded after glass effect updates.');
18351835
})
18361836
: undefined;
1837+
1838+
let getGlassViews = (template: string) => {
1839+
let root = Builder.parse(template);
1840+
1841+
return {
1842+
root,
1843+
parent: root.getViewById('parent') as View,
1844+
glass: root.getViewById('glass') as View,
1845+
child: root.getViewById('child') as View,
1846+
};
1847+
};
1848+
1849+
// Parents subtract only a child's margins from its measure spec, so glass views must deduct their own padding.
1850+
1851+
let activity_liquidglass_padding = () =>
1852+
getGlassViews(
1853+
`<FlexboxLayout iosOverflowSafeArea="false" id="parent" width="300" height="300" flexDirection="${FlexDirection.ROW}" backgroundColor="gray">
1854+
<LiquidGlass id="glass" width="300" height="100" paddingLeft="20" paddingRight="20">
1855+
<Label id="child" text="content" horizontalAlignment="stretch" />
1856+
</LiquidGlass>
1857+
</FlexboxLayout>`,
1858+
);
1859+
1860+
export const testLiquidGlassFlexboxLayout_padding_measures_content_box = isIOS
1861+
? test(activity_liquidglass_padding, noop, ({ glass, child }) => {
1862+
closeEnough(width(child), dipToDp(260), `Expected ${child} width to equal glass width minus 2x20 padding`);
1863+
isLeftWith(glass, child, dipToDp(20), `Expected ${child} to start 20dip inside ${glass}`);
1864+
})
1865+
: undefined;
1866+
1867+
let activity_liquidglasscontainer_autowidth = () =>
1868+
getGlassViews(
1869+
`<FlexboxLayout iosOverflowSafeArea="false" id="parent" flexDirection="${FlexDirection.ROW}" alignItems="${AlignItems.FLEX_START}" backgroundColor="gray">
1870+
<LiquidGlassContainer id="glass" paddingLeft="20" paddingRight="20" paddingTop="10" paddingBottom="10">
1871+
<Label id="child" width="100" height="40" />
1872+
</LiquidGlassContainer>
1873+
</FlexboxLayout>`,
1874+
);
1875+
1876+
export const testLiquidGlassContainerFlexboxLayout_padding_wraps_content = isIOS
1877+
? test(activity_liquidglasscontainer_autowidth, noop, ({ glass }) => {
1878+
closeEnough(width(glass), dipToDp(140), `Expected ${glass} width to equal child width plus 2x20 padding`);
1879+
closeEnough(height(glass), dipToDp(60), `Expected ${glass} height to equal child height plus 2x10 padding`);
1880+
})
1881+
: undefined;

‎packages/core/ui/layouts/liquid-glass-container/index.ios.ts‎

Lines changed: 0 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -55,44 +55,6 @@ export class LiquidGlassContainer extends LiquidGlassContainerCommon {
5555
return false;
5656
}
5757

58-
// When LiquidGlassContainer is a child of FlexboxLayout (or any layout that passes
59-
// a measure spec already reduced by the child's padding), AbsoluteLayout.onMeasure
60-
// would subtract our padding a second time. To prevent this double-deduction we
61-
// temporarily zero the effective padding/border values before delegating to the
62-
// AbsoluteLayout measurement, then restore them immediately after.
63-
public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
64-
const pl = this.effectivePaddingLeft;
65-
const pr = this.effectivePaddingRight;
66-
const pt = this.effectivePaddingTop;
67-
const pb = this.effectivePaddingBottom;
68-
const bl = this.effectiveBorderLeftWidth;
69-
const br = this.effectiveBorderRightWidth;
70-
const bt = this.effectiveBorderTopWidth;
71-
const bb = this.effectiveBorderBottomWidth;
72-
73-
this.effectivePaddingLeft = 0;
74-
this.effectivePaddingRight = 0;
75-
this.effectivePaddingTop = 0;
76-
this.effectivePaddingBottom = 0;
77-
this.effectiveBorderLeftWidth = 0;
78-
this.effectiveBorderRightWidth = 0;
79-
this.effectiveBorderTopWidth = 0;
80-
this.effectiveBorderBottomWidth = 0;
81-
82-
try {
83-
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
84-
} finally {
85-
this.effectivePaddingLeft = pl;
86-
this.effectivePaddingRight = pr;
87-
this.effectivePaddingTop = pt;
88-
this.effectivePaddingBottom = pb;
89-
this.effectiveBorderLeftWidth = bl;
90-
this.effectiveBorderRightWidth = br;
91-
this.effectiveBorderTopWidth = bt;
92-
this.effectiveBorderBottomWidth = bb;
93-
}
94-
}
95-
9658
// When children animate with translate (layer transform), UIVisualEffectView-based
9759
// container effects may recompute based on the underlying frames (not transforms),
9860
// which can cause jumps. Normalize any residual translation into the

‎packages/core/ui/layouts/liquid-glass/index.ios.ts‎

Lines changed: 0 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -48,44 +48,6 @@ export class LiquidGlass extends LiquidGlassCommon {
4848
return false;
4949
}
5050

51-
public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
52-
// When LiquidGlass is a child of FlexboxLayout (or any layout that passes a child
53-
// measure spec already reduced by the child's padding), GridLayout.onMeasure would
54-
// subtract our padding a second time. To prevent this double-deduction we temporarily
55-
// zero the effective padding/border values before delegating to the GridLayout
56-
// measurement, then restore them immediately after.
57-
const pl = this.effectivePaddingLeft;
58-
const pr = this.effectivePaddingRight;
59-
const pt = this.effectivePaddingTop;
60-
const pb = this.effectivePaddingBottom;
61-
const bl = this.effectiveBorderLeftWidth;
62-
const br = this.effectiveBorderRightWidth;
63-
const bt = this.effectiveBorderTopWidth;
64-
const bb = this.effectiveBorderBottomWidth;
65-
66-
this.effectivePaddingLeft = 0;
67-
this.effectivePaddingRight = 0;
68-
this.effectivePaddingTop = 0;
69-
this.effectivePaddingBottom = 0;
70-
this.effectiveBorderLeftWidth = 0;
71-
this.effectiveBorderRightWidth = 0;
72-
this.effectiveBorderTopWidth = 0;
73-
this.effectiveBorderBottomWidth = 0;
74-
75-
try {
76-
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
77-
} finally {
78-
this.effectivePaddingLeft = pl;
79-
this.effectivePaddingRight = pr;
80-
this.effectivePaddingTop = pt;
81-
this.effectivePaddingBottom = pb;
82-
this.effectiveBorderLeftWidth = bl;
83-
this.effectiveBorderRightWidth = br;
84-
this.effectiveBorderTopWidth = bt;
85-
this.effectiveBorderBottomWidth = bb;
86-
}
87-
}
88-
8951
public onLayout(left: number, top: number, right: number, bottom: number): void {
9052
// GridLayout.onLayout computes column/row offsets relative to (left, top), then
9153
// adds its own padding on top. Since the FlexboxLayout (or parent) already placed

0 commit comments

Comments
 (0)