Support ROW_REVERSE, COLUMN_REVERSE and RTL direction
This commit is contained in:
Lucas Rocha
@@ -19,14 +19,14 @@ describe('Javascript Only', function() {
|
||||
it('should fill root node with layout, style, and children', function() {
|
||||
testFillNodes(
|
||||
{},
|
||||
{layout: {width: undefined, height: undefined, top: 0, left: 0}, style: {}, children: []}
|
||||
{layout: {width: undefined, height: undefined, top: 0, left: 0, right: 0, bottom: 0}, style: {}, children: []}
|
||||
);
|
||||
});
|
||||
it('should fill root and child node with layout, style, and children', function() {
|
||||
testFillNodes(
|
||||
{children: [{}]},
|
||||
{layout: {width: undefined, height: undefined, top: 0, left: 0}, style: {}, children: [
|
||||
{layout: {width: undefined, height: undefined, top: 0, left: 0}, style: {}, children: []}
|
||||
{layout: {width: undefined, height: undefined, top: 0, left: 0, right: 0, bottom: 0}, style: {}, children: [
|
||||
{layout: {width: undefined, height: undefined, top: 0, left: 0, right: 0, bottom: 0}, style: {}, children: []}
|
||||
]}
|
||||
);
|
||||
});
|
||||
@@ -46,9 +46,9 @@ describe('Javascript Only', function() {
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
describe('Layout', function() {
|
||||
it('should layout a single node with width and height', function() {
|
||||
testLayout({
|
||||
@@ -73,6 +73,21 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with children in reverse', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, height: 1000, flexDirection: 'column-reverse'}, children: [
|
||||
{style: {width: 500, height: 500}},
|
||||
{style: {width: 250, height: 250}},
|
||||
{style: {width: 125, height: 125}}
|
||||
]},
|
||||
{width: 1000, height: 1000, top: 0, left: 0, children: [
|
||||
{width: 500, height: 500, top: 500, left: 0},
|
||||
{width: 250, height: 250, top: 250, left: 0},
|
||||
{width: 125, height: 125, top: 125, left: 0}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with nested children', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, height: 1000}, children: [
|
||||
@@ -92,6 +107,25 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with nested children in reverse', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, height: 1000, flexDirection: 'column-reverse'}, children: [
|
||||
{style: {width: 500, height: 500}},
|
||||
{style: {width: 500, height: 500, flexDirection: 'column-reverse'}, children: [
|
||||
{style: {width: 250, height: 250}},
|
||||
{style: {width: 250, height: 250}}
|
||||
]}
|
||||
]},
|
||||
{width: 1000, height: 1000, top: 0, left: 0, children: [
|
||||
{width: 500, height: 500, top: 500, left: 0},
|
||||
{width: 500, height: 500, top: 0, left: 0, children: [
|
||||
{width: 250, height: 250, top: 250, left: 0},
|
||||
{width: 250, height: 250, top: 0, left: 0}
|
||||
]}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with margin', function() {
|
||||
testLayout(
|
||||
{style: {width: 100, height: 200, margin: 10}},
|
||||
@@ -114,6 +148,34 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with several children in reverse', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, height: 1000, flexDirection: 'column-reverse', margin: 10}, children: [
|
||||
{style: {width: 100, height: 100, margin: 50}},
|
||||
{style: {width: 100, height: 100, margin: 25}},
|
||||
{style: {width: 100, height: 100, margin: 10}}
|
||||
]},
|
||||
{width: 1000, height: 1000, top: 10, left: 10, children: [
|
||||
{width: 100, height: 100, top: 850, left: 50},
|
||||
{width: 100, height: 100, top: 675, left: 25},
|
||||
{width: 100, height: 100, top: 540, left: 10}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout rtl with reverse correctly', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, height: 1000, direction: 'rtl', flexDirection: 'row-reverse'}, children: [
|
||||
{style: {width: 100, height: 200}},
|
||||
{style: {width: 300, height: 150}}
|
||||
]},
|
||||
{width: 1000, height: 1000, top: 0, left: 0, children: [
|
||||
{width: 100, height: 200, top: 0, left: 0},
|
||||
{width: 300, height: 150, top: 0, left: 100}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with row flex direction', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, height: 1000, flexDirection: 'row'}, children: [
|
||||
@@ -127,6 +189,19 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with row flex direction in rtl', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, height: 1000, direction: 'rtl', flexDirection: 'row'}, children: [
|
||||
{style: {width: 100, height: 200}},
|
||||
{style: {width: 300, height: 150}}
|
||||
]},
|
||||
{width: 1000, height: 1000, top: 0, left: 0, children: [
|
||||
{width: 100, height: 200, top: 0, left: 900},
|
||||
{width: 300, height: 150, top: 0, left: 600}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node based on children main dimensions', function() {
|
||||
testLayout(
|
||||
{style: {width: 300}, children: [
|
||||
@@ -140,6 +215,19 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node based on children main dimensions in reverse', function() {
|
||||
testLayout(
|
||||
{style: {width: 300, flexDirection: 'column-reverse'}, children: [
|
||||
{style: {width: 100, height: 200}},
|
||||
{style: {width: 300, height: 150}}
|
||||
]},
|
||||
{width: 300, height: 350, top: 0, left: 0, children: [
|
||||
{width: 100, height: 200, top: 150, left: 0},
|
||||
{width: 300, height: 150, top: 0, left: 0}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with just flex', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, height: 1000}, children: [
|
||||
@@ -153,6 +241,19 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with just flex in reverse', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, height: 1000, flexDirection: 'column-reverse'}, children: [
|
||||
{style: {width: 100, height: 200}},
|
||||
{style: {width: 100, flex: 1}}
|
||||
]},
|
||||
{width: 1000, height: 1000, top: 0, left: 0, children: [
|
||||
{width: 100, height: 200, top: 800, left: 0},
|
||||
{width: 100, height: 800, top: 0, left: 0}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with flex recursively', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, height: 1000}, children: [
|
||||
@@ -172,6 +273,25 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with flex recursively in reverse', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, height: 1000, flexDirection: 'column-reverse'}, children: [
|
||||
{style: {width: 1000, flex: 1, flexDirection: 'column-reverse'}, children: [
|
||||
{style: {width: 1000, flex: 1, flexDirection: 'column-reverse'}, children: [
|
||||
{style: {width: 1000, flex: 1, flexDirection: 'column-reverse'}}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{width: 1000, height: 1000, top: 0, left: 0, children: [
|
||||
{width: 1000, height: 1000, top: 0, left: 0, children: [
|
||||
{width: 1000, height: 1000, top: 0, left: 0, children: [
|
||||
{width: 1000, height: 1000, top: 0, left: 0}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with targeted margin', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, height: 1000, marginTop: 10, marginLeft: 5}, children: [
|
||||
@@ -185,6 +305,19 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with targeted margin in reverse', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, height: 1000, flexDirection: 'column-reverse', marginTop: 10, marginLeft: 5}, children: [
|
||||
{style: {width: 100, height: 100, marginTop: 50, marginLeft: 15, marginBottom: 20}},
|
||||
{style: {width: 100, height: 100, marginLeft: 30}}
|
||||
]},
|
||||
{width: 1000, height: 1000, top: 10, left: 5, children: [
|
||||
{width: 100, height: 100, top: 880, left: 15},
|
||||
{width: 100, height: 100, top: 730, left: 30}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with justifyContent: flex-start', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, height: 1000, justifyContent: 'flex-start'}, children: [
|
||||
@@ -198,6 +331,19 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with justifyContent: flex-start in reverse', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, height: 1000, flexDirection: 'column-reverse', justifyContent: 'flex-start'}, children: [
|
||||
{style: {width: 100, height: 100}},
|
||||
{style: {width: 100, height: 100}}
|
||||
]},
|
||||
{width: 1000, height: 1000, top: 0, left: 0, children: [
|
||||
{width: 100, height: 100, top: 900, left: 0},
|
||||
{width: 100, height: 100, top: 800, left: 0}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with justifyContent: flex-end', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, height: 1000, justifyContent: 'flex-end'}, children: [
|
||||
@@ -211,6 +357,19 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with justifyContent: flex-end in reverse', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, height: 1000, flexDirection: 'column-reverse', justifyContent: 'flex-end'}, children: [
|
||||
{style: {width: 100, height: 100}},
|
||||
{style: {width: 100, height: 100}}
|
||||
]},
|
||||
{width: 1000, height: 1000, top: 0, left: 0, children: [
|
||||
{width: 100, height: 100, top: 100, left: 0},
|
||||
{width: 100, height: 100, top: 0, left: 0}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with justifyContent: space-between', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, height: 1000, justifyContent: 'space-between'}, children: [
|
||||
@@ -224,6 +383,19 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with justifyContent: space-between in reverse', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, height: 1000, flexDirection: 'column-reverse', justifyContent: 'space-between'}, children: [
|
||||
{style: {width: 100, height: 100}},
|
||||
{style: {width: 100, height: 100}}
|
||||
]},
|
||||
{width: 1000, height: 1000, top: 0, left: 0, children: [
|
||||
{width: 100, height: 100, top: 900, left: 0},
|
||||
{width: 100, height: 100, top: 0, left: 0}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with justifyContent: space-around', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, height: 1000, justifyContent: 'space-around'}, children: [
|
||||
@@ -237,6 +409,19 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with justifyContent: space-around in reverse', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, height: 1000, flexDirection: 'column-reverse', justifyContent: 'space-around'}, children: [
|
||||
{style: {width: 100, height: 100}},
|
||||
{style: {width: 100, height: 100}}
|
||||
]},
|
||||
{width: 1000, height: 1000, top: 0, left: 0, children: [
|
||||
{width: 100, height: 100, top: 700, left: 0},
|
||||
{width: 100, height: 100, top: 200, left: 0}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with justifyContent: center', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, height: 1000, justifyContent: 'center'}, children: [
|
||||
@@ -250,6 +435,19 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with justifyContent: center in reverse', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, height: 1000, flexDirection: 'column-reverse', justifyContent: 'center'}, children: [
|
||||
{style: {width: 100, height: 100}},
|
||||
{style: {width: 100, height: 100}}
|
||||
]},
|
||||
{width: 1000, height: 1000, top: 0, left: 0, children: [
|
||||
{width: 100, height: 100, top: 500, left: 0},
|
||||
{width: 100, height: 100, top: 400, left: 0}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with flex override height', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, height: 1000}, children: [
|
||||
@@ -274,6 +472,19 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with alignItems: flex-start in reverse', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, height: 1000, flexDirection: 'column-reverse', alignItems: 'flex-start'}, children: [
|
||||
{style: {width: 200, height: 100}},
|
||||
{style: {width: 100, height: 100}}
|
||||
]},
|
||||
{width: 1000, height: 1000, top: 0, left: 0, children: [
|
||||
{width: 200, height: 100, top: 900, left: 0},
|
||||
{width: 100, height: 100, top: 800, left: 0}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with alignItems: center', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, height: 1000, alignItems: 'center'}, children: [
|
||||
@@ -287,6 +498,19 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with alignItems: center in reverse', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, height: 1000, flexDirection: 'column-reverse', alignItems: 'center'}, children: [
|
||||
{style: {width: 200, height: 100}},
|
||||
{style: {width: 100, height: 100}}
|
||||
]},
|
||||
{width: 1000, height: 1000, top: 0, left: 0, children: [
|
||||
{width: 200, height: 100, top: 900, left: 400},
|
||||
{width: 100, height: 100, top: 800, left: 450}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with alignItems: flex-end', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, height: 1000, alignItems: 'flex-end'}, children: [
|
||||
@@ -300,6 +524,19 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with alignItems: flex-end in reverse', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, height: 1000, flexDirection: 'column-reverse', alignItems: 'flex-end'}, children: [
|
||||
{style: {width: 200, height: 100}},
|
||||
{style: {width: 100, height: 100}}
|
||||
]},
|
||||
{width: 1000, height: 1000, top: 0, left: 0, children: [
|
||||
{width: 200, height: 100, top: 900, left: 800},
|
||||
{width: 100, height: 100, top: 800, left: 900}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with alignSelf overrides alignItems', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, height: 1000, alignItems: 'flex-end'}, children: [
|
||||
@@ -313,6 +550,19 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with alignSelf overrides alignItems in reverse', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, height: 1000, flexDirection: 'column-reverse', alignItems: 'flex-end'}, children: [
|
||||
{style: {width: 200, height: 100}},
|
||||
{style: {width: 100, height: 100, alignSelf: 'center'}}
|
||||
]},
|
||||
{width: 1000, height: 1000, top: 0, left: 0, children: [
|
||||
{width: 200, height: 100, top: 900, left: 800},
|
||||
{width: 100, height: 100, top: 800, left: 450}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with alignItem: stretch', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, height: 1000, alignItems: 'stretch'}, children: [
|
||||
@@ -324,6 +574,17 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with alignItem: stretch in reverse', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, height: 1000, flexDirection: 'column-reverse', alignItems: 'stretch'}, children: [
|
||||
{style: {height: 100}}
|
||||
]},
|
||||
{width: 1000, height: 1000, top: 0, left: 0, children: [
|
||||
{width: 1000, height: 100, top: 900, left: 0}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout empty node', function() {
|
||||
testLayout(
|
||||
{style: {}, children: [
|
||||
@@ -335,6 +596,17 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout empty node in reverse', function() {
|
||||
testLayout(
|
||||
{style: {flexDirection: 'column-reverse'}, children: [
|
||||
{style: {}}
|
||||
]},
|
||||
{width: 0, height: 0, top: 0, left: 0, children: [
|
||||
{width: 0, height: 0, top: 0, left: 0}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout child with margin', function() {
|
||||
testLayout(
|
||||
{style: {}, children: [
|
||||
@@ -346,6 +618,17 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout child with margin in reverse', function() {
|
||||
testLayout(
|
||||
{style: {flexDirection: 'column-reverse'}, children: [
|
||||
{style: {margin: 5}}
|
||||
]},
|
||||
{width: 10, height: 10, top: 0, left: 0, children: [
|
||||
{width: 0, height: 0, top: 5, left: 5}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should not shrink children if not enough space', function() {
|
||||
testLayout(
|
||||
{style: {height: 100}, children: [
|
||||
@@ -359,6 +642,19 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should not shrink children if not enough space in reverse', function() {
|
||||
testLayout(
|
||||
{style: {height: 100, flexDirection: 'column-reverse'}, children: [
|
||||
{style: {height: 100}},
|
||||
{style: {height: 200}}
|
||||
]},
|
||||
{width: 0, height: 100, top: 0, left: 0, children: [
|
||||
{width: 0, height: 100, top: 0, left: 0},
|
||||
{width: 0, height: 200, top: -200, left: 0}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout for center', function() {
|
||||
testLayout(
|
||||
{style: {justifyContent: 'center'}},
|
||||
@@ -377,6 +673,17 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout flex-end taking into account margin in reverse', function() {
|
||||
testLayout(
|
||||
{style: {height: 100, flexDirection: 'column-reverse', justifyContent: 'flex-end'}, children: [
|
||||
{style: {marginTop: 10}}
|
||||
]},
|
||||
{width: 0, height: 100, top: 0, left: 0, children: [
|
||||
{width: 0, height: 0, top: 10, left: 0}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout alignItems with margin', function() {
|
||||
testLayout(
|
||||
{style: {}, children: [
|
||||
@@ -394,6 +701,23 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout alignItems with margin in reverse', function() {
|
||||
testLayout(
|
||||
{style: {}, children: [
|
||||
{style: {flexDirection: 'column-reverse', alignItems: 'flex-end'}, children: [
|
||||
{style: {margin: 10}},
|
||||
{style: {height: 100}}
|
||||
]}
|
||||
]},
|
||||
{width: 20, height: 120, top: 0, left: 0, children: [
|
||||
{width: 20, height: 120, top: 0, left: 0, children: [
|
||||
{width: 0, height: 0, top: 110, left: 10},
|
||||
{width: 0, height: 100, top: 0, left: 20}
|
||||
]}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout flex inside of an empty element', function() {
|
||||
testLayout(
|
||||
{style: {}, children: [
|
||||
@@ -416,6 +740,17 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout alignItems stretch and margin in reverse', function() {
|
||||
testLayout(
|
||||
{style: {flexDirection: 'column-reverse', alignItems: 'stretch'}, children: [
|
||||
{style: {marginLeft: 10}}
|
||||
]},
|
||||
{width: 10, height: 0, top: 0, left: 0, children: [
|
||||
{width: 0, height: 0, top: 0, left: 10}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with padding', function() {
|
||||
testLayout(
|
||||
{style: {padding: 5}},
|
||||
@@ -652,6 +987,19 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with space-around and child position absolute in reverse', function() {
|
||||
testLayout(
|
||||
{style: {height: 200, flexDirection: 'column-reverse', justifyContent: 'space-around'}, children: [
|
||||
{style: {position: 'absolute'}},
|
||||
{style: {}}
|
||||
]},
|
||||
{width: 0, height: 200, top: 0, left: 0, children: [
|
||||
{width: 0, height: 0, top: 100, left: 0},
|
||||
{width: 0, height: 0, top: 100, left: 0}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with flex and main margin', function() {
|
||||
testLayout(
|
||||
{style: {width: 700, flexDirection: 'row'}, children: [
|
||||
@@ -663,6 +1011,17 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with flex and main margin in rtl', function() {
|
||||
testLayout(
|
||||
{style: {width: 700, direction: 'rtl', flexDirection: 'row'}, children: [
|
||||
{style: {marginRight: 5, flex: 1}}
|
||||
]},
|
||||
{width: 700, height: 0, top: 0, left: 0, children: [
|
||||
{width: 695, height: 0, top: 0, left: 0}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with multiple flex and padding', function() {
|
||||
testLayout(
|
||||
{style: {width: 700, flexDirection: 'row'}, children: [
|
||||
@@ -676,6 +1035,19 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with multiple flex and padding in rtl', function() {
|
||||
testLayout(
|
||||
{style: {width: 700, direction: 'rtl', flexDirection: 'row'}, children: [
|
||||
{style: {flex: 1}},
|
||||
{style: {paddingLeft: 5, flex: 1}}
|
||||
]},
|
||||
{width: 700, height: 0, top: 0, left: 0, children: [
|
||||
{width: 347.5, height: 0, top: 0, left: 352.5},
|
||||
{width: 352.5, height: 0, top: 0, left: 0}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with multiple flex and margin', function() {
|
||||
testLayout(
|
||||
{style: {width: 700, flexDirection: 'row'}, children: [
|
||||
@@ -689,6 +1061,19 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with multiple flex and margin in rtl', function() {
|
||||
testLayout(
|
||||
{style: {width: 700, direction: 'rtl', flexDirection: 'row'}, children: [
|
||||
{style: {flex: 1}},
|
||||
{style: {marginRight: 5, flex: 1}}
|
||||
]},
|
||||
{width: 700, height: 0, top: 0, left: 0, children: [
|
||||
{width: 347.5, height: 0, top: 0, left: 352.5},
|
||||
{width: 347.5, height: 0, top: 0, left: 0}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with flex and overflow', function() {
|
||||
testLayout(
|
||||
{style: {height: 300}, children: [
|
||||
@@ -713,6 +1098,17 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with flex and position absolute in rtl', function() {
|
||||
testLayout(
|
||||
{style: {width: 600, direction: 'rtl', flexDirection: 'row'}, children: [
|
||||
{style: {flex: 1, position: 'absolute'}}
|
||||
]},
|
||||
{width: 600, height: 0, top: 0, left: 0, children: [
|
||||
{width: 0, height: 0, top: 0, left: 600}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with double flex and position absolute', function() {
|
||||
testLayout(
|
||||
{style: {height: 500}, children: [
|
||||
@@ -788,6 +1184,17 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should handle negative margin and min padding correctly in rtl', function() {
|
||||
testLayout(
|
||||
{style: {borderLeftWidth: 1, direction: 'rtl', flexDirection: 'row'}, children: [
|
||||
{style: {marginLeft: -8}}
|
||||
]},
|
||||
{width: 1, height: 0, top: 0, left: 0, children: [
|
||||
{width: 0, height: 0, top: 0, left: 1}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with just text', function() {
|
||||
testLayout(
|
||||
{style: {measure: text(texts.small)}},
|
||||
@@ -839,6 +1246,21 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with text and flex in rtl', function() {
|
||||
testLayout(
|
||||
{style: {}, children: [
|
||||
{style: {width: 500, direction: 'rtl', flexDirection: 'row'}, children: [
|
||||
{style: {flex: 1, measure: text(texts.big)}}
|
||||
]}
|
||||
]},
|
||||
{width: 500, height: textSizes.smallHeight, top: 0, left: 0, children: [
|
||||
{width: 500, height: textSizes.smallHeight, top: 0, left: 0, children: [
|
||||
{width: 500, height: textSizes.smallHeight, top: 0, left: 0}
|
||||
]}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with text and stretch', function() {
|
||||
testLayout(
|
||||
{style: {width: 130}, children: [
|
||||
@@ -908,6 +1330,19 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout space-between when remaining space is negative in reverse', function() {
|
||||
testLayout(
|
||||
{style: {height: 100, flexDirection: 'column-reverse', justifyContent: 'space-between'}, children: [
|
||||
{style: {height: 900}},
|
||||
{style: {}}
|
||||
]},
|
||||
{width: 0, height: 100, top: 0, left: 0, children: [
|
||||
{width: 0, height: 900, top: -800, left: 0},
|
||||
{width: 0, height: 0, top: -800, left: 0}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout flex-end when remaining space is negative', function() {
|
||||
testLayout(
|
||||
{style: {width: 200, flexDirection: 'row', justifyContent: 'flex-end'}, children: [
|
||||
@@ -919,6 +1354,17 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout flex-end when remaining space is negative in rtl', function() {
|
||||
testLayout(
|
||||
{style: {width: 200, direction: 'rtl', flexDirection: 'row', justifyContent: 'flex-end'}, children: [
|
||||
{style: {width: 900}}
|
||||
]},
|
||||
{width: 200, height: 0, top: 0, left: 0, children: [
|
||||
{width: 900, height: 0, top: 0, left: 0}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout text with flexDirection row', function() {
|
||||
testLayout(
|
||||
{style: {}, children: [
|
||||
@@ -934,6 +1380,21 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout text with flexDirection row in rtl', function() {
|
||||
testLayout(
|
||||
{style: { direction: 'rtl' }, children: [
|
||||
{style: {width: 200, flexDirection: 'row'}, children: [
|
||||
{style: {margin: 20, measure: text(texts.big)}}
|
||||
]}
|
||||
]},
|
||||
{width: 200, height: textSizes.smallHeight + 40, top: 0, left: 0, children: [
|
||||
{width: 200, height: textSizes.smallHeight + 40, top: 0, left: 0, children: [
|
||||
{width: textSizes.bigWidth, height: textSizes.smallHeight, top: 20, left: 7.578125}
|
||||
]}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout with text and margin', function() {
|
||||
testLayout(
|
||||
{style: {}, children: [
|
||||
@@ -973,15 +1434,28 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout with negative flex', function() {
|
||||
it('should layout with arbitrary flex in reverse', function() {
|
||||
testLayout(
|
||||
{style: {width: 100, height: 100, alignSelf: 'flex-start'}, children: [
|
||||
{style: {width: 100, height: 100, flexDirection: 'column-reverse', alignSelf: 'flex-start'}, children: [
|
||||
{style: {flex: 2.5, alignSelf: 'flex-start'}},
|
||||
{style: {flex: 7.5, alignSelf: 'flex-start'}}
|
||||
]},
|
||||
{width: 100, height: 100, top: 0, left: 0, children: [
|
||||
{width: 0, height: 25, top: 75, left: 0},
|
||||
{width: 0, height: 75, top: 0, left: 0}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout with negative flex in reverse', function() {
|
||||
testLayout(
|
||||
{style: {width: 100, height: 100, flexDirection: 'column-reverse', alignSelf: 'flex-start'}, children: [
|
||||
{style: {flex: -2.5, alignSelf: 'flex-start'}},
|
||||
{style: {flex: 0, alignSelf: 'flex-start'}}
|
||||
]},
|
||||
{width: 100, height: 100, top: 0, left: 0, children: [
|
||||
{width: 0, height: 0, top: 0, left: 0},
|
||||
{width: 0, height: 0, top: 0, left: 0}
|
||||
{width: 0, height: 0, top: 100, left: 0},
|
||||
{width: 0, height: 0, top: 100, left: 0}
|
||||
]}
|
||||
);
|
||||
});
|
||||
@@ -1196,6 +1670,21 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout flex-wrap in rtl', function() {
|
||||
testLayout(
|
||||
{style: {flexWrap: 'wrap', direction: 'rtl', flexDirection: 'row', width: 100}, children: [
|
||||
{style: {width: 40, height: 10}},
|
||||
{style: {width: 40, height: 10}},
|
||||
{style: {width: 40, height: 10}}
|
||||
]},
|
||||
{width: 100, height: 20, top: 0, left: 0, children: [
|
||||
{width: 40, height: 10, top: 0, left: 60},
|
||||
{width: 40, height: 10, top: 0, left: 20},
|
||||
{width: 40, height: 10, top: 10, left: 60}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout flex wrap with a line bigger than container', function() {
|
||||
testLayout(
|
||||
{style: {height: 100, flexWrap: 'wrap'}, children: [
|
||||
@@ -1315,6 +1804,21 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should override flex direction size with min bounds in rtl', function() {
|
||||
testLayout(
|
||||
{style: {width: 300, height: 200, direction: 'rtl', flexDirection: 'row'}, children: [
|
||||
{style: {flex: 1}},
|
||||
{style: {flex: 1, minWidth: 200}},
|
||||
{style: {flex: 1}}
|
||||
]},
|
||||
{width: 300, height: 200, top: 0, left: 0, children: [
|
||||
{width: 50, height: 200, top: 0, left: 250},
|
||||
{width: 200, height: 200, top: 0, left: 50},
|
||||
{width: 50, height: 200, top: 0, left: 0}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should not override flex direction size within bounds', function() {
|
||||
testLayout(
|
||||
{style: {width: 300, height: 200, flexDirection: 'row'}, children: [
|
||||
@@ -1330,6 +1834,21 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should not override flex direction size within bounds in rtl', function() {
|
||||
testLayout(
|
||||
{style: {width: 300, height: 200, direction: 'rtl', flexDirection: 'row'}, children: [
|
||||
{style: {flex: 1}},
|
||||
{style: {flex: 1, minWidth: 90, maxWidth: 110}},
|
||||
{style: {flex: 1}}
|
||||
]},
|
||||
{width: 300, height: 200, top: 0, left: 0, children: [
|
||||
{width: 100, height: 200, top: 0, left: 200},
|
||||
{width: 100, height: 200, top: 0, left: 100},
|
||||
{width: 100, height: 200, top: 0, left: 0}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should override flex direction size with max bounds', function() {
|
||||
testLayout(
|
||||
{style: {width: 300, height: 200, flexDirection: 'row'}, children: [
|
||||
@@ -1345,6 +1864,21 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should override flex direction size with max bounds in rtl', function() {
|
||||
testLayout(
|
||||
{style: {width: 300, height: 200, direction: 'rtl', flexDirection: 'row'}, children: [
|
||||
{style: {flex: 1}},
|
||||
{style: {flex: 1, maxWidth: 60}},
|
||||
{style: {flex: 1}}
|
||||
]},
|
||||
{width: 300, height: 200, top: 0, left: 0, children: [
|
||||
{width: 120, height: 200, top: 0, left: 180},
|
||||
{width: 60, height: 200, top: 0, left: 120},
|
||||
{width: 120, height: 200, top: 0, left: 0}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should ignore flex size if fully max bound', function() {
|
||||
testLayout(
|
||||
{style: {width: 300, height: 200, flexDirection: 'row'}, children: [
|
||||
@@ -1360,6 +1894,21 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should ignore flex size if fully max bound in rtl', function() {
|
||||
testLayout(
|
||||
{style: {width: 300, height: 200, direction: 'rtl', flexDirection: 'row'}, children: [
|
||||
{style: {flex: 1, maxWidth: 60}},
|
||||
{style: {flex: 1, maxWidth: 60}},
|
||||
{style: {flex: 1, maxWidth: 60}}
|
||||
]},
|
||||
{width: 300, height: 200, top: 0, left: 0, children: [
|
||||
{width: 60, height: 200, top: 0, left: 240},
|
||||
{width: 60, height: 200, top: 0, left: 180},
|
||||
{width: 60, height: 200, top: 0, left: 120}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should ignore flex size if fully min bound', function() {
|
||||
testLayout(
|
||||
{style: {width: 300, height: 200, flexDirection: 'row'}, children: [
|
||||
@@ -1375,6 +1924,21 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should ignore flex size if fully min bound in rtl', function() {
|
||||
testLayout(
|
||||
{style: {width: 300, height: 200, direction: 'rtl', flexDirection: 'row'}, children: [
|
||||
{style: {flex: 1, minWidth: 120}},
|
||||
{style: {flex: 1, minWidth: 120}},
|
||||
{style: {flex: 1, minWidth: 120}}
|
||||
]},
|
||||
{width: 300, height: 200, top: 0, left: 0, children: [
|
||||
{width: 120, height: 200, top: 0, left: 180},
|
||||
{width: 120, height: 200, top: 0, left: 60},
|
||||
{width: 120, height: 200, top: 0, left: -60}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should pre-fill child size within bounds', function() {
|
||||
testLayout(
|
||||
{style: {width: 300, height: 200}, children: [
|
||||
@@ -1491,6 +2055,17 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
it('should keep cross axis size within min bounds in rtl', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, direction: 'rtl', flexDirection: 'row'}, children: [
|
||||
{style: {height: 100, minHeight: 110, minWidth: 100}}
|
||||
]},
|
||||
{width: 1000, height: 110, top: 0, left: 0, children: [
|
||||
{width: 100, height: 110, top: 0, left: 900}
|
||||
]}
|
||||
);
|
||||
});
|
||||
|
||||
it('should layout node with position absolute, top and left and max bounds', function() {
|
||||
testLayout(
|
||||
{style: {width: 1000, height: 1000}, children: [
|
||||
@@ -1586,5 +2161,28 @@ describe('Layout', function() {
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
it('should layout nested nodes with mixed directions', function() {
|
||||
testLayout(
|
||||
{style: {width: 200, height: 200, direction: 'rtl'}, children: [
|
||||
{style: {flexDirection: 'row'}, children: [
|
||||
{style: {width: 50, height: 50}},
|
||||
{style: {width: 50, height: 50}}
|
||||
]},
|
||||
{style: {direction: 'ltr', flexDirection: 'row'}, children: [
|
||||
{style: {width: 50, height: 50}},
|
||||
{style: {width: 50, height: 50}}
|
||||
]}
|
||||
]},
|
||||
{width: 200, height: 200, top: 0, left: 0, children: [
|
||||
{width: 200, height: 50, top: 0, left: 0, children: [
|
||||
{width: 50, height: 50, top: 0, left: 150},
|
||||
{width: 50, height: 50, top: 0, left: 100}
|
||||
]},
|
||||
{width: 200, height: 50, top: 50, left: 0, children: [
|
||||
{width: 50, height: 50, top: 0, left: 0},
|
||||
{width: 50, height: 50, top: 0, left: 50}
|
||||
]}
|
||||
]}
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user