import { GridLayout } from "tns-core-modules/ui/layouts/grid-layout";
import * as TKUnit from "../../TKUnit";
import * as view from "tns-core-modules/ui/core/view";
import * as testModule from "../../ui-test";
import * as platform from "tns-core-modules/platform";
import { ios as iosUtils } from "tns-core-modules/utils/utils";
import * as helper from "../helper";
import { parse } from "tns-core-modules/ui/builder";
import {
    dipToDp, left, top, right, bottom, height, width,
    equal, closeEnough, lessOrCloseEnough, check,
    isLeftAlignedWith, isRightAlignedWith, isTopAlignedWith, isBottomAlignedWith,
    isLeftWith, isAboveWith, isRightWith, isBelowWith
} from "./layout-tests-helper";

export class SafeAreaTests extends testModule.UITest<any> {

    public create(): any {
        return null;
    }

    private executeSnippet<U extends { root: view.View }>(ui: U, setup: (ui: U) => void, test: (ui: U) => void, pageOptions?: helper.PageOptions): void {
        function waitUntilTestElementLayoutIsValid(view: view.View, timeoutSec?: number): void {
            TKUnit.waitUntilReady(() => {
                return view.isLayoutValid;
            }, timeoutSec || 1);
        }

        setup(ui);
        helper.buildUIAndRunTest(ui.root, () => {
            waitUntilTestElementLayoutIsValid(ui.root);
            test(ui);
        }, pageOptions);
    };

    private noop() {
        // no operation
    };

    // Common
    private getViews(template: string) {
        let root = parse(template);
        return {
            root,
            child0: root.getViewById("child0") as view.View,
            child1: root.getViewById("child1") as view.View,
            child2: root.getViewById("child2") as view.View
        };
    };

    private layout_insets_top_action_bar_test(layout: view.View) {
        const app = iosUtils.getter(UIApplication, UIApplication.sharedApplication);
        const statusBarHeight = round(dipToDp(app.statusBarFrame.size.height));
        const actionBarHeight = round(dipToDp(layout.page.actionBar.nativeViewProtected.frame.size.height));
        const topInset = statusBarHeight + actionBarHeight;

        const insets = layout.getSafeAreaInsets();
        equal(insets.top, topInset, `${layout}.topInset - actual:${insets.top}; expected: ${topInset}`)
    }

    private layout_insets_top_action_bar_hidden_test(layout: view.View) {
        const app = iosUtils.getter(UIApplication, UIApplication.sharedApplication);
        const statusBarHeight = round(dipToDp(app.statusBarFrame.size.height));
        const topInset = statusBarHeight;

        const insets = layout.getSafeAreaInsets();
        equal(insets.top, topInset, `${layout}.topInset - actual:${insets.top}; expected: ${topInset}`)
    }

    private layout_insets_top_action_bar_flat_test(layout: view.View) {
        const insets = layout.getSafeAreaInsets();
        equal(insets.top, 0, `${layout}.topInset - actual:${insets.top}; expected: ${0}`)
    }

    private layout_in_full_screen_test(layout: view.View, pageOptions?: helper.PageOptions) {
        let expectedTop = 0;
        if (pageOptions && (pageOptions.actionBarFlat)) {
            const app = iosUtils.getter(UIApplication, UIApplication.sharedApplication);
            const statusBarHeight = round(dipToDp(app.statusBarFrame.size.height));
            const actionBarHeight = round(dipToDp(layout.page.actionBar.nativeViewProtected.frame.size.height));
            
            expectedTop = statusBarHeight + actionBarHeight;
        }

        const l = left(layout);
        const t = top(layout);
        const r = right(layout);
        const b = bottom(layout);
        equal(l, 0, `${layout}.left - actual:${l}; expected: ${0}`);
        equal(t, expectedTop, `${layout}.top - actual:${t}; expected: ${expectedTop}`);
        equal(r, platform.screen.mainScreen.widthPixels, `${layout}.right - actual:${r}; expected: ${platform.screen.mainScreen.widthPixels}`);
        equal(b, platform.screen.mainScreen.heightPixels, `${layout}.bottom - actual:${b}; expected: ${platform.screen.mainScreen.heightPixels}`);
    }

    // Absolute
    private absolute_in_full_screen(pageOptions?: helper.PageOptions) {
        const snippet = `
        <AbsoluteLayout id="abs" backgroundColor="Crimson"></AbsoluteLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root }) => { 
                this.layout_in_full_screen_test(root, pageOptions);
            },
            pageOptions
        );
    }

    public test_absolute_in_full_screen_action_bar() {
        this.absolute_in_full_screen({ actionBar: true });
    }

    public test_absolute_in_full_screen_action_bar_hidden() {
        this.absolute_in_full_screen({ actionBarHidden: true });
    }

    public test_absolute_in_full_screen_action_bar_flat() {
        this.absolute_in_full_screen({ actionBarFlat: true });
    }

    public test_absolute_in_full_screen_tab_bar() {
        this.absolute_in_full_screen({ tabBar: true });
    }

    public test_absolute_in_full_screen_tab_bar_action_bar() {
        this.absolute_in_full_screen({ actionBar: true, tabBar: true });
    }

    public test_absolute_insets_top_action_bar() {
        const snippet = `
        <AbsoluteLayout id="abs" backgroundColor="Crimson"></AbsoluteLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root }) => { 
                this.layout_insets_top_action_bar_test(root);
            },
            { actionBar: true }
        );
    }

    public test_absolute_insets_top_action_bar_hidden() {
        const snippet = `
        <AbsoluteLayout id="abs" backgroundColor="Crimson"></AbsoluteLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root }) => { 
                this.layout_insets_top_action_bar_hidden_test(root);
            },
            { actionBarHidden: true }
        );
    }

    public test_absolute_insets_top_action_bar_flat() {
        const snippet = `
        <AbsoluteLayout id="abs" backgroundColor="Crimson"></AbsoluteLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root }) => { 
                this.layout_insets_top_action_bar_flat_test(root);
            },
            { actionBarFlat: true }
        );
    }

    public test_absolute_insets_top_tab_bar_flat() {
        const snippet = `
        <AbsoluteLayout id="abs" backgroundColor="Crimson"></AbsoluteLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root }) => { 
                this.layout_insets_top_action_bar_hidden_test(root);
            },
            { tabBar: true }
        );
    }

    public test_absolute_insets_top_tab_bar_action_bar_flat() {
        const snippet = `
        <AbsoluteLayout id="abs" backgroundColor="Crimson"></AbsoluteLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root }) => { 
                this.layout_insets_top_action_bar_test(root);
            },
            { actionBar: true, tabBar: true }
        );
    }

    private absolute_children_components_in_safe_area(pageOptions?: helper.PageOptions) {
        const snippet = `
        <AbsoluteLayout id="abs">
            <Button id="child0" text="Left: 0, Top: 0" left="0" top="0" backgroundColor="red" />
            <Button text="Left: 30, Top: 80" left="30" top="80" backgroundColor="green" />
            <Button text="Left: 150, Top: 25" left="150" top="25" backgroundColor="blue" />
            <Button text="Left: 70, Top: 150" left="70" top="150" backgroundColor="yellow" />
        </AbsoluteLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root, child0 }) => {
                const insets = root.getSafeAreaInsets();
                equal(left(child0), insets.left, `${child0}.left - actual: ${left(child0)} expected: ${insets.left}`);
                equal(top(child0), insets.top, `${child0}.top - actual: ${top(child0)} expected: ${insets.top}`);
            },
            pageOptions
        );
    }

    public test_absolute_children_components_in_safe_area_action_bar() {
        this.absolute_children_components_in_safe_area({ actionBar: true });
    }

    public test_absolute_children_components_in_safe_area_action_bar_hidden() {
        this.absolute_children_components_in_safe_area({ actionBarHidden: true });
    }

    public test_absolute_children_components_in_safe_area_tab_bar() {
        this.absolute_children_components_in_safe_area({ tabBar: true });
    }

    private absolute_nested_layouts_beyond_safe_area(pageOptions?: helper.PageOptions) {
        const snippet = `
        <AbsoluteLayout id="abs">
            <AbsoluteLayout id="child0" left="0" top="0" backgroundColor="red">
                <Label text="Left: 0, Top: 0" />
            </AbsoluteLayout>
            <AbsoluteLayout left="30" top="80" backgroundColor="green">
                <Label text="Left: 30, Top: 80" />
            </AbsoluteLayout>
            <AbsoluteLayout left="150" top="25" backgroundColor="blue">
                <Label text="Left: 150, Top: 25" />
            </AbsoluteLayout>
            <AbsoluteLayout left="70" top="150" backgroundColor="yellow">
                <Label text="Left: 70, Top: 150"  />
            </AbsoluteLayout>
        </AbsoluteLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root, child0 }) => {
                isLeftAlignedWith(root, child0);
                isTopAlignedWith(root, child0);
            },
            pageOptions
        );
    }

    public test_absolute_nested_layouts_beyond_safe_area_action_bar() {
        this.absolute_nested_layouts_beyond_safe_area({ actionBar: true });
    }

    public test_absolute_nested_layouts_beyond_safe_area_action_bar_hidden() {
        this.absolute_nested_layouts_beyond_safe_area({ actionBarHidden: true });
    }

    public test_absolute_nested_layouts_beyond_safe_area_tab_bar() {
        this.absolute_nested_layouts_beyond_safe_area({ tabBar: true });
    }

    // Dock
    private getDockViews(template: string) {
        let root = parse(template);
        return {
            root,
            childLeft: root.getViewById("childLeft") as view.View,
            childTop: root.getViewById("childTop") as view.View,
            childRight: root.getViewById("childRight") as view.View,
            childBottom: root.getViewById("childBottom") as view.View,
            childFill: root.getViewById("childFill") as view.View,
        };
    };

    private dock_in_full_screen(pageOptions?: helper.PageOptions) {
        const snippet = `
        <DockLayout id="dock" backgroundColor="Crimson"></DockLayout>
        `;

        this.executeSnippet(
            this.getDockViews(snippet),
            this.noop,
            ({ root }) => { 
                this.layout_in_full_screen_test(root, pageOptions);
            },
            pageOptions
        );
    }

    public test_dock_in_full_screen_action_bar() {
        this.dock_in_full_screen({ actionBar: true });
    }

    public test_dock_in_full_screen_action_bar_hidden() {
        this.dock_in_full_screen({ actionBarHidden: true });
    }

    public test_dock_in_full_screen_action_bar_flat() {
        this.dock_in_full_screen({ actionBarFlat: true });
    }

    public test_dock_in_full_screen_tab_bar() {
        this.dock_in_full_screen({ tabBar: true });
    }

    public test_dock_in_full_screen_tab_bar_action_bar() {
        this.dock_in_full_screen({ actionBar: true, tabBar: true });
    }

    public test_dock_insets_top_action_bar() {
        const snippet = `
        <DockLayout id="dock" backgroundColor="Crimson"></DockLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root }) => { 
                this.layout_insets_top_action_bar_test(root);
            },
            { actionBar: true }
        );
    }

    public test_dock_insets_top_action_bar_hidden() {
        const snippet = `
        <DockLayout id="dock" backgroundColor="Crimson"></DockLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root }) => { 
                this.layout_insets_top_action_bar_hidden_test(root);
            },
            { actionBarHidden: true }
        );
    }

    public test_dock_insets_top_action_bar_flat() {
        const snippet = `
        <DockLayout id="dock" backgroundColor="Crimson"></DockLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root }) => { 
                this.layout_insets_top_action_bar_flat_test(root);
            },
            { actionBarFlat: true }
        );
    }

    public test_dock_insets_top_tab_bar_flat() {
        const snippet = `
        <DockLayout id="dock" backgroundColor="Crimson"></DockLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root }) => { 
                this.layout_insets_top_action_bar_hidden_test(root);
            },
            { tabBar: true }
        );
    }

    public test_dock_insets_top_tab_bar_action_bar_flat() {
        const snippet = `
        <DockLayout id="dock" backgroundColor="Crimson"></DockLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root }) => { 
                this.layout_insets_top_action_bar_test(root);
            },
            { actionBar: true, tabBar: true }
        );
    }

    private dock_children_components_in_safe_area(pageOptions?: helper.PageOptions) {
        const snippet = `
        <DockLayout id="dock" stretchLastChild="true">
            <Label id="childLeft" dock="Left" text="left" backgroundColor="red" />
            <Label id="childTop" dock="Top" text="top" backgroundColor="green" />
            <Label id="childRight" dock="Right" text="right" backgroundColor="blue" />
            <Label id="childBottom" dock="Bottom" text="bottom" backgroundColor="yellow" />
            <Label id="childFill" text="fill"/>
        </DockLayout>
        `;

        this.executeSnippet(
            this.getDockViews(snippet),
            this.noop,
            ({ root, childLeft, childTop, childRight, childBottom, childFill }) => {
                const insets = root.getSafeAreaInsets();

                equal(left(childLeft), insets.left, `${childLeft}.left - actual: ${left(childLeft)} expected: ${insets.left}`);
                equal(top(childLeft), insets.top, `${childLeft}.top - actual: ${top(childLeft)} expected: ${insets.top}`);

                equal(top(childTop), insets.top, `${childTop}.top - actual: ${top(childTop)} expected: ${insets.top}`);
                equal(right(childTop), width(root) - insets.right, `${childTop}.right - actual: ${right(childTop)} expected: ${width(root) - insets.right}`);

                equal(right(childRight), width(root) - insets.right, `${childRight}.right - actual: ${right(childRight)} expected: ${width(root) - insets.right}`);
                equal(bottom(childRight), height(root) - insets.bottom, `${childRight}.bottom - actual: ${bottom(childRight)} expected: ${height(root) - insets.bottom}`);

                equal(bottom(childBottom), height(root) - insets.bottom, `${childBottom}.bottom - actual: ${bottom(childBottom)} expected: ${height(root) - insets.bottom}`);

                isLeftWith(childLeft, childFill, width(childLeft));
                isBelowWith(childTop, childFill, height(childTop));
                isRightWith(childFill, childRight, width(childRight));
                isAboveWith(childFill, childBottom, height(childBottom));
            },
            pageOptions
        );
    }

    public test_dock_children_components_in_safe_area_action_bar() {
        this.dock_children_components_in_safe_area({ actionBar: true });
    }

    public test_dock_children_components_in_safe_area_action_bar_hidden() {
        this.dock_children_components_in_safe_area({ actionBarHidden: true });
    }

    public test_dock_children_components_in_safe_area_tab_bar() {
        this.dock_children_components_in_safe_area({ tabBar: true });
    }

    private dock_nested_layouts_beyond_safe_area(pageOptions?: helper.PageOptions) {
        const snippet = `
        <DockLayout id="dock" stretchLastChild="true">
            <DockLayout id="childLeft" dock="Left" text="left" backgroundColor="red">
                <Label text="left"/>
            </DockLayout>
            <DockLayout id="childTop" dock="Top" text="top" backgroundColor="green">
                <Label text="top" />
            </DockLayout>
            <DockLayout id="childRight" dock="Right" text="right" backgroundColor="blue">
                <Label text="right" />
            </DockLayout>
            <DockLayout id="childBottom" dock="Bottom" text="bottom" backgroundColor="yellow">
                <Label text="bottom" />
            </DockLayout>
            <DockLayout id="childFill" text="fill">
                <Label text="fill" />
            </DockLayout>
        </DockLayout>
        `;

        this.executeSnippet(
            this.getDockViews(snippet),
            this.noop,
            ({ root, childLeft, childTop, childRight, childBottom, childFill }) => {
                isLeftAlignedWith(root, childLeft);
                isTopAlignedWith(root, childLeft);

                isTopAlignedWith(root, childTop);
                isRightAlignedWith(root, childTop);

                isRightAlignedWith(root, childRight);
                isBottomAlignedWith(root, childRight);

                isBottomAlignedWith(root, childRight);

                const sumOfNestedDockHeights = height(childTop) + height(childFill) + height(childBottom);
                equal(height(root), sumOfNestedDockHeights, `dock height<${height(root)}> sum of nested docks height <${sumOfNestedDockHeights}>`);

                const sumOfNestedDockWidths = width(childLeft) + width(childFill) + width(childRight)
                equal(width(root), sumOfNestedDockWidths, `dock width<${width(root)}> sum of nested docks width <${sumOfNestedDockWidths}>`);
            },
            pageOptions
        );
    }

    public test_dock_nested_layouts_beyond_safe_area_action_bar() {
        this.dock_nested_layouts_beyond_safe_area({ actionBar: true });
    }

    public test_dock_nested_layouts_beyond_safe_area_action_bar_hidden() {
        this.dock_nested_layouts_beyond_safe_area({ actionBarHidden: true });
    }

    public test_dock_nested_layouts_beyond_safe_area_tab_bar() {
        this.dock_nested_layouts_beyond_safe_area({ tabBar: true });
    }

    // Flexbox
    private flexbox_in_full_screen(pageOptions?: helper.PageOptions) {
        const snippet = `
        <FlexboxLayout id="flex" backgroundColor="Crimson"></FlexboxLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root }) => {
                this.layout_in_full_screen_test(root, pageOptions);
            },
            pageOptions
        );
    }

    public test_flexbox_in_full_screen_action_bar() {
        this.flexbox_in_full_screen({ actionBar: true });
    }

    public test_flexbox_in_full_screen_action_bar_hidden() {
        this.flexbox_in_full_screen({ actionBarHidden: true });
    }

    public test_flexbox_in_full_screen_action_bar_flat() {
        this.flexbox_in_full_screen({ actionBarFlat: true });
    }

    public test_flexbox_in_full_screen_tab_bar() {
        this.flexbox_in_full_screen({ tabBar: true });
    }

    public test_flexbox_in_full_screen_tab_bar_action_bar() {
        this.flexbox_in_full_screen({ actionBar: true, tabBar: true });
    }

    public test_flexbox_insets_top_action_bar() {
        const snippet = `
        <FlexboxLayout id="flex" backgroundColor="Crimson"></FlexboxLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root }) => { 
                this.layout_insets_top_action_bar_test(root);
            },
            { actionBar: true }
        );
    }

    public test_flexbox_insets_top_action_bar_hidden() {
        const snippet = `
        <FlexboxLayout id="flex" backgroundColor="Crimson"></FlexboxLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root }) => { 
                this.layout_insets_top_action_bar_hidden_test(root);
            },
            { actionBarHidden: true }
        );
    }

    public test_flexbox_insets_top_action_bar_flat() {
        const snippet = `
        <FlexboxLayout id="flex" backgroundColor="Crimson"></FlexboxLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root }) => { 
                this.layout_insets_top_action_bar_flat_test(root);
            },
            { actionBarFlat: true }
        );
    }

    public test_flexbox_insets_top_tab_bar_flat() {
        const snippet = `
        <FlexboxLayout id="flex" backgroundColor="Crimson"></FlexboxLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root }) => { 
                this.layout_insets_top_action_bar_hidden_test(root);
            },
            { tabBar: true }
        );
    }

    public test_flexbox_insets_top_tab_bar_action_bar_flat() {
        const snippet = `
        <FlexboxLayout id="flex" backgroundColor="Crimson"></FlexboxLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root }) => { 
                this.layout_insets_top_action_bar_test(root);
            },
            { actionBar: true, tabBar: true }
        );
    }

    private flex_column_children_components_in_safe_area(pageOptions?: helper.PageOptions) {
        const snippet = `
        <FlexboxLayout id="flex" flexDirection="column" backgroundColor="Crimson">
            <Label id="child0" backgroundColor="white" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod fermentum erat, eu vehicula nunc scelerisque quis. Aenean consequat elit sed lacus aliquam consequat." />
            <Label id="child1" flexGrow="1" backgroundColor="green" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod fermentum erat, eu vehicula nunc scelerisque quis. Aenean consequat elit sed lacus aliquam consequat." />
            <Label id="child2" backgroundColor="red" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod fermentum erat, eu vehicula nunc scelerisque quis. Aenean consequat elit sed lacus aliquam consequat." />
        </FlexboxLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root, child0, child2 }) => {
                const insets = root.getSafeAreaInsets();

                equal(left(child0), insets.left, `${child0}.left - actual: ${left(child0)} expected: ${insets.left}`);
                equal(top(child0), insets.top, `${child0}.top - actual: ${top(child0)} expected: ${insets.top}`);
                equal(right(child0), width(root) - insets.right, `${child0}.right - actual: ${right(child0)} expected: ${width(root) - insets.right}`);

                equal(right(child2), width(root) - insets.right, `${child2}.right - actual: ${right(child2)} expected: ${width(root) - insets.right}`);
                equal(bottom(child2), height(root) - insets.bottom, `${child2}.bottom - actual: ${bottom(child2)} expected: ${height(root) - insets.bottom}`);
                equal(right(child2), width(root) - insets.right, `${child2}.right - actual: ${right(child2)} expected: ${width(root) - insets.right}`);
            },
            pageOptions
        );
    }

    public test_flex_column_children_components_in_safe_area_action_bar() {
        this.flex_column_children_components_in_safe_area({ actionBar: true });
    }

    public test_flex_column_children_components_in_safe_area_action_bar_hidden() {
        this.flex_column_children_components_in_safe_area({ actionBarHidden: true });
    }

    public test_flex_column_children_components_in_safe_area_tab_bar() {
        this.flex_column_children_components_in_safe_area({ tabBar: true });
    }

    private flex_row_children_components_in_safe_area(pageOptions?: helper.PageOptions) {
        const snippet = `
        <FlexboxLayout id="flex" flexDirection="row" backgroundColor="Crimson">
            <Label id="child0" backgroundColor="white" text="Lorem" />
            <Label id="child1" flexGrow="1" backgroundColor="green" text="Lorem" />
            <Label id="child2" backgroundColor="red" text="Lorem" />
        </FlexboxLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root, child0, child2 }) => {
                const insets = root.getSafeAreaInsets();

                equal(bottom(child0), height(root) - insets.bottom, `${child0}.bottom - actual: ${bottom(child0)} expected: ${height(root) - insets.bottom}`);
                equal(left(child0), insets.left, `${child0}.left - actual: ${left(child0)} expected: ${insets.left}`);
                equal(top(child0), insets.top, `${child0}.top - actual: ${top(child0)} expected: ${insets.top}`);

                equal(top(child2), insets.top, `${child2}.top - actual: ${top(child2)} expected: ${insets.top}`);
                equal(right(child2), width(root) - insets.right, `${child2}.right - actual: ${right(child2)} expected: ${width(root) - insets.right}`);
                equal(bottom(child2), height(root) - insets.bottom, `${child2}.bottom - actual: ${bottom(child2)} expected: ${height(root) - insets.bottom}`);
            },
            pageOptions
        );
    }

    public test_flex_row_children_components_in_safe_area_action_bar() {
        this.flex_row_children_components_in_safe_area({ actionBar: true });
    }

    public test_flex_row_children_components_in_safe_area_action_bar_hidden() {
        this.flex_row_children_components_in_safe_area({ actionBarHidden: true });
    }

    public test_flex_row_children_components_in_safe_area_tab_bar() {
        this.flex_row_children_components_in_safe_area({ tabBar: true });
    }

    private flex_column_nested_layouts_beyond_safe_area(pageOptions?: helper.PageOptions) {
        const snippet = `
        <FlexboxLayout id="flex" flexDirection="column">
            <StackLayout id="child0" backgroundColor="white">
                <Label text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod fermentum erat, eu vehicula nunc scelerisque quis. Aenean consequat elit sed lacus aliquam consequat."></Label>
            </StackLayout>
            <StackLayout id="child1" flexGrow="1" backgroundColor="green">
                <Label text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod fermentum erat, eu vehicula nunc scelerisque quis. Aenean consequat elit sed lacus aliquam consequat."></Label>
            </StackLayout>
            <StackLayout id="child2" backgroundColor="red">
                <Label text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod fermentum erat, eu vehicula nunc scelerisque quis. Aenean consequat elit sed lacus aliquam consequat."></Label>
            </StackLayout>
        </FlexboxLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root, child0, child1, child2 }) => {
                isLeftAlignedWith(root, child0);
                isTopAlignedWith(root, child0);
                isRightAlignedWith(root, child0);

                isLeftAlignedWith(root, child2);
                isBottomAlignedWith(root, child2);
                isRightAlignedWith(root, child2);

                const sumOfChildrenHeights = height(child0) + height(child1) + height(child2);
                equal(height(root), sumOfChildrenHeights, `flex height <${height(root)}> is NOT equal to sum of its children's heights <${sumOfChildrenHeights}>`);
            },
            pageOptions
        );
    }

    public test_flex_column_nested_layouts_beyond_safe_area_action_bar() {
        this.flex_column_nested_layouts_beyond_safe_area({ actionBar: true });
    }

    public test_flex_column_nested_layouts_beyond_safe_area_action_bar_hidden() {
        this.flex_column_nested_layouts_beyond_safe_area({ actionBarHidden: true });
    }

    public test_flex_column_nested_layouts_beyond_safe_area_tab_bar() {
        this.flex_column_nested_layouts_beyond_safe_area({ tabBar: true });
    }

    private flex_row_nested_layouts_beyond_safe_area(pageOptions?: helper.PageOptions) {
        const snippet = `
        <FlexboxLayout id="flex" flexDirection="row">
            <StackLayout id="child0" backgroundColor="white">
                <Label text="Lorem"></Label>
            </StackLayout>
            <StackLayout id="child1" flexGrow="1" backgroundColor="green">
                <Label text="Lorem"></Label>
            </StackLayout>
            <StackLayout id="child2" backgroundColor="red">
                <Label text="Lorem"></Label>
            </StackLayout>
        </FlexboxLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root, child0, child1, child2 }) => {
                isBottomAlignedWith(root, child0);
                isLeftAlignedWith(root, child0);
                isTopAlignedWith(root, child0);

                isTopAlignedWith(root, child2);
                isRightAlignedWith(root, child2);
                isBottomAlignedWith(root, child2);

                const sumOfChildrenWidths = width(child0) + width(child1) + width(child2);
                equal(width(root), sumOfChildrenWidths, `flex width <${width(root)}> is NOT equal to sum of its children's width <${sumOfChildrenWidths}>`);
            },
            pageOptions
        );
    }

    public test_flex_row_nested_layouts_beyond_safe_area_action_bar() {
        this.flex_row_nested_layouts_beyond_safe_area({ actionBar: true });
    }

    public test_flex_row_nested_layouts_beyond_safe_area_action_bar_hidden() {
        this.flex_row_nested_layouts_beyond_safe_area({ actionBarHidden: true });
    }

    public test_flex_row_nested_layouts_beyond_safe_area_tab_bar() {
        this.flex_row_nested_layouts_beyond_safe_area({ tabBar: true });
    }

    // Grid
    private getGridViews(template: string) {
        let root = parse(template);
        return {
            root,
            grid: root.getViewById("grid") as GridLayout,
            cells: [
                [root.getViewById("cell00") as view.View, root.getViewById("cell01") as view.View, root.getViewById("cell02") as view.View],
                [root.getViewById("cell10") as view.View, root.getViewById("cell11") as view.View, root.getViewById("cell12") as view.View],
                [root.getViewById("cell20") as view.View, root.getViewById("cell21") as view.View, root.getViewById("cell22") as view.View]
            ]
        };
    };

    private grid_layout_in_full_screen(pageOptions?: helper.PageOptions) {
        const snippet = `
        <GridLayout id="grid" backgroundColor="Crimson"></GridLayout>
        `;

        this.executeSnippet(
            this.getGridViews(snippet),
            this.noop,
            ({ root }) => {
                this.layout_in_full_screen_test(root, pageOptions);
            },
            pageOptions
        );
    }

    public test_grid_layout_in_full_screen_action_bar() {
        this.grid_layout_in_full_screen({ actionBar: true });
    }

    public test_grid_layout_in_full_screen_action_bar_hidden() {
        this.grid_layout_in_full_screen({ actionBarHidden: true });
    }

    public test_grid_layout_in_full_screen_action_bar_flat() {
        this.grid_layout_in_full_screen({ actionBarFlat: true });
    }

    public test_grid_layout_in_full_screen_tab_bar() {
        this.grid_layout_in_full_screen({ tabBar: true });
    }

    public test_grid_layout_in_full_screen_tab_bar_action_bar() {
        this.grid_layout_in_full_screen({ actionBar: true, tabBar: true });
    }

    public test_grid_insets_top_action_bar() {
        const snippet = `
        <GridLayout id="grid" backgroundColor="Crimson"></GridLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root }) => { 
                this.layout_insets_top_action_bar_test(root);
            },
            { actionBar: true }
        );
    }

    public test_grid_insets_top_action_bar_hidden() {
        const snippet = `
        <GridLayout id="grid" backgroundColor="Crimson"></GridLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root }) => { 
                this.layout_insets_top_action_bar_hidden_test(root);
            },
            { actionBarHidden: true }
        );
    }

    public test_grid_insets_top_action_bar_flat() {
        const snippet = `
        <GridLayout id="grid" backgroundColor="Crimson"></GridLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root }) => { 
                this.layout_insets_top_action_bar_flat_test(root);
            },
            { actionBarFlat: true }
        );
    }

    public test_grid_insets_top_tab_bar_flat() {
        const snippet = `
        <GridLayout id="grid" backgroundColor="Crimson"></GridLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root }) => { 
                this.layout_insets_top_action_bar_hidden_test(root);
            },
            { tabBar: true }
        );
    }

    public test_grid_insets_top_tab_bar_action_bar_flat() {
        const snippet = `
        <GridLayout id="grid" backgroundColor="Crimson"></GridLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root }) => { 
                this.layout_insets_top_action_bar_test(root);
            },
            { actionBar: true, tabBar: true }
        );
    }

    private grid_component_cells_layout_in_safe_area(pageOptions?: helper.PageOptions) {
        const snippet = `
        <GridLayout id="grid" rows="*, *, *" columns="*, *, *" backgroundColor="Crimson">
            <Label row="0" col="0" id="cell00" text="overflowing text, overflowing text"></Label>
            <Label row="0" col="1" id="cell01" text="overflowing text, overflowing text"></Label>
            <Label row="0" col="2" id="cell02" text="overflowing text, overflowing text"></Label>
            <Label row="1" col="0" id="cell10" text="overflowing text, overflowing text"></Label>
            <Label row="1" col="1" id="cell11" text="overflowing text, overflowing text"></Label>
            <Label row="1" col="2" id="cell12" text="overflowing text, overflowing text"></Label>
            <Label row="2" col="0" id="cell20" text="overflowing text, overflowing text"></Label>
            <Label row="2" col="1" id="cell21" text="overflowing text, overflowing text"></Label>
            <Label row="2" col="2" id="cell22" text="overflowing text, overflowing text"></Label>
        </GridLayout>
        `;

        this.executeSnippet(
            this.getGridViews(snippet),
            this.noop,
            ({ root, grid, cells }) => {
                const insets = root.getSafeAreaInsets();

                equal(left(cells[0][0]), insets.left, `cell00 left actual:<${left(cells[0][0])}> expected:<${insets.left}>`);
                equal(left(cells[1][0]), insets.left, `cell10 left actual:<${left(cells[1][0])}> expected:<${insets.left}>`);
                equal(left(cells[2][0]), insets.left, `cell20 left actual:<${left(cells[2][0])}> expected:<${insets.left}>`);

                isBelowWith(grid, cells[0][0], insets.top);
                isBelowWith(grid, cells[0][1], insets.top);
                isBelowWith(grid, cells[0][2], insets.top);

                equal(right(cells[0][2]), width(grid) - insets.right, `cell02 left actual:<${left(cells[0][2])}> expected:<${width(grid) - insets.right}>`);
                equal(right(cells[1][2]), width(grid) - insets.right, `cell12 left actual:<${left(cells[1][2])}> expected:<${width(grid) - insets.right}>`);
                equal(right(cells[2][2]), width(grid) - insets.right, `cell22 left actual:<${left(cells[2][2])}> expected:<${width(grid) - insets.right}>`);

                isAboveWith(cells[2][0], grid, insets.bottom);
                isAboveWith(cells[2][1], grid, insets.bottom);
                isAboveWith(cells[2][2], grid, insets.bottom);

                closeEnough(height(cells[0][1]), height(cells[1][1]), `cell height should be equal - cell01<${height(cells[0][1])}> - cell11<${height(cells[1][1])}>`);
                closeEnough(height(cells[1][1]), height(cells[2][1]), `cell height should be equal - cell11<${height(cells[1][1])}> - cell21<${height(cells[2][1])}>`);
                const sumOfLabelHeightAndInsets = insets.top + height(cells[0][1]) + height(cells[1][1]) + height(cells[2][1]) + insets.bottom;
                closeEnough(height(grid), sumOfLabelHeightAndInsets, `grid height<${height(grid)}> sum of labels height and insets<${sumOfLabelHeightAndInsets}>`);

                closeEnough(width(cells[1][0]), width(cells[1][1]), `cell width should be equal - cell10<${width(cells[1][0])}> - cell11<${width(cells[1][1])}>`);
                closeEnough(width(cells[1][1]), width(cells[1][2]), `cell width should be equal - cell11<${width(cells[1][1])}> - cell12<${width(cells[1][2])}>`);
                const sumOfLabelWidthsAndInsets = insets.left + width(cells[1][0]) + width(cells[1][1]) + width(cells[1][2]) + insets.right;
                equal(width(grid), sumOfLabelWidthsAndInsets, `grid width<${width(grid)}> sum of nested grids width and insets<${sumOfLabelWidthsAndInsets}>`);
            },
            pageOptions
        );
    }

    public test_grid_component_cells_layout_in_safe_area_action_bar() {
        this.grid_component_cells_layout_in_safe_area({ actionBar: true });
    }

    public test_grid_component_cells_layout_in_safe_area_action_bar_hidden() {
        this.grid_component_cells_layout_in_safe_area({ actionBarHidden: true });
    }

    public test_grid_component_cells_layout_in_safe_area_tab_bar() {
        this.grid_component_cells_layout_in_safe_area({ tabBar: true });
    }

    private grid_nested_grid_cells_layout_beyond_safe_area(pageOptions?: helper.PageOptions) {
        const snippet = `
        <GridLayout id="grid" rows="*, *, *" columns="*, *, *" backgroundColor="Crimson">
            <GridLayout row="0" col="0" id="cell00" backgroundColor="SkyBlue"></GridLayout>
            <GridLayout row="0" col="1" id="cell01" backgroundColor="Indigo"></GridLayout>
            <GridLayout row="0" col="2" id="cell02" backgroundColor="Crimson"></GridLayout>
            <GridLayout row="1" col="0" id="cell10" backgroundColor="Chocolate"></GridLayout>
            <GridLayout row="1" col="1" id="cell11" backgroundColor="Cornsilk"></GridLayout>
            <GridLayout row="1" col="2" id="cell12" backgroundColor="BurlyWood"></GridLayout>
            <GridLayout row="2" col="0" id="cell20" backgroundColor="GoldenRod"></GridLayout>
            <GridLayout row="2" col="1" id="cell21" backgroundColor="Khaki"></GridLayout>
            <GridLayout row="2" col="2" id="cell22" backgroundColor="IndianRed"></GridLayout>
        </GridLayout>
        `;

        this.executeSnippet(
            this.getGridViews(snippet),
            this.noop,
            ({ root, grid, cells }) => {
                isLeftAlignedWith(grid, cells[0][0]);
                isLeftAlignedWith(grid, cells[1][0]);
                isLeftAlignedWith(grid, cells[2][0]);

                isTopAlignedWith(grid, cells[0][0]);
                isTopAlignedWith(grid, cells[0][1]);
                isTopAlignedWith(grid, cells[0][2]);

                isRightAlignedWith(grid, cells[0][2]);
                isRightAlignedWith(grid, cells[1][2]);
                isRightAlignedWith(grid, cells[2][2]);

                isBottomAlignedWith(grid, cells[2][0]);
                isBottomAlignedWith(grid, cells[2][1]);
                isBottomAlignedWith(grid, cells[2][2]);

                check(height(cells[0][1]) >= height(cells[1][1]), `cell01 height<${height(cells[0][1])}> not greater or equal cell11 height<${height(cells[1][1])}>`);
                lessOrCloseEnough(height(cells[1][1]), height(cells[2][1]), `cell11 height<${height(cells[1][1])}> not less or equal cell21 height<${height(cells[2][1])}>`);
                const sumOfNestedGridHeights = height(cells[0][1]) + height(cells[1][1]) + height(cells[2][1]);
                equal(height(grid), sumOfNestedGridHeights, `grid height<${height(grid)}> sum of nested grids height <${sumOfNestedGridHeights}>`);

                check(width(cells[1][0]) >= width(cells[1][1]), `cell10 width<${width(cells[1][0])}> not greater or equal cell11 width<${width(cells[1][1])}>`);
                check(width(cells[1][1]) <= width(cells[1][2]), `cell11 width<${width(cells[1][1])}> not less or equal cell12 width<${width(cells[1][2])}>`);
                const sumOfNestedGridWidths = width(cells[1][0]) + width(cells[1][1]) + width(cells[1][2])
                equal(width(grid), sumOfNestedGridWidths, `grid width<${width(grid)}> sum of nested grids width <${sumOfNestedGridWidths}>`);
            },
            pageOptions
        );
    }

    public test_grid_nested_grid_cells_layout_beyond_safe_area_action_bar() {
        this.grid_nested_grid_cells_layout_beyond_safe_area({ actionBar: true });
    }

    public test_grid_nested_grid_cells_layout_beyond_safe_area_action_bar_hidden() {
        this.grid_nested_grid_cells_layout_beyond_safe_area({ actionBarHidden: true });
    }

    public test_grid_nested_grid_cells_layout_beyond_safe_area_tab_bar() {
        this.grid_nested_grid_cells_layout_beyond_safe_area({ tabBar: true });
    }

    // Stack
    private stack_in_full_screen(pageOptions?: helper.PageOptions) {
        const snippet = `
        <StackLayout id="stack" backgroundColor="Crimson"></StackLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root }) => {
                this.layout_in_full_screen_test(root, pageOptions);
            },
            pageOptions
        );
    }

    public test_stack_in_full_screen_action_bar() {
        this.stack_in_full_screen({ actionBar: true });
    }

    public test_stack_in_full_screen_action_bar_hidden() {
        this.stack_in_full_screen({ actionBarHidden: true });
    }

    public test_stack_in_full_screen_action_bar_flat() {
        this.stack_in_full_screen({ actionBarFlat: true });
    }

    public test_stack_in_full_screen_tab_bar() {
        this.stack_in_full_screen({ tabBar: true });
    }

    public test_stack_in_full_screen_tab_bar_action_bar() {
        this.stack_in_full_screen({ actionBar: true, tabBar: true });
    }

    public test_stack_insets_top_action_bar() {
        const snippet = `
        <StackLayout id="stack" backgroundColor="Crimson"></StackLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root }) => { 
                this.layout_insets_top_action_bar_test(root);
            },
            { actionBar: true }
        );
    }

    public test_stack_insets_top_action_bar_hidden() {
        const snippet = `
        <StackLayout id="stack" backgroundColor="Crimson"></StackLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root }) => { 
                this.layout_insets_top_action_bar_hidden_test(root);
            },
            { actionBarHidden: true }
        );
    }

    public test_stack_insets_top_action_bar_flat() {
        const snippet = `
        <StackLayout id="stack" backgroundColor="Crimson"></StackLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root }) => { 
                this.layout_insets_top_action_bar_flat_test(root);
            },
            { actionBarFlat: true }
        );
    }

    public test_stack_insets_top_tab_bar_flat() {
        const snippet = `
        <StackLayout id="stack" backgroundColor="Crimson"></StackLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root }) => { 
                this.layout_insets_top_action_bar_hidden_test(root);
            },
            { tabBar: true }
        );
    }

    public test_stack_insets_top_tab_bar_action_bar_flat() {
        const snippet = `
        <StackLayout id="stack" backgroundColor="Crimson"></StackLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root }) => { 
                this.layout_insets_top_action_bar_test(root);
            },
            { actionBar: true, tabBar: true }
        );
    }

    private stack_horizontal_children_components_in_safe_area(pageOptions?: helper.PageOptions) {
        const snippet = `
        <StackLayout id="stack" orientation="horizontal" backgroundColor="Crimson">
            <Label id="child0" text="123"></Label>
            <Label id="child1" text="456"></Label>
        </StackLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root, child0, child1 }) => {
                const insets = root.getSafeAreaInsets();
                equal(left(child0), insets.left, `${child0}.left - actual: ${left(child0)} expected: ${insets.left}`);
                equal(top(child0), insets.top, `${child0}.top - actual: ${top(child0)} expected: ${insets.top}`);
                equal(bottom(child0), height(root) - insets.bottom, `${child0}.bottom - actual: ${bottom(child0)} expected: ${height(root) - insets.bottom}`);
                isLeftWith(child0, child1, width(child0));
            },
            pageOptions
        );
    }

    public test_stack_horizontal_children_components_in_safe_area_action_bar() {
        this.stack_horizontal_children_components_in_safe_area({ actionBar: true });
    }

    public test_stack_horizontal_children_components_in_safe_area_action_bar_hidden() {
        this.stack_horizontal_children_components_in_safe_area({ actionBarHidden: true });
    }

    public test_stack_horizontal_children_components_in_safe_area_tab_bar() {
        this.stack_horizontal_children_components_in_safe_area({ tabBar: true });
    }

    private stack_vertical_children_components_in_safe_area(pageOptions?: helper.PageOptions) {
        const snippet = `
        <StackLayout id="stack" orientation="vertical" backgroundColor="Crimson">
            <Label id="child0" text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
            <Label id="child1" text="overflowing text, overflowing text, overflowing text, overflowing text, overflowing text, overflowing text"></Label>
        </StackLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root, child0, child1 }) => {
                const insets = root.getSafeAreaInsets();
                equal(left(child0), insets.left, `${child0}.left - actual: ${left(child0)} expected: ${insets.left}`);
                equal(top(child0), insets.top, `${child0}.top - actual: ${top(child0)} expected: ${insets.top}`);
                equal(right(child0), width(root) - insets.right, `${child0}.right - actual: ${right(child0)} expected: ${width(root) - insets.right}`);
                isBelowWith(child0, child1, height(child0));
            },
            pageOptions
        );
    }

    public test_stack_vertical_children_components_in_safe_area_action_bar() {
        this.stack_vertical_children_components_in_safe_area({ actionBar: true });
    }

    public test_stack_vertical_children_components_in_safe_area_action_bar_hidden() {
        this.stack_vertical_children_components_in_safe_area({ actionBarHidden: true });
    }

    public test_stack_vertical_children_components_in_safe_area_tab_bar() {
        this.stack_vertical_children_components_in_safe_area({ tabBar: true });
    }

    private stack_nested_layouts_beyond_safe_area(pageOptions?: helper.PageOptions) {
        const snippet = `
        <StackLayout id="stack" backgroundColor="Crimson">
            <StackLayout id="child0" 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>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root, child0 }) => {
                isLeftAlignedWith(root, child0);
                isTopAlignedWith(root, child0);
                isRightAlignedWith(root, child0);
            },
            pageOptions
        );
    }

    public test_stack_nested_layouts_beyond_safe_area_action_bar() {
        this.stack_nested_layouts_beyond_safe_area({ actionBar: true });
    }

    public test_stack_nested_layouts_beyond_safe_area_action_bar_hidden() {
        this.stack_nested_layouts_beyond_safe_area({ actionBarHidden: true });
    }

    public test_stack_nested_layouts_beyond_safe_area_tab_bar() {
        this.stack_nested_layouts_beyond_safe_area({ tabBar: true });
    }

    // Wrap
    private wrap_in_full_screen(pageOptions?: helper.PageOptions) {
        const snippet = `
        <WrapLayout id="wrap" backgroundColor="Crimson"></WrapLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root }) => {
                this.layout_in_full_screen_test(root, pageOptions);
            },
            pageOptions
        );
    }

    public test_wrap_in_full_screen_action_bar() {
        this.wrap_in_full_screen({ actionBar: true });
    }

    public test_wrap_in_full_screen_action_bar_hidden() {
        this.wrap_in_full_screen({ actionBarHidden: true });
    }

    public test_wrap_in_full_screen_action_bar_flat() {
        this.wrap_in_full_screen({ actionBarFlat: true });
    }

    public test_wrap_in_full_screen_tab_bar() {
        this.wrap_in_full_screen({ tabBar: true });
    }

    public test_wrap_in_full_screen_tab_bar_action_bar() {
        this.wrap_in_full_screen({ actionBar: true, tabBar: true });
    }

    public test_wrap_insets_top_action_bar() {
        const snippet = `
        <WrapLayout id="wrap" backgroundColor="Crimson"></WrapLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root }) => { 
                this.layout_insets_top_action_bar_test(root);
            },
            { actionBar: true }
        );
    }

    public test_wrap_insets_top_action_bar_hidden() {
        const snippet = `
        <WrapLayout id="wrap" backgroundColor="Crimson"></WrapLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root }) => { 
                this.layout_insets_top_action_bar_hidden_test(root);
            },
            { actionBarHidden: true }
        );
    }

    public test_wrap_insets_top_action_bar_flat() {
        const snippet = `
        <WrapLayout id="wrap" backgroundColor="Crimson"></WrapLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root }) => { 
                this.layout_insets_top_action_bar_flat_test(root);
            },
            { actionBarFlat: true }
        );
    }

    public test_wrap_insets_top_tab_bar_flat() {
        const snippet = `
        <WrapLayout id="wrap" backgroundColor="Crimson"></WrapLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root }) => { 
                this.layout_insets_top_action_bar_hidden_test(root);
            },
            { tabBar: true }
        );
    }

    public test_wrap_insets_top_tab_bar_action_bar_flat() {
        const snippet = `
        <WrapLayout id="wrap" backgroundColor="Crimson"></WrapLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root }) => { 
                this.layout_insets_top_action_bar_test(root);
            },
            { actionBar: true, tabBar: true }
        );
    }

    private wrap_horizontal_children_components_in_safe_area(pageOptions?: helper.PageOptions) {
        const snippet = `
        <WrapLayout id="wrap" orientation="horizontal">
            <Button id="child0" text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet" height="100%"></Button>
            <Button id="child1" text="H" backgroundColor="Pink"></Button>
        </WrapLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root, child0, child1 }) => {
                const insets = root.getSafeAreaInsets();
                equal(left(child0), insets.left, `${child0}.left - actual: ${left(child0)} expected: ${insets.left}`);
                equal(top(child0), insets.top, `${child0}.top - actual: ${top(child0)} expected: ${insets.top}`);
                equal(right(child0), width(root) - insets.right, `${child0}.right - actual: ${right(child0)} expected: ${width(root) - insets.right}`);
                equal(bottom(child0), height(root) - insets.bottom, `${child0}.bottom - actual: ${bottom(child0)} expected: ${height(root) - insets.bottom}`);
                equal(height(child1), 0, `${child1} has been laid out, but should not`);
                equal(width(child1), 0, `${child1} has been laid out, but should not`);
            },
            pageOptions
        );
    }

    public test_wrap_horizontal_children_components_in_safe_area_action_bar() {
        this.wrap_horizontal_children_components_in_safe_area({ actionBar: true });
    }

    public test_wrap_horizontal_children_components_in_safe_area_action_bar_hidden() {
        this.wrap_horizontal_children_components_in_safe_area({ actionBarHidden: true });
    }

    public test_wrap_horizontal_children_components_in_safe_area_tab_bar() {
        this.wrap_horizontal_children_components_in_safe_area({ tabBar: true });
    }

    private wrap_vertical_children_components_in_safe_area(pageOptions?: helper.PageOptions) {
        const snippet = `
        <WrapLayout id="wrap" orientation="vertical">
            <Button id="child0" text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet" height="100%"></Button>
            <Button id="child1" text="V" backgroundColor="Pink"></Button>
        </WrapLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root, child0, child1 }) => {
                const insets = root.getSafeAreaInsets();
                equal(left(child0), insets.left, `${child0}.left - actual: ${left(child0)} expected: ${insets.left}`);
                equal(top(child0), insets.top, `${child0}.top - actual: ${top(child0)} expected: ${insets.top}`);
                equal(right(child0), width(root) - insets.right, `${child0}.right - actual: ${right(child0)} expected: ${width(root) - insets.right}`);
                equal(bottom(child0), height(root) - insets.bottom, `${child0}.bottom - actual: ${bottom(child0)} expected: ${height(root) - insets.bottom}`);
                equal(height(child1), 0, `${child1} has been laid out, but should not`);
                equal(width(child1), 0, `${child1} has been laid out, but should not`);
            },
            pageOptions
        );
    }

    public test_wrap_vertical_children_components_in_safe_area_action_bar() {
        this.wrap_vertical_children_components_in_safe_area({ actionBar: true });
    }

    public test_wrap_vertical_children_components_in_safe_area_action_bar_hidden() {
        this.wrap_vertical_children_components_in_safe_area({ actionBarHidden: true });
    }

    public test_wrap_vertical_children_components_in_safe_area_tab_bar() {
        this.wrap_vertical_children_components_in_safe_area({ tabBar: true });
    }

    private wrap_nested_layouts_beyond_safe_area(pageOptions?: helper.PageOptions) {
        const snippet = `
        <WrapLayout id="wrap" backgroundColor="Crimson">
            <WrapLayout id="child0" backgroundColor="SkyBlue">
                <Button text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"/>
            </WrapLayout>
        </WrapLayout>
        `;

        this.executeSnippet(
            this.getViews(snippet),
            this.noop,
            ({ root, child0 }) => {
                isLeftAlignedWith(root, child0);
                isTopAlignedWith(root, child0);
                isRightAlignedWith(root, child0);
            },
            pageOptions
        );
    }

    public test_wrap_nested_layouts_beyond_safe_area_action_bar() {
        this.wrap_nested_layouts_beyond_safe_area({ actionBar: true });
    }

    public test_wrap_nested_layouts_beyond_safe_area_action_bar_hidden() {
        this.wrap_nested_layouts_beyond_safe_area({ actionBarHidden: true });
    }

    public test_wrap_nested_layouts_beyond_safe_area_tab_bar() {
        this.wrap_nested_layouts_beyond_safe_area({ tabBar: true });
    }
}

export function createTestCase(): SafeAreaTests {
    return new SafeAreaTests();
}