Add test support for intrinsic sized nodes (#1671)

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

This diff adds support for intrinsic sizing in generated tests. This is done by importing a testing font called "Ahem" which, as used, has an exact width and height of 10px for each character. Support has been added for C++, Java, and Javascript generated tests.

Reviewed By: NickGerleman

Differential Revision: D58307002

fbshipit-source-id: e1dcc1e03310d35a32e0c70f71994880d8f7de55

gentest/fixtures/YGIntrinsicSizeTest.html

@@ -0,0 +1,221 @@
+<div id="contains_inner_text_long_word" style="width:2000px;height:2000px;align-items: flex-start;">
+    <div style="flex-direction:row;">
+        LoremipsumdolorsitametconsecteturadipiscingelitSedeleifasdfettortoracauctorFuscerhoncusipsumtemporerosaliquamconsequatPraesentsoda
+    </div>
+</div>
+
+<div id="contains_inner_text_no_width_no_height" style="width:2000px;height:2000px;align-items: flex-start;">
+    <div style="flex-direction:row;">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifasd et tortor ac auctor. Integer at
+        volutpat
+        libero, sed elementum dui interdum id. Aliquam consectetur massa vel neque aliquet, quis consequat risus
+        fringilla. Fusce rhoncus ipsum tempor eros aliquam, vel tempus metus ullamcorper. Nam at nulla sed tellus
+        vestibulum fringilla vel sit amet ligula. Proin velit lectus, euismod sit amet quam vel ultricies dolor,
+        vitae
+        finibus lorem ipsum. Pellentesque molestie at mi sit amet dictum. Donec vehicula lacinia felis sit amet
+        consectetur. Praesent sodales enim sapien, sed varius ipsum pellentesque vel. Aenean eu mi eu justo
+        tincidunt
+        finibus vel sit amet ipsum. Sed bibasdum purus vel ipsum sagittis, quis fermentum dolor lobortis. Etiam
+        vulputate eleifasd lectus vel varius.
+        Phasellus imperdiet lectus sit amet ipsum egestas, ut bibasdum ipsum malesuada. Vestibulum ante ipsum primis
+        in
+        faucibus orci luctus et ultrices posuere cubilia Curae; Sed mollis eros sit amet elit porttitor, vel
+        venenatis
+        turpis venenatis. Nulla tempus tortor at eros efficitur, sit amet dapibus ipsum malesuada. Ut at mauris sed
+        nunc
+        malesuada convallis. Duis id sem vel magna varius eleifasd vel at est. Donec eget orci a ipsum tempor
+        lobortis.
+        Sed at consectetur ipsum.
+    </div>
+</div>
+
+<div id="contains_inner_text_no_width_no_height_long_word_in_paragraph"
+    style="width:2000px;height:2000px;align-items: flex-start;">
+    <div style="flex-direction:row;">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifasd et tortor ac auctor. Integer at
+        volutpat
+        libero, sed elementum dui interdum id. Aliquam consectetur massa vel neque aliquet, quis consequat risus
+        fringilla. Fusce rhoncus ipsum tempor eros aliquam, vel tempus metus ullamcorper. Nam at nulla sed tellus
+        vestibulum fringilla vel sit amet ligula. Proin velit lectus, euismod sit amet quam vel ultricies dolor,
+        vitae
+        finibus
+        loremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumlorem
+        Pellentesque molestie at mi sit amet dictum. Donec vehicula lacinia felis sit amet
+        consectetur. Praesent sodales enim sapien, sed varius ipsum pellentesque vel. Aenean eu mi eu justo
+        tincidunt
+        finibus vel sit amet ipsum. Sed bibasdum purus vel ipsum sagittis, quis fermentum dolor lobortis. Etiam
+        vulputate eleifasd lectus vel varius.
+        Phasellus imperdiet lectus sit amet ipsum egestas, ut bibasdum ipsum malesuada. Vestibulum ante ipsum primis
+        in
+        faucibus orci luctus et ultrices posuere cubilia Curae; Sed mollis eros sit amet elit porttitor, vel
+        venenatis
+        turpis venenatis. Nulla tempus tortor at eros efficitur, sit amet dapibus ipsum malesuada. Ut at mauris sed
+        nunc
+        malesuada convallis. Duis id sem vel magna varius eleifasd vel at est. Donec eget orci a ipsum tempor
+        lobortis.
+        Sed at consectetur ipsum.
+    </div>
+</div>
+
+<div id="contains_inner_text_fixed_width" style="width:2000px;height:2000px;align-items: flex-start;">
+    <div style="flex-direction:row;width:100px">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifasd et tortor ac auctor. Integer at
+        volutpat
+        libero, sed elementum dui interdum id. Aliquam consectetur massa vel neque aliquet, quis consequat risus
+        fringilla. Fusce rhoncus ipsum tempor eros aliquam, vel tempus metus ullamcorper. Nam at nulla sed tellus
+        vestibulum fringilla vel sit amet ligula. Proin velit lectus, euismod sit amet quam vel ultricies dolor,
+        vitae
+        finibus lorem ipsum. Pellentesque molestie at mi sit amet dictum. Donec vehicula lacinia felis sit amet
+        consectetur. Praesent sodales enim sapien, sed varius ipsum pellentesque vel. Aenean eu mi eu justo
+        tincidunt
+        finibus vel sit amet ipsum. Sed bibasdum purus vel ipsum sagittis, quis fermentum dolor lobortis. Etiam
+        vulputate eleifasd lectus vel varius.
+        Phasellus imperdiet lectus sit amet ipsum egestas, ut bibasdum ipsum malesuada. Vestibulum ante ipsum primis
+        in
+        faucibus orci luctus et ultrices posuere cubilia Curae; Sed mollis eros sit amet elit porttitor, vel
+        venenatis
+        turpis venenatis. Nulla tempus tortor at eros efficitur, sit amet dapibus ipsum malesuada. Ut at mauris sed
+        nunc
+        malesuada convallis. Duis id sem vel magna varius eleifasd vel at est. Donec eget orci a ipsum tempor
+        lobortis.
+        Sed at consectetur ipsum.
+    </div>
+</div>
+
+<div id="contains_inner_text_no_width_fixed_height" style="width:2000px;height:2000px;align-items: flex-start;">
+    <div style="flex-direction:row;height:20px">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifasd et tortor ac auctor. Integer at
+        volutpat
+        libero, sed elementum dui interdum id. Aliquam consectetur massa vel neque aliquet, quis consequat risus
+        fringilla. Fusce rhoncus ipsum tempor eros aliquam, vel tempus metus ullamcorper. Nam at nulla sed tellus
+        vestibulum fringilla vel sit amet ligula. Proin velit lectus, euismod sit amet quam vel ultricies dolor,
+        vitae
+        finibus lorem ipsum. Pellentesque molestie at mi sit amet dictum. Donec vehicula lacinia felis sit amet
+        consectetur. Praesent sodales enim sapien, sed varius ipsum pellentesque vel. Aenean eu mi eu justo
+        tincidunt
+        finibus vel sit amet ipsum. Sed bibasdum purus vel ipsum sagittis, quis fermentum dolor lobortis. Etiam
+        vulputate eleifasd lectus vel varius.
+        Phasellus imperdiet lectus sit amet ipsum egestas, ut bibasdum ipsum malesuada. Vestibulum ante ipsum primis
+        in
+        faucibus orci luctus et ultrices posuere cubilia Curae; Sed mollis eros sit amet elit porttitor, vel
+        venenatis
+        turpis venenatis. Nulla tempus tortor at eros efficitur, sit amet dapibus ipsum malesuada. Ut at mauris sed
+        nunc
+        malesuada convallis. Duis id sem vel magna varius eleifasd vel at est. Donec eget orci a ipsum tempor
+        lobortis.
+        Sed at consectetur ipsum.
+    </div>
+</div>
+
+<div id="contains_inner_text_fixed_width_fixed_height" style="width:2000px;height:2000px;align-items: flex-start;">
+    <div style="flex-direction:row;width: 50px; height:20px">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifasd et tortor ac auctor. Integer at
+        volutpat
+        libero, sed elementum dui interdum id. Aliquam consectetur massa vel neque aliquet, quis consequat risus
+        fringilla. Fusce rhoncus ipsum tempor eros aliquam, vel tempus metus ullamcorper. Nam at nulla sed tellus
+        vestibulum fringilla vel sit amet ligula. Proin velit lectus, euismod sit amet quam vel ultricies dolor,
+        vitae
+        finibus lorem ipsum. Pellentesque molestie at mi sit amet dictum. Donec vehicula lacinia felis sit amet
+        consectetur. Praesent sodales enim sapien, sed varius ipsum pellentesque vel. Aenean eu mi eu justo
+        tincidunt
+        finibus vel sit amet ipsum. Sed bibasdum purus vel ipsum sagittis, quis fermentum dolor lobortis. Etiam
+        vulputate eleifasd lectus vel varius.
+        Phasellus imperdiet lectus sit amet ipsum egestas, ut bibasdum ipsum malesuada. Vestibulum ante ipsum primis
+        in
+        faucibus orci luctus et ultrices posuere cubilia Curae; Sed mollis eros sit amet elit porttitor, vel
+        venenatis
+        turpis venenatis. Nulla tempus tortor at eros efficitur, sit amet dapibus ipsum malesuada. Ut at mauris sed
+        nunc
+        malesuada convallis. Duis id sem vel magna varius eleifasd vel at est. Donec eget orci a ipsum tempor
+        lobortis.
+        Sed at consectetur ipsum.
+    </div>
+</div>
+
+<div id="contains_inner_text_max_width_max_height" style="width:2000px;height:2000px;align-items: flex-start;">
+    <div style="flex-direction:row;max-width: 50px; max-height:20px">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifasd et tortor ac auctor. Integer at
+        volutpat
+        libero, sed elementum dui interdum id. Aliquam consectetur massa vel neque aliquet, quis consequat risus
+        fringilla. Fusce rhoncus ipsum tempor eros aliquam, vel tempus metus ullamcorper. Nam at nulla sed tellus
+        vestibulum fringilla vel sit amet ligula. Proin velit lectus, euismod sit amet quam vel ultricies dolor,
+        vitae
+        finibus lorem ipsum. Pellentesque molestie at mi sit amet dictum. Donec vehicula lacinia felis sit amet
+        consectetur. Praesent sodales enim sapien, sed varius ipsum pellentesque vel. Aenean eu mi eu justo
+        tincidunt
+        finibus vel sit amet ipsum. Sed bibasdum purus vel ipsum sagittis, quis fermentum dolor lobortis. Etiam
+        vulputate eleifasd lectus vel varius.
+        Phasellus imperdiet lectus sit amet ipsum egestas, ut bibasdum ipsum malesuada. Vestibulum ante ipsum primis
+        in
+        faucibus orci luctus et ultrices posuere cubilia Curae; Sed mollis eros sit amet elit porttitor, vel
+        venenatis
+        turpis venenatis. Nulla tempus tortor at eros efficitur, sit amet dapibus ipsum malesuada. Ut at mauris sed
+        nunc
+        malesuada convallis. Duis id sem vel magna varius eleifasd vel at est. Donec eget orci a ipsum tempor
+        lobortis.
+        Sed at consectetur ipsum.
+    </div>
+</div>
+
+
+<div id="contains_inner_text_max_width" style="width:2000px;height:2000px;align-items: flex-start;">
+    <div style="flex-direction:row;max-width:100px">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifasd et tortor ac auctor. Integer at
+        volutpat
+        libero, sed elementum dui interdum id. Aliquam consectetur massa vel neque aliquet, quis consequat risus
+        fringilla. Fusce rhoncus ipsum tempor eros aliquam, vel tempus metus ullamcorper. Nam at nulla sed tellus
+        vestibulum fringilla vel sit amet ligula. Proin velit lectus, euismod sit amet quam vel ultricies dolor,
+        vitae
+        finibus lorem ipsum. Pellentesque molestie at mi sit amet dictum. Donec vehicula lacinia felis sit amet
+        consectetur. Praesent sodales enim sapien, sed varius ipsum pellentesque vel. Aenean eu mi eu justo
+        tincidunt
+        finibus vel sit amet ipsum. Sed bibasdum purus vel ipsum sagittis, quis fermentum dolor lobortis. Etiam
+        vulputate eleifasd lectus vel varius.
+        Phasellus imperdiet lectus sit amet ipsum egestas, ut bibasdum ipsum malesuada. Vestibulum ante ipsum primis
+        in
+        faucibus orci luctus et ultrices posuere cubilia Curae; Sed mollis eros sit amet elit porttitor, vel
+        venenatis
+        turpis venenatis. Nulla tempus tortor at eros efficitur, sit amet dapibus ipsum malesuada. Ut at mauris sed
+        nunc
+        malesuada convallis. Duis id sem vel magna varius eleifasd vel at est. Donec eget orci a ipsum tempor
+        lobortis.
+        Sed at consectetur ipsum.
+    </div>
+</div>
+
+<div id="contains_inner_text_fixed_width_shorter_text" style="width:2000px;height:2000px;align-items: flex-start;">
+    <div style="flex-direction:row;width:100px">
+        Lorem ipsum
+    </div>
+</div>
+
+<div id="contains_inner_text_fixed_height_shorter_text" style="width:2000px;height:2000px;align-items: flex-start;">
+    <div style="flex-direction:row;height:100px">
+        Lorem ipsum
+    </div>
+</div>
+
+<div id="contains_inner_text_max_height" style="width:2000px;height:2000px;align-items: flex-start;">
+    <div style="flex-direction:row;max-height:20px">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifasd et tortor ac auctor. Integer at
+        volutpat
+        libero, sed elementum dui interdum id. Aliquam consectetur massa vel neque aliquet, quis consequat risus
+        fringilla. Fusce rhoncus ipsum tempor eros aliquam, vel tempus metus ullamcorper. Nam at nulla sed tellus
+        vestibulum fringilla vel sit amet ligula. Proin velit lectus, euismod sit amet quam vel ultricies dolor,
+        vitae
+        finibus lorem ipsum. Pellentesque molestie at mi sit amet dictum. Donec vehicula lacinia felis sit amet
+        consectetur. Praesent sodales enim sapien, sed varius ipsum pellentesque vel. Aenean eu mi eu justo
+        tincidunt
+        finibus vel sit amet ipsum. Sed bibasdum purus vel ipsum sagittis, quis fermentum dolor lobortis. Etiam
+        vulputate eleifasd lectus vel varius.
+        Phasellus imperdiet lectus sit amet ipsum egestas, ut bibasdum ipsum malesuada. Vestibulum ante ipsum primis
+        in
+        faucibus orci luctus et ultrices posuere cubilia Curae; Sed mollis eros sit amet elit porttitor, vel
+        venenatis
+        turpis venenatis. Nulla tempus tortor at eros efficitur, sit amet dapibus ipsum malesuada. Ut at mauris sed
+        nunc
+        malesuada convallis. Duis id sem vel magna varius eleifasd vel at est. Donec eget orci a ipsum tempor
+        lobortis.
+        Sed at consectetur ipsum.
+    </div>
+</div>

gentest/gentest-cpp.js

@@ -30,7 +30,12 @@ CPPEmitter.prototype = Object.create(Emitter.prototype, {
 
   emitPrologue: {
     value: function () {
-      this.push(['#include <gtest/gtest.h>', '#include <yoga/Yoga.h>', '']);
+      this.push([
+        '#include <gtest/gtest.h>',
+        '#include <yoga/Yoga.h>',
+        '#include "../util/TestUtil.h"',
+        '',
+      ]);
     },
   },
 
@@ -503,4 +508,13 @@ CPPEmitter.prototype = Object.create(Emitter.prototype, {
       );
     },
   },
+
+  YGNodeSetMeasureFunc: {
+    value: function (nodeName, innerText) {
+      this.push(`YGNodeSetContext(${nodeName}, (void*)"${innerText}");`);
+      this.push(
+        `YGNodeSetMeasureFunc(${nodeName}, &facebook::yoga::test::IntrinsicSizeMeasure);`,
+      );
+    },
+  },
 });

gentest/gentest-java.js

@@ -55,6 +55,7 @@ JavaEmitter.prototype = Object.create(Emitter.prototype, {
         'import org.junit.Test;',
         'import org.junit.runner.RunWith;',
         'import org.junit.runners.Parameterized;',
+        'import com.facebook.yoga.utils.TestUtils;',
         '',
         '@RunWith(Parameterized.class)',
         'public class YogaTest {',
@@ -465,4 +466,13 @@ JavaEmitter.prototype = Object.create(Emitter.prototype, {
       );
     },
   },
+
+  YGNodeSetMeasureFunc: {
+    value: function (nodeName, innerText) {
+      this.push(`${nodeName}.setData("${innerText}");`);
+      this.push(
+        `${nodeName}.setMeasureFunction(new TestUtils.intrinsicMeasureFunction());`,
+      );
+    },
+  },
 });

gentest/gentest-javascript.js

@@ -23,6 +23,9 @@ JavascriptEmitter.prototype = Object.create(Emitter.prototype, {
 
   emitPrologue: {
     value: function () {
+      this.push(
+        "import { instrinsicSizeMeasureFunc } from '../tools/utils.ts'",
+      );
       this.push("import Yoga from 'yoga-layout';");
       this.push('import {');
       this.pushIndent();
@@ -398,4 +401,12 @@ JavascriptEmitter.prototype = Object.create(Emitter.prototype, {
       );
     },
   },
+
+  YGNodeSetMeasureFunc: {
+    value: function (nodeName, innerText) {
+      this.push(
+        `${nodeName}.setMeasureFunc(instrinsicSizeMeasureFunc.bind("${innerText}"));`,
+      );
+    },
+  },
 });

gentest/gentest.js

@@ -528,6 +528,10 @@ function setupTestTree(
     e.YGNodeInsertChild(parentName, nodeName, index);
   }
 
+  if (node.innerText && node.children.length === 0) {
+    e.YGNodeSetMeasureFunc(nodeName, node.innerText);
+  }
+
   for (let i = 0; i < node.children.length; i++) {
     e.push('');
     const childName = nodeName + '_child' + i;
@@ -723,6 +727,7 @@ function calculateTree(root, parentOffsetLeft, parentOffsetTop) {
         ? child.dataset.experiments.split(' ')
         : [],
       disabled: child.dataset.disabled === 'true',
+      innerText: child.innerText,
     };
 
     const size = getRoundedSize(child);

gentest/test-template.html

@@ -1,70 +1,78 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="UTF-8">
-    <title>%s</title>
-    <script src="gentest.js"></script>
-    <script src="gentest-cpp.js"></script>
-    <script src="gentest-java.js"></script>
-    <script src="gentest-javascript.js"></script>
 
-    <style>
-      body {
-        padding: 0;
-        margin: 0;
-        font-family: Helvetica;
-        font-size: 14px;
-        font-weight: 100;
-      }
+<head>
+  <meta charset="UTF-8">
+  <title>%s</title>
+  <script src="gentest.js"></script>
+  <script src="gentest-cpp.js"></script>
+  <script src="gentest-java.js"></script>
+  <script src="gentest-javascript.js"></script>
 
-      div, span {
-        box-sizing: border-box;
-        position: relative;
-        border: 0 solid black;
-        margin: 0;
-        padding: 0;
-        display: flex;
-        flex-direction: column;
-        align-items: stretch;
-        align-content: flex-start;
-        justify-content: flex-start;
-        flex-shrink: 0;
-      }
+  <style>
+    @font-face {
+      font-family: 'Ahem';
+      src: url('./fonts/Ahem.ttf') format('truetype');
+    }
 
-      body > * {
-        position: absolute;
-      }
+    body {
+      padding: 0;
+      margin: 0;
+      font: 10px/1 Ahem;
+      font-weight: 100;
+    }
 
-      #ltr-container > * {
-        position: absolute;
-        direction: ltr;
-      }
+    div,
+    span {
+      box-sizing: border-box;
+      position: relative;
+      border: 0 solid black;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      align-content: flex-start;
+      justify-content: flex-start;
+      flex-shrink: 0;
+    }
 
-      #rtl-container > * {
-        position: absolute;
-        direction: rtl;
-      }
-    </style>
-  </head>
+    body>* {
+      position: absolute;
+    }
 
-  <body>
-    <div id='ltr-container'>
+    #ltr-container>* {
+      position: absolute;
+      direction: ltr;
+    }
 
-      %s
+    #rtl-container>* {
+      position: absolute;
+      direction: rtl;
+    }
 
-      <div id='default'></div>
-    </div>
-    <div id='rtl-container'>
+  </style>
+</head>
 
-      %s
+<body>
+  <div id='ltr-container'>
 
-      <div id='default'></div>
-    </div>
+    %s
 
-    <div>
+    <div id='default'></div>
+  </div>
+  <div id='rtl-container'>
 
-      %s
+    %s
+
+    <div id='default'></div>
+  </div>
+
+  <div>
+
+    %s
+
+  </div>
+</body>
 
-    </div>
-  </body>
 </html>