Skip to content
This repository was archived by the owner on Jan 6, 2025. It is now read-only.

Commit 7ab5d34

Browse files
CaerusKaruCaerusKaru
committed
fix(fxFlex): apply correct flex-basis stylings
* Fix for when flex-basis is unitless and 0 * Fix for when no width/height is applied and flex-basis should be set * Fix for IE flex-basis with calc values * Fix for SSR properties set to 0 Fixes #277 Fixes #280 Fixes #323 Fixes #528 Fixes #534
1 parent de7ab76 commit 7ab5d34

File tree

5 files changed

+261
-78
lines changed

5 files changed

+261
-78
lines changed

‎src/lib/core/style-utils/style-utils.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export class StyleUtils {
7070
* Find the DOM element's inline style value (if any)
7171
*/
7272
lookupInlineStyle(element: HTMLElement, styleName: string): string {
73-
return element.style[styleName] || element.style.getPropertyValue(styleName);
73+
return element.style[styleName] || element.style.getPropertyValue(styleName) || '';
7474
}
7575

7676
/**
@@ -88,7 +88,7 @@ export class StyleUtils {
8888
}
8989
} else {
9090
if (this._serverModuleLoaded) {
91-
value = `${this._serverStylesheet.getStyleForElement(element, styleName)}`;
91+
value = this._serverStylesheet.getStyleForElement(element, styleName);
9292
}
9393
}
9494
}

‎src/lib/core/stylesheet-map.ts

+9-2
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,15 @@ export class StylesheetMap {
4040
/**
4141
* Retrieve a given style for an HTML element
4242
*/
43-
getStyleForElement(el: HTMLElement, styleName: string): string|number {
43+
getStyleForElement(el: HTMLElement, styleName: string): string {
4444
const styles = this.stylesheet.get(el);
45-
return (styles && styles.get(styleName)) || '';
45+
let value = '';
46+
if (styles) {
47+
const style = styles.get(styleName);
48+
if (typeof style === 'number' || typeof style === 'string') {
49+
value = style + '';
50+
}
51+
}
52+
return value;
4653
}
4754
}

‎src/lib/flex/flex-offset/flex-offset.spec.ts

+12-4
Original file line numberDiff line numberDiff line change
@@ -72,13 +72,21 @@ describe('flex-offset directive', () => {
7272
let dom = fixture.debugElement.children[0];
7373
expectEl(dom).toHaveStyle({'margin-left': '32px'}, styler);
7474
if (platform.BLINK) {
75-
expectEl(dom).toHaveStyle({'flex': '1 1 1e-09px'}, styler);
75+
expectEl(dom).toHaveStyle({
76+
'flex': '1 1 1e-09px'
77+
}, styler);
7678
} else if (platform.FIREFOX) {
77-
expectEl(dom).toHaveStyle({'flex': '1 1 1e-9px'}, styler);
79+
expectEl(dom).toHaveStyle({
80+
'flex': '1 1 1e-9px'
81+
}, styler);
7882
} else if (platform.EDGE || platform.TRIDENT) {
79-
expectEl(dom).toHaveStyle({'flex': '1 1 0px'}, styler);
83+
expectEl(dom).toHaveStyle({
84+
'flex': '1 1 0px'
85+
}, styler);
8086
} else {
81-
expectEl(dom).toHaveStyle({'flex': '1 1 0.000000001px'}, styler);
87+
expectEl(dom).toHaveStyle({
88+
'flex': '1 1 0.000000001px'
89+
}, styler);
8290
}
8391
});
8492

‎src/lib/flex/flex/flex.spec.ts

+163-39
Original file line numberDiff line numberDiff line change
@@ -76,13 +76,21 @@ describe('flex directive', () => {
7676
expectEl(dom).toHaveStyle({'box-sizing': 'border-box'}, styler);
7777

7878
if (platform.BLINK) {
79-
expectEl(dom).toHaveStyle({'flex': '1 1 1e-09px'}, styler);
79+
expectEl(dom).toHaveStyle({
80+
'flex': '1 1 1e-09px'
81+
}, styler);
8082
} else if (platform.FIREFOX) {
81-
expectEl(dom).toHaveStyle({'flex': '1 1 1e-9px'}, styler);
83+
expectEl(dom).toHaveStyle({
84+
'flex': '1 1 1e-9px'
85+
}, styler);
8286
} else if (platform.EDGE || platform.TRIDENT) {
83-
expectEl(dom).toHaveStyle({'flex': '1 1 0px'}, styler);
87+
expectEl(dom).toHaveStyle({
88+
'flex': '1 1 0px'
89+
}, styler);
8490
} else {
85-
expectEl(dom).toHaveStyle({'flex': '1 1 0.000000001px'}, styler);
91+
expectEl(dom).toHaveStyle({
92+
'flex': '1 1 0.000000001px'
93+
}, styler);
8694
}
8795
});
8896

@@ -95,13 +103,21 @@ describe('flex directive', () => {
95103
expectEl(dom).toHaveStyle({'box-sizing': 'border-box'}, styler);
96104

97105
if (platform.BLINK) {
98-
expectEl(dom).toHaveStyle({'flex': '10 1 1e-09px'}, styler);
106+
expectEl(dom).toHaveStyle({
107+
'flex': '10 1 1e-09px'
108+
}, styler);
99109
} else if (platform.FIREFOX) {
100-
expectEl(dom).toHaveStyle({'flex': '10 1 1e-9px'}, styler);
110+
expectEl(dom).toHaveStyle({
111+
'flex': '10 1 1e-9px'
112+
}, styler);
101113
} else if (platform.EDGE || platform.TRIDENT) {
102-
expectEl(dom).toHaveStyle({'flex': '10 1 0px'}, styler);
114+
expectEl(dom).toHaveStyle({
115+
'flex': '10 1 0px'
116+
}, styler);
103117
} else {
104-
expectEl(dom).toHaveStyle({'flex': '10 1 0.000000001px'}, styler);
118+
expectEl(dom).toHaveStyle({
119+
'flex': '10 1 0.000000001px'
120+
}, styler);
105121
}
106122
});
107123

@@ -114,13 +130,21 @@ describe('flex directive', () => {
114130
expectEl(dom).toHaveStyle({'box-sizing': 'border-box'}, styler);
115131

116132
if (platform.BLINK) {
117-
expectEl(dom).toHaveStyle({'flex': '1 10 1e-09px'}, styler);
133+
expectEl(dom).toHaveStyle({
134+
'flex': '1 10 1e-09px'
135+
}, styler);
118136
} else if (platform.FIREFOX) {
119-
expectEl(dom).toHaveStyle({'flex': '1 10 1e-9px'}, styler);
137+
expectEl(dom).toHaveStyle({
138+
'flex': '1 10 1e-9px'
139+
}, styler);
120140
} else if (platform.EDGE || platform.TRIDENT) {
121-
expectEl(dom).toHaveStyle({'flex': '1 10 0px'}, styler);
141+
expectEl(dom).toHaveStyle({
142+
'flex': '1 10 0px'
143+
}, styler);
122144
} else {
123-
expectEl(dom).toHaveStyle({'flex': '1 10 0.000000001px'}, styler);
145+
expectEl(dom).toHaveStyle({
146+
'flex': '1 10 0.000000001px'
147+
}, styler);
124148
}
125149
});
126150

@@ -132,17 +156,67 @@ describe('flex directive', () => {
132156
expectEl(dom).toHaveStyle({'box-sizing': 'border-box'}, styler);
133157

134158
if (platform.BLINK) {
135-
expectEl(dom).toHaveStyle({'flex': '4 5 1e-09px'}, styler);
159+
expectEl(dom).toHaveStyle({
160+
'flex': '4 5 1e-09px'
161+
}, styler);
136162
} else if (platform.FIREFOX) {
137-
expectEl(dom).toHaveStyle({'flex': '4 5 1e-9px'}, styler);
163+
expectEl(dom).toHaveStyle({
164+
'flex': '4 5 1e-9px'
165+
}, styler);
138166
} else if (platform.EDGE || platform.TRIDENT) {
139-
expectEl(dom).toHaveStyle({'flex': '4 5 0px'}, styler);
167+
expectEl(dom).toHaveStyle({
168+
'flex': '4 5 0px'
169+
}, styler);
140170
} else {
141-
expectEl(dom).toHaveStyle({'flex': '4 5 0.000000001px'}, styler);
171+
expectEl(dom).toHaveStyle({
172+
'flex': '4 5 0.000000001px'
173+
}, styler);
142174
}
143175
});
144176

145-
it('should add correct styles for `fxFlex="0%"` usage', () => {
177+
it('should add correct styles for flex-basis unitless 0 input', () => {
178+
componentWithTemplate(`<div fxFlex="1 1 0"></div>`);
179+
180+
fixture.detectChanges();
181+
expectNativeEl(fixture).toHaveStyle({
182+
'flex': '1 1 0%',
183+
'box-sizing': 'border-box',
184+
}, styler);
185+
186+
expectNativeEl(fixture).not.toHaveStyle({
187+
'max-width': '*'
188+
}, styler);
189+
});
190+
191+
it('should add correct styles for flex-basis 0px input', () => {
192+
componentWithTemplate(`<div fxFlex="1 1 0px"></div>`);
193+
194+
fixture.detectChanges();
195+
expectNativeEl(fixture).toHaveStyle({
196+
'flex': '1 1 0%',
197+
'box-sizing': 'border-box',
198+
}, styler);
199+
200+
expectNativeEl(fixture).not.toHaveStyle({
201+
'max-width': '*'
202+
}, styler);
203+
});
204+
205+
it('should add correct styles for noshrink with basis', () => {
206+
componentWithTemplate(`<div fxFlex="1 0 50%"></div>`);
207+
208+
fixture.detectChanges();
209+
expectNativeEl(fixture).toHaveStyle({
210+
'flex': '1 0 50%',
211+
'box-sizing': 'border-box',
212+
}, styler);
213+
214+
expectNativeEl(fixture).not.toHaveStyle({
215+
'max-width': '*'
216+
}, styler);
217+
});
218+
219+
it('should add correct styles for `fxFlex="2%"` usage', () => {
146220
componentWithTemplate(`<div fxFlex='2%'></div>`);
147221

148222
fixture.detectChanges();
@@ -282,7 +356,9 @@ describe('flex directive', () => {
282356
if (!(platform.FIREFOX || platform.TRIDENT)) {
283357
expectNativeEl(fixture).toHaveStyle({
284358
'box-sizing': 'border-box',
285-
'flex': '1 1 calc(30vw - 10px)'
359+
'flex-grow': '1',
360+
'flex-shrink': '1',
361+
'flex-basis': 'calc(30vw - 10px)'
286362
}, styler);
287363
}
288364
});
@@ -295,7 +371,9 @@ describe('flex directive', () => {
295371
setTimeout(() => {
296372
expectNativeEl(fixture).toHaveStyle({
297373
'box-sizing': 'border-box',
298-
'flex': '1 1 calc(75% - 10px)' // correct version has whitespace
374+
'flex-grow': '1',
375+
'flex-shrink': '1',
376+
'flex-basis': 'calc(75% - 10px)' // correct version has whitespace
299377
}, styler);
300378
});
301379
}
@@ -492,26 +570,47 @@ describe('flex directive', () => {
492570

493571
let nodes = queryFor(fixture, '[fxFlex]');
494572
expect(nodes.length).toEqual(3);
495-
expectEl(nodes[0]).toHaveStyle({'flex': '1 1 auto'}, styler);
496-
expectEl(nodes[1]).toHaveStyle({'flex': '1 1 auto'}, styler);
497-
expectEl(nodes[2]).toHaveStyle({'flex': '1 1 auto'}, styler);
573+
expectEl(nodes[0]).toHaveStyle({
574+
'flex': '1 1 auto'
575+
}, styler);
576+
expectEl(nodes[1]).toHaveStyle({
577+
'flex': '1 1 auto'
578+
}, styler);
579+
expectEl(nodes[2]).toHaveStyle({
580+
'flex': '1 1 auto'
581+
}, styler);
498582

499583
matchMedia.activate('xl');
500584
fixture.detectChanges();
501585

502586
nodes = queryFor(fixture, '[fxFlex]');
503-
expectEl(nodes[0]).toHaveStyle({'flex': '1 1 100%', 'max-height': '50%'}, styler);
504-
expectEl(nodes[1]).toHaveStyle({'flex': '1 1 100%', 'max-height': '24.4%'}, styler);
505-
expectEl(nodes[2]).toHaveStyle({'flex': '1 1 100%', 'max-height': '25.6%'}, styler);
587+
expectEl(nodes[0]).toHaveStyle({
588+
'flex': '1 1 100%',
589+
'max-height': '50%'
590+
}, styler);
591+
expectEl(nodes[1]).toHaveStyle({
592+
'flex': '1 1 100%',
593+
'max-height': '24.4%'
594+
}, styler);
595+
expectEl(nodes[2]).toHaveStyle({
596+
'flex': '1 1 100%',
597+
'max-height': '25.6%'
598+
}, styler);
506599

507600
matchMedia.activate('sm');
508601
fixture.detectChanges();
509602

510603
nodes = queryFor(fixture, '[fxFlex]');
511604
expect(nodes.length).toEqual(3);
512-
expectEl(nodes[0]).toHaveStyle({'flex': '1 1 auto'}, styler);
513-
expectEl(nodes[1]).toHaveStyle({'flex': '1 1 auto'}, styler);
514-
expectEl(nodes[2]).toHaveStyle({'flex': '1 1 auto'}, styler);
605+
expectEl(nodes[0]).toHaveStyle({
606+
'flex': '1 1 auto'
607+
}, styler);
608+
expectEl(nodes[1]).toHaveStyle({
609+
'flex': '1 1 auto'
610+
}, styler);
611+
expectEl(nodes[2]).toHaveStyle({
612+
'flex': '1 1 auto'
613+
}, styler);
515614

516615
expectEl(nodes[0]).not.toHaveStyle({'max-height': '50%'}, styler);
517616
expectEl(nodes[1]).not.toHaveStyle({'max-height': '24.4%'}, styler);
@@ -535,25 +634,46 @@ describe('flex directive', () => {
535634
let nodes = queryFor(fixture, '[fxFlex]');
536635

537636
expect(nodes.length).toEqual(3);
538-
expectEl(nodes[0]).toHaveStyle({'flex': '1 1 auto'}, styler);
539-
expectEl(nodes[1]).toHaveStyle({'flex': '1 1 auto'}, styler);
540-
expectEl(nodes[2]).toHaveStyle({'flex': '1 1 auto'}, styler);
637+
expectEl(nodes[0]).toHaveStyle({
638+
'flex': '1 1 auto'
639+
}, styler);
640+
expectEl(nodes[1]).toHaveStyle({
641+
'flex': '1 1 auto'
642+
}, styler);
643+
expectEl(nodes[2]).toHaveStyle({
644+
'flex': '1 1 auto'
645+
}, styler);
541646

542647
matchMedia.activate('sm');
543648
fixture.detectChanges();
544649
nodes = queryFor(fixture, '[fxFlex]');
545650

546-
expectEl(nodes[0]).toHaveStyle({'flex': '1 1 auto'}, styler);
547-
expectEl(nodes[1]).toHaveStyle({'flex': '1 1 auto'}, styler);
548-
expectEl(nodes[2]).toHaveStyle({'flex': '1 1 auto'}, styler);
651+
expectEl(nodes[0]).toHaveStyle({
652+
'flex': '1 1 auto'
653+
}, styler);
654+
expectEl(nodes[1]).toHaveStyle({
655+
'flex': '1 1 auto'
656+
}, styler);
657+
expectEl(nodes[2]).toHaveStyle({
658+
'flex': '1 1 auto'
659+
}, styler);
549660

550661
matchMedia.activate('lg', true);
551662
fixture.detectChanges();
552663
nodes = queryFor(fixture, '[fxFlex]');
553664

554-
expectEl(nodes[0]).toHaveStyle({'flex': '1 1 100%', 'max-height': '50%'}, styler);
555-
expectEl(nodes[1]).toHaveStyle({'flex': '1 1 100%', 'max-height': '24.4%'}, styler);
556-
expectEl(nodes[2]).toHaveStyle({'flex': '1 1 100%', 'max-height': '25.6%'}, styler);
665+
expectEl(nodes[0]).toHaveStyle({
666+
'flex': '1 1 100%',
667+
'max-height': '50%'
668+
}, styler);
669+
expectEl(nodes[1]).toHaveStyle({
670+
'flex': '1 1 100%',
671+
'max-height': '24.4%'
672+
}, styler);
673+
expectEl(nodes[2]).toHaveStyle({
674+
'flex': '1 1 100%',
675+
'max-height': '25.6%'
676+
}, styler);
557677
});
558678

559679
it('should fallback to the default layout from lt-md selectors', () => {
@@ -568,7 +688,9 @@ describe('flex directive', () => {
568688
let nodes = queryFor(fixture, '[fxFlex]');
569689

570690
expect(nodes.length).toEqual(1);
571-
expectEl(nodes[0]).toHaveStyle({'flex': '1 1 auto'}, styler);
691+
expectEl(nodes[0]).toHaveStyle({
692+
'flex': '1 1 auto'
693+
}, styler);
572694

573695
matchMedia.activate('sm', true);
574696
fixture.detectChanges();
@@ -583,7 +705,9 @@ describe('flex directive', () => {
583705
fixture.detectChanges();
584706
nodes = queryFor(fixture, '[fxFlex]');
585707

586-
expectEl(nodes[0]).toHaveStyle({'flex': '1 1 auto'}, styler);
708+
expectEl(nodes[0]).toHaveStyle({
709+
'flex': '1 1 auto'
710+
}, styler);
587711
});
588712
});
589713

0 commit comments

Comments
 (0)