facebook / yoga

Yoga is an embeddable layout engine targeting web standards.
https://yogalayout.dev/
MIT License
17.1k stars 1.41k forks source link

flexBasis+flexShrink+borderWidth result in an wrong value #1665

Open XuweiQT opened 3 weeks ago

XuweiQT commented 3 weeks ago

Report

flexBasis+flexShrink+borderWidth result in an wrong value

    <View style={{ marginTop: 100 }}>
      <View style={{ height: 100, marginTop: 20, flexDirection: 'row' }}>
        <View style={{
          flexBasis: 0,
          flexGrow: 1,
          flexShrink: 1,
          borderWidth: 0.594443,  //0.594441 or 0.594442 is correct, but 0.594443 & 0.594444 is in correct
          minWidth: 160,
          borderColor: '0xff000000',
          backgroundColor: 'red',
        }}
          onLayout={(e) => {
            console.log(e.nativeEvent.layout);
          }}></View>
        <View style={{
          flexBasis: 0,
          flexGrow: 1,
          flexShrink: 1,
          borderWidth: 0.594442,
          minWidth: 160,
          borderColor: '0xff000000',
          backgroundColor: 'green',
        }} />
        <View style={{
          flexBasis: 0,
          flexGrow: 1,
          flexShrink: 1,
          borderWidth: 0.594442,
          minWidth: 160,
          borderColor: '0xff000000',
          backgroundColor: 'blue',
        }} />
        <View style={{
          flexBasis: 0,
          flexGrow: 1,
          flexShrink: 1,
          borderWidth: 0.594442,
          minWidth: 160,
          borderColor: '0xff000000',
          backgroundColor: 'yellow',
        }} />
      </View>
    </View >

Expected Behavior

<div layout="width: 393; height: 852; top: 0; left: 0;" style="" >
  <div layout="width: 393; height: 852; top: 0; left: 0;" style="flex: 1; " >
    <div layout="width: 393; height: 852; top: 0; left: 0;" style="flex: 1; " >
      <div layout="width: 393; height: 120; top: 100; left: 0;" style="margin-top: 100px; " >
        <div layout="width: 393; height: 100; top: 20; left: 0;" style="flex-direction: row; margin-top: 20px; height: 100px; " >
          <div layout="width: 160; height: 100; top: 0; left: 0;" style="flex-grow: 1; flex-shrink: 1; flex-basis: 0px; border: 0.594442px; min-width: 160px; " ></div>
          <div layout="width: 160; height: 100; top: 0; left: 160;" style="flex-grow: 1; flex-shrink: 1; flex-basis: 0px; border: 0.594442px; min-width: 160px; " ></div>
          <div layout="width: 160; height: 100; top: 0; left: 320;" style="flex-grow: 1; flex-shrink: 1; flex-basis: 0px; border: 0.594442px; min-width: 160px; " ></div>
          <div layout="width: 160; height: 100; top: 0; left: 480;" style="flex-grow: 1; flex-shrink: 1; flex-basis: 0px; border: 0.594442px; min-width: 160px; " ></div>
        </div>
      </div>
    </div>
  </div>
</div>

width=160 is an correct value 截屏2024-06-21 17 01 46

Actual Behavior

<div layout="width: 393; height: 852; top: 0; left: 0;" style="" >
  <div layout="width: 393; height: 852; top: 0; left: 0;" style="flex: 1; " >
    <div layout="width: 393; height: 852; top: 0; left: 0;" style="flex: 1; " >
      <div layout="width: 393; height: 120; top: 100; left: 0;" style="margin-top: 100px; " >
        <div layout="width: 393; height: 100; top: 20; left: 0;" style="flex-direction: row; margin-top: 20px; height: 100px; " >
          <div layout="width: 1.65759e+11; height: 100; top: 0; left: 0;" style="flex-grow: 1; flex-shrink: 1; flex-basis: 0px; border: 0.594443px; min-width: 160px; " ></div>
          <div layout="width: 1.65759e+11; height: 100; top: 0; left: 1.65759e+11;" style="flex-grow: 1; flex-shrink: 1; flex-basis: 0px; border: 0.594442px; min-width: 160px; " ></div>
          <div layout="width: 1.65759e+11; height: 100; top: 0; left: 3.31518e+11;" style="flex-grow: 1; flex-shrink: 1; flex-basis: 0px; border: 0.594442px; min-width: 160px; " ></div>
          <div layout="width: 1.65759e+11; height: 100; top: 0; left: 4.97277e+11;" style="flex-grow: 1; flex-shrink: 1; flex-basis: 0px; border: 0.594442px; min-width: 160px; " ></div>
        </div>
      </div>
    </div>
  </div>
</div>

width=1.65759e+11 is an incorrect value

截屏2024-06-21 17 06 57

XuweiQT commented 3 weeks ago

when flexBasis: 0, flexShrink: 0, No problem.