From ef4489781ea2afb1c230345930e32fc64cdeead1 Mon Sep 17 00:00:00 2001
From: Martin Yankov <m.i.yankov@gmail.com>
Date: Thu, 12 Jul 2018 17:27:59 +0300
Subject: [PATCH] add horizontal stack examples to app

---
 .../grid-3x3-nested-grid-fragment.xml         |   4 +-
 .../grid-3x3-nested-hstack-fragment.xml       | 101 ++++++++++
 .../grid-3x3-nested-vstack-fragment.xml       | 128 ++++++++++++
 .../gridlayout/fragments/hstack-fragment.xml  |  50 +++++
 .../hstack-nested-hstack-fragment.xml         | 182 ++++++++++++++++++
 .../hstack-nested-vstack-fragment.xml         | 182 ++++++++++++++++++
 ...stack-fragment.xml => vstack-fragment.xml} |   0
 .../vstack-nested-hstack-fragment.xml         | 182 ++++++++++++++++++
 ....xml => vstack-nested-vstack-fragment.xml} | 130 +++----------
 .../gridlayout-3x3-nested-hstack-page.xml     |  10 +
 .../gridlayout-3x3-nested-vstack-page.xml     |  10 +
 .../app/gridlayout/gridlayout-page.xml        |  14 +-
 .../gridlayout/hstack-nested-hstack-page.xml  |  10 +
 .../gridlayout/hstack-nested-vstack-page.xml  |  10 +
 .../{stack-page.xml => hstack-page.xml}       |   2 +-
 .../gridlayout/vstack-nested-hstack-page.xml  |  10 +
 .../gridlayout/vstack-nested-vstack-page.xml  |  10 +
 ...-nested-stack-page.xml => vstack-page.xml} |   2 +-
 e2e/safe-area/package.json                    |   2 +-
 19 files changed, 923 insertions(+), 116 deletions(-)
 create mode 100644 e2e/safe-area/app/gridlayout/fragments/grid-3x3-nested-hstack-fragment.xml
 create mode 100644 e2e/safe-area/app/gridlayout/fragments/grid-3x3-nested-vstack-fragment.xml
 create mode 100644 e2e/safe-area/app/gridlayout/fragments/hstack-fragment.xml
 create mode 100644 e2e/safe-area/app/gridlayout/fragments/hstack-nested-hstack-fragment.xml
 create mode 100644 e2e/safe-area/app/gridlayout/fragments/hstack-nested-vstack-fragment.xml
 rename e2e/safe-area/app/gridlayout/fragments/{stack-fragment.xml => vstack-fragment.xml} (100%)
 create mode 100644 e2e/safe-area/app/gridlayout/fragments/vstack-nested-hstack-fragment.xml
 rename e2e/safe-area/app/gridlayout/fragments/{stack-nested-stack-fragment.xml => vstack-nested-vstack-fragment.xml} (58%)
 create mode 100644 e2e/safe-area/app/gridlayout/gridlayout-3x3-nested-hstack-page.xml
 create mode 100644 e2e/safe-area/app/gridlayout/gridlayout-3x3-nested-vstack-page.xml
 create mode 100644 e2e/safe-area/app/gridlayout/hstack-nested-hstack-page.xml
 create mode 100644 e2e/safe-area/app/gridlayout/hstack-nested-vstack-page.xml
 rename e2e/safe-area/app/gridlayout/{stack-page.xml => hstack-page.xml} (80%)
 create mode 100644 e2e/safe-area/app/gridlayout/vstack-nested-hstack-page.xml
 create mode 100644 e2e/safe-area/app/gridlayout/vstack-nested-vstack-page.xml
 rename e2e/safe-area/app/gridlayout/{stack-nested-stack-page.xml => vstack-page.xml} (74%)

diff --git a/e2e/safe-area/app/gridlayout/fragments/grid-3x3-nested-grid-fragment.xml b/e2e/safe-area/app/gridlayout/fragments/grid-3x3-nested-grid-fragment.xml
index 35fece8c9..d7f5198c2 100644
--- a/e2e/safe-area/app/gridlayout/fragments/grid-3x3-nested-grid-fragment.xml
+++ b/e2e/safe-area/app/gridlayout/fragments/grid-3x3-nested-grid-fragment.xml
@@ -2,7 +2,7 @@
     <GridLayout row="0" col="0" backgroundColor="SkyBlue">
         <Label text="overflowing text, overflowing text"></Label>
     </GridLayout>
-    <GridLayout row="0" col="1" backgroundColor="Azure">
+    <GridLayout row="0" col="1" backgroundColor="Indigo">
         <Label text="overflowing text, overflowing text"></Label>
     </GridLayout>
     <GridLayout row="0" col="2" backgroundColor="Crimson">
@@ -23,7 +23,7 @@
     <GridLayout row="2" col="1" backgroundColor="Khaki">
         <Label text="overflowing text, overflowing text"></Label>
     </GridLayout>
-    <GridLayout row="2" col="2" backgroundColor="AliceBlue">
+    <GridLayout row="2" col="2" backgroundColor="IndianRed">
         <Label text="overflowing text, overflowing text"></Label>
     </GridLayout>
 </GridLayout>
diff --git a/e2e/safe-area/app/gridlayout/fragments/grid-3x3-nested-hstack-fragment.xml b/e2e/safe-area/app/gridlayout/fragments/grid-3x3-nested-hstack-fragment.xml
new file mode 100644
index 000000000..338ff9e4c
--- /dev/null
+++ b/e2e/safe-area/app/gridlayout/fragments/grid-3x3-nested-hstack-fragment.xml
@@ -0,0 +1,101 @@
+<GridLayout rows="*, *, *" columns="*, *, *" backgroundColor="CadetBlue">
+    <StackLayout row="0" col="0" orientation="horizontal" backgroundColor="SkyBlue">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout row="0" col="1" orientation="horizontal" backgroundColor="Indigo">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout row="0" col="2" orientation="horizontal" backgroundColor="Crimson">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout row="1" col="0" orientation="horizontal" backgroundColor="Chocolate">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout row="1" col="1" orientation="horizontal" backgroundColor="Cornsilk">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout row="1" col="2" orientation="horizontal" backgroundColor="BurlyWood">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout row="2" col="0" orientation="horizontal" backgroundColor="GoldenRod">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout row="2" col="1" orientation="horizontal" backgroundColor="Khaki">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout row="2" col="2" orientation="horizontal" backgroundColor="IndianRed">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+</GridLayout>
diff --git a/e2e/safe-area/app/gridlayout/fragments/grid-3x3-nested-vstack-fragment.xml b/e2e/safe-area/app/gridlayout/fragments/grid-3x3-nested-vstack-fragment.xml
new file mode 100644
index 000000000..9769d3d66
--- /dev/null
+++ b/e2e/safe-area/app/gridlayout/fragments/grid-3x3-nested-vstack-fragment.xml
@@ -0,0 +1,128 @@
+<GridLayout rows="*, *, *" columns="*, *, *" backgroundColor="CadetBlue">
+    <StackLayout row="0" col="0" backgroundColor="SkyBlue">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout row="0" col="1" backgroundColor="Indigo">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout row="0" col="2" backgroundColor="Crimson">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout row="1" col="0" backgroundColor="Chocolate">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout row="1" col="1" backgroundColor="Cornsilk">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout row="1" col="2" backgroundColor="BurlyWood">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout row="2" col="0" backgroundColor="GoldenRod">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout row="2" col="1" backgroundColor="Khaki">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout row="2" col="2" backgroundColor="IndianRed">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+</GridLayout>
diff --git a/e2e/safe-area/app/gridlayout/fragments/hstack-fragment.xml b/e2e/safe-area/app/gridlayout/fragments/hstack-fragment.xml
new file mode 100644
index 000000000..01c994567
--- /dev/null
+++ b/e2e/safe-area/app/gridlayout/fragments/hstack-fragment.xml
@@ -0,0 +1,50 @@
+<StackLayout orientation="horizontal" backgroundColor="Crimson">
+    <Label text="123"></Label>
+    <Label text="456"></Label>
+    <Label text="789"></Label>
+    <Label text="123"></Label>
+    <Label text="456"></Label>
+    <Label text="789"></Label>
+    <Label text="123"></Label>
+    <Label text="456"></Label>
+    <Label text="789"></Label>
+    <Label text="123"></Label>
+    <Label text="456"></Label>
+    <Label text="789"></Label>
+    <Label text="123"></Label>
+    <Label text="456"></Label>
+    <Label text="789"></Label>
+    <Label text="123"></Label>
+    <Label text="456"></Label>
+    <Label text="789"></Label>
+    <Label text="123"></Label>
+    <Label text="456"></Label>
+    <Label text="789"></Label>
+    <Label text="123"></Label>
+    <Label text="456"></Label>
+    <Label text="789"></Label>
+    <Label text="123"></Label>
+    <Label text="456"></Label>
+    <Label text="789"></Label>
+    <Label text="123"></Label>
+    <Label text="456"></Label>
+    <Label text="789"></Label>
+    <Label text="123"></Label>
+    <Label text="456"></Label>
+    <Label text="789"></Label>
+    <Label text="123"></Label>
+    <Label text="456"></Label>
+    <Label text="789"></Label>
+    <Label text="123"></Label>
+    <Label text="456"></Label>
+    <Label text="789"></Label>
+    <Label text="123"></Label>
+    <Label text="456"></Label>
+    <Label text="789"></Label>
+    <Label text="123"></Label>
+    <Label text="456"></Label>
+    <Label text="789"></Label>
+    <Label text="123"></Label>
+    <Label text="456"></Label>
+    <Label text="789"></Label>
+</StackLayout>
diff --git a/e2e/safe-area/app/gridlayout/fragments/hstack-nested-hstack-fragment.xml b/e2e/safe-area/app/gridlayout/fragments/hstack-nested-hstack-fragment.xml
new file mode 100644
index 000000000..f3dd7c07f
--- /dev/null
+++ b/e2e/safe-area/app/gridlayout/fragments/hstack-nested-hstack-fragment.xml
@@ -0,0 +1,182 @@
+<StackLayout orientation="horizontal" backgroundColor="Crimson">
+    <StackLayout orientation="horizontal" backgroundColor="GoldenRod">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="LemonChiffon">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Crimson">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Chocolate">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Cornsilk">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="BurlyWood">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Khaki">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="LightBlue">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="GoldenRod">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Indigo">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Crimson">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Chocolate">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="GoldenRod">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="LemonChiffon">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Crimson">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Chocolate">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Cornsilk">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="BurlyWood">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Khaki">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="LightBlue">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="GoldenRod">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Indigo">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Crimson">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Chocolate">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="GoldenRod">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="LemonChiffon">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Crimson">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Chocolate">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Cornsilk">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="BurlyWood">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Khaki">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="LightBlue">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="GoldenRod">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Indigo">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Crimson">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Chocolate">
+        <Label text="123"></Label>
+        <Label text="456"></Label>
+        <Label text="789"></Label>
+    </StackLayout>
+</StackLayout>
diff --git a/e2e/safe-area/app/gridlayout/fragments/hstack-nested-vstack-fragment.xml b/e2e/safe-area/app/gridlayout/fragments/hstack-nested-vstack-fragment.xml
new file mode 100644
index 000000000..062867c31
--- /dev/null
+++ b/e2e/safe-area/app/gridlayout/fragments/hstack-nested-vstack-fragment.xml
@@ -0,0 +1,182 @@
+<StackLayout orientation="horizontal" backgroundColor="Crimson">
+    <StackLayout backgroundColor="GoldenRod">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="LemonChiffon">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="Crimson">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="Chocolate">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="Cornsilk">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="BurlyWood">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="Khaki">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="LightBlue">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="GoldenRod">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="Indigo">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="Crimson">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="Chocolate">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="GoldenRod">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="LemonChiffon">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="Crimson">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="Chocolate">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="Cornsilk">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="BurlyWood">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="Khaki">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="LightBlue">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="GoldenRod">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="Indigo">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="Crimson">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="Chocolate">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="GoldenRod">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="LemonChiffon">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="Crimson">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="Chocolate">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="Cornsilk">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="BurlyWood">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="Khaki">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="LightBlue">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="GoldenRod">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="Indigo">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="Crimson">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="Chocolate">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+</StackLayout>
diff --git a/e2e/safe-area/app/gridlayout/fragments/stack-fragment.xml b/e2e/safe-area/app/gridlayout/fragments/vstack-fragment.xml
similarity index 100%
rename from e2e/safe-area/app/gridlayout/fragments/stack-fragment.xml
rename to e2e/safe-area/app/gridlayout/fragments/vstack-fragment.xml
diff --git a/e2e/safe-area/app/gridlayout/fragments/vstack-nested-hstack-fragment.xml b/e2e/safe-area/app/gridlayout/fragments/vstack-nested-hstack-fragment.xml
new file mode 100644
index 000000000..b236ecba1
--- /dev/null
+++ b/e2e/safe-area/app/gridlayout/fragments/vstack-nested-hstack-fragment.xml
@@ -0,0 +1,182 @@
+<StackLayout backgroundColor="Crimson">
+    <StackLayout orientation="horizontal" backgroundColor="GoldenRod">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="LemonChiffon">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Crimson">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Chocolate">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Cornsilk">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="BurlyWood">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Khaki">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="LightBlue">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="GoldenRod">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Indigo">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Crimson">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Chocolate">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="GoldenRod">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="LemonChiffon">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Crimson">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Chocolate">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Cornsilk">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="BurlyWood">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Khaki">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="LightBlue">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="GoldenRod">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Indigo">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Crimson">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Chocolate">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="GoldenRod">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="LemonChiffon">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Crimson">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Chocolate">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Cornsilk">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="BurlyWood">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Khaki">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="LightBlue">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="GoldenRod">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Indigo">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Crimson">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+    <StackLayout orientation="horizontal" backgroundColor="Chocolate">
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text"></Label>
+    </StackLayout>
+</StackLayout>
diff --git a/e2e/safe-area/app/gridlayout/fragments/stack-nested-stack-fragment.xml b/e2e/safe-area/app/gridlayout/fragments/vstack-nested-vstack-fragment.xml
similarity index 58%
rename from e2e/safe-area/app/gridlayout/fragments/stack-nested-stack-fragment.xml
rename to e2e/safe-area/app/gridlayout/fragments/vstack-nested-vstack-fragment.xml
index c0a153a90..bc8abdeed 100644
--- a/e2e/safe-area/app/gridlayout/fragments/stack-nested-stack-fragment.xml
+++ b/e2e/safe-area/app/gridlayout/fragments/vstack-nested-vstack-fragment.xml
@@ -1,146 +1,62 @@
 <StackLayout backgroundColor="Crimson">
     <StackLayout backgroundColor="GoldenRod">
         <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
     </StackLayout>
-    <StackLayout backgroundColor="Azure">
+    <StackLayout backgroundColor="LemonChiffon">
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
         <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
     </StackLayout>
     <StackLayout backgroundColor="Crimson">
         <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
     </StackLayout>
     <StackLayout backgroundColor="Chocolate">
         <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
     </StackLayout>
     <StackLayout backgroundColor="Cornsilk">
         <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
     </StackLayout>
     <StackLayout backgroundColor="BurlyWood">
         <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
     </StackLayout>
     <StackLayout backgroundColor="Khaki">
         <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
     </StackLayout>
-    <StackLayout backgroundColor="AliceBlue">
+    <StackLayout backgroundColor="LightBlue">
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
         <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
     </StackLayout>
     <StackLayout backgroundColor="GoldenRod">
         <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
     </StackLayout>
-    <StackLayout backgroundColor="Azure">
+    <StackLayout backgroundColor="Indigo">
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
+        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
         <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
     </StackLayout>
     <StackLayout backgroundColor="Crimson">
         <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="Chocolate">
         <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="Cornsilk">
-        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="BurlyWood">
-        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="Khaki">
-        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="AliceBlue">
-        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="GoldenRod">
-        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="Azure">
-        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="Crimson">
         <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
     </StackLayout>
     <StackLayout backgroundColor="Chocolate">
         <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="Cornsilk">
         <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="BurlyWood">
-        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="Khaki">
-        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="AliceBlue">
-        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="GoldenRod">
-        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="Azure">
-        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="Crimson">
-        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="Chocolate">
-        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="Cornsilk">
-        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="BurlyWood">
-        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="Khaki">
-        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="AliceBlue">
-        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="GoldenRod">
-        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="Azure">
-        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="Crimson">
-        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="Chocolate">
-        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="Cornsilk">
-        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="BurlyWood">
-        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="Khaki">
-        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="AliceBlue">
-        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="GoldenRod">
-        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="Azure">
-        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="Crimson">
-        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="Chocolate">
-        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="Cornsilk">
-        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="BurlyWood">
-        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="Khaki">
-        <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
-    </StackLayout>
-    <StackLayout backgroundColor="AliceBlue">
         <Label text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
     </StackLayout>
 </StackLayout>
diff --git a/e2e/safe-area/app/gridlayout/gridlayout-3x3-nested-hstack-page.xml b/e2e/safe-area/app/gridlayout/gridlayout-3x3-nested-hstack-page.xml
new file mode 100644
index 000000000..f97322d22
--- /dev/null
+++ b/e2e/safe-area/app/gridlayout/gridlayout-3x3-nested-hstack-page.xml
@@ -0,0 +1,10 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="gridlayout/fragments">
+    
+    <ActionBar class="action-bar">
+        <Label class="action-bar-title" text="Home"></Label>
+    </ActionBar>
+
+    <fragments:grid-3x3-nested-hstack-fragment></fragments:grid-3x3-nested-hstack-fragment>
+</Page>
diff --git a/e2e/safe-area/app/gridlayout/gridlayout-3x3-nested-vstack-page.xml b/e2e/safe-area/app/gridlayout/gridlayout-3x3-nested-vstack-page.xml
new file mode 100644
index 000000000..884cbe4d4
--- /dev/null
+++ b/e2e/safe-area/app/gridlayout/gridlayout-3x3-nested-vstack-page.xml
@@ -0,0 +1,10 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="gridlayout/fragments">
+    
+    <ActionBar class="action-bar">
+        <Label class="action-bar-title" text="Home"></Label>
+    </ActionBar>
+
+    <fragments:grid-3x3-nested-vstack-fragment></fragments:grid-3x3-nested-vstack-fragment>
+</Page>
diff --git a/e2e/safe-area/app/gridlayout/gridlayout-page.xml b/e2e/safe-area/app/gridlayout/gridlayout-page.xml
index 77ca073c2..cbee1b0f8 100644
--- a/e2e/safe-area/app/gridlayout/gridlayout-page.xml
+++ b/e2e/safe-area/app/gridlayout/gridlayout-page.xml
@@ -5,9 +5,15 @@
     </ActionBar>
 
     <StackLayout>
-        <Button text="GridLayout 3x3" tap="onNavigate" route="gridlayout/gridlayout-3x3-page" />
-        <Button text="GridLayout Nested 3x3" tap="onNavigate" route="gridlayout/gridlayout-3x3-nested-grid-page" />
-        <Button text="Stack" tap="onNavigate" route="gridlayout/stack-page" />
-        <Button text="Stack Nested Stack" tap="onNavigate" route="gridlayout/stack-nested-stack-page" />
+        <Button text="Grid 3x3" tap="onNavigate" route="gridlayout/gridlayout-3x3-page" />
+        <Button text="Grid 3x3 Nested Grid" tap="onNavigate" route="gridlayout/gridlayout-3x3-nested-grid-page" />
+        <Button text="Grid 3x3 Nested VStack" tap="onNavigate" route="gridlayout/gridlayout-3x3-nested-vstack-page" />
+        <Button text="Grid 3x3 Nested HStack" tap="onNavigate" route="gridlayout/gridlayout-3x3-nested-hstack-page" />
+        <Button text="VStack" tap="onNavigate" route="gridlayout/vstack-page" />
+        <Button text="VStack Nested VStack" tap="onNavigate" route="gridlayout/vstack-nested-vstack-page" />
+        <Button text="VStack Nested HStack" tap="onNavigate" route="gridlayout/vstack-nested-hstack-page" />
+        <Button text="HStack" tap="onNavigate" route="gridlayout/hstack-page" />
+        <Button text="HStack Nested VStack" tap="onNavigate" route="gridlayout/hstack-nested-vstack-page" />
+        <Button text="HStack Nested HStack" tap="onNavigate" route="gridlayout/hstack-nested-hstack-page" />
     </StackLayout>
 </Page>
diff --git a/e2e/safe-area/app/gridlayout/hstack-nested-hstack-page.xml b/e2e/safe-area/app/gridlayout/hstack-nested-hstack-page.xml
new file mode 100644
index 000000000..e86a4d2f1
--- /dev/null
+++ b/e2e/safe-area/app/gridlayout/hstack-nested-hstack-page.xml
@@ -0,0 +1,10 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="gridlayout/fragments">
+    
+    <ActionBar class="action-bar">
+        <Label class="action-bar-title" text="Home"></Label>
+    </ActionBar>
+
+    <fragments:hstack-nested-hstack-fragment></fragments:hstack-nested-hstack-fragment>
+</Page>
diff --git a/e2e/safe-area/app/gridlayout/hstack-nested-vstack-page.xml b/e2e/safe-area/app/gridlayout/hstack-nested-vstack-page.xml
new file mode 100644
index 000000000..dc617dca1
--- /dev/null
+++ b/e2e/safe-area/app/gridlayout/hstack-nested-vstack-page.xml
@@ -0,0 +1,10 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="gridlayout/fragments">
+    
+    <ActionBar class="action-bar">
+        <Label class="action-bar-title" text="Home"></Label>
+    </ActionBar>
+
+    <fragments:hstack-nested-vstack-fragment></fragments:hstack-nested-vstack-fragment>
+</Page>
diff --git a/e2e/safe-area/app/gridlayout/stack-page.xml b/e2e/safe-area/app/gridlayout/hstack-page.xml
similarity index 80%
rename from e2e/safe-area/app/gridlayout/stack-page.xml
rename to e2e/safe-area/app/gridlayout/hstack-page.xml
index 938f5a94d..0ee3e1319 100644
--- a/e2e/safe-area/app/gridlayout/stack-page.xml
+++ b/e2e/safe-area/app/gridlayout/hstack-page.xml
@@ -6,5 +6,5 @@
         <Label class="action-bar-title" text="Home"></Label>
     </ActionBar>
 
-    <fragments:stack-fragment></fragments:stack-fragment>
+    <fragments:hstack-fragment></fragments:hstack-fragment>
 </Page>
diff --git a/e2e/safe-area/app/gridlayout/vstack-nested-hstack-page.xml b/e2e/safe-area/app/gridlayout/vstack-nested-hstack-page.xml
new file mode 100644
index 000000000..8799f213e
--- /dev/null
+++ b/e2e/safe-area/app/gridlayout/vstack-nested-hstack-page.xml
@@ -0,0 +1,10 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="gridlayout/fragments">
+    
+    <ActionBar class="action-bar">
+        <Label class="action-bar-title" text="Home"></Label>
+    </ActionBar>
+
+    <fragments:vstack-nested-hstack-fragment></fragments:vstack-nested-hstack-fragment>
+</Page>
diff --git a/e2e/safe-area/app/gridlayout/vstack-nested-vstack-page.xml b/e2e/safe-area/app/gridlayout/vstack-nested-vstack-page.xml
new file mode 100644
index 000000000..2c6d7cde8
--- /dev/null
+++ b/e2e/safe-area/app/gridlayout/vstack-nested-vstack-page.xml
@@ -0,0 +1,10 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="gridlayout/fragments">
+    
+    <ActionBar class="action-bar">
+        <Label class="action-bar-title" text="Home"></Label>
+    </ActionBar>
+
+    <fragments:vstack-nested-vstack-fragment></fragments:vstack-nested-vstack-fragment>
+</Page>
diff --git a/e2e/safe-area/app/gridlayout/stack-nested-stack-page.xml b/e2e/safe-area/app/gridlayout/vstack-page.xml
similarity index 74%
rename from e2e/safe-area/app/gridlayout/stack-nested-stack-page.xml
rename to e2e/safe-area/app/gridlayout/vstack-page.xml
index bd2390abb..73d980fd8 100644
--- a/e2e/safe-area/app/gridlayout/stack-nested-stack-page.xml
+++ b/e2e/safe-area/app/gridlayout/vstack-page.xml
@@ -6,5 +6,5 @@
         <Label class="action-bar-title" text="Home"></Label>
     </ActionBar>
 
-    <fragments:stack-nested-stack-fragment></fragments:stack-nested-stack-fragment>
+    <fragments:vstack-fragment></fragments:vstack-fragment>
 </Page>
diff --git a/e2e/safe-area/package.json b/e2e/safe-area/package.json
index 888d0dfe6..90576ea09 100644
--- a/e2e/safe-area/package.json
+++ b/e2e/safe-area/package.json
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "nativescript-theme-core": "~1.0.4",
-    "tns-core-modules": "file:../../tns-core-modules"
+    "tns-core-modules": "*"
   },
   "devDependencies": {
     "@types/chai": "~4.1.3",