Skip to content

Commit 3ef0b41

Browse files
improve aspect ratio handling and add testcases
1 parent e83b9c2 commit 3ef0b41

28 files changed

Lines changed: 1624 additions & 140 deletions

gentest/fixtures/grid/YGGridTestFlows.html

Lines changed: 0 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1010,56 +1010,6 @@
10101010
<div style="width: 100%; height: 100%"></div>
10111011
</div>
10121012

1013-
<!-- Flow 15.1: Aspect Ratio - Width to Height -->
1014-
<!-- <div
1015-
id="aspect_ratio_width_to_height"
1016-
style="
1017-
display: grid;
1018-
grid-template-columns: 200px 200px;
1019-
grid-template-rows: auto auto;
1020-
">
1021-
<div style="width: 200px; aspect-ratio: 2 / 1"></div>
1022-
<div style="width: 200px; aspect-ratio: 16 / 9"></div>
1023-
</div> -->
1024-
1025-
<!-- Flow 15.2: Aspect Ratio - Height to Width -->
1026-
<!-- <div
1027-
id="aspect_ratio_height_to_width"
1028-
style="
1029-
display: grid;
1030-
grid-template-columns: auto auto;
1031-
grid-template-rows: 150px 150px;
1032-
">
1033-
<div style="height: 150px; aspect-ratio: 2 / 1"></div>
1034-
<div style="height: 150px; aspect-ratio: 1 / 2"></div>
1035-
</div> -->
1036-
1037-
<!-- Flow 15.3: Aspect Ratio - With Min/Max Constraints -->
1038-
<!-- <div
1039-
id="aspect_ratio_min_max_constraints"
1040-
style="
1041-
display: grid;
1042-
grid-template-columns: 200px 200px;
1043-
grid-template-rows: auto auto;
1044-
">
1045-
<div style="width: 200px; aspect-ratio: 2 / 1; max-height: 80px"></div>
1046-
<div style="width: 200px; aspect-ratio: 2 / 1; min-height: 150px"></div>
1047-
</div> -->
1048-
1049-
<!-- Flow 15.4: Aspect Ratio - Spanning Items -->
1050-
<!-- <div
1051-
id="aspect_ratio_spanning_items"
1052-
style="
1053-
display: grid;
1054-
grid-template-columns: 150px 150px 150px;
1055-
grid-template-rows: auto auto;
1056-
gap: 10px;
1057-
">
1058-
<div
1059-
style="aspect-ratio: 3 / 1; grid-column-start: 1; grid-column-end: 3"></div>
1060-
<div style="width: 150px; aspect-ratio: 1 / 1"></div>
1061-
</div> -->
1062-
10631013
<!-- Flow 16.1: Spanning Items - Span 2 -->
10641014
<div
10651015
id="spanning_items_span_2"
@@ -1438,26 +1388,6 @@
14381388
"></div>
14391389
</div> -->
14401390

1441-
<!-- Complex 2: Percentage Tracks with Auto Margins and Aspect Ratio -->
1442-
<!-- <div
1443-
id="complex_percentage_auto_margins_aspect"
1444-
style="
1445-
display: grid;
1446-
grid-template-columns: 30% auto 40%;
1447-
grid-template-rows: auto auto;
1448-
width: 500px;
1449-
gap: 10px;
1450-
">
1451-
<div
1452-
style="
1453-
width: 120px;
1454-
aspect-ratio: 16 / 9;
1455-
margin-left: auto;
1456-
margin-right: auto;
1457-
"></div>
1458-
<div style="width: 100px; height: 80px"></div>
1459-
<div style="aspect-ratio: 1 / 1; margin-top: auto; margin-bottom: auto"></div>
1460-
</div> -->
14611391

14621392
<!-- Complex 3: Flexible Tracks with Min/Max and Content Distribution -->
14631393
<div
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<!-- Aspect Ratio - Derive Width from Height -->
2+
3+
<div id="grid_aspect_ratio_height_to_width" style="display: grid; grid-template-columns: auto auto; grid-template-rows: 150px 150px;">
4+
<div style="height: 150px; aspect-ratio: 2"></div>
5+
<div style="height: 150px; aspect-ratio: 0.5"></div>
6+
</div>
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<!-- Aspect Ratio - With Min/Max Constraints -->
2+
3+
<div id="grid_aspect_ratio_min_max_constraints" style="display: grid; grid-template-columns: 200px 200px; grid-template-rows: auto auto;">
4+
<div style="width: 200px; aspect-ratio: 2 / 1; max-height: 80px"></div>
5+
<div style="width: 200px; aspect-ratio: 2 / 1; min-height: 150px"></div>
6+
</div>
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<div id="grid_aspect_ratio_percentage_auto_margin" style=" display: grid; grid-template-columns: 30% auto 40%; grid-template-rows: auto auto; width: 500px; gap: 10px;">
2+
<div style=" width: 120px; aspect-ratio: 16 / 9; margin-left: auto; margin-right: auto;"></div>
3+
<div style="width: 100px; height: 80px"></div>
4+
<div style="aspect-ratio: 1 / 1; margin-top: auto; margin-bottom: auto"></div>
5+
</div>
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<!-- Aspect Ratio - Spanning Items -->
2+
3+
<div id="grid_aspect_ratio_spanning_items" style="display: grid; grid-template-columns: 150px 150px 150px; grid-template-rows: auto auto; gap: 10px;">
4+
<div style="aspect-ratio: 3; grid-column-start: 1; grid-column-end: 3"></div>
5+
<div style="width: 150px; aspect-ratio: 1"></div>
6+
</div>
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<!-- Aspect Ratio - Derive Height from Width -->
2+
<div id="grid_aspect_ratio_width_to_height" style="display: grid; grid-template-columns: 200px 200px; grid-template-rows: auto auto;">
3+
<div style="width: 200px; aspect-ratio: 2.0"></div>
4+
<div style="width: 200px; aspect-ratio: 1.77"></div>
5+
</div>
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!-- https://github.com/DioxusLabs/taffy/blob/fd8f81fc639e71cecef3a6bb618bca6606bdf644/test_fixtures/grid/grid_aspect_ratio_fill_child_max_width.html -->
22

33
<div id="grid_aspect_ratio_fill_child_max_width" style="display: grid; height: 100px; width: 100px;">
4-
<div style="max-height: 20px; aspect-ratio: 2;">HH&ZeroWidthSpace;HH&ZeroWidthSpace;HH&ZeroWidthSpace;HH</div>
4+
<div style="max-height: 20px; aspect-ratio: 2;">HH HH HH HH</div>
55
</div>

java/tests/generated/com/facebook/yoga/grid_aspect_ratio_fill_child_max_width.java

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* This source code is licensed under the MIT license found in the
55
* LICENSE file in the root directory of this source tree.
66
*
7-
* @generated SignedSource<<8742d6fab9cbcff8f0a8ef44cbdb7fcc>>
7+
* @generated SignedSource<<fc2789c8c4b480a38516a8ab77699f30>>
88
* generated by gentest/gentest-driver.ts from gentest/fixtures/grid_aspect_ratio_fill_child_max_width.html
99
*/
1010

@@ -41,7 +41,7 @@ public void test_grid_aspect_ratio_fill_child_max_width() {
4141
root_child0.setMaxHeight(20f);
4242
root_child0.setAspectRatio(2 / 1f);
4343
root.addChildAt(root_child0, 0);
44-
root_child0.setData("HH​HH​HH​HH");
44+
root_child0.setData("HH HH HH HH");
4545
root_child0.setMeasureFunction(new TestUtils.intrinsicMeasureFunction());
4646
root.setDirection(YogaDirection.LTR);
4747
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
/*
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @generated SignedSource<<c4a9615a43db4fa5fb087eb71defb540>>
8+
* generated by gentest/gentest-driver.ts from gentest/fixtures/grid_aspect_ratio_height_to_width.html
9+
*/
10+
11+
package com.facebook.yoga;
12+
13+
import static org.junit.Assert.assertEquals;
14+
15+
import org.junit.Ignore;
16+
import org.junit.Test;
17+
import org.junit.runner.RunWith;
18+
import org.junit.runners.Parameterized;
19+
import com.facebook.yoga.utils.TestUtils;
20+
21+
@RunWith(Parameterized.class)
22+
public class grid_aspect_ratio_height_to_width {
23+
@Parameterized.Parameters(name = "{0}")
24+
public static Iterable<TestParametrization.NodeFactory> nodeFactories() {
25+
return TestParametrization.nodeFactories();
26+
}
27+
28+
@Parameterized.Parameter public TestParametrization.NodeFactory mNodeFactory;
29+
30+
@Test
31+
public void test_grid_aspect_ratio_height_to_width() {
32+
YogaConfig config = YogaConfigFactory.create();
33+
34+
final YogaNode root = createNode(config);
35+
root.setPositionType(YogaPositionType.ABSOLUTE);
36+
root.setDisplay(YogaDisplay.GRID);
37+
YogaGridTrackList rootGridTemplateColumns = new YogaGridTrackList();
38+
rootGridTemplateColumns.addTrack(YogaGridTrackValue.auto());
39+
rootGridTemplateColumns.addTrack(YogaGridTrackValue.auto());
40+
rootGridTemplateColumns.addTrack(YogaGridTrackValue.auto());
41+
rootGridTemplateColumns.addTrack(YogaGridTrackValue.auto());
42+
rootGridTemplateColumns.addTrack(YogaGridTrackValue.auto());
43+
rootGridTemplateColumns.addTrack(YogaGridTrackValue.auto());
44+
rootGridTemplateColumns.addTrack(YogaGridTrackValue.auto());
45+
rootGridTemplateColumns.addTrack(YogaGridTrackValue.auto());
46+
rootGridTemplateColumns.addTrack(YogaGridTrackValue.auto());
47+
root.setGridTemplateColumns(rootGridTemplateColumns);
48+
YogaGridTrackList rootGridTemplateRows = new YogaGridTrackList();
49+
rootGridTemplateRows.addTrack(YogaGridTrackValue.auto());
50+
rootGridTemplateRows.addTrack(YogaGridTrackValue.auto());
51+
rootGridTemplateRows.addTrack(YogaGridTrackValue.auto());
52+
rootGridTemplateRows.addTrack(YogaGridTrackValue.auto());
53+
rootGridTemplateRows.addTrack(YogaGridTrackValue.auto());
54+
rootGridTemplateRows.addTrack(YogaGridTrackValue.auto());
55+
rootGridTemplateRows.addTrack(YogaGridTrackValue.auto());
56+
rootGridTemplateRows.addTrack(YogaGridTrackValue.auto());
57+
rootGridTemplateRows.addTrack(YogaGridTrackValue.auto());
58+
rootGridTemplateRows.addTrack(YogaGridTrackValue.auto());
59+
rootGridTemplateRows.addTrack(YogaGridTrackValue.auto());
60+
root.setGridTemplateRows(rootGridTemplateRows);
61+
62+
final YogaNode root_child0 = createNode(config);
63+
root_child0.setHeight(150f);
64+
root_child0.setAspectRatio(2 / 1f);
65+
root.addChildAt(root_child0, 0);
66+
67+
final YogaNode root_child1 = createNode(config);
68+
root_child1.setHeight(150f);
69+
root_child1.setAspectRatio(0.5 / 1f);
70+
root.addChildAt(root_child1, 1);
71+
root.setDirection(YogaDirection.LTR);
72+
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
73+
74+
assertEquals(0f, root.getLayoutX(), 0.0f);
75+
assertEquals(0f, root.getLayoutY(), 0.0f);
76+
assertEquals(375f, root.getLayoutWidth(), 0.0f);
77+
assertEquals(300f, root.getLayoutHeight(), 0.0f);
78+
79+
assertEquals(0f, root_child0.getLayoutX(), 0.0f);
80+
assertEquals(0f, root_child0.getLayoutY(), 0.0f);
81+
assertEquals(300f, root_child0.getLayoutWidth(), 0.0f);
82+
assertEquals(150f, root_child0.getLayoutHeight(), 0.0f);
83+
84+
assertEquals(300f, root_child1.getLayoutX(), 0.0f);
85+
assertEquals(0f, root_child1.getLayoutY(), 0.0f);
86+
assertEquals(75f, root_child1.getLayoutWidth(), 0.0f);
87+
assertEquals(150f, root_child1.getLayoutHeight(), 0.0f);
88+
89+
root.setDirection(YogaDirection.RTL);
90+
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
91+
92+
assertEquals(0f, root.getLayoutX(), 0.0f);
93+
assertEquals(0f, root.getLayoutY(), 0.0f);
94+
assertEquals(375f, root.getLayoutWidth(), 0.0f);
95+
assertEquals(300f, root.getLayoutHeight(), 0.0f);
96+
97+
assertEquals(75f, root_child0.getLayoutX(), 0.0f);
98+
assertEquals(0f, root_child0.getLayoutY(), 0.0f);
99+
assertEquals(300f, root_child0.getLayoutWidth(), 0.0f);
100+
assertEquals(150f, root_child0.getLayoutHeight(), 0.0f);
101+
102+
assertEquals(0f, root_child1.getLayoutX(), 0.0f);
103+
assertEquals(0f, root_child1.getLayoutY(), 0.0f);
104+
assertEquals(75f, root_child1.getLayoutWidth(), 0.0f);
105+
assertEquals(150f, root_child1.getLayoutHeight(), 0.0f);
106+
}
107+
108+
private YogaNode createNode(YogaConfig config) {
109+
return mNodeFactory.create(config);
110+
}
111+
}
Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
/*
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @generated SignedSource<<45e218b4ac043a598d8cf9f7cfe19d29>>
8+
* generated by gentest/gentest-driver.ts from gentest/fixtures/grid_aspect_ratio_min_max_constraints.html
9+
*/
10+
11+
package com.facebook.yoga;
12+
13+
import static org.junit.Assert.assertEquals;
14+
15+
import org.junit.Ignore;
16+
import org.junit.Test;
17+
import org.junit.runner.RunWith;
18+
import org.junit.runners.Parameterized;
19+
import com.facebook.yoga.utils.TestUtils;
20+
21+
@RunWith(Parameterized.class)
22+
public class grid_aspect_ratio_min_max_constraints {
23+
@Parameterized.Parameters(name = "{0}")
24+
public static Iterable<TestParametrization.NodeFactory> nodeFactories() {
25+
return TestParametrization.nodeFactories();
26+
}
27+
28+
@Parameterized.Parameter public TestParametrization.NodeFactory mNodeFactory;
29+
30+
@Test
31+
public void test_grid_aspect_ratio_min_max_constraints() {
32+
YogaConfig config = YogaConfigFactory.create();
33+
34+
final YogaNode root = createNode(config);
35+
root.setPositionType(YogaPositionType.ABSOLUTE);
36+
root.setDisplay(YogaDisplay.GRID);
37+
YogaGridTrackList rootGridTemplateColumns = new YogaGridTrackList();
38+
rootGridTemplateColumns.addTrack(YogaGridTrackValue.auto());
39+
rootGridTemplateColumns.addTrack(YogaGridTrackValue.auto());
40+
rootGridTemplateColumns.addTrack(YogaGridTrackValue.auto());
41+
rootGridTemplateColumns.addTrack(YogaGridTrackValue.auto());
42+
rootGridTemplateColumns.addTrack(YogaGridTrackValue.auto());
43+
rootGridTemplateColumns.addTrack(YogaGridTrackValue.auto());
44+
rootGridTemplateColumns.addTrack(YogaGridTrackValue.auto());
45+
rootGridTemplateColumns.addTrack(YogaGridTrackValue.auto());
46+
rootGridTemplateColumns.addTrack(YogaGridTrackValue.auto());
47+
rootGridTemplateColumns.addTrack(YogaGridTrackValue.auto());
48+
rootGridTemplateColumns.addTrack(YogaGridTrackValue.auto());
49+
root.setGridTemplateColumns(rootGridTemplateColumns);
50+
YogaGridTrackList rootGridTemplateRows = new YogaGridTrackList();
51+
rootGridTemplateRows.addTrack(YogaGridTrackValue.auto());
52+
rootGridTemplateRows.addTrack(YogaGridTrackValue.auto());
53+
rootGridTemplateRows.addTrack(YogaGridTrackValue.auto());
54+
rootGridTemplateRows.addTrack(YogaGridTrackValue.auto());
55+
rootGridTemplateRows.addTrack(YogaGridTrackValue.auto());
56+
rootGridTemplateRows.addTrack(YogaGridTrackValue.auto());
57+
rootGridTemplateRows.addTrack(YogaGridTrackValue.auto());
58+
rootGridTemplateRows.addTrack(YogaGridTrackValue.auto());
59+
rootGridTemplateRows.addTrack(YogaGridTrackValue.auto());
60+
root.setGridTemplateRows(rootGridTemplateRows);
61+
62+
final YogaNode root_child0 = createNode(config);
63+
root_child0.setWidth(200f);
64+
root_child0.setMaxHeight(80f);
65+
root_child0.setAspectRatio(2 / 1f);
66+
root.addChildAt(root_child0, 0);
67+
68+
final YogaNode root_child1 = createNode(config);
69+
root_child1.setWidth(200f);
70+
root_child1.setMinHeight(150f);
71+
root_child1.setAspectRatio(2 / 1f);
72+
root.addChildAt(root_child1, 1);
73+
root.setDirection(YogaDirection.LTR);
74+
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
75+
76+
assertEquals(0f, root.getLayoutX(), 0.0f);
77+
assertEquals(0f, root.getLayoutY(), 0.0f);
78+
assertEquals(400f, root.getLayoutWidth(), 0.0f);
79+
assertEquals(150f, root.getLayoutHeight(), 0.0f);
80+
81+
assertEquals(0f, root_child0.getLayoutX(), 0.0f);
82+
assertEquals(0f, root_child0.getLayoutY(), 0.0f);
83+
assertEquals(200f, root_child0.getLayoutWidth(), 0.0f);
84+
assertEquals(80f, root_child0.getLayoutHeight(), 0.0f);
85+
86+
assertEquals(200f, root_child1.getLayoutX(), 0.0f);
87+
assertEquals(0f, root_child1.getLayoutY(), 0.0f);
88+
assertEquals(200f, root_child1.getLayoutWidth(), 0.0f);
89+
assertEquals(150f, root_child1.getLayoutHeight(), 0.0f);
90+
91+
root.setDirection(YogaDirection.RTL);
92+
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
93+
94+
assertEquals(0f, root.getLayoutX(), 0.0f);
95+
assertEquals(0f, root.getLayoutY(), 0.0f);
96+
assertEquals(400f, root.getLayoutWidth(), 0.0f);
97+
assertEquals(150f, root.getLayoutHeight(), 0.0f);
98+
99+
assertEquals(200f, root_child0.getLayoutX(), 0.0f);
100+
assertEquals(0f, root_child0.getLayoutY(), 0.0f);
101+
assertEquals(200f, root_child0.getLayoutWidth(), 0.0f);
102+
assertEquals(80f, root_child0.getLayoutHeight(), 0.0f);
103+
104+
assertEquals(0f, root_child1.getLayoutX(), 0.0f);
105+
assertEquals(0f, root_child1.getLayoutY(), 0.0f);
106+
assertEquals(200f, root_child1.getLayoutWidth(), 0.0f);
107+
assertEquals(150f, root_child1.getLayoutHeight(), 0.0f);
108+
}
109+
110+
private YogaNode createNode(YogaConfig config) {
111+
return mNodeFactory.create(config);
112+
}
113+
}

0 commit comments

Comments
 (0)