Add support for display: contents style

Summary:
This PR adds support for `display: contents` style by effectively skipping nodes with `display: contents` set during layout.

This required changes in the logic related to children traversal - before this PR a node would be always laid out in the context of its direct parent. After this PR that assumption is no longer true - `display: contents` allows nodes to be skipped, i.e.:

```html
<div id="node1">
  <div id="node2" style="display: contents;">
    <div id="node3" />
  </div>
</div>
```

`node3` will be laid out as if it were a child of `node1`.

Because of this, iterating over direct children of a node is no longer correct to achieve the correct layout. This PR introduces `LayoutableChildren::Iterator` which can traverse the subtree of a given node in a way that nodes with `display: contents` are replaced with their concrete children.

A tree like this:
```mermaid
flowchart TD
    A((A))
    B((B))
    C((C))
    D((D))
    E((E))
    F((F))
    G((G))
    H((H))
    I((I))
    J((J))

    A --> B
    A --> C
    B --> D
    B --> E
    C --> F
    D --> G
    F --> H
    G --> I
    H --> J

    style B fill:facebook/yoga#50
    style C fill:facebook/yoga#50
    style D fill:facebook/yoga#50
    style H fill:facebook/yoga#50
    style I fill:facebook/yoga#50
```

would be laid out as if the green nodes (ones with `display: contents`) did not exist. It also changes the logic where children were accessed by index to use the iterator instead as random access would be non-trivial to implement and it's not really necessary - the iteration was always sequential and indices were only used as boundaries.

There's one place where knowledge of layoutable children is required to calculate the gap. An optimization for this is for a node to keep a counter of how many `display: contents` nodes are its children. If there are none, a short path of just returning the size of the children vector can be taken, otherwise it needs to iterate over layoutable children and count them, since the structure may be complex.

One more major change this PR introduces is `cleanupContentsNodesRecursively`. Since nodes with `display: contents` would be entirely skipped during the layout pass, they would keep previous metrics, would be kept as dirty, and, in the case of nested `contents` nodes, would not be cloned, breaking `doesOwn` relation. All of this is handled in the new method which clones `contents` nodes recursively, sets empty layout, and marks them as clean and having a new layout so that it can be used on the React Native side.

Relies on facebook/yoga#1725

X-link: facebook/yoga#1726

Differential Revision: D64404340

Pulled By: NickGerleman

packages/react-native/ReactAndroid/src/main/java/com/facebook/yoga/YogaDisplay.java

@@ -11,7 +11,8 @@
 
 public enum YogaDisplay {
   FLEX(0),
-  NONE(1);
+  NONE(1),
+  CONTENTS(2);
 
   private final int mIntValue;
 
@@ -27,6 +28,7 @@ public static YogaDisplay fromInt(int value) {
     switch (value) {
       case 0: return FLEX;
       case 1: return NONE;
+      case 2: return CONTENTS;
       default: throw new IllegalArgumentException("Unknown enum value: " + value);
     }
   }

packages/react-native/ReactCommon/yoga/yoga/YGEnums.cpp

@@ -71,6 +71,8 @@ const char* YGDisplayToString(const YGDisplay value) {
       return "flex";
     case YGDisplayNone:
       return "none";
+    case YGDisplayContents:
+      return "contents";
   }
   return "unknown";
 }

packages/react-native/ReactCommon/yoga/yoga/YGEnums.h

@@ -43,7 +43,8 @@ YG_ENUM_DECL(
 YG_ENUM_DECL(
     YGDisplay,
     YGDisplayFlex,
-    YGDisplayNone)
+    YGDisplayNone,
+    YGDisplayContents)
 
 YG_ENUM_DECL(
     YGEdge,

packages/react-native/ReactCommon/yoga/yoga/algorithm/AbsoluteLayout.cpp

@@ -153,6 +153,39 @@ static void positionAbsoluteChildLegacy(
       : ((resolveChildAlignment(parent, child) == Align::FlexEnd) ^
          (parent->style().flexWrap() == Wrap::WrapReverse));
 
+  // If the child is absolutely positioned and has a
+  // top/left/bottom/right set, override all the previously computed
+  // positions to set it correctly.
+  const bool isChildLeadingPosDefined =
+      child->style().isFlexStartPositionDefined(axis, direction) &&
+      !child->style().isFlexStartPositionAuto(axis, direction);
+  if (isChildLeadingPosDefined) {
+    child->setLayoutPosition(
+        child->style().computeFlexStartPosition(
+            axis,
+            direction,
+            isAxisRow ? containingBlockWidth : containingBlockHeight) +
+            containingNode->style().computeFlexStartBorder(axis, direction) +
+            child->style().computeFlexStartMargin(
+                axis,
+                direction,
+                isAxisRow ? containingBlockWidth : containingBlockHeight),
+        flexStartEdge(axis));
+  }
+
+  // If leading position is not defined or calculations result in Nan,
+  // default to border + margin
+  if (!isChildLeadingPosDefined ||
+      yoga::isUndefined(child->getLayout().position(flexStartEdge(axis)))) {
+    child->setLayoutPosition(
+        containingNode->style().computeFlexStartBorder(axis, direction) +
+            child->style().computeFlexStartMargin(
+                axis,
+                direction,
+                isAxisRow ? containingBlockWidth : containingBlockHeight),
+        flexStartEdge(axis));
+  }
+
   if (child->style().isFlexEndPositionDefined(axis, direction) &&
       (!child->style().isFlexStartPositionDefined(axis, direction) ||
        child->style().isFlexStartPositionAuto(axis, direction))) {
@@ -508,7 +541,7 @@ bool layoutAbsoluteDescendants(
     float containingNodeAvailableInnerWidth,
     float containingNodeAvailableInnerHeight) {
   bool hasNewLayout = false;
-  for (auto child : currentNode->getChildren()) {
+  for (auto child : currentNode->getLayoutChildren()) {
     if (child->style().display() == Display::None) {
       continue;
     } else if (child->style().positionType() == PositionType::Absolute) {

packages/react-native/ReactCommon/yoga/yoga/algorithm/Baseline.cpp

@@ -32,9 +32,7 @@ float calculateBaseline(const yoga::Node* node) {
   }
 
   yoga::Node* baselineChild = nullptr;
-  const size_t childCount = node->getChildCount();
-  for (size_t i = 0; i < childCount; i++) {
-    auto child = node->getChild(i);
+  for (auto child : node->getLayoutChildren()) {
     if (child->getLineIndex() > 0) {
       break;
     }
@@ -67,9 +65,7 @@ bool isBaselineLayout(const yoga::Node* node) {
   if (node->style().alignItems() == Align::Baseline) {
     return true;
   }
-  const auto childCount = node->getChildCount();
-  for (size_t i = 0; i < childCount; i++) {
-    auto child = node->getChild(i);
+  for (auto child : node->getLayoutChildren()) {
     if (child->style().positionType() != PositionType::Absolute &&
         child->style().alignSelf() == Align::Baseline) {
       return true;