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

Fix issue where % width would be wrong if physical and relative padding defined on parent (#1662)

Browse Source 
Summary:
X-link: https://github.com/facebook/react-native/pull/44791

Pull Request resolved: https://github.com/facebook/yoga/pull/1662

This should fix https://github.com/facebook/yoga/issues/1657. Rather insidious bug but we had code like

```
  // The total padding/border for a given axis does not depend on the direction
  // so hardcoding LTR here to avoid piping direction to this function
  return node->style().computeInlineStartPaddingAndBorder(
             axis, Direction::LTR, widthSize) +
      node->style().computeInlineEndPaddingAndBorder(
          axis, Direction::LTR, widthSize);
```

That comment is NOT true if someone sets both the physical edge and relative edge. So like paddingLeft and paddingEnd for RTL. This diff simply pipes the direction to that spot to use instead of hardcoding LTR. Every file changed is just to pipe `direction`.

Changelog: [Internal]

Reviewed By: NickGerleman

Differential Revision: D58169843

fbshipit-source-id: 5b4854dddc019285076bd06955557edf73ef7ec5
This commit is contained in:
Joe Vilches
2024-06-10 18:25:19 -07:00
committed by Facebook GitHub Bot
parent fb53cb7443
commit 72b7e5b5cf
7 changed files with 212 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
gentest/fixtures/YGPaddingTest.html
View File

@@ -13,10 +13,17 @@
<div style="height: 10px;"></div>
</div>
<div id="padding_center_child" style="width: 100px; height: 100px; padding-start: 10px; padding-top: 10; padding-end: 20px; padding-bottom: 20px; align-items: center; justify-content: center;">
<div id="padding_center_child"
style="width: 100px; height: 100px; padding-start: 10px; padding-top: 10; padding-end: 20px; padding-bottom: 20px; align-items: center; justify-content: center;">
<div style="height: 10px; width: 10px;"></div>
</div>
<div id="child_with_padding_align_end" style="width: 200px; height: 200px; justify-content: flex-end; align-items: flex-end;">
<div id="child_with_padding_align_end"
style="width: 200px; height: 200px; justify-content: flex-end; align-items: flex-end;">
<div style="width: 100px; height: 100px; padding: 20px;"></div>
</div>
<div id="physical_and_relative_edge_defined"
style="width: 200px; height: 200px; padding-left: 20px; padding-end: 50px;">
<div style="width: 100%; height: 50px;"></div>
</div>