DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Alter layout engine to conform closer to W3C spec

Browse Source 
The primary goals of this change are:
  - Better conformance to the W3C flexbox standard (https://www.w3.org/TR/css-flexbox-1/)
    and a clear articulation of the areas where it deviates from the spec.
  - Support for flex-shrink.
  - Conformance with layout effects of "overflow: hidden".

Specifically, here are the limitations of this implementation as compared to the W3C
flexbox standard (this is also documented in Layout.js):
  - Display property is always assumed to be 'flex' except for Text nodes, which
    are assumed to be 'inline-flex'.
  - The 'zIndex' property (or any form of z ordering) is not supported. Nodes are
    stacked in document order.
  - The 'order' property is not supported. The order of flex items is always defined
    by document order.
  - The 'visibility' property is always assumed to be 'visible'. Values of 'collapse'
    and 'hidden' are not supported.
  - The 'wrap' property supports only 'nowrap' (which is the default) or 'wrap'. The
    rarely-used 'wrap-reverse' is not supported.
  - Rather than allowing arbitrary combinations of flexGrow, flexShrink and
    flexBasis, this algorithm supports only the three most common combinations:
      - flex: 0 is equiavlent to flex: 0 0 auto
      - flex: n (where n is a positive value) is equivalent to flex: n 0 0
      - flex: -1 (or any negative value) is equivalent to flex: 0 1 auto
  - Margins cannot be specified as 'auto'. They must be specified in terms of pixel
    values, and the default value is 0.
  - The 'baseline' value is not supported for alignItems and alignSelf properties.
  - Values of width, maxWidth, minWidth, height, maxHeight and minHeight must be
    specified as pixel values, not as percentages.
  - There is no support for calculation of dimensions based on intrinsic aspect ratios
    (e.g. images).
  - There is no support for forced breaks.
  - It does not support vertical inline directions (top-to-bottom or bottom-to-top text).

And here is how the implementation deviates from the standard (this is also documented in
Layout.js):
  - Section 4.5 of the spec indicates that all flex items have a default minimum
    main size. For text blocks, for example, this is the width of the widest word.
    Calculating the minimum width is expensive, so we forego it and assume a default
    minimum main size of 0.
  - Min/Max sizes in the main axis are not honored when resolving flexible lengths.
  - The spec indicates that the default value for 'flexDirection' is 'row', but
    the algorithm below assumes a default of 'column'.
This commit is contained in:
Adam Comella
2016-04-26 16:35:46 -07:00
parent b0d00ad338
commit f3dd51ab97
36 changed files with 9789 additions and 4157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

309
src/__tests__/Layout-test.js
View File

@@ -1238,7 +1238,7 @@ describe('Layout', function() {
testLayoutAgainstExpectedOnly(
{style: {width: 320, flexDirection: 'column'}, children: [
{style: {measure: measureWithRatio2}},
{style: {height: 100, flexDirection: 'row'}, children: [
{style: {height: 100, flexDirection: 'row', overflow: 'hidden'}, children: [
{style: {measure: measureWithRatio2}},
{style: {measure: measureWithRatio2}}
]},
@@ -1354,14 +1354,16 @@ describe('Layout', function() {
});
it('should layout node with text bounded by grand-parent', function() {
testLayout(
testLayoutAgainstExpectedOnly(
{style: {width: 100, padding: 10, alignSelf: 'flex-start'}, children: [
{style: {margin: 10, alignSelf: 'flex-start'}, children: [
{style: {measure: text(texts.big)}}
]}
]},
{width: 100, height: 40 + textSizes.bigHeight, top: 0, left: 0, children: [
{width: textSizes.bigMinWidth, height: textSizes.bigHeight, top: 20, left: 20, children: [
// In the flexbox engine implementation, min width of text is not supported so we max
// out at the amount of available space (60)
{width: Math.min(60, textSizes.bigMinWidth), height: textSizes.bigHeight, top: 20, left: 20, children: [
{width: textSizes.bigMinWidth, height: textSizes.bigHeight, top: 0, left: 0}
]}
]}
@@ -2485,6 +2487,307 @@ describe('Layout', function() {
});
});
describe('Layout flex:-1', function() {
// Tests for items with flex:-1 in a container with flexDirection:column
it('should not shrink column node when there is space left over', function() {
testLayout(
{style: {width: 100, height: 100}, children: [
{style: {width: 100, flex: -1}, children: [
{style: {width: 100, height: 25}}
]}
]},
{width: 100, height: 100, top: 0, left: 0, children: [
{width: 100, height: 25, top: 0, left: 0, children: [
{width: 100, height: 25, top: 0, left: 0}
]}
]}
);
});
it('should shrink column node when there is not any space left over', function() {
testLayout(
{style: {width: 100, height: 100}, children: [
{style: {width: 100, flex: -1}, children: [
{style: {width: 100, height: 200}}
]}
]},
{width: 100, height: 100, top: 0, left: 0, children: [
{width: 100, height: 100, top: 0, left: 0, children: [
{width: 100, height: 200, top: 0, left: 0}
]}
]}
);
});
it('should not shrink column node with siblings when there is space left over', function() {
testLayout(
{style: {width: 100, height: 100}, children: [
{style: {width: 100, height: 25}},
{style: {width: 100, flex: -1}, children: [
{style: {width: 100, height: 30}}
]},
{style: {width: 100, height: 15}},
]},
{width: 100, height: 100, top: 0, left: 0, children: [
{width: 100, height: 25, top: 0, left: 0},
{width: 100, height: 30, top: 25, left: 0, children: [
{width: 100, height: 30, top: 0, left: 0}
]},
{width: 100, height: 15, top: 55, left: 0},
]}
);
});
it('should shrink column node with siblings when there is not any space left over', function() {
testLayout(
{style: {width: 100, height: 100}, children: [
{style: {width: 100, height: 25}},
{style: {width: 100, flex: -1}, children: [
{style: {width: 100, height: 80}}
]},
{style: {width: 100, height: 15}},
]},
{width: 100, height: 100, top: 0, left: 0, children: [
{width: 100, height: 25, top: 0, left: 0},
{width: 100, height: 60, top: 25, left: 0, children: [
{width: 100, height: 80, top: 0, left: 0}
]},
{width: 100, height: 15, top: 85, left: 0},
]}
);
});
it('should shrink column nodes proportional to their main size when there is not any space left over', function() {
testLayout(
{style: {width: 100, height: 100}, children: [
{style: {width: 100, height: 30, flex: -1}},
{style: {width: 100, height: 40}},
{style: {width: 100, height: 50, flex: -1}}
]},
{width: 100, height: 100, top: 0, left: 0, children: [
{width: 100, height: 22.5, top: 0, left: 0},
{width: 100, height: 40, top: 22.5, left: 0},
{width: 100, height: 37.5, top: 62.5, left: 0}
]}
);
});
// Tests for items with flex:-1 and overflow:visible in a container with flexDirection:row
it('should not shrink visible row node when there is space left over', function() {
testLayout(
{style: {width: 100, height: 100, flexDirection: 'row'}, children: [
{style: {height: 100, flex: -1}, children: [
{style: {width: 25, height: 100}}
]}
]},
{width: 100, height: 100, top: 0, left: 0, children: [
{width: 25, height: 100, top: 0, left: 0, children: [
{width: 25, height: 100, top: 0, left: 0}
]}
]}
);
});
it('should shrink visible row node when there is not any space left over', function() {
testLayout(
{style: {width: 100, height: 100, flexDirection: 'row'}, children: [
{style: {height: 100, flex: -1}, children: [
{style: {width: 200, height: 100}}
]}
]},
{width: 100, height: 100, top: 0, left: 0, children: [
// width would be 100 if we implemented https://www.w3.org/TR/css-flexbox-1/#min-size-auto and min-width didn't default to 0
{width: 100, height: 100, top: 0, left: 0, children: [
{width: 200, height: 100, top: 0, left: 0}
]}
]}
);
});
it('should not shrink visible row node with siblings when there is space left over', function() {
testLayout(
{style: {width: 100, height: 100, flexDirection: 'row'}, children: [
{style: {width: 25, height: 100}},
{style: {height: 100, flex: -1}, children: [
{style: {width: 30, height: 100}}
]},
{style: {width: 15, height: 100}},
]},
{width: 100, height: 100, top: 0, left: 0, children: [
{width: 25, height: 100, top: 0, left: 0},
{width: 30, height: 100, top: 0, left: 25, children: [
{width: 30, height: 100, top: 0, left: 0}
]},
{width: 15, height: 100, top: 0, left: 55},
]}
);
});
it('should shrink visible row node with siblings when there is not any space left over', function() {
testLayout(
{style: {width: 100, height: 100, flexDirection: 'row'}, children: [
{style: {width: 25, height: 100}},
{style: {height: 100, flex: -1}, children: [
{style: {width: 80, height: 100}}
]},
{style: {width: 15, height: 100}},
]},
{width: 100, height: 100, top: 0, left: 0, children: [
{width: 25, height: 100, top: 0, left: 0},
// width would be 80 if we implemented https://www.w3.org/TR/css-flexbox-1/#min-size-auto and min-width didn't default to 0
{width: 60, height: 100, top: 0, left: 25, children: [
{width: 80, height: 100, top: 0, left: 0}
]},
{width: 15, height: 100, top: 0, left: 85},
]}
);
});
it('should shrink visible row nodes when there is not any space left over', function() {
testLayout(
{style: {width: 100, height: 100, flexDirection: 'row'}, children: [
{style: {width: 30, height: 100, flex: -1}},
{style: {width: 40, height: 100}},
{style: {width: 50, height: 100, flex: -1}}
]},
{width: 100, height: 100, top: 0, left: 0, children: [
// width would be 30 if we implemented https://www.w3.org/TR/css-flexbox-1/#min-size-auto and min-width didn't default to 0
{width: 22.5, height: 100, top: 0, left: 0},
{width: 40, height: 100, top: 0, left: 22.5},
// width would be 50 if we implemented https://www.w3.org/TR/css-flexbox-1/#min-size-auto and min-width didn't default to 0
{width: 37.5, height: 100, top: 0, left: 62.5}
]}
);
});
// Tests for items with flex:-1 and overflow:hidden in a container with flexDirection:row
it('should not shrink hidden row node when there is space left over', function() {
testLayout(
{style: {width: 100, height: 100, flexDirection: 'row'}, children: [
{style: {height: 100, flex: -1, overflow: 'hidden'}, children: [
{style: {width: 25, height: 100}}
]}
]},
{width: 100, height: 100, top: 0, left: 0, children: [
{width: 25, height: 100, top: 0, left: 0, children: [
{width: 25, height: 100, top: 0, left: 0}
]}
]}
);
});
it('should shrink hidden row node when there is not any space left over', function() {
testLayout(
{style: {width: 100, height: 100, flexDirection: 'row'}, children: [
{style: {height: 100, flex: -1, overflow: 'hidden'}, children: [
{style: {width: 200, height: 100}}
]}
]},
{width: 100, height: 100, top: 0, left: 0, children: [
{width: 100, height: 100, top: 0, left: 0, children: [
{width: 200, height: 100, top: 0, left: 0}
]}
]}
);
});
it('should not shrink hidden row node with siblings when there is space left over', function() {
testLayout(
{style: {width: 100, height: 100, flexDirection: 'row'}, children: [
{style: {width: 25, height: 100}},
{style: {height: 100, flex: -1, overflow: 'hidden'}, children: [
{style: {width: 30, height: 100}}
]},
{style: {width: 15, height: 100}},
]},
{width: 100, height: 100, top: 0, left: 0, children: [
{width: 25, height: 100, top: 0, left: 0},
{width: 30, height: 100, top: 0, left: 25, children: [
{width: 30, height: 100, top: 0, left: 0}
]},
{width: 15, height: 100, top: 0, left: 55},
]}
);
});
it('should shrink hidden row node with siblings when there is not any space left over', function() {
testLayout(
{style: {width: 100, height: 100, flexDirection: 'row'}, children: [
{style: {width: 25, height: 100}},
{style: {height: 100, flex: -1, overflow: 'hidden'}, children: [
{style: {width: 80, height: 100}}
]},
{style: {width: 15, height: 100}},
]},
{width: 100, height: 100, top: 0, left: 0, children: [
{width: 25, height: 100, top: 0, left: 0},
{width: 60, height: 100, top: 0, left: 25, children: [
{width: 80, height: 100, top: 0, left: 0}
]},
{width: 15, height: 100, top: 0, left: 85},
]}
);
});
it('should shrink hidden row nodes proportional to their main size when there is not any space left over', function() {
testLayout(
{style: {width: 100, height: 100, flexDirection: 'row'}, children: [
{style: {width: 30, height: 100, flex: -1, overflow: 'hidden'}},
{style: {width: 40, height: 100}},
{style: {width: 50, height: 100, flex: -1, overflow: 'hidden'}}
]},
{width: 100, height: 100, top: 0, left: 0, children: [
{width: 22.5, height: 100, top: 0, left: 0},
{width: 40, height: 100, top: 0, left: 22.5},
{width: 37.5, height: 100, top: 0, left: 62.5}
]}
);
});
// Tests for items with flex:-1 containing a text node
it('should not shrink text node with siblings when there is space left over', function() {
testLayoutAgainstExpectedOnly(
{style: {width: 213, height: 100, flexDirection: 'row'}, children: [
{style: {width: 25, height: 100}},
{style: {height: 100, flex: -1, flexDirection: 'row', alignItems: 'flex-start'}, children: [
{style: {measure: text(texts.big)}}
]},
{style: {width: 15, height: 100}},
]},
{width: 213, height: 100, top: 0, left: 0, children: [
{width: 25, height: 100, top: 0, left: 0},
{width: textSizes.bigWidth, height: 100, top: 0, left: 25, children: [
{width: textSizes.bigWidth, height: textSizes.smallHeight, top: 0, left: 0}
]},
{width: 15, height: 100, top: 0, left: 25 + textSizes.bigWidth},
]}
);
});
it('should shrink text node with siblings when there is not any space left over', function() {
testLayout(
{style: {width: 140, height: 100, flexDirection: 'row'}, children: [
{style: {width: 25, height: 100}},
{style: {height: 100, flex: -1, flexDirection: 'row', alignItems: 'flex-start'}, children: [
{style: {flex: -1, measure: text(texts.big)}}
]},
{style: {width: 15, height: 100}},
]},
{width: 140, height: 100, top: 0, left: 0, children: [
{width: 25, height: 100, top: 0, left: 0},
{width: textSizes.bigMinWidth, height: 100, top: 0, left: 25, children: [
{width: textSizes.bigMinWidth, height: textSizes.bigHeight, top: 0, left: 0}
]},
{width: 15, height: 100, top: 0, left: 25 + textSizes.bigMinWidth},
]}
);
});
});
describe('Layout alignContent', function() {
it('should layout with alignContent: stretch, and alignItems: flex-start', function() {