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

Jump to bottom

Implement Percentage support for gap styles #1643

Closed
wants to merge 1 commit into from
Closed

Implement Percentage support for gap styles #1643

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
69 changes: 69 additions & 0 deletions gentest/fixtures/YGGapTest.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,3 +171,72 @@
<div style="height: 20px"></div>
<div style="height: 30px"></div>
</div>

<div id="row_gap_percent_wrapping" style="flex-direction: row; width: 300px; height: 700px; padding: 10px; gap: 10%; flex-wrap: wrap;">
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
</div>

<div id="row_gap_percent_determines_parent_height" style="flex-direction: row; width: 300px; gap: 10%; flex-wrap: wrap;">
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
</div>

<div id="row_gap_percent_wrapping_with_both_content_padding_and_item_padding" style="flex-direction: row; width: 300px; height: 700px; padding: 10px; gap: 10%; flex-wrap: wrap;">
<div style="width: 100px; height: 100px; padding: 10px;"></div>
<div style="width: 100px; height: 100px; padding: 10px;"></div>
<div style="width: 100px; height: 100px; padding: 10px;"></div>
<div style="width: 100px; height: 100px; padding: 10px;"></div>
<div style="width: 100px; height: 100px; padding: 10px;"></div>
</div>

<div id="row_gap_percent_wrapping_with_both_content_padding" style="flex-direction: row; width: 300px; height: 700px; padding: 10px; gap: 10%; flex-wrap: wrap;">
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
</div>

<div id="row_gap_percent_wrapping_with_content_margin" style="flex-direction: row; width: 300px; height: 700px; margin: 10px; gap: 10%; flex-wrap: wrap;">
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
</div>

<div id="row_gap_percent_wrapping_with_content_margin_and_padding" style="flex-direction: row; width: 300px; height: 700px; margin: 10px; padding: 10px; gap: 10%; flex-wrap: wrap;">
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
</div>

<div id="row_gap_percent_wrapping_with_flexible_content" style="flex-direction: row; width: 300px; height: 300px; gap: 10%;">
<div style="flex: 1;"></div>
<div style="flex: 1;"></div>
<div style="flex: 1;"></div>
</div>

<div id="row_gap_percent_wrapping_with_mixed_flexible_content" style="flex-direction: row; width: 300px; height: 300px; gap: 10%;">
<div style="width: 10px;"></div>
<div style="flex: 1;"></div>
<div style="width: 10%;"></div>
</div>
Comment on lines +223 to +233
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nicoburns Thanks for the test case suggestion.


<!-- TODO: Existing bug that Yoga is not inline with Chromium for calculation with min-width -->
<div id="row_gap_percent_wrapping_with_min_width" data-disabled="true" style="flex-direction: row; min-width: 300px; gap: 10%; flex-wrap: wrap;">
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
</div>
1 change: 1 addition & 0 deletions java/com/facebook/yoga/YogaNative.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@ public class YogaNative {
static native void jni_YGNodeStyleSetAspectRatioJNI(long nativePointer, float aspectRatio);
static native float jni_YGNodeStyleGetGapJNI(long nativePointer, int gutter);
static native void jni_YGNodeStyleSetGapJNI(long nativePointer, int gutter, float gapLength);
static native void jni_YGNodeStyleSetGapPercentJNI(long nativePointer, int gutter, float gapLength);
static native void jni_YGNodeSetHasMeasureFuncJNI(long nativePointer, boolean hasMeasureFunc);
static native void jni_YGNodeSetHasBaselineFuncJNI(long nativePointer, boolean hasMeasureFunc);
static native void jni_YGNodeSetStyleInputsJNI(long nativePointer, float[] styleInputsArray, int size);
Expand Down
2 changes: 2 additions & 0 deletions java/com/facebook/yoga/YogaNode.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,6 +192,8 @@ public interface Inputs {

public abstract void setGap(YogaGutter gutter, float gapLength);

public abstract void setGapPercent(YogaGutter gutter, float gapLength);

public abstract float getLayoutX();

public abstract float getLayoutY();
Expand Down
5 changes: 5 additions & 0 deletions java/com/facebook/yoga/YogaNodeJNIBase.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -721,4 +721,9 @@ public float getGap(YogaGutter gutter) {
public void setGap(YogaGutter gutter, float gapLength) {
YogaNative.jni_YGNodeStyleSetGapJNI(mNativePointer, gutter.intValue(), gapLength);
}

@Override
public void setGapPercent(YogaGutter gutter, float gapLength) {
YogaNative.jni_YGNodeStyleSetGapPercentJNI(mNativePointer, gutter.intValue(), gapLength);
}
}
15 changes: 15 additions & 0 deletions java/jni/YGJNIVanilla.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -715,6 +715,18 @@ static void jni_YGNodeStyleSetGapJNI(
static_cast<float>(gapLength));
}

static void jni_YGNodeStyleSetGapPercentJNI(
JNIEnv* /*env*/,
jobject /*obj*/,
jlong nativePointer,
jint gutter,
jfloat gapLength) {
YGNodeStyleSetGapPercent(
_jlong2YGNodeRef(nativePointer),
static_cast<YGGutter>(gutter),
static_cast<float>(gapLength));
}

// Yoga specific properties, not compatible with flexbox specification
YG_NODE_JNI_STYLE_PROP(jfloat, float, AspectRatio);

Expand Down Expand Up @@ -944,6 +956,9 @@ static JNINativeMethod methods[] = {
(void*)jni_YGNodeSetHasMeasureFuncJNI},
{"jni_YGNodeStyleGetGapJNI", "(JI)F", (void*)jni_YGNodeStyleGetGapJNI},
{"jni_YGNodeStyleSetGapJNI", "(JIF)V", (void*)jni_YGNodeStyleSetGapJNI},
{"jni_YGNodeStyleSetGapPercentJNI",
"(JIF)V",
(void*)jni_YGNodeStyleSetGapPercentJNI},
{"jni_YGNodeSetHasBaselineFuncJNI",
"(JZ)V",
(void*)jni_YGNodeSetHasBaselineFuncJNI},
Expand Down
Loading
Loading