Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fabric: Basic tests for zIndex and flattening

Browse Source 
Summary:
Finally, a test for zIndex. Yay!

Changelog: [Internal] Fabric-specific internal change.

Reviewed By: sammy-SC

Differential Revision: D25576920

fbshipit-source-id: daf8971f7d751e3316b89aae672fee4d25fe5b3e
This commit is contained in:
Valentin Shergin
2020-12-16 10:57:37 -08:00
committed by Facebook GitHub Bot
parent 9a720ad47f
commit 98f1825f56
1 changed files with 114 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ReactCommon/react/renderer/mounting/tests/StackingContextTest.cpp
+114
View File
@@ -462,5 +462,119 @@ TEST_F(StackingContextTest, somePropsForceViewsToMaterialize2) {
});
}
TEST_F(StackingContextTest, zIndexAndFlattenedNodes) {
// ┌────────────── (Root) ──────────────┐ ┌────────── (Root) ───────────┐
// │ ┏━ A (tag: 2) ━━━━━━━━━━━━━━━━━━━┓ │ │ ┏━ BD (tag: 10) ━━━━━━━━━━┓ │
// │ ┃ ┃ │ │ ┃ #FormsView ┃ │
// │ ┃ ┃ │ │ ┃ #FormsStackingContext ┃ │
// │ ┃ ┃ │ │ ┃ ┃ │
// │ ┃ ┃ │ │ ┗━━━━━━━━━━━━━━━━━━━━━━━━━┛ │
// │ ┃ ┏━ AA (tag: 3) ━━━━━━━━━━━━━━┓ ┃ │ │ ┏━ BC (tag: 9) ━━━━━━━━━━━┓ │
// │ ┃ ┃ position: relative; ┃ ┃ │ │ ┃ #FormsView ┃ │
// │ ┃ ┃ zIndex: 9001; ┃ ┃ │ │ ┃ #FormsStackingContext ┃ │
// │ ┃ ┃ ┃ ┃ │ │ ┃ ┃ │
// │ ┃ ┃ ┃ ┃ │ │ ┗━━━━━━━━━━━━━━━━━━━━━━━━━┛ │
// │ ┃ ┃ ┃ ┃ │ │ ┏━ BBB (tag: 8) ━━━━━━━━━━┓ │
// │ ┃ ┃ ┃ ┃ │ │ ┃ #FormsView ┃ │
// │ ┃ ┃ ┃ ┃ │ │ ┃ #FormsStackingContext ┃ │
// │ ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ ┃ │ │ ┃ ┃ │
// │ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ │ │ ┗━━━━━━━━━━━━━━━━━━━━━━━━━┛ │
// │ ┏━ B (tag: 4) ━━━━━━━━━━━━━━━━━━━┓ │ │ ┏━ BBA (tag: 7) ━━━━━━━━━━┓ │
// │ ┃ ┃ │ │ ┃ #FormsView ┃ │
// │ ┃ ┃ │ │ ┃ #FormsStackingContext ┃ │
// │ ┃ ┃ │ │ ┃ ┃ │
// │ ┃ ┃ │ │ ┗━━━━━━━━━━━━━━━━━━━━━━━━━┛ │
// │ ┃ ┏━ BA (tag: 5) ━━━━━━━━━━━━━━┓ ┃ │ │ ┏━ BA (tag: 5) ━━━━━━━━━━━┓ │
// │ ┃ ┃ position: relative; ┃ ┃ │ │ ┃ #FormsView ┃ │
// │ ┃ ┃ zIndex: 9000; ┃ ┃ │ │ ┃ #FormsStackingContext ┃ │
// │ ┃ ┃ ┃ ┃ │ │ ┃ ┃ │
// │ ┃ ┃ ┃ ┃ │ │ ┗━━━━━━━━━━━━━━━━━━━━━━━━━┛ │
// │ ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ ┃ │ │ ┏━ AA (tag: 3) ━━━━━━━━━━━┓ │
// │ ┃ ┏━ BB (tag: 6) ━━━━━━━━━━━━━━┓ ┃ │ │ ┃ #FormsView ┃ │
// │ ┃ ┃ ┃ ┃ │ │ ┃ #FormsStackingContext ┃ │
// │ ┃ ┃ ┃ ┃ │━━━▶│ ┃ ┃ │
// │ ┃ ┃ ┃ ┃ │ │ ┗━━━━━━━━━━━━━━━━━━━━━━━━━┛ │
// │ ┃ ┃ ┃ ┃ │ │ │
// │ ┃ ┃ ┏━ BBA (tag: 7) ━━━━━━━━━┓ ┃ ┃ │ │ │
// │ ┃ ┃ ┃ position: relative; ┃ ┃ ┃ │ │ │
// │ ┃ ┃ ┃ zIndex: 8999; ┃ ┃ ┃ │ │ │
// │ ┃ ┃ ┃ ┃ ┃ ┃ │ │ │
// │ ┃ ┃ ┃ ┃ ┃ ┃ │ │ │
// │ ┃ ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━┛ ┃ ┃ │ │ │
// │ ┃ ┃ ┏━ BBB (tag: 8) ━━━━━━━━━┓ ┃ ┃ │ │ │
// │ ┃ ┃ ┃ position: relative; ┃ ┃ ┃ │ │ │
// │ ┃ ┃ ┃ zIndex: 8998; ┃ ┃ ┃ │ │ │
// │ ┃ ┃ ┃ ┃ ┃ ┃ │ │ │
// │ ┃ ┃ ┃ ┃ ┃ ┃ │ │ │
// │ ┃ ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━┛ ┃ ┃ │ │ │
// │ ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ ┃ │ │ │
// │ ┃ ┏━ BC (tag: 9) ━━━━━━━━━━━━━━┓ ┃ │ │ │
// │ ┃ ┃ position: relative; ┃ ┃ │ │ │
// │ ┃ ┃ zIndex: 8997; ┃ ┃ │ │ │
// │ ┃ ┃ ┃ ┃ │ │ │
// │ ┃ ┃ ┃ ┃ │ │ │
// │ ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ ┃ │ │ │
// │ ┃ ┏━ BD (tag: 10) ━━━━━━━━━━━━━┓ ┃ │ │ │
// │ ┃ ┃ position: relative; ┃ ┃ │ │ │
// │ ┃ ┃ zIndex: 8996; ┃ ┃ │ │ │
// │ ┃ ┃ ┃ ┃ │ │ │
// │ ┃ ┃ ┃ ┃ │ │ │
// │ ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ ┃ │ │ │
// │ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ │ │ │
// └────────────────────────────────────┘ └─────────────────────────────┘
mutateViewShadowNodeProps_(nodeAA_, [](ViewProps &props) {
auto &yogaStyle = props.yogaStyle;
yogaStyle.positionType() = YGPositionTypeRelative;
props.zIndex = 9001;
});
mutateViewShadowNodeProps_(nodeBA_, [](ViewProps &props) {
auto &yogaStyle = props.yogaStyle;
yogaStyle.positionType() = YGPositionTypeRelative;
props.zIndex = 9000;
});
mutateViewShadowNodeProps_(nodeBBA_, [](ViewProps &props) {
auto &yogaStyle = props.yogaStyle;
yogaStyle.positionType() = YGPositionTypeRelative;
props.zIndex = 8999;
});
mutateViewShadowNodeProps_(nodeBBB_, [](ViewProps &props) {
auto &yogaStyle = props.yogaStyle;
yogaStyle.positionType() = YGPositionTypeRelative;
props.zIndex = 8998;
});
mutateViewShadowNodeProps_(nodeBC_, [](ViewProps &props) {
auto &yogaStyle = props.yogaStyle;
yogaStyle.positionType() = YGPositionTypeRelative;
props.zIndex = 8997;
});
mutateViewShadowNodeProps_(nodeBD_, [](ViewProps &props) {
auto &yogaStyle = props.yogaStyle;
yogaStyle.positionType() = YGPositionTypeRelative;
props.zIndex = 8996;
});
testViewTree([](StubViewTree const &viewTree) {
// 7 views in total.
EXPECT_EQ(viewTree.size(), 7);
// The root view has all 6 subviews.
EXPECT_EQ(viewTree.getRootStubView().children.size(), 6);
// The root view subviews are [10, 9, 8, 7, 5, 3].
EXPECT_EQ(viewTree.getRootStubView().children.at(0)->tag, 10);
EXPECT_EQ(viewTree.getRootStubView().children.at(1)->tag, 9);
EXPECT_EQ(viewTree.getRootStubView().children.at(2)->tag, 8);
EXPECT_EQ(viewTree.getRootStubView().children.at(3)->tag, 7);
EXPECT_EQ(viewTree.getRootStubView().children.at(4)->tag, 5);
EXPECT_EQ(viewTree.getRootStubView().children.at(5)->tag, 3);
});
}
} // namespace react
} // namespace facebook