Skip to content

Commit 2b07f5d

Browse files
joevilchesfacebook-github-bot
joevilches
authored and
facebook-github-bot
committed
Fix issue where padding for box sizing is resolved against wrong reference length (facebook#1715)
Summary: X-link: facebook/react-native#46799 Content box impl had a bug where we resolved padding % against the same reference length as the dimensions. Padding should always be against containing block's width. This is also true for width, but not for height, which should be against containing block's height. This just pipes the width into our box sizing functions. Changelog: [Internal} Differential Revision: D63787577
1 parent 990ec92 commit 2b07f5d

File tree

12 files changed

+171
-103
lines changed

12 files changed

+171
-103
lines changed

‎gentest/fixtures/YGBoxSizingTest.html‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -46,16 +46,16 @@
4646
style="width: 100px; height: 100px; padding: 5px; box-sizing: content-box">
4747
</div>
4848

49-
<div id="box_sizing_content_box_padding_only_percent" style="width: 100px; height: 100px;">
50-
<div style="width: 50%; height: 75; padding: 10%; box-sizing: content-box">
49+
<div id="box_sizing_content_box_padding_only_percent" style="width: 100px; height: 150px;">
50+
<div style="width: 50px; height: 75px; padding: 10%; box-sizing: content-box">
5151
</div>
5252
</div>
5353

5454
<div id="box_sizing_border_box_padding_only" style="width: 100px; height: 100px; padding: 5px; box-sizing: border-box">
5555
</div>
5656

57-
<div id="box_sizing_border_box_padding_only_percent" style="width: 100px; height: 100px;">
58-
<div style="width: 50%; height: 75; padding: 10%; box-sizing: border-box">
57+
<div id="box_sizing_border_box_padding_only_percent" style="width: 100px; height: 150px;">
58+
<div style="width: 50px; height: 75px; padding: 10%; box-sizing: border-box">
5959
</div>
6060
</div>
6161

@@ -197,7 +197,8 @@
197197
</div>
198198
</div>
199199

200-
<div data-disabled="true" id="box_sizing_content_box_flex_basis_row" style="width: 100px; height: 100px; flex-direction: row;">
200+
<div data-disabled="true" id="box_sizing_content_box_flex_basis_row"
201+
style="width: 100px; height: 100px; flex-direction: row;">
201202
<div style="flex-basis: 50px; height: 25px; padding: 5px; border-width: 10px; box-sizing: content-box">
202203
</div>
203204
</div>
@@ -207,7 +208,8 @@
207208
</div>
208209
</div>
209210

210-
<div data-disabled="true" id="box_sizing_content_box_flex_basis_column" style="width: 100px; height: 100px; flex-direction: column;">
211+
<div data-disabled="true" id="box_sizing_content_box_flex_basis_column"
212+
style="width: 100px; height: 100px; flex-direction: column;">
211213
<div style="flex-basis: 50px; height: 25px; padding: 5px; border-width: 10px; box-sizing: content-box">
212214
</div>
213215
</div>

‎java/tests/generated/com/facebook/yoga/YGBoxSizingTest.java‎

Lines changed: 15 additions & 13 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<<80fa9cf05afc330a721a756dfaf0d1a3>>
7+
* @generated SignedSource<<7f42121bbd9772cdbc079aac71040dcc>>
88
* generated by gentest/gentest-driver.ts from gentest/fixtures/YGBoxSizingTest.html
99
*/
1010

@@ -452,14 +452,15 @@ public void test_box_sizing_content_box_padding_only_percent() {
452452
final YogaNode root = createNode(config);
453453
root.setPositionType(YogaPositionType.ABSOLUTE);
454454
root.setWidth(100f);
455-
root.setHeight(100f);
455+
root.setHeight(150f);
456456

457457
final YogaNode root_child0 = createNode(config);
458458
root_child0.setPaddingPercent(YogaEdge.LEFT, 10);
459459
root_child0.setPaddingPercent(YogaEdge.TOP, 10);
460460
root_child0.setPaddingPercent(YogaEdge.RIGHT, 10);
461461
root_child0.setPaddingPercent(YogaEdge.BOTTOM, 10);
462-
root_child0.setWidthPercent(50f);
462+
root_child0.setWidth(50f);
463+
root_child0.setHeight(75f);
463464
root_child0.setBoxSizing(YogaBoxSizing.CONTENT_BOX);
464465
root.addChildAt(root_child0, 0);
465466
root.setDirection(YogaDirection.LTR);
@@ -468,25 +469,25 @@ public void test_box_sizing_content_box_padding_only_percent() {
468469
assertEquals(0f, root.getLayoutX(), 0.0f);
469470
assertEquals(0f, root.getLayoutY(), 0.0f);
470471
assertEquals(100f, root.getLayoutWidth(), 0.0f);
471-
assertEquals(100f, root.getLayoutHeight(), 0.0f);
472+
assertEquals(150f, root.getLayoutHeight(), 0.0f);
472473

473474
assertEquals(0f, root_child0.getLayoutX(), 0.0f);
474475
assertEquals(0f, root_child0.getLayoutY(), 0.0f);
475476
assertEquals(70f, root_child0.getLayoutWidth(), 0.0f);
476-
assertEquals(20f, root_child0.getLayoutHeight(), 0.0f);
477+
assertEquals(95f, root_child0.getLayoutHeight(), 0.0f);
477478

478479
root.setDirection(YogaDirection.RTL);
479480
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
480481

481482
assertEquals(0f, root.getLayoutX(), 0.0f);
482483
assertEquals(0f, root.getLayoutY(), 0.0f);
483484
assertEquals(100f, root.getLayoutWidth(), 0.0f);
484-
assertEquals(100f, root.getLayoutHeight(), 0.0f);
485+
assertEquals(150f, root.getLayoutHeight(), 0.0f);
485486

486487
assertEquals(30f, root_child0.getLayoutX(), 0.0f);
487488
assertEquals(0f, root_child0.getLayoutY(), 0.0f);
488489
assertEquals(70f, root_child0.getLayoutWidth(), 0.0f);
489-
assertEquals(20f, root_child0.getLayoutHeight(), 0.0f);
490+
assertEquals(95f, root_child0.getLayoutHeight(), 0.0f);
490491
}
491492

492493
@Test
@@ -525,40 +526,41 @@ public void test_box_sizing_border_box_padding_only_percent() {
525526
final YogaNode root = createNode(config);
526527
root.setPositionType(YogaPositionType.ABSOLUTE);
527528
root.setWidth(100f);
528-
root.setHeight(100f);
529+
root.setHeight(150f);
529530

530531
final YogaNode root_child0 = createNode(config);
531532
root_child0.setPaddingPercent(YogaEdge.LEFT, 10);
532533
root_child0.setPaddingPercent(YogaEdge.TOP, 10);
533534
root_child0.setPaddingPercent(YogaEdge.RIGHT, 10);
534535
root_child0.setPaddingPercent(YogaEdge.BOTTOM, 10);
535-
root_child0.setWidthPercent(50f);
536+
root_child0.setWidth(50f);
537+
root_child0.setHeight(75f);
536538
root.addChildAt(root_child0, 0);
537539
root.setDirection(YogaDirection.LTR);
538540
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
539541

540542
assertEquals(0f, root.getLayoutX(), 0.0f);
541543
assertEquals(0f, root.getLayoutY(), 0.0f);
542544
assertEquals(100f, root.getLayoutWidth(), 0.0f);
543-
assertEquals(100f, root.getLayoutHeight(), 0.0f);
545+
assertEquals(150f, root.getLayoutHeight(), 0.0f);
544546

545547
assertEquals(0f, root_child0.getLayoutX(), 0.0f);
546548
assertEquals(0f, root_child0.getLayoutY(), 0.0f);
547549
assertEquals(50f, root_child0.getLayoutWidth(), 0.0f);
548-
assertEquals(20f, root_child0.getLayoutHeight(), 0.0f);
550+
assertEquals(75f, root_child0.getLayoutHeight(), 0.0f);
549551

550552
root.setDirection(YogaDirection.RTL);
551553
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
552554

553555
assertEquals(0f, root.getLayoutX(), 0.0f);
554556
assertEquals(0f, root.getLayoutY(), 0.0f);
555557
assertEquals(100f, root.getLayoutWidth(), 0.0f);
556-
assertEquals(100f, root.getLayoutHeight(), 0.0f);
558+
assertEquals(150f, root.getLayoutHeight(), 0.0f);
557559

558560
assertEquals(50f, root_child0.getLayoutX(), 0.0f);
559561
assertEquals(0f, root_child0.getLayoutY(), 0.0f);
560562
assertEquals(50f, root_child0.getLayoutWidth(), 0.0f);
561-
assertEquals(20f, root_child0.getLayoutHeight(), 0.0f);
563+
assertEquals(75f, root_child0.getLayoutHeight(), 0.0f);
562564
}
563565

564566
@Test

‎javascript/tests/generated/YGBoxSizingTest.test.ts‎

Lines changed: 15 additions & 13 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<<48d3d46dec54df38f853a6fa17e6f0c6>>
7+
* @generated SignedSource<<a841bb29f095097bae9635f62b9fb16d>>
88
* generated by gentest/gentest-driver.ts from gentest/fixtures/YGBoxSizingTest.html
99
*/
1010

@@ -499,39 +499,40 @@ test('box_sizing_content_box_padding_only_percent', () => {
499499
root = Yoga.Node.create(config);
500500
root.setPositionType(PositionType.Absolute);
501501
root.setWidth(100);
502-
root.setHeight(100);
502+
root.setHeight(150);
503503

504504
const root_child0 = Yoga.Node.create(config);
505505
root_child0.setPadding(Edge.Left, "10%");
506506
root_child0.setPadding(Edge.Top, "10%");
507507
root_child0.setPadding(Edge.Right, "10%");
508508
root_child0.setPadding(Edge.Bottom, "10%");
509-
root_child0.setWidth("50%");
509+
root_child0.setWidth(50);
510+
root_child0.setHeight(75);
510511
root_child0.setBoxSizing(BoxSizing.ContentBox);
511512
root.insertChild(root_child0, 0);
512513
root.calculateLayout(undefined, undefined, Direction.LTR);
513514

514515
expect(root.getComputedLeft()).toBe(0);
515516
expect(root.getComputedTop()).toBe(0);
516517
expect(root.getComputedWidth()).toBe(100);
517-
expect(root.getComputedHeight()).toBe(100);
518+
expect(root.getComputedHeight()).toBe(150);
518519

519520
expect(root_child0.getComputedLeft()).toBe(0);
520521
expect(root_child0.getComputedTop()).toBe(0);
521522
expect(root_child0.getComputedWidth()).toBe(70);
522-
expect(root_child0.getComputedHeight()).toBe(20);
523+
expect(root_child0.getComputedHeight()).toBe(95);
523524

524525
root.calculateLayout(undefined, undefined, Direction.RTL);
525526

526527
expect(root.getComputedLeft()).toBe(0);
527528
expect(root.getComputedTop()).toBe(0);
528529
expect(root.getComputedWidth()).toBe(100);
529-
expect(root.getComputedHeight()).toBe(100);
530+
expect(root.getComputedHeight()).toBe(150);
530531

531532
expect(root_child0.getComputedLeft()).toBe(30);
532533
expect(root_child0.getComputedTop()).toBe(0);
533534
expect(root_child0.getComputedWidth()).toBe(70);
534-
expect(root_child0.getComputedHeight()).toBe(20);
535+
expect(root_child0.getComputedHeight()).toBe(95);
535536
} finally {
536537
if (typeof root !== 'undefined') {
537538
root.freeRecursive();
@@ -582,38 +583,39 @@ test('box_sizing_border_box_padding_only_percent', () => {
582583
root = Yoga.Node.create(config);
583584
root.setPositionType(PositionType.Absolute);
584585
root.setWidth(100);
585-
root.setHeight(100);
586+
root.setHeight(150);
586587

587588
const root_child0 = Yoga.Node.create(config);
588589
root_child0.setPadding(Edge.Left, "10%");
589590
root_child0.setPadding(Edge.Top, "10%");
590591
root_child0.setPadding(Edge.Right, "10%");
591592
root_child0.setPadding(Edge.Bottom, "10%");
592-
root_child0.setWidth("50%");
593+
root_child0.setWidth(50);
594+
root_child0.setHeight(75);
593595
root.insertChild(root_child0, 0);
594596
root.calculateLayout(undefined, undefined, Direction.LTR);
595597

596598
expect(root.getComputedLeft()).toBe(0);
597599
expect(root.getComputedTop()).toBe(0);
598600
expect(root.getComputedWidth()).toBe(100);
599-
expect(root.getComputedHeight()).toBe(100);
601+
expect(root.getComputedHeight()).toBe(150);
600602

601603
expect(root_child0.getComputedLeft()).toBe(0);
602604
expect(root_child0.getComputedTop()).toBe(0);
603605
expect(root_child0.getComputedWidth()).toBe(50);
604-
expect(root_child0.getComputedHeight()).toBe(20);
606+
expect(root_child0.getComputedHeight()).toBe(75);
605607

606608
root.calculateLayout(undefined, undefined, Direction.RTL);
607609

608610
expect(root.getComputedLeft()).toBe(0);
609611
expect(root.getComputedTop()).toBe(0);
610612
expect(root.getComputedWidth()).toBe(100);
611-
expect(root.getComputedHeight()).toBe(100);
613+
expect(root.getComputedHeight()).toBe(150);
612614

613615
expect(root_child0.getComputedLeft()).toBe(50);
614616
expect(root_child0.getComputedTop()).toBe(0);
615617
expect(root_child0.getComputedWidth()).toBe(50);
616-
expect(root_child0.getComputedHeight()).toBe(20);
618+
expect(root_child0.getComputedHeight()).toBe(75);
617619
} finally {
618620
if (typeof root !== 'undefined') {
619621
root.freeRecursive();

‎tests/generated/YGBoxSizingTest.cpp‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* LICENSE file in the root directory of this source tree.
66
*
77
* clang-format off
8-
* @generated SignedSource<<36f0f519320608e2c5c6eb6666be7efc>>
8+
* @generated SignedSource<<24bf988fec7e7f72a8f46ba74df63399>>
99
* generated by gentest/gentest-driver.ts from gentest/fixtures/YGBoxSizingTest.html
1010
*/
1111

@@ -446,39 +446,40 @@ TEST(YogaTest, box_sizing_content_box_padding_only_percent) {
446446
YGNodeRef root = YGNodeNewWithConfig(config);
447447
YGNodeStyleSetPositionType(root, YGPositionTypeAbsolute);
448448
YGNodeStyleSetWidth(root, 100);
449-
YGNodeStyleSetHeight(root, 100);
449+
YGNodeStyleSetHeight(root, 150);
450450

451451
YGNodeRef root_child0 = YGNodeNewWithConfig(config);
452452
YGNodeStyleSetPaddingPercent(root_child0, YGEdgeLeft, 10);
453453
YGNodeStyleSetPaddingPercent(root_child0, YGEdgeTop, 10);
454454
YGNodeStyleSetPaddingPercent(root_child0, YGEdgeRight, 10);
455455
YGNodeStyleSetPaddingPercent(root_child0, YGEdgeBottom, 10);
456-
YGNodeStyleSetWidthPercent(root_child0, 50);
456+
YGNodeStyleSetWidth(root_child0, 50);
457+
YGNodeStyleSetHeight(root_child0, 75);
457458
YGNodeStyleSetBoxSizing(root_child0, YGBoxSizingContentBox);
458459
YGNodeInsertChild(root, root_child0, 0);
459460
YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionLTR);
460461

461462
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root));
462463
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root));
463464
ASSERT_FLOAT_EQ(100, YGNodeLayoutGetWidth(root));
464-
ASSERT_FLOAT_EQ(100, YGNodeLayoutGetHeight(root));
465+
ASSERT_FLOAT_EQ(150, YGNodeLayoutGetHeight(root));
465466

466467
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child0));
467468
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child0));
468469
ASSERT_FLOAT_EQ(70, YGNodeLayoutGetWidth(root_child0));
469-
ASSERT_FLOAT_EQ(20, YGNodeLayoutGetHeight(root_child0));
470+
ASSERT_FLOAT_EQ(95, YGNodeLayoutGetHeight(root_child0));
470471

471472
YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionRTL);
472473

473474
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root));
474475
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root));
475476
ASSERT_FLOAT_EQ(100, YGNodeLayoutGetWidth(root));
476-
ASSERT_FLOAT_EQ(100, YGNodeLayoutGetHeight(root));
477+
ASSERT_FLOAT_EQ(150, YGNodeLayoutGetHeight(root));
477478

478479
ASSERT_FLOAT_EQ(30, YGNodeLayoutGetLeft(root_child0));
479480
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child0));
480481
ASSERT_FLOAT_EQ(70, YGNodeLayoutGetWidth(root_child0));
481-
ASSERT_FLOAT_EQ(20, YGNodeLayoutGetHeight(root_child0));
482+
ASSERT_FLOAT_EQ(95, YGNodeLayoutGetHeight(root_child0));
482483

483484
YGNodeFreeRecursive(root);
484485

@@ -521,38 +522,39 @@ TEST(YogaTest, box_sizing_border_box_padding_only_percent) {
521522
YGNodeRef root = YGNodeNewWithConfig(config);
522523
YGNodeStyleSetPositionType(root, YGPositionTypeAbsolute);
523524
YGNodeStyleSetWidth(root, 100);
524-
YGNodeStyleSetHeight(root, 100);
525+
YGNodeStyleSetHeight(root, 150);
525526

526527
YGNodeRef root_child0 = YGNodeNewWithConfig(config);
527528
YGNodeStyleSetPaddingPercent(root_child0, YGEdgeLeft, 10);
528529
YGNodeStyleSetPaddingPercent(root_child0, YGEdgeTop, 10);
529530
YGNodeStyleSetPaddingPercent(root_child0, YGEdgeRight, 10);
530531
YGNodeStyleSetPaddingPercent(root_child0, YGEdgeBottom, 10);
531-
YGNodeStyleSetWidthPercent(root_child0, 50);
532+
YGNodeStyleSetWidth(root_child0, 50);
533+
YGNodeStyleSetHeight(root_child0, 75);
532534
YGNodeInsertChild(root, root_child0, 0);
533535
YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionLTR);
534536

535537
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root));
536538
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root));
537539
ASSERT_FLOAT_EQ(100, YGNodeLayoutGetWidth(root));
538-
ASSERT_FLOAT_EQ(100, YGNodeLayoutGetHeight(root));
540+
ASSERT_FLOAT_EQ(150, YGNodeLayoutGetHeight(root));
539541

540542
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child0));
541543
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child0));
542544
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetWidth(root_child0));
543-
ASSERT_FLOAT_EQ(20, YGNodeLayoutGetHeight(root_child0));
545+
ASSERT_FLOAT_EQ(75, YGNodeLayoutGetHeight(root_child0));
544546

545547
YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionRTL);
546548

547549
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root));
548550
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root));
549551
ASSERT_FLOAT_EQ(100, YGNodeLayoutGetWidth(root));
550-
ASSERT_FLOAT_EQ(100, YGNodeLayoutGetHeight(root));
552+
ASSERT_FLOAT_EQ(150, YGNodeLayoutGetHeight(root));
551553

552554
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetLeft(root_child0));
553555
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child0));
554556
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetWidth(root_child0));
555-
ASSERT_FLOAT_EQ(20, YGNodeLayoutGetHeight(root_child0));
557+
ASSERT_FLOAT_EQ(75, YGNodeLayoutGetHeight(root_child0));
556558

557559
YGNodeFreeRecursive(root);
558560

‎yoga/algorithm/AbsoluteLayout.cpp‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -326,7 +326,10 @@ void layoutAbsoluteChild(
326326
if (child->hasDefiniteLength(Dimension::Width, containingBlockWidth)) {
327327
childWidth = child
328328
->getResolvedDimension(
329-
direction, Dimension::Width, containingBlockWidth)
329+
direction,
330+
Dimension::Width,
331+
containingBlockWidth,
332+
containingBlockWidth)
330333
.unwrap() +
331334
marginRow;
332335
} else {
@@ -362,7 +365,10 @@ void layoutAbsoluteChild(
362365
if (child->hasDefiniteLength(Dimension::Height, containingBlockHeight)) {
363366
childHeight = child
364367
->getResolvedDimension(
365-
direction, Dimension::Height, containingBlockHeight)
368+
direction,
369+
Dimension::Height,
370+
containingBlockHeight,
371+
containingBlockWidth)
366372
.unwrap() +
367373
marginColumn;
368374
} else {

0 commit comments

Comments
 (0)