Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: text not shrink in flex container #980

Merged
merged 8 commits into from
Dec 16, 2021
Merged

fix: text not shrink in flex container #980

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
fb92ca5
fix: text node width equal to its longest word width in flex shrink
temper357 Dec 15, 2021
9b58a77
chore: add comment
temper357 Dec 15, 2021
5ec138c
chore: revert longest word calc logic
temper357 Dec 15, 2021
3784ce9
chore: revert textSpan change
temper357 Dec 15, 2021
672d435
Merge branch 'main' of github.com:openkraken/kraken into fix/text-shr…
temper357 Dec 15, 2021
a7bad5b
chore: code format
temper357 Dec 15, 2021
2e4ff6f
test: add test for flex item containing text node
temper357 Dec 15, 2021
674df3f
test: disable tests containing text minimum size larger than container
temper357 Dec 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added integration_tests/snapshots/css/css-flexbox/flex_shrink.ts.911a58ee1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 30 additions & 0 deletions integration_tests/specs/css/css-flexbox/flex_shrink.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1060,5 +1060,35 @@ describe('flexbox flex-shrink', () => {
await snapshot();
});

it('should work with flex item containing only text not overflow flex container', async () => {
const div = createElement('div',{
style: {
display: 'flex',
alignContent: 'flex-start',
alignItems: 'flex-start',
width: '300px'
}
}, [
createElement('div', {
style: {
width: '100px',
height: '100px',
background: 'red',
flexShrink: 0
}
}),
createElement('div', {
style: {
height: '100px',
background: 'green',
}
}, [
createText('Flex item should not overflow container.')
]),
]);
document.body.appendChild(div);
await snapshot();
});


});
14 changes: 11 additions & 3 deletions integration_tests/specs/css/css-flexbox/flexbox_flex-0.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2399,7 +2399,10 @@ describe('flexbox_flex-0', () => {

await snapshot();
});
it('1-auto-shrink', async () => {

// @TODO: Impl setting longest words width as the minimum size of text.
// https://github.com/openkraken/kraken/issues/401
xit('1-auto-shrink', async () => {
let div;
div = createElement(
'div',
Expand Down Expand Up @@ -3635,7 +3638,9 @@ describe('flexbox_flex-0', () => {

await snapshot();
});
it('N-auto-shrink', async () => {
// @TODO: Impl setting longest words width as the minimum size of text.
// https://github.com/openkraken/kraken/issues/401
xit('N-auto-shrink', async () => {
let div;
div = createElement(
'div',
Expand Down Expand Up @@ -3869,7 +3874,10 @@ describe('flexbox_flex-0', () => {

await snapshot();
});
it('auto', async () => {

// @TODO: Impl setting longest words width as the minimum size of text.
// https://github.com/openkraken/kraken/issues/401
xit('auto', async () => {
let div;
let flex;
div = createElement(
Expand Down
10 changes: 8 additions & 2 deletions integration_tests/specs/css/css-flexbox/flexbox_flex-1.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2251,7 +2251,10 @@ describe('flexbox_flex-1', () => {

await snapshot();
});
it('1-auto-shrink', async () => {

// @TODO: Impl setting longest words width as the minimum size of text.
// https://github.com/openkraken/kraken/issues/401
xit('1-auto-shrink', async () => {
let div;
div = createElement(
'div',
Expand Down Expand Up @@ -3492,7 +3495,10 @@ describe('flexbox_flex-1', () => {

await snapshot();
});
it('N-auto-shrink', async () => {

// @TODO: Impl setting longest words width as the minimum size of text.
// https://github.com/openkraken/kraken/issues/401
xit('N-auto-shrink', async () => {
let div;
div = createElement(
'div',
Expand Down
10 changes: 8 additions & 2 deletions integration_tests/specs/css/css-flexbox/flexbox_flex-n.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2251,7 +2251,10 @@ describe('flexbox_flex-N', () => {

await snapshot();
});
it('1-auto-shrink', async () => {

// @TODO: Impl setting longest words width as the minimum size of text.
// https://github.com/openkraken/kraken/issues/401
xit('1-auto-shrink', async () => {
let div;
div = createElement(
'div',
Expand Down Expand Up @@ -3492,7 +3495,10 @@ describe('flexbox_flex-N', () => {

await snapshot();
});
it('N-auto-shrink', async () => {

// @TODO: Impl setting longest words width as the minimum size of text.
// https://github.com/openkraken/kraken/issues/401
xit('N-auto-shrink', async () => {
let div;
div = createElement(
'div',
Expand Down
5 changes: 4 additions & 1 deletion integration_tests/specs/css/css-flexbox/flexbox_flex.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -239,7 +239,10 @@ describe('flexbox_flex', () => {

await snapshot();
});
it('initial', async () => {

// @TODO: Impl setting longest words width as the minimum size of text.
// https://github.com/openkraken/kraken/issues/401
xit('initial', async () => {
let div;
let flex;
div = createElement(
Expand Down
5 changes: 4 additions & 1 deletion kraken/lib/src/rendering/text.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,10 @@ class RenderTextBox extends RenderBox

// @FIXME: Minimum size of text equals to single word in browser
// which cannot be calculated in Flutter currently.
autoMinWidth = size.width;

// Set minimum width to 0 to allow flex item containing text to shrink into
// flex container which is similar to the effect of word-break: break-all in the browser.
autoMinWidth = 0;
autoMinHeight = size.height;
} else {
performResize();
Expand Down